/* =====================================================================
   Inventario · Cierre Contable de Período  —  Material Design 3
   ─────────────────────────────────────────────────────────────────────
   Sistema visual senior con design tokens, elevación consistente,
   tipografía Roboto y paleta indigo/blue como primario.
===================================================================== */

/* ───── Design Tokens ───── */
:root {
  /* Paleta primaria Material Indigo */
  --md-primary-50:  #e8eaf6;
  --md-primary-100: #c5cae9;
  --md-primary-300: #7986cb;
  --md-primary-500: #3f51b5;
  --md-primary-700: #303f9f;
  --md-primary-900: #1a237e;

  /* Paleta neutral (Material Grey) */
  --md-surface:       #ffffff;
  --md-surface-2:     #fafbfc;
  --md-surface-3:     #f3f4f6;
  --md-surface-4:     #e8eaed;
  --md-on-surface:    #202124;
  --md-on-surface-md: #5f6368;
  --md-on-surface-lo: #80868b;
  --md-divider:       #e8eaed;
  --md-border:        #dadce0;

  /* Estados semánticos */
  --md-success-bg:  #e8f5e9;
  --md-success-fg:  #2e7d32;
  --md-warning-bg:  #fff3e0;
  --md-warning-fg:  #ef6c00;
  --md-danger-bg:   #ffebee;
  --md-danger-fg:   #c62828;
  --md-info-bg:     #e3f2fd;
  --md-info-fg:     #1565c0;

  /* Zonas del reporte */
  --zone-ini:    #bbdefb;
  --zone-ini-bg: #f4f8ff;
  --zone-ini-fg: #0d47a1;
  --zone-mov:    #ffe082;
  --zone-mov-bg: #fffdf3;
  --zone-mov-fg: #f57f17;
  --zone-aju:    #ef9a9a;
  --zone-aju-bg: #fdf5f6;
  --zone-aju-fg: #b71c1c;
  --zone-fin:    #a5d6a7;
  --zone-fin-bg: #f5fbf7;
  --zone-fin-fg: #1b5e20;
  --zone-cua:    #cfd8dc;
  --zone-cua-bg: #f1f3f5;
  --zone-cua-fg: #37474f;

  /* Elevación (Material elevation system) */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --md-elev-2: 0 1px 5px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --md-elev-3: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --md-elev-6: 0 8px 16px rgba(0,0,0,.10), 0 3px 6px rgba(0,0,0,.06);
  --md-elev-12:0 12px 24px rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.08);
  --md-elev-24:0 24px 48px rgba(0,0,0,.20), 0 0 0 1px rgba(0,0,0,.05);

  /* Radio + animación */
  --md-radius-sm: 6px;
  --md-radius-md: 10px;
  --md-radius-lg: 14px;
  --md-ease:      cubic-bezier(.4, 0, .2, 1);
  --md-fast:      150ms;
  --md-medium:    225ms;

  /* Tipografía */
  --md-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-font-mono: 'Roboto Mono', 'Consolas', monospace;
}

/* ----------- Cards de resumen ejecutivo (Material) ----------- */
.ip-resumen .ip-card-resumen {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-left: 3px solid transparent !important;
    border-radius: var(--md-radius-md);
    padding: .5rem .75rem;
    box-shadow: var(--md-elev-1);
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 48px;
    font-family: var(--md-font);
    transition: box-shadow var(--md-fast) var(--md-ease),
                transform   var(--md-fast) var(--md-ease);
}
.ip-resumen .ip-card-resumen:hover {
    box-shadow: var(--md-elev-2);
    transform: translateY(-1px);
}

.ip-resumen .ip-card-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--md-on-surface-md);
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.2;
    flex-shrink: 0;
}

.ip-resumen .ip-card-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--md-on-surface);
    line-height: 1.15;
    text-align: right;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

.ip-resumen .ip-card-value small.d-block {
    font-size: .68rem;
    line-height: 1.1;
    font-weight: 400;
    color: var(--md-on-surface-lo);
    margin-top: 1px;
}

/* Override de border-left utility classes de Bootstrap */
.ip-resumen .border-primary   { border-left-color: var(--md-primary-500) !important; }
.ip-resumen .border-info      { border-left-color: var(--zone-ini-fg)    !important; }
.ip-resumen .border-success   { border-left-color: var(--zone-fin-fg)    !important; }
.ip-resumen .border-danger    { border-left-color: var(--md-danger-fg)   !important; }
.ip-resumen .border-secondary { border-left-color: var(--md-on-surface-md) !important; }

/* ----------- Wrapper / scroll ----------- */
.ip-wrapper {
    background: #ffffff;
    overflow: visible;
    /* el wrapper también es flex-friendly */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* La tabla ocupa exactamente el espacio que sobra en el viewport.
   El cálculo resta:
     - navbar (~60px)
     - tabs (~50px)
     - barra de filtros + chip (~55px)
     - cards de resumen ejecutivo compactas (~70px)
     - botón "¿Qué significa cada color y flecha?" (~46px)
     - paddings de la card y márgenes (~40px)
   Total ≈ 320px. Si la leyenda se abre, se ajusta el navegador.

   Si el conjunto es más alto que el viewport (móvil), respetamos un mínimo. */
.ip-table-scroll {
    overflow: auto;
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
    box-shadow: var(--md-elev-1);
    /* Alto adaptativo. */
    height: calc(100vh - 340px);
    min-height: 220px;
    max-height: calc(100vh - 240px);
}
/* Custom scrollbars Material */
.ip-table-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.ip-table-scroll::-webkit-scrollbar-thumb {
    background: var(--md-on-surface-lo);
    border: 3px solid var(--md-surface);
    border-radius: 8px;
}
.ip-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-md); }
.ip-table-scroll::-webkit-scrollbar-track { background: var(--md-surface-2); }

/* En el contenedor padre del tab quitamos cualquier padding que infle el alto */
#tablaInventarioPeriodo {
    overflow: hidden;
    max-height: calc(100vh - 220px);
    padding: .5rem .75rem !important;
}

/* La pestaña entera no debe exceder el viewport */
#periodo {
    max-height: calc(100vh - 130px);
    overflow: hidden;
}

/* Compactamos los márgenes del toolbar superior del tab */
#periodo .ip-toolbar { margin-bottom: .5rem !important; }

/* Toolbar superior: estilos Material para los botones principales */
#periodo #btnToggleFiltrosPeriodo,
#periodo #btnTrazabilidadPeriodo,
#periodo #btnRefrescarPeriodo {
    font-family: var(--md-font);
    font-weight: 500;
    font-size: .82rem;
    letter-spacing: .015em;
    border-radius: var(--md-radius-md);
    padding: .4rem .85rem;
    transition: all var(--md-fast) var(--md-ease);
}
#periodo #btnToggleFiltrosPeriodo {
    background: linear-gradient(180deg, #ffd54f 0%, #ffb300 100%);
    border-color: #ffa000;
    color: #3e2723;
    box-shadow: var(--md-elev-1);
}
#periodo #btnToggleFiltrosPeriodo:hover {
    background: linear-gradient(180deg, #ffca28 0%, #ffa000 100%);
    box-shadow: var(--md-elev-2);
    transform: translateY(-1px);
}
#periodo #btnTrazabilidadPeriodo {
    border-color: var(--md-info-fg);
    color: var(--md-info-fg);
}
#periodo #btnTrazabilidadPeriodo:hover {
    background: var(--md-info-bg);
    box-shadow: var(--md-elev-1);
    transform: translateY(-1px);
}
#periodo #btnRefrescarPeriodo:not([disabled]) {
    border-color: var(--md-primary-500);
    color: var(--md-primary-500);
}
#periodo #btnRefrescarPeriodo:not([disabled]):hover {
    background: var(--md-primary-50);
    box-shadow: var(--md-elev-1);
}

#periodo #ipChipPeriodo {
    font-family: var(--md-font);
    background: var(--md-surface) !important;
    border: 1px solid var(--md-primary-100) !important;
    color: var(--md-primary-700) !important;
    border-radius: var(--md-radius-md);
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .015em;
    box-shadow: var(--md-elev-1);
}
#periodo #badgeFiltrosActivosPeriodo {
    background: var(--md-danger-fg) !important;
    border: 2px solid var(--md-surface);
    box-shadow: var(--md-elev-1);
    font-family: var(--md-font);
}

/* ----------- Tabla base (Material Data Table) ----------- */
.ip-table {
    font-family: var(--md-font);
    font-size: .77rem;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    color: var(--md-on-surface);
}

.ip-table th,
.ip-table td {
    vertical-align: middle;
    padding: .55rem .75rem;
    border: 1px solid var(--md-divider);
    line-height: 1.35;
    white-space: nowrap;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

/* Más respiración para la PRIMERA fila del body (despegarla del header) */
.ip-table tbody tr:first-child td {
    padding-top: .85rem;
}
/* Borde fuerte entre thead y tbody para separación visual */
.ip-table tbody tr:first-child td {
    border-top: 2px solid var(--md-primary-100);
}

.ip-table thead th {
    font-weight: 600;
    letter-spacing: .03em;
}

/* Las columnas de identificación pueden hacer wrap */
.ip-table td.ip-id { white-space: normal; }

/* Hover estilo Material */
.ip-table tbody tr {
    transition: background var(--md-fast) var(--md-ease);
}

/* ----------- Sticky: header arriba ----------- */
.ip-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f9fa;
}

.ip-table thead tr:first-child  th { top: 0; }
.ip-table thead tr:nth-child(2) th { top: 32px; }   /* fila 2: Unidades / Toneladas */
.ip-table thead tr:nth-child(3) th { top: 60px; }   /* fila 3: Producción / Otros pesos */
.ip-table thead tr:nth-child(4) th { top: 88px; }   /* fila 4: subheader columnas */

/* Estilos de la fila Unidades / Toneladas (sub-zona) */
.ip-table thead tr.ip-subzone-row th.ip-subzone {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .55rem;
    background: var(--md-surface-3);
    color: var(--md-on-surface-md);
    border-bottom: 1px solid var(--md-divider);
}
.ip-table thead tr.ip-subzone-row th.ip-subzone-ini-uds,
.ip-table thead tr.ip-subzone-row th.ip-subzone-fin-uds {
    background: #e3f2fd;
    color: #0d47a1;
}
.ip-table thead tr.ip-subzone-row th.ip-subzone-ini-ton,
.ip-table thead tr.ip-subzone-row th.ip-subzone-fin-ton {
    background: #f3e5f5;
    color: #4a148c;
}
.ip-table thead tr.ip-subzone-row th.ip-subzone-mov-uds {
    background: #fff8e1;
    color: #6d4c00;
}
.ip-table thead tr.ip-subzone-row th.ip-subzone-mov-ton {
    background: #ffe0b2;
    color: #6d4c00;
}
.ip-table thead tr.ip-subzone-row th.ip-subzone-aju-ton {
    background: #ffebee;
    color: #b71c1c;
}

/* Fila 3: sub-sub-zonas (Producción / Otros pesos) — solo para Toneladas de INICIAL/FINAL */
.ip-table thead tr.ip-subsubzone-row th.ip-subsubzone {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-bottom: 1px solid var(--md-divider);
}
.ip-table thead tr.ip-subsubzone-row th.ip-ssz-resumen {
    background: #e3f2fd;
    color: #0d47a1;
    border-right: 2px dashed #90caf9;
}
.ip-table thead tr.ip-subsubzone-row th.ip-ssz-desg {
    background: #e8f5e9;
    color: #1b5e20;
    border-right: 2px dashed #a5d6a7;
}
.ip-table thead tr.ip-subsubzone-row th.ip-ssz-otros {
    background: #f3e5f5;
    color: #4a148c;
}
.ip-table thead tr.ip-subsubzone-row th .material-icons-mini,
.ip-table thead tr.ip-subsubzone-row th .fas {
    margin-right: 4px;
}

/* ----------- Sticky: identificación a la izquierda ----------- */
.ip-table th.ip-id,
.ip-table td.ip-id {
    position: sticky;
    background: #ffffff;
    z-index: 3;
    text-align: left;
    white-space: normal;       /* permite wrap en descripciones largas */
    word-break: break-word;
}

/* Anchos compactos para no robar espacio a las columnas numéricas */
/* Columna 1: Acciones (botones), columna 2: Barco, 3: MP, 4: Descripción */
.ip-table th.ip-id-acc,
.ip-table td.ip-id-acc { left: 0;     min-width:  72px; max-width:  72px; padding: .25rem .35rem !important; }
.ip-table th.ip-id:nth-of-type(2),
.ip-table td.ip-id:nth-of-type(2) { left:  72px; min-width: 110px; max-width: 110px; }
.ip-table th.ip-id:nth-of-type(3),
.ip-table td.ip-id:nth-of-type(3) { left: 182px; min-width:  90px; max-width:  90px; }
.ip-table th.ip-id:nth-of-type(4),
.ip-table td.ip-id:nth-of-type(4) { left: 272px; min-width: 220px; max-width: 240px; box-shadow: 2px 0 4px -2px rgba(0,0,0,.18); }

/* Header de las 3 columnas de identificación: Material slate con buen contraste */
.ip-table thead th.ip-id {
    z-index: 6;
    background: #263238 !important;
    color: #ffffff !important;
    font-weight: 600;
    text-align: center;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: var(--md-font);
}

/* Body cells: cleaner Material */
.ip-table tbody td.ip-id {
    background: var(--md-surface);
    font-size: .74rem;
    line-height: 1.3;
    color: var(--md-on-surface);
    font-family: var(--md-font);
}
.ip-table tbody tr:nth-child(even) td.ip-id {
    background: var(--md-surface-2);
}

/* ----------- Zonas de color en HEADER (fila superior) ----------- */
.ip-zone-ini { background: #cfe2ff !important; color: #084298 !important; font-weight: 700; }
.ip-zone-mov { background: #fff3cd !important; color: #664d03 !important; font-weight: 700; }
.ip-zone-aju { background: #f8d7da !important; color: #58151c !important; font-weight: 700; }
.ip-zone-fin { background: #d1e7dd !important; color: #0a3622 !important; font-weight: 700; }
.ip-zone-cua { background: #e2e3e5 !important; color: #41464b !important; font-weight: 700; }

/* ----------- Subheader (segunda fila del thead) ----------- */
.ip-zone-ini-sub { background: #e7f1ff !important; color: #084298; font-size: .72rem; font-weight: 600; }
.ip-zone-mov-sub { background: #fff8e1 !important; color: #664d03; font-size: .72rem; font-weight: 600; }
.ip-zone-aju-sub { background: #fbeaec !important; color: #58151c; font-size: .72rem; font-weight: 600; }
.ip-zone-fin-sub { background: #e8f3ee !important; color: #0a3622; font-size: .72rem; font-weight: 600; }

/* ----------- Celdas del cuerpo coloreadas suave por zona ----------- */
.ip-table tbody td.ip-zone-ini-cell { background: #f4f8ff; }
.ip-table tbody td.ip-zone-mov-cell { background: #fffdf3; }
.ip-table tbody td.ip-zone-aju-cell { background: #fdf5f6; }
.ip-table tbody td.ip-zone-fin-cell { background: #f5fbf7; }
.ip-table tbody td.ip-zone-cua-cell { background: #f1f3f5; font-weight: 700; }

/* ----------- Hover por fila ----------- */
.ip-table tbody tr:hover td:not(.ip-id) { background: #fff8e8 !important; }
.ip-table tbody tr:hover td.ip-id { background: #fffaf0; }

/* ----------- Estados de cuadre ----------- */
.ip-table tbody td.cuadre-ok   { color: #157347; }
.ip-table tbody td.cuadre-warn { color: #997404; background: #fff3cd; }
.ip-table tbody td.cuadre-err  { color: #842029; background: #f8d7da; font-weight: 800; }

/* ----------- Celdas que componen la fórmula del CUADRE -----------
   El cuadre = INI(+)  +  Entradas(+)  −  Consumo(−)  −  Dañadas(−)  −  Trasl.(−)  −  FIN(−)
   Cada celda involucrada lleva un borde superior/inferior amarillo para
   resaltarse como insumo del cálculo, y un sello con el operador (+/−)
   en la esquina superior derecha. */
.ip-table tbody td.ip-cuadre-input,
.ip-table tfoot td.ip-cuadre-input {
    position: relative;
    border-top: 2px solid #f59e0b !important;
    border-bottom: 2px solid #f59e0b !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .15);
}
.ip-table tbody td.ip-cuadre-input::before,
.ip-table tfoot td.ip-cuadre-input::before {
    content: attr(data-cuadre-op);
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    pointer-events: none;
    font-family: 'Roboto Mono', monospace;
}
.ip-table tbody td.ip-cuadre-add::before,
.ip-table tfoot td.ip-cuadre-add::before {
    background: #16a34a;
}
.ip-table tbody td.ip-cuadre-sub::before,
.ip-table tfoot td.ip-cuadre-sub::before {
    background: #dc2626;
}
/* La celda de cuadre como destino de la fórmula: ribete amarillo más fuerte */
.ip-table tbody td.ip-zone-cua-cell {
    border-top: 2px solid #f59e0b !important;
    border-bottom: 2px solid #f59e0b !important;
    border-left: 3px double #f59e0b !important;
}
.ip-table tfoot td.ip-zone-cua-cell {
    border-left: 3px double #f59e0b !important;
}
/* Hover sobre celda de cuadre: resalta TODAS las celdas que componen la fórmula
   en esa misma fila, para auditar visualmente de un vistazo. */
.ip-table tbody tr:hover td.ip-cuadre-input {
    background: #fef3c7 !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55);
}

.ip-table tbody tr.ip-row-warn td.ip-id {
    background: #fff3cd !important;
    color: #664d03 !important;
    font-weight: 600;
}
.ip-table tbody tr.ip-row-err td.ip-id {
    background: #f8d7da !important;
    color: #842029 !important;
    font-weight: 700;
    border-left: 3px solid #dc3545;
}

/* ----------- Footer / Totales ----------- */
.ip-table tfoot td {
    background: #212529 !important;
    color: #f8f9fa !important;
    border-top: 2px solid #495057;
    font-size: .82rem;
}

.ip-table tfoot td.ip-zone-ini-cell { background: #084298 !important; color: #ffffff !important; }
.ip-table tfoot td.ip-zone-mov-cell { background: #664d03 !important; color: #ffffff !important; }
.ip-table tfoot td.ip-zone-aju-cell { background: #58151c !important; color: #ffffff !important; }
.ip-table tfoot td.ip-zone-fin-cell { background: #0a3622 !important; color: #ffffff !important; }
.ip-table tfoot td.ip-zone-cua-cell { background: #495057 !important; color: #ffffff !important; }
.ip-table tfoot td.ip-zone-cua-cell.cuadre-err { background: #842029 !important; }

/* ----------- Mejoras de accesibilidad ----------- */
.ip-table tbody td,
.ip-table thead th {
    user-select: text;
}

/* ----------- Responsive: en pantallas chicas, aflojar sticky ----------- */
@media (max-width: 992px) {
    .ip-table th.ip-id:nth-of-type(2),
    .ip-table td.ip-id:nth-of-type(2),
    .ip-table th.ip-id:nth-of-type(3),
    .ip-table td.ip-id:nth-of-type(3) {
        position: static;
        box-shadow: none;
    }
    .ip-table-scroll { max-height: 60vh; }
    .ip-table { font-size: .75rem; }
}

/* ----------- Botón de filtros activo ----------- */
#btnToggleFiltrosPeriodo {
    transition: transform .15s ease;
}
#btnToggleFiltrosPeriodo:hover { transform: translateY(-1px); }

/* ----------- Leyenda colapsable (compacta) ----------- */
.ip-leyenda { margin-bottom: .5rem !important; }

.ip-leyenda .ip-leyenda-btn {
    font-weight: 600;
    border-radius: .5rem;
    padding: .25rem .65rem;
    font-size: .80rem;
}

.ip-leyenda .ip-leyenda-btn[aria-expanded="true"] .ip-leyenda-chev {
    transform: rotate(180deg);
}
.ip-leyenda .ip-leyenda-chev {
    transition: transform .2s ease;
    font-size: .75rem;
}

.ip-leyenda-card {
    border: 1px solid #d0d6dc;
    background: #fbfcfd;
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ip-leyenda-titulo {
    font-size: .82rem;
    font-weight: 700;
    color: #212529;
    padding-bottom: .25rem;
    border-bottom: 1px dashed #dee2e6;
}

.ip-leyenda-lista {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: .80rem;
    line-height: 1.45;
}

.ip-leyenda-lista li {
    padding: .15rem 0;
    color: #343a40;
}

/* Chip que reproduce el color de la zona del header */
.ip-leyenda-chip {
    display: inline-block;
    min-width: 86px;
    text-align: center;
    padding: .1rem .5rem;
    border-radius: .35rem;
    font-size: .68rem;
    font-weight: 700;
    margin-right: .4rem;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* Bullets de los semáforos */
.ip-leyenda-bullet {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: .5rem;
    vertical-align: middle;
}

.ip-formula {
    font-family: "Consolas", "Courier New", monospace;
    background: #ffffff;
    padding: .1rem .5rem;
    border-radius: .25rem;
    border: 1px solid #dee2e6;
    color: #212529;
    font-size: .78rem;
}

/* =====================================================================
   MODO INVESTIGACIÓN — empty state, toolbar y filtros
===================================================================== */

/* ----------- Empty state mejorado (call-to-action) ----------- */
.ip-empty-state-rich {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.ip-empty-state-rich .ip-empty-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--md-primary-50) 0%, var(--md-primary-100) 100%);
    color: var(--md-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--md-elev-3);
    position: relative;
}
.ip-empty-state-rich .ip-empty-icon::after {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--md-primary-100);
    opacity: .5;
    animation: ipPulse 2.4s ease-in-out infinite;
}
@keyframes ipPulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

.ip-empty-state-rich h5 {
    font-family: var(--md-font);
    font-weight: 500;
    color: var(--md-on-surface);
    letter-spacing: .015em;
}
.ip-empty-state-rich .text-muted {
    color: var(--md-on-surface-md) !important;
    font-family: var(--md-font);
}

.ip-empty-steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    max-width: 480px;
    margin: 1.25rem auto 0;
    text-align: left;
}

.ip-empty-step {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    border: 1px solid var(--md-divider);
    font-size: .87rem;
    color: var(--md-on-surface);
    font-family: var(--md-font);
    transition: all var(--md-fast) var(--md-ease);
}
.ip-empty-step:hover {
    border-color: var(--md-primary-100);
    box-shadow: var(--md-elev-1);
    transform: translateX(2px);
}

.ip-empty-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--md-primary-500);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .82rem;
    font-family: var(--md-font);
}

/* ----------- Toolbar de investigación (Material) ----------- */
.ip-investigation-bar {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    padding: .55rem .85rem;
    box-shadow: var(--md-elev-1);
    font-family: var(--md-font);
}

.ip-investigation-bar .ip-toolbar-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--md-on-surface-md);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ip-investigation-bar .btn-group .btn {
    font-size: .76rem;
    padding: .25rem .7rem;
    font-weight: 500;
    font-family: var(--md-font);
    border-color: var(--md-divider);
    transition: all var(--md-fast) var(--md-ease);
}
.ip-investigation-bar .btn-group .btn-check:checked + .btn {
    box-shadow: inset 0 -2px 0 currentColor;
}
.ip-investigation-bar .form-check-label { font-family: var(--md-font); }
.ip-investigation-bar .form-check-input:checked { background-color: var(--md-primary-500); border-color: var(--md-primary-500); }

/* Cuando un toggle de zona está APAGADO, el botón pierde color y queda fantasma */
.ip-investigation-bar .btn-check:not(:checked) + .btn {
    opacity: .55;
    text-decoration: line-through;
}

/* ----------- Zonas colapsables (chips de visibilidad) ----------- */
/* Ocultar columnas por zona — se aplica al elemento <table> directamente */
.ip-table.ip-hide-ini th.ip-zone-ini,
.ip-table.ip-hide-ini th.ip-zone-ini-sub,
.ip-table.ip-hide-ini td.ip-zone-ini-cell { display: none; }

.ip-table.ip-hide-mov th.ip-zone-mov,
.ip-table.ip-hide-mov th.ip-zone-mov-sub,
.ip-table.ip-hide-mov td.ip-zone-mov-cell { display: none; }

.ip-table.ip-hide-aju th.ip-zone-aju,
.ip-table.ip-hide-aju th.ip-zone-aju-sub,
.ip-table.ip-hide-aju td.ip-zone-aju-cell { display: none; }

.ip-table.ip-hide-fin th.ip-zone-fin,
.ip-table.ip-hide-fin th.ip-zone-fin-sub,
.ip-table.ip-hide-fin td.ip-zone-fin-cell { display: none; }

.ip-table.ip-hide-cua th.ip-zone-cua,
.ip-table.ip-hide-cua td.ip-zone-cua-cell { display: none; }

/* ----------- Filtro: solo filas descuadradas ----------- */
.ip-table.ip-only-descuadre tbody tr.ip-row-ok { display: none; }
.ip-table.ip-only-descuadre tbody tr.ip-row-warn { display: table-row; }
.ip-table.ip-only-descuadre tbody tr.ip-row-err { display: table-row; }

/* ----------- Column picker: ocultar columnas individuales ----------- */
/* Se usa con: <table data-hidden-cols="ini_total ini_term mov_consumo">
   y cada th/td tiene data-c="key". */
.ip-table[data-hidden-cols~="ini_total"]    [data-c="ini_total"],
.ip-table[data-hidden-cols~="ini_term"]     [data-c="ini_term"],
.ip-table[data-hidden-cols~="ini_parc"]     [data-c="ini_parc"],
.ip-table[data-hidden-cols~="ini_dtot"]     [data-c="ini_dtot"],
.ip-table[data-hidden-cols~="ini_dparc"]    [data-c="ini_dparc"],
.ip-table[data-hidden-cols~="ini_disp"]     [data-c="ini_disp"],
.ip-table[data-hidden-cols~="ini_total_t"]    [data-c="ini_total_t"],
.ip-table[data-hidden-cols~="ini_term_t"]     [data-c="ini_term_t"],
.ip-table[data-hidden-cols~="ini_consum_t"]   [data-c="ini_consum_t"],
.ip-table[data-hidden-cols~="ini_excedente_t"][data-c="ini_excedente_t"],
.ip-table[data-hidden-cols~="ini_excedente_t"] [data-c="ini_excedente_t"],
.ip-table[data-hidden-cols~="ini_remanente_t"] [data-c="ini_remanente_t"],
.ip-table[data-hidden-cols~="ini_remparc_t"]   [data-c="ini_remparc_t"],
.ip-table[data-hidden-cols~="ini_dtot_t"]      [data-c="ini_dtot_t"],
.ip-table[data-hidden-cols~="ini_dparc_t"]     [data-c="ini_dparc_t"],
.ip-table[data-hidden-cols~="ini_disp_t"]      [data-c="ini_disp_t"],
.ip-table[data-hidden-cols~="mov_entr_uds"]    [data-c="mov_entr_uds"],
.ip-table[data-hidden-cols~="mov_entr_ton"]    [data-c="mov_entr_ton"],
.ip-table[data-hidden-cols~="mov_term_uds"]    [data-c="mov_term_uds"],
.ip-table[data-hidden-cols~="mov_term_ton"]    [data-c="mov_term_ton"],
.ip-table[data-hidden-cols~="mov_consumo"]     [data-c="mov_consumo"],
.ip-table[data-hidden-cols~="mov_dan"]         [data-c="mov_dan"],
.ip-table[data-hidden-cols~="mov_dan_parc"]    [data-c="mov_dan_parc"],
.ip-table[data-hidden-cols~="mov_trasl"]       [data-c="mov_trasl"],
.ip-table[data-hidden-cols~="aju_remanente"]   [data-c="aju_remanente"],
.ip-table[data-hidden-cols~="aju_excedente"]   [data-c="aju_excedente"],
.ip-table[data-hidden-cols~="aju_remparc"]     [data-c="aju_remparc"],
.ip-table[data-hidden-cols~="fin_total"]       [data-c="fin_total"],
.ip-table[data-hidden-cols~="fin_term"]        [data-c="fin_term"],
.ip-table[data-hidden-cols~="fin_parc"]        [data-c="fin_parc"],
.ip-table[data-hidden-cols~="fin_dtot"]        [data-c="fin_dtot"],
.ip-table[data-hidden-cols~="fin_dparc"]       [data-c="fin_dparc"],
.ip-table[data-hidden-cols~="fin_disp"]        [data-c="fin_disp"],
.ip-table[data-hidden-cols~="fin_total_t"]     [data-c="fin_total_t"],
.ip-table[data-hidden-cols~="fin_term_t"]      [data-c="fin_term_t"],
.ip-table[data-hidden-cols~="fin_consum_t"]    [data-c="fin_consum_t"],
.ip-table[data-hidden-cols~="fin_excedente_t"] [data-c="fin_excedente_t"],
.ip-table[data-hidden-cols~="fin_remanente_t"] [data-c="fin_remanente_t"],
.ip-table[data-hidden-cols~="fin_remparc_t"]   [data-c="fin_remparc_t"],
.ip-table[data-hidden-cols~="fin_dtot_t"]      [data-c="fin_dtot_t"],
.ip-table[data-hidden-cols~="fin_dparc_t"]     [data-c="fin_dparc_t"],
.ip-table[data-hidden-cols~="fin_disp_t"]      [data-c="fin_disp_t"],
.ip-table[data-hidden-cols~="ini_solo_term_t"]   [data-c="ini_solo_term_t"],
.ip-table[data-hidden-cols~="ini_prod_parc_t"]   [data-c="ini_prod_parc_t"],
.ip-table[data-hidden-cols~="ini_prod_danparc_t"][data-c="ini_prod_danparc_t"],
.ip-table[data-hidden-cols~="ini_prod_danparc_t"] [data-c="ini_prod_danparc_t"],
.ip-table[data-hidden-cols~="ini_prod_mont_t"]   [data-c="ini_prod_mont_t"],
.ip-table[data-hidden-cols~="fin_solo_term_t"]   [data-c="fin_solo_term_t"],
.ip-table[data-hidden-cols~="fin_prod_parc_t"]   [data-c="fin_prod_parc_t"],
.ip-table[data-hidden-cols~="fin_prod_danparc_t"][data-c="fin_prod_danparc_t"],
.ip-table[data-hidden-cols~="fin_prod_danparc_t"] [data-c="fin_prod_danparc_t"],
.ip-table[data-hidden-cols~="fin_prod_mont_t"]   [data-c="fin_prod_mont_t"],
.ip-table[data-hidden-cols~="ini_mont"]          [data-c="ini_mont"],
.ip-table[data-hidden-cols~="ini_mont_t"]      [data-c="ini_mont_t"],
.ip-table[data-hidden-cols~="fin_mont"]        [data-c="fin_mont"],
.ip-table[data-hidden-cols~="fin_mont_t"]      [data-c="fin_mont_t"],
.ip-table[data-hidden-cols~="mov_mont_uds"]    [data-c="mov_mont_uds"],
.ip-table[data-hidden-cols~="mov_mont_ton"]    [data-c="mov_mont_ton"],
.ip-table[data-hidden-cols~="mov_dan_uds"]     [data-c="mov_dan_uds"],
.ip-table[data-hidden-cols~="mov_dan_parc_uds"][data-c="mov_dan_parc_uds"],
.ip-table[data-hidden-cols~="mov_dan_parc_uds"] [data-c="mov_dan_parc_uds"],
.ip-table[data-hidden-cols~="mov_trasl_uds"]   [data-c="mov_trasl_uds"],
.ip-table[data-hidden-cols~="aju_remmont"]     [data-c="aju_remmont"],
.ip-table[data-hidden-cols~="cuadre"]          [data-c="cuadre"] { display: none; }

/* =====================================================================
   MODAL: Detalle de Fila (fullscreen, layout de comparación lado a lado)
===================================================================== */
#modalDetalleFila .modal-dialog.modal-fullscreen {
    margin: 0;
    max-width: none;
    height: 100vh;
}
#modalDetalleFila .modal-content {
    border: none;
    border-radius: 0;
    height: 100vh;
    box-shadow: var(--md-elev-24);
    font-family: var(--md-font);
}
#modalDetalleFila .modal-header {
    background: linear-gradient(135deg, var(--md-primary-900) 0%, var(--md-primary-500) 100%);
    border-bottom: 0;
    padding: .85rem 1.5rem;
    color: #ffffff;
    flex-shrink: 0;
}
#modalDetalleFila .modal-header .modal-title {
    font-weight: 500;
    letter-spacing: .015em;
    font-size: 1.1rem;
}
#modalDetalleFila .modal-body {
    padding: 1.25rem 1.75rem;
    background: var(--md-surface-2);
    overflow-y: auto;
}
#modalDetalleFila .modal-footer {
    border-top: 1px solid var(--md-divider);
    background: var(--md-surface);
    flex-shrink: 0;
    padding: .65rem 1.5rem;
}

/* ====== Cabecera con info clave (chips horizontales) ====== */
.df-cabecera .aud-info-chip { background: var(--md-surface); }

/* ====== Grid principal: INICIAL | FINAL lado a lado ====== */
.df-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.df-grid-mov-aju {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 992px) {
    .df-grid, .df-grid-mov-aju { grid-template-columns: 1fr; }
}

/* ====== Card por zona ====== */
.df-card {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    overflow: hidden;
    box-shadow: var(--md-elev-1);
    transition: box-shadow var(--md-fast) var(--md-ease);
    display: flex;
    flex-direction: column;
}
.df-card:hover { box-shadow: var(--md-elev-3); }

.df-card-head {
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .82rem;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--md-font);
    text-transform: none;       /* IMPORTANTE: evita romper iconos */
    letter-spacing: .015em;
}
.df-card-head i.fas { font-size: 18px; }
.df-card-head .df-card-titulo { flex: 1; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.df-card-head .df-card-counter {
    background: rgba(255, 255, 255, .55);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.df-zone-ini .df-card-head { background: var(--zone-ini-bg); color: var(--zone-ini-fg); border-bottom-color: var(--md-primary-500); }
.df-zone-mov .df-card-head { background: var(--zone-mov-bg); color: var(--zone-mov-fg); border-bottom-color: #ff8f00; }
.df-zone-aju .df-card-head { background: var(--zone-aju-bg); color: var(--zone-aju-fg); border-bottom-color: var(--md-danger-fg); }
.df-zone-fin .df-card-head { background: var(--zone-fin-bg); color: var(--zone-fin-fg); border-bottom-color: var(--md-success-fg); }

.df-card-body { padding: 0; }

/* ====== Secciones internas (Unidades / Toneladas) ====== */
.df-section { padding: .35rem 1rem .65rem; }
.df-section + .df-section { border-top: 1px solid var(--md-divider); margin-top: .25rem; padding-top: .65rem; }
.df-section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--md-on-surface-md);
    padding: .35rem 0 .25rem;
    margin-bottom: .15rem;
    border-bottom: 1px dashed var(--md-divider);
}
.df-section-title i.fas { color: var(--md-primary-500); }

/* ====== Cada par clave-valor ====== */
.df-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .42rem 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: .87rem;
    gap: .65rem;
}
.df-row:last-child { border-bottom: none; }
.df-row-subcol {
    padding-left: .85rem;
    background: var(--md-surface-2);
    margin: 0 -.5rem;
    padding-right: .5rem;
    border-radius: 4px;
    font-size: .8rem;
    opacity: .9;
    border-bottom: 1px dotted var(--md-divider);
    margin-bottom: 1px;
}
.df-row-bullet {
    color: var(--md-on-surface-lo);
    font-weight: 700;
    margin-right: 4px;
}
.df-label {
    color: var(--md-on-surface);
    font-weight: 500;
    flex: 1;
}
.df-value {
    font-weight: 600;
    color: var(--md-on-surface);
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
    min-width: 90px;
}
.df-row-subcol .df-label { color: var(--md-on-surface-md); font-weight: 400; font-style: italic; }
.df-row-subcol .df-value { color: var(--md-on-surface-md); font-weight: 500; }

/* Card de cuadre (destacada al final) */
.df-cuadre-card {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    padding: .85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--md-elev-1);
    transition: all var(--md-fast) var(--md-ease);
}
.df-cuadre-card.df-cuadre-ok   { border-left: 4px solid var(--md-success-fg); }
.df-cuadre-card.df-cuadre-warn { border-left: 4px solid var(--md-warning-fg); background: var(--md-warning-bg); }
.df-cuadre-card.df-cuadre-err  { border-left: 4px solid var(--md-danger-fg);  background: var(--md-danger-bg); }

.df-cuadre-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--md-surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--md-elev-1);
}
.df-cuadre-icon .material-icons-mini { font-size: 22px; margin: 0; }
.df-cuadre-card.df-cuadre-ok   .df-cuadre-icon { color: var(--md-success-fg); background: #e8f5e9; }
.df-cuadre-card.df-cuadre-warn .df-cuadre-icon { color: var(--md-warning-fg); background: #fff8e1; }
.df-cuadre-card.df-cuadre-err  .df-cuadre-icon { color: var(--md-danger-fg);  background: #ffebee; }

.df-cuadre-info { flex: 1; min-width: 0; }
.df-cuadre-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--md-on-surface-md);
    margin-bottom: 1px;
}
.df-cuadre-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--md-on-surface);
    line-height: 1.15;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.df-cuadre-value small { font-size: .65rem; color: var(--md-on-surface-md); font-weight: 400; }
.df-cuadre-status {
    font-size: .82rem;
    font-weight: 600;
    color: var(--md-on-surface);
    text-align: right;
    flex-shrink: 0;
    max-width: 240px;
}
.df-cuadre-card.df-cuadre-err .df-cuadre-status { color: var(--md-danger-fg); }
.df-cuadre-card.df-cuadre-warn .df-cuadre-status { color: var(--md-warning-fg); }

/* ----------- Sub-columnas de desglose (Solo Term., Prod Parciales, etc.) ----------- */
.ip-table th.ip-subcol,
.ip-table td.ip-subcol {
    background-image: linear-gradient(180deg, transparent 0, transparent 100%);
    font-size: .72rem;
    font-style: italic;
    border-left: 1px dashed var(--md-divider);
}
.ip-table thead th.ip-subcol {
    font-weight: 500;
    color: var(--md-on-surface-md);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    padding-left: .6rem;
}
.ip-table tbody td.ip-subcol { opacity: .85; }

/* ----------- Estilos del Column Picker (offcanvas) ----------- */
.ipcp-group {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    margin-bottom: .65rem;
    overflow: hidden;
    box-shadow: var(--md-elev-1);
    font-family: var(--md-font);
}
.ipcp-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--md-surface-2);
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--md-divider);
}
.ipcp-group-title {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 600;
    color: var(--md-on-surface);
    letter-spacing: .015em;
}
.ipcp-counter {
    background: var(--md-primary-50);
    color: var(--md-primary-700);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .35rem;
    min-width: 36px;
    text-align: center;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.ipcp-group-actions { display: flex; gap: 0; }
.ipcp-group-actions .btn-link {
    font-size: .7rem;
    padding: 1px 6px;
    text-decoration: none;
    color: var(--md-primary-500);
    font-weight: 500;
    border-radius: 4px;
}
.ipcp-group-actions .btn-link:hover {
    background: var(--md-primary-50);
    text-decoration: none;
}

.ipcp-group-body { padding: .35rem .25rem; }

.ipcp-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--md-fast) var(--md-ease);
    font-size: .82rem;
    user-select: none;
    margin: 0;
}
.ipcp-item:hover { background: var(--md-surface-3); }
.ipcp-check {
    width: 16px; height: 16px;
    accent-color: var(--md-primary-500);
    cursor: pointer;
    flex-shrink: 0;
}
.ipcp-item-label {
    color: var(--md-on-surface);
    flex: 1;
}
.ipcp-check:not(:checked) ~ .ipcp-item-label { color: var(--md-on-surface-lo); }

/* Bordes de zona en cada grupo del picker */
.ipcp-group-ini .ipcp-group-header { border-left: 3px solid var(--md-primary-500); }
.ipcp-group-mov .ipcp-group-header { border-left: 3px solid #ff8f00; }
.ipcp-group-aju .ipcp-group-header { border-left: 3px solid var(--md-danger-fg); }
.ipcp-group-fin .ipcp-group-header { border-left: 3px solid #2e7d32; }
.ipcp-group-cua .ipcp-group-header { border-left: 3px solid var(--md-on-surface-md); }

/* =====================================================================
   MODAL DE TRAZABILIDAD
===================================================================== */
#modalTrazabilidadPeriodo .modal-content {
    border: none;
    border-radius: var(--md-radius-lg);
    overflow: hidden;
    box-shadow: var(--md-elev-24);
    font-family: var(--md-font);
}
#modalTrazabilidadPeriodo .modal-header {
    background: linear-gradient(135deg, var(--md-primary-900) 0%, var(--md-primary-700) 100%);
    border-bottom: 0;
    padding: 1rem 1.5rem;
}
#modalTrazabilidadPeriodo .modal-title {
    font-weight: 500;
    letter-spacing: .015em;
    font-size: 1.05rem;
}
#modalTrazabilidadPeriodo .modal-body { padding: 1.25rem 1.5rem; }
#modalTrazabilidadPeriodo .modal-footer {
    border-top: 1px solid var(--md-divider);
    background: var(--md-surface-2);
}
#modalTrazabilidadPeriodo .nav-tabs {
    border-bottom: 2px solid var(--md-divider);
}
#modalTrazabilidadPeriodo .nav-tabs .nav-link {
    font-weight: 500;
    color: var(--md-on-surface-md);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: .65rem 1rem;
    transition: all var(--md-fast) var(--md-ease);
    font-family: var(--md-font);
    letter-spacing: .015em;
}
#modalTrazabilidadPeriodo .nav-tabs .nav-link:hover:not(.active) {
    color: var(--md-primary-500);
    background: var(--md-primary-50);
    border-color: transparent;
}
#modalTrazabilidadPeriodo .nav-tabs .nav-link.active {
    color: var(--md-primary-500);
    background: transparent;
    border-bottom-color: var(--md-primary-500);
    font-weight: 600;
}

.trazab-content { font-size: .87rem; }

/* Flujo de pasos (tab "Flujo del reporte") */
.trazab-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    margin-top: 1rem;
}
.trazab-flow .trazab-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.25rem;
    padding: 0 .25rem;
}
.trazab-step {
    flex: 1 1 200px;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: var(--md-radius-md);
    border: 1px solid var(--md-divider);
    background: var(--md-surface);
    box-shadow: var(--md-elev-1);
    transition: all var(--md-fast) var(--md-ease);
}
.trazab-step:hover { box-shadow: var(--md-elev-2); transform: translateY(-1px); }
.trazab-step h6 {
    font-weight: 500;
    color: var(--md-on-surface);
    font-family: var(--md-font);
    letter-spacing: .015em;
}
.trazab-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: var(--md-elev-1);
}
.trazab-step-ini { border-left: 3px solid var(--md-primary-500); }
.trazab-step-ini .trazab-step-num { background: var(--md-primary-500); }
.trazab-step-mov { border-left: 3px solid #ff8f00; }
.trazab-step-mov .trazab-step-num { background: #ff8f00; }
.trazab-step-fin { border-left: 3px solid #2e7d32; }
.trazab-step-fin .trazab-step-num { background: #2e7d32; }

/* Títulos de zona dentro del modal */
.trazab-zona-titulo {
    font-size: .92rem;
    font-weight: 700;
    padding: .4rem .65rem;
    border-radius: .35rem;
    margin-bottom: .5rem;
}
.trazab-ini { background: #cfe2ff; color: #084298; }
.trazab-mov { background: #fff3cd; color: #664d03; }
.trazab-aju { background: #f8d7da; color: #58151c; }
.trazab-fin { background: #d1e7dd; color: #0a3622; }

/* Tablas de fórmulas */
.trazab-formula-table th {
    background: #f8f9fa;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.trazab-formula-table td { font-size: .82rem; vertical-align: middle; }
.trazab-formula-table code {
    background: #f1f3f5;
    color: #d63384;
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .78rem;
}

/* Tabla de orígenes — cards */
.trazab-tabla-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: .45rem;
    padding: .75rem .9rem;
    height: 100%;
    transition: all .15s ease;
}
.trazab-tabla-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, .12);
    transform: translateY(-1px);
}
.trazab-tabla-card h6 { font-size: .88rem; margin-bottom: .35rem; }
.trazab-tabla-card .trazab-tag {
    display: inline-block;
    margin-top: .25rem;
    background: #e7f1ff;
    color: #084298;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: .25rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Ecuación contable — fichas con animación */
.trazab-equation {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1rem;
    overflow-x: auto;
}
.trazab-eq-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}
.trazab-eq-token {
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: .35rem;
    font-weight: 700;
    font-size: .82rem;
}
.trazab-eq-op {
    font-weight: 800;
    font-size: 1.1rem;
    color: #495057;
}
.trazab-eq-ini { background: #cfe2ff; color: #084298; }
.trazab-eq-mov { background: #fff3cd; color: #664d03; }
.trazab-eq-fin { background: #d1e7dd; color: #0a3622; }
.trazab-eq-cua { background: #e2e3e5; color: #41464b; }

/* Glosario */
.trazab-glosario dt {
    font-weight: 700;
    color: #212529;
    margin-top: .65rem;
    font-size: .9rem;
}
.trazab-glosario dd {
    margin-left: .5rem;
    color: #495057;
    line-height: 1.5;
    margin-bottom: .25rem;
}

/* =====================================================================
   Botón lupa por fila (Material FAB-mini)
===================================================================== */
.ip-table .ip-btn-auditar {
    border: 0;
    background: var(--md-primary-50);
    color: var(--md-primary-700);
    width: 24px; height: 24px;
    padding: 0; line-height: 1;
    border-radius: 50%;
    margin-right: .4rem;
    transition: all var(--md-fast) var(--md-ease);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    box-shadow: var(--md-elev-1);
    flex-shrink: 0;
}
.ip-table .ip-btn-auditar:hover {
    background: var(--md-primary-500);
    color: #ffffff;
    transform: scale(1.12);
    box-shadow: var(--md-elev-3);
}
.ip-table .ip-btn-auditar:active {
    transform: scale(.96);
    box-shadow: var(--md-elev-1);
}
.ip-table .ip-btn-auditar i { font-size: .72rem; }
.ip-table tbody tr.ip-row-clickable:hover .ip-btn-auditar {
    background: var(--md-primary-100);
    box-shadow: 0 0 0 4px rgba(63, 81, 181, .14), var(--md-elev-1);
}

/* Botón "Ver detalle" — mismo estilo material que el de auditar pero con tono accent */
.ip-table .ip-btn-detalle {
    border: 0;
    background: var(--md-info-bg);
    color: var(--md-info-fg);
    width: 24px; height: 24px;
    padding: 0; line-height: 1;
    border-radius: 50%;
    transition: all var(--md-fast) var(--md-ease);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    box-shadow: var(--md-elev-1);
    flex-shrink: 0;
}
.ip-table .ip-btn-detalle:hover {
    background: var(--md-info-fg);
    color: #ffffff;
    transform: scale(1.12);
    box-shadow: var(--md-elev-3);
}
.ip-table .ip-btn-detalle:active {
    transform: scale(.96);
    box-shadow: var(--md-elev-1);
}
.ip-table .ip-btn-detalle i { font-size: .72rem; }

/* Columna "Acciones": agrupa los dos botones lado a lado, centrados */
.ip-table td.ip-id-acc,
.ip-table th.ip-id-acc {
    text-align: center;
    vertical-align: middle;
    background: var(--md-surface-2) !important;
    border-right: 1px solid var(--md-divider);
}
.ip-table td.ip-id-acc {
    display: table-cell;
    white-space: nowrap;
}
.ip-table td.ip-id-acc .ip-btn-detalle,
.ip-table td.ip-id-acc .ip-btn-auditar {
    margin: 0 1px;
}
.ip-table thead th.ip-id-acc {
    background: #263238 !important;
    color: #ffffff;
    font-size: .75rem;
}
.ip-table thead th.ip-id-acc i { color: #ffd54f; }

/* =====================================================================
   MODAL: Auditoría de Grupo — Material Design
===================================================================== */
/* Tamaño FIJO del modal — no se encoge cuando una pestaña tiene 0 datos */
#modalAuditoriaGrupo .modal-dialog {
    max-width: 1280px;
    height: 88vh;
    margin: 6vh auto;
    display: flex;
}
#modalAuditoriaGrupo .modal-content {
    border: none;
    border-radius: var(--md-radius-lg);
    overflow: hidden;
    box-shadow: var(--md-elev-24);
    font-family: var(--md-font);
    height: 100%;
    display: flex;
    flex-direction: column;
}
#modalAuditoriaGrupo .modal-header {
    background: linear-gradient(135deg, var(--md-primary-900) 0%, var(--md-primary-700) 100%);
    border-bottom: 0;
    padding: .9rem 1.5rem;
    color: #ffffff;
    flex-shrink: 0;
}
#modalAuditoriaGrupo .modal-header .modal-title { font-size: 1.05rem; }
#modalAuditoriaGrupo .modal-header small { font-size: .76rem; letter-spacing: .015em; }
#modalAuditoriaGrupo .modal-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#modalAuditoriaGrupo .modal-footer { flex-shrink: 0; }
#modalAuditoriaGrupo .modal-header .modal-title {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: .015em;
}
#modalAuditoriaGrupo .modal-body { font-size: .85rem; padding: 1rem 1.25rem; }
#modalAuditoriaGrupo .modal-footer {
    border-top: 1px solid #f0f1f3;
    background: #fafbfc;
}

/* ——— Iconos mini para chips/links (estilo Material Icons) ——— */
.material-icons-mini {
    font-family: 'Material Icons', system-ui;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}

/* ——— Cards de información del header ——— */
.aud-info-chip {
    background: #ffffff;
    border: 1px solid #e0e2e7;
    border-radius: 8px;
    padding: .5rem .75rem;
    height: 100%;
    display: flex; flex-direction: column; gap: .15rem;
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.aud-info-chip:hover {
    border-color: #c5cae9;
    box-shadow: 0 2px 6px rgba(63, 81, 181, .08);
}
.aud-info-label {
    font-size: .65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: #6b7280;
    font-family: 'Roboto', sans-serif;
}
.aud-info-value {
    font-weight: 500;
    color: #1f2937;
    font-size: .92rem;
    font-family: 'Roboto', sans-serif;
}

#audChipCuadreContainer.aud-cuadre-ok  .aud-info-value { color: #2e7d32; }
#audChipCuadreContainer.aud-cuadre-warn .aud-info-value { color: #f57c00; }
#audChipCuadreContainer.aud-cuadre-err  .aud-info-value { color: #c62828; font-weight: 700; }
#audChipCuadreContainer.aud-cuadre-err              { background: #ffebee; border-color: #ef9a9a; }

/* ——— Pestañas (pills Material) ——— */
.aud-tabs {
    background: #f5f6f8;
    border-radius: 10px;
    padding: 4px;
    border: 1px solid #e8eaed;
}
.aud-tabs .nav-link {
    font-family: 'Roboto', sans-serif;
    font-size: .78rem; font-weight: 500;
    padding: .45rem .75rem;
    border-radius: 7px;
    color: #5f6368;
    border: none;
    transition: all .2s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.aud-tabs .nav-link:hover:not(.active) {
    background: rgba(63, 81, 181, .08);
    color: #3f51b5;
}
.aud-tabs .nav-link.active {
    background: #3f51b5;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(63, 81, 181, .35);
}
.aud-tabs .aud-count {
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-left: .4rem;
    background: rgba(0,0,0,.07);
    color: inherit;
    border-radius: 10px;
    min-width: 22px; height: 18px; padding: 0 .35rem;
    font-size: .7rem;
    font-weight: 600;
}
.aud-tabs .nav-link.active .aud-count { background: rgba(255,255,255,.25); }

.aud-content {
    flex: 1 1 auto;
    overflow: auto;
    padding-top: .75rem;
    min-height: 0;
}
.aud-content > .tab-pane { height: 100%; }
.aud-content > .tab-pane.active { display: flex; flex-direction: column; }
.aud-tabla {
    flex: 1 1 auto;
    min-height: 380px;     /* nunca se vea pequeño aunque la pestaña esté vacía */
    display: flex;
    flex-direction: column;
}

/* Empty state de una pestaña sin datos: centrado, con vibe profesional */
.aud-tabla > .text-center.py-3.small.text-muted {
    margin: auto;
    padding: 3rem 1rem !important;
    color: var(--md-on-surface-lo) !important;
    font-family: var(--md-font);
    font-size: .9rem !important;
}
.aud-tabla-vacio {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1 1 auto;
    color: var(--md-on-surface-lo);
    font-family: var(--md-font);
    text-align: center;
    padding: 2rem;
    min-height: 320px;
}
.aud-tabla-vacio .material-icons {
    font-size: 3rem;
    color: var(--md-surface-4);
    margin-bottom: .5rem;
}

/* ——— Tabla Material ——— */
.md-table-wrap {
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    overflow-y: auto;       /* solo scroll vertical, NUNCA horizontal */
    overflow-x: hidden;
    background: var(--md-surface);
    box-shadow: var(--md-elev-1);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--md-font);
    font-size: .8rem;
    color: var(--md-on-surface);
    margin: 0;
    table-layout: auto;
}
.md-table thead th {
    background: var(--md-surface-2);
    color: var(--md-on-surface-md);
    font-weight: 600;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--md-divider);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
    text-align: left;
}
.md-table tbody td {
    padding: .5rem .65rem;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
    word-break: break-word;
}
/* La columna de código bobina y los chips no deben envolverse */
.md-table tbody td:first-child,
.md-table tbody td:nth-child(3),
.md-table tbody td:nth-child(4) { white-space: nowrap; }
.md-table tbody tr { transition: background .15s ease; }
.md-table tbody tr:hover { background: #f3f6fb; }
.md-table tbody tr.md-row-changed {
    background: linear-gradient(90deg, #fff8e1 0%, transparent 100%);
}
.md-table tbody tr.md-row-changed:hover { background: #fff3cd; }
.md-table tbody tr:last-child td { border-bottom: none; }

.md-table th.md-num, .md-table td.md-num {
    text-align: right;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.md-table td.md-date {
    color: #5f6368;
    font-size: .78rem;
}
.md-table td.md-flags { white-space: normal; }

.md-num-positive { color: #1565c0; font-weight: 500; }
.md-num-negative { color: #c62828; font-weight: 500; }
.md-num-neutral  { color: #9aa0a6; }

/* Columna # (número de registro) en el modal de auditoría */
.md-table th.md-rownum-h {
    width: 36px;
    text-align: center;
    color: var(--md-on-surface-lo);
}
.md-table td.md-rownum {
    width: 36px;
    text-align: center;
    color: var(--md-on-surface-md);
    font-weight: 600;
    font-size: .72rem;
    background: var(--md-surface-2);
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--md-divider);
}
.md-table tbody tr.md-row-changed td.md-rownum { background: #fff3cd; color: #664d03; }

/* ——— Fechas consolidadas en stack vertical ——— */
.md-fechas-stack {
    display: flex; flex-direction: column; gap: 2px;
}
.md-fecha-line {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem;
    color: var(--md-on-surface-md);
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.md-fecha-tag {
    display: inline-block;
    width: 22px;
    text-align: center;
    border-radius: 3px;
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 0;
    letter-spacing: .04em;
}
.md-fecha-tag-in { background: #e8f5e9; color: #2e7d32; }   /* Ingreso */
.md-fecha-tag-tr { background: #eceff1; color: #455a64; }   /* Traslado */
.md-fecha-tag-da { background: #ffebee; color: #c62828; }   /* Daño */

/* Link de bobina (Material) */
.md-bobina-link {
    color: #1565c0;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex; align-items: center;
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: -4px;
    transition: background .15s ease;
}
.md-bobina-link:hover {
    background: rgba(21, 101, 192, .1);
    color: #0d47a1;
    text-decoration: none;
}

/* ——— Chips Material para estados ——— */
.md-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px 2px 6px;
    border-radius: 14px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.3;
    min-height: 22px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: .015em;
}
.md-chip .material-icons-mini { margin-right: 4px; }
.md-chip-success { background: #e8f5e9; color: #2e7d32; }
.md-chip-warning { background: #fff3e0; color: #ef6c00; }
.md-chip-danger  { background: #ffebee; color: #c62828; }
.md-chip-primary { background: #e3f2fd; color: #1565c0; }
.md-chip-info    { background: #e0f7fa; color: #00838f; }
.md-chip-default { background: #f5f5f5; color: #424242; }
.md-chip-empty   { background: transparent; color: #9aa0a6; padding: 2px 6px; }

/* ——— Flags (badges pequeños del período) ——— */
.md-flag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 3px;
    margin-bottom: 2px;
    line-height: 1.5;
    white-space: nowrap;          /* evita que se rompa carácter por carácter */
}
.md-flag-success   { background: #c8e6c9; color: #1b5e20; }
.md-flag-warning   { background: #ffe0b2; color: #e65100; }
.md-flag-danger    { background: #ffcdd2; color: #b71c1c; }
.md-flag-primary   { background: #bbdefb; color: #0d47a1; }
.md-flag-secondary { background: #e0e0e0; color: #424242; }

/* ——— Search box "Trazar bobina" ——— */
.aud-traza-search .input-group-text {
    background: #f5f6f8;
    border-color: #e0e2e7;
    color: #5f6368;
}
.aud-traza-search .form-control {
    border-color: #e0e2e7;
    font-family: 'Roboto Mono', monospace;
    font-size: .85rem;
}
.aud-traza-search .form-control:focus {
    border-color: #3f51b5;
    box-shadow: 0 0 0 3px rgba(63, 81, 181, .15);
}
.aud-traza-search .btn {
    background: #3f51b5;
    border-color: #3f51b5;
    font-weight: 500;
    letter-spacing: .015em;
}
.aud-traza-search .btn:hover { background: #303f9f; border-color: #303f9f; }

/* ——— Trace de bobina individual ——— */
/* Layout: HERO (bobina) full-width arriba, STRIP (resumen mini), GRID (resto) */
.aud-trace-layout {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.aud-trace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
@media (max-width: 992px) {
    .aud-trace-grid { grid-template-columns: 1fr; }
}

/* HERO: información de la bobina (lo MÁS importante visualmente) */
.aud-trace-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%);
    border: 1.5px solid var(--md-primary-300, #9fa8da);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(63, 81, 181, .08), 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
}
.aud-trace-hero-banner {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1rem;
    background: linear-gradient(90deg, var(--md-primary-700, #303f9f) 0%, var(--md-primary-500, #3f51b5) 100%);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.aud-trace-hero-banner-icon {
    width: 26px; height: 26px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.aud-trace-hero-banner-text { line-height: 1; }

/* Variante HERO del trace-maestro: más grande, más aire */
.trace-maestro--hero {
    padding: 1rem 1.25rem 1.1rem;
    gap: .9rem;
}
.trace-maestro--hero .trace-maestro-id {
    font-size: 1.35rem;
    padding: .55rem 1rem;
    background: #fff;
    border: 1px solid var(--md-divider);
}
.trace-maestro--hero .trace-maestro-id .material-icons-mini {
    font-size: 28px;
}
.trace-maestro--hero .trace-maestro-peso-num {
    font-size: 2.1rem;
    color: var(--md-primary-700, #303f9f);
}
.trace-maestro--hero .trace-maestro-peso-unit {
    font-size: 1rem;
}
.trace-maestro--hero .trace-maestro-desc {
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--md-on-surface);
    padding: .55rem 0;
}
.trace-maestro-grid--hero {
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
}
.trace-maestro--hero .trace-maestro-item {
    background: #ffffff;
    padding: .55rem .8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.trace-maestro--hero .trace-maestro-label {
    font-size: .68rem;
    color: var(--md-primary-700, #303f9f);
}
.trace-maestro--hero .trace-maestro-value {
    font-size: .95rem;
    font-weight: 600;
}
.trace-maestro--hero .trace-maestro-chips {
    padding-top: .55rem;
}
@media (max-width: 1200px) {
    .trace-maestro-grid--hero { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .trace-maestro-grid--hero { grid-template-columns: 1fr; }
    .trace-maestro--hero .trace-maestro-peso-num { font-size: 1.6rem; }
}

/* STRIP: resumen mini, ocupando todo el ancho */
.aud-trace-strip { width: 100%; }

/* FEATURED: secciones destacadas (Producción + Histórico de Montajes) APILADAS.
   Producción Registrada arriba (lo que el operador ingresó al sistema)
   y debajo el Histórico de Montajes (lo que la bobina vivió en máquina). */
.aud-trace-featured {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.aud-trace-layout .aud-trace-section--featured {
    border: 1.5px solid #d1d9e6;
    border-radius: 10px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
}
.aud-trace-section--featured > .aud-trace-titulo--featured {
    margin: 0;
    padding: .55rem .85rem;
    border-bottom: 1px solid #e8eaed;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.aud-trace-section--featured .aud-trace-titulo-pill {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.aud-trace-section--featured .aud-trace-titulo-text { line-height: 1; }
/* Contenido del featured: padding interno separado del título */
.aud-trace-section--featured > .md-table-wrap,
.aud-trace-section--featured > .trace-empty,
.aud-trace-section--featured > .trace-montajes-grid {
    margin: .85rem;
}
.aud-trace-section--featured > .trace-montajes-grid { gap: .55rem; }
/* Variantes de color para el banner */
.aud-trace-section--featured-primary > .aud-trace-titulo--featured {
    background: linear-gradient(90deg, #303f9f 0%, #3f51b5 100%);
    border-bottom-color: #c5cae9;
}
.aud-trace-section--featured-success > .aud-trace-titulo--featured {
    background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%);
    border-bottom-color: #c8e6c9;
}

/* SECONDARY: encabezado para la zona secundaria */
.aud-trace-secondary-header {
    margin: .35rem 0 .15rem;
    padding: .45rem .8rem;
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-top: 1px dashed #d1d5db;
    background: transparent;
}
.aud-trace-grid--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}
@media (max-width: 1300px) {
    .aud-trace-grid--compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .aud-trace-grid--compact { grid-template-columns: 1fr; }
}
.aud-trace-layout .aud-trace-section--compact {
    padding: .5rem .65rem;
    background: #fafbfc;
    border-color: #eef0f3;
    box-shadow: none;
    opacity: .85;
}
.aud-trace-section--compact:hover {
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.aud-trace-layout .aud-trace-titulo--compact {
    font-size: .68rem;
    color: #6b7280;
    padding-bottom: .25rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid #eef0f3;
    letter-spacing: .05em;
}
.aud-trace-section--compact .md-table { font-size: .72rem; }
.aud-trace-section--compact .md-table thead th { font-size: .6rem; padding: .25rem .4rem; }
.aud-trace-section--compact .md-table tbody td { padding: .25rem .4rem; }
.aud-trace-section--compact .trace-empty {
    padding: .45rem .55rem;
    font-size: .7rem;
    background: transparent;
    border-style: dotted;
}

/* Modal fullscreen: layout y scroll del modal de auditoría */
.aud-modal-fs .modal-content {
    border-radius: 0;
    border: none;
    height: 100vh;
    background: #f5f7fb;
}
.aud-modal-fs .modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem !important;
}
.aud-modal-fs .modal-header {
    padding: .65rem 1.25rem;
}
.aud-modal-fs .modal-footer {
    padding: .55rem 1.25rem;
}
.aud-modal-fs .aud-content {
    /* Ya no hay restricción de altura del modal-xl scrollable */
    max-height: none;
}
/* En fullscreen, el header del trace-bobina ahora vive bajo el banner.
   Las secciones de soporte se ven mejor con un poco más de aire. */
.aud-modal-fs .aud-trace-section:not(.aud-trace-section--featured):not(.aud-trace-section--mini):not(.aud-trace-section--compact) { padding: .85rem 1.1rem; }
.aud-trace-section {
    border: 1px solid #e8eaed;
    border-radius: 8px;
    padding: .75rem 1rem;
    background: #ffffff;
    transition: box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.aud-trace-section:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.aud-trace-titulo {
    font-family: 'Roboto', sans-serif;
    font-size: .82rem; font-weight: 600;
    color: #3f51b5;
    border-bottom: 1px solid #e8eaed;
    padding-bottom: .35rem;
    margin-bottom: .55rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.aud-trace-kv { width: 100%; margin: 0; }
.aud-trace-kv th {
    width: 30%; font-weight: 500; color: #5f6368; font-size: .76rem;
    padding: .25rem .35rem;
    border-bottom: 1px solid #f1f3f4;
}
.aud-trace-kv td {
    font-size: .82rem;
    color: #202124;
    padding: .25rem .35rem;
    border-bottom: 1px solid #f1f3f4;
}
.aud-trace-kv tr:last-child th, .aud-trace-kv tr:last-child td { border-bottom: none; }
.aud-trace-section .md-table { font-size: .78rem; }
.aud-trace-section .md-table thead th { background: #fafbfc; font-size: .65rem; }

/* =====================================================================
   Timeline de Montajes (produccion_bobinas)
===================================================================== */
.trace-montajes-grid {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.trace-montaje {
    background: var(--md-surface);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-md);
    overflow: hidden;
    box-shadow: var(--md-elev-1);
    transition: all var(--md-fast) var(--md-ease);
}
.trace-montaje:hover { box-shadow: var(--md-elev-2); }
.trace-montaje-active { border-left: 3px solid var(--md-success-fg); }

.trace-montaje-head {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .75rem;
    background: var(--md-surface-2);
    border-bottom: 1px solid var(--md-divider);
    font-size: .76rem;
}
.trace-montaje-id {
    font-family: var(--md-font-mono);
    font-weight: 600;
    color: var(--md-on-surface-md);
    background: var(--md-surface-3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .7rem;
}
.trace-montaje-maquina {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 600;
    color: var(--md-on-surface);
}
.trace-montaje-estado-actual { margin-left: auto; }

.trace-montaje-body {
    padding: .65rem .85rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
@media (max-width: 768px) { .trace-montaje-body { grid-template-columns: 1fr; } }

.trace-evento {
    display: flex;
    gap: .55rem;
    padding: .5rem .65rem;
    border-radius: var(--md-radius-sm);
    background: var(--md-surface-2);
    border: 1px solid var(--md-divider);
}
.trace-evento-mont { border-left: 3px solid var(--md-success-fg); }
.trace-evento-desm { border-left: 3px solid var(--md-info-fg); }
.trace-evento-pendiente {
    border-left: 3px solid var(--md-on-surface-lo);
    background: var(--md-surface);
    font-style: italic;
}
.trace-evento-pendiente-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Botón de "Registrar Desmontaje" dentro del placeholder "Aún montada" */
.trace-btn-desmontar {
    font-style: normal;
    font-weight: 600;
    font-size: .75rem;
    padding: .35rem .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.trace-btn-desmontar:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
}
.trace-evento-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-primary-700);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--md-elev-1);
}
.trace-evento-mont .trace-evento-icon { color: var(--md-success-fg); }
.trace-evento-desm .trace-evento-icon { color: var(--md-info-fg); }
.trace-evento-titulo {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--md-on-surface-md);
    margin-bottom: 1px;
}
.trace-evento-data {
    font-size: .85rem; font-weight: 500;
    color: var(--md-on-surface);
    line-height: 1.2;
}
.trace-evento-data small {
    display: block;
    font-size: .68rem;
    color: var(--md-on-surface-lo);
    font-weight: 400;
    margin-top: 2px;
}
.trace-evento-meta {
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--md-on-surface-md);
    line-height: 1.4;
}
.trace-evento-obs {
    margin-top: .45rem;
    padding: .35rem .5rem;
    background: var(--md-warning-bg);
    color: #5d4037;
    border-radius: 4px;
    font-size: .76rem;
    font-style: italic;
    border-left: 2px solid var(--md-warning-fg);
}

.trace-montaje-foot {
    padding: .35rem .85rem;
    font-size: .72rem;
    color: var(--md-on-surface-md);
    background: var(--md-surface-2);
    border-top: 1px solid var(--md-divider);
    display: flex; align-items: center; gap: .35rem;
}

/* Fila eliminada (descontinuado=1) en el trace de bobina */
.trace-row-eliminado {
    background: linear-gradient(90deg, rgba(255, 235, 238, .6) 0%, rgba(255, 255, 255, 0) 100%);
    color: var(--md-on-surface-lo);
}
.trace-row-eliminado td:not(:last-child) {
    text-decoration: line-through;
    text-decoration-color: rgba(198, 40, 40, .3);
    opacity: .75;
}

/* Código de productor pequeño bajo el nombre */
.trace-op-codigo {
    color: var(--md-on-surface-lo);
    font-size: .7rem;
    font-weight: 400;
}

/* Maestro de bobina: tarjeta tipo "perfil" */
.trace-maestro { display: flex; flex-direction: column; gap: .65rem; }
.trace-maestro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--md-divider);
}
.trace-maestro-id {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--md-font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-on-surface);
    background: var(--md-surface-3);
    padding: .35rem .75rem;
    border-radius: var(--md-radius-sm);
}
.trace-maestro-id .material-icons-mini {
    font-size: 22px;
    margin-right: 4px;
}
.trace-maestro-peso { text-align: right; }
.trace-maestro-peso-num {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--md-primary-700);
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.trace-maestro-peso-unit {
    font-size: .75rem;
    color: var(--md-on-surface-md);
    margin-left: .25rem;
}
.trace-maestro-desc {
    font-size: .9rem;
    color: var(--md-on-surface);
    font-weight: 500;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--md-divider);
}
.trace-maestro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem;
    padding-top: .25rem;
}
.trace-maestro-item {
    display: flex; flex-direction: column;
    background: var(--md-surface-2);
    padding: .4rem .65rem;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-divider);
}
.trace-maestro-label {
    font-size: .65rem;
    font-weight: 600;
    color: var(--md-on-surface-md);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1px;
}
.trace-maestro-value {
    font-size: .88rem;
    font-weight: 500;
    color: var(--md-on-surface);
    line-height: 1.2;
}
.trace-maestro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--md-divider);
    align-items: center;
}

/* Resumen calculado: SUPER compacto, una sola línea pequeña */
.trace-resumen-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: .25rem .35rem;
    background: var(--md-surface-2);
    border-radius: var(--md-radius-sm);
}
.trace-resumen-mini {
    flex: 1 1 auto;
    display: flex; flex-direction: row;
    align-items: baseline;
    padding: .1rem .55rem;
    min-width: auto;
    gap: .35rem;
}
.trace-resumen-mini-label {
    font-size: .62rem;
    font-weight: 600;
    color: var(--md-on-surface-md);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.1;
    margin-bottom: 0;
    white-space: nowrap;
}
.trace-resumen-mini-value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--md-on-surface);
    line-height: 1.1;
    font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.trace-resumen-mini-value small {
    font-size: .65rem;
    color: var(--md-on-surface-lo);
    font-weight: 400;
    margin-left: 2px;
}
.trace-resumen-mini-chip { line-height: 1.2; }
.trace-resumen-divider {
    width: 1px;
    align-self: stretch;
    background: var(--md-divider);
    margin: .15rem 0;
}
@media (max-width: 768px) {
    .trace-resumen-row { flex-direction: column; align-items: stretch; }
    .trace-resumen-divider { width: auto; height: 1px; }
}
.trace-resumen-extra {
    margin-top: .55rem;
    padding: .5rem .7rem;
    background: var(--md-danger-bg);
    color: var(--md-danger-fg);
    border-radius: var(--md-radius-sm);
    border-left: 3px solid var(--md-danger-fg);
    font-size: .82rem;
    font-family: var(--md-font);
}

/* =====================================================================
   Variante MINI del resumen — el resumen es informativo pero secundario,
   prioriza visualmente la información de la bobina.
===================================================================== */
.aud-trace-section--mini {
    padding: .35rem .55rem;
    background: #fafbfc;
    border-color: #eef0f3;
    box-shadow: none;
}
.aud-trace-section--mini:hover { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.aud-trace-titulo--mini {
    font-size: .65rem;
    padding-bottom: .2rem;
    margin-bottom: .3rem;
    color: #6b7280;
    border-bottom: 1px solid #eef0f3;
    letter-spacing: .06em;
}
.trace-resumen-row--mini {
    padding: .15rem .25rem;
    background: transparent;
    gap: 0;
}
.trace-resumen-row--mini .trace-resumen-mini {
    padding: .05rem .4rem;
    gap: .3rem;
}
.trace-resumen-row--mini .trace-resumen-mini-label {
    font-size: .58rem;
    color: var(--md-on-surface-lo);
    letter-spacing: .04em;
}
.trace-resumen-row--mini .trace-resumen-mini-value {
    font-size: .78rem;
    font-weight: 600;
}
.trace-resumen-row--mini .trace-resumen-mini-value small {
    font-size: .58rem;
    margin-left: 1px;
}
.trace-resumen-row--mini .trace-resumen-mini-chip { font-size: .68rem; }
.trace-resumen-row--mini .trace-resumen-mini-chip .md-chip {
    padding: .1rem .4rem;
    font-size: .65rem;
    line-height: 1.2;
}
.trace-resumen-row--mini .trace-resumen-mini-chip .md-chip .material-icons-mini {
    font-size: 12px;
    margin-right: 2px;
}
.trace-resumen-row--mini .trace-resumen-divider {
    margin: .1rem 0;
}
.trace-resumen-extra--mini {
    margin-top: .3rem;
    padding: .25rem .5rem;
    font-size: .7rem;
    border-left-width: 2px;
}
.trace-empty--mini {
    padding: .4rem .6rem;
    font-size: .7rem;
    gap: .35rem;
}

/* Empty state pequeño dentro de las secciones del trace */
.trace-empty {
    padding: 1rem .75rem;
    color: var(--md-on-surface-lo);
    font-size: .82rem;
    display: flex; align-items: center; gap: .45rem;
    background: var(--md-surface-2);
    border-radius: var(--md-radius-sm);
    border: 1px dashed var(--md-divider);
    font-family: var(--md-font);
}
.trace-empty .material-icons-mini {
    font-size: 18px;
    color: var(--md-on-surface-lo);
    margin-right: 0;
}

/* ----------- Spinner del placeholder vacío ----------- */
.ip-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: #6c757d;
}