/* Modo oscuro MegaFlux — override global sobre Bootstrap 3 + Site.css.
   Paleta oficial: acento #70D052 (Pantone 7488 C), base #0D192B (Pantone 296 C).
   Se apoya en las clases genéricas de Bootstrap (panel/table/form-control/btn)
   que ya usa TODO el sitio, para cubrir todas las páginas sin tocarlas 1x1. */

:root {
    --mf-bg: #0d192b;
    --mf-surface: #16233a;
    --mf-surface-alt: #1c2e4a;
    --mf-border: #2a3d5c;
    --mf-text: #e8ecef;
    --mf-text-muted: #9aa8bd;
    --mf-accent: #70d052;
    --mf-accent-dark: #58ab3d;
    --mf-danger: #ff6b6b;
}

html, body {
    background-color: var(--mf-bg) !important;
    color: var(--mf-text) !important;
}

.container, .container-fluid, .row {
    color: var(--mf-text);
}

h1, h2, h3, h4, h5, h6, .lead, p, span, label, .control-label {
    color: var(--mf-text);
}

a {
    color: var(--mf-accent);
}
a:hover, a:focus {
    color: #8fe873;
}

/* Paneles (encabezados verdes de OP/Cliente/etc, tarjetas, wells) */
.panel {
    background-color: var(--mf-surface) !important;
    border-color: var(--mf-border) !important;
}
.panel-heading {
    background-color: var(--mf-surface-alt) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}
.panel-body {
    background-color: var(--mf-surface);
    color: var(--mf-text);
}
.panel-primary > .panel-heading,
.row.encabezado {
    background-color: rgba(112, 208, 82, 0.12) !important;
    border-left: 3px solid var(--mf-accent);
    color: var(--mf-text) !important;
}
/* Bloque de datos de una ficha (Aviso de Cambio, etc). La jerarquía va al
   revés de como estaba: la ETIQUETA es lo secundario —chica y en gris— y el
   VALOR es lo que se lee. Y sin el margen de <p> de Bootstrap, que inflaba la
   cabecera a media pantalla para diez datos. */
.row.encabezado {
    padding: 10px 4px;
}
.row.encabezado p {
    margin: 0;
    padding: 5px 0;
    line-height: 1.35;
}
.row.encabezado strong, .row.encabezado b {
    display: block;
    color: var(--mf-text-muted);
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.row.encabezado p > .literal, .row.encabezado p {
    color: var(--mf-text);
}

/* El textarea de descripción: alto suficiente para leerlo de un vistazo, sin
   el justificado que abría huecos entre palabras. */
textarea.form-control {
    text-align: left;
    min-height: 90px;
    line-height: 1.5;
}
/* Dentro de un grid ese alto mínimo infla CADA renglón a ~100px: ahí el
   textarea es una celda editable de un renglón (Rows="1"), no una ficha. */
.table textarea.form-control {
    min-height: 0;
    height: auto;
}
/* Paneles propios de Panel.css (clases con guión bajo, no las de Bootstrap):
   el buscador colapsable de Tornillería, los tres Gantt, las fichas de
   Calidad — 14 páginas. Panel.css los pinta en BLANCO, así que el tema nunca
   los alcanzaba; y como sus etiquetas sí heredaban el texto claro del tema,
   quedaban ilegibles sobre ese blanco. */
.hs_panel {
    background: var(--mf-surface) !important;
    border-color: var(--mf-border) !important;
}
.well {
    background-color: var(--mf-surface) !important;
    border-color: var(--mf-border) !important;
    color: var(--mf-text);
}

/* Tablas / grids (DataTables incluido) */
table, .table {
    color: var(--mf-text) !important;
    background-color: var(--mf-surface);
}
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-color: var(--mf-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--mf-surface) !important;
}
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--mf-surface-alt) !important;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    border-color: var(--mf-border) !important;
}
.table-hover > tbody > tr:hover {
    background-color: rgba(112, 208, 82, 0.10) !important;
}
.table > thead {
    background-color: var(--mf-surface-alt);
}

/* Formularios */
.form-control, input[type=text], input[type=password], input[type=number],
input[type=date], textarea, select {
    background-color: var(--mf-surface-alt) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}
.form-control:focus {
    border-color: var(--mf-accent) !important;
    box-shadow: 0 0 0 0.15rem rgba(112, 208, 82, 0.25) !important;
}
.form-control::placeholder {
    color: var(--mf-text-muted);
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--mf-surface) !important;
    color: var(--mf-text-muted) !important;
}
.checkbox label, .radio label {
    color: var(--mf-text);
}

/* `btn-rubyred` NO es el botón de peligro: es el de ACCIÓN PRIMARIA (96 usos,
   23 de ellos "Guardar"). Va en verde de marca, sólido — es la acción principal
   de la pantalla, no una acción de fila. Lo destructivo usa `btn-danger`. */
.btn-rubyred {
    background-color: var(--mf-accent-dark) !important;
    border-color: var(--mf-accent-dark) !important;
    color: #ffffff !important;
}
.btn-rubyred:hover, .btn-rubyred:focus, .btn-rubyred.focus,
.btn-rubyred:active, .btn-rubyred.active {
    background-color: var(--mf-accent) !important;
    border-color: var(--mf-accent) !important;
    color: #10240a !important;
}

/* Botones (los semánticos como btn-turquoise ya tienen su propio color de
   fondo y quedan bien sobre oscuro tal cual; solo el default cambia) */
.btn-default {
    background-color: var(--mf-surface-alt);
    color: var(--mf-text);
    border-color: var(--mf-border);
}
.btn-default:hover {
    background-color: var(--mf-border);
}

/* Header de tablas (DataTables) en UNA sola fila: botones Excel/Copiar +
   info "Mostrando X de Y" + buscador + selector de cantidad, en vez de las
   3-4 filas apiladas que traía por defecto (desperdiciaba mucho espacio
   vertical). La tabla se cae a su propia línea debajo. */
.dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
}
.dataTables_wrapper > .dt-buttons,
.dataTables_wrapper > .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
    flex: 0 0 auto;
}
/* Excel/Copiar SIEMPRE a la izquierda; info+buscar+cantidad pegados a la
   derecha junto con los botones de acción (Agregar/Seguimiento).
   Ojo: DataTables arma dos estructuras distintas según la página — en unas
   `.dt-buttons` es hermano del wrapper (Avisos de Cambio) y en otras vive
   DENTRO de `.top` (Estructuras Backlog). Esto cubre ambas: `.top` crece y
   alinea su contenido a la derecha, y si trae `.dt-buttons` adentro, ese se
   ancla a la izquierda con su propio margin-right auto. */
.dataTables_wrapper > .top {
    flex: 1 1 auto;
    justify-content: flex-end;
}
.dataTables_wrapper > .top > .dt-buttons {
    margin-right: auto;
}
.dataTables_wrapper > table {
    flex: 1 1 100%;
    order: 3;
}
.dataTables_wrapper > .bottom {
    flex: 1 1 100%;
    order: 4;
    display: flex;
    justify-content: flex-end;
}
.dataTables_wrapper > .clear {
    flex-basis: 100%;
    order: 5;
}
/* Cabecera del panel cuando aloja los controles de la tabla (los muda ahí el
   script del master, si venía vacía): misma fila de flex que tenía el wrapper,
   con los exportar a la izquierda y el resto pegado a la derecha. */
.panel-heading.mf-barra-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
    padding: 8px 12px;
    min-height: 0;
}
.panel-heading.mf-barra-panel > .top {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 20px;
    row-gap: 8px;
}
.panel-heading.mf-barra-panel > .top > .dt-buttons { margin-right: auto; }
.panel-heading.mf-barra-panel > .dt-buttons,
.panel-heading.mf-barra-panel > .mf-action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.panel-heading.mf-barra-panel > .mf-action-btns { margin-left: auto; }

.dataTables_info, .dataTables_filter, .dataTables_length {
    margin: 0 !important;
    white-space: nowrap;
}
.dataTables_filter label, .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
}
.dataTables_filter input, .dataTables_length select {
    width: auto;
    display: inline-block;
}
/* Selector de cantidad incrustado dentro del texto "Mostrando 1 a [25] de N
   entradas" (lo mueve el script del master page). Va compacto y alineado con
   la línea de texto, no como un control suelto. */
.dataTables_info .len-inline {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0 2px;
    margin: 0 2px;
    vertical-align: baseline;
    font-size: inherit;
    line-height: inherit;
}

/* Botones de exportar de DataTables (Copiar/Excel/PDF) — SOLO los que trae
   el plugin (clase dt-button), no los botones de acción de la página que se
   movieron a este mismo contenedor (esos ya traen su propio color y deben
   conservarlo, p.ej. btn-goldleaf). */
.dt-button, a.dt-button, button.dt-button {
    /* DataTables les pone márgenes propios que varían por página: la separación
       entre Excel y Copiar no era la misma en todos lados. El espaciado lo da
       SOLO el gap del contenedor. */
    margin: 0 !important;
    /* Un escalón MÁS claro que --mf-surface-alt: sobre la banda verde del panel
       este azul se hunde, aunque en la tabla (junto a una fila más oscura) el
       mismo valor se lea claro. Y sin la sombra negra que traía, que lo apagaba. */
    background-color: #263e64 !important;
    color: var(--mf-text) !important;
    border-color: #35507c !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}
.dt-button:hover {
    background-color: var(--mf-border) !important;
    color: var(--mf-accent) !important;
}

/* Botones de acción de la página (Agregar/Seguimiento/etc) que el script
   del master page mueve a esta barra: conservan su color propio y quedan
   pegados al extremo derecho de TODA la fila (después de Buscar/Mostrando),
   igual que vivían antes de juntar todo en un renglón. */
.dataTables_wrapper > .mf-action-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Ghost (verde translúcido + borde y texto verdes): en las columnas de acción
   una parrilla de botones RELLENOS grita más que los datos. */
.btn-goldleaf {
    background-color: rgba(112, 208, 82, 0.28) !important;
    border-color: rgba(112, 208, 82, 0.55) !important;
    /* Texto e ícono en BLANCO: sobre el fondo verde translúcido contrastan mucho
       más que el verde de marca. El feedback de hover lo da el fondo. */
    color: #ffffff !important;
}
.btn-goldleaf:hover, .btn-goldleaf:focus, .btn-goldleaf.focus {
    background-color: rgba(112, 208, 82, 0.45) !important;
    border-color: var(--mf-accent) !important;
    color: #9ceb80 !important;
}
.btn-goldleaf:active, .btn-goldleaf.active {
    background-color: rgba(112, 208, 82, 0.55) !important;
}
/* Botones DESHABILITADOS: Bootstrap 3 les deja el color del .btn base (NEGRO),
   invisible sobre fondo oscuro. Conservan el fondo verde de su columna —para que
   la parrilla se lea pareja— y es el TEXTO el que baja de tono para decir que no
   son clicables. */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    color: rgba(112, 208, 82, 0.60) !important;
    background-color: rgba(112, 208, 82, 0.10) !important;
    border-color: rgba(112, 208, 82, 0.25) !important;
    opacity: 1;
}
/* estructura.png y schedule.png ya vienen en RGBA teñidos de verde con fondo
   transparente: NO les pongas un filtro CSS, se tiñen desde el archivo. */

/* Botones de las columnas de ACCIÓN de los grids: garantizan área de clic aunque
   el contenido sea solo un ícono. */
.btn-accion {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 26px;
    padding: 3px 8px !important;
}
.btn-accion .ico-accion {
    height: 17px;
    width: auto;
    flex: 0 0 auto;
}
.btn-accion .fa {
    font-size: 15px;
}

/* Descripción bajada a su propio renglón (child row de DataTables). La celda
   original se esconde solo visualmente: la columna sigue viva para buscar,
   ordenar y exportar. */
table.mf-con-desc-larga > thead th.col-desc-larga,
table.mf-con-desc-larga > tbody > tr > td.col-desc-larga {
    display: none;
}
/* Celdas de sangría: ocupan la 1ª y la última columna para alinear la
   descripción con la rejilla. Conservan el borde SUPERIOR para que la línea que
   separa las dos subfilas del registro cruce todo el ancho. */
td.mf-desc-margen {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
}
tr.mf-fila-desc > td {
    /* Sin verticales: los bordes de columna no deben atravesar la descripción. */
    border-left: 0 !important;
    border-right: 0 !important;
}
td.mf-desc-larga {
    /* CON borde arriba: separa las dos subfilas del mismo registro. */
    padding-top: 6px !important;
    padding-left: 14px !important;
    color: var(--mf-text);
    white-space: normal;
    line-height: 1.45;
}
/* El rayado de Bootstrap va por nth-of-type, que cuenta TAMBIÉN las filas hijas
   y desfasa el patrón. Se apaga y se usa el odd/even que DataTables pone en las
   filas de datos — la hija hereda el de su madre desde el script del master, así
   que el par comparte fondo y se lee como una sola fila. */
table.mf-con-desc-larga.table-striped > tbody > tr:nth-of-type(odd),
table.mf-con-desc-larga.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}
table.mf-con-desc-larga > tbody > tr.odd,
table.mf-con-desc-larga > tbody > tr.odd > td {
    background-color: var(--mf-surface) !important;
}
table.mf-con-desc-larga > tbody > tr.even,
table.mf-con-desc-larga > tbody > tr.even > td {
    background-color: var(--mf-surface-alt) !important;
}


/* Columnas de botonería centradas. La clase la pone DataTables vía columnDefs,
   así aplica también al <th>. */
td.col-accion, th.col-accion {
    text-align: center !important;
}

/* TODOS los headers centrados vertical y horizontalmente en su celda: los
   de una línea quedaban pegados abajo-izquierda y los de dos líneas
   ("Fecha del / pedido") desalineados contra ellos. */
table.dataTable thead th {
    text-align: center;
    vertical-align: middle !important;
}
/* La flecha de ordenamiento de DataTables se posiciona absoluta a la
   derecha; con el texto centrado hay que dejarle su carril para que no
   se encime. */
table.dataTable thead th {
    padding-right: 22px !important;
}
table.dataTable thead th.col-accion {
    padding-right: 8px !important;
}

/* Botón de revisión: el número va en monoespaciado y con ancho fijo de 2
   dígitos, para que el "1" y el "17" queden alineados entre filas (el hueco
   del dígito faltante se reserva en vez de recorrer el botón). */
.btn-rev {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums;
}
.btn-rev .num-rev {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
}

/* Columna "Avance": la barra usaba el .progress pelón de Bootstrap (20px de
   alto + 20px de margen inferior) y el porcentaje caía DEBAJO como bloque,
   inflando la altura de cada fila. Ahora barra y % van en la misma línea. */
.barWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Barras de progreso de TODO el sitio, vivan o no dentro de un .barWrapper
   (Backlog Máquinas y sus hermanas las ponen sueltas).
   Lleva !important porque el <link> de este tema va ANTES del
   ContentPlaceHolder "Header": los CSS que cada página carga ahí se aplican
   después y, a igual especificidad, ganarían. */
.progress {
    height: 8px !important;
    margin: 0 !important;
    background-color: var(--mf-surface-alt) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.progress-bar {
    background-color: var(--mf-accent) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}
.barWrapper .progress {
    flex: 1 1 auto;
}
.barWrapper small {
    flex: 0 0 auto;
    color: var(--mf-text-muted);
    font-size: 11px;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Menús desplegables (Bootstrap dropdown, listas de proceso, etc) */
.dropdown-menu {
    background-color: var(--mf-surface) !important;
    border-color: var(--mf-border) !important;
}
.dropdown-menu > li > a {
    color: var(--mf-text) !important;
}
.dropdown-menu > li > a:hover {
    background-color: var(--mf-surface-alt) !important;
    color: var(--mf-accent) !important;
}

/* DataTables (buscador, paginación, botones de exportar) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--mf-surface-alt) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--mf-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--mf-accent) !important;
    border-color: var(--mf-accent) !important;
    color: #0d192b !important;
}
.dataTables_wrapper .dataTables_info {
    color: var(--mf-text-muted);
}

/* Modales */
.modal-content {
    background-color: var(--mf-surface) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}
.modal-header, .modal-footer {
    border-color: var(--mf-border) !important;
}

/* Alertas / mensajes de error (ya suavizados con texto amigable en el server) */
.alert-danger, #Results, #Message {
    color: var(--mf-danger) !important;
}

/* Scrollbar (cosmético, WebKit/Blink) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mf-bg); }
::-webkit-scrollbar-thumb { background: var(--mf-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mf-accent-dark); }

/* ── Login ───────────────────────────────────────────────────────────────────
   Era la única pantalla que seguía en claro (tarjeta blanca, campos amarillos),
   y al pasar el logo a texto blanco quedaba invisible sobre ella. */
/* `html` pinta su propio fondo, así que la textura del body ya NO se propaga al
   lienzo: sin estirar el body a la ventana, el patrón acaba donde acaba el
   contenido y debajo queda una banda lisa. El margen del body se va a 0 para
   que el patrón llegue al borde (y de paso muere el scroll horizontal que
   provocan los -15px de `.row` fuera de un `.container`). */
body.login-page {
    background-color: var(--mf-bg) !important;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}
.login-box {
    background: var(--mf-surface) !important;
    border-top-color: var(--mf-accent) !important;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.login-box-body,
.login-box-msg {
    color: var(--mf-text) !important;
}
.login-page .form-control {
    background-color: var(--mf-surface-alt) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}
.login-page .form-control-feedback {
    color: var(--mf-text-muted);
}
.login-politica {
    color: var(--mf-text-muted);
}