/* ═══════════════════════════════════════════════════════════════════════
   FINIUM · NEON TERMINAL — Override global de tema
   ───────────────────────────────────────────────────────────────────────
   Generado:    2026-05-24
   Propósito:   Aplicar la paleta y tipografía Neon Terminal (Claude Design)
                sobre shell.html y src/sections/*.js SIN modificar JS, HTML,
                IDs, data-attributes ni lógica.
   Estrategia:  Este archivo se carga vía <link> al final del <head> de
                shell.html, después del <style> inline. Por orden de carga
                y misma especificidad, las reglas de este archivo ganan.
                Se reserva !important EXCLUSIVAMENTE para anular los 4
                !important pre-existentes en shell (.ac-dropdown, .ac-option,
                .ac-sku, .ac-titulo, .ac-match, .ac-active, .dash-dropdown-btn,
                .col-sticky*).
   Fuente:      design-reference/_system/bodega-atoms.jsx (canónico)
                design-reference/dashboard/dashboard-app-screen.jsx
                design-reference/detalle-ventas/detalle-ventas-screen.jsx
                design-reference/bodega/bodega-rest.jsx
   Rollback:    Quitar la línea
                  <link rel="stylesheet" href="styles/neon-terminal.css">
                del <head> de shell.html. La app vuelve al tema verde oscuro
                Finium original sin reiniciar ni migrar nada.
   No hace:     No toca JS, no renombra clases ni IDs, no elimina reglas
                CSS existentes. Solo redefine valores.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── Tipografía: Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');


/* ═══════════════════════════════════════════════════════════════════════
   1. VARIABLES :root — reasignación de las 47 variables existentes
   + 22 variables NT nuevas (--nt-*, --ui-*)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ─── Backgrounds (negros graduados) ─── */
  --bg:               #000000;
  --bg-base:          #000000;
  --bg-primary:       #000000;
  --bg-card:          #0A0A0A;
  --bg-secondary:     #0A0A0A;
  --bg-card-2:        #111111;
  --bg-elevated:      #111111;
  --bg-hover:         #111111;
  --surface:          #0A0A0A;
  --surface2:         #070707;
  --table-alt:        rgba(255,255,255,.015);

  /* ─── Texto ─── */
  --text:             #E5E5E5;
  --text-primary:     #E5E5E5;
  --text-muted:       rgba(229,229,229,.55);
  --text-secondary:   rgba(229,229,229,.55);

  /* ─── Accent verde NT (#A3FF12) ─── */
  --accent:           #A3FF12;
  --accent-hover:     #B9FF3A;
  --accent-light:     #E5E5E5;
  --accent-dim:       rgba(163,255,18,.08);
  --accent-subtle:    rgba(163,255,18,.15);
  --accent-glow:      rgba(163,255,18,.18);

  /* ─── Bordes ─── */
  --border:           rgba(229,229,229,.08);
  --border-subtle:    rgba(229,229,229,.08);
  --border-hover:     rgba(229,229,229,.15);
  --border-accent:    rgba(163,255,18,.30);

  /* ─── Dorado (alias colapsado a accent NT) ─── */
  --dorado:           #A3FF12;
  --dorado-claro:     #B9FF3A;
  --dorado-hover:     rgba(163,255,18,.08);

  /* ─── Semánticos ─── */
  --verde:            #A3FF12;
  --success:          #A3FF12;
  --verde-subtle:     rgba(163,255,18,.08);
  --rojo:             #F87171;
  --danger:           #F87171;
  --error:            #F87171;
  --rojo-subtle:      rgba(248,113,113,.06);
  --amarillo:         #FBBF24;
  --warning:          #FBBF24;
  --amarillo-subtle:  rgba(251,191,36,.08);
  --azul-info:        #60A5FA;

  /* ─── Radios (chips finos NT) ─── */
  --radio:            8px;
  --radio-sm:         5px;

  /* ─── Sombras (NT minimiza shadows; reemplaza con borders) ─── */
  --sombra:           0 0 0 transparent;
  --sombra-sm:        0 0 0 transparent;
  --sombra-md:        0 12px 40px rgba(0,0,0,.5);
  --sombra-lg:        0 20px 60px rgba(0,0,0,.6);
  --sombra-accent:    0 0 18px rgba(163,255,18,.18);

  /* ═══════════════════════════════════════════════════════════════════
     Variables NT nuevas — paleta canónica de bodega-atoms.jsx
     ═══════════════════════════════════════════════════════════════════ */
  --nt-bg:            #000000;
  --nt-surface:       #0A0A0A;
  --nt-surface2:      #070707;
  --nt-surface3:      #0F0F0F;

  --nt-text:          #E5E5E5;
  --nt-mute:          rgba(229,229,229,.55);
  --nt-dim:           rgba(229,229,229,.32);
  --nt-faint:         rgba(229,229,229,.18);

  --nt-line:          rgba(163,255,18,.15);
  --nt-line2:         rgba(229,229,229,.08);
  --nt-line3:         rgba(229,229,229,.04);

  --nt-green:         #A3FF12;
  --nt-green-soft:    rgba(163,255,18,.08);
  --nt-green-glow:    rgba(163,255,18,.18);

  --nt-cyan:          #22D3EE;
  --nt-amber:         #FBBF24;
  --nt-orange:        #FB923C;
  --nt-red:           #F87171;
  --nt-purple:        #A07AFF;
  --nt-blue:          #60A5FA;
  --nt-yellow:        #FFE066;
  --nt-pink:          #F472B6;

  --ui-font:          "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-mono:          "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ─────────────────────────────────────────────────────────────────────
   FORZAR PALETA NT INDEPENDIENTEMENTE DEL TOGGLE "MODO OSCURO"
   ─────────────────────────────────────────────────────────────────────
   El shell.html declara `body.dark { ...vars sage... }` en líneas 128-156
   con especificidad (0,0,1,1) — MAYOR que :root (0,0,1,0). Si el usuario
   activa el toggle modo oscuro desde el panel de Configuración, el body
   recibe la clase `.dark` y las variables sage del shell ganan sobre las
   NT de :root.

   Para forzar NT en ambos estados (toggle on/off), duplicamos aquí las
   mismas variables NT bajo el selector `body, body.dark` con la misma
   especificidad (0,0,1,1) que `body.dark` del shell. Por orden de carga
   (este archivo va al final del <head>), gana nuestra declaración.

   El toggle UI sigue funcionando y agregando/quitando .dark — pero el
   resultado visual es siempre NT-Dark. El modo claro NT es feature
   futura (Q3 post-viaje).
   ───────────────────────────────────────────────────────────────────── */
body, body.dark, body.dark-mode {
  /* Backgrounds */
  --bg:               #000000;
  --bg-base:          #000000;
  --bg-primary:       #000000;
  --bg-card:          #0A0A0A;
  --bg-secondary:     #0A0A0A;
  --bg-card-2:        #111111;
  --bg-elevated:      #111111;
  --bg-hover:         #111111;
  --surface:          #0A0A0A;
  --surface2:         #070707;
  --table-alt:        rgba(255,255,255,.015);
  /* Text */
  --text:             #E5E5E5;
  --text-primary:     #E5E5E5;
  --text-muted:       rgba(229,229,229,.55);
  --text-secondary:   rgba(229,229,229,.55);
  --text-muted-alias: rgba(229,229,229,.55);
  /* Accent */
  --accent:           #A3FF12;
  --accent-hover:     #B9FF3A;
  --accent-light:     #E5E5E5;
  --accent-dim:       rgba(163,255,18,.08);
  --accent-subtle:    rgba(163,255,18,.15);
  --accent-glow:      rgba(163,255,18,.18);
  /* Borders */
  --border:           rgba(229,229,229,.08);
  --border-subtle:    rgba(229,229,229,.08);
  --border-hover:     rgba(229,229,229,.15);
  --border-accent:    rgba(163,255,18,.30);
  /* Dorado aliases */
  --dorado:           #A3FF12;
  --dorado-claro:     #B9FF3A;
  --dorado-hover:     rgba(163,255,18,.08);
  /* Semánticos */
  --verde:            #A3FF12;
  --success:          #A3FF12;
  --verde-subtle:     rgba(163,255,18,.08);
  --rojo:             #F87171;
  --danger:           #F87171;
  --error:            #F87171;
  --rojo-subtle:      rgba(248,113,113,.06);
  --amarillo:         #FBBF24;
  --warning:          #FBBF24;
  --amarillo-subtle:  rgba(251,191,36,.08);
  --azul-info:        #60A5FA;
  /* Sombras */
  --sombra:           0 0 0 transparent;
  --sombra-sm:        0 0 0 transparent;
  --sombra-md:        0 12px 40px rgba(0,0,0,.5);
  --sombra-lg:        0 20px 60px rgba(0,0,0,.6);
  --sombra-accent:    0 0 18px rgba(163,255,18,.18);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BASE — html / body / tipografía / scrollbar
   ═══════════════════════════════════════════════════════════════════════ */
html, body {
  background: #000000;
  color: #E5E5E5;
  font-family: var(--ui-font);
  font-feature-settings: "ss01", "cv11", "cv02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
}

#main {
  background: #000000;
}

/* Scrollbar tenue */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: #000000; }
::-webkit-scrollbar-thumb   {
  background: rgba(229,229,229,.08);
  border-radius: 5px;
  border: 2px solid #000000;
}
::-webkit-scrollbar-thumb:hover { background: rgba(163,255,18,.30); }
::-webkit-scrollbar-corner  { background: #000000; }

/* Selección texto */
::selection { background: rgba(163,255,18,.25); color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA — números tabulares y mono
   ═══════════════════════════════════════════════════════════════════════ */
.num {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: .02em;
  font-weight: 600;
}

/* Cualquier <th>, <td> hereda tabular-nums por defecto.
   Las celdas numéricas deben llevar clase .num o style mono adicional. */
table th, table td {
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. SECCIONES — header / título / subtítulo
   ═══════════════════════════════════════════════════════════════════════ */
.section {
  background: transparent;
}
.section-header {
  border-bottom: 1px solid var(--nt-line3);
  padding-bottom: 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.section-title {
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.section-subtitle {
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--nt-mute);
  margin-top: 5px;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. BOTONES — .btn / .btn-primary / .btn-secondary / .btn-danger /
                .btn-sm / .btn-icon / .btn-login
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 5px;
  font-family: var(--ui-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1.2;
  cursor: pointer;
  transition: all .15s ease;
  border: 1px solid transparent;
  text-decoration: none;
  height: auto;
}

.btn-primary {
  background: #A3FF12;
  color: #000000;
  border: none;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(163,255,18,.18);
}
.btn-primary:hover {
  background: #B9FF3A;
  box-shadow: 0 0 24px rgba(163,255,18,.32);
}
.btn-primary:active {
  background: #93EA0F;
  box-shadow: 0 0 12px rgba(163,255,18,.18);
}

.btn-secondary {
  background: #000000;
  border: 1px solid var(--nt-line2);
  color: #E5E5E5;
  font-weight: 600;
}
.btn-secondary:hover {
  border-color: var(--border-hover);
  background: #0A0A0A;
  color: #ffffff;
}

.btn-danger {
  background: transparent;
  border: 1px solid var(--nt-line2);
  color: var(--nt-red);
  font-weight: 600;
}
.btn-danger:hover {
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.06);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 11px;
  height: auto;
  border-radius: 5px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--nt-line3);
  color: var(--nt-mute);
  padding: 6px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover {
  color: #E5E5E5;
  border-color: var(--nt-line2);
  background: rgba(255,255,255,.02);
}

.btn:disabled, .btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Login */
.btn-login {
  background: #A3FF12;
  color: #000000;
  border: none;
  border-radius: 6px;
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 18px;
  letter-spacing: .02em;
  box-shadow: 0 0 24px rgba(163,255,18,.18);
  cursor: pointer;
  transition: all .15s ease;
}
.btn-login:hover {
  background: #B9FF3A;
  box-shadow: 0 0 32px rgba(163,255,18,.32);
}

.btn-toggle-password {
  background: transparent;
  border: none;
  color: var(--nt-mute);
  cursor: pointer;
}
.btn-toggle-password:hover { color: #E5E5E5; }


/* ═══════════════════════════════════════════════════════════════════════
   6. TABLAS — .tabla-wrapper / table / thead / tbody / col-sticky
   ═══════════════════════════════════════════════════════════════════════ */
.tabla-wrapper {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  overflow: hidden;
}
.tabla-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tabla-wrapper thead th {
  padding: 10px 12px;
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--nt-surface2);
  border-bottom: 1px solid var(--nt-line);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.tabla-wrapper tbody td {
  padding: 10px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--nt-line3);
  color: var(--nt-text);
  vertical-align: middle;
  font-weight: 500;
}
.tabla-wrapper tbody tr:last-child td {
  border-bottom: none;
}
.tabla-wrapper tbody tr:hover {
  background: rgba(255,255,255,.015);
}

#tabla-catalogo {
  table-layout: fixed;
  width: 100%;
}
.cat-cell-nombre {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabla-sticky {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* col-sticky — respeta los !important pre-existentes */
.col-sticky {
  position: sticky !important;
  z-index: 2 !important;
  background: var(--nt-surface) !important;
}
.col-sticky-0 { left: 0 !important; }
.col-sticky-1 {
  left: 90px !important;
  border-right: 1px solid var(--nt-line2) !important;
}

.user-table { padding: 10px 16px; }

.date-grp {
  white-space: nowrap;
  min-width: 185px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.date-part {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: #E5E5E5;
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 8px;
  text-align: center;
}

.col-sku-sticky,
.inv-col-sku {
  max-width: 90px;
  min-width: 60px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. KPI / METRIC CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.metric-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  background-image: none;     /* anula gradient verde original */
}
.metric-card.destacado {
  border-left: 2px solid var(--nt-green);
}
.m-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--nt-mute);
  font-weight: 700;
  text-transform: uppercase;
}
.m-value {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: 1;
}
.m-sub {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-dim);
  letter-spacing: .03em;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. TOTALES BAR
   ═══════════════════════════════════════════════════════════════════════ */
.totales-bar {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.t-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--nt-dim);
  font-weight: 700;
  text-transform: uppercase;
}
.t-value {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: -.005em;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. MODALES — overlay / box / header / body / footer
   ═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line);
  border-radius: 12px;
  box-shadow: 0 0 80px var(--nt-green-glow), 0 20px 60px rgba(0,0,0,.7);
  padding: 0;
  overflow: hidden;
}
.modal-header {
  background: transparent;
  padding: 18px 22px;
  border-bottom: 1px solid var(--nt-line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
}
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--nt-line2);
  background: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Modal ficha venta — cosméticos (rediseño estructural a slide-in queda
   para fase A/B sección Detalle Ventas). */
#modal-ficha-venta {
  padding: 20px;
  overflow-y: auto;
}
.ficha-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--nt-surface);
  border-bottom: 1px solid var(--nt-line2);
}
.ficha-sku {
  font-family: var(--ui-mono);
  font-size: 13px;
  color: var(--nt-green);
  font-weight: 700;
  letter-spacing: .04em;
}
.ficha-nombre {
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.01em;
}
.ficha-body {
  padding: 14px 22px 20px;
  background: var(--nt-surface);
}
.ficha-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--nt-line3);
  font-size: 12.5px;
}
.ficha-row:last-child { border-bottom: none; }
.ficha-label {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-mute);
  letter-spacing: .12em;
  font-weight: 600;
  text-transform: uppercase;
}
.ficha-value {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--nt-text);
  font-weight: 600;
}
.ficha-separator {
  height: 1px;
  background: var(--nt-line3);
  margin: 4px 0;
}
.ficha-profit {
  font-size: 14px;
  font-weight: 800;
  color: var(--nt-green);
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
}
.ficha-actions {
  display: flex;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--nt-line2);
  background: #000000;
}
.ficha-inline-edit {
  width: 110px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-family: var(--ui-mono);
  font-size: 12px;
  padding: 5px 8px;
}
.ficha-inline-edit:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 3px var(--nt-green-soft);
}

.ficha-tab-btn {
  background: transparent;
  border: none;
  color: var(--nt-mute);
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  transition: all .15s ease;
}
.ficha-tab-btn:hover { color: var(--nt-text); }
.ficha-tab-btn.active {
  color: var(--nt-green);
  border-bottom-color: var(--nt-green);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. SUBTABS — navegación interna de sección
   ═══════════════════════════════════════════════════════════════════════ */
.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--nt-line3);
  flex-wrap: wrap;
  padding-bottom: 0;
}
.subtab {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--nt-mute);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .01em;
  transition: all .15s ease;
  margin-bottom: -1px;
}
.subtab:hover {
  color: var(--nt-text);
  background: rgba(255,255,255,.02);
}
.subtab.active {
  color: #ffffff;
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
  font-weight: 700;
  box-shadow: 0 0 14px var(--nt-green-glow), inset 0 -2px 0 var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Logísticos · Shell (L.1) ──
   Kicker dinámico + subtab dot/count + search bar + select. Selectores PLANOS
   locales (#sec-logistica). HÍBRIDO: dot+count llevan color de plataforma; el
   .subtab.active se mantiene verde uniforme (NO se toca arriba) — decisión g.
   ════════════════════════════════════════════════════════════════════════ */
/* Kicker dinámico canon Screen (// COSTOS LOGÍSTICOS · {PLATAFORMA}) */
#sec-logistica .log-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Title canon w900 (micro-delta vs NT base w800) */
#sec-logistica .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
/* Subtab dot (color plataforma) — glow SOLO cuando activo (canon) */
#sec-logistica .subtab {
  display: inline-flex;
  align-items: center;
}
#sec-logistica .log-subtab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
#sec-logistica .subtab.active .log-subtab-dot {
  box-shadow: 0 0 6px var(--dot);
}
/* Subtab count badge (color plataforma · mono 10px pill) */
#sec-logistica .log-subtab-count {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: .04em;
}
#sec-logistica .log-subtab-count:empty {
  display: none;
}
/* Search bar canon — lupa IZQ, radius 5, bg #000, border line2 */
#sec-logistica #log-buscar {
  height: 32px;
  padding: 0 12px 0 32px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(229,229,229,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px;
}
#sec-logistica #log-buscar::placeholder {
  color: var(--nt-dim);
}
/* Select Marca skin canon (height32 bg#000 border line2 radius5) */
#sec-logistica .filtros select {
  height: 32px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  padding: 0 12px;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Logísticos · Tabla ML (L.2) ──
   Skin celda-por-celda canon (22 cols) + KPIs strip + totales glow. Selectores
   PLANOS locales (#sec-logistica). Paleta = tokens NT del repo (decisión A:
   var(--nt-amber) en vez del amber del canon HTML — diferencia imperceptible,
   0 hardcodes hex). Clases semánticas replicables a L.3 (Falabella/WMT/PAR/SHO).
   ════════════════════════════════════════════════════════════════════════ */
/* Headers Th canon: mono 9px green ls.12em uppercase (override local de la
   .tabla-wrapper compartida — la tabla ML lleva clase .log-tabla) */
#sec-logistica .log-tabla thead th {
  font-family: var(--ui-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--nt-surface2);
  padding: 10px;
  white-space: nowrap;
}
/* Columnas por color/tipo (canon) */
#sec-logistica .log-col-sku {
  color: var(--nt-cyan);
  font-family: var(--ui-mono);
  font-weight: 700;
}
#sec-logistica .log-col-mlc {
  color: var(--nt-purple);
  font-family: var(--ui-mono);
  font-size: 11px;
}
#sec-logistica .log-col-dim {
  color: var(--nt-dim);
  background: rgba(229,229,229,.025);
  font-family: var(--ui-mono);
}
#sec-logistica .log-col-amber {
  color: var(--nt-amber);
  font-family: var(--ui-mono);
}
#sec-logistica .log-col-cofin {
  color: var(--nt-green);
  font-weight: 700;
}
#sec-logistica .log-col-cofin-empty {
  color: var(--nt-dim);
}
#sec-logistica .log-col-purple {
  color: var(--nt-purple);
  font-family: var(--ui-mono);
}
#sec-logistica .log-col-util-positive {
  color: var(--nt-green);
  font-weight: 700;
  text-shadow: 0 0 14px var(--nt-green-glow);
}
#sec-logistica .log-col-util-negative {
  color: var(--nt-red);
  font-weight: 700;
}
/* Peso Cobro / Precio Venta — text w700 canon (incluye <strong> e <input>) */
#sec-logistica .log-col-strong,
#sec-logistica .log-col-strong strong,
#sec-logistica .log-tabla .log-col-strong input { font-weight: 700; }
/* Inputs editables en celdas (RUNTIME+ preservados): skin NT + heredan el
   color de la columna (color:inherit → MLC purple, COM.ML amber).
   L.3: selector generalizado a `input` para cubrir .ml-i (ML) + .gen-i
   (FAL/WMT/PAR) + .sfy-i (Shopify) — decisión 8. */
#sec-logistica .log-tabla input {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 4px;
  color: inherit;
  font-family: var(--ui-mono);
  font-size: 11.5px;
  padding: 3px 6px;
}
/* ACOS — canon es pill cyan estática; runtime es INPUT editable (decisión d).
   Reconciliación: input con look pill cyan (bg+texto cyan), sigue editable. */
#sec-logistica .log-tabla input.log-acos-input {
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.25);
  color: var(--nt-cyan);
  font-weight: 700;
}
/* KPIs strip (4 StatChip canon) */
#sec-logistica .log-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 0;
}
#sec-logistica .log-stat-chip {
  padding: 14px 16px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
}
#sec-logistica .log-stat-chip.is-accent {
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-logistica .log-stat-chip.is-amber { border-left-color: var(--nt-amber); }
#sec-logistica .log-stat-chip.is-cyan { border-left-color: var(--nt-cyan); }
#sec-logistica .log-stat-chip-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--nt-dim);
  letter-spacing: .14em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#sec-logistica .log-stat-chip-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--nt-text);
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-logistica .log-stat-chip.is-accent .log-stat-chip-value { color: var(--nt-green); }
#sec-logistica .log-stat-chip.is-amber .log-stat-chip-value { color: var(--nt-amber); }
#sec-logistica .log-stat-chip.is-cyan .log-stat-chip-value { color: var(--nt-cyan); }
#sec-logistica .log-stat-chip-sub {
  font-size: 10.5px;
  color: var(--nt-mute);
  margin-top: 5px;
}
/* L.7: .totales-bar de Logística eliminada (duplicaba el KPI strip). La regla
   local de glow util quedó sin uso → removida. La clase global .totales-bar
   (neon-terminal.css §6) se mantiene: la usan catalogo/compras/operativos/etc. */


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Logísticos · Tablas Plataformas (L.3) ──
   FAL/WMT/PAR (renderGenerica) + Shopify (renderShopify) reusan 100% las clases
   de celda de L.2. Único añadido: skin NT de la nota Walmart (RUNTIME+). El skin
   de inputs e .log-tabla se generalizó arriba (decisión 8). Tablas de tarifa por
   peso DIFERIDAS (decisión 1). Selectores PLANOS locales.
   ════════════════════════════════════════════════════════════════════════ */
/* Nota multi-producto Walmart (RUNTIME+, sin equivalente canon) */
#sec-logistica .log-walmart-note {
  padding: 10px 14px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-mute);
  margin-bottom: 12px;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Logísticos · Flex Panel (L.4.a) ──
   Info banner amber + stats (reusa .log-stat-chip de L.2 + variante is-red) +
   skin tabla transportadoras (icon-box truck amber / tarifa green glow / estado
   badge NT / action buttons). Paleta = tokens NT del repo (0 esmeralda canon).
   Sin zona pill (el modelo runtime no tiene campo zona). Selectores PLANOS.
   ════════════════════════════════════════════════════════════════════════ */
/* Info banner */
#sec-logistica .log-flex-banner {
  padding: 14px 16px;
  background: rgba(255,180,84,.04);
  border: 1px solid color-mix(in srgb, var(--nt-amber) 33%, transparent);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
#sec-logistica .log-flex-banner-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nt-amber);
}
#sec-logistica .log-flex-banner-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--nt-amber);
  letter-spacing: .14em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
#sec-logistica .log-flex-banner-text {
  font-size: 12.5px;
  color: var(--nt-mute);
}
/* Stats wrapper (reusa .log-stat-chip de L.2 + variante is-red) */
#sec-logistica .log-flex-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
#sec-logistica .log-stat-chip.is-red {
  border-left-color: var(--nt-red);
}
#sec-logistica .log-stat-chip.is-red .log-stat-chip-value {
  color: var(--nt-red);
}
/* Tabla: icon-box amber truck */
#sec-logistica .log-transp-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,180,84,.10);
  border: 1px solid color-mix(in srgb, var(--nt-amber) 33%, transparent);
  color: var(--nt-amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}
/* Tarifa col: green w700 glow */
#sec-logistica .log-col-tarifa {
  color: var(--nt-green);
  font-family: var(--ui-mono);
  font-weight: 700;
  text-shadow: 0 0 8px var(--nt-green-glow);
}
/* Estado badge */
#sec-logistica .log-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#sec-logistica .log-estado-badge.is-activa {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
#sec-logistica .log-estado-badge.is-pausada {
  background: rgba(255,255,255,.04);
  color: var(--nt-mute);
}
#sec-logistica .log-estado-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
/* Action buttons 26px bordered.
   L.4.b: selector extendido a .modal-transp-edit (el botón del sobredim vive en
   el modal, montado en body — fuera de #sec-logistica). Misma definición, 2 scopes. */
#sec-logistica .log-action-btn,
.modal-transp-edit .log-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line2);
  color: var(--nt-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  transition: color .15s, border-color .15s;
}
#sec-logistica .log-action-btn:hover,
.modal-transp-edit .log-action-btn:hover {
  color: var(--nt-text);
  border-color: var(--nt-line);
}
#sec-logistica .log-action-btn.is-danger:hover,
.modal-transp-edit .log-action-btn.is-danger:hover {
  color: var(--nt-red);
  border-color: color-mix(in srgb, var(--nt-red) 40%, transparent);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Logísticos · Modal Transportadora (L.4.b) ──
   Modal montado en document.body (clase .modal-transp-edit) → scope .modal-transp-edit
   (NO #sec-logistica). Backdrop NT se fija inline en JS. Box reusa .modal-box NT.
   Form reusa .login-field NT. Header sin icon-box (canon FLEX). Selectores PLANOS.
   ════════════════════════════════════════════════════════════════════════ */
/* Header (dentro de .modal-header NT): kicker + title + sub + close red */
.modal-transp-edit .modal-transp-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.modal-transp-edit .modal-transp-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.modal-transp-edit .modal-transp-sub {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
}
.modal-transp-edit .modal-transp-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-transp-edit .modal-transp-close:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}
/* Toggle Activa (verde canon) */
.modal-transp-edit .modal-transp-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.modal-transp-edit .modal-transp-toggle input { display: none; }
.modal-transp-edit .modal-transp-toggle-switch {
  width: 38px;
  height: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--nt-line2);
  border-radius: 11px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.modal-transp-edit .modal-transp-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--nt-mute);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.modal-transp-edit .modal-transp-toggle input:checked + .modal-transp-toggle-switch {
  background: var(--nt-green-soft);
  border-color: var(--nt-green);
}
.modal-transp-edit .modal-transp-toggle input:checked + .modal-transp-toggle-switch::after {
  transform: translateX(16px);
  background: var(--nt-green);
  box-shadow: 0 0 6px var(--nt-green);
}
.modal-transp-edit .modal-transp-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-transp-edit .modal-transp-toggle-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--nt-text);
}
.modal-transp-edit .modal-transp-toggle-pill {
  font-family: var(--ui-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--nt-green-soft);
  color: var(--nt-green);
  letter-spacing: .08em;
  display: none;
}
.modal-transp-edit .modal-transp-toggle input:checked ~ .modal-transp-toggle-label .modal-transp-toggle-pill {
  display: inline-block;
}
/* Sobredim section kicker (amber) */
.modal-transp-edit .modal-transp-sobredim-kicker {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nt-amber);
  letter-spacing: .14em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
/* Footer: override space-between de .modal-footer → flex-end; Eliminar a la
   izquierda (margin-right:auto), Cancelar+Guardar a la derecha (ambos modos). */
.modal-transp-edit .modal-transp-footer {
  justify-content: flex-end;
}
.modal-transp-edit .modal-transp-footer .btn-danger {
  margin-right: auto;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Operativos · Shell + Tabs + Burbujas (O.1) ──
   Skin NT del header (kicker) + category tabs (dot+count, HÍBRIDO L.1: active
   verde uniforme) + burbujas KPI (.metric-card → look StatChip canon, scoped a
   #sec-operativos para NO afectar dashboard/otras secciones) + search bar.
   Selectores PLANOS #sec-operativos. Clases op-* propias (decisión a).
   ════════════════════════════════════════════════════════════════════════ */
/* Kicker dinámico canon Screen */
#sec-operativos .op-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Title canon w900 (micro-delta vs NT base w800) */
#sec-operativos .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
/* Category tabs: dot (color categoría) + count badge. active verde via .subtab.active */
#sec-operativos .subtab {
  display: inline-flex;
  align-items: center;
}
#sec-operativos .op-subtab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
#sec-operativos .subtab.active .op-subtab-dot {
  box-shadow: 0 0 6px var(--opdot);
}
#sec-operativos .op-subtab-count {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: .04em;
}
/* Burbujas KPI → look StatChip canon (bg#000, borderLeft 2.5px color categoría
   inyectado inline, value 22px). Scoped: NO toca .metric-card de otras secciones. */
#sec-operativos .metric-card {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
  gap: 0;
}
#sec-operativos .metric-card .m-value {
  font-size: 22px;
  margin-top: 6px;
}
#sec-operativos .metric-card .m-sub {
  margin-top: 5px;
}
#sec-operativos .metric-card.destacado {
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-operativos .metric-card.destacado .m-value {
  color: var(--nt-green);
}
/* Search bar canon (lupa izq) — scoped al input del buscador compartido */
#sec-operativos #busq-operativos {
  height: 36px;
  padding: 0 12px 0 34px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(229,229,229,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}
#sec-operativos #busq-operativos::placeholder {
  color: var(--nt-dim);
}
/* Oculta la lupa derecha legacy del _busqHTML compartido (solo en operativos) */
#sec-operativos #busq-operativos + span {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Gastos Extraordinarios · Shell + Header + Subtabs + KPIs (E.1) ──
   Skin NT del runtime (superset funcional). Kicker dinámico canon + selects +
   category tabs (icono SVG + color por categoría, count badge, active verde
   uniforme HÍBRIDO L.1) + KPIs StatChip (.metric-card scoped, borderLeft tone
   inline) + search bar canon. Selectores PLANOS #sec-extraordinarios, clases
   ex-* propias. Espejo del bloque Operativos. Tokens NT (Opción A).
   ════════════════════════════════════════════════════════════════════════ */
/* Kicker dinámico canon Screen (// GASTOS EXTRAORDINARIOS · {MES} {AÑO}) */
#sec-extraordinarios .ex-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Title canon w900 (micro-delta vs NT base w800) */
#sec-extraordinarios .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
/* Selects año/mes skin NT (canon Select 32px) */
#sec-extraordinarios .ex-select {
  height: 32px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
}
/* Category tabs: icono SVG (color categoría) + count badge. active verde via .subtab.active */
#sec-extraordinarios .subtab {
  display: inline-flex;
  align-items: center;
}
#sec-extraordinarios .ex-cat-ico {
  margin-right: 6px;
  flex-shrink: 0;
}
#sec-extraordinarios .ex-subtab-count {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: .04em;
}
/* KPIs → look StatChip canon (bg#000, borderLeft 2.5px tone inline, value 22px).
   Scoped: NO toca .metric-card de otras secciones. */
#sec-extraordinarios .metric-card {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
  gap: 0;
}
#sec-extraordinarios .metric-card .m-value {
  font-size: 22px;
  margin-top: 6px;
}
#sec-extraordinarios .metric-card .m-sub {
  margin-top: 5px;
}
#sec-extraordinarios .metric-card.destacado {
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-extraordinarios .metric-card.destacado .m-value {
  color: var(--nt-green);
}
/* Search bar canon (lupa izq) — reusa data-URI de Operativos */
#sec-extraordinarios #busq-extraordinarios {
  height: 36px;
  padding: 0 12px 0 34px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(229,229,229,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}
#sec-extraordinarios #busq-extraordinarios::placeholder {
  color: var(--nt-dim);
}
/* Oculta la lupa derecha legacy del _busqHTML compartido (solo en extraordinarios) */
#sec-extraordinarios #busq-extraordinarios + span {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Gastos Extraordinarios · Tabla + Totales (E.2) ──
   Skin celda-por-celda canon: cat-pill (icono SVG + color), concepto w700,
   detalle mute, monto mono, moneda-pill CLP verde/USD cyan, CLP green w700 +
   @tasa subline, acciones SVG. Totales-bar canon (3 footer-stats + TOTAL glow,
   NO duplica las cards: muestra conteos CLP/USD distintos). Reusa base NT
   (.tabla-wrapper th/td, .num, .btn-icon, .t-label/.t-value, .totales-bar).
   Selectores PLANOS #sec-extraordinarios, clases ex-* propias.
   ════════════════════════════════════════════════════════════════════════ */
/* Headers canon (override padding sobre .tabla-wrapper base) */
#sec-extraordinarios .ex-tabla thead th {
  padding: 12px 12px;
  letter-spacing: .14em;
}
#sec-extraordinarios .ex-c { text-align: center; }
/* Fecha mono (canon) */
#sec-extraordinarios .ex-fecha {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-text);
}
/* Categoría pill (icono SVG + color, bg color-mix inline) */
#sec-extraordinarios .ex-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
#sec-extraordinarios .ex-cat-pill .ex-cat-ico {
  margin-right: 0;
}
/* Concepto w700 (canon) */
#sec-extraordinarios .ex-concepto {
  color: var(--nt-text);
  font-weight: 700;
}
/* Detalle mute ellipsis (canon) */
#sec-extraordinarios .ex-detalle {
  color: var(--nt-mute);
  font-size: 12px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
/* Monto mono (canon) */
#sec-extraordinarios .ex-monto {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--nt-text);
}
/* Moneda pill: CLP verde / USD cyan (canon MonedaPill) */
#sec-extraordinarios .ex-moneda-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
#sec-extraordinarios .ex-moneda-pill.is-clp {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
#sec-extraordinarios .ex-moneda-pill.is-usd {
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent);
  color: var(--nt-cyan);
}
/* Monto CLP green w700 + @tasa subline (canon, col flex der) */
#sec-extraordinarios .ex-clp {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
#sec-extraordinarios .ex-clp-val {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--nt-green);
  font-weight: 700;
}
#sec-extraordinarios .ex-clp-tasa {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
}
/* Totales-bar canon: 3 footer-stats izq + TOTAL glow der */
#sec-extraordinarios .totales-bar {
  justify-content: space-between;
}
#sec-extraordinarios .ex-foot-stats {
  display: flex;
  gap: 28px;
  align-items: baseline;
}
#sec-extraordinarios .ex-foot-total {
  text-align: right;
}
#sec-extraordinarios .ex-foot-total-lbl {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}
#sec-extraordinarios .ex-foot-total-val {
  font-size: 24px;
  font-weight: 900;
  color: var(--nt-green);
  font-family: var(--ui-font);
  letter-spacing: -.02em;
  text-shadow: 0 0 14px var(--nt-green-glow);
  margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Operativos · Tabla gastos (O.2) ──
   Skin celda-por-celda canon: pills categoría/moneda, concepto w700, línea
   crédito amber (1:1 Claude Design), día pill mono, equiv green, inputs/selects
   editables skin NT, action buttons. Selectores PLANOS #sec-operativos, clases
   op-* propias. Tabla 9-col canon adaptada (sin TIPO: feature F2 futura).
   ════════════════════════════════════════════════════════════════════════ */
/* Headers canon (override padding sobre .tabla-wrapper compartida) */
#sec-operativos .op-tabla thead th {
  padding: 12px 12px;
  letter-spacing: .14em;
}
/* Inputs/selects editables → skin NT (bg#000, border line2) */
#sec-operativos .op-input,
#sec-operativos .op-concepto-select {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 4px;
  color: var(--nt-text);
  font-family: var(--ui-font);
  padding: 4px 8px;
}
#sec-operativos .op-input:focus,
#sec-operativos .op-concepto-select:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 2px var(--nt-green-soft);
}
#sec-operativos .op-monto {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Categoría pill (readonly) canon: dot + color */
#sec-operativos .op-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
#sec-operativos .op-cat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
/* Concepto w700 (canon) */
#sec-operativos .op-concepto-txt {
  color: var(--nt-text);
  font-weight: 700;
}
/* Línea de crédito amber bajo el detalle (canon 1:1) */
#sec-operativos .op-detalle-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#sec-operativos .op-credit-line {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-amber);
  letter-spacing: .04em;
}
/* Día pill mono (canon) */
#sec-operativos .op-dia-pill {
  font-family: var(--ui-mono);
  font-size: 12px;
  color: var(--nt-text);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
}
/* Moneda pill (readonly): CLP verde / USD cyan (canon MonedaPill) */
#sec-operativos .op-moneda-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
#sec-operativos .op-moneda-pill.is-clp {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
#sec-operativos .op-moneda-pill.is-usd {
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent);
  color: var(--nt-cyan);
}
#sec-operativos .op-moneda-pill.is-uf {
  background: color-mix(in srgb, var(--nt-purple) 12%, transparent);
  color: var(--nt-purple);
}
/* F2: Tipo pill Fijo/Variable (canon TipoPill: mono 9px w700) */
#sec-operativos .op-tipo-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
/* F2: split global Fijos / Variables (base punto de equilibrio F4) */
#sec-operativos .op-fv-split {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
#sec-operativos .op-fv-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#sec-operativos .op-fv-seg-r { justify-content: flex-end; }
#sec-operativos .op-fv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
#sec-operativos .op-fv-k {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nt-mute);
}
#sec-operativos .op-fv-v {
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 700;
}
#sec-operativos .op-fv-pct {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-dim);
}
#sec-operativos .op-fv-bar {
  flex: 1;
  min-width: 60px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--nt-cyan) 22%, transparent);
  overflow: hidden;
}
#sec-operativos .op-fv-bar > span {
  display: block;
  height: 100%;
  background: var(--nt-green);
  box-shadow: 0 0 6px var(--nt-green-glow);
}
@media (max-width: 640px) {
  #sec-operativos .op-fv-split { flex-wrap: wrap; gap: 8px 14px; }
  #sec-operativos .op-fv-bar { order: 3; flex-basis: 100%; }
}
/* F4: panel Punto de Equilibrio (CVP) */
#sec-operativos .op-be-panel {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--nt-line2);
  border-left: 3px solid var(--nt-mute);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
#sec-operativos .op-be-panel.is-ok    { border-left-color: var(--nt-green); }
#sec-operativos .op-be-panel.is-under { border-left-color: var(--nt-amber); }
#sec-operativos .op-be-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#sec-operativos .op-be-kicker {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--nt-mute);
}
#sec-operativos .op-be-status {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 4px;
}
#sec-operativos .op-be-panel.is-ok .op-be-status {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
#sec-operativos .op-be-panel.is-under .op-be-status {
  background: color-mix(in srgb, var(--nt-amber) 14%, transparent);
  color: var(--nt-amber);
}
#sec-operativos .op-be-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#sec-operativos .op-be-label {
  font-size: 11px;
  color: var(--nt-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
#sec-operativos .op-be-num {
  font-family: var(--ui-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--nt-text);
}
#sec-operativos .op-be-formula {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-dim);
  margin-top: 6px;
}
#sec-operativos .op-be-detail {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#sec-operativos .op-be-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--nt-mute);
}
#sec-operativos .op-be-row b { font-family: var(--ui-mono); }
#sec-operativos .op-be-row-net {
  border-top: 1px solid var(--nt-line2);
  padding-top: 5px;
  margin-top: 2px;
  color: var(--nt-text);
  font-weight: 700;
}
#sec-operativos .op-be-row-net b { color: var(--nt-text); }
#sec-operativos .op-be-progress { margin-top: 14px; }
#sec-operativos .op-be-prog-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--nt-mute);
  margin-bottom: 6px;
}
#sec-operativos .op-be-prog-labels b { font-family: var(--ui-mono); color: var(--nt-text); }
#sec-operativos .op-be-avance { font-family: var(--ui-mono); font-weight: 700; }
#sec-operativos .op-be-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
#sec-operativos .op-be-bar > span {
  display: block;
  height: 100%;
  background: var(--nt-amber);
  transition: width .4s ease;
}
#sec-operativos .op-be-panel.is-ok .op-be-bar > span {
  background: var(--nt-green);
  box-shadow: 0 0 6px var(--nt-green-glow);
}
#sec-operativos .op-be-foot {
  margin-top: 12px;
  font-size: 12px;
  color: var(--nt-mute);
}
#sec-operativos .op-be-msg {
  font-size: 12.5px;
  color: var(--nt-mute);
  padding: 4px 0;
}
#sec-operativos .op-be-loading { color: var(--nt-dim); }
@media (max-width: 640px) {
  #sec-operativos .op-be-main { gap: 14px; }
  #sec-operativos .op-be-num { font-size: 24px; }
  #sec-operativos .op-be-detail { min-width: 100%; }
}
/* F3: toggle Ver Anual en el header */
#sec-operativos .op-anual-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
#sec-operativos .op-anual-label {
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nt-mute);
}

/* ── Sprint Mobile M.1: Hero "Total del mes" (canon operativos-mobile) ── */
#sec-operativos #op-hero-mobile { display: none; }  /* desktop oculto */
#sec-operativos .op-hero {
  padding: 18px 16px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--nt-surface), var(--nt-surface2));
  border: 1px solid var(--nt-line3);
}
#sec-operativos .op-hero-kicker {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 6px;
}
#sec-operativos .op-hero-num {
  font-family: var(--ui-mono);
  font-size: 30px;
  color: var(--nt-text);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-operativos .op-hero-sub {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-dim);
  margin-top: 5px;
  letter-spacing: .04em;
}
#sec-operativos .op-hero-bar {
  margin-top: 14px;
  height: 8px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
#sec-operativos .op-hero-bar > span { height: 100%; }
#sec-operativos .op-hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}
#sec-operativos .op-hero-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
#sec-operativos .op-hero-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
#sec-operativos .op-hero-leg-lbl { color: var(--nt-mute); font-weight: 600; }
#sec-operativos .op-hero-leg-pct { font-family: var(--ui-mono); color: var(--nt-text); font-weight: 700; }
#sec-operativos .op-hero-usd {
  margin-top: 12px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--nt-blue) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-blue) 40%, transparent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui-mono);
}
#sec-operativos .op-hero-usd-txt { flex: 1; font-size: 11px; color: var(--nt-blue); font-weight: 600; }
#sec-operativos .op-hero-usd-clp { font-size: 11px; color: var(--nt-text); font-weight: 800; }

/* M.2: mini-stats mobile (Margen + Pto. Equilibrio) */
#sec-operativos #op-stats-mobile { display: none; }
#sec-operativos .op-mstat {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-left: 2px solid var(--nt-mute);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#sec-operativos .op-mstat-label {
  font-family: var(--ui-mono);
  font-size: 8.5px;
  letter-spacing: .10em;
  font-weight: 700;
}
#sec-operativos .op-mstat-val {
  font-family: var(--ui-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--nt-text);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sec-operativos .op-mstat-sub {
  font-size: 9.5px;
  color: var(--nt-dim);
  font-family: var(--ui-mono);
  letter-spacing: .04em;
}

/* M.3: cards por gasto (canon operativos-mobile) */
#sec-operativos #op-cards-view { display: none; }
#sec-operativos .op-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-left: 3px solid var(--nt-mute);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#sec-operativos .op-card-top { display: flex; align-items: center; gap: 8px; }
#sec-operativos .op-card-cat {
  font-family: var(--ui-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
#sec-operativos .op-card-concepto {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#sec-operativos .op-card-credit {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}
#sec-operativos .op-card-detalle { font-size: 12.5px; color: var(--nt-text); font-weight: 500; line-height: 1.3; }
#sec-operativos .op-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--nt-line3);
}
#sec-operativos .op-card-monto-block { flex: 1; min-width: 0; }
#sec-operativos .op-card-monto { font-family: var(--ui-mono); font-size: 16px; color: var(--nt-text); font-weight: 800; line-height: 1; }
#sec-operativos .op-card-equiv { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); margin-top: 3px; letter-spacing: .04em; }
#sec-operativos .op-card-dia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-mute);
  font-weight: 600;
  letter-spacing: .04em;
  flex-shrink: 0;
}
#sec-operativos .op-card-act {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  color: var(--nt-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* M.5: footer total filtrado (mobile) */
#sec-operativos #op-footer-mobile { display: none; }
#sec-operativos .op-mfooter {
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#sec-operativos .op-mfooter-info { flex: 1; min-width: 0; }
#sec-operativos .op-mfooter-kicker { font-family: var(--ui-mono); font-size: 9.5px; letter-spacing: .12em; font-weight: 700; }
#sec-operativos .op-mfooter-sub { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); margin-top: 2px; letter-spacing: .04em; }
#sec-operativos .op-mfooter-total { font-family: var(--ui-mono); font-size: 20px; color: var(--nt-text); font-weight: 800; }

@media (max-width: 768px) {
  #sec-operativos #op-hero-mobile { display: block; margin-bottom: 14px; }
  #sec-operativos #op-stats-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  #sec-operativos #op-cards-view { display: flex; flex-direction: column; gap: 8px; }
  #sec-operativos #op-footer-mobile { display: block; margin-top: 12px; }
  #sec-operativos #metrics-operativos,
  #sec-operativos #op-fv-split,
  #sec-operativos #op-breakeven,
  #sec-operativos #op-tabla-view,
  #sec-operativos .section-subtitle,
  #sec-operativos .op-anual-toggle { display: none; }
  #sec-operativos .section-header { margin-bottom: 14px; }
  #sec-operativos .section-title { font-size: 1.15rem; }
  /* tabs categorías → scroll horizontal (canon) */
  #sec-operativos #op-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #sec-operativos #op-cat-tabs::-webkit-scrollbar { display: none; }
  #sec-operativos #op-cat-tabs .subtab { flex-shrink: 0; }
}

/* M.4: modales Operativos → bottom sheet en mobile (CSS-only).
   Los .modal-op-overlay viven en body (NO bajo #sec-operativos). Usan
   style inline con align-items:center → !important para pisarlo. */
@keyframes op-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 768px) {
  .modal-op-overlay { align-items: flex-end !important; }
  .modal-op-overlay .modal-box {
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh;
    animation: op-sheet-up .28s cubic-bezier(.16,.84,.44,1);
  }
  .modal-op-overlay .modal-box::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--nt-line2);
    margin: 8px auto 2px;
  }
}
/* Equiv. CLP: green w700 + tasa dim (canon) */
#sec-operativos .op-equiv {
  font-family: var(--ui-mono);
  font-size: 12.5px;
  color: var(--nt-green);
  font-weight: 700;
}
#sec-operativos .op-equiv-tasa {
  display: block;
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
}
/* Action buttons 26px bordered (canon iconBtn) */
#sec-operativos .op-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--nt-line2);
  color: var(--nt-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  transition: color .15s, border-color .15s;
}
#sec-operativos .op-action-btn:hover {
  color: var(--nt-text);
  border-color: var(--nt-line);
}
#sec-operativos .op-action-btn.is-danger:hover {
  color: var(--nt-red);
  border-color: color-mix(in srgb, var(--nt-red) 40%, transparent);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Costos Operativos · Modales Gasto (O.3) ──
   Modales montados en document.body (.modal-op-overlay): Editar/Nuevo gasto +
   Personalizar burbujas. Scope .modal-op-overlay (NO #sec-operativos). Backdrop
   NT se fija inline en JS. Box reusa .modal-box NT. Form reusa .login-field NT.
   Header: kicker + title + sub + close red (idéntico patrón modal Transportadora).
   ════════════════════════════════════════════════════════════════════════ */
.modal-op-overlay .op-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.modal-op-overlay .op-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.modal-op-overlay .op-modal-sub {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
  letter-spacing: .03em;
}
.modal-op-overlay .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-op-overlay .close-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Gastos Extraordinarios · Modal (E.3) ──
   Modal Nuevo/Editar montado en document.body (.modal-extra-overlay). Backdrop
   NT inline (JS). Box reusa .modal-box NT, form reusa .login-field NT. Header:
   kicker + title + sub + close red (idéntico patrón .modal-op-overlay). Caja
   conversión USD cyan (canon, update vivo). Scope .modal-extra-overlay.
   ════════════════════════════════════════════════════════════════════════ */
.modal-extra-overlay .ex-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.modal-extra-overlay .ex-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.modal-extra-overlay .ex-modal-sub {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
  letter-spacing: .03em;
}
.modal-extra-overlay .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-extra-overlay .close-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}
/* Caja conversión USD → CLP (canon, cyan) */
.modal-extra-overlay .ex-conv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--nt-cyan) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-cyan) 25%, transparent);
  border-radius: 6px;
}
.modal-extra-overlay .ex-conv-lbl {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-cyan);
  letter-spacing: .12em;
  font-weight: 700;
}
.modal-extra-overlay .ex-conv-val {
  font-family: var(--ui-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--nt-green);
}
/* Footer hint "* obligatorios" */
.modal-extra-overlay .ex-modal-req {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-mute);
  letter-spacing: .04em;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Financiamiento · Shell + Stats + Tabla (Fin-1.1) ──
   Maquillaje del shell (kicker) + KPIs (.kpi-mini → look StatChip canon, scoped
   a #sec-financiamiento, NO toca el .kpi-mini de dashboard) + tabla (EstadoBadge,
   MonedaPill, cuota green, tasa pill, action buttons). Selectores PLANOS.
   Clases fin-* propias. NO incluye modal (Fin-1.2) ni lógica activo (Fin-1.2/1.3).
   ════════════════════════════════════════════════════════════════════════ */
/* Kicker + title canon */
#sec-financiamiento .fin-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
#sec-financiamiento .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
/* KPIs (.kpi-mini → StatChip canon, scoped: NO toca dashboard) */
#sec-financiamiento .kpi-mini {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
  padding: 14px 16px;
}
#sec-financiamiento .kpi-mini-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#sec-financiamiento .kpi-mini-valor {
  font-size: 22px;
  font-weight: 800;
  color: var(--nt-text);
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-financiamiento .kpi-mini.is-accent {
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-financiamiento .kpi-mini.is-accent .kpi-mini-valor { color: var(--nt-green); }
#sec-financiamiento .kpi-mini.is-amber { border-left-color: var(--nt-amber); }
#sec-financiamiento .kpi-mini.is-cyan  { border-left-color: var(--nt-cyan); }
#sec-financiamiento .kpi-mini.is-blue  { border-left-color: var(--nt-blue); }
/* Headers tabla canon */
#sec-financiamiento .fin-tabla thead th {
  padding: 12px 12px;
  letter-spacing: .14em;
}
/* Nombre w700 + celdas mono */
#sec-financiamiento .fin-nombre { color: var(--nt-text); font-weight: 700; }
#sec-financiamiento .fin-mono { font-family: var(--ui-mono); }
#sec-financiamiento .fin-mono-dim { font-family: var(--ui-mono); color: var(--nt-mute); font-size: 11.5px; }
#sec-financiamiento .fin-cuota { font-family: var(--ui-mono); color: var(--nt-green); font-weight: 700; }
/* Moneda pill (USD cyan) */
#sec-financiamiento .fin-moneda-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-left: 6px;
}
#sec-financiamiento .fin-moneda-pill.is-usd {
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent);
  color: var(--nt-cyan);
}
/* Tasa pill amber */
#sec-financiamiento .fin-tasa-pill {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-amber);
  font-weight: 700;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--nt-amber) 12%, transparent);
  border-radius: 4px;
}
/* Estado badge canon (activo amber+dot / pagado green+check) */
#sec-financiamiento .fin-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}
#sec-financiamiento .fin-estado-badge.is-activo {
  background: color-mix(in srgb, var(--nt-amber) 14%, transparent);
  color: var(--nt-amber);
}
#sec-financiamiento .fin-estado-badge.is-pagado {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
#sec-financiamiento .fin-estado-badge .fin-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
/* Action button 26px bordered */
#sec-financiamiento .fin-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--nt-line2);
  color: var(--nt-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s;
}
#sec-financiamiento .fin-action-btn:hover {
  color: var(--nt-text);
  border-color: var(--nt-line);
}
/* Badge "activo asociado" en la tabla (F1) */
#sec-financiamiento .fin-activo-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: color-mix(in srgb, var(--nt-purple) 14%, transparent);
  color: var(--nt-purple);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Financiamiento · Modal préstamo (Fin-1.2) ──
   Modal #modal-prestamo (body-level, .modal-overlay NT ya aplica el backdrop).
   Header kicker+title+sub+close red · inputs/selects skin NT (se limpió el inline
   legacy) · sección Activo (checkbox + campos). Scope #modal-prestamo.
   ════════════════════════════════════════════════════════════════════════ */
#modal-prestamo .fin-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
#modal-prestamo .fin-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
#modal-prestamo .fin-modal-sub {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
  letter-spacing: .03em;
}
#modal-prestamo .fin-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
#modal-prestamo .fin-modal-close:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}
/* Inputs/selects del modal → skin NT (se limpió el border/bg/color inline) */
#modal-prestamo input,
#modal-prestamo select {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-family: var(--ui-font);
}
#modal-prestamo input:focus,
#modal-prestamo select:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 2px var(--nt-green-soft);
}
/* checkbox "Activo" minimalista + sección */
#modal-prestamo .fin-activo-check input,
#modal-prestamo #pr-activo-deprecia,
#modal-prestamo #pr-financia-activo {
  width: auto;
  accent-color: var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Capital de Socios · Shell (Cap-1a) ──
   Scaffolding: kicker + title. UI completa (KPIs/tabla/modal) en Cap-1b.
   ════════════════════════════════════════════════════════════════════════ */
#sec-capital-socios .cap-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
#sec-capital-socios .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
/* KPIs (.kpi-mini → StatChip canon, scoped) */
#sec-capital-socios .kpi-mini {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
  padding: 14px 16px;
}
#sec-capital-socios .kpi-mini-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#sec-capital-socios .kpi-mini-valor {
  font-size: 22px;
  font-weight: 800;
  color: var(--nt-text);
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-capital-socios .kpi-mini.is-accent { border-left-color: var(--nt-green); box-shadow: inset 0 0 16px var(--nt-green-soft); }
#sec-capital-socios .kpi-mini.is-accent .kpi-mini-valor { color: var(--nt-green); }
#sec-capital-socios .kpi-mini.is-aporte { border-left-color: var(--nt-green); }
#sec-capital-socios .kpi-mini.is-aporte .kpi-mini-valor { color: var(--nt-green); }
#sec-capital-socios .kpi-mini.is-retiro { border-left-color: var(--nt-red); }
#sec-capital-socios .kpi-mini.is-retiro .kpi-mini-valor { color: var(--nt-red); }
/* Headers tabla canon */
#sec-capital-socios .cap-tabla thead th { padding: 12px 12px; letter-spacing: .14em; }
#sec-capital-socios .cap-socio { color: var(--nt-text); font-weight: 700; }
#sec-capital-socios .cap-fecha { font-family: var(--ui-mono); color: var(--nt-mute); font-size: 11.5px; }
#sec-capital-socios .cap-rec { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-mute); }
#sec-capital-socios .cap-monto { font-family: var(--ui-mono); font-weight: 700; }
#sec-capital-socios .cap-monto.is-aporte { color: var(--nt-green); }
#sec-capital-socios .cap-monto.is-retiro { color: var(--nt-red); }
/* Tipo pill */
#sec-capital-socios .cap-tipo-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}
#sec-capital-socios .cap-tipo-pill.is-aporte { background: var(--nt-green-soft); color: var(--nt-green); }
#sec-capital-socios .cap-tipo-pill.is-retiro { background: color-mix(in srgb, var(--nt-red) 14%, transparent); color: var(--nt-red); }
/* Action buttons 26px */
#sec-capital-socios .cap-action-btn {
  width: 26px; height: 26px; border-radius: 4px;
  background: transparent; border: 1px solid var(--nt-line2); color: var(--nt-mute);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px; transition: color .15s, border-color .15s;
}
#sec-capital-socios .cap-action-btn:hover { color: var(--nt-text); border-color: var(--nt-line); }
#sec-capital-socios .cap-action-btn.is-danger:hover { color: var(--nt-red); border-color: color-mix(in srgb, var(--nt-red) 40%, transparent); }


/* ════════════════════════════════════════════════════════════════════════
   ── Capital de Socios · Modal (Cap-1b) ──
   Modal .modal-cap-overlay (body-level). Header kicker + inputs NT + footer.
   ════════════════════════════════════════════════════════════════════════ */
.modal-cap-overlay .cap-modal-kicker {
  font-family: var(--ui-mono); font-size: 10.5px; font-weight: 700;
  color: var(--nt-green); letter-spacing: .18em; margin-bottom: 4px; text-transform: uppercase;
}
.modal-cap-overlay .cap-modal-title { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.015em; margin-bottom: 4px; }
.modal-cap-overlay .cap-modal-sub { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-mute); letter-spacing: .03em; }
.modal-cap-overlay .cap-modal-close {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(248,113,113,.06); border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-cap-overlay .cap-modal-close:hover { background: rgba(248,113,113,.12); border-color: var(--nt-red); }
.modal-cap-overlay .modal-cap-footer { justify-content: flex-end; }
.modal-cap-overlay .modal-cap-footer .btn-danger { margin-right: auto; }
.modal-cap-overlay input[type="checkbox"] { width: auto; accent-color: var(--nt-green); }


/* ═══════════════════════════════════════════════════════════════════════
   11. BADGES / PILLS / CHIPS — sistema NT mono
   ═══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.badge-verde {
  background: rgba(163,255,18,.10);
  color: var(--nt-green);
  border-color: rgba(163,255,18,.30);
}
.badge-rojo {
  background: rgba(248,113,113,.10);
  color: var(--nt-red);
  border-color: rgba(248,113,113,.30);
}
.badge-amarillo {
  background: rgba(251,191,36,.10);
  color: var(--nt-amber);
  border-color: rgba(251,191,36,.30);
}
.badge-azul {
  background: rgba(96,165,250,.10);
  color: var(--nt-blue);
  border-color: rgba(96,165,250,.30);
}
.badge-origen-manual {
  background: rgba(229,229,229,.05);
  color: var(--nt-mute);
  border-color: var(--nt-line2);
}
.badge-origen-api {
  background: var(--nt-green-soft);
  color: var(--nt-green);
  border-color: rgba(163,255,18,.20);
}
.rol-badge {
  display: inline-block;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  color: var(--nt-dim);
  border: 1px solid var(--nt-line3);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. ALERTAS — sistema AlertBanner NT (warn / danger / info / success)
   ═══════════════════════════════════════════════════════════════════════ */
.alerta {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui-font);
  margin-bottom: 14px;
}
.alerta-roja {
  background: rgba(248,113,113,.06);
  border-color: rgba(248,113,113,.30);
  color: var(--nt-red);
}
.alerta-verde {
  background: var(--nt-green-soft);
  border-color: var(--nt-line);
  color: var(--nt-green);
}
.alerta-amarilla {
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.30);
  color: var(--nt-amber);
}
.alerta-azul {
  background: rgba(34,211,238,.06);
  border-color: rgba(34,211,238,.30);
  color: var(--nt-cyan);
}


/* ═══════════════════════════════════════════════════════════════════════
   13. EMPTY STATE / SECCIÓN BLOQUEADA
   ═══════════════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--nt-dim);
  font-family: var(--ui-mono);
  letter-spacing: .04em;
  font-size: 12.5px;
  background: transparent;
}
.es-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.35;
  color: var(--nt-mute);
}
.seccion-bloqueada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  background: var(--nt-surface);
  border: 1px dashed var(--nt-line2);
  border-radius: 8px;
  color: var(--nt-dim);
  font-family: var(--ui-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · Shell + Header dinámico + Subtabs (IM.1) ──
   Kicker + title/sub dinámicos por sub-tab + acciones movidas al header (1:1
   canon Screen) + subtabs underline canon (override del pill global, SCOPED a
   #sec-importaciones para NO tocar logística/dashboard que usan .subtabs pill).
   Selectores PLANOS #sec-importaciones, clases imp-* propias.
   ════════════════════════════════════════════════════════════════════════ */
#sec-importaciones .imp-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
#sec-importaciones .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
#sec-importaciones .imp-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#sec-importaciones .imp-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Subtabs underline canon (override del pill global; scoped) */
#sec-importaciones .subtabs {
  gap: 0;
  border-bottom: 1px solid var(--nt-line2);
  margin-top: 6px;
}
#sec-importaciones .subtab {
  padding: 12px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nt-mute);
}
#sec-importaciones .subtab:hover {
  background: transparent;
  color: var(--nt-text);
}
#sec-importaciones .subtab.active {
  color: var(--nt-green);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--nt-green);
  box-shadow: none;
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · SKUs KPIs + Search + Filtros funcionales (IM.2) ──
   5 StatChip canon (is-accent + tone inline) + search bar canon (input lupa)
   + 3 filtros funcionales (Marca/Estado/Contenedor) que ocultan/muestran filas.
   ════════════════════════════════════════════════════════════════════════ */
#sec-importaciones .imp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
#sec-importaciones .imp-kpi {
  padding: 12px 16px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
}
#sec-importaciones .imp-kpi.is-accent {
  border-color: var(--nt-green);
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-importaciones .imp-kpi-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 5px;
}
#sec-importaciones .imp-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--nt-text);
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-importaciones .imp-kpi.is-accent .imp-kpi-value { color: var(--nt-green); }
#sec-importaciones .imp-kpi-sub {
  font-size: 10.5px;
  color: var(--nt-mute);
  margin-top: 4px;
}
/* Search bar canon (input lupa + 3 filtros) */
#sec-importaciones .imp-searchbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#sec-importaciones .imp-search-input {
  flex: 1 1 320px;
  height: 32px;
  padding: 0 12px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#sec-importaciones .imp-search-input svg { flex-shrink: 0; }
#sec-importaciones .imp-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--nt-text);
  font-size: 12px;
  font-family: var(--ui-font);
}
#sec-importaciones .imp-search-input input::placeholder { color: var(--nt-dim); }
#sec-importaciones .imp-filter {
  height: 32px;
  padding: 0 11px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--ui-font);
  cursor: pointer;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · SKUs tabla skin + footer (IM.3) ──
   Toques canon por celda (SKU cyan, Cont purple, Pago green, Tasa amber, Fecha
   P2 check, MarcaPill/EstadoBadge readonly) + footer bar canon (3 stats + tasa
   glow). Inputs base ya NT (regla global input/select). Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-importaciones .imp-sku-inp,
#sec-importaciones .imp-sku-txt {
  font-family: var(--ui-mono);
  color: var(--nt-cyan);
  font-weight: 600;
}
#sec-importaciones .imp-cont-inp,
#sec-importaciones .imp-cont-txt {
  font-family: var(--ui-mono);
  color: var(--nt-purple);
  font-weight: 600;
}
/* Filas de solo lectura (edición vive en la ficha) — clickeables */
#sec-importaciones .imp-row.is-clickable { cursor: pointer; }
#sec-importaciones .imp-row.is-clickable:hover { background: rgba(163,255,18,.05) !important; }
#sec-importaciones .imp-num-txt {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
}
#sec-importaciones .imp-tasa-txt {
  font-family: var(--ui-mono);
  color: var(--nt-amber);
  font-weight: 600;
}
#sec-importaciones .imp-fecha-txt {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-text);
}
#sec-importaciones .imp-pago {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  color: var(--nt-green);
  font-weight: 700;
}
#sec-importaciones .imp-tasa-inp {
  color: var(--nt-amber);
  font-weight: 600;
}
#sec-importaciones .imp-fp2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-text);
  white-space: nowrap;
}
#sec-importaciones .imp-fp2 svg {
  width: 10px;
  height: 10px;
  stroke: var(--nt-green);
  flex-shrink: 0;
}
/* MarcaPill / EstadoBadge (readonly) */
#sec-importaciones .imp-marca-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
#sec-importaciones .imp-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
#sec-importaciones .imp-estado-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Warn badge embalaje (amber) */
#sec-importaciones .imp-warn-badge {
  display: inline-flex;
  align-items: center;
  color: var(--nt-amber);
}
/* Footer bar canon (3 stats izq + tasa promedio glow der) */
#sec-importaciones .imp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--nt-surface2);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 14px;
}
#sec-importaciones .imp-foot-stats {
  display: flex;
  gap: 32px;
  align-items: baseline;
}
#sec-importaciones .imp-foot-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#sec-importaciones .imp-foot-lbl {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}
#sec-importaciones .imp-foot-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--nt-text);
}
#sec-importaciones .imp-foot-tasa { text-align: right; }
#sec-importaciones .imp-foot-tasa-lbl {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}
#sec-importaciones .imp-foot-tasa-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--nt-amber);
  letter-spacing: -.02em;
  text-shadow: 0 0 12px rgba(251,191,36,.3);
  margin-top: 2px;
}
/* Fix tabla 20-col: scroll horizontal interno (patrón canon) + columna SKU
   sticky (pined a la izquierda). El .tabla-wrapper global queda overflow:hidden
   (clip del radio); el scroll vive en el div interno. */
#sec-importaciones .imp-scroll-x {
  overflow-x: auto;
}
#sec-importaciones .imp-skus-tabla {
  min-width: 1700px;
}
#sec-importaciones .imp-skus-tabla thead th:first-child,
#sec-importaciones .imp-skus-tabla tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--nt-line2);
}
#sec-importaciones .imp-skus-tabla tbody td:first-child {
  background: var(--nt-surface);
}
#sec-importaciones .imp-skus-tabla thead th:first-child {
  z-index: 3;
  background: var(--nt-surface2);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · Proveedores (IM.4) ──
   KPIs 4-col + banner import + tabla skin (PaisPill, VER FICHA, tiempo pill,
   cat tags, SKU chip, acciones SVG). Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-importaciones .imp-kpi-4 { grid-template-columns: repeat(4, 1fr); }
#sec-importaciones .imp-prov-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
  border-radius: 8px;
}
#sec-importaciones .imp-prov-banner strong { color: var(--nt-green); }
#sec-importaciones .imp-prov-banner-sub {
  font-size: 0.82rem;
  color: var(--nt-mute);
  margin-top: 4px;
}
#sec-importaciones .imp-prov-razon {
  display: flex;
  align-items: center;
  gap: 8px;
}
#sec-importaciones .imp-prov-sub {
  font-size: 0.78rem;
  color: var(--nt-mute);
  margin-top: 2px;
}
#sec-importaciones .imp-verficha {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-green);
  padding: 1px 6px;
  background: var(--nt-green-soft);
  border-radius: 3px;
  letter-spacing: .06em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#sec-importaciones .imp-verficha:hover { background: var(--nt-green-glow); }
#sec-importaciones .imp-pais-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent);
  color: var(--nt-cyan);
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
#sec-importaciones .imp-pais-flag { font-size: 13px; }
#sec-importaciones .imp-prov-contacto {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
}
#sec-importaciones .imp-tiempo-pill {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-amber);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--nt-amber) 12%, transparent);
  white-space: nowrap;
}
#sec-importaciones .imp-cat-tag {
  display: inline-block;
  background: var(--nt-green-soft);
  color: var(--nt-green);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 1px 2px;
}
#sec-importaciones .imp-sku-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: rgba(229,229,229,.05);
  color: var(--nt-dim);
  font-family: var(--ui-mono);
  font-size: 11.5px;
  font-weight: 700;
}
#sec-importaciones .imp-sku-chip.has {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · Contenedores cards (IM.5) ──
   Header (SKU purple pill + CIF cyan + EstadoBadge) + kickers canon + labels +
   payment blocks. El .cont-toggle/.totales-bar base ya son NT; IM.5 agrega los
   toques canon + barre aliases legacy del card. Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-importaciones .imp-cont-hdr-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#sec-importaciones .imp-cont-sku {
  font-family: var(--ui-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--nt-purple);
  padding: 4px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--nt-purple) 10%, transparent);
  letter-spacing: .04em;
}
#sec-importaciones .imp-cont-meta {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
}
#sec-importaciones .imp-cont-cif {
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--nt-cyan) 10%, transparent);
  color: var(--nt-cyan);
  letter-spacing: .04em;
}
#sec-importaciones .imp-cont-kicker {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 12px;
}
#sec-importaciones .imp-cont-lbl {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
}
#sec-importaciones .imp-pay-block {
  padding: 12px 14px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · Modales (IM.6) ──
   Modal proveedor (editar/detalle) .modal-prov-overlay + import Excel
   #modal-import-compras. Header kicker + title + close red (patrón
   .modal-op-overlay). Section labels → kicker mono green. Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
.prov-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.prov-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
}
.prov-section {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.modal-prov-overlay .close-btn,
#modal-import-compras .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-prov-overlay .close-btn:hover,
#modal-import-compras .close-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Importaciones · Ficha de Producto (crear/editar) ──
   Modal .modal-imp-overlay: header kicker+title+close red, secciones mono green,
   chips read-only (embalaje/pagos auto desde catálogo). Reusa .login-field NT.
   ════════════════════════════════════════════════════════════════════════ */
.modal-imp-overlay .imp-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.modal-imp-overlay .imp-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
}
.modal-imp-overlay .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-imp-overlay .close-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}
.modal-imp-overlay .imp-fsec {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.modal-imp-overlay .imp-fhint {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .02em;
  margin-top: -8px;
}
.modal-imp-overlay .imp-finfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.modal-imp-overlay .imp-finfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
}
.modal-imp-overlay .imp-finfo-lbl {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .12em;
  font-weight: 700;
}
.modal-imp-overlay .imp-finfo-val {
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Compras Locales · Shell + Header + Subtabs (CL.1) ──
   Kicker + title/sub dinámicos por sub-tab + acciones al header (1:1 canon) +
   subtabs underline canon. Selectores PLANOS #sec-compras, clases comp-*.
   ════════════════════════════════════════════════════════════════════════ */
#sec-compras .comp-kicker {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .20em;
  font-weight: 700;
  margin-bottom: 6px;
}
#sec-compras .section-title {
  font-weight: 900;
  letter-spacing: -.025em;
}
#sec-compras .comp-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#sec-compras .comp-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Subtabs underline canon */
#sec-compras .comp-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--nt-line2);
  margin: 6px 0 16px;
}
#sec-compras .comp-tab {
  padding: 12px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nt-mute);
  cursor: pointer;
}
#sec-compras .comp-tab:hover { color: var(--nt-text); }
#sec-compras .comp-tab.active {
  color: var(--nt-green);
  border-bottom: 2px solid var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Compras Locales · Compras KPIs + Filter bar + Footer (CL.2) ──
   5 StatChip canon + filter bar canon (caja con labels mono) + footer (4 stats
   + Total CLP glow). Filtros ya funcionales (solo skin). Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-compras .comp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
#sec-compras .comp-kpi {
  padding: 12px 16px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-left: 2.5px solid var(--nt-line2);
  border-radius: 6px;
}
#sec-compras .comp-kpi.is-accent {
  border-color: var(--nt-green);
  border-left-color: var(--nt-green);
  box-shadow: inset 0 0 16px var(--nt-green-soft);
}
#sec-compras .comp-kpi-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 5px;
}
#sec-compras .comp-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--nt-text);
  letter-spacing: -.02em;
  line-height: 1;
}
#sec-compras .comp-kpi.is-accent .comp-kpi-value { color: var(--nt-green); }
#sec-compras .comp-kpi-sub {
  font-size: 10.5px;
  color: var(--nt-mute);
  margin-top: 4px;
}
/* Filter bar canon (caja surface + campos con label mono) */
#sec-compras .comp-filterbar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  margin-bottom: 16px;
}
#sec-compras .comp-filt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#sec-compras .comp-filt-grow { flex: 1 1 240px; min-width: 220px; }
#sec-compras .comp-filt-lbl {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .16em;
  font-weight: 700;
}
#sec-compras .comp-filt-ctrl {
  height: 32px;
  padding: 0 11px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  font-family: var(--ui-font);
}
#sec-compras .comp-cal-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  cursor: pointer;
}
#sec-compras .comp-cal-pop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 50;
  overflow: hidden;
}
#sec-compras .comp-filt-resumen {
  margin-left: auto;
  align-self: flex-end;
  padding-bottom: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-green);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Search bar canon (lupa izq) dentro del filter field */
#sec-compras #busq-compras {
  height: 32px;
  padding: 0 12px 0 34px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(229,229,229,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}
#sec-compras #busq-compras::placeholder { color: var(--nt-dim); }
#sec-compras #busq-compras + span { display: none; }
/* Footer canon (4 stats izq + Total CLP glow der) */
#sec-compras .totales-bar { justify-content: space-between; }
#sec-compras .comp-foot-stats {
  display: flex;
  gap: 32px;
  align-items: baseline;
}
#sec-compras .comp-foot-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#sec-compras .comp-foot-lbl {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}
#sec-compras .comp-foot-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--nt-text);
}
#sec-compras .comp-foot-total { text-align: right; }
#sec-compras .comp-foot-total-lbl {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}
#sec-compras .comp-foot-total-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--nt-green);
  letter-spacing: -.02em;
  text-shadow: 0 0 16px var(--nt-green-glow);
  margin-top: 2px;
}
/* Fix scroll horizontal (tablas anchas) + 1ª columna sticky. Mismo patrón que
   Importaciones: scroll en div interno, .tabla-wrapper global queda overflow:hidden. */
#sec-compras .comp-scroll-x {
  overflow-x: auto;
}
#sec-compras #tabla-compras { min-width: 1200px; }
#sec-compras #tabla-provl   { min-width: 1100px; }
#sec-compras #tabla-compras thead th:first-child,
#sec-compras #tabla-compras tbody td:first-child,
#sec-compras #tabla-provl thead th:first-child,
#sec-compras #tabla-provl tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--nt-line2);
}
#sec-compras #tabla-compras tbody td:first-child,
#sec-compras #tabla-provl tbody td:first-child {
  background: var(--nt-surface);
}
#sec-compras #tabla-compras thead th:first-child,
#sec-compras #tabla-provl thead th:first-child {
  z-index: 3;
  background: var(--nt-surface2);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Compras Locales · Compras tabla skin (CL.3) ──
   Celdas canon: SKU cyan, MonedaPill, MarcaPill/EstadoBadge, subtotal green +
   @tasa + P1/P2 azul, delete SVG, fila cancelada opaca. Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-compras .comp-sku-inp,
#sec-compras .comp-sku-txt {
  font-family: var(--ui-mono);
  color: var(--nt-cyan);
  font-weight: 600;
}
/* Filas de solo lectura (edición vive en la ficha) — clickeables */
#sec-compras .comp-row.is-clickable { cursor: pointer; }
#sec-compras .comp-row.is-clickable:hover { background: rgba(163,255,18,.05) !important; }
#sec-compras .comp-variante-txt { color: var(--nt-mute); font-size: 11.5px; }
#sec-compras .comp-precio-txt {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
  font-weight: 600;
}
#sec-compras .comp-cant-txt {
  font-family: var(--ui-mono);
  color: var(--nt-text);
}
#sec-compras .comp-fecha-txt {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-text);
}
#sec-compras .comp-moneda-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}
#sec-compras .comp-moneda-pill.is-usd {
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent);
  color: var(--nt-cyan);
}
#sec-compras .comp-moneda-pill.is-clp {
  background: rgba(229,229,229,.06);
  color: var(--nt-mute);
}
#sec-compras .comp-subtotal {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nt-green);
}
#sec-compras .comp-sub-tasa {
  font-family: var(--ui-mono);
  font-size: 0.68rem;
  color: var(--nt-dim);
}
#sec-compras .comp-sub-pagos {
  font-family: var(--ui-mono);
  font-size: 0.68rem;
  color: var(--nt-blue);
  margin-top: 2px;
  line-height: 1.5;
}
#sec-compras .comp-marca-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
#sec-compras .comp-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
#sec-compras .comp-estado-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   ── Compras Locales · Proveedores (CL.4) ──
   KPIs 4-col + search + filtro categoría funcional + tabla skin (RUT mono,
   email cyan, total green, acciones SVG, ⚠ completar amber). Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
#sec-compras .comp-kpi-4 { grid-template-columns: repeat(4, 1fr); }
#sec-compras .comp-kpi-sm {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sec-compras .comp-searchbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#sec-compras .comp-search-input {
  flex: 1 1 320px;
  height: 32px;
  padding: 0 12px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#sec-compras .comp-search-input svg { flex-shrink: 0; }
#sec-compras .comp-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--nt-text);
  font-size: 12px;
  font-family: var(--ui-font);
}
#sec-compras .comp-search-input input::placeholder { color: var(--nt-dim); }
#sec-compras .comp-prov-sub {
  font-size: 0.72rem;
  color: var(--nt-mute);
}
#sec-compras .comp-prov-warn {
  font-family: var(--ui-mono);
  font-size: 0.72rem;
  color: var(--nt-amber);
  margin-top: 2px;
  letter-spacing: .04em;
  font-weight: 700;
}
#sec-compras .comp-prov-rut,
#sec-compras .comp-prov-tel,
#sec-compras .comp-prov-ultima {
  font-family: var(--ui-mono);
  font-size: 0.82rem;
  color: var(--nt-text);
}
#sec-compras .comp-prov-ultima { color: var(--nt-mute); }
#sec-compras .comp-prov-email {
  font-family: var(--ui-mono);
  font-size: 0.82rem;
  color: var(--nt-cyan);
}
#sec-compras .comp-prov-total {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nt-green);
}


/* ════════════════════════════════════════════════════════════════════════
   ── Compras Locales · Modales (CL.5) ──
   Modal compra (#modal-add-compra) + proveedor (.modal-provl-overlay). Header
   kicker + title + close red (patrón .modal-op-overlay). Tokens NT.
   ════════════════════════════════════════════════════════════════════════ */
.comp-modal-kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.comp-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.015em;
}
.comp-modal-section {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nt-green);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
#modal-add-compra .close-btn,
.modal-provl-overlay .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(248,113,113,.06);
  border: 1px solid color-mix(in srgb, var(--nt-red) 25%, transparent);
  color: var(--nt-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
#modal-add-compra .close-btn:hover,
.modal-provl-overlay .close-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: var(--nt-red);
}


/* ═══════════════════════════════════════════════════════════════════════
   14. CONT-TOGGLE / GRAFICA-CARD / GRAFICAS-GRID
   ═══════════════════════════════════════════════════════════════════════ */
.cont-toggle {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cont-toggle-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  background: transparent;
  transition: background .15s ease;
}
.cont-toggle-hdr:hover { background: rgba(163,255,18,.04); }
.cont-toggle.open .cont-toggle-hdr {
  border-bottom: 1px solid var(--nt-line);
  color: var(--nt-green);
}
.cont-toggle-body {
  display: none;
  background: var(--nt-surface2);
  border-top: 1px solid var(--nt-line3);
  padding: 14px 18px;
}
.cont-toggle.open .cont-toggle-body { display: block; }

.chevron {
  display: inline-block;
  transition: transform .2s ease;
  color: var(--nt-mute);
  font-family: var(--ui-mono);
}
.cont-toggle.open .chevron { transform: rotate(180deg); }

.graficas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.grafica-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 10px;
  padding: 18px 20px;
}
.grafica-titulo {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════
   15. TOP BAR / HEADER / TICKER / LOGO
   ═══════════════════════════════════════════════════════════════════════ */
#top-bar {
  position: fixed;
  top: 0;
  z-index: 900;
  height: 36px;
  background: #000000;
  border-bottom: 1px solid var(--nt-line);
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-mute);
  letter-spacing: .08em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ticker-dolar {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-mute);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tk-up    { color: var(--nt-green); font-weight: 700; }
.tk-down  { color: var(--nt-red);   font-weight: 700; }
.tk-item  {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ui-mono);
}
.tk-sep   { opacity: .35; }
.tk-scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: tk-marquee 55s linear infinite;
  will-change: transform;
  white-space: nowrap;
}
@keyframes tk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

#header {
  position: fixed;
  top: 36px;
  z-index: 800;
  height: 56px;
  background: #000000;
  border-bottom: 1px solid var(--nt-line3);
  padding: 0 16px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* anula sombras y gradients previos */
  box-shadow: none;
  background-image: none;
}

#logo {
  font-family: var(--ui-font);
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -.02em;
}
.logo-accent {
  color: var(--nt-green);
}

/* Gear ⚙ canon (app-header.jsx AppTicker · Icon.gear). #btn-config (id) para
   ganar specificity sobre la clase .app-ticker-gear; la clase se usa en el
   markup + targeting mobile. Full-height + border-left = divisor canon. */
#btn-config {
  width: 40px;
  height: 36px;
  align-self: stretch;
  border: none;
  border-left: 1px solid var(--nt-line3);
  border-radius: 0;
  background: transparent;
  color: var(--nt-mute);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
#btn-config:hover {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}

/* ═══════════════════════════════════════════════════════════════════
   App Header · Ticker (H.1) — LIVE badge + mask + fecha/hora + mobile
   Selector PLANO. Canon: app-header.jsx AppTicker / app-header-mobile MAppTicker.
   ═══════════════════════════════════════════════════════════════════ */
.app-ticker-live {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--nt-line3);
  background: rgba(163,255,18,.03);
  flex-shrink: 0;
}
.app-ticker-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nt-green);
  box-shadow: 0 0 8px var(--nt-green);
  animation: fin-pulse 2s infinite;
}
.app-ticker-live > span:last-child {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--nt-green);
}
@keyframes fin-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.app-ticker-mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.app-ticker-mask:hover .tk-scroll { animation-play-state: paused; }
.app-ticker-time {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-mute);
  letter-spacing: .04em;
  white-space: nowrap;
}
.app-ticker-divider {
  width: 1px;
  height: 11px;
  background: var(--nt-line2);
}
@media (max-width: 768px) {
  #top-bar { display: flex !important; height: 28px !important; padding: 0 !important; }
  .app-ticker-live { padding: 0 10px; gap: 5px; }
  .app-ticker-live-dot { width: 5px; height: 5px; box-shadow: 0 0 6px var(--nt-green); }
  .app-ticker-live > span:last-child { font-size: 8.5px; letter-spacing: .12em; }
  .app-ticker-time, .app-ticker-divider, #backup-indicator, #sync-status, #btn-config { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   App Header · Header bar (H.2) — logo SVG + wordmark + bell + avatar
   Selector PLANO. Canon: app-header.jsx AppHeader (56px) / MAppHeader (52px).
   ═══════════════════════════════════════════════════════════════════ */
/* Hamburger (id #btn-menu gana specificity; .app-header-hamburger en markup) */
#btn-menu, .app-header-hamburger {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line3);
  color: var(--nt-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
#btn-menu:hover, .app-header-hamburger:hover {
  border-color: var(--nt-line);
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
.app-header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.app-header-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.app-header-logo { flex-shrink: 0; display: block; }
.app-header-wordmark { display: flex; flex-direction: column; line-height: 1; }
.app-header-wordmark-name { font-weight: 800; letter-spacing: .14em; font-size: 15px; color: #fff; }
.app-header-wordmark-tag {
  font-family: var(--ui-mono); font-size: 8.5px; color: var(--nt-green);
  letter-spacing: .12em; font-weight: 700; margin-top: 3px;
}
.app-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; position: relative; }
.app-header-bell {
  width: 40px; height: 40px; padding: 0; border-radius: 9px; position: relative;
  background: rgba(255,255,255,.02); border: 1px solid var(--nt-line3); color: var(--nt-mute);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.app-header-bell:hover { border-color: var(--nt-line); background: var(--nt-green-soft); color: var(--nt-green); }
.app-header-bell-badge {
  position: absolute; top: 5px; right: 6px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--nt-red); color: #fff; font-family: var(--ui-mono); font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--nt-surface); box-shadow: 0 0 8px rgba(248,113,113,.5);
}
.app-header-divider { width: 1px; height: 26px; background: var(--nt-line2); margin: 0 4px; }
.app-header-avatar {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 6px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--nt-text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.app-header-avatar:hover { background: rgba(255,255,255,.02); }
.app-header-avatar.open { background: var(--nt-green-soft); border-color: var(--nt-line); }
.app-header-avatar-circle {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--nt-green), var(--nt-cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #000; font-family: var(--ui-mono);
}
.app-header-avatar-info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.app-header-avatar-name { font-size: 12.5px; font-weight: 700; color: #fff; }
.app-header-avatar-role { font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim); letter-spacing: .04em; }
.app-header-avatar-chevron { color: var(--nt-faint); flex-shrink: 0; margin-left: 2px; transition: transform .15s; }
.app-header-avatar.open .app-header-avatar-chevron { transform: rotate(180deg); }
@media (max-width: 768px) {
  .app-header-avatar-info, .app-header-avatar-chevron { display: none !important; }
  .app-header-avatar { padding: 0; gap: 0; border-radius: 50%; border-color: transparent; }
  .app-header-avatar-circle { width: 38px; height: 38px; }
  .app-header-bell { width: 38px; height: 38px; border-radius: 9px; }
  .app-header-logo { width: 26px; height: 17px; }
  .app-header-wordmark-name { font-size: 13.5px; letter-spacing: .12em; }
  .app-header-wordmark-tag { font-size: 7.5px; margin-top: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════
   App Header · Dropdowns (H.3) — notif + user · skin NT canon
   Selector PLANO. Canon: app-header.jsx NotifPanel / UserMenu.
   Mobile: reskin dropdowns (RUNTIME+); bottom sheets = deuda diferida.
   ═══════════════════════════════════════════════════════════════════ */
.app-dropdown {
  border: 1px solid var(--nt-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 50px var(--nt-green-glow) !important;
}
.app-dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nt-line3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-dropdown-head-text { flex: 1; min-width: 0; }
.app-dropdown-kicker {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
}
.app-dropdown-title { font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; }
.app-dropdown-action {
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--nt-line3);
  color: var(--nt-green);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app-dropdown-action:hover { background: var(--nt-green-soft); }
.app-dropdown-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--nt-line3);
  background: var(--nt-surface2);
  text-align: center;
}
.app-dropdown-footer span { font-size: 12px; font-weight: 700; color: var(--nt-green); cursor: pointer; }

/* Notif items (skin defensivo: data sin kind → sin icon-box) */
.app-notif-item {
  padding: 12px 16px 12px 16px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--nt-line3);
  cursor: pointer;
  position: relative;
  background: transparent;
}
.app-notif-item:last-child { border-bottom: none; }
.app-notif-item.is-unread { background: rgba(163,255,18,.02); padding-left: 22px; }
.app-notif-dot {
  position: absolute;
  left: 8px;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nt-green);
  box-shadow: 0 0 6px var(--nt-green);
}
.app-notif-titulo { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.app-notif-msg { font-size: 11px; color: var(--nt-mute); margin-top: 3px; line-height: 1.45; }
.app-notif-hora { font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim); margin-top: 5px; letter-spacing: .04em; }

/* User profile head (canon) + items funcionales runtime */
.app-user-profile-head {
  padding: 16px;
  border-bottom: 1px solid var(--nt-line3);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--nt-green-soft), transparent);
}
.app-user-dd-name { font-size: 14px; font-weight: 700; color: #fff; }
.app-user-dd-sub { font-size: 11px; color: var(--nt-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-badge-rol {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-green);
  letter-spacing: .06em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
}


/* ═══════════════════════════════════════════════════════════════════════
   16. MENU DRAWER LATERAL
   ═══════════════════════════════════════════════════════════════════════ */
.menu-overlay {
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.menu-panel {
  background: var(--nt-surface);
  border-right: 1px solid var(--nt-line2);
  box-shadow: 24px 0 60px rgba(0,0,0,.7), 0 0 40px var(--nt-green-glow);
}
.menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #000000;
  border-bottom: 1px solid var(--nt-line3);
  font-family: var(--ui-font);
}
/* App Header · Menu Panel header (H.4) — kicker mono + título */
.menu-panel-kicker {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--nt-green);
  margin-bottom: 2px;
}
.menu-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.menu-panel-close {
  background: transparent;
  border: none;
  color: var(--nt-mute);
  cursor: pointer;
  font-family: var(--ui-mono);
  font-size: 14px;
}
.menu-panel-close:hover { color: var(--nt-text); }
.menu-items {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  flex: 1;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 5px;
  border: 1px solid transparent;
  color: var(--nt-mute);
  font-family: var(--ui-font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .15s ease;
  margin-bottom: 2px;
}
.menu-item:hover {
  background: rgba(255,255,255,.02);
  color: var(--nt-text);
  border-color: var(--nt-line3);
}
.menu-item.active {
  background: var(--nt-green-soft);
  border-color: var(--nt-line);
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 0 14px rgba(163,255,18,.06);
}
.menu-item.disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}
.menu-separator {
  height: 1px;
  background: var(--nt-line3);
  margin: 8px 0;
  background-image: none;
}
.mi-icon {
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nt-mute);
}
.menu-item.active .mi-icon { color: var(--nt-green); }


/* ═══════════════════════════════════════════════════════════════════════
   17. USER MENU / DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════ */
.user-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  color: var(--nt-text);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.user-menu-btn:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,.04);
}
.user-menu-btn.open {
  border-color: var(--nt-line);
  background: var(--nt-green-soft);
  color: var(--nt-green);
}
.user-menu-dropdown {
  position: absolute;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  overflow: hidden;
  min-width: 200px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--nt-text);
  cursor: pointer;
  transition: background .12s ease;
}
.dropdown-item:hover {
  background: rgba(163,255,18,.06);
  color: #ffffff;
}
.dropdown-divider {
  height: 1px;
  background: var(--nt-line2);
  margin: 4px 0;
}
.chevron-icon {
  width: 14px;
  color: var(--nt-mute);
  transition: transform .2s ease;
}
.user-menu-btn.open .chevron-icon { transform: rotate(180deg); }


/* ═══════════════════════════════════════════════════════════════════════
   18. CONFIG PANEL — overlay + panel + toggles
   ═══════════════════════════════════════════════════════════════════════ */
#config-overlay {
  background: rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#config-panel {
  position: absolute;
  width: 360px;
  background: var(--nt-surface);
  border-left: 1px solid var(--nt-line);
  box-shadow: -24px 0 60px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
}
.config-header {
  background: #000000;
  padding: 20px 24px;
  border-bottom: 1px solid var(--nt-line2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ui-font);
}
.config-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}
.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--nt-line3);
}
.config-item:last-child { border-bottom: none; }
.config-label {
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--nt-text);
  font-weight: 600;
}
.config-desc {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-dim);
  margin-top: 3px;
  letter-spacing: .02em;
}

/* Toggle switch iOS-style NT — respeta estructura real del shell:
   - .toggle-switch (label wrapper): 42x24, transparente, sin border-radius
   - .toggle-slider (span track): inset:0, background gris OFF / verde NT ON
   - .toggle-slider::before (pseudo knob): 18x18 blanco circular,
     translateX(18px) cuando :checked
   Fix C.2.A: revertí el error de Fase A que aplicaba background al
   wrapper y reusaba .toggle-slider como knob, creando bug visual de
   "toggle montado sobre otro". */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(229,229,229,.12);
  border-radius: 24px;
  transition: background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  height: 18px;
  width: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform .2s ease;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--nt-green);
  box-shadow: 0 0 12px var(--nt-green-glow);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}


/* ═══════════════════════════════════════════════════════════════════════
   19. LOGIN BOX
   ═══════════════════════════════════════════════════════════════════════ */
.login-box {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line);
  border-radius: 12px;
  box-shadow: 0 0 60px var(--nt-green-glow), 0 20px 60px rgba(0,0,0,.7);
  padding: 32px 36px;
}
.login-logo {
  font-family: var(--ui-font);
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.03em;
  text-align: center;
}
.login-subtitle {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 6px;
  text-align: center;
}
.login-field {
  position: relative;
  margin-bottom: 16px;
  text-align: left;
}
.login-field label {
  display: block;
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-family: var(--ui-mono);
  font-size: 13px;
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 3px var(--nt-green-soft);
}
#login-error {
  color: var(--nt-red);
  font-family: var(--ui-mono);
  font-size: 11px;
  letter-spacing: .02em;
  margin-top: 10px;
}
.input-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.mu-perm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-text);
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════════════
   20. FORMS GLOBALES — inputs, selects, textareas
   ═══════════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  background: #000000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-family: var(--ui-mono);
  font-size: 12px;
  padding: 8px 12px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder,
textarea::placeholder {
  color: var(--nt-faint);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 3px var(--nt-green-soft);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--nt-green);
}
.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   21. AUTOCOMPLETE (.ac-*) — respeta los !important pre-existentes
   ═══════════════════════════════════════════════════════════════════════ */
.ac-wrapper {
  position: relative;
  display: inline-block;
}
.ac-dropdown {
  position: fixed !important;
  z-index: 99999 !important;
  background: var(--nt-surface) !important;
  border: 1px solid var(--nt-line2) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
  overflow: hidden !important;
}
.ac-option {
  padding: 10px 14px !important;
  font-family: var(--ui-font) !important;
  font-size: 12.5px !important;
  color: var(--nt-text) !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--nt-line3) !important;
}
.ac-option:hover,
.ac-active {
  background: var(--nt-green-soft) !important;
  color: #ffffff !important;
}
.ac-sku {
  font-family: var(--ui-mono) !important;
  font-size: 11px !important;
  color: var(--nt-green) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.ac-titulo {
  color: var(--nt-mute) !important;
  font-size: 11.5px !important;
  font-family: var(--ui-font) !important;
}
.ac-match {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.ac-empty {
  padding: 12px 16px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-dim);
  letter-spacing: .04em;
}

/* Dash dropdown btn — respeta los !important pre-existentes */
.dash-dropdown-btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  background: #000000 !important;
  border: 1px solid var(--nt-line2) !important;
  border-radius: 6px !important;
  color: var(--nt-text) !important;
  font-family: var(--ui-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.dash-dropdown-btn:hover {
  border-color: var(--nt-line) !important;
  background: rgba(163,255,18,.04) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   22. FILTROS / FORM ROW SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.filtros {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-filtros-dashboard {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}


/* ═══════════════════════════════════════════════════════════════════════
   23. ESTADOS — active, open, abierto, expandida, disabled, dark
   ═══════════════════════════════════════════════════════════════════════ */
.visible       { display: flex; }
.fade-in       { animation: appFadeIn 200ms ease; }
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.abierto {
  transform: translateX(0);
  visibility: visible;
}
.expandida {
  max-height: 2000px;
  transition: max-height 300ms ease-in;
}
.semana-contenido {
  overflow: hidden;
  max-height: 0;
  transition: max-height 200ms ease-out;
}
.disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

.delta-baja  { color: var(--nt-green); font-weight: 700; font-family: var(--ui-mono); }
.delta-sube  { color: var(--nt-red);   font-weight: 700; font-family: var(--ui-mono); }


/* ═══════════════════════════════════════════════════════════════════════
   24. SKELETON LOADER
   ═══════════════════════════════════════════════════════════════════════ */
#skeleton-loader {
  background: #000000;
}
.sk-bar      { background: var(--nt-surface); height: 36px; }
.sk-header   { background: var(--nt-surface); height: 56px; border-bottom: 1px solid var(--nt-line2); }
.sk-body     { background: #000000; }
.sk-sidebar  { background: transparent; }
.sk-main     { background: transparent; }
.sk-card     {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  height: 80px;
}
.sk-pulse    {
  background: linear-gradient(
    90deg,
    rgba(163,255,18,0) 0%,
    rgba(163,255,18,.06) 50%,
    rgba(163,255,18,0) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s linear infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   25. UTILIDADES — separadores, hr, divs decorativos
   ═══════════════════════════════════════════════════════════════════════ */
hr {
  border: none;
  height: 1px;
  background: var(--nt-line3);
  margin: 12px 0;
}

a {
  color: var(--nt-cyan);
  text-decoration: none;
  transition: color .12s;
}
a:hover { color: #67E5F6; }


/* ═══════════════════════════════════════════════════════════════════════
   26. PRINT — reportes imprimibles
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  #top-bar, #header, .menu-overlay, .menu-panel,
  #config-overlay, #config-panel, .er-no-print {
    display: none !important;
  }
  .section-title, .section-subtitle,
  .m-label, .m-value, .m-sub,
  .t-label, .t-value,
  .tabla-wrapper thead th, .tabla-wrapper tbody td {
    color: #000000 !important;
    background: #ffffff !important;
  }
  .tabla-wrapper {
    border: 1px solid #cccccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .badge, .alerta {
    box-shadow: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   27. RESPONSIVE — ajustes mínimos NT
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .section-title { font-size: 22px; }
  .m-value       { font-size: 22px; }
}
@media (max-width: 768px) {
  #main           { padding: 24px 16px; }
  .section-title  { font-size: 20px; }
  .m-value        { font-size: 20px; }
  .metrics-grid   { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tabla-wrapper thead th,
  .tabla-wrapper tbody td { padding: 8px 10px; font-size: 11.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   28. ANTI body.dark — reglas espejo para neutralizar los overrides sage
       del shell.html (líneas 158-234, 253-267, 1176-1210).

       Cada selector aquí usa `body .X, body.dark .X` para igualar la
       especificidad (0,0,2,1) del shell y ganar por orden de carga.
       Bloque diseñado para que NT-Dark se vea idéntico independientemente
       de si el toggle "Modo Oscuro" está ON u OFF.
   ═══════════════════════════════════════════════════════════════════════ */

/* shell:158-162 — inputs/select/textarea bajo body.dark */
body input[type="number"], body.dark input[type="number"],
body input[type="text"],   body.dark input[type="text"],
body input[type="date"],   body.dark input[type="date"],
body input[type="password"], body.dark input[type="password"],
body input[type="email"],  body.dark input[type="email"],
body input[type="search"], body.dark input[type="search"],
body select,               body.dark select,
body textarea,             body.dark textarea {
  background: #000000;
  border-color: var(--nt-line2);
  color: var(--nt-text);
}

/* shell:163-168 — surfaces principales bajo body.dark */
body .login-box,     body.dark .login-box,
body .tabla-wrapper, body.dark .tabla-wrapper,
body .filtros,       body.dark .filtros,
body .totales-bar,   body.dark .totales-bar,
body .modal-box,     body.dark .modal-box,
body .modal-header,  body.dark .modal-header,
body .menu-panel,    body.dark .menu-panel,
body #config-panel,  body.dark #config-panel,
body .config-header, body.dark .config-header,
body .btn-secondary, body.dark .btn-secondary {
  background: var(--nt-surface);
}

/* shell:163-168 — metric-card requiere también anular el linear-gradient */
body .metric-card, body.dark .metric-card {
  background: var(--nt-surface);
  background-image: none;
  border: 1px solid var(--nt-line3);
}

/* shell:169-172 — top bar */
body #top-bar, body.dark #top-bar {
  background: #000000;
  border-bottom: 1px solid var(--nt-line);
}
body #top-bar #btn-config, body.dark #top-bar #btn-config {
  background: transparent;
  color: var(--nt-mute);
  border: none;
  border-left: 1px solid var(--nt-line3);
  border-radius: 0;
}
body #top-bar #btn-config:hover, body.dark #top-bar #btn-config:hover {
  background: var(--nt-green-soft);
  color: var(--nt-green);
}

/* shell:175-180 — header principal */
body #header, body.dark #header {
  background: #000000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--nt-line2);
  box-shadow: none;
  background-image: none;
}
body #header::after, body.dark #header::after {
  opacity: 0;
  display: none;
}

/* shell:184-186 — menu-panel sombra */
body .menu-panel, body.dark .menu-panel {
  background: var(--nt-surface);
  box-shadow: 24px 0 60px rgba(0,0,0,.7), 0 0 40px var(--nt-green-glow);
  border-right: 1px solid var(--nt-line2);
}

/* shell:187-189, 222-224 — menu item active */
body .menu-item.active, body.dark .menu-item.active {
  background: var(--nt-green-soft);
  border-color: var(--nt-line);
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 0 14px rgba(163,255,18,.06);
}
body .menu-item.active::before, body.dark .menu-item.active::before {
  box-shadow: 0 0 12px var(--nt-green-glow);
}

/* shell:193-196 — metric-card ::before glow */
body .metric-card::before, body.dark .metric-card::before {
  opacity: 0;
}
body .metric-card:hover::before, body.dark .metric-card:hover::before {
  opacity: 0;
}

/* shell:197 — skeleton loader */
body #skeleton-loader, body.dark #skeleton-loader {
  background: #000000;
}

/* shell:198 — login screen */
body #login-screen, body.dark #login-screen {
  background: #000000;
}

/* shell:199 — modal overlay */
body .modal-overlay, body.dark .modal-overlay {
  background: rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* shell:200 — thead */
body thead, body.dark thead {
  background: var(--nt-surface2);
}
body thead th, body.dark thead th {
  background: var(--nt-surface2);
  color: var(--nt-green);
  border-bottom: 1px solid var(--nt-line);
  font-family: var(--ui-mono);
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
}

/* shell:201 — toggle-slider: regla anulada en Fase C.2.A
   Antes: body.dark .toggle-slider { background: var(--border); }
   Fase A puso aquí "background: var(--nt-line2)" que pisaba el estado
   :checked + .toggle-slider del shell (línea 860) y rompía el verde
   NT cuando el toggle se activaba. El estilo correcto del slider vive
   ahora en la sección "Toggle switch iOS-style NT" arriba (líneas
   ~1294-1340) respetando estructura :checked. */

/* shell:204-211 — hover sage de cards y tabla-wrapper */
body .metric-card:hover, body.dark .metric-card:hover {
  box-shadow: 0 0 0 1px rgba(163,255,18,.18), 0 0 24px rgba(163,255,18,.08);
  border-color: rgba(163,255,18,.25);
  background: var(--nt-surface);
  background-image: none;
}
body .tabla-wrapper:hover, body.dark .tabla-wrapper:hover {
  box-shadow: 0 0 0 1px rgba(163,255,18,.12), 0 0 16px rgba(163,255,18,.06);
  border-color: rgba(163,255,18,.20);
}

/* shell:216-221 — btn-primary glow sage */
body .btn-primary, body.dark .btn-primary {
  background: #A3FF12;
  color: #000000;
  border: none;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(163,255,18,.18);
}
body .btn-primary:hover, body.dark .btn-primary:hover {
  background: #B9FF3A;
  box-shadow: 0 0 24px rgba(163,255,18,.32);
}

/* shell:225-230 — section title (anula text-fill-color gradient) */
body .section-title, body.dark .section-title {
  color: #ffffff;
  background: none;
  background-image: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* shell:231-234 — th genérico */
body th, body.dark th {
  background: var(--nt-surface2);
  border-bottom: 1px solid var(--nt-line);
  color: var(--nt-green);
}

/* shell:241-251 — body base (Plus Jakarta Sans + bg #051F20) */
body, body.dark {
  font-family: var(--ui-font);
  background: #000000;
  background-attachment: scroll;
  color: var(--nt-text);
}

/* shell:258-267 — glow ambient radial sage (eliminamos los pseudos) */
body::before, body.dark::before {
  background: radial-gradient(
    ellipse at center,
    rgba(163,255,18,.04) 0%,
    rgba(163,255,18,.015) 40%,
    transparent 70%
  );
}
body::after, body.dark::after {
  background: radial-gradient(
    ellipse at center,
    rgba(163,255,18,.025) 0%,
    transparent 70%
  );
}

/* shell:1176-1210 — autocomplete bajo body.dark
   El shell usa !important en estas reglas, así que mantenemos !important
   solo aquí para alcanzar la regla, no escalar especificidad innecesaria. */
body .ac-dropdown, body.dark .ac-dropdown {
  background: var(--nt-surface) !important;
  border-color: var(--nt-line2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
}
body .ac-option, body.dark .ac-option {
  color: var(--nt-text) !important;
  border-bottom-color: var(--nt-line3) !important;
}
body .ac-option:hover, body.dark .ac-option:hover,
body .ac-option.ac-active, body.dark .ac-option.ac-active {
  background: var(--nt-green-soft) !important;
  color: #ffffff !important;
}
body .ac-option .ac-sku, body.dark .ac-option .ac-sku {
  color: var(--nt-green) !important;
  background: var(--nt-green-soft) !important;
}
body .ac-match, body.dark .ac-match {
  color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   29. Overrides para clases inyectadas por sections
   ───────────────────────────────────────────────────────────────────────
   Las sections (src/sections/*.js) inyectan en runtime un bloque <style>
   con CSS embebido propio (clases inventadas por cada section como
   .kpi-dashboard, .dv-burbuja, .dvo-card, etc.). Ese <style> se agrega
   al <head> DESPUÉS de nuestro <link> NT cuando la section monta. Con
   igual especificidad, gana el último cargado → gana la section.

   Solución: aumentar la especificidad de nuestras reglas NT con un
   prefijo `body #sec-X` que iguala/supera la mobile-override existente
   del shell `#sec-X .clase` (0,1,1,0). Doble selector `body #sec-X .X,
   #sec-X .X` cubre ambos escenarios y garantiza ganar sin !important.

   Fase B.1 (dry run): solo .kpi-dashboard del Dashboard, para validar
   que el approach técnico funciona en producción antes de extender al
   resto (.dv-*, .dvo-*, .btn-aplicar-dash, .btn-periodo, .nc-*).
   ═══════════════════════════════════════════════════════════════════════ */

/* dashboard.js:51-57 — cards KPI hero del Dashboard
   ("VENTAS DEL DÍA", "MARGEN BRUTO DEL DÍA", etc.)
   Original sage: linear-gradient(135deg, #0B2B26 0%, #163832 100%) */
body #sec-dashboard .kpi-dashboard,
#sec-dashboard .kpi-dashboard {
  background: var(--nt-surface);
  background-image: none;
  border: 1px solid var(--nt-line2);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
body #sec-dashboard .kpi-dashboard::before,
#sec-dashboard .kpi-dashboard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nt-green), transparent);
  opacity: .4;
}
body #sec-dashboard .kpi-dashboard:hover,
#sec-dashboard .kpi-dashboard:hover {
  box-shadow: 0 0 0 1px rgba(163,255,18,.18), 0 0 24px rgba(163,255,18,.08);
  border-color: rgba(163,255,18,.25);
  transform: none;
}

body #sec-dashboard .kpi-dashboard .kpi-label,
#sec-dashboard .kpi-dashboard .kpi-label {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--nt-dim);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
}

body #sec-dashboard .kpi-dashboard .kpi-valor,
#sec-dashboard .kpi-dashboard .kpi-valor {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
  font-size: 42px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  line-height: 1;
}

body #sec-dashboard .kpi-dashboard .kpi-sub,
#sec-dashboard .kpi-dashboard .kpi-sub {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
  letter-spacing: .03em;
  margin-top: 4px;
}

body #sec-dashboard .kpi-dashboard .kpi-tendencia.up,
#sec-dashboard .kpi-dashboard .kpi-tendencia.up {
  color: var(--nt-green);
  font-weight: 700;
}

body #sec-dashboard .kpi-dashboard .kpi-tendencia.down,
#sec-dashboard .kpi-dashboard .kpi-tendencia.down {
  color: var(--nt-red);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   30. Overrides Dashboard inyectadas (Fase B.2)
   ───────────────────────────────────────────────────────────────────────
   dashboard.js inyecta <style> con clases propias al montar la section.
   Aplicamos patrón validado en Fase B.1: body #sec-dashboard .Y especif.
   (0,1,2,1) > .Y inyectada (0,0,1,0). Cero !important agregado.

   Clases cubiertas:
   - .btn-aplicar-dash    (dashboard.js:69) — color sage #051F20 → #000
   - .btn-periodo         (dashboard.js:63) — radius + font NT
   - .dash-dropdown-btn:hover     (dashboard.js:73) — refuerzo defensivo
   - .dash-dropdown-item:hover    (dashboard.js:78) — refuerzo defensivo
   ═══════════════════════════════════════════════════════════════════════ */

/* dashboard.js:69-70 — botón "Aplicar filtros" verde NT con glow */
body #sec-dashboard .btn-aplicar-dash,
#sec-dashboard .btn-aplicar-dash {
  background: var(--nt-green);
  color: #000000;
  border: none;
  border-radius: 6px;
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 12px;
  box-shadow: 0 0 18px var(--nt-green-glow);
  transition: all .15s ease;
}
body #sec-dashboard .btn-aplicar-dash:hover,
#sec-dashboard .btn-aplicar-dash:hover {
  background: #B9FF3A;
  filter: none;
  box-shadow: 0 0 24px rgba(163,255,18,.32);
}

/* dashboard.js:63-64 — botones de período (HOY/AYER/SEMANA/MES) */
body #sec-dashboard .btn-periodo,
#sec-dashboard .btn-periodo {
  background: #000000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-mute);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  padding: 11px;
  letter-spacing: .01em;
  transition: all .15s ease;
}
body #sec-dashboard .btn-periodo:hover,
#sec-dashboard .btn-periodo:hover,
body #sec-dashboard .btn-periodo.activo,
#sec-dashboard .btn-periodo.activo {
  background: var(--nt-green-soft);
  border-color: var(--nt-green);
  color: #ffffff;
}

/* dashboard.js:73 — dropdown btn hover (refuerzo defensivo) */
body #sec-dashboard .dash-dropdown-btn:hover,
#sec-dashboard .dash-dropdown-btn:hover {
  background: var(--nt-surface2);
  border-color: var(--nt-line);
}

/* dashboard.js:78 — dropdown item hover (refuerzo defensivo) */
body #sec-dashboard .dash-dropdown-item:hover,
#sec-dashboard .dash-dropdown-item:hover {
  background: var(--nt-green-soft);
  color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════
   31. Overrides Detalle Ventas inyectadas (Fase B.2)
   ───────────────────────────────────────────────────────────────────────
   detalle-ventas.js inyecta <style id="dv-styles"> con todas las clases
   .dv-* y .dvo-*. Mismo patrón: body #sec-detalle-ventas .Y, #sec-... .Y

   Clases cubiertas (11):
   - .dv-tabla td              (border-bottom sage rgba(35,83,71,.5))
   - .dv-tabla tbody tr:hover  (hover sutil NT)
   - .dv-row-activa            (verde NT-soft con !important consistente)
   - .dv-burbuja               (radius 16→12)
   - .dv-burbuja:hover         (glow verde NT, sin translate)
   - .dv-burbuja.activa        (border-top verde + glow firma NT)
   - .dv-burbuja .label        (IBM Plex Mono uppercase)
   - .dv-burbuja .contador     (Hanken Grotesk 30px tabular)
   - .dv-btn-pag.activa        (color sage #051F20 → #000 + glow NT)
   - .dvo-card / .dvo-prod-card / .dvo-pago-card (radius 12→8)
   - .dvo-prod-sku             (mono NT con letter-spacing)
   ═══════════════════════════════════════════════════════════════════════ */

/* detalle-ventas.js:367 — border-bottom de filas (sage hardcoded) */
body #sec-detalle-ventas .dv-tabla td,
#sec-detalle-ventas .dv-tabla td {
  border-bottom: 1px solid var(--nt-line3);
}

/* detalle-ventas.js:366 — hover de filas (refuerzo defensivo + sutil NT) */
body #sec-detalle-ventas .dv-tabla tbody tr:hover,
#sec-detalle-ventas .dv-tabla tbody tr:hover {
  background: rgba(255,255,255,.015);
}

/* detalle-ventas.js — fila activa (mantiene !important del shell) */
body #sec-detalle-ventas .dv-tabla tbody tr.dv-row-activa,
#sec-detalle-ventas .dv-tabla tbody tr.dv-row-activa {
  background: var(--nt-green-soft) !important;
  border-left: 3px solid var(--nt-green);
}

/* detalle-ventas.js:358 — burbuja base */
body #sec-detalle-ventas .dv-burbuja,
#sec-detalle-ventas .dv-burbuja {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 12px;
  padding: 18px 22px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}

/* detalle-ventas.js:359 — hover (anula translate + glow verde NT) */
body #sec-detalle-ventas .dv-burbuja:hover,
#sec-detalle-ventas .dv-burbuja:hover {
  transform: none;
  border-color: rgba(163,255,18,.30);
  box-shadow: 0 0 24px rgba(163,255,18,.08);
}

/* detalle-ventas.js:362 — burbuja activa con border-top y glow firma NT */
body #sec-detalle-ventas .dv-burbuja.activa,
#sec-detalle-ventas .dv-burbuja.activa {
  background: var(--nt-surface);
  border: 1px solid var(--nt-green);
  border-top: 2px solid var(--nt-green);
  box-shadow: 0 0 24px var(--nt-green-glow);
}

/* detalle-ventas.js:360 — label de burbuja (mono uppercase) */
body #sec-detalle-ventas .dv-burbuja .label,
#sec-detalle-ventas .dv-burbuja .label {
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--nt-mute);
  font-weight: 700;
  text-transform: uppercase;
}

/* detalle-ventas.js:361 — contador grande (Hanken Grotesk tabular) */
body #sec-detalle-ventas .dv-burbuja .contador,
#sec-detalle-ventas .dv-burbuja .contador {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 6px;
  display: block;
}

/* detalle-ventas.js:374 — botón paginación activo */
body #sec-detalle-ventas .dv-btn-pag.activa,
#sec-detalle-ventas .dv-btn-pag.activa {
  background: var(--nt-green);
  border-color: var(--nt-green);
  color: #000000;
  font-weight: 700;
  border-radius: 5px;
  box-shadow: 0 0 14px var(--nt-green-glow);
}

/* detalle-ventas.js:410 — cards summary panel detalle (radius 12→8) */
body #sec-detalle-ventas .dvo-card,
#sec-detalle-ventas .dvo-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}

/* detalle-ventas.js:454 — cards de producto */
body #sec-detalle-ventas .dvo-prod-card,
#sec-detalle-ventas .dvo-prod-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* detalle-ventas.js:469 — cards de pago */
body #sec-detalle-ventas .dvo-pago-card,
#sec-detalle-ventas .dvo-pago-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
}

/* detalle-ventas.js — SKU monoespaciado (alinear con tipo NT) */
body #sec-detalle-ventas .dvo-prod-sku,
#sec-detalle-ventas .dvo-prod-sku {
  font-family: var(--ui-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--nt-green);
  letter-spacing: .04em;
}


/* ───────────────────────────────────────────────────────────────────────
   TODO — Camino A/B real:
   Las siguientes clases NO se cubren con override CSS porque tienen
   inline styles + JS imperativo en hover (item.style.background = '...')
   que CSS no puede vencer sin reescribir el HTML inyectado.

   Pendientes para refactor de Compras section:
   - compras.js:545  .nc-ac-item   (border-bottom sage inline + hover JS)
   - compras.js:598  .nc-prov-item (idéntico)

   Cuando se rediseñe la sección Compras, quitar los style="..." inline
   de los <div> generados y reemplazar los handlers JS mouseenter/leave
   por reglas CSS hover normales.
   ─────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   32. BODEGA — overrides Camino C profundo (NT v6)
   ───────────────────────────────────────────────────────────────────────
   Cubre los <style> que bodega.js inyecta en runtime (head.appendChild)
   y los 3 inline sage críticos con !important documentado.

   Bloques cubiertos:
   - .qr-cam-* (QR camera overlay para Picking + Despacho, 2 bloques)
     bodega.js:2166 (qr-cam-styles-global) y 2387 (dentro modo-escaneo)
   - .me-* (Modo Escaneo overlay full-screen, 23 reglas)
     bodega.js:2320 (modo-escaneo-styles)
   - .inf-* (Informe Toma de Inventario, font fix)
     bodega.js:4334 (5 reglas inline en innerHTML)
   - .er-* (Reporte de Actividades, font + chart fix)
     bodega.js:4753 (69 reglas inyectadas)
   - 3 inline sage literal con !important documentado:
     bodega.js:243 (badge "Principal"), :274 (alert #bd-resumen-sku),
     :3921 (banner info modal reponer)

   Patrón: body #sec-bodega .X, #sec-bodega .X — especificidad (0,1,2,1)
   > clase inyectada (0,0,1,0). Cero !important agregado salvo los 3
   inline críticos donde no hay otra opción.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   TODO CAMINO A/B REAL — BODEGA (obligatorio para 1:1 Claude Design)
   ───────────────────────────────────────────────────────────────────
   Lo siguiente NO está cubierto en Camino C porque requiere modificar
   bodega.js (inline style.cssText o JS imperativo):

   Modales con backdrop sage rgba(5,31,32,0.45):
   - L415  Modal Ubicación
   - L3759 Modal Trasladar (Recepción)
   - L3913 Modal Reponer Principal
   - L4096 Modal Mover a FULL (ML)
   - L4572 Modal Toma de Inventario

   Modales admin diagnóstico:
   - L1253, L1255 Backfill ML
   - L1549, L1551 Recalc Flex
   - L1586, L1588 Diag counts
   - L1708 Diag mobile

   Toast notifications:
   - L113  Toast módulo
   - L1809 Toast picking

   Otros:
   - L2672 Overlay feedback escaneo (rgba tailwind)
   - L2387 .qr-cam-* duplicado (consolidar a 1 bloque)

   Acción: modificar bodega.js reemplazando style.cssText/inline con
   clases CSS controladas por neon-terminal.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 32.A · QR Camera overlay (.qr-cam-*) ──────────────────────────────
   Patrón scan NT canónico (bodega-atoms.jsx scan variant + bodega-scan.jsx):
   cyan #22D3EE como color firma, glow cyan, border 1.5px cyan.

   FIX Bodega.2-fix: el overlay se monta con document.body.appendChild
   (bodega.js:2239 Picking, :2978 Despacho), NO dentro de #sec-bodega.
   Cambiamos patrón a `body .qr-cam-overlay [.qr-cam-X]` para matchear
   el overlay raíz que vive directamente en body. */

body .qr-cam-overlay,
body.dark .qr-cam-overlay {
  background: rgba(0,0,0,.96);
  font-family: var(--ui-font);
  color: var(--nt-text);
}
body .qr-cam-overlay .qr-cam-frame,
body.dark .qr-cam-overlay .qr-cam-frame {
  box-shadow: 0 0 0 2px var(--nt-cyan),
              0 0 40px rgba(34,211,238,.40);
  border-radius: 12px;
}
body .qr-cam-overlay .qr-cam-frame video,
body.dark .qr-cam-overlay .qr-cam-frame video {
  background: #000;
}
body .qr-cam-overlay .qr-cam-guia,
body.dark .qr-cam-overlay .qr-cam-guia {
  border: 2px dashed var(--nt-cyan);
}
body .qr-cam-overlay .qr-cam-status,
body.dark .qr-cam-overlay .qr-cam-status {
  color: var(--nt-mute);
  font-family: var(--ui-mono);
  letter-spacing: .04em;
}
body .qr-cam-overlay .qr-cam-status.ok,
body.dark .qr-cam-overlay .qr-cam-status.ok {
  color: var(--nt-green);
  font-weight: 700;
}
body .qr-cam-overlay .qr-cam-status.err,
body.dark .qr-cam-overlay .qr-cam-status.err {
  color: var(--nt-red);
}
body .qr-cam-overlay .qr-cam-btn,
body.dark .qr-cam-overlay .qr-cam-btn {
  background: #000;
  border: 1px solid var(--nt-line2);
  color: var(--nt-text);
  border-radius: 5px;
  font-family: var(--ui-font);
  font-weight: 600;
  transition: all .15s ease;
}
body .qr-cam-overlay .qr-cam-btn.primary,
body.dark .qr-cam-overlay .qr-cam-btn.primary {
  background: linear-gradient(135deg, #031420, #0B2330);
  border: 1.5px solid var(--nt-cyan);
  color: var(--nt-cyan);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(34,211,238,.18);
}


/* ─── 32.B · Modo Escaneo overlay (.me-*) ───────────────────────────────
   Overlay full-screen del modo escaneo masivo en Picking. Reemplaza
   palette tailwind slate/amber/green por NT canónico.

   FIX Bodega.2-fix: el overlay se monta con document.body.appendChild
   (bodega.js:2475), NO dentro de #sec-bodega. Cambiamos patrón a
   `body .modo-escaneo-overlay .me-X` para matchear el overlay raíz
   que vive directamente en body. */

body .modo-escaneo-overlay,
body.dark .modo-escaneo-overlay {
  background: rgba(0,0,0,.92);
  color: var(--nt-text);
  font-family: var(--ui-font);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* .me-lista/row/ubic/sku/etc. migrados a sección 42 (.bd-scan-lista__*) */

/* .me-scan-input-box migrado a sección 43 (.bd-scan-input-box) */
body .modo-escaneo-overlay .me-scan-log,
body.dark .modo-escaneo-overlay .me-scan-log {
  background: var(--nt-surface2);
  border: 1px solid var(--nt-line3);
  border-radius: 5px;
  color: var(--nt-mute);
  font-family: var(--ui-mono);
}

/* .me-scan-vacio — empty state del log cuando no hay scans
   (refactor desde inline JS bodega.js:2699 — Bodega.2.1 warm-up A/B)
   Patrón NT empty state: dashed cyan tenue (30% alpha) + texto cyan
   brillante. Diferenciado del input "activo" (cyan brillante + glow)
   pero mismo family cromática para consistencia visual. */
body .modo-escaneo-overlay .me-scan-vacio,
body.dark .modo-escaneo-overlay .me-scan-vacio {
  padding: 24px;
  background: transparent;
  border: 1.5px dashed rgba(34,211,238,.30);
  border-radius: 10px;
  color: var(--nt-cyan);
  text-align: center;
  font-size: 0.9rem;
  font-family: var(--ui-mono);
  letter-spacing: .04em;
}

/* .me-scan-error — error state del log cuando hay mensaje de error
   (refactor desde inline JS bodega.js:2698 — Bodega.3.G)
   Patrón NT error state: dashed rojo NT + texto rojo NT + bg tenue.
   Hermano de .me-scan-vacio pero con paleta NT red en lugar de cyan. */
body .modo-escaneo-overlay .me-scan-error,
body.dark .modo-escaneo-overlay .me-scan-error {
  padding: 24px;
  background: rgba(248,113,113,.08);
  border: 1.5px solid rgba(248,113,113,.40);
  border-radius: 10px;
  color: var(--nt-red);
  text-align: center;
  font-size: 0.9rem;
  font-family: var(--ui-mono);
  letter-spacing: .04em;
}


/* ─── 32.C · Informe Toma de Inventario (.inf-*) ────────────────────────
   Único cambio: font-family Space Grotesk → IBM Plex Mono NT.
   El resto ya está NT gracias a las variables --bg-card y --bg-secondary. */

body #sec-bodega .inf-metric-val,
#sec-bodega .inf-metric-val {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}


/* ─── 32.D · Reporte de Actividades (.er-*) ─────────────────────────────
   3 cambios mínimos: font Space Grotesk → IBM Plex Mono en valores
   monoespaciados de KPIs y operarios. Resto ya NT por variables. */

body #sec-bodega .er-kpi-val,
#sec-bodega .er-kpi-val {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
body #sec-bodega .er-operario-uds-val,
#sec-bodega .er-operario-uds-val {
  font-family: var(--ui-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

/* Refuerzo: KPI label en mono uppercase (consistencia con Dashboard) */
body #sec-bodega .er-kpi-label,
#sec-bodega .er-kpi-label {
  font-family: var(--ui-mono);
  letter-spacing: .14em;
  color: var(--nt-mute);
  font-weight: 700;
  text-transform: uppercase;
}

/* Section titles en print preserve `border-bottom: 2px solid #111` (OK
   en print con fondo blanco). En screen, asegurar NT. */
body #sec-bodega .er-section-titulo,
#sec-bodega .er-section-titulo {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--nt-green);
  font-weight: 700;
  text-transform: uppercase;
}


/* ─── 32.E · Inline sage literal con !important documentado ──────────────
   3 ocurrencias con style="background:rgba(142,182,155,...)" que CSS
   externo solo puede vencer con !important. Marcado como OVERRIDE
   TEMPORAL — pendiente refactor Camino A/B real para reemplazar el
   inline por clases controladas desde el CSS NT.

   bodega.js:243   — badge "Principal" en tabla Ubicaciones
   bodega.js:274   — alert resumen búsqueda SKU (#bd-resumen-sku)
   bodega.js:3921  — banner info dentro modal Reponer Principal */

/* L243 — badge "Principal" (span sin clase propia, identificable por
   atributo de inline style). OVERRIDE TEMPORAL hasta A/B real. */
body #sec-bodega #bd-ubic-tbody span[style*="rgba(142,182,155,0.18)"],
#sec-bodega #bd-ubic-tbody span[style*="rgba(142,182,155,0.18)"] {
  background: var(--nt-green-soft) !important;
  color: var(--nt-green) !important;
  border: 1px solid var(--nt-line) !important;
  font-family: var(--ui-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* L274 — alert resumen SKU (#bd-resumen-sku tiene ID dedicado, override
   limpio). OVERRIDE TEMPORAL hasta A/B real. */
body #sec-bodega #bd-resumen-sku,
#sec-bodega #bd-resumen-sku {
  background: var(--nt-green-soft) !important;
  border-left: 3px solid var(--nt-green) !important;
  border-radius: 6px !important;
  color: var(--nt-text) !important;
  font-family: var(--ui-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
}

/* L3921 — banner info dentro modal Reponer (div sin clase, identificable
   por inline style). OVERRIDE TEMPORAL hasta A/B real. */
body #sec-bodega div[style*="background:rgba(142,182,155,0.10);border:1px solid rgba(142,182,155,0.35)"],
#sec-bodega div[style*="background:rgba(142,182,155,0.10);border:1px solid rgba(142,182,155,0.35)"] {
  background: rgba(34,211,238,.06) !important;
  border: 1px solid rgba(34,211,238,.30) !important;
  color: var(--nt-cyan) !important;
  border-radius: 6px !important;
  font-family: var(--ui-font) !important;
}


/* ─── 32.F · Botones .btn-bd-* ghost NT (Bodega.2-fix) ──────────────────
   Los botones generados por bodega.js usan clases semánticas
   .btn-bd-edit, .btn-bd-setp, .btn-bd-del, .btn-bd-toma-del que no
   están definidas en ningún CSS. Solo aplica .btn (padding/border-radius/
   font) y .btn-sm (size). Como ninguna define background, el botón cae
   al default del browser (ButtonFace blanco/gris nativo). Bug visible.

   Fix Opción A (quirúrgica): override específico con estilo ghost NT.
   Selector usa .btn.btn-bd-X (especificidad 0,0,2,0) + body #sec-bodega
   prefijo (especificidad 0,1,3,1) para garantizar ganar sobre cualquier
   estilo del shell o de la section. */

body #sec-bodega .btn.btn-bd-edit,
#sec-bodega .btn.btn-bd-edit,
body #sec-bodega .btn.btn-bd-setp,
#sec-bodega .btn.btn-bd-setp {
  background: transparent;
  border: 1px solid var(--nt-line2);
  color: var(--nt-text);
}
body #sec-bodega .btn.btn-bd-edit:hover,
#sec-bodega .btn.btn-bd-edit:hover,
body #sec-bodega .btn.btn-bd-setp:hover,
#sec-bodega .btn.btn-bd-setp:hover {
  border-color: var(--nt-line);
  background: rgba(255,255,255,.02);
}

body #sec-bodega .btn.btn-bd-del,
#sec-bodega .btn.btn-bd-del,
body #sec-bodega .btn.btn-bd-toma-del,
#sec-bodega .btn.btn-bd-toma-del {
  background: transparent;
  border: 1px solid rgba(248,113,113,.30);
  color: var(--nt-red);
}
body #sec-bodega .btn.btn-bd-del:hover,
#sec-bodega .btn.btn-bd-del:hover,
body #sec-bodega .btn.btn-bd-toma-del:hover,
#sec-bodega .btn.btn-bd-toma-del:hover {
  background: rgba(248,113,113,.08);
  border-color: rgba(248,113,113,.50);
}


/* ─── TODO Camino C profundo en otras sections ────────────────────────
   Si descubrimos botones con el mismo patrón (clase semántica .btn-XXX
   que no define background CSS, solo color inline) en otras sections,
   agregar overrides quirúrgicos similares a .btn-bd-* arriba.

   NO usar :not() global como .btn:not(.btn-primary):not(.btn-secondary)…
   porque el blast radius puede romper visuales en sections que ya están
   bien (ej. botones con clases legacy que dependen del default browser).

   Candidatos potenciales a auditar (read-only en futuro):
   - .btn-aplicar-dash en dashboard.js (ya cubierto en Fase B.2)
   - .btn-periodo en dashboard.js (ya cubierto en Fase B.2)
   - .dv-btn-pag (Detalle Ventas, cubierto)
   - Otros en compras.js, ventas.js, postventa.js, etc. — TBD según
     reporte visual posterior.
   ──────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   33. Toasts NT (Bodega.3.D)
   ───────────────────────────────────────────────────────────────────────
   Refactor desde inline JS bodega.js:113 (_bdToast módulo) y :1809
   (_pkToast picking). Ambas funciones tenían cssText idéntico con paleta
   tailwind #16a34a green-600 / #dc2626 red-600. Unificado en clase
   .bd-toast con variantes --ok / --err. Paleta NT canónica con texto
   negro + glow firma (coherente con btn-primary NT).
   ═══════════════════════════════════════════════════════════════════════ */
body .bd-toast,
body.dark .bd-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: var(--ui-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: opacity 300ms ease;
}
body .bd-toast--ok,
body.dark .bd-toast--ok {
  background: var(--nt-green);
  color: #000;
  box-shadow: 0 0 18px var(--nt-green-glow), 0 8px 24px rgba(0,0,0,.4);
}
body .bd-toast--err,
body.dark .bd-toast--err {
  background: var(--nt-red);
  color: #000;
  box-shadow: 0 0 18px rgba(248,113,113,.30), 0 8px 24px rgba(0,0,0,.4);
}


/* ═══════════════════════════════════════════════════════════════════════
   34. Pack scan result panel — .bd-pack-result (Bodega.3.K Opción C)
   ───────────────────────────────────────────────────────────────────────
   Refactor desde inline JS bodega.js:renderPanelScanPack (L2801-2828).
   Antes: 15+ inlines tailwind hardcoded (slate, green-400, red-200 pastel,
   amber). Ahora: clases semánticas .bd-pack-result + 3 variants
   (--ok/--err/--warn) + sub-clases para label/orden/message/extra/flex-cost.
   Cero inline en el HTML resultante.
   ═══════════════════════════════════════════════════════════════════════ */
body .bd-pack-result,
body.dark .bd-pack-result {
  padding: 20px 22px;
  border-radius: 12px;
  border: 1.5px solid;
  font-family: var(--ui-font);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Variant OK — Pack marcado listo (verde NT con glow firma) */
body .bd-pack-result--ok,
body.dark .bd-pack-result--ok {
  background: var(--nt-green-soft);
  border-color: var(--nt-green);
  box-shadow: 0 0 24px var(--nt-green-glow);
}

/* Variant ERR — Pack no procesable (rojo NT) */
body .bd-pack-result--err,
body.dark .bd-pack-result--err {
  background: rgba(248,113,113,.06);
  border-color: var(--nt-red);
}

/* Variant WARN — falta_transportadora / pendientes (amber NT) */
body .bd-pack-result--warn,
body.dark .bd-pack-result--warn {
  background: rgba(251,191,36,.06);
  border-color: var(--nt-amber);
}

/* Sub-elements: label (kicker mono uppercase, color por variant) */
body .bd-pack-result .bd-pack-label,
body.dark .bd-pack-result .bd-pack-label {
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
}
body .bd-pack-result--ok .bd-pack-label,
body.dark .bd-pack-result--ok .bd-pack-label { color: var(--nt-green); }
body .bd-pack-result--err .bd-pack-label,
body.dark .bd-pack-result--err .bd-pack-label { color: var(--nt-red); }
body .bd-pack-result--warn .bd-pack-label,
body.dark .bd-pack-result--warn .bd-pack-label { color: var(--nt-amber); }

/* Sub-elements: orden_id (monospace tenue) */
body .bd-pack-result .bd-pack-orden,
body.dark .bd-pack-result .bd-pack-orden {
  font-family: var(--ui-mono);
  font-size: 11.5px;
  color: var(--nt-mute);
  letter-spacing: .02em;
}

/* Sub-elements: message (texto principal, color por variant) */
body .bd-pack-result .bd-pack-message,
body.dark .bd-pack-result .bd-pack-message {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
body .bd-pack-result--ok .bd-pack-message,
body.dark .bd-pack-result--ok .bd-pack-message {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
body .bd-pack-result--err .bd-pack-message,
body.dark .bd-pack-result--err .bd-pack-message {
  color: var(--nt-red);
}
body .bd-pack-result--warn .bd-pack-message,
body.dark .bd-pack-result--warn .bd-pack-message {
  color: var(--nt-amber);
}

/* Sub-elements: extra (ya_listos counter — mono tenue, solo en OK) */
body .bd-pack-result .bd-pack-extra,
body.dark .bd-pack-result .bd-pack-extra {
  font-size: 12px;
  color: var(--nt-mute);
  font-family: var(--ui-mono);
  letter-spacing: .02em;
}

/* Sub-elements: flex-cost (info costo flex — mono verde NT, solo en OK) */
body .bd-pack-result .bd-pack-flex-cost,
body.dark .bd-pack-result .bd-pack-flex-cost {
  font-size: 12.5px;
  color: var(--nt-green);
  font-family: var(--ui-mono);
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════
   35. Botones acción específicos Bodega (Bodega.3.J)
   ───────────────────────────────────────────────────────────────────────
   Refactor de 4 botones con gradient tailwind hardcoded en bodega.js:
   - L935  Modo Escaneo (toggle overlay) → .bd-btn-scan-action ghost cyan
   - L1309 Aplicar reparación (modal admin) → .btn .btn-primary
   - L2734 Confirmar Pickeo (panel pack scan) → .btn .btn-primary
   - L3239 Crear lista con N envíos (despacho pendientes) → .btn-primary

   Solo se crea clase nueva para Modo Escaneo (NT canónico scan variant
   de bodega-atoms.jsx). Los otros 3 reutilizan .btn .btn-primary del
   shell, que ya está overrideado a verde NT con glow firma en NT v1.
   ═══════════════════════════════════════════════════════════════════════ */

/* .bd-btn-scan-action — Modo Escaneo toggle (estilo scan NT canónico:
   gradient slate-cyan oscuro + border cyan brillante + glow firma cyan).
   Mismo patrón que Btn variant 'scan' de bodega-atoms.jsx. */
body #sec-bodega .bd-btn-scan-action,
#sec-bodega .bd-btn-scan-action {
  background: linear-gradient(135deg, #031420, #0B2330);
  border: 1.5px solid var(--nt-cyan);
  color: var(--nt-cyan);
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  border-radius: 5px;
  padding: 8px 14px;
  box-shadow: 0 0 18px rgba(34,211,238,.18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
body #sec-bodega .bd-btn-scan-action:hover,
#sec-bodega .bd-btn-scan-action:hover {
  border-color: #67E5F6;
  color: #67E5F6;
  box-shadow: 0 0 24px rgba(34,211,238,.32);
}


/* ═══════════════════════════════════════════════════════════════════════
   36. SectionLabel — atom canónico (Bodega.4.A Sprint 1 #1)
   ───────────────────────────────────────────────────────────────────────
   Helper para sub-títulos de sección con prefijo `//` mono verde.
   Definición canónica: bodega-atoms.jsx:186-201.

   Estructura HTML:
     <div class="bd-section-label">CONTENIDO LITERAL EN CAPS</div>
   o con count separado (rare, ningún call site JSX lo usa pero está
   en API canónica):
     <div class="bd-section-label">
       LABEL
       <span class="bd-section-label__count">COUNT</span>
     </div>

   Variantes color (cuando el subtab necesita diferenciar):
     .bd-section-label--amber  (warning, ej. "Pendientes de armar lista")
     .bd-section-label--cyan   (scan / data primary)
     .bd-section-label--red    (error)
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-section-label,
body.dark .bd-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--nt-green);
  /* NO text-transform — el children viene en CAPS literal (1:1 JSX) */
}
body .bd-section-label::before,
body.dark .bd-section-label::before {
  content: "//";
  /* hereda color del label (verde / amber / cyan / red) */
}

/* Variante con count separado (weight 500 + color dim NT) */
body .bd-section-label__count,
body.dark .bd-section-label__count {
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--nt-dim);
}
body .bd-section-label__count::before,
body.dark .bd-section-label__count::before {
  content: "·";
  margin-right: 4px;
}

/* Variantes color del label (heredan via ::before y span hijo) */
body .bd-section-label--amber,
body.dark .bd-section-label--amber { color: var(--nt-amber); }
body .bd-section-label--cyan,
body.dark .bd-section-label--cyan  { color: var(--nt-cyan); }
body .bd-section-label--red,
body.dark .bd-section-label--red   { color: var(--nt-red); }


/* ═══════════════════════════════════════════════════════════════════════
   37. BdHeader — header canónico de Bodega (Bodega.4.B Sprint 1 #2)
   ───────────────────────────────────────────────────────────────────────
   Header completo del módulo Bodega con 4 sub-componentes:
   - .bd-header__kicker — "// BODEGA · WMS · GRUPO GC" mono verde 10.5px
   - .bd-header__titulo — "Bodega" sans 24px weight 800
   - .bd-header__subtitulo — descripción 13px NT mute
   - .bd-header__badges — ROL (dinámico currentUser.rol) + ONLINE/OFFLINE
                          (dinámico navigator.onLine + listeners)
   - .bd-header__tabs — nav wrapper para los .subtab existentes

   Definición canónica: bodega-atoms.jsx:204-263

   IMPORTANTE: .section-header global del shell.html sigue intacto.
   Otras sections (Catálogo, Compras, etc.) lo usan. .bd-header es
   clase nueva específica de Bodega.
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-header,
body.dark .bd-header {
  border-bottom: 1px solid var(--nt-line3);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

body .bd-header__top,
body.dark .bd-header__top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 14px;
}

body .bd-header__left,
body.dark .bd-header__left {
  flex: 1;
  min-width: 0;
}

/* Kicker mono verde "// BODEGA · WMS · GRUPO GC" */
body .bd-header__kicker,
body.dark .bd-header__kicker {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-green);
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Título grande "Bodega" */
body .bd-header__titulo,
body.dark .bd-header__titulo {
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}

/* Subtitle descripción */
body .bd-header__subtitulo,
body.dark .bd-header__subtitulo {
  font-size: 13px;
  color: var(--nt-mute);
  margin-top: 5px;
  line-height: 1.4;
}

/* Right badges container */
body .bd-header__badges,
body.dark .bd-header__badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Badge base (compartido) */
body .bd-header__badge,
body.dark .bd-header__badge {
  display: inline-block;
  font-family: var(--ui-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  transition: all .2s ease;
}

/* Badge ROL — gris tenue NT */
body .bd-header__badge--rol,
body.dark .bd-header__badge--rol {
  color: var(--nt-dim);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--nt-line3);
  font-weight: 600;
}

/* Badge ONLINE — verde NT con glow tenue */
body .bd-header__badge--online,
body.dark .bd-header__badge--online {
  color: var(--nt-green);
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
  font-weight: 700;
}

/* Badge OFFLINE — rojo NT (dinámico via JS navigator.onLine) */
body .bd-header__badge--offline,
body.dark .bd-header__badge--offline {
  color: var(--nt-red);
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.18);
  font-weight: 700;
}

/* Tabs wrapper — reemplaza .subtabs solo en Bodega.
   Los <button class="subtab"> dentro mantienen su estilo NT v6. */
body .bd-header__tabs,
body.dark .bd-header__tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Responsive: en mobile, badges debajo del título en columna */
@media (max-width: 640px) {
  body .bd-header__top,
  body.dark .bd-header__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  body .bd-header__badges,
  body.dark .bd-header__badges {
    width: 100%;
  }
  body .bd-header__titulo,
  body.dark .bd-header__titulo {
    font-size: 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 38 — Bodega.4.C · EstadoItemBadge atom (icon ○◐●)
   ───────────────────────────────────────────────────────────────────────
   Atom canónico replicando bodega-picking-despacho.jsx:6-22.
   Usado por _estadoBadge() helper en bodega.js — 6 call sites:
   L772 (fila madre Pack), L840 (filas tabla Picking), L920 (header
   PickingSection 3 grupos), L1916 (patch quirúrgico fila), L1949
   (header dinámico nuevo grupo).

   Jerarquía visual canónica del flow Picking:
     ○ amber  (pendiente — alerta, falta hacer)
     ◐ cyan   (pickeado — en tránsito)
     ● green  (listo — terminado)

   Variantes extras runtime mantenidas (no en JSX, API extensible):
     ◐ orange (pickeando — acción en curso)
     ◑ mute   (parcial — estado mixto)

   Tokens canónicos: padding 2/8, radius 4, mono 9.5px, weight 700,
   letterSpacing .08em, gap 5, bg ${color}14 (8%), border ${color}33 (20%).
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-estado-badge,
body.dark .bd-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

body .bd-estado-badge__icon,
body.dark .bd-estado-badge__icon {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
}

/* 3 variantes canónicas JSX */
body .bd-estado-badge--pendiente,
body.dark .bd-estado-badge--pendiente {
  color: var(--nt-amber);
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.20);
}
body .bd-estado-badge--pickeado,
body.dark .bd-estado-badge--pickeado {
  color: var(--nt-cyan);
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.20);
}
body .bd-estado-badge--listo,
body.dark .bd-estado-badge--listo {
  color: var(--nt-green);
  background: rgba(163,255,18,.08);
  border-color: rgba(163,255,18,.20);
}

/* 2 variantes extras runtime (no en JSX, mantienen funcionalidad existente) */
body .bd-estado-badge--pickeando,
body.dark .bd-estado-badge--pickeando {
  color: var(--nt-orange);
  background: rgba(251,146,60,.08);
  border-color: rgba(251,146,60,.20);
}
body .bd-estado-badge--parcial,
body.dark .bd-estado-badge--parcial {
  color: var(--nt-mute);
  background: rgba(229,229,229,.05);
  border-color: rgba(229,229,229,.15);
}


/* ═══════════════════════════════════════════════════════════════════════
   TODO CAMINO A/B PENDIENTE — BODEGA (continúa post-Bodega.3.C-G)
   ───────────────────────────────────────────────────────────────────────
   Lo siguiente NO está cubierto en Bodega.3.C-G:

   3.F  — Eliminar .qr-cam-* duplicado (L2386-2436)
          SKIP en este commit. El bloque duplicado existe como defensa
          por orden de montaje: si Modo Escaneo se abre sin haber abierto
          QR cámara antes, el <style> global de L2169 puede no estar
          inyectado todavía. Requiere test controlado específico.

   3.H  — Modal Recalcular Flex completo (incluye L927 botón pink lowercase)
          Toda la cadena UI del modal Recalc Flex retroactivo requiere
          refactor coordinado.

   3.I  — Modal Diagnóstico Orden Combo (interior)
          El backdrop de 3.C ya quedó cubierto, pero el HTML interno del
          modal sigue con paleta slate tailwind hardcoded (~30 inline
          styles). Refactor dedicado.

   Acción: cada uno requiere sub-fase dedicada con análisis y testing
   específico.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 39 — Bodega.4.D · ProgressBar + PctCell atoms
   ───────────────────────────────────────────────────────────────────────
   Atom canónico replicando bodega-atoms.jsx:117-139.
   ProgressBar: barra visual con glow condicional (thin 4px / normal 6px).
   PctCell: % texto con color condicional (≥85 red, ≥60 amber, <60 green).
   4 call sites: Tabla Zonas, Tabla Ubicaciones, Tabla Tomas, Picking Scan.
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-progress-bar,
body.dark .bd-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.04);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

body .bd-progress-bar--thin,
body.dark .bd-progress-bar--thin {
  height: 4px;
}

body .bd-progress-bar__fill,
body.dark .bd-progress-bar__fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

body .bd-progress-bar__fill--green,
body.dark .bd-progress-bar__fill--green {
  background: var(--nt-green);
  box-shadow: 0 0 6px rgba(163,255,18,.33);
}

body .bd-progress-bar__fill--amber,
body.dark .bd-progress-bar__fill--amber {
  background: var(--nt-amber);
  box-shadow: 0 0 6px rgba(251,191,36,.33);
}

body .bd-progress-bar__fill--red,
body.dark .bd-progress-bar__fill--red {
  background: var(--nt-red);
  box-shadow: 0 0 6px rgba(248,113,113,.33);
}

body .bd-pct-cell,
body.dark .bd-pct-cell {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body .bd-pct-cell--green,
body.dark .bd-pct-cell--green {
  color: var(--nt-green);
}

body .bd-pct-cell--amber,
body.dark .bd-pct-cell--amber {
  color: var(--nt-amber);
}

body .bd-pct-cell--red,
body.dark .bd-pct-cell--red {
  color: var(--nt-red);
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 40 — Bodega.4.E · Cosméticos finales Sprint 1
   ───────────────────────────────────────────────────────────────────────
   6 ítems canónicos de cierre Sprint 1:
   1. MovTipoBadge atom (bodega-rest.jsx:131-153)
   2. Checkbox NT custom (bodega-atoms.jsx:333-350)
   3. Keyframes blink + pulse (bodega-scan.jsx:580-585)
   4. Toolbar atom (bodega-atoms.jsx:279-286)
   5. Stat atom provision (bodega-rest.jsx:504-511)
   ═══════════════════════════════════════════════════════════════════════ */

/* --- MovTipoBadge --- */
body .bd-mov-tipo,
body.dark .bd-mov-tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

body .bd-mov-tipo__icon,
body.dark .bd-mov-tipo__icon {
  font-size: 10px;
  line-height: 1;
}

/* --- Checkbox NT custom (global Bodega) --- */
body .bd-content input[type="checkbox"],
body.dark .bd-content input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid var(--nt-line2);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .15s ease;
  vertical-align: middle;
  margin: 0;
}

body .bd-content input[type="checkbox"]:checked,
body.dark .bd-content input[type="checkbox"]:checked {
  background: var(--nt-green);
  border-color: var(--nt-green);
}

body .bd-content input[type="checkbox"]:checked::after,
body.dark .bd-content input[type="checkbox"]:checked::after {
  content: '';
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

body .bd-content input[type="checkbox"]:indeterminate,
body.dark .bd-content input[type="checkbox"]:indeterminate {
  background: transparent;
}

body .bd-content input[type="checkbox"]:indeterminate::after,
body.dark .bd-content input[type="checkbox"]:indeterminate::after {
  content: '';
  width: 7px;
  height: 2px;
  background: var(--nt-green);
  border-radius: 1px;
}

/* --- Keyframes — provision Modo Escaneo (Sprint 2) --- */
@keyframes bd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes bd-pulse {
  0% { transform: scale(.95); opacity: 1; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* --- Toolbar atom --- */
body .bd-toolbar,
body.dark .bd-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* --- Stat atom — provision OperarioCard (4.L) --- */
body .bd-stat,
body.dark .bd-stat {
  text-align: right;
}

body .bd-stat__label,
body.dark .bd-stat__label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
}

body .bd-stat__value,
body.dark .bd-stat__value {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 18px;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 41 — Bodega.4.F · ScanHeader canónico (Sprint 2 #1)
   ───────────────────────────────────────────────────────────────────────
   Header del overlay Modo Escaneo. Reemplaza .me-header legacy.
   Definición canónica: bodega-scan.jsx:7-68
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Container principal --- */
body .bd-scan-header,
body.dark .bd-scan-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--nt-line3);
  background: var(--nt-surface);
  position: relative;
  flex-shrink: 0;
}

/* --- Cyan Badge 46×46 con glow --- */
body .bd-scan-header__badge,
body.dark .bd-scan-header__badge {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(34,211,238,.06));
  border: 1.5px solid var(--nt-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(34,211,238,.25);
}

/* --- Info (kicker + título) --- */
body .bd-scan-header__info,
body.dark .bd-scan-header__info {
  flex: 1;
  min-width: 0;
}

body .bd-scan-header__kicker,
body.dark .bd-scan-header__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  color: var(--nt-cyan);
  letter-spacing: .18em;
  font-weight: 700;
  margin-bottom: 3px;
}

body .bd-scan-header__title,
body.dark .bd-scan-header__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0;
}

body .bd-scan-header__title-accent,
body.dark .bd-scan-header__title-accent {
  color: var(--nt-cyan);
}

/* --- Counters block --- */
body .bd-scan-header__counters,
body.dark .bd-scan-header__counters {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-right: 6px;
}

body .bd-scan-header__counter,
body.dark .bd-scan-header__counter {
  text-align: right;
}

body .bd-scan-header__counter-label,
body.dark .bd-scan-header__counter-label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
}

body .bd-scan-header__counter-value,
body.dark .bd-scan-header__counter-value {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}

body .bd-scan-header__counter-value--amber,
body.dark .bd-scan-header__counter-value--amber {
  color: var(--nt-amber);
}

body .bd-scan-header__counter-value--green,
body.dark .bd-scan-header__counter-value--green {
  color: var(--nt-green);
}

/* --- Separador vertical --- */
body .bd-scan-header__sep,
body.dark .bd-scan-header__sep {
  width: 1px;
  height: 32px;
  background: var(--nt-line3);
}

/* --- Progress block --- */
body .bd-scan-header__progress,
body.dark .bd-scan-header__progress {
  min-width: 130px;
}

body .bd-scan-header__progress-labels,
body.dark .bd-scan-header__progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
}

body .bd-scan-header__progress-label,
body.dark .bd-scan-header__progress-label {
  color: var(--nt-dim);
  letter-spacing: .14em;
}

body .bd-scan-header__progress-value,
body.dark .bd-scan-header__progress-value {
  color: var(--nt-green);
}

/* --- Botón salir + tag ESC --- */
body .bd-scan-header__btn-salir,
body.dark .bd-scan-header__btn-salir {
  padding: 8px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  color: var(--nt-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ui-font);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s ease;
}

body .bd-scan-header__btn-salir:hover,
body.dark .bd-scan-header__btn-salir:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--nt-line);
}

body .bd-scan-header__esc-tag,
body.dark .bd-scan-header__esc-tag {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  border-radius: 3px;
  color: var(--nt-mute);
  margin-left: 3px;
}

/* --- Responsive Zebra Android landscape (~800×480) --- */
@media (max-width: 900px) {
  body .bd-scan-header,
  body.dark .bd-scan-header { gap: 12px; padding: 10px 14px; }
  body .bd-scan-header__badge,
  body.dark .bd-scan-header__badge { width: 38px; height: 38px; }
  body .bd-scan-header__title,
  body.dark .bd-scan-header__title { font-size: 14px; }
  body .bd-scan-header__kicker,
  body.dark .bd-scan-header__kicker { font-size: 9px; letter-spacing: .14em; }
  body .bd-scan-header__counter-value,
  body.dark .bd-scan-header__counter-value { font-size: 18px; }
  body .bd-scan-header__counters,
  body.dark .bd-scan-header__counters { gap: 12px; }
  body .bd-scan-header__progress,
  body.dark .bd-scan-header__progress { min-width: 100px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 42 — Bodega.4.G · ScanLista FIFO con indicadores ✓→○ (Sprint 2 #2)
   ───────────────────────────────────────────────────────────────────────
   Lista de items pendientes del overlay Modo Escaneo.
   Definición canónica: bodega-scan.jsx:71-191
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Container --- */
body .bd-scan-lista,
body.dark .bd-scan-lista {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 10px;
  overflow: hidden;
}

/* --- Header --- */
body .bd-scan-lista__header,
body.dark .bd-scan-lista__header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--nt-line3);
  background: var(--nt-surface2);
  flex-shrink: 0;
}

body .bd-scan-lista__header-title,
body.dark .bd-scan-lista__header-title {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
}

body .bd-scan-lista__header-meta,
body.dark .bd-scan-lista__header-meta {
  margin-left: auto;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--nt-dim);
  font-weight: 600;
}

/* --- Rows scrollable --- */
body .bd-scan-lista__rows,
body.dark .bd-scan-lista__rows {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

/* --- Row base --- */
body .bd-scan-lista__row,
body.dark .bd-scan-lista__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 13px;
  border-bottom: 1px solid var(--nt-line3);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 120ms;
  position: relative;
}

body .bd-scan-lista__row:hover,
body.dark .bd-scan-lista__row:hover {
  background: rgba(34,211,238,.04);
}

/* Row modifiers */
body .bd-scan-lista__row--sugerida,
body.dark .bd-scan-lista__row--sugerida {
  border-left-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.03);
}

body .bd-scan-lista__row--pickeado,
body.dark .bd-scan-lista__row--pickeado {
  opacity: .55;
}

body .bd-scan-lista__row--just-picked,
body.dark .bd-scan-lista__row--just-picked {
  opacity: 1;
  border-left-color: var(--nt-green);
  background: linear-gradient(90deg, var(--nt-green-soft), transparent);
}

body .bd-scan-lista__row--highlight,
body.dark .bd-scan-lista__row--highlight {
  border-left-color: var(--nt-cyan);
  background: rgba(34,211,238,.06);
}

body .bd-scan-lista__row--error,
body.dark .bd-scan-lista__row--error {
  border-left-color: var(--nt-red);
  background: rgba(248,113,113,.06);
}

@keyframes bd-scan-flash {
  0%   { background: rgba(163,255,18,.25); border-left-color: var(--nt-green); }
  100% { background: transparent; border-left-color: transparent; }
}

body .bd-scan-lista__row--flash,
body.dark .bd-scan-lista__row--flash {
  animation: bd-scan-flash 600ms ease;
}

/* --- Indicator ✓→○ --- */
body .bd-scan-lista__indicator,
body.dark .bd-scan-lista__indicator {
  width: 24px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}

/* --- Ubicación --- */
body .bd-scan-lista__ubic,
body.dark .bd-scan-lista__ubic {
  width: 90px;
  flex-shrink: 0;
}

body .bd-scan-lista__ubic-code,
body.dark .bd-scan-lista__ubic-code {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--nt-green);
  font-weight: 700;
}

body .bd-scan-lista__row--pickeado .bd-scan-lista__ubic-code,
body.dark .bd-scan-lista__row--pickeado .bd-scan-lista__ubic-code {
  color: var(--nt-dim);
}

body .bd-scan-lista__ubic--sin .bd-scan-lista__ubic-code,
body.dark .bd-scan-lista__ubic--sin .bd-scan-lista__ubic-code {
  color: var(--nt-mute);
}

body .bd-scan-lista__zona,
body.dark .bd-scan-lista__zona {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .04em;
  margin-top: 1px;
}

/* --- SKU + producto --- */
body .bd-scan-lista__sku,
body.dark .bd-scan-lista__sku {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--nt-text);
  font-weight: 700;
}

body .bd-scan-lista__row--pickeado .bd-scan-lista__sku,
body.dark .bd-scan-lista__row--pickeado .bd-scan-lista__sku {
  color: var(--nt-dim);
  text-decoration: line-through;
}

body .bd-scan-lista__producto,
body.dark .bd-scan-lista__producto {
  font-size: 11px;
  color: var(--nt-mute);
  font-weight: 500;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .bd-scan-lista__row--pickeado .bd-scan-lista__producto,
body.dark .bd-scan-lista__row--pickeado .bd-scan-lista__producto {
  color: var(--nt-dim);
}

/* --- Uds --- */
body .bd-scan-lista__uds,
body.dark .bd-scan-lista__uds {
  text-align: right;
  min-width: 48px;
  flex-shrink: 0;
}

body .bd-scan-lista__uds-value,
body.dark .bd-scan-lista__uds-value {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 16px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}

body .bd-scan-lista__row--pickeado .bd-scan-lista__uds-value,
body.dark .bd-scan-lista__row--pickeado .bd-scan-lista__uds-value {
  color: var(--nt-green);
  text-decoration: line-through;
}

body .bd-scan-lista__uds-label,
body.dark .bd-scan-lista__uds-label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  color: var(--nt-dim);
  margin-top: 1px;
  letter-spacing: .04em;
}

/* --- Badge NUEVO --- */
body .bd-scan-lista__badge-nuevo,
body.dark .bd-scan-lista__badge-nuevo {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  color: var(--nt-green);
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
}

/* --- Footer --- */
body .bd-scan-lista__footer,
body.dark .bd-scan-lista__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--nt-line3);
  background: var(--nt-surface2);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  color: var(--nt-dim);
  letter-spacing: .04em;
  flex-shrink: 0;
}

body .bd-scan-lista__footer-proxima,
body.dark .bd-scan-lista__footer-proxima {
  margin-left: auto;
  color: var(--nt-cyan);
  font-weight: 700;
}

/* --- Empty + Complete states --- */
body .bd-scan-lista__empty,
body.dark .bd-scan-lista__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--nt-dim);
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .04em;
}

body .bd-scan-lista__complete,
body.dark .bd-scan-lista__complete {
  padding: 24px;
  text-align: center;
  color: var(--nt-green);
  background: var(--nt-green-soft);
  border: 1px solid var(--nt-line);
  border-radius: 8px;
  margin: 12px;
}

body .bd-scan-lista__complete-title,
body.dark .bd-scan-lista__complete-title {
  font-family: var(--ui-font);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

body .bd-scan-lista__complete-sub,
body.dark .bd-scan-lista__complete-sub {
  font-size: 0.85rem;
  color: var(--nt-green);
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 43 — Bodega.4.H · ScanInputBox canónico (Sprint 2 #3)
   ───────────────────────────────────────────────────────────────────────
   Input principal del overlay Modo Escaneo. Reemplaza .me-scan-input-box
   legacy + override CSS L2403-2409.
   Definición canónica: bodega-scan.jsx:194-242
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Outer container --- */
body .bd-scan-input-box,
body.dark .bd-scan-input-box {
  background: var(--nt-surface);
  border: 1.5px solid var(--nt-line2);
  border-radius: 10px;
  padding: 18px;
  flex-shrink: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Focused state */
body .bd-scan-input-box:has(.bd-scan-input-box__input:focus),
body.dark .bd-scan-input-box:has(.bd-scan-input-box__input:focus),
body .bd-scan-input-box--focused,
body.dark .bd-scan-input-box--focused {
  border-color: var(--nt-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10), 0 0 22px rgba(34,211,238,.16);
}

/* Error state (temporal, 800ms) */
body .bd-scan-input-box--error,
body.dark .bd-scan-input-box--error {
  border-color: var(--nt-red) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,.10), 0 0 22px rgba(248,113,113,.20) !important;
}

/* --- Top row: kicker + QR button --- */
body .bd-scan-input-box__top,
body.dark .bd-scan-input-box__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

body .bd-scan-input-box__kicker,
body.dark .bd-scan-input-box__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  color: var(--nt-cyan);
  letter-spacing: .14em;
  font-weight: 700;
}

/* --- QR · Cámara button --- */
body .bd-scan-input-box__qr-btn,
body.dark .bd-scan-input-box__qr-btn {
  padding: 5px 10px;
  background: var(--nt-green-soft);
  color: var(--nt-green);
  border: 1px solid var(--nt-line);
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--ui-font);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
  white-space: nowrap;
}

body .bd-scan-input-box__qr-btn:hover,
body.dark .bd-scan-input-box__qr-btn:hover {
  background: rgba(163,255,18,.16);
  border-color: var(--nt-green);
}

/* --- Input nativo estilizado --- */
body .bd-scan-input-box__input,
body.dark .bd-scan-input-box__input {
  width: 100%;
  height: 62px;
  padding: 0 20px;
  background: #000;
  border: 1.5px solid var(--nt-line2);
  border-radius: 8px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 26px;
  color: var(--nt-cyan);
  font-weight: 700;
  letter-spacing: .02em;
  outline: none;
  caret-color: var(--nt-cyan);
  box-sizing: border-box;
  transition: border-color .15s ease;
}

body .bd-scan-input-box__input::placeholder,
body.dark .bd-scan-input-box__input::placeholder {
  color: var(--nt-faint);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .02em;
}

body .bd-scan-input-box__input:focus,
body.dark .bd-scan-input-box__input:focus {
  border-color: var(--nt-cyan);
}

/* --- Helper text --- */
body .bd-scan-input-box__helper,
body.dark .bd-scan-input-box__helper {
  margin-top: 10px;
  font-size: 11px;
  color: var(--nt-dim);
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  line-height: 1.6;
  letter-spacing: .02em;
}

body .bd-scan-input-box__helper-badge,
body.dark .bd-scan-input-box__helper-badge {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  border-radius: 3px;
  color: var(--nt-mute);
  font-weight: 700;
}

/* --- Responsive Zebra Android landscape --- */
@media (max-width: 900px) {
  body .bd-scan-input-box,
  body.dark .bd-scan-input-box { padding: 14px; }
  body .bd-scan-input-box__input,
  body.dark .bd-scan-input-box__input { height: 56px; font-size: 22px; }
  body .bd-scan-input-box__input::placeholder,
  body.dark .bd-scan-input-box__input::placeholder { font-size: 18px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 44 — Bodega.4.I · ScanDetectado panel (Sprint 2 #4)
   ───────────────────────────────────────────────────────────────────────
   Panel de confirmación de producto detectado en Modo Escaneo.
   Refactor visual de renderPanelPickeo() — lógica preservada.
   Definición canónica: bodega-scan.jsx:319-426
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Container cyan con glow firma --- */
body .bd-scan-detectado,
body.dark .bd-scan-detectado {
  padding: 24px;
  background: rgba(34,211,238,.06);
  border: 1.5px solid var(--nt-cyan);
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(34,211,238,.18);
}

/* --- Título producto --- */
body .bd-scan-detectado__titulo,
body.dark .bd-scan-detectado__titulo {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 6px 0 4px;
}

/* --- Meta row --- */
body .bd-scan-detectado__meta,
body.dark .bd-scan-detectado__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
}

body .bd-scan-detectado__sku,
body.dark .bd-scan-detectado__sku {
  color: var(--nt-green);
  font-weight: 700;
}

body .bd-scan-detectado__sep,
body.dark .bd-scan-detectado__sep {
  color: var(--nt-dim);
}

body .bd-scan-detectado__marca,
body.dark .bd-scan-detectado__marca {
  color: var(--nt-mute);
}

body .bd-scan-detectado__ubic-badge,
body.dark .bd-scan-detectado__ubic-badge {
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--nt-green-soft);
  color: var(--nt-green);
  font-weight: 700;
}

/* --- Pendientes box --- */
body .bd-scan-detectado__pendientes,
body.dark .bd-scan-detectado__pendientes {
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

body .bd-scan-detectado__pendientes-label,
body.dark .bd-scan-detectado__pendientes-label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 6px;
}

body .bd-scan-detectado__pendientes-num,
body.dark .bd-scan-detectado__pendientes-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

body .bd-scan-detectado__pendientes-big,
body.dark .bd-scan-detectado__pendientes-big {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 36px;
  color: var(--nt-green);
  font-weight: 800;
  line-height: 1;
}

body .bd-scan-detectado__pendientes-meta,
body.dark .bd-scan-detectado__pendientes-meta {
  font-size: 13px;
  color: var(--nt-mute);
}

/* --- Envío detail row --- */
body .bd-scan-detectado__envio-row,
body.dark .bd-scan-detectado__envio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--nt-line3);
  border-radius: 5px;
}

body .bd-scan-detectado__envio-orden,
body.dark .bd-scan-detectado__envio-orden {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--nt-cyan);
}

body .bd-scan-detectado__envio-uds,
body.dark .bd-scan-detectado__envio-uds {
  font-size: 11px;
  color: var(--nt-mute);
}

body .bd-scan-detectado__fifo-tag,
body.dark .bd-scan-detectado__fifo-tag {
  margin-left: auto;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .06em;
}

/* --- Stepper cantidad --- */
body .bd-scan-detectado__stepper,
body.dark .bd-scan-detectado__stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

body .bd-scan-detectado__stepper-label,
body.dark .bd-scan-detectado__stepper-label {
  font-size: 13px;
  color: var(--nt-text);
  font-weight: 600;
}

body .bd-scan-detectado__stepper-input,
body.dark .bd-scan-detectado__stepper-input {
  width: 130px;
  height: 50px;
  background: #000;
  border: 1.5px solid var(--nt-cyan);
  border-radius: 8px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 24px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  outline: none;
  caret-color: var(--nt-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
  -moz-appearance: textfield;
}

body .bd-scan-detectado__stepper-input::-webkit-outer-spin-button,
body .bd-scan-detectado__stepper-input::-webkit-inner-spin-button,
body.dark .bd-scan-detectado__stepper-input::-webkit-outer-spin-button,
body.dark .bd-scan-detectado__stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body .bd-scan-detectado__stepper-btn,
body.dark .bd-scan-detectado__stepper-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  color: var(--nt-text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}

body .bd-scan-detectado__stepper-btn:hover,
body.dark .bd-scan-detectado__stepper-btn:hover {
  background: rgba(34,211,238,.10);
  border-color: var(--nt-cyan);
  color: var(--nt-cyan);
}

/* --- Helper FIFO --- */
body .bd-scan-detectado__helper-fifo,
body.dark .bd-scan-detectado__helper-fifo {
  font-size: 11px;
  color: var(--nt-dim);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* --- Botones acciones --- */
body .bd-scan-detectado__actions,
body.dark .bd-scan-detectado__actions {
  display: flex;
  gap: 8px;
}

body .bd-scan-detectado__btn-confirmar,
body.dark .bd-scan-detectado__btn-confirmar {
  flex: 1;
  padding: 14px;
  background: var(--nt-green);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 18px rgba(163,255,18,.25);
  transition: all .15s ease;
}

body .bd-scan-detectado__btn-confirmar:hover,
body.dark .bd-scan-detectado__btn-confirmar:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px rgba(163,255,18,.40);
}

body .bd-scan-detectado__btn-confirmar:disabled,
body.dark .bd-scan-detectado__btn-confirmar:disabled {
  opacity: .5;
  cursor: default;
  filter: none;
  box-shadow: none;
}

body .bd-scan-detectado__btn-cancelar,
body.dark .bd-scan-detectado__btn-cancelar {
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  color: var(--nt-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body .bd-scan-detectado__btn-tag,
body.dark .bd-scan-detectado__btn-tag {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 3px;
}

body .bd-scan-detectado__btn-confirmar .bd-scan-detectado__btn-tag,
body.dark .bd-scan-detectado__btn-confirmar .bd-scan-detectado__btn-tag {
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(0,0,0,.30);
  color: rgba(0,0,0,.65);
}

body .bd-scan-detectado__btn-cancelar .bd-scan-detectado__btn-tag,
body.dark .bd-scan-detectado__btn-cancelar .bd-scan-detectado__btn-tag {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  color: var(--nt-mute);
}

/* --- Responsive Zebra Android --- */
@media (max-width: 900px) {
  body .bd-scan-detectado,
  body.dark .bd-scan-detectado { padding: 16px; }
  body .bd-scan-detectado__titulo,
  body.dark .bd-scan-detectado__titulo { font-size: 18px; }
  body .bd-scan-detectado__pendientes-big,
  body.dark .bd-scan-detectado__pendientes-big { font-size: 28px; }
  body .bd-scan-detectado__stepper-input,
  body.dark .bd-scan-detectado__stepper-input { width: 110px; height: 44px; font-size: 20px; }
  body .bd-scan-detectado__stepper-btn,
  body.dark .bd-scan-detectado__stepper-btn { width: 32px; height: 32px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 45 — Bodega.4.J · ScanSuccess + ScanError (Sprint 2 #5 CIERRE)
   ───────────────────────────────────────────────────────────────────────
   Panels de feedback post-scan: confirmación pickeo o error.
   Definición canónica: bodega-scan.jsx:431-554
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────── SUCCESS PANEL ──────── */
body .bd-scan-success,
body.dark .bd-scan-success {
  padding: 36px 24px;
  background: var(--nt-green-soft);
  border: 1.5px solid var(--nt-green);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(163,255,18,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: bd-scan-panel-in .3s ease-out;
}

body .bd-scan-success::before,
body.dark .bd-scan-success::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at center, rgba(163,255,18,.18), transparent 70%);
  pointer-events: none;
  animation: bd-scan-glow-out .8s ease-out forwards;
  z-index: 0;
}

body .bd-scan-success__check,
body.dark .bd-scan-success__check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(163,255,18,.55);
  position: relative;
  z-index: 1;
  animation: bd-scan-icon-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body .bd-scan-success__kicker,
body.dark .bd-scan-success__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--nt-green);
  letter-spacing: .16em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

body .bd-scan-success__titulo,
body.dark .bd-scan-success__titulo {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  position: relative;
  z-index: 1;
}

body .bd-scan-success__titulo-sku,
body.dark .bd-scan-success__titulo-sku {
  color: var(--nt-green);
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
}

body .bd-scan-success__detail-row,
body.dark .bd-scan-success__detail-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 12px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

body .bd-scan-success__envio-marcado,
body.dark .bd-scan-success__envio-marcado {
  color: var(--nt-green);
  font-weight: 700;
}

body .bd-scan-success__envio-ubic,
body.dark .bd-scan-success__envio-ubic {
  color: var(--nt-mute);
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
}

body .bd-scan-success__footer,
body.dark .bd-scan-success__footer {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--nt-dim);
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
}

body .bd-scan-success__footer-proxima,
body.dark .bd-scan-success__footer-proxima {
  color: var(--nt-cyan);
  font-weight: 700;
}

/* ──────── ERROR PANEL ──────── */
body .bd-scan-error-panel,
body.dark .bd-scan-error-panel {
  padding: 36px 24px;
  background: rgba(248,113,113,.06);
  border: 1.5px solid var(--nt-red);
  border-radius: 12px;
  box-shadow: 0 0 32px rgba(248,113,113,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: bd-scan-panel-in .3s ease-out;
}

body .bd-scan-error-panel::before,
body.dark .bd-scan-error-panel::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at center, rgba(248,113,113,.18), transparent 70%);
  pointer-events: none;
  animation: bd-scan-glow-out .8s ease-out forwards;
  z-index: 0;
}

body .bd-scan-error-panel__x,
body.dark .bd-scan-error-panel__x {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nt-red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(248,113,113,.60);
  position: relative;
  z-index: 1;
  animation: bd-scan-icon-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body .bd-scan-error-panel__kicker,
body.dark .bd-scan-error-panel__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--nt-red);
  letter-spacing: .16em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

body .bd-scan-error-panel__titulo,
body.dark .bd-scan-error-panel__titulo {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  position: relative;
  z-index: 1;
}

body .bd-scan-error-panel__titulo-codigo,
body.dark .bd-scan-error-panel__titulo-codigo {
  color: var(--nt-red);
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
}

body .bd-scan-error-panel__desc,
body.dark .bd-scan-error-panel__desc {
  font-size: 12px;
  color: var(--nt-mute);
  line-height: 1.6;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

body .bd-scan-error-panel__desc-esc,
body.dark .bd-scan-error-panel__desc-esc {
  display: inline-block;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line3);
  border-radius: 3px;
  color: var(--nt-mute);
  font-weight: 700;
  margin: 0 2px;
}

body .bd-scan-error-panel__sugerencias,
body.dark .bd-scan-error-panel__sugerencias {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

body .bd-scan-error-panel__btn-sug,
body.dark .bd-scan-error-panel__btn-sug {
  padding: 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ui-font);
}

body .bd-scan-error-panel__footer,
body.dark .bd-scan-error-panel__footer {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--nt-dim);
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

/* ──────── KEYFRAMES compartidos ──────── */
@keyframes bd-scan-panel-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bd-scan-glow-out {
  0%   { opacity: 0; transform: scale(.85); }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes bd-scan-icon-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ──────── Responsive Zebra Android ──────── */
@media (max-width: 900px) {
  body .bd-scan-success,
  body.dark .bd-scan-success,
  body .bd-scan-error-panel,
  body.dark .bd-scan-error-panel { padding: 24px 16px; gap: 10px; }
  body .bd-scan-success__check,
  body.dark .bd-scan-success__check,
  body .bd-scan-error-panel__x,
  body.dark .bd-scan-error-panel__x { width: 64px; height: 64px; }
  body .bd-scan-success__titulo,
  body.dark .bd-scan-success__titulo { font-size: 18px; }
  body .bd-scan-error-panel__titulo,
  body.dark .bd-scan-error-panel__titulo { font-size: 18px; }
  body .bd-scan-success__detail-row,
  body.dark .bd-scan-success__detail-row { font-size: 11px; padding: 6px 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 46 — Bodega.4.K · Recepción form multi-destino (Sprint 3 #1)
   ───────────────────────────────────────────────────────────────────────
   Form de registro de recepción con distribución dinámica en N
   ubicaciones + sidebar recepciones recientes.
   Definición canónica: bodega-rest.jsx:8-126
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-recepcion,
body.dark .bd-recepcion { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }

body .bd-recepcion__card,
body.dark .bd-recepcion__card {
  background: var(--nt-surface); border: 1px solid var(--nt-line3);
  border-radius: 10px; padding: 24px;
}

body .bd-recepcion__grid-top,
body.dark .bd-recepcion__grid-top {
  display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 18px;
}

body .bd-recepcion__field-label,
body.dark .bd-recepcion__field-label {
  display: block; font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-dim); letter-spacing: .14em;
  font-weight: 700; margin-bottom: 6px; text-transform: uppercase;
}

/* --- SKU input con glow verde --- */
body .bd-recepcion__sku-wrapper,
body.dark .bd-recepcion__sku-wrapper { display: flex; align-items: center; gap: 8px; }

body .bd-recepcion__sku-input,
body.dark .bd-recepcion__sku-input {
  flex: 1; height: 42px; padding: 0 14px; background: #000;
  border: 1.5px solid var(--nt-green); border-radius: 6px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 14px; color: var(--nt-green); font-weight: 700; letter-spacing: .02em;
  outline: none; caret-color: var(--nt-green); box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--nt-green-soft), 0 0 14px rgba(163,255,18,.18);
}

body .bd-recepcion__sku-input::placeholder,
body.dark .bd-recepcion__sku-input::placeholder { color: var(--nt-faint); font-weight: 500; }

body .bd-recepcion__sku-info,
body.dark .bd-recepcion__sku-info {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--nt-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}

/* --- Referencia input --- */
body .bd-recepcion__ref-input,
body.dark .bd-recepcion__ref-input {
  width: 100%; height: 42px; padding: 0 14px; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 6px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 13px; color: var(--nt-text); font-weight: 600;
  outline: none; box-sizing: border-box;
}
body .bd-recepcion__ref-input:focus,
body.dark .bd-recepcion__ref-input:focus { border-color: var(--nt-cyan); }

/* --- Distribución header --- */
body .bd-recepcion__distrib-header,
body.dark .bd-recepcion__distrib-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 10px;
}

body .bd-recepcion__distrib-kicker,
body.dark .bd-recepcion__distrib-kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; color: var(--nt-green); letter-spacing: .14em; font-weight: 700;
}

body .bd-recepcion__add-fila,
body.dark .bd-recepcion__add-fila {
  padding: 5px 10px; background: var(--nt-green-soft); color: var(--nt-green);
  border: 1px solid var(--nt-line); border-radius: 5px; font-size: 11px;
  font-family: var(--ui-font); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; transition: all .15s ease;
}
body .bd-recepcion__add-fila:hover,
body.dark .bd-recepcion__add-fila:hover { background: rgba(163,255,18,.16); border-color: var(--nt-green); }

/* --- Filas distribución --- */
body .bd-recepcion__filas,
body.dark .bd-recepcion__filas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

body .bd-recepcion__fila,
body.dark .bd-recepcion__fila { display: grid; grid-template-columns: 1fr 100px 32px; gap: 10px; align-items: end; }

body .bd-recepcion__fila-select,
body.dark .bd-recepcion__fila-select {
  height: 38px; padding: 0 28px 0 12px; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 5px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11.5px; color: var(--nt-text); font-weight: 600;
  cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23A3A3A3' d='M6 8L2 4h8z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

body .bd-recepcion__fila-cant,
body.dark .bd-recepcion__fila-cant {
  height: 38px; padding: 0 12px; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 5px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 14px; color: #fff; font-weight: 700; text-align: center;
  outline: none; -moz-appearance: textfield; box-sizing: border-box;
}
body .bd-recepcion__fila-cant::-webkit-inner-spin-button,
body .bd-recepcion__fila-cant::-webkit-outer-spin-button,
body.dark .bd-recepcion__fila-cant::-webkit-inner-spin-button,
body.dark .bd-recepcion__fila-cant::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

body .bd-recepcion__fila-rm,
body.dark .bd-recepcion__fila-rm {
  width: 32px; height: 38px; padding: 0; background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.18); border-radius: 5px;
  color: var(--nt-red); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
body .bd-recepcion__fila-rm:hover,
body.dark .bd-recepcion__fila-rm:hover { background: rgba(248,113,113,.12); border-color: var(--nt-red); }

/* --- Total box --- */
body .bd-recepcion__total,
body.dark .bd-recepcion__total {
  background: #000; border: 1px solid var(--nt-line); border-radius: 6px;
  padding: 10px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
}
body .bd-recepcion__total-label,
body.dark .bd-recepcion__total-label { font-size: 10.5px; color: var(--nt-dim); letter-spacing: .10em; font-weight: 600; }
body .bd-recepcion__total-num,
body.dark .bd-recepcion__total-num { font-size: 18px; color: var(--nt-green); font-weight: 800; }
body .bd-recepcion__total-uds,
body.dark .bd-recepcion__total-uds { font-size: 11px; color: var(--nt-mute); }
body .bd-recepcion__endpoint,
body.dark .bd-recepcion__endpoint { margin-left: auto; font-size: 10px; color: var(--nt-cyan); letter-spacing: .06em; }

/* --- Btn submit --- */
body .bd-recepcion__btn-submit,
body.dark .bd-recepcion__btn-submit {
  width: 100%; padding: 12px; background: var(--nt-green); color: #000;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 0 18px rgba(163,255,18,.22); transition: all .15s ease;
}
body .bd-recepcion__btn-submit:hover,
body.dark .bd-recepcion__btn-submit:hover { filter: brightness(1.08); box-shadow: 0 0 24px rgba(163,255,18,.36); }
body .bd-recepcion__btn-submit:disabled,
body.dark .bd-recepcion__btn-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* --- Status message --- */
body .bd-recepcion__status,
body.dark .bd-recepcion__status {
  margin-top: 10px; font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; min-height: 18px; text-align: center;
}

/* --- Sidebar Recepciones Recientes --- */
body .bd-recepcion__recientes,
body.dark .bd-recepcion__recientes {
  background: rgba(34,211,238,.04); border: 1px solid rgba(34,211,238,.20);
  border-radius: 6px; padding: 12px 16px;
}
body .bd-recepcion__recientes-kicker,
body.dark .bd-recepcion__recientes-kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; color: var(--nt-cyan); letter-spacing: .14em;
  font-weight: 700; margin-bottom: 8px;
}
body .bd-recepcion__recientes-item,
body.dark .bd-recepcion__recientes-item {
  font-size: 11.5px; color: var(--nt-mute); line-height: 1.6;
}
body .bd-recepcion__recientes-sku,
body.dark .bd-recepcion__recientes-sku { color: var(--nt-text); font-weight: 700; }

/* --- Responsive Zebra Android --- */
@media (max-width: 900px) {
  body .bd-recepcion__card,
  body.dark .bd-recepcion__card { padding: 16px; }
  body .bd-recepcion__grid-top,
  body.dark .bd-recepcion__grid-top { grid-template-columns: 1fr; gap: 10px; }
  body .bd-recepcion__sku-input,
  body.dark .bd-recepcion__sku-input { height: 38px; font-size: 13px; }
  body .bd-recepcion__ref-input,
  body.dark .bd-recepcion__ref-input { height: 38px; }
  body .bd-recepcion__total-num,
  body.dark .bd-recepcion__total-num { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 47 — Bodega.4.L · OperarioCard expandible (Sprint 3 #2 CIERRE)
   ───────────────────────────────────────────────────────────────────────
   Card por operario en Reporte de Actividades. <details> nativo.
   Definición canónica: bodega-rest.jsx:429-502
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-operario-card,
body.dark .bd-operario-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

body .bd-operario-card__summary,
body.dark .bd-operario-card__summary {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s ease;
}
body .bd-operario-card__summary::-webkit-details-marker,
body.dark .bd-operario-card__summary::-webkit-details-marker { display: none; }
body .bd-operario-card__summary::marker,
body.dark .bd-operario-card__summary::marker { display: none; content: ''; }
body .bd-operario-card__summary:hover,
body.dark .bd-operario-card__summary:hover { background: rgba(255,255,255,.02); }

body .bd-operario-card__avatar,
body.dark .bd-operario-card__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px; font-weight: 800; color: #000; letter-spacing: .04em;
}

body .bd-operario-card__info,
body.dark .bd-operario-card__info { flex: 1; min-width: 0; }

body .bd-operario-card__nombre,
body.dark .bd-operario-card__nombre { font-size: 14px; font-weight: 700; color: #fff; }

body .bd-operario-card__jornada,
body.dark .bd-operario-card__jornada {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10.5px; color: var(--nt-dim); letter-spacing: .04em; margin-top: 2px;
}

body .bd-operario-card__stats,
body.dark .bd-operario-card__stats { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }

body .bd-operario-card__chevron,
body.dark .bd-operario-card__chevron {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 700; color: var(--nt-dim);
  transition: transform .15s ease, color .15s ease; flex-shrink: 0; margin-left: 4px;
}
body .bd-operario-card[open] .bd-operario-card__chevron,
body.dark .bd-operario-card[open] .bd-operario-card__chevron {
  transform: rotate(90deg); color: var(--nt-green);
}

body .bd-operario-card__body,
body.dark .bd-operario-card__body {
  border-top: 1px solid var(--nt-line3); padding: 14px 18px;
  background: var(--nt-surface2); display: flex; flex-direction: column; gap: 16px;
}

body .bd-operario-card__subsection,
body.dark .bd-operario-card__subsection { display: flex; flex-direction: column; gap: 8px; }

body .bd-operario-card__table,
body.dark .bd-operario-card__table { width: 100%; border-collapse: collapse; font-size: 11px; }

body .bd-operario-card__table th,
body.dark .bd-operario-card__table th {
  text-align: left; padding: 6px 10px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-dim); letter-spacing: .14em;
  font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--nt-line3);
}

body .bd-operario-card__table td,
body.dark .bd-operario-card__table td {
  padding: 7px 10px; border-bottom: 1px solid var(--nt-line3);
  color: var(--nt-text); vertical-align: middle; font-size: 11px;
}
body .bd-operario-card__table tr:last-child td,
body.dark .bd-operario-card__table tr:last-child td { border-bottom: none; }

body .bd-operario-card__empty,
body.dark .bd-operario-card__empty {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--nt-dim); font-style: italic; padding: 8px;
}

@media (max-width: 900px) {
  body .bd-operario-card__summary,
  body.dark .bd-operario-card__summary { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  body .bd-operario-card__stats,
  body.dark .bd-operario-card__stats { gap: 12px; width: 100%; margin-top: 8px; }
  body .bd-operario-card__table,
  body.dark .bd-operario-card__table { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 48 — Bodega.4.M · MScan Mobile Header+Progress+Input (Sprint 4 #1)
   ───────────────────────────────────────────────────────────────────────
   Overlay mobile separado del desktop. App shell vertical fullscreen.
   Definición canónica: bodega-scan-mobile.jsx:8-124
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Overlay fullscreen --- */
body .bd-mscan-overlay,
body.dark .bd-mscan-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--nt-bg, #000); display: flex; flex-direction: column;
  overflow: hidden; font-family: var(--ui-font); color: var(--nt-text);
}

/* --- Header --- */
body .bd-mscan-header,
body.dark .bd-mscan-header {
  padding: 48px 16px 12px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--nt-line3); background: var(--nt-surface); flex-shrink: 0;
}
body .bd-mscan-header__back,
body.dark .bd-mscan-header__back {
  width: 36px; height: 36px; border-radius: 8px; padding: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--nt-line2);
  color: var(--nt-text); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
body .bd-mscan-header__back:active,
body.dark .bd-mscan-header__back:active { background: rgba(255,255,255,.08); border-color: var(--nt-line); }
body .bd-mscan-header__info,
body.dark .bd-mscan-header__info { flex: 1; min-width: 0; }
body .bd-mscan-header__kicker,
body.dark .bd-mscan-header__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-cyan); letter-spacing: .16em; font-weight: 700; margin-bottom: 2px;
}
body .bd-mscan-header__title,
body.dark .bd-mscan-header__title {
  font-size: 14px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body .bd-mscan-header__pills,
body.dark .bd-mscan-header__pills { display: flex; gap: 6px; flex-shrink: 0; }
body .bd-mscan-header__pill,
body.dark .bd-mscan-header__pill {
  padding: 4px 8px; border-radius: 6px; border: 1px solid;
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
}
body .bd-mscan-header__pill-num,
body.dark .bd-mscan-header__pill-num { font-size: 14px; font-weight: 800; line-height: 1; }
body .bd-mscan-header__pill-label,
body.dark .bd-mscan-header__pill-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
body .bd-mscan-header__pill--pend,
body.dark .bd-mscan-header__pill--pend { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.40); color: var(--nt-amber); }
body .bd-mscan-header__pill--ok,
body.dark .bd-mscan-header__pill--ok { background: var(--nt-green-soft); border-color: var(--nt-line); color: var(--nt-green); }

/* --- Progress bar gradient --- */
body .bd-mscan-progress,
body.dark .bd-mscan-progress {
  padding: 10px 16px; background: var(--nt-surface);
  border-bottom: 1px solid var(--nt-line3); flex-shrink: 0;
}
body .bd-mscan-progress__labels,
body.dark .bd-mscan-progress__labels {
  display: flex; justify-content: space-between; margin-bottom: 6px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
body .bd-mscan-progress__label,
body.dark .bd-mscan-progress__label { color: var(--nt-dim); }
body .bd-mscan-progress__value,
body.dark .bd-mscan-progress__value { color: var(--nt-green); }
body .bd-mscan-progress__bar,
body.dark .bd-mscan-progress__bar {
  width: 100%; height: 5px; background: rgba(255,255,255,.04);
  border-radius: 99px; overflow: hidden;
}
body .bd-mscan-progress__fill,
body.dark .bd-mscan-progress__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--nt-green), var(--nt-cyan));
  box-shadow: 0 0 8px rgba(163,255,18,.40);
  transition: width .3s ease;
}

/* --- Input mobile --- */
body .bd-mscan-input,
body.dark .bd-mscan-input {
  padding: 16px 16px 12px; background: var(--nt-surface);
  border-bottom: 1px solid var(--nt-line3); flex-shrink: 0;
}
body .bd-mscan-input__top,
body.dark .bd-mscan-input__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 10px;
}
body .bd-mscan-input__kicker,
body.dark .bd-mscan-input__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-cyan); letter-spacing: .14em;
  font-weight: 700; transition: color .15s ease;
}
body .bd-mscan-input--errored .bd-mscan-input__kicker,
body.dark .bd-mscan-input--errored .bd-mscan-input__kicker { color: var(--nt-red); }
body .bd-mscan-input__qr-btn,
body.dark .bd-mscan-input__qr-btn {
  padding: 4px 9px; background: var(--nt-green-soft); color: var(--nt-green);
  border: 1px solid var(--nt-line); border-radius: 5px; font-size: 10.5px;
  font-family: var(--ui-font); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
body .bd-mscan-input__field,
body.dark .bd-mscan-input__field {
  width: 100%; height: 62px; padding: 0 16px; background: #000;
  border: 1.5px solid var(--nt-line2); border-radius: 10px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 22px; color: var(--nt-cyan); font-weight: 700;
  letter-spacing: .02em; outline: none; caret-color: var(--nt-cyan);
  box-sizing: border-box; transition: all .15s ease;
}
body .bd-mscan-input__field::placeholder,
body.dark .bd-mscan-input__field::placeholder { color: var(--nt-faint); font-weight: 500; font-size: 16px; }
body .bd-mscan-input__field:focus,
body.dark .bd-mscan-input__field:focus {
  border-color: var(--nt-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10), 0 0 18px rgba(34,211,238,.20);
}
body .bd-mscan-input--errored .bd-mscan-input__field,
body.dark .bd-mscan-input--errored .bd-mscan-input__field {
  border-color: var(--nt-red);
  box-shadow: 0 0 0 3px rgba(248,113,113,.10), 0 0 18px rgba(248,113,113,.25);
  color: var(--nt-red);
}

/* --- Body placeholder --- */
body .bd-mscan-body,
body.dark .bd-mscan-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
body .bd-mscan-body__placeholder,
body.dark .bd-mscan-body__placeholder {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px; color: var(--nt-dim); letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 49 — Bodega.4.N · MScanBody 4 states mobile (Sprint 4 #2)
   ───────────────────────────────────────────────────────────────────────
   Body states: Idle, Detectado, Success, Error.
   Reutiliza keyframes bd-pulse (4.E), bd-scan-panel-in, bd-scan-glow-out,
   bd-scan-icon-pop (4.J).
   Definición canónica: bodega-scan-mobile.jsx:127-368
   ═══════════════════════════════════════════════════════════════════════ */

/* --- IDLE --- */
body .bd-mscan-idle,
body.dark .bd-mscan-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 16px; text-align: center; height: 100%;
}
body .bd-mscan-idle__pulse,
body.dark .bd-mscan-idle__pulse {
  position: relative; width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
}
body .bd-mscan-idle__ring-outer,
body.dark .bd-mscan-idle__ring-outer {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(34,211,238,.40); animation: bd-pulse 2s infinite;
}
body .bd-mscan-idle__ring-inner,
body.dark .bd-mscan-idle__ring-inner {
  position: absolute; inset: 16px; border-radius: 50%; border: 1.5px solid rgba(34,211,238,.20);
}
body .bd-mscan-idle__icon,
body.dark .bd-mscan-idle__icon { position: relative; z-index: 1; color: var(--nt-cyan); }
body .bd-mscan-idle__text,
body.dark .bd-mscan-idle__text {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px; color: var(--nt-cyan); letter-spacing: .10em; font-weight: 700;
}
body .bd-mscan-idle__helper,
body.dark .bd-mscan-idle__helper { font-size: 12px; color: var(--nt-dim); max-width: 260px; line-height: 1.5; }

/* --- DETECTADO --- */
body .bd-mscan-detectado,
body.dark .bd-mscan-detectado {
  display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 16px;
  overflow-y: auto; height: 100%; box-sizing: border-box; animation: bd-scan-panel-in .3s ease-out;
}
body .bd-mscan-detectado__card,
body.dark .bd-mscan-detectado__card {
  padding: 18px 16px; background: rgba(34,211,238,.06);
  border: 1.5px solid var(--nt-cyan); border-radius: 12px;
  box-shadow: 0 0 28px rgba(34,211,238,.16);
}
body .bd-mscan-detectado__kicker,
body.dark .bd-mscan-detectado__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9.5px; color: var(--nt-cyan); letter-spacing: .14em; font-weight: 700; margin-bottom: 6px;
}
body .bd-mscan-detectado__titulo,
body.dark .bd-mscan-detectado__titulo { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
body .bd-mscan-detectado__meta,
body.dark .bd-mscan-detectado__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 11px;
}
body .bd-mscan-detectado__sku,
body.dark .bd-mscan-detectado__sku { color: var(--nt-green); font-weight: 700; }
body .bd-mscan-detectado__marca,
body.dark .bd-mscan-detectado__marca { color: var(--nt-mute); }
body .bd-mscan-detectado__ubic-badge,
body.dark .bd-mscan-detectado__ubic-badge {
  padding: 2px 6px; border-radius: 3px; background: var(--nt-green-soft);
  color: var(--nt-green); font-weight: 700;
}
body .bd-mscan-detectado__pendientes,
body.dark .bd-mscan-detectado__pendientes {
  background: #000; border: 1px solid var(--nt-line2); border-radius: 8px; padding: 12px 14px;
}
body .bd-mscan-detectado__pend-label,
body.dark .bd-mscan-detectado__pend-label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-dim); letter-spacing: .14em; font-weight: 700; margin-bottom: 4px;
}
body .bd-mscan-detectado__pend-num,
body.dark .bd-mscan-detectado__pend-num { display: flex; align-items: baseline; gap: 6px; }
body .bd-mscan-detectado__pend-big,
body.dark .bd-mscan-detectado__pend-big {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 30px; color: var(--nt-green); font-weight: 800; line-height: 1;
}
body .bd-mscan-detectado__pend-meta,
body.dark .bd-mscan-detectado__pend-meta { font-size: 12px; color: var(--nt-mute); }
body .bd-mscan-detectado__stepper-label,
body.dark .bd-mscan-detectado__stepper-label {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-dim); letter-spacing: .14em; font-weight: 700; margin-bottom: 8px;
}
body .bd-mscan-detectado__stepper,
body.dark .bd-mscan-detectado__stepper { display: flex; gap: 10px; align-items: center; }
body .bd-mscan-detectado__stepper-btn,
body.dark .bd-mscan-detectado__stepper-btn {
  width: 52px; height: 52px; padding: 0; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1.5px solid var(--nt-line2);
  color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .15s ease;
}
body .bd-mscan-detectado__stepper-btn:active,
body.dark .bd-mscan-detectado__stepper-btn:active { background: rgba(34,211,238,.10); border-color: var(--nt-cyan); color: var(--nt-cyan); }
body .bd-mscan-detectado__stepper-input,
body.dark .bd-mscan-detectado__stepper-input {
  flex: 1; height: 60px; background: #000; border: 1.5px solid var(--nt-cyan); border-radius: 10px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 32px;
  color: #fff; font-weight: 800; text-align: center; outline: none;
  caret-color: var(--nt-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.10);
  -moz-appearance: textfield; box-sizing: border-box;
}
body .bd-mscan-detectado__stepper-input::-webkit-inner-spin-button,
body .bd-mscan-detectado__stepper-input::-webkit-outer-spin-button,
body.dark .bd-mscan-detectado__stepper-input::-webkit-inner-spin-button,
body.dark .bd-mscan-detectado__stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body .bd-mscan-detectado__actions,
body.dark .bd-mscan-detectado__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
body .bd-mscan-detectado__btn-cancelar,
body.dark .bd-mscan-detectado__btn-cancelar {
  flex: 0 0 100px; padding: 14px; background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line2); border-radius: 10px;
  color: var(--nt-text); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
}
body .bd-mscan-detectado__btn-confirmar,
body.dark .bd-mscan-detectado__btn-confirmar {
  flex: 1; padding: 14px; background: var(--nt-green); color: #000;
  border: none; border-radius: 10px; font-size: 15px; font-weight: 800;
  cursor: pointer; box-shadow: 0 0 18px rgba(163,255,18,.25); text-align: center;
}
body .bd-mscan-detectado__btn-confirmar:disabled,
body.dark .bd-mscan-detectado__btn-confirmar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* --- SUCCESS --- */
body .bd-mscan-success,
body.dark .bd-mscan-success {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 16px; height: 100%; position: relative; overflow: hidden;
  text-align: center; animation: bd-scan-panel-in .3s ease-out;
}
body .bd-mscan-success::before,
body.dark .bd-mscan-success::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(163,255,18,.18), transparent 70%);
  pointer-events: none; z-index: 0; animation: bd-scan-glow-out .8s ease-out forwards;
}
body .bd-mscan-success__check,
body.dark .bd-mscan-success__check {
  width: 96px; height: 96px; border-radius: 50%; background: var(--nt-green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(163,255,18,.60); position: relative; z-index: 1;
  animation: bd-scan-icon-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body .bd-mscan-success__kicker,
body.dark .bd-mscan-success__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700;
  position: relative; z-index: 1;
}
body .bd-mscan-success__titulo,
body.dark .bd-mscan-success__titulo { font-size: 20px; font-weight: 800; color: #fff; position: relative; z-index: 1; }
body .bd-mscan-success__titulo-sku,
body.dark .bd-mscan-success__titulo-sku { color: var(--nt-green); font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace); }
body .bd-mscan-success__sub,
body.dark .bd-mscan-success__sub { display: block; font-size: 16px; font-weight: 500; color: var(--nt-text); margin-top: 4px; }
body .bd-mscan-success__footer,
body.dark .bd-mscan-success__footer {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; color: var(--nt-dim); position: relative; z-index: 1; margin-top: 4px;
}

/* --- ERROR --- */
body .bd-mscan-error,
body.dark .bd-mscan-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 16px; height: 100%; position: relative; overflow: hidden;
  text-align: center; animation: bd-scan-panel-in .3s ease-out;
}
body .bd-mscan-error::before,
body.dark .bd-mscan-error::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(248,113,113,.18), transparent 70%);
  pointer-events: none; z-index: 0; animation: bd-scan-glow-out .8s ease-out forwards;
}
body .bd-mscan-error__x,
body.dark .bd-mscan-error__x {
  width: 96px; height: 96px; border-radius: 50%; background: var(--nt-red);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(248,113,113,.60); position: relative; z-index: 1;
  animation: bd-scan-icon-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body .bd-mscan-error__kicker,
body.dark .bd-mscan-error__kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--nt-red); letter-spacing: .18em; font-weight: 700;
  position: relative; z-index: 1;
}
body .bd-mscan-error__titulo,
body.dark .bd-mscan-error__titulo { font-size: 18px; font-weight: 800; color: #fff; position: relative; z-index: 1; }
body .bd-mscan-error__titulo-codigo,
body.dark .bd-mscan-error__titulo-codigo { color: var(--nt-red); font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace); }
body .bd-mscan-error__desc,
body.dark .bd-mscan-error__desc { font-size: 11.5px; color: var(--nt-mute); max-width: 280px; line-height: 1.5; position: relative; z-index: 1; }
body .bd-mscan-error__sugerencias,
body.dark .bd-mscan-error__sugerencias { display: flex; gap: 8px; position: relative; z-index: 1; }
body .bd-mscan-error__btn-sug,
body.dark .bd-mscan-error__btn-sug {
  padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--nt-line2);
  border-radius: 7px; color: var(--nt-text); font-size: 12px; font-weight: 600; cursor: pointer;
}
body .bd-mscan-error__footer,
body.dark .bd-mscan-error__footer {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px; color: var(--nt-dim); position: relative; z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 50 — Bodega.4.O · MScanBottomSheet iOS-style (Sprint 4 #3 CIERRE)
   ───────────────────────────────────────────────────────────────────────
   Sheet expandible con próxima sugerida + lista upcoming.
   Definición canónica: bodega-scan-mobile.jsx:370-459
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-mscan-bottom-sheet,
body.dark .bd-mscan-bottom-sheet {
  border-top: 1px solid var(--nt-line2); background: var(--nt-surface);
  display: flex; flex-direction: column; flex-shrink: 0;
  max-height: 110px; transition: max-height .2s ease, box-shadow .2s ease; overflow: hidden;
}
body .bd-mscan-bottom-sheet--expanded,
body.dark .bd-mscan-bottom-sheet--expanded { max-height: 320px; box-shadow: 0 -20px 40px rgba(0,0,0,.60); }

body .bd-mscan-bottom-sheet__handle-wrap,
body.dark .bd-mscan-bottom-sheet__handle-wrap { padding: 6px 0 4px; display: flex; justify-content: center; flex-shrink: 0; }
body .bd-mscan-bottom-sheet__handle,
body.dark .bd-mscan-bottom-sheet__handle { width: 36px; height: 4px; background: var(--nt-line2); border-radius: 99px; }

body .bd-mscan-bottom-sheet__proxima,
body.dark .bd-mscan-bottom-sheet__proxima {
  padding: 4px 16px 10px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer;
}
body .bd-mscan-bottom-sheet__arrow,
body.dark .bd-mscan-bottom-sheet__arrow {
  width: 22px; font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 14px; color: var(--nt-cyan); font-weight: 700; text-align: center; flex-shrink: 0;
}
body .bd-mscan-bottom-sheet__info,
body.dark .bd-mscan-bottom-sheet__info { flex: 1; min-width: 0; }
body .bd-mscan-bottom-sheet__row,
body.dark .bd-mscan-bottom-sheet__row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
body .bd-mscan-bottom-sheet__row:last-child { margin-bottom: 0; }
body .bd-mscan-bottom-sheet__ubic-green,
body.dark .bd-mscan-bottom-sheet__ubic-green { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green); font-weight: 700; }
body .bd-mscan-bottom-sheet__zona,
body.dark .bd-mscan-bottom-sheet__zona { font-family: var(--ui-mono); font-size: 9px; color: var(--nt-dim); letter-spacing: .06em; }
body .bd-mscan-bottom-sheet__sku-cyan,
body.dark .bd-mscan-bottom-sheet__sku-cyan { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-cyan); font-weight: 700; }
body .bd-mscan-bottom-sheet__nombre,
body.dark .bd-mscan-bottom-sheet__nombre { font-size: 11px; color: var(--nt-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
body .bd-mscan-bottom-sheet__uds,
body.dark .bd-mscan-bottom-sheet__uds { text-align: right; flex-shrink: 0; }
body .bd-mscan-bottom-sheet__uds-num,
body.dark .bd-mscan-bottom-sheet__uds-num { font-family: var(--ui-mono); font-size: 20px; color: #fff; font-weight: 800; line-height: 1; }
body .bd-mscan-bottom-sheet__uds-label,
body.dark .bd-mscan-bottom-sheet__uds-label { font-family: var(--ui-mono); font-size: 9px; color: var(--nt-dim); margin-top: 1px; }

body .bd-mscan-bottom-sheet__toggle,
body.dark .bd-mscan-bottom-sheet__toggle {
  width: 24px; height: 24px; padding: 0; border-radius: 5px;
  background: rgba(255,255,255,.04); border: 1px solid var(--nt-line3);
  color: var(--nt-dim); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
body .bd-mscan-bottom-sheet__toggle:active,
body.dark .bd-mscan-bottom-sheet__toggle:active { background: rgba(34,211,238,.10); border-color: var(--nt-cyan); color: var(--nt-cyan); }
body .bd-mscan-bottom-sheet__toggle-icon,
body.dark .bd-mscan-bottom-sheet__toggle-icon { transition: transform .2s ease; }
body .bd-mscan-bottom-sheet--expanded .bd-mscan-bottom-sheet__toggle-icon,
body.dark .bd-mscan-bottom-sheet--expanded .bd-mscan-bottom-sheet__toggle-icon { transform: rotate(180deg); }

body .bd-mscan-bottom-sheet__lista,
body.dark .bd-mscan-bottom-sheet__lista { border-top: 1px solid var(--nt-line3); overflow-y: auto; flex: 1; }
body .bd-mscan-bottom-sheet__lista-kicker,
body.dark .bd-mscan-bottom-sheet__lista-kicker {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; color: var(--nt-dim); letter-spacing: .14em; font-weight: 700; padding: 8px 16px 4px;
}
body .bd-mscan-bottom-sheet__item,
body.dark .bd-mscan-bottom-sheet__item { padding: 9px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--nt-line3); }
body .bd-mscan-bottom-sheet__item:last-child { border-bottom: none; }
body .bd-mscan-bottom-sheet__item-indicator,
body.dark .bd-mscan-bottom-sheet__item-indicator { width: 22px; font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); font-weight: 600; text-align: center; flex-shrink: 0; }
body .bd-mscan-bottom-sheet__item-ubic,
body.dark .bd-mscan-bottom-sheet__item-ubic { width: 60px; font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green); font-weight: 700; flex-shrink: 0; }
body .bd-mscan-bottom-sheet__item-info,
body.dark .bd-mscan-bottom-sheet__item-info { flex: 1; min-width: 0; }
body .bd-mscan-bottom-sheet__item-sku,
body.dark .bd-mscan-bottom-sheet__item-sku { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-text); font-weight: 600; }
body .bd-mscan-bottom-sheet__item-nombre,
body.dark .bd-mscan-bottom-sheet__item-nombre { font-size: 10.5px; color: var(--nt-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .bd-mscan-bottom-sheet__item-uds,
body.dark .bd-mscan-bottom-sheet__item-uds { font-family: var(--ui-mono); font-size: 13px; color: #fff; font-weight: 700; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 51 — ScanIdle Desktop pulse circle (hotfix Bug 2)
   ───────────────────────────────────────────────────────────────────────
   Idle state desktop con pulse circle 90×90 + barcode SVG 36×36.
   Definición canónica: bodega-scan.jsx:270-316
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-scan-idle,
body.dark .bd-scan-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 24px; text-align: center;
}
body .bd-scan-idle__pulse,
body.dark .bd-scan-idle__pulse {
  position: relative; width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}
body .bd-scan-idle__ring-outer,
body.dark .bd-scan-idle__ring-outer {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(34,211,238,.40); animation: bd-pulse 2s infinite;
}
body .bd-scan-idle__ring-inner,
body.dark .bd-scan-idle__ring-inner {
  position: absolute; inset: 14px; border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,.20);
}
body .bd-scan-idle__icon,
body.dark .bd-scan-idle__icon { color: var(--nt-cyan); position: relative; z-index: 1; display: block; }
body .bd-scan-idle__text,
body.dark .bd-scan-idle__text {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 13px; color: var(--nt-cyan); letter-spacing: .10em; font-weight: 700;
}
body .bd-scan-idle__helper,
body.dark .bd-scan-idle__helper { font-size: 11.5px; color: var(--nt-dim); max-width: 280px; line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 52 — Bodega.4.P · Btn variants faltantes (Sprint 5 #1)
   ───────────────────────────────────────────────────────────────────────
   Completa el sistema de botones. primary/secondary/sm/danger/scan ya
   existen (sección 5 + scan-action). Agrega ghost, admin, :disabled, tag.
   Definición canónica: bodega-atoms.jsx:56-90
   ═══════════════════════════════════════════════════════════════════════ */

/* --- ghost --- */
body .btn-ghost,
body.dark .btn-ghost {
  background: transparent; border: 1px solid var(--nt-line3); color: var(--nt-mute);
}
body .btn-ghost:hover,
body.dark .btn-ghost:hover {
  background: rgba(255,255,255,.03); border-color: var(--nt-line2); color: var(--nt-text);
}

/* --- admin --- */
body .btn-admin,
body.dark .btn-admin {
  background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.30); color: #94A3B8;
}
body .btn-admin:hover,
body.dark .btn-admin:hover {
  background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.45); color: #CBD5E1;
}

/* --- :disabled global --- */
body .btn:disabled, body.dark .btn:disabled,
body .btn-primary:disabled, body.dark .btn-primary:disabled,
body .btn-secondary:disabled, body.dark .btn-secondary:disabled,
body .btn-ghost:disabled, body.dark .btn-ghost:disabled,
body .btn-admin:disabled, body.dark .btn-admin:disabled,
body .btn-danger:disabled, body.dark .btn-danger:disabled {
  opacity: .4; cursor: not-allowed; box-shadow: none; filter: none;
}

/* --- .btn-tag keyboard hint (ENTER / ESC) --- */
body .btn-tag,
body.dark .btn-tag {
  display: inline-block; font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  background: rgba(255,255,255,.04); border: 1px solid var(--nt-line3);
  border-radius: 3px; color: var(--nt-mute); margin-left: 4px; letter-spacing: .04em;
}
body .btn-primary .btn-tag,
body.dark .btn-primary .btn-tag {
  background: rgba(0,0,0,.20); border-color: rgba(0,0,0,.30); color: rgba(0,0,0,.65);
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 53 — Bodega.4.Q · Form inputs atoms (Sprint 5 #2)
   ───────────────────────────────────────────────────────────────────────
   .bd-select, .bd-search-input (+ wrapper), .bd-date-input.
   Definición canónica: bodega-atoms.jsx:289-331
   ═══════════════════════════════════════════════════════════════════════ */

/* --- .bd-select --- */
body .bd-select,
body.dark .bd-select {
  height: 32px; padding: 0 28px 0 10px; background-color: #000;
  border: 1px solid var(--nt-line2); border-radius: 5px;
  font-family: var(--ui-font); font-size: 11.5px; color: var(--nt-text);
  font-weight: 600; cursor: pointer; outline: none;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23A3A3A3' d='M6 8L2 4h8z'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .15s ease;
}
body .bd-select:focus, body.dark .bd-select:focus { border-color: var(--nt-cyan); }
body .bd-select:disabled, body.dark .bd-select:disabled { opacity: .5; cursor: not-allowed; }

/* --- .bd-search-input --- */
body .bd-search-input-wrapper,
body.dark .bd-search-input-wrapper { position: relative; display: inline-block; }
body .bd-search-input-wrapper::before,
body.dark .bd-search-input-wrapper::before {
  content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat; background-size: contain;
}
body .bd-search-input,
body.dark .bd-search-input {
  height: 32px; padding: 0 10px 0 28px; background-color: #000;
  border: 1px solid var(--nt-line2); border-radius: 5px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px; color: var(--nt-text); font-weight: 600;
  outline: none; box-sizing: border-box; transition: border-color .15s ease;
}
body .bd-search-input::placeholder,
body.dark .bd-search-input::placeholder { color: var(--nt-dim); font-weight: 500; }
body .bd-search-input:focus,
body.dark .bd-search-input:focus { border-color: var(--nt-cyan); }

/* --- .bd-date-input --- */
body .bd-date-input,
body.dark .bd-date-input {
  height: 32px; padding: 0 10px; background-color: #000;
  border: 1px solid var(--nt-line2); border-radius: 5px;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11.5px; color: var(--nt-text); font-weight: 600;
  outline: none; box-sizing: border-box; color-scheme: dark;
  transition: border-color .15s ease;
}
body .bd-date-input::-webkit-calendar-picker-indicator,
body.dark .bd-date-input::-webkit-calendar-picker-indicator {
  filter: invert(.7); cursor: pointer; opacity: .7;
}
body .bd-date-input::-webkit-calendar-picker-indicator:hover,
body.dark .bd-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
body .bd-date-input:focus,
body.dark .bd-date-input:focus { border-color: var(--nt-cyan); }
body .bd-date-input:disabled,
body.dark .bd-date-input:disabled { opacity: .5; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 54 — Bodega.4.R · KpiCard refinamiento (Sprint 5 #3)
   ───────────────────────────────────────────────────────────────────────
   Completa .metric-card con color bar, .m-sub, .m-icon.
   Definición canónica: bodega-atoms.jsx:141-164
   ═══════════════════════════════════════════════════════════════════════ */

body .metric-card::before,
body.dark .metric-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--kpi-color, transparent); opacity: .6; pointer-events: none;
}

body .metric-card .m-sub,
body.dark .metric-card .m-sub {
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--nt-dim); letter-spacing: .03em; margin-top: 2px;
}

body .metric-card .m-icon,
body.dark .metric-card .m-icon {
  display: inline-flex; align-items: center;
  font-family: var(--ui-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 700; color: var(--kpi-color, var(--nt-mute));
  margin-right: 6px; letter-spacing: .04em;
}

body .metric-card--positive { --kpi-color: var(--nt-green); }
body .metric-card--negative { --kpi-color: var(--nt-red); }
body .metric-card--neutral  { --kpi-color: var(--nt-cyan); }
body .metric-card--warning  { --kpi-color: var(--nt-amber); }

/* Inventario I.2 — KPI clickable visual (canon inventario.jsx:174-193).
   Selector plano (lección C.2.c.1.1). Reusa .metric-card; el click→modal
   ya está cableado por delegation en _wireListaComprasOnce. */
.metric-card-clickable {
  border-color: color-mix(in srgb, var(--nt-red) 25%, transparent);
  box-shadow: inset 0 0 20px rgba(248,113,113,.05);
}
.metric-card-arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-red);
  letter-spacing: .08em;
  font-weight: 700;
  padding: 2px 5px;
  background: rgba(248,113,113,.08);
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 55 — Bodega.4.S · AlertBanner (Sprint 5 #4)
   ───────────────────────────────────────────────────────────────────────
   Banner inline 4 variants. Match JSX literal.
   Definición canónica: bodega-atoms.jsx:166-184
   ═══════════════════════════════════════════════════════════════════════ */

body .bd-alert,
body.dark .bd-alert {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 500; border: 1px solid;
}
body .bd-alert__icon, body.dark .bd-alert__icon { font-size: 14px; flex-shrink: 0; }
body .bd-alert__content, body.dark .bd-alert__content { flex: 1; min-width: 0; }

body .bd-alert--warn, body.dark .bd-alert--warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.30); color: var(--nt-amber); }
body .bd-alert--danger, body.dark .bd-alert--danger { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.30); color: var(--nt-red); }
body .bd-alert--info, body.dark .bd-alert--info { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.30); color: var(--nt-cyan); }
body .bd-alert--success, body.dark .bd-alert--success { background: var(--nt-green-soft); border-color: var(--nt-line); color: var(--nt-green); }


/* ═══════════════════════════════════════════════════════════════════════

   ███████████████████████████████████████████████████████████████████████

                 ✦  BODEGA 1:1 — REFACTOR COMPLETO  ✦

   ███████████████████████████████████████████████████████████████████████
   ───────────────────────────────────────────────────────────────────────

   Cerrado: 25 mayo 2026
   Versión NT: v39
   Sub-fases: 20 + 1 hotfix
   Commits: 21
   Secciones CSS: 36-56

   ───────────────────────────────────────────────────────────────────────
   ATOMS CANÓNICOS INSTALADOS:
   ───────────────────────────────────────────────────────────────────────

   Sprint 1 (atoms base):
     36. SectionLabel
     37. BdHeader (kicker + ROL + ONLINE)
     38. EstadoItemBadge (○ ◐ ●)
     39. ProgressBar + PctCell
     40. Cosméticos (Checkbox, Toolbar, Stat, MovTipo, Keyframes)

   Sprint 2 (Modo Escaneo Desktop):
     41. ScanHeader (cyan badge + counters + ESC)
     42. ScanLista FIFO (○ → ✓ + próxima cyan)
     43. ScanInputBox (62px + caret cyan + QR)
     44. ScanDetectado FLOW CRÍTICO (stepper + ENTER/ESC)
     45. ScanSuccess + ScanError (check/X 80px + radial flash)

   Sprint 3 (Recepción + OperarioCard):
     46. BdRecepcion multi-destino + sidebar recientes
     47. OperarioCard (avatar gradient + <details> nativo)

   Sprint 4 (Mobile Zebra):
     48. MScanHeader + MScanProgress + MScanInput
     49. MScanBody 4 states + flow integrado
     50. MScanBottomSheet iOS-style
     51. ScanIdle Desktop pulse (hotfix)

   Sprint 5 (refinamiento):
     52. Btn variants (ghost, admin, :disabled, btn-tag)
     53. Form inputs (.bd-select, .bd-search-input, .bd-date-input)
     54. KpiCard (color bar + m-sub + m-icon)
     55. AlertBanner (warn/danger/info/success)
     56. Toolbar + Stat confirmados 100% (cierre)
     57. Fix alineación tablas (hotfix post-validación)

   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 57 — Fix alineación tablas (hotfix Bug 2+3 post-validación)
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 58 — Tablas alineación fix (hotfix Bug 2+3 round 2)
   ───────────────────────────────────────────────────────────────────────
   min-width + text-align + padding consistente en th.num y td.num.
   ═══════════════════════════════════════════════════════════════════════ */

body .tabla-wrapper th.num,
body .tabla-wrapper td.num,
body.dark .tabla-wrapper th.num,
body.dark .tabla-wrapper td.num {
  text-align: right;
  min-width: 90px;
  white-space: nowrap;
  padding-right: 16px;
}

body .tabla-wrapper th.num:last-child,
body .tabla-wrapper td.num:last-child,
body.dark .tabla-wrapper th.num:last-child,
body.dark .tabla-wrapper td.num:last-child {
  min-width: 130px;
  padding-right: 14px;
}

body .tabla-wrapper th:first-child,
body .tabla-wrapper td:first-child,
body.dark .tabla-wrapper th:first-child,
body.dark .tabla-wrapper td:first-child {
  text-align: left;
  padding-left: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN 59 — Tablas scroll horizontal + sticky SKU (Inventario + Ventas)
   ═══════════════════════════════════════════════════════════════════════ */

body .tabla-wrapper.tabla-sticky,
body.dark .tabla-wrapper.tabla-sticky {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

body .tabla-sticky table th:first-child,
body .tabla-sticky table td:first-child,
body.dark .tabla-sticky table th:first-child,
body.dark .tabla-sticky table td:first-child {
  position: sticky;
  left: 0;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  background: var(--nt-surface);
  z-index: 5;
  border-right: 1px solid var(--nt-line2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .tabla-sticky table thead th:first-child,
body.dark .tabla-sticky table thead th:first-child {
  z-index: 12;
  background: var(--nt-surface2);
}

body .tabla-sticky.has-scroll-right::after,
body.dark .tabla-sticky.has-scroll-right::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.7));
  pointer-events: none;
  z-index: 6;
}

body .tabla-sticky.scroll-hint::after,
body.dark .tabla-sticky.scroll-hint::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.7));
  pointer-events: none;
  z-index: 6;
  animation: tabla-scroll-hint 1.2s ease-in-out 2;
}

@keyframes tabla-scroll-hint {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

body .tabla-sticky::-webkit-scrollbar { height: 8px; }
body .tabla-sticky::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
body .tabla-sticky::-webkit-scrollbar-thumb { background: var(--nt-line2); border-radius: 4px; }
body .tabla-sticky::-webkit-scrollbar-thumb:hover { background: var(--nt-line); }


/* ═══════════════════════════════════════════════════════════════════════
   60. Dashboard Foundation NT (D1.A Sprint D1 #1)
   ───────────────────────────────────────────────────────────────────────
   Overrides NT para clases legacy del Dashboard (dash-card, kpi-mini*,
   panel-filtros-dashboard, dash-dropdown-*, dash-toggle-*, dash-titulo).
   Specificity body #sec-dashboard .X gana sin !important.
   Definición canónica: dashboard-app-screen.jsx + Finium dashboard app.html
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards genéricas (.dash-card) — dashboard.js:58
   Original sage: var(--bg-card) + border-subtle + radius 16 */
body #sec-dashboard .dash-card,
#sec-dashboard .dash-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line3);
  border-radius: 10px;
  padding: 18px 20px;
}

/* Mini KPIs — dashboard.js:86-91
   Original sage: var(--bg-card) + border-subtle + radius 14 */
body #sec-dashboard .kpi-mini,
#sec-dashboard .kpi-mini {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 8px;
  padding: 14px 16px;
}
body #sec-dashboard .kpi-mini-label,
#sec-dashboard .kpi-mini-label {
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
}
body #sec-dashboard .kpi-mini-valor,
#sec-dashboard .kpi-mini-valor {
  font-family: var(--ui-font);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
body #sec-dashboard .kpi-mini-sub,
#sec-dashboard .kpi-mini-sub {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-mute);
}
body #sec-dashboard .kpi-mini-sub.up,
#sec-dashboard .kpi-mini-sub.up {
  color: var(--nt-green);
}
body #sec-dashboard .kpi-mini-sub.down,
#sec-dashboard .kpi-mini-sub.down {
  color: var(--nt-red);
}

/* Panel filtros sidebar — dashboard.js:59-61
   Original sage: var(--bg-card) + border-subtle + radius 16 */
body #sec-dashboard .panel-filtros-dashboard,
#sec-dashboard .panel-filtros-dashboard {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 10px;
  padding: 20px 18px;
}

/* Títulos secciones Dashboard — dashboard.js:67
   Original sage: var(--text-secondary) + sans-serif */
body #sec-dashboard .dash-titulo,
#sec-dashboard .dash-titulo {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Switch (Neto, etc.) — dashboard.js:64-66 */
body #sec-dashboard .switch-dashboard,
#sec-dashboard .switch-dashboard {
  border-bottom: 1px solid var(--nt-line3);
}
body #sec-dashboard .switch-label,
#sec-dashboard .switch-label {
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--nt-text);
  font-weight: 600;
}
body #sec-dashboard .switch-sublabel,
#sec-dashboard .switch-sublabel {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
}

/* Dropdowns base (canales, logística) — dashboard.js:72-78 */
body #sec-dashboard .dash-dropdown-btn,
#sec-dashboard .dash-dropdown-btn {
  background: #000000;
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--nt-text);
}
body #sec-dashboard .dash-dropdown-menu,
#sec-dashboard .dash-dropdown-menu {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
}
body #sec-dashboard .dash-dropdown-item,
#sec-dashboard .dash-dropdown-item {
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--nt-text);
}

/* Toggle switch (Neto) — dashboard.js:80-85
   Original sage: var(--border) slider + var(--accent) checked */
body #sec-dashboard .dash-toggle-slider,
#sec-dashboard .dash-toggle-slider {
  background: rgba(229,229,229,.12);
  border-radius: 24px;
}
body #sec-dashboard .dash-toggle input:checked + .dash-toggle-slider,
#sec-dashboard .dash-toggle input:checked + .dash-toggle-slider {
  background: var(--nt-green);
  box-shadow: 0 0 8px rgba(163,255,18,.25);
}
body #sec-dashboard .dash-toggle-slider:before,
#sec-dashboard .dash-toggle-slider:before {
  background: #000000;
}

/* Date inputs Dashboard — dashboard.js:884-886 (inline styles sage)
   Selector por tag dentro de #sec-dashboard — no requiere clase */
body #sec-dashboard input[type="date"],
#sec-dashboard input[type="date"] {
  background: #000000;
  border: 1px solid var(--nt-line2);
  border-radius: 5px;
  color: var(--nt-text);
  font-family: var(--ui-mono);
  font-size: 11.5px;
  font-weight: 600;
  color-scheme: dark;
  padding: 6px 10px;
  height: 32px;
  box-sizing: border-box;
}
body #sec-dashboard input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7);
  opacity: .7;
  cursor: pointer;
}
body #sec-dashboard input[type="date"]:focus {
  border-color: var(--nt-cyan);
  outline: none;
}

/* Checkboxes Dashboard — dashboard.js:79
   accent-color sage → nt-green */
body #sec-dashboard .dash-dropdown-item input[type="checkbox"],
#sec-dashboard .dash-dropdown-item input[type="checkbox"] {
  accent-color: var(--nt-green);
}

/* Loading skeletons — dashboard.js:92-99
   Refinement: rgba bg + pulse suave NT */
body #sec-dashboard .kpi-loading,
#sec-dashboard .kpi-loading,
body #sec-dashboard .kpi-mini-loading,
#sec-dashboard .kpi-mini-loading {
  color: var(--nt-dim);
}

/* Chart SVG container — desktop default height */
#sec-dashboard .dash-chart-svg-wrap,
body #sec-dashboard .dash-chart-svg-wrap {
  height: 200px;
  position: relative;
}

/* ─── Tooltips hover desktop (D6.B.1) — overlay HTML sobre el SVG canon ─── */
#sec-dashboard .dash-chart-hover-overlay,
body #sec-dashboard .dash-chart-hover-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 5;
  touch-action: pan-y; /* NUEVO D6.C — permite scroll vertical, bloquea pan horizontal (scrub) */
}
#sec-dashboard .dash-chart-crosshair,
body #sec-dashboard .dash-chart-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--nt-line3, var(--nt-line2));
  opacity: 0;
  pointer-events: none;
  transition: opacity .08s linear;
}
#sec-dashboard .dash-chart-hover-overlay.active .dash-chart-crosshair,
body #sec-dashboard .dash-chart-hover-overlay.active .dash-chart-crosshair {
  opacity: .6;
}
#sec-dashboard .dash-chart-dot,
body #sec-dashboard .dash-chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nt-green);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 7px var(--nt-green);
}
#sec-dashboard .dash-chart-dot-ant,
body #sec-dashboard .dash-chart-dot-ant {
  width: 7px;
  height: 7px;
  background: var(--nt-dim);
  box-shadow: none;
}
#sec-dashboard .dash-chart-hover-overlay.active .dash-chart-dot,
body #sec-dashboard .dash-chart-hover-overlay.active .dash-chart-dot {
  opacity: 1;
}
#sec-dashboard .dash-chart-tooltip,
body #sec-dashboard .dash-chart-tooltip {
  position: absolute;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  min-width: 140px;
  white-space: nowrap;
}
#sec-dashboard .dash-chart-hover-overlay.active .dash-chart-tooltip,
body #sec-dashboard .dash-chart-hover-overlay.active .dash-chart-tooltip {
  opacity: 1;
}
#sec-dashboard .dash-chart-tooltip-label,
body #sec-dashboard .dash-chart-tooltip-label {
  color: var(--nt-dim);
  font-size: 10px;
  margin-bottom: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#sec-dashboard .dash-chart-tooltip-row,
body #sec-dashboard .dash-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}
#sec-dashboard .dash-chart-tooltip-dot,
body #sec-dashboard .dash-chart-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#sec-dashboard .dash-chart-tooltip-name,
body #sec-dashboard .dash-chart-tooltip-name {
  flex: 1;
  color: var(--nt-mute);
  font-size: 10.5px;
  padding-right: 10px;
}
#sec-dashboard .dash-chart-tooltip-value,
body #sec-dashboard .dash-chart-tooltip-value {
  color: var(--nt-text);
  font-weight: 700;
}
#sec-dashboard .dash-chart-tooltip-delta,
body #sec-dashboard .dash-chart-tooltip-delta {
  font-size: 10px;
  margin-top: 4px;
  text-align: right;
}
#sec-dashboard .dash-chart-tooltip-delta.up,
body #sec-dashboard .dash-chart-tooltip-delta.up {
  color: var(--nt-green);
}
#sec-dashboard .dash-chart-tooltip-delta.down,
body #sec-dashboard .dash-chart-tooltip-delta.down {
  color: var(--nt-red);
}

/* Eje Y chart (D6.A) — overlay HTML al lado del SVG (flex row).
   padding-top:20px alinea las 5 labels con los grid lines del SVG
   (que están en viewBox y=20→200 por el MT=20). */
#sec-dashboard .dash-chart-with-axis,
body #sec-dashboard .dash-chart-with-axis {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
#sec-dashboard .dash-chart-with-axis .dash-chart-svg-wrap,
body #sec-dashboard .dash-chart-with-axis .dash-chart-svg-wrap {
  flex: 1;
  min-width: 0;
}
#sec-dashboard .dash-chart-y-axis,
body #sec-dashboard .dash-chart-y-axis {
  flex-shrink: 0;
  width: 44px;
  height: 200px;
  box-sizing: border-box;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  color: var(--nt-dim);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
/* x-labels offset para alinear con la curva (no bajo el eje Y) */
#sec-dashboard .dash-chart-x-axis,
body #sec-dashboard .dash-chart-x-axis {
  padding-left: 52px;
}

/* Conditional charts: desktop SVG/barra vs mobile stacked/donut (D5.C) */
#sec-dashboard .dash-chart-mobile,
body #sec-dashboard .dash-chart-mobile {
  display: none;
}

/* FAB + Bottom Sheet filtros (D5.D) — DESKTOP defaults.
   El wrapper backdrop/sheet usa display:contents → el <aside> fluye al
   grid 3fr/1fr como sidebar normal. FAB/handle/close ocultos en desktop. */
#sec-dashboard .dash-fab-filtros,
body #sec-dashboard .dash-fab-filtros {
  display: none;
}
#sec-dashboard .dash-sheet-backdrop,
body #sec-dashboard .dash-sheet-backdrop {
  display: contents;
}
#sec-dashboard .dash-sheet,
body #sec-dashboard .dash-sheet {
  display: contents;
}
#sec-dashboard .dash-sheet-handle,
#sec-dashboard .dash-sheet-close,
body #sec-dashboard .dash-sheet-handle,
body #sec-dashboard .dash-sheet-close {
  display: none;
}

/* Mobile overrides — canon dashboard-mobile.jsx */
@media (max-width: 980px) {
  #sec-dashboard .dash-chart-desktop,
  body #sec-dashboard .dash-chart-desktop {
    display: none;
  }
  #sec-dashboard .dash-chart-mobile,
  body #sec-dashboard .dash-chart-mobile {
    display: block;
  }
  body #sec-dashboard .dash-card,
  #sec-dashboard .dash-card {
    padding: 14px;
  }
  body #sec-dashboard .kpi-dashboard,
  #sec-dashboard .kpi-dashboard {
    padding: 16px 14px;
  }
  body #sec-dashboard .kpi-dashboard .kpi-valor,
  #sec-dashboard .kpi-dashboard .kpi-valor {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  body #sec-dashboard .kpi-dashboard .kpi-label,
  #sec-dashboard .kpi-dashboard .kpi-label {
    margin-bottom: 8px;
    font-size: 9.5px;
  }
  body #sec-dashboard .kpi-dashboard .kpi-sub,
  #sec-dashboard .kpi-dashboard .kpi-sub {
    font-size: 10.5px;
  }
  body #sec-dashboard .kpi-mini,
  #sec-dashboard .kpi-mini {
    padding: 10px 12px;
  }
  body #sec-dashboard .kpi-mini-label,
  #sec-dashboard .kpi-mini-label {
    font-size: 8.5px;
    letter-spacing: .10em;
  }
  body #sec-dashboard .kpi-mini-valor,
  #sec-dashboard .kpi-mini-valor {
    font-size: 17px;
  }
  body #sec-dashboard .kpi-mini-sub,
  #sec-dashboard .kpi-mini-sub {
    font-size: 9.5px;
  }
  #sec-dashboard .dash-chart-svg-wrap,
  body #sec-dashboard .dash-chart-svg-wrap {
    height: 140px;
  }
  /* Eje Y mobile — height 140 + padding-top 14 (MT=20 escalado ×0.7) */
  #sec-dashboard .dash-chart-y-axis,
  body #sec-dashboard .dash-chart-y-axis {
    width: 36px;
    height: 140px;
    padding-top: 14px;
    font-size: 8.5px;
  }
  #sec-dashboard .dash-chart-x-axis,
  body #sec-dashboard .dash-chart-x-axis {
    padding-left: 44px;
  }

  /* FAB pill centrado abajo */
  #sec-dashboard .dash-fab-filtros,
  body #sec-dashboard .dash-fab-filtros {
    display: inline-flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--nt-surface);
    border: 1.5px solid var(--nt-green);
    border-radius: 9999px;
    color: var(--nt-green);
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 18px rgba(163,255,18,.25);
  }
  #sec-dashboard .dash-fab-badge,
  body #sec-dashboard .dash-fab-badge {
    background: var(--nt-green);
    color: #000;
    padding: 1px 6px;
    border-radius: 9999px;
    font-family: var(--ui-mono);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
  }
  #sec-dashboard .dash-fab-badge[data-count="0"],
  body #sec-dashboard .dash-fab-badge[data-count="0"] {
    display: none;
  }

  /* Backdrop + sheet (override display:contents del desktop) */
  #sec-dashboard .dash-sheet-backdrop,
  body #sec-dashboard .dash-sheet-backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    align-items: flex-end;
    z-index: 899;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  #sec-dashboard .dash-sheet-backdrop.abierto,
  body #sec-dashboard .dash-sheet-backdrop.abierto {
    opacity: 1;
    pointer-events: auto;
  }
  #sec-dashboard .dash-sheet,
  body #sec-dashboard .dash-sheet {
    display: block;
    width: 100%;
    max-height: 78vh;
    background: var(--nt-surface);
    border-top: 1px solid var(--nt-green);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,.6), 0 0 40px rgba(163,255,18,.15);
    transform: translateY(100%);
    transition: transform .3s ease-out;
    overflow-y: auto;
    padding: 14px 18px 28px;
    position: relative;
  }
  #sec-dashboard .dash-sheet-backdrop.abierto .dash-sheet,
  body #sec-dashboard .dash-sheet-backdrop.abierto .dash-sheet {
    transform: translateY(0);
  }
  #sec-dashboard .dash-sheet-handle,
  body #sec-dashboard .dash-sheet-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--nt-line2);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  #sec-dashboard .dash-sheet-close,
  body #sec-dashboard .dash-sheet-close {
    display: flex;
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: 1px solid var(--nt-line2);
    color: var(--nt-text);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  /* Aside dentro del sheet — sin sticky/grid, transparente */
  #sec-dashboard .dash-sheet .panel-filtros-dashboard,
  body #sec-dashboard .dash-sheet .panel-filtros-dashboard {
    position: static;
    top: auto;
    background: transparent;
    border: none;
    padding: 0;
  }

  /* RIESGO #6: dropdowns dentro del sheet → static para que no se clipeen */
  #sec-dashboard .dash-sheet .dash-dropdown-menu,
  body #sec-dashboard .dash-sheet .dash-dropdown-menu {
    position: static;
    margin-top: 4px;
    box-shadow: none;
    max-height: 200px;
    overflow-y: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   61. Dashboard Subtabs refinement (D2.E Sprint D2 #3 CIERRE)
   ═══════════════════════════════════════════════════════════════════════ */
body #sec-dashboard .subtabs,
#sec-dashboard .subtabs {
  gap: 0;
  margin-bottom: 24px;
  border-bottom-color: var(--nt-line2);
}


/* ═══════════════════════════════════════════════════════════════════════
   62. Tab Productos Foundation NT (D3.A Sprint D3 #1)
   ───────────────────────────────────────────────────────────────────────
   CSS base para tablas dentro del Tab Productos. Los helpers JS
   (_prodTh, _prodTd, etc.) generan inline styles NT. Solo necesitamos
   border-collapse + row borders + base font-size.
   ═══════════════════════════════════════════════════════════════════════ */
#sec-dashboard [data-prod-tab-marker] table,
body #sec-dashboard [data-prod-tab-marker] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
#sec-dashboard [data-prod-tab-marker] tr,
body #sec-dashboard [data-prod-tab-marker] tr {
  border-bottom: 1px solid rgba(229,229,229,.04);
}
#sec-dashboard [data-prod-tab-marker] tr:last-child,
body #sec-dashboard [data-prod-tab-marker] tr:last-child {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · badges de tabla (C.2.a — 1:1 canon catalogo.jsx + inventario.jsx)
   Colores de marca via color-mix() sobre var CSS dinámica (inline en JS).
   ═══════════════════════════════════════════════════════════════════════ */
/* L7 — Marca badge (color/background/border-color inline desde _catMarcaBadge) */
.cat-marca-badge {
  display: inline-block;
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
}
/* Inventario I.3.b — Repos badge NT (canon ReposBadge inventario.jsx:212-220).
   Color vía --repos-color inline. Selector plano (lección C.2.c.1.1). */
.inv-repos-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: var(--ui-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--repos-color);
  background: color-mix(in srgb, var(--repos-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--repos-color) 20%, transparent);
}
.inv-repos-subnote {
  margin-top: 2px;
  font-size: 9px;
  color: var(--nt-faint);
  letter-spacing: .04em;
}
/* Inventario I.4 — Tipo de movimiento badge NT (canon InvMovimientos
   inventario.jsx:519-524). r4 (NO pill r9999), color vía --tipo-color.
   Selector plano (lección C.2.c.1.1). */
.inv-mov-tipo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tipo-color);
  background: color-mix(in srgb, var(--tipo-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tipo-color) 20%, transparent);
}
/* Inventario I.5 — Botón evidencia Defectuosos NT (canon inventario.jsx:440-444).
   Preserva la clase .btn-ver-evidencia para el wiring. Selector plano. */
.inv-def-evidencia {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nt-line3);
  color: var(--nt-cyan);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inv-def-evidencia:hover {
  background: rgba(255,255,255,.06);
}
/* Inventario I.3.b — Pack badge NT (canon PackBadge inventario.jsx:230-235). */
.inv-pack-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--ui-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--nt-green);
  color: #000;
}
/* L9 — Tipo badge · PACK verde sólido / PRODUCTO outline */
.cat-tipo-badge {
  display: inline-block;
  font-family: var(--ui-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 9999px;
}
.cat-tipo-badge.pack {
  background: var(--nt-green);
  color: #000;
  font-weight: 700;
}
.cat-tipo-badge.producto {
  background: rgba(255,255,255,.03);
  color: var(--nt-mute);
  border: 1px solid var(--nt-line3);
  font-weight: 600;
}
/* L8 — Estrategia badge · FIFO cyan / CPP amber / MANUAL dim */
.cat-estrategia-badge {
  display: inline-block;
  font-family: var(--ui-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.cat-estrategia-badge.fifo   { color: var(--nt-cyan);  background: color-mix(in srgb, var(--nt-cyan) 8%, transparent); }
.cat-estrategia-badge.cpp    { color: var(--nt-amber); background: color-mix(in srgb, var(--nt-amber) 8%, transparent); }
.cat-estrategia-badge.manual { color: var(--nt-dim);   background: rgba(229,229,229,.05); }
/* L5 — Tab count pill · Activos verde / Inactivos dim (coloreado en tab activo) */
.cat-tab-count {
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  color: var(--nt-dim);
  background: rgba(255,255,255,.03);
}
.subtab.active .cat-tab-count.activo {
  color: var(--nt-green);
  background: color-mix(in srgb, var(--nt-green) 12%, transparent);
}
.subtab.active .cat-tab-count.inactivo {
  color: var(--nt-mute);
  background: rgba(255,255,255,.06);
}
/* Inventario I.1 — count pill genérico verde en tab activo (canon inventario.jsx:106-111).
   Reuso .cat-tab-count (C.2.a). Las reglas .activo/.inactivo de Catálogo tienen mayor
   especificidad y siguen ganando ahí; Inventario usa .cat-tab-count plano. */
.subtab.active .cat-tab-count {
  color: var(--nt-green);
  background: color-mix(in srgb, var(--nt-green) 10%, transparent);
}
/* Modifier red — Defectuosos (canon t.color=NT.red) */
.subtab.active.subtab-red .cat-tab-count,
.subtab.subtab-red .cat-tab-count.active {
  color: var(--nt-red);
  background: color-mix(in srgb, var(--nt-red) 10%, transparent);
}
/* Inventario I.1 — Checkbox NT CSS-only (canon bodega-atoms.jsx:333 Checkbox atom).
   Native input preserva wiring #inv-mostrar-inactivos. */
.inv-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--nt-mute);
  cursor: pointer;
  padding: 7px 11px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--nt-line3);
  border-radius: 5px;
  font-family: var(--ui-mono);
  letter-spacing: .04em;
  font-weight: 600;
  user-select: none;
}
.inv-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--nt-line2);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
.inv-checkbox:checked {
  background: var(--nt-green);
  border-color: var(--nt-green);
}
/* Checkmark SVG según canon: path "M5 12l4 4 10-10", stroke #000 3.5, 9x9 centrado */
.inv-checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* L11 — IMP badge cyan (fuente importado_excel) */
.cat-imp-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  font-family: var(--ui-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 2px;
  vertical-align: middle;
  color: var(--nt-cyan);
  background: color-mix(in srgb, var(--nt-cyan) 8%, transparent);
}
/* L12 — INACTIVO badge (tab inactivo) */
.cat-inactivo-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  font-family: var(--ui-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 2px;
  vertical-align: middle;
  color: var(--nt-dim);
  background: rgba(255,255,255,.03);
}
/* L10 — MLC bajo el nombre en la tabla */
.cat-cell-mlc {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-faint);
  margin-top: 2px;
  letter-spacing: .04em;
}
/* L4 — Filtro marca · SelectBox mono inline */
.cat-select-marca {
  min-width: 180px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · Ficha (C.2.b.1 — 1:1 canon catalogo.jsx:294-335)
   ═══════════════════════════════════════════════════════════════════════ */
/* F1 — Header del modal con gradient + layout icon-box + contenido */
.ficha-modal-header {
  align-items: center;
  background: linear-gradient(135deg, var(--nt-green-soft), transparent);
}
/* F1 — Icon-box 42×42 (cubo) con glow NT.green */
.ficha-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--nt-green-soft);
  border: 1.5px solid var(--nt-green);
  color: var(--nt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px var(--nt-green-glow);
}
/* F1 — Eyebrow mono verde */
.ficha-eyebrow {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}
/* F1 — SKU en verde NT dentro de la sub-línea */
.ficha-sku-link {
  color: var(--nt-green);
  font-weight: 700;
}
/* F13 — Info box "// PRODUCTO INDIVIDUAL" (Tab Tipo, cuando no es Pack) */
.cat-ficha-info-cyan {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--nt-cyan) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-cyan) 20%, transparent);
  border-radius: 6px;
  font-size: 12px;
  margin-top: 12px;
}
.ficha-info-eyebrow {
  font-family: var(--ui-mono);
  color: var(--nt-cyan);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 11px;
}
.ficha-info-body {
  margin-top: 4px;
  color: var(--nt-mute);
  font-size: 12px;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · Hero Compras (C.2.c.1 — F14, 1:1 canon catalogo.jsx:677-702)
   ═══════════════════════════════════════════════════════════════════════ */
.cat-compras-hero {
  padding: 18px 20px;
  background: var(--nt-surface2, rgba(255,255,255,.02));
  border: 1px solid var(--nt-line3, rgba(255,255,255,.08));
  border-radius: 10px;
  margin-bottom: 16px;
}
.cat-compras-hero-eyebrow {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
}
.cat-compras-hero-precio {
  font-family: var(--ui-mono);
  font-size: 30px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.cat-compras-hero-subinfo {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-cyan);
  font-weight: 600;
}
.cat-compras-hero-nota {
  font-size: 11px;
  color: var(--nt-dim);
  font-style: italic;
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · Chart Compras (C.2.c.2 — F16, SVG inline 1:1 canon)
   Selector plano sin prefijo #sec-catalogo (lección C.2.c.1.1: el modal
   se monta en document.body, fuera del nodo #sec-catalogo).
   ═══════════════════════════════════════════════════════════════════════ */
.cat-compras-chart-wrap {
  margin-top: 16px;
  margin-bottom: 16px;
}
.cat-compras-chart-eyebrow {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 8px;
}
.cat-compras-chart-box {
  background: var(--nt-surface2);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 16px;
  height: 160px;
  position: relative;
}
.cat-compras-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · Reposición view (C.2.d.1 — F18/F19/F20/F24-view, 1:1 canon
   catalogo.jsx:788-889). Selector plano sin prefijo #sec-catalogo
   (lección C.2.c.1.1: el modal se monta en document.body).
   ═══════════════════════════════════════════════════════════════════════ */
.cat-repos-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Eyebrows — F19. CONFIGURADA verde fontSize 10 .14em; los dim fontSize 9.
   EMBALAJE usa .cat-repos-eyebrow-dim + override inline letter-spacing .16em. */
.cat-repos-eyebrow-green {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-green);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 4px;
}
.cat-repos-eyebrow-dim {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 8px;
}
/* Status card — F20 + esmeralda migrada a NT lima (green-soft + green 33%) */
.cat-repos-status-card {
  padding: 20px 22px;
  border-radius: 10px;
  background: var(--nt-green-soft);
  border: 1.5px solid color-mix(in srgb, var(--nt-green) 33%, transparent);
}
.cat-repos-status-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.cat-repos-status-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.cat-repos-status-meta {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-faint);
  margin-top: 3px;
  letter-spacing: .04em;
}
/* Stats grid LEAD TIME | PUNTO DE REORDEN */
.cat-repos-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cat-repos-stat-label {
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 5px;
}
.cat-repos-stat-value {
  font-family: var(--ui-mono);
  font-size: 22px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.cat-repos-stat-value.is-cyan {
  color: var(--nt-cyan);
}
.cat-repos-stat-unit {
  font-size: 13px;
  color: var(--nt-mute);
  font-weight: 500;
}
.cat-repos-stat-sub {
  font-family: var(--ui-mono);
  font-size: 10.5px;
  color: var(--nt-dim);
  margin-top: 6px;
  letter-spacing: .04em;
}
/* Embalaje card — F24-view */
.cat-repos-embalaje {
  padding: 14px 18px;
  background: var(--nt-surface2);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
}
.cat-repos-embalaje-row {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.cat-repos-embalaje-label {
  font-family: var(--ui-mono);
  font-size: 10px;
  color: var(--nt-dim);
  letter-spacing: .06em;
}
.cat-repos-embalaje-value {
  font-family: var(--ui-mono);
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  margin-top: 2px;
}
.cat-repos-embalaje-value.is-cyan {
  color: var(--nt-cyan);
}
/* Timeline diagram — F18 */
.cat-repos-timeline {
  background: var(--nt-surface2);
  border: 1px solid var(--nt-line3);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-repos-timeline-bar {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 32px;
  position: relative;
}
.cat-repos-timeline-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-mono);
  font-weight: 700;
}
.cat-repos-timeline-total {
  font-family: var(--ui-mono);
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  margin-left: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Catálogo · Reposición tipo cards (C.2.d.2 — F21, 1:1 canon
   catalogo.jsx:899-916). Radio oculto dentro de <label> clickeable
   (decisión a). Selector plano sin prefijo #sec-catalogo.
   ═══════════════════════════════════════════════════════════════════════ */
.cat-repos-tipo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.cat-repos-tipo-card {
  position: relative;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1.5px solid var(--nt-line3);
  cursor: pointer;
}
.cat-repos-tipo-card.is-active {
  background: var(--nt-green-soft);
  border-color: var(--nt-green);
}
.cat-repos-tipo-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cat-repos-tipo-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--nt-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-repos-tipo-card.is-active .cat-repos-tipo-card-label {
  color: #fff;
}
.cat-repos-tipo-card-desc {
  font-size: 10.5px;
  color: var(--nt-mute);
  margin-top: 3px;
  font-family: var(--ui-mono);
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════
   Inventario · Modales (I.6.b) — infraestructura reutilizable 3 modales
   Selector PLANO obligatorio: los modales montan en document.body
   (lección C.2.c.1.1). Valores canon byte-por-byte inventario.jsx:691-797.
   ═══════════════════════════════════════════════════════════════════ */
.inv-modal-label {
  display: block;
  font-family: var(--ui-mono);
  font-size: 9px;
  color: var(--nt-dim);
  letter-spacing: .14em;
  font-weight: 700;
  margin-bottom: 6px;
}
.inv-modal-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: #000;
  border: 1px solid var(--nt-line2);
  border-radius: 6px;
  color: var(--nt-text);
  font-family: var(--ui-mono);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.inv-modal-input:focus {
  outline: none;
  border-color: var(--nt-green);
  box-shadow: 0 0 0 3px var(--nt-green-soft);
}
.inv-modal-input--xl {
  height: 48px;
  padding: 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.inv-modal-pill {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--nt-line3);
  border-radius: 5px;
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--nt-mute);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.inv-modal-pill.is-active {
  background: var(--nt-green-soft);
  border-color: var(--nt-line);
  color: var(--nt-green);
}

/* ═══════════════════════════════════════════════════════════════════
   App Header · Mobile Sheets (H.5) — dropdowns notif + user → bottom sheets
   Approach: CSS-only, reuse .visible (0 JS). Backdrop via box-shadow 100vmax.
   TODO bajo @media ≤768 → desktop dropdowns (H.3) intactos.
   Canon: app-header-mobile.jsx MNotifSheet / MUserSheet.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Container → bottom sheet (oculto vía transform, NO display:none para animar) */
  #notif-dropdown.app-dropdown,
  #user-dropdown.app-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-top: 1px solid var(--nt-line) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    max-height: 88vh !important;
    overflow-y: auto;
    display: block !important;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 -20px 60px rgba(0,0,0,.6), 0 0 40px var(--nt-green-glow);
    pointer-events: none;
    z-index: 1100;
  }
  /* Visible → slide-up + backdrop dim (box-shadow 100vmax spread) */
  #notif-dropdown.app-dropdown.visible,
  #user-dropdown.app-dropdown.visible {
    transform: translateY(0);
    pointer-events: auto;
    box-shadow: 0 -20px 60px rgba(0,0,0,.6), 0 0 40px var(--nt-green-glow), 0 0 0 100vmax rgba(0,0,0,.6);
  }
  /* Handle bar decorativo (::before) */
  #notif-dropdown.app-dropdown::before,
  #user-dropdown.app-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--nt-line2);
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  /* Footer notif: respiro inferior (safe area) */
  #notif-dropdown .app-dropdown-footer { padding-bottom: 24px; }
  /* User: respiro inferior en el último item (logout) */
  #user-dropdown .dropdown-item:last-child { padding-bottom: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   VENTAS · Shell + Header (V.1) — canon design-reference/ventas
   ════════════════════════════════════════════════════════════════ */
#sec-ventas .vt-header { align-items: flex-end; }
#sec-ventas .vt-kicker {
  font-family: var(--ui-mono);
  font-size: 11px; color: var(--nt-green);
  letter-spacing: .20em; font-weight: 700;
}
#sec-ventas .vt-header-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;
}
/* Toggle de período (HOY/7D/30D/MTD/YTD) */
#sec-ventas .vt-period-toggle {
  display: inline-flex; align-items: center;
  background: #000; border: 1px solid var(--nt-line2);
  border-radius: 6px; overflow: hidden;
}
#sec-ventas .vt-period-btn {
  padding: 9px 14px; background: transparent; border: none;
  border-right: 1px solid var(--nt-line2);
  color: var(--nt-mute); font-family: var(--ui-mono);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  letter-spacing: .05em;
}
#sec-ventas .vt-period-btn:last-child { border-right: none; }
#sec-ventas .vt-period-btn.active {
  background: var(--nt-green-soft); color: var(--nt-green);
}
#sec-ventas .vt-period-btn:disabled { color: var(--nt-dim); cursor: not-allowed; opacity: .55; }
#sec-ventas .vt-period-btn:not(:disabled):not(.active):hover { color: var(--nt-text); }
/* Selects del header skin canon */
#sec-ventas .vt-select {
  padding: 9px 12px; min-height: 38px; box-sizing: border-box;
  background: #000; border: 1px solid var(--nt-line2);
  border-radius: 6px; color: var(--nt-text);
  font-family: var(--ui-mono); font-size: 11.5px; cursor: pointer;
}
#sec-ventas .vt-select:focus { outline: none; border-color: var(--nt-line); }

/* KPIs canon (V.2a) — 5 cards StatChip + delta vs período anterior */
#sec-ventas #metrics-ventas {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
#sec-ventas .vt-kpi {
  padding: 18px 20px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 10px;
}
#sec-ventas .vt-kpi-label {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim);
  letter-spacing: .16em; font-weight: 700; margin-bottom: 12px;
}
#sec-ventas .vt-kpi-value {
  font-size: 26px; font-weight: 900; letter-spacing: -.03em;
  color: var(--nt-text); line-height: 1; margin-bottom: 8px;
}
#sec-ventas .vt-kpi-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ui-mono); font-size: 11px;
}
#sec-ventas .vt-kpi-sub { color: var(--nt-mute); }
#sec-ventas .vt-kpi-delta { font-weight: 700; }
#sec-ventas .vt-kpi-delta.up { color: var(--nt-green); }
#sec-ventas .vt-kpi-delta.down { color: var(--nt-red); }
@media (max-width: 1100px) {
  #sec-ventas #metrics-ventas { grid-template-columns: repeat(2, 1fr); }
}
/* Sparklines KPI (V.2b) — MiniBars canon */
#sec-ventas .vt-kpi-spark {
  display: flex; align-items: flex-end; gap: 2px; height: 44px; padding-top: 8px;
}
#sec-ventas .vt-bar {
  flex: 1; background: var(--nt-green-soft); border: 1px solid var(--nt-line2);
}
#sec-ventas .vt-bar.last {
  background: var(--nt-green); border-color: var(--nt-green);
  box-shadow: 0 0 8px var(--nt-green-glow);
}

/* Breakdown por plataforma (V.3) — 5 PlatformCards canon */
#sec-ventas .vt-breakdown-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .18em; font-weight: 700; margin: 24px 0 14px;
}
#sec-ventas .vt-breakdown {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 28px;
}
#sec-ventas .vt-plat-card {
  padding: 16px 18px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
}
#sec-ventas .vt-plat-top { display: flex; justify-content: space-between; align-items: flex-start; }
#sec-ventas .vt-plat-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  border: 1px solid; font-family: var(--ui-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; background: rgba(255,255,255,.02);
}
#sec-ventas .vt-plat-delta { font-family: var(--ui-mono); font-size: 10px; font-weight: 700; }
#sec-ventas .vt-plat-delta.up { color: var(--nt-green); }
#sec-ventas .vt-plat-delta.down { color: var(--nt-red); }
#sec-ventas .vt-plat-ing {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  color: var(--nt-text); line-height: 1;
}
#sec-ventas .vt-plat-sub { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-mute); margin-top: -6px; }
#sec-ventas .vt-plat-foot {
  padding-top: 8px; border-top: 1px dashed var(--nt-line2);
  display: flex; justify-content: space-between;
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-dim);
}
#sec-ventas .vt-plat-com { color: var(--nt-red); font-weight: 600; }
@media (max-width: 1100px) {
  #sec-ventas .vt-breakdown { grid-template-columns: repeat(2, 1fr); }
}

/* Filter bar de tabla (V.4) — kicker + Marca/ROI/Modalidad + búsqueda */
#sec-ventas .vt-filterbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
#sec-ventas .vt-table-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .18em; font-weight: 700; margin-right: auto;
}
#sec-ventas .vt-fsel { min-height: 34px; padding: 7px 10px; }
#sec-ventas .vt-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; background: #000; border: 1px solid var(--nt-line2);
  border-radius: 6px; color: var(--nt-mute); min-width: 220px;
}
#sec-ventas .vt-search svg { flex-shrink: 0; }
#sec-ventas .vt-search input {
  flex: 1; min-width: 0; padding: 8px 0; background: transparent; border: none;
  color: var(--nt-text); font-family: var(--ui-mono); font-size: 11.5px;
}
#sec-ventas .vt-search input:focus { outline: none; }
#sec-ventas .vt-search input::placeholder { color: var(--nt-dim); }
#sec-ventas .vt-search .busq-count {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); white-space: nowrap;
}

/* Tabla SKU (V.5) — skin canon + modo simple (switch Ver todo) */
#sec-ventas .vt-tabla thead th {
  font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  background: rgba(255,255,255,.015);
}
#sec-ventas .vt-tabla tbody td { font-size: 11.5px; }
#sec-ventas .vt-tabla tbody td.num { font-family: var(--ui-mono); font-size: 11px; }
#sec-ventas .vt-tabla tbody td:first-child { color: var(--nt-cyan); font-weight: 600; }
#sec-ventas .vt-td-marca {
  font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim);
  letter-spacing: .06em; font-weight: 600; text-transform: uppercase;
}
#sec-ventas .vt-row-danger { background: rgba(255,61,90,.04); }
/* Modo simple: oculta columnas secundarias (Mes/Precio Real/Uds Netas/Bonif/Cofin/Órd Pauta) */
#sec-ventas .vt-tabla.vt-simple .vt-cx { display: none; }
#sec-ventas .vt-vertodo-txt {
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-mute); letter-spacing: .05em;
}

/* Ficha de venta (V.6) — selector PLANO (modal en document.body) */
.vt-ficha { background: var(--nt-surface); border: 1px solid var(--nt-line); box-shadow: 0 0 80px var(--nt-green-glow); }
.vt-ficha-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 24px 0; }
.vt-ficha-kicker {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green);
  letter-spacing: .18em; font-weight: 700; margin-bottom: 8px;
}
.vt-ficha-titlerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.vt-ficha-id { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--nt-text); line-height: 1.1; }
.vt-ficha-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  border: 1px solid; font-family: var(--ui-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; background: rgba(255,255,255,.02);
}
.vt-pill-amber { color: var(--nt-amber); border-color: var(--nt-amber); }
.vt-ficha-sub { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-mute); }
.vt-ficha-close { font-size: 1.1rem; color: var(--nt-mute); border: 1px solid var(--nt-line2); border-radius: 6px; width: 32px; height: 32px; }
.vt-ficha-close:hover { color: var(--nt-red); border-color: var(--nt-red); }
.vt-ficha-prod {
  margin: 16px 24px 0; padding: 12px 14px; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 8px;
  display: grid; grid-template-columns: 52px 1fr; gap: 13px; align-items: center;
}
.vt-ficha-prodicon {
  width: 52px; height: 52px; border-radius: 8px; background: var(--nt-green-soft);
  border: 1px solid var(--nt-line2); display: flex; align-items: center; justify-content: center;
  font-family: var(--ui-mono); font-size: 16px; color: var(--nt-green); font-weight: 700;
}
.vt-ficha-prodsku { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-cyan); font-weight: 700; margin-bottom: 3px; }
.vt-ficha-prodname { font-size: 14.5px; font-weight: 700; color: var(--nt-text); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ficha-seclabel {
  margin: 18px 24px 8px; font-family: var(--ui-mono); font-size: 10px;
  color: var(--nt-green); letter-spacing: .16em; font-weight: 700;
}
.vt-ficha-bd { margin: 0 24px; background: #000; border: 1px solid var(--nt-line2); border-radius: 8px; overflow: hidden; }
.vt-bd-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 14px;
  align-items: center; border-top: 1px solid rgba(229,229,229,.04); font-size: 12.5px;
}
.vt-bd-row:first-child { border-top: none; }
.vt-bd-row.final { border-top: 1px solid var(--nt-green); background: var(--nt-green-soft); }
.vt-bd-label { color: var(--nt-mute); font-weight: 500; }
.vt-bd-row.final .vt-bd-label { color: var(--nt-text); font-weight: 700; }
.vt-bd-det { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); margin-top: 2px; }
.vt-bd-val { font-family: var(--ui-mono); font-size: 12.5px; font-weight: 600; color: var(--nt-text); text-align: right; }
.vt-bd-val.red { color: var(--nt-red); }
.vt-bd-val.green { color: var(--nt-green); }
.vt-bd-val.big { font-size: 15px; font-weight: 800; }
.vt-bd-val.glow { text-shadow: 0 0 12px var(--nt-green-glow); }
.vt-ficha-info4 { margin: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vt-infobox { padding: 9px 12px; background: #000; border: 1px solid var(--nt-line2); border-radius: 6px; }
.vt-infobox-label { font-family: var(--ui-mono); font-size: 9px; color: var(--nt-dim); letter-spacing: .10em; font-weight: 600; margin-bottom: 4px; }
.vt-infobox-val { font-family: var(--ui-mono); font-size: 13px; color: var(--nt-text); font-weight: 700; }
.vt-ficha-actions { padding: 16px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--nt-line2); margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════
   POSTVENTA · Shell + KPIs + Tabs (PV.1) — canon design-reference/postventa
   ════════════════════════════════════════════════════════════════ */
#sec-postventa .pv-kicker {
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-green);
  letter-spacing: .16em; font-weight: 700; margin-bottom: 6px;
}
#sec-postventa .pv-banner-auto {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px;
  background: rgba(34,211,238,.04); border: 1px solid color-mix(in srgb, var(--nt-cyan) 19%, transparent);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--nt-text); line-height: 1.5;
}
#sec-postventa .pv-banner-tag {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-cyan);
  font-weight: 700; letter-spacing: .10em; flex-shrink: 0;
}
#sec-postventa .pv-filterbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
#sec-postventa .pv-flabel {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  display: flex; flex-direction: column; gap: 4px;
}
#sec-postventa .pv-fsel {
  padding: 8px 12px; min-height: 38px; border: 1px solid var(--nt-line2);
  border-radius: 6px; background: #000; color: var(--nt-text);
  font-family: var(--ui-mono); font-size: 11.5px; cursor: pointer;
}
#sec-postventa .pv-search {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  background: #000; border: 1px solid var(--nt-line2); border-radius: 6px;
  color: var(--nt-mute); min-width: 240px;
}
#sec-postventa .pv-search input {
  flex: 1; min-width: 0; padding: 9px 0; background: transparent; border: none;
  color: var(--nt-text); font-family: var(--ui-mono); font-size: 11.5px;
}
#sec-postventa .pv-search input:focus { outline: none; }
#sec-postventa .pv-search input::placeholder { color: var(--nt-dim); }
#sec-postventa .pv-search .busq-count { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); white-space: nowrap; }
/* KPIs canon color-coded */
#sec-postventa #metrics-pv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
#sec-postventa .pv-kpi {
  padding: 14px 16px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-left: 2px solid var(--pvk-c, var(--nt-green));
  border-radius: 8px;
}
#sec-postventa .pv-kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#sec-postventa .pv-kpi-label {
  font-family: var(--ui-mono); font-size: 9.5px; color: var(--pvk-c, var(--nt-dim));
  letter-spacing: .14em; font-weight: 700;
}
#sec-postventa .pv-kpi-icon {
  font-family: var(--ui-mono); font-size: 9px; color: var(--nt-dim);
  padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.03); letter-spacing: .06em;
}
#sec-postventa .pv-kpi-value { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--nt-text); line-height: 1; }
#sec-postventa .pv-kpi-sub { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-mute); margin-top: 5px; }
/* Tabs estado canon */
#sec-postventa .pv-tabs { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
#sec-postventa .pv-tab {
  padding: 7px 12px; border-radius: 5px; font-size: 12px; font-weight: 500;
  color: var(--pvt-c, var(--nt-mute)); background: transparent;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
#sec-postventa .pv-tab.activa {
  font-weight: 700; color: var(--nt-text);
  background: color-mix(in srgb, var(--pvt-c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pvt-c) 33%, transparent);
  box-shadow: inset 0 -2px 0 var(--pvt-c);
}
#sec-postventa .pv-tab-n {
  font-family: var(--ui-mono); font-size: 10px; font-weight: 700;
  color: var(--nt-dim); padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.03);
}
#sec-postventa .pv-tab.activa .pv-tab-n {
  color: var(--pvt-c); background: color-mix(in srgb, var(--pvt-c) 10%, transparent);
}
@media (max-width: 1100px) {
  #sec-postventa #metrics-pv { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════════════════════════════════════════════════
   FLUJO DE CAJA · Shell + Cuentas (FL.1) — canon design-reference/flujo
   ════════════════════════════════════════════════════════════════ */
#sec-flujo .fl-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .20em; font-weight: 700;
}
#sec-flujo .fl-year-sel {
  display: inline-flex; align-items: center; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 6px; overflow: hidden;
}
#sec-flujo .fl-year-sel button {
  padding: 8px 11px; background: transparent; border: none;
  color: var(--nt-mute); cursor: pointer; font-size: 14px; line-height: 1;
}
#sec-flujo .fl-year-sel button:hover { color: var(--nt-green); }
#sec-flujo .fl-year-sel #fl-year-prev { border-right: 1px solid var(--nt-line2); }
#sec-flujo .fl-year-sel #fl-year-next { border-left: 1px solid var(--nt-line2); }
#sec-flujo #fl-year-label {
  padding: 8px 16px; color: var(--nt-text);
  font-family: var(--ui-mono); font-size: 12px; font-weight: 700; letter-spacing: .05em;
}
#sec-flujo .fl-saldo-lbl {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
#sec-flujo .fl-saldo-inp {
  width: 130px; padding: 8px 12px; border: 1px solid var(--nt-line2);
  border-radius: 6px; background: #000; color: var(--nt-text);
  font-family: var(--ui-mono); font-size: 12px;
}
#sec-flujo .fl-seclabel { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
#sec-flujo .fl-seclabel-txt { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; }
#sec-flujo .fl-seclabel-action { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); letter-spacing: .06em; }
/* AccountCards canon */
#sec-flujo .fl-acct {
  padding: 18px 20px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 10px;
}
#sec-flujo .fl-acct-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
#sec-flujo .fl-acct-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .14em; font-weight: 700; margin-bottom: 4px; }
#sec-flujo .fl-acct-kind { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); }
#sec-flujo .fl-acct-chip {
  font-family: var(--ui-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--nt-green); padding: 2px 7px; border-radius: 3px; background: var(--nt-green-soft);
}
#sec-flujo .fl-acct-chip.neg { color: var(--nt-red); background: color-mix(in srgb, var(--nt-red) 8%, transparent); }
#sec-flujo .fl-acct-amt { font-size: 22px; font-weight: 900; letter-spacing: -.025em; color: var(--nt-text); line-height: 1; margin-bottom: 10px; }
#sec-flujo .fl-acct-amt.neg { color: var(--nt-red); }
#sec-flujo .fl-acct-amt.empty { font-size: 13px; font-weight: 600; color: var(--nt-dim); }
#sec-flujo .fl-acct-usd { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); margin: -4px 0 10px; }
#sec-flujo .fl-acct-subs { padding: 10px 12px; background: #000; border-radius: 6px; border: 1px solid var(--nt-line2); margin-bottom: 10px; }
#sec-flujo .fl-sub-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--ui-mono); font-size: 11px; }
#sec-flujo .fl-sub-row + .fl-sub-row { border-top: 1px dashed rgba(229,229,229,.05); }
#sec-flujo .fl-acct-foot {
  padding-top: 10px; border-top: 1px dashed var(--nt-line2);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-dim);
}
#sec-flujo .fl-microbtn {
  padding: 4px 9px; border-radius: 4px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-mute);
  font-family: var(--ui-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
#sec-flujo .fl-microbtn:hover { color: var(--nt-green); border-color: var(--nt-green); }
/* MonthCards canon (FL.2) */
#sec-flujo .fl-mes {
  background: var(--nt-surface); border: 1px solid var(--nt-line2);
  border-radius: 10px; overflow: hidden; cursor: pointer; transition: .15s;
}
#sec-flujo .fl-mes:hover { transform: translateY(-2px); }
#sec-flujo .fl-mes.actual { border-color: var(--nt-green); box-shadow: 0 0 24px var(--nt-green-glow); }
#sec-flujo .fl-mes.alerta { border-color: var(--nt-red); }
#sec-flujo .fl-mes-head {
  padding: 11px 14px; border-bottom: 1px solid var(--nt-line2);
  background: rgba(255,255,255,.015);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#sec-flujo .fl-mes-head.actual { background: rgba(163,255,18,.05); }
#sec-flujo .fl-mes-head-l { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#sec-flujo .fl-mes-name { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); letter-spacing: .12em; font-weight: 700; }
#sec-flujo .fl-mes-name.actual { color: var(--nt-green); }
#sec-flujo .fl-mtag { font-family: var(--ui-mono); font-size: 9px; letter-spacing: .12em; font-weight: 700; }
#sec-flujo .fl-mtag.pill { padding: 1px 5px; border-radius: 3px; }
#sec-flujo .fl-mes-saldo { font-family: var(--ui-mono); font-size: 13px; font-weight: 800; white-space: nowrap; }
#sec-flujo .fl-mes-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; }
#sec-flujo .fl-mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--ui-mono); font-size: 11px; }
#sec-flujo .fl-mrow-lbl { color: var(--nt-mute); display: inline-flex; gap: 6px; align-items: baseline; }
#sec-flujo .fl-mbadge { font-size: 8.5px; letter-spacing: .12em; font-weight: 700; padding: 1px 4px; border-radius: 2px; line-height: 1.2; }
#sec-flujo .fl-mes-foot {
  padding: 8px 14px; background: rgba(255,255,255,.02);
  border-top: 1px solid var(--nt-line2);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ui-mono); font-size: 10.5px;
}
#sec-flujo .fl-mes-desglose { color: var(--nt-dim); letter-spacing: .06em; }
/* Resumen anual canon (FL.2) */
#sec-flujo .fl-resumen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
#sec-flujo .fl-rcard { padding: 16px 18px; background: var(--nt-surface); border: 1px solid var(--nt-line2); border-radius: 10px; }
#sec-flujo .fl-rcard-l { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .16em; font-weight: 700; margin-bottom: 10px; }
#sec-flujo .fl-rcard-v { font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; }
#sec-flujo .fl-rcard-s { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-mute); }
@media (max-width: 1100px) {
  #sec-flujo .fl-resumen-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tabla canon (PV.2) */
#sec-postventa .pv-tabla thead th {
  font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  background: rgba(255,255,255,.015);
}
#sec-postventa .pv-tabla td { border-bottom: 1px solid rgba(229,229,229,.04); }
#sec-postventa .pv-tabla tbody tr:hover { background: rgba(255,255,255,.02); }

/* ════════════════════════════════════════════════════════════════════════
   ── Balance General · Sprint BG (canon balance-screen.jsx) ──
   BG.1: Shell + Header (kicker + period group ‹› + botones) + tabs underline
   ════════════════════════════════════════════════════════════════════════ */
#sec-balance .bal-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .2em; font-weight: 700;
}
#sec-balance .bal-ctrlbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#sec-balance .bal-periodgrp {
  display: inline-flex; align-items: center; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 6px; overflow: hidden;
}
#sec-balance .bal-periodgrp select {
  height: 36px; background: transparent; border: none; border-right: 1px solid var(--nt-line2);
  color: var(--nt-text); font-family: var(--ui-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; padding: 0 10px; cursor: pointer; outline: none; border-radius: 0;
}
#sec-balance .bal-periodgrp select option { background: #0A0A0A; color: var(--nt-text); }
#sec-balance .bal-arrowbtn {
  height: 36px; padding: 0 10px; background: transparent; border: none;
  color: var(--nt-mute); cursor: pointer; display: flex; align-items: center;
}
#sec-balance .bal-arrowbtn:hover { color: var(--nt-green); }
#sec-balance .bal-arrowbtn + .bal-arrowbtn { border-left: 1px solid var(--nt-line2); }
#sec-balance .bal-btn {
  padding: 10px 16px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-text);
  font-weight: 600; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#sec-balance .bal-btn:hover { border-color: var(--nt-line); }
#sec-balance .bal-btn-primary {
  background: var(--nt-green); color: #000; border: 1px solid var(--nt-green);
  font-weight: 700; box-shadow: 0 0 24px var(--nt-green-glow);
}
#sec-balance .bal-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Tabs underline canon (patrón IM.1, override del pill global) */
#sec-balance #bal-tabs { gap: 0 !important; border-bottom: 1px solid var(--nt-line2) !important; }
#sec-balance #bal-tabs .subtab {
  padding: 12px 22px; background: transparent; border: none;
  border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  font-family: var(--ui-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--nt-mute);
}
#sec-balance #bal-tabs .subtab:hover { background: transparent; color: var(--nt-text); }
#sec-balance #bal-tabs .subtab.active {
  color: var(--nt-green); background: transparent; border: none;
  border-bottom: 2px solid var(--nt-green); box-shadow: none; font-weight: 700;
}

/* ── Balance · BG.2 Vista General canon (banner + ratios + statement 2-col) ── */
#sec-balance .bal-banner-ok {
  padding: 12px 18px; background: var(--nt-green-soft);
  border: 1px solid rgba(163,255,18,.30); border-radius: 8px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ui-mono); font-size: 12px; color: var(--nt-green); letter-spacing: .04em;
}
#sec-balance .bal-banner-err {
  padding: 12px 18px; background: color-mix(in srgb, var(--nt-red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-red) 30%, transparent); border-radius: 8px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ui-mono); font-size: 12px; color: var(--nt-red); letter-spacing: .04em;
}
#sec-balance .bal-banner-warn {
  padding: 10px 14px; background: color-mix(in srgb, var(--nt-amber) 8%, transparent);
  border-left: 3px solid var(--nt-amber); border-radius: 6px; margin-bottom: 16px;
  font-size: 0.78rem; color: var(--nt-mute);
}
#sec-balance .bal-seclabel {
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-green);
  letter-spacing: .18em; font-weight: 700; margin-bottom: 14px;
}
#sec-balance .bal-ratios { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1280px) { #sec-balance .bal-ratios { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); } }
#sec-balance .bal-ratio {
  padding: 20px 22px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 10px;
  position: relative; overflow: hidden;
}
#sec-balance .bal-ratio-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: .7; }
#sec-balance .bal-ratio-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 8px; }
#sec-balance .bal-ratio-label { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .16em; font-weight: 700; }
#sec-balance .bal-evalchip {
  font-family: var(--ui-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
#sec-balance .bal-ratio-value { font-size: 32px; font-weight: 900; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; white-space: nowrap; }
#sec-balance .bal-ratio-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--ui-mono); font-size: 10.5px; gap: 8px; }
#sec-balance .bal-sheet2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#sec-balance .bal-sheet { background: var(--nt-surface); border: 1px solid var(--nt-line2); border-radius: 10px; overflow: hidden; }
#sec-balance .bal-sheet-head { padding: 16px 22px; border-bottom: 1px solid var(--nt-line2); display: flex; justify-content: space-between; align-items: baseline; }
#sec-balance .bal-sheet-title { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; }
#sec-balance .bal-sheet-sub { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); }
#sec-balance .bal-blkhdr {
  padding: 12px 18px; font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green);
  letter-spacing: .16em; font-weight: 700; background: rgba(163,255,18,.04);
  border-top: 1px solid rgba(163,255,18,.12);
}
#sec-balance .bal-line {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 10px 18px; border-top: 1px solid var(--nt-line3); font-size: 13px;
}
#sec-balance .bal-line.ind { padding-left: 36px; }
#sec-balance .bal-line-lbl { color: var(--nt-text); font-weight: 500; }
#sec-balance .bal-line-sub { font-size: 10.5px; color: var(--nt-dim); margin-top: 2px; font-family: var(--ui-mono); }
#sec-balance .bal-line-val { font-family: var(--ui-mono); font-size: 13px; font-weight: 600; color: var(--nt-text); white-space: nowrap; }
#sec-balance .bal-subtotal {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 12px 18px; background: rgba(229,229,229,.025);
  border-top: 1px solid var(--nt-line2); font-size: 13.5px;
}
#sec-balance .bal-subtotal > div:first-child { color: var(--nt-text); font-weight: 700; letter-spacing: -.005em; }
#sec-balance .bal-subtotal .bal-line-val { font-size: 13.5px; font-weight: 700; }
#sec-balance .bal-total {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 16px 18px; background: var(--nt-green-soft); border-top: 1px solid var(--nt-green);
}
#sec-balance .bal-total-lbl { color: var(--nt-green); font-weight: 800; letter-spacing: .02em; font-size: 14px; }
#sec-balance .bal-total-val {
  font-family: var(--ui-mono); font-size: 16px; font-weight: 800; color: var(--nt-green);
  text-shadow: 0 0 16px var(--nt-green-glow); white-space: nowrap;
}
@media (max-width: 1100px) { #sec-balance .bal-sheet2col { grid-template-columns: 1fr; } }

/* ── Balance · BG.3 Tabs CRUD canon (strip por tipo + tabla + IconBtns) ── */
#sec-balance .bal-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1280px) { #sec-balance .bal-strip { grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); } }
#sec-balance .bal-stripcard { padding: 14px 16px; background: var(--nt-surface); border: 1px solid var(--nt-line2); border-radius: 8px; }
#sec-balance .bal-stripcard-l { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .16em; font-weight: 700; margin-bottom: 8px; white-space: nowrap; }
#sec-balance .bal-stripcard-v { font-family: var(--ui-mono); font-size: 18px; font-weight: 700; color: var(--nt-text); white-space: nowrap; }
#sec-balance .bal-crud { background: var(--nt-surface); border: 1px solid var(--nt-line2); border-radius: 10px; overflow: hidden; }
#sec-balance .bal-crud table { width: 100%; border-collapse: collapse; font-size: 13px; }
#sec-balance .bal-crud thead th {
  padding: 14px 16px; background: var(--table-alt); border-bottom: 1px solid var(--nt-line2);
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim);
  letter-spacing: .14em; font-weight: 700; text-transform: uppercase; text-align: left;
}
#sec-balance .bal-crud td { padding: 12px 16px; border-bottom: 1px solid var(--nt-line3); }
#sec-balance .bal-td-id { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); white-space: nowrap; }
#sec-balance .bal-td-desc { color: var(--nt-text); font-weight: 600; }
#sec-balance .bal-td-mono { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-mute); }
#sec-balance .bal-td-monto { font-family: var(--ui-mono); font-size: 13px; font-weight: 700; color: var(--nt-text); text-align: right; white-space: nowrap; }
#sec-balance .bal-td-venc { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-amber); white-space: nowrap; }
#sec-balance .bal-td-venc.none { color: var(--nt-dim); }
#sec-balance .bal-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-family: var(--ui-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
#sec-balance .bal-iconbtn {
  width: 30px; height: 30px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0;
}
#sec-balance .bal-iconbtn:hover { border-color: var(--nt-line); }
#sec-balance .bal-totalrow td { padding: 16px; background: var(--nt-green-soft); border-top: 1px solid var(--nt-green); border-bottom: none; }
#sec-balance .bal-totalrow .lbl { color: var(--nt-green); font-weight: 800; letter-spacing: .02em; }
#sec-balance .bal-totalrow td.val {
  font-family: var(--ui-mono); font-size: 15px; font-weight: 800; color: var(--nt-green);
  text-shadow: 0 0 16px var(--nt-green-glow); text-align: right; white-space: nowrap;
}

/* ── Balance · BG.4 Modales canon (body-level → selector plano, patrón L.4.b) ── */
#modal-bal-activo .modal-box, #modal-bal-pasivo .modal-box {
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 14px; box-shadow: 0 0 80px var(--nt-green-glow);
}
#modal-bal-activo .modal-header, #modal-bal-pasivo .modal-header {
  border-bottom: 1px solid var(--nt-line2); align-items: flex-start;
}
.bal-m-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; margin-bottom: 6px; }
.bal-m-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin: 0; line-height: 1.1; color: var(--nt-text); }
.bal-m-sub { font-size: 11.5px; color: var(--nt-mute); margin-top: 4px; font-family: var(--ui-mono); }
.bal-m-close {
  width: 32px; height: 32px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-mute); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui-mono); font-size: 14px; flex-shrink: 0;
}
.bal-m-close:hover { color: var(--nt-red); border-color: color-mix(in srgb, var(--nt-red) 35%, transparent); }
.bal-m-label {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim);
  letter-spacing: .12em; font-weight: 600; display: block; margin-bottom: 5px;
  text-transform: uppercase;
}
.bal-m-sec { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .16em; font-weight: 700; margin-bottom: 10px; }
.bal-m-cli { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim); letter-spacing: .05em; margin-right: auto; }
#modal-bal-activo .modal-footer, #modal-bal-pasivo .modal-footer { display: flex; align-items: center; border-top: 1px solid var(--nt-line2); }

/* ── Operativos · OP-R.1 Libro por mes (selector ‹ MES AÑO ›) ── */
#sec-operativos .op-periodgrp {
  display: inline-flex; align-items: center; background: #000;
  border: 1px solid var(--nt-line2); border-radius: 6px; overflow: hidden;
}
#sec-operativos .op-arrowbtn {
  height: 34px; padding: 0 10px; background: transparent; border: none;
  color: var(--nt-mute); cursor: pointer; display: flex; align-items: center;
}
#sec-operativos .op-arrowbtn:hover { color: var(--nt-green); }
#sec-operativos .op-mes-label {
  height: 34px; padding: 0 12px; background: transparent; border: none;
  border-left: 1px solid var(--nt-line2); border-right: 1px solid var(--nt-line2);
  color: var(--nt-text); font-family: var(--ui-mono); font-size: 12px;
  font-weight: 600; letter-spacing: .05em; cursor: pointer; white-space: nowrap;
}
#sec-operativos .op-mes-label.is-otro-mes { color: var(--nt-amber); }

/* ── Operativos · OP-R.4 fila Pauta AUTO (derivada de Ventas) ── */
#sec-operativos .op-row-auto td { background: color-mix(in srgb, var(--nt-cyan) 3%, transparent); }
#sec-operativos .op-auto-badge {
  font-family: var(--ui-mono); font-size: 0.62rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; letter-spacing: .06em;
  background: color-mix(in srgb, var(--nt-cyan) 12%, transparent); color: var(--nt-cyan);
}

/* ════════════════════════════════════════════════════════════════════════
   ── Gestión Financiera IA · Sprint GI (canon gestion-ia.jsx) ──
   GI.1: Header púrpura + comandos cards + input bar glow
   ════════════════════════════════════════════════════════════════════════ */
#sec-gestion-ia .gf-kicker {
  font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-purple);
  letter-spacing: .16em; font-weight: 700; margin-bottom: 6px;
}
#sec-gestion-ia .gf-claude-badge {
  font-family: var(--ui-mono); font-size: 10px; font-weight: 700; letter-spacing: .10em;
  padding: 3px 8px; border-radius: 4px; vertical-align: middle;
  background: color-mix(in srgb, var(--nt-purple) 10%, transparent);
  color: var(--nt-purple);
  border: 1px solid color-mix(in srgb, var(--nt-purple) 25%, transparent);
}
#sec-gestion-ia .gf-btn {
  padding: 9px 14px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-text);
  font-weight: 600; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#sec-gestion-ia .gf-btn:hover { border-color: var(--nt-line); }
#sec-gestion-ia .gf-seclabel {
  font-family: var(--ui-mono); font-size: 10px; color: var(--nt-purple);
  letter-spacing: .14em; font-weight: 700; margin-bottom: 10px;
}
#sec-gestion-ia .gf-cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 900px) { #sec-gestion-ia .gf-cmds { grid-template-columns: repeat(2, 1fr); } }
#sec-gestion-ia .gf-cmd {
  padding: 14px; border-radius: 9px; background: var(--nt-surface);
  border: 1px solid var(--nt-line3); cursor: pointer; position: relative;
}
#sec-gestion-ia .gf-cmd:hover { border-color: color-mix(in srgb, var(--nt-purple) 40%, transparent); }
#sec-gestion-ia .gf-cmd.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--nt-purple) 10%, transparent), transparent);
  border-color: var(--nt-purple);
  box-shadow: 0 0 18px color-mix(in srgb, var(--nt-purple) 18%, transparent);
}
#sec-gestion-ia .gf-cmd-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#sec-gestion-ia .gf-cmd-ico { font-size: 18px; line-height: 1; }
#sec-gestion-ia .gf-cmd-label { font-size: 13px; font-weight: 700; color: var(--nt-text); }
#sec-gestion-ia .gf-cmd.active .gf-cmd-label { color: #fff; }
#sec-gestion-ia .gf-cmd-desc { font-size: 11px; color: var(--nt-mute); line-height: 1.4; }
#sec-gestion-ia .gf-cmd-dot {
  position: absolute; top: 8px; right: 10px; display: none;
  font-family: var(--ui-mono); font-size: 9px; color: var(--nt-purple); font-weight: 700;
}
#sec-gestion-ia .gf-cmd.active .gf-cmd-dot { display: block; }
#sec-gestion-ia .gf-inputwrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
#sec-gestion-ia .gf-period-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#sec-gestion-ia .gf-period-lbl { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .10em; font-weight: 700; }
#sec-gestion-ia .gf-select {
  height: 32px; background: #000; border: 1px solid var(--nt-line2); border-radius: 5px;
  color: var(--nt-text); font-family: var(--ui-mono); font-size: 12px; font-weight: 600;
  padding: 0 10px; cursor: pointer; outline: none;
}
#sec-gestion-ia .gf-api-status { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .06em; }
#sec-gestion-ia .gf-api-status.is-off { color: var(--nt-amber); cursor: pointer; }
#sec-gestion-ia .gf-prompt-row { display: flex; gap: 8px; }
#sec-gestion-ia .gf-prompt-box {
  flex: 1; height: 48px; padding: 0 16px; background: #000;
  border: 1.5px solid var(--nt-purple); border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt-purple) 10%, transparent),
              0 0 18px color-mix(in srgb, var(--nt-purple) 16%, transparent);
}
#sec-gestion-ia .gf-prompt-star { color: var(--nt-purple); font-size: 18px; line-height: 1; }
#sec-gestion-ia .gf-prompt-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 14px; font-weight: 500;
}
#sec-gestion-ia .gf-prompt-box input::placeholder { color: var(--nt-dim); }
#sec-gestion-ia .gf-analizar {
  padding: 0 22px; background: var(--nt-purple); color: #000;
  border: none; border-radius: 8px; font-size: 13.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 18px color-mix(in srgb, var(--nt-purple) 30%, transparent);
  white-space: nowrap;
}
#sec-gestion-ia .gf-analizar:hover { filter: brightness(1.1); }

/* ── Gestión IA · GI.2 Loading + Result card canon ── */
#sec-gestion-ia .gf-loading {
  padding: 30px 22px; border-radius: 10px; background: var(--nt-surface);
  border: 1px solid color-mix(in srgb, var(--nt-purple) 20%, transparent);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
#sec-gestion-ia .gf-spinner {
  width: 50px; height: 50px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--nt-purple) 15%, transparent);
  border-top-color: var(--nt-purple);
  animation: gf-spin 0.8s linear infinite;
}
@keyframes gf-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#sec-gestion-ia .gf-loading-kicker { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-purple); letter-spacing: .14em; font-weight: 700; text-align: center; }
#sec-gestion-ia .gf-loading-txt { font-size: 13px; color: var(--nt-text); margin-top: 4px; text-align: center; }
#sec-gestion-ia .gf-loading-fuentes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); }
#sec-gestion-ia .gf-loading-fuentes .is-on { color: var(--nt-purple); font-weight: 700; }
#sec-gestion-ia .gf-result {
  background: var(--nt-surface);
  border: 1px solid color-mix(in srgb, var(--nt-purple) 20%, transparent);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 32px color-mix(in srgb, var(--nt-purple) 8%, transparent);
}
#sec-gestion-ia .gf-r-head {
  padding: 14px 18px; border-bottom: 1px solid var(--nt-line3);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nt-purple) 4%, transparent), transparent);
}
#sec-gestion-ia .gf-r-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: var(--nt-purple); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px color-mix(in srgb, var(--nt-purple) 40%, transparent);
}
#sec-gestion-ia .gf-r-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-purple); letter-spacing: .14em; font-weight: 700; }
#sec-gestion-ia .gf-r-tipo { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; }
#sec-gestion-ia .gf-r-meta { display: flex; gap: 10px; font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .06em; flex-wrap: wrap; }
#sec-gestion-ia .gf-r-stats {
  padding: 14px 18px; border-bottom: 1px solid var(--nt-line3);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 900px) { #sec-gestion-ia .gf-r-stats { grid-template-columns: repeat(2, 1fr); } }
#sec-gestion-ia .gf-r-stat { position: relative; }
#sec-gestion-ia .gf-r-stat + .gf-r-stat { padding-left: 14px; border-left: 1px solid var(--nt-line3); }
#sec-gestion-ia .gf-r-stat-l { font-family: var(--ui-mono); font-size: 9px; color: var(--nt-dim); letter-spacing: .12em; font-weight: 700; }
#sec-gestion-ia .gf-r-stat-v { font-family: var(--ui-mono); font-size: 18px; font-weight: 800; margin-top: 3px; line-height: 1; white-space: nowrap; }
#sec-gestion-ia .gf-r-content { padding: 20px 22px; font-size: 13px; line-height: 1.7; color: var(--nt-text); }
#sec-gestion-ia .gf-r-foot {
  padding: 14px 22px; background: var(--nt-surface2);
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-dim);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
#sec-gestion-ia .gf-r-foot:hover { color: var(--nt-mute); }
#sec-gestion-ia .gf-r-foot .gf-r-reload { color: var(--nt-purple); font-weight: 700; }
#sec-gestion-ia .gf-error {
  background: color-mix(in srgb, var(--nt-red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-red) 30%, transparent);
  border-radius: 10px; padding: 16px; color: var(--nt-red); font-size: 0.85rem;
}

/* ── Gestión IA · GI.3 Gráficas SVG inline canon (adiós Chart.js sage) ── */
#sec-gestion-ia #graficas-analisis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { #sec-gestion-ia #graficas-analisis { grid-template-columns: 1fr; } }
#sec-gestion-ia .gf-graf-card {
  padding: 14px 16px; background: var(--nt-surface2);
  border: 1px solid var(--nt-line3); border-radius: 8px; min-width: 0;
}
#sec-gestion-ia .gf-graf-t { font-family: var(--ui-mono); font-size: 9.5px; letter-spacing: .14em; font-weight: 700; margin-bottom: 10px; }
#sec-gestion-ia .gf-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; }
#sec-gestion-ia .gf-leg-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
#sec-gestion-ia .gf-leg-k { flex: 1; color: var(--nt-text); font-weight: 600; }
#sec-gestion-ia .gf-leg-pct { font-family: var(--ui-mono); font-size: 10px; font-weight: 700; }
#sec-gestion-ia .gf-spark-val { font-family: var(--ui-mono); font-size: 22px; color: #fff; font-weight: 800; }
#sec-gestion-ia .gf-spark-badge { font-family: var(--ui-mono); font-size: 11px; font-weight: 700; padding: 2px 5px; border-radius: 3px; }
#sec-gestion-ia .gf-barh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#sec-gestion-ia .gf-barh-lbl { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-text); width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-gestion-ia .gf-barh-track { flex: 1; height: 10px; background: rgba(255,255,255,.04); border-radius: 3px; overflow: hidden; }
#sec-gestion-ia .gf-barh-fill { height: 100%; border-radius: 3px; }
#sec-gestion-ia .gf-barh-val { font-family: var(--ui-mono); font-size: 10px; font-weight: 700; width: 52px; text-align: right; flex-shrink: 0; }

/* ── Gestión IA · GI.4 Historial cards canon + Auditoría Cofin NT ── */
#sec-gestion-ia .gf-hist-card {
  background: var(--nt-surface); border: 1px solid var(--nt-line3);
  border-radius: 7px; margin-bottom: 6px; overflow: hidden;
}
#sec-gestion-ia .gf-hist-head { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
#sec-gestion-ia .gf-hist-head:hover { background: rgba(255,255,255,.015); }
#sec-gestion-ia .gf-hist-ico {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: color-mix(in srgb, var(--nt-purple) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-purple) 25%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
#sec-gestion-ia .gf-hist-tipo { font-size: 12.5px; font-weight: 700; color: #fff; }
#sec-gestion-ia .gf-hist-per { font-family: var(--ui-mono); font-size: 9.5px; color: var(--nt-dim); letter-spacing: .04em; font-weight: 500; }
#sec-gestion-ia .gf-hist-resumen { font-size: 11.5px; color: var(--nt-mute); line-height: 1.4; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-gestion-ia .gf-hist-fecha { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .04em; flex-shrink: 0; }
#sec-gestion-ia .gf-hist-chev { transition: transform .2s; color: var(--nt-faint); flex-shrink: 0; }
#sec-gestion-ia .gf-hist-card.open .gf-hist-chev { transform: rotate(90deg); }
#sec-gestion-ia .gf-hist-body { display: none; padding: 4px 16px 16px; font-size: 0.85rem; line-height: 1.6; border-top: 1px solid var(--nt-line3); }
#sec-gestion-ia .gf-hist-card.open .gf-hist-body { display: block; }
#sec-gestion-ia .gf-akpi {
  background: var(--nt-surface); border: 1px solid var(--nt-line2);
  border-radius: 8px; padding: 12px 14px;
}
#sec-gestion-ia .gf-akpi-l { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .14em; font-weight: 700; }
#sec-gestion-ia .gf-akpi-v { font-family: var(--ui-mono); font-size: 1.3rem; font-weight: 700; margin-top: 4px; color: var(--nt-text); }

/* ════════════════════════════════════════════════════════════════════════
   ── Integraciones · Sprint IN (canon integraciones-screen.jsx) ──
   IN.1: Shell + KPI strip + Sincronizar todas
   ════════════════════════════════════════════════════════════════════════ */
#sec-integraciones .int-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .2em; font-weight: 700;
}
#sec-integraciones .int-btn {
  padding: 11px 18px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-text);
  font-weight: 600; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#sec-integraciones .int-btn:hover { border-color: var(--nt-line); }
#sec-integraciones .int-btn:disabled { opacity: .5; cursor: wait; }
#sec-integraciones .int-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 1100px) { #sec-integraciones .int-kpis { grid-template-columns: repeat(2, 1fr); } }
#sec-integraciones .int-kpi {
  padding: 20px 22px; background: var(--nt-surface); border: 1px solid var(--nt-line2);
  border-radius: 10px; position: relative; overflow: hidden;
}
#sec-integraciones .int-kpi-l { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .16em; font-weight: 700; margin-bottom: 14px; }
#sec-integraciones .int-kpi-v { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1; margin-bottom: 8px; white-space: nowrap; }
#sec-integraciones .int-kpi-v.is-mono { font-family: var(--ui-mono); font-size: 30px; }
#sec-integraciones .int-kpi-s { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-mute); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-integraciones .int-kpi-bar { margin-top: 12px; height: 3px; background: rgba(229,229,229,.05); border-radius: 2px; }
#sec-integraciones .int-kpi-bar > span { display: block; height: 100%; background: var(--nt-green); border-radius: 2px; box-shadow: 0 0 8px var(--nt-green-glow); }
#sec-integraciones .int-seclabel {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
}
#sec-integraciones .int-seclabel-t { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; }
#sec-integraciones .int-seclabel-s { font-size: 13px; color: var(--nt-mute); font-weight: 500; }

/* ── Integraciones · IN.2 Platform cards canon ── */
#sec-integraciones #int-grid > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { #sec-integraciones #int-grid > div { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; } }
#sec-integraciones .int-card {
  padding: 22px 24px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
#sec-integraciones .int-card.is-on { border-color: rgba(163,255,18,.18); }
#sec-integraciones .int-card.is-on::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--nt-green), transparent); opacity: .4;
}
#sec-integraciones .int-card.is-off { opacity: .7; }
#sec-integraciones .int-logo {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background: #0A0A0A; border: 1px solid var(--nt-line);
  display: flex; align-items: center; justify-content: center; padding: 8px;
  position: relative;
}
#sec-integraciones .int-logo-probe { display: none; }
#sec-integraciones .int-logo-mask {
  display: none; width: 100%; height: 100%; background: var(--nt-green);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#sec-integraciones .int-logo.con-logo .int-logo-mask { display: block; }
#sec-integraciones .int-logo.con-logo .int-logo-mono { display: none; }
#sec-integraciones .int-logo-mono { font-family: var(--ui-mono); font-weight: 800; font-size: 13px; color: var(--nt-green); letter-spacing: -.02em; }
#sec-integraciones .int-card-name { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--nt-text); margin-bottom: 4px; }
#sec-integraciones .int-card-acct { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-integraciones .int-card-desc { font-size: 11.5px; color: var(--nt-mute); line-height: 1.45; }
#sec-integraciones .int-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
#sec-integraciones .int-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#sec-integraciones .int-chip.is-on { color: var(--nt-green); }
#sec-integraciones .int-chip.is-on i { background: var(--nt-green); box-shadow: 0 0 8px var(--nt-green); }
#sec-integraciones .int-chip.is-creds { color: var(--nt-amber); }
#sec-integraciones .int-chip.is-creds i { background: var(--nt-amber); }
#sec-integraciones .int-chip.is-err { color: var(--nt-red); }
#sec-integraciones .int-chip.is-err i { background: var(--nt-red); box-shadow: 0 0 8px var(--nt-red); }
#sec-integraciones .int-chip.is-off { color: var(--nt-dim); }
#sec-integraciones .int-chip.is-off i { background: var(--nt-dim); }
#sec-integraciones .int-infobox {
  padding: 12px 14px; background: #000; border-radius: 8px;
  border: 1px solid var(--nt-line2); display: flex; flex-direction: column; gap: 8px;
}
#sec-integraciones .int-inforow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--ui-mono); font-size: 11px; line-height: 1.3; }
#sec-integraciones .int-inforow .k { color: var(--nt-dim); letter-spacing: .12em; font-weight: 600; flex-shrink: 0; }
#sec-integraciones .int-inforow .v { color: var(--nt-text); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-integraciones .int-inforow .v.is-green { color: var(--nt-green); }
#sec-integraciones .int-inforow.is-sync { padding-top: 8px; border-top: 1px dashed var(--nt-line2); }
#sec-integraciones .int-act-sync {
  flex: 1; padding: 10px 12px; background: var(--nt-green); color: #000;
  border: 1px solid var(--nt-green); border-radius: 6px;
  font-weight: 700; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 0 16px var(--nt-green-glow);
}
#sec-integraciones .int-act-sync:disabled { opacity: .6; cursor: wait; }
#sec-integraciones .int-act-connect {
  flex: 1; padding: 10px 12px; background: var(--nt-amber); color: #000;
  border: 1px solid var(--nt-amber); border-radius: 6px;
  font-weight: 700; font-size: 12.5px; cursor: pointer;
}
#sec-integraciones .int-act-outline {
  flex: 1; padding: 10px 12px; background: transparent; color: var(--nt-green);
  border: 1px solid var(--nt-green); border-radius: 6px;
  font-weight: 700; font-size: 12.5px; cursor: pointer;
}
#sec-integraciones .int-act-gear {
  padding: 10px 12px; background: transparent; color: var(--nt-mute);
  border: 1px solid var(--nt-line2); border-radius: 6px;
  font-weight: 600; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#sec-integraciones .int-act-gear:hover { border-color: var(--nt-line); color: var(--nt-text); }
#sec-integraciones .int-prox {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--nt-blue) 10%, transparent);
  color: var(--nt-blue); border: 1px solid color-mix(in srgb, var(--nt-blue) 25%, transparent);
  font-family: var(--ui-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
}

/* ── Integraciones · IN.3 Modales NT (body-level → selector plano) ── */
.modal-int-overlay .modal-box {
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 14px; box-shadow: 0 0 80px var(--nt-green-glow);
}
.modal-int-overlay .modal-header { border-bottom: 1px solid var(--nt-line2); align-items: flex-start; }
.modal-int-overlay .close-btn {
  width: 32px; height: 32px; border-radius: 6px; background: transparent !important;
  border: 1px solid var(--nt-line2) !important; color: var(--nt-mute) !important;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px !important; flex-shrink: 0; font-family: var(--ui-mono);
}
.modal-int-overlay .close-btn:hover { color: var(--nt-red) !important; border-color: color-mix(in srgb, var(--nt-red) 35%, transparent) !important; }
.int-m-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; margin-bottom: 6px; }
.int-m-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin: 0; line-height: 1.1; color: var(--nt-text); }
.int-m-sub { font-size: 11.5px; color: var(--nt-mute); margin-top: 4px; font-family: var(--ui-mono); }
.modal-int-overlay .modal-footer { border-top: 1px solid var(--nt-line2); }

/* ════════════════════════════════════════════════════════════════════════
   ── Usuarios · Sprint U (canon usuarios-screen.jsx) ──
   U.1: Shell (kicker) + KPI strip 4 cards data real
   Clases usr-* scoped #sec-usuarios.
   ════════════════════════════════════════════════════════════════════════ */
#sec-usuarios .usr-kicker {
  font-family: var(--ui-mono); font-size: 11px; color: var(--nt-green);
  letter-spacing: .2em; font-weight: 700;
}
/* KPI strip canon (KpiCard 1:1: label mono dim / valor 38 w900 / sub mono) */
#sec-usuarios .usr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 1100px) { #sec-usuarios .usr-kpis { grid-template-columns: repeat(2, 1fr); } }
#sec-usuarios .usr-kpi {
  padding: 20px 22px; background: var(--nt-surface);
  border: 1px solid var(--nt-line2); border-radius: 10px;
  position: relative; overflow: hidden;
}
#sec-usuarios .usr-kpi-l { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-dim); letter-spacing: .16em; font-weight: 700; margin-bottom: 14px; }
#sec-usuarios .usr-kpi-v { font-size: 38px; font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1; margin-bottom: 8px; }
#sec-usuarios .usr-kpi.is-red .usr-kpi-v { color: var(--nt-red); }
#sec-usuarios .usr-kpi.is-green .usr-kpi-v { color: var(--nt-green); }
#sec-usuarios .usr-kpi-s { font-family: var(--ui-mono); font-size: 11px; color: var(--nt-mute); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-usuarios .usr-kpi-bar { margin-top: 12px; height: 3px; background: rgba(229,229,229,.05); border-radius: 2px; }
#sec-usuarios .usr-kpi-bar > span { display: block; height: 100%; background: var(--nt-green); border-radius: 2px; box-shadow: 0 0 8px var(--nt-green-glow); }

/* U.2 — 2FA cards canon (Mi 2FA + cascada empresa, grid 2-col) */
#sec-usuarios .usr-2fa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
@media (max-width: 1100px) { #sec-usuarios .usr-2fa-grid { grid-template-columns: 1fr; } }
#sec-usuarios .usr-2fa-card {
  padding: 24px 26px; background: var(--nt-surface);
  border: 1px solid var(--nt-line); border-radius: 10px; position: relative;
}
#sec-usuarios .usr-2fa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#sec-usuarios .usr-2fa-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .16em; font-weight: 700; margin-bottom: 8px; }
#sec-usuarios .usr-2fa-title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 4px; color: var(--nt-text); }
#sec-usuarios .usr-2fa-sub { font-size: 13px; color: var(--nt-mute); max-width: 380px; }
#sec-usuarios .usr-2fa-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
#sec-usuarios .usr-2fa-toggle-label { font-family: var(--ui-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--nt-mute); }
/* Pill canon (estado) — base reusable U.3 */
#sec-usuarios .usr-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-family: var(--ui-mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
#sec-usuarios .usr-pill.is-green { background: var(--nt-green-soft); color: var(--nt-green); border: 1px solid color-mix(in srgb, var(--nt-green) 22%, transparent); }
#sec-usuarios .usr-pill.is-mute { background: rgba(229,229,229,.05); color: var(--nt-mute); border: 1px solid rgba(229,229,229,.1); }
/* Ghost button canon */
#sec-usuarios .usr-ghost-btn {
  padding: 8px 14px; border-radius: 6px; background: transparent;
  color: var(--nt-text); border: 1px solid var(--nt-line2);
  font-weight: 600; font-size: 12px; cursor: pointer; transition: border-color .15s;
}
#sec-usuarios .usr-ghost-btn:hover { border-color: var(--nt-line); }
#sec-usuarios .usr-ghost-btn.is-red { color: var(--nt-red); border-color: color-mix(in srgb, var(--nt-red) 30%, transparent); }
/* Warning amber canon */
#sec-usuarios .usr-2fa-warn {
  margin-top: 16px; padding: 10px 14px;
  background: color-mix(in srgb, var(--nt-amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-amber) 25%, transparent);
  border-radius: 8px; display: flex; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--nt-amber); font-family: var(--ui-mono); letter-spacing: .02em;
}

/* U.3 — Tabla de equipo canon (header + search + avatar + pills + acciones SVG) */
#sec-usuarios .usr-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#sec-usuarios .usr-sec-kicker { font-family: var(--ui-mono); font-size: 10.5px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; margin-bottom: 6px; }
#sec-usuarios .usr-sec-sub { font-size: 13px; color: var(--nt-mute); font-weight: 500; }
#sec-usuarios .usr-search {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #000; border: 1px solid var(--nt-line2); border-radius: 6px;
  color: var(--nt-mute); min-width: 240px;
}
#sec-usuarios .usr-search:focus-within { border-color: var(--nt-line); }
#sec-usuarios .usr-search input { background: transparent; border: none; outline: none; color: var(--nt-text); font-family: var(--ui-mono); font-size: 12px; flex: 1; min-width: 0; }
#sec-usuarios .usr-search input::placeholder { color: var(--nt-mute); }
/* Tabla — thead mono canon (U.4: generalizado a las 3 tablas de la sección) */
#sec-usuarios .tabla-wrapper thead th { font-family: var(--ui-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--nt-dim); }
#sec-usuarios .usr-td-avatar { width: 40px; }
#sec-usuarios .usr-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--nt-green-glow), color-mix(in srgb, var(--nt-cyan) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--nt-green) 25%, transparent);
  font-family: var(--ui-mono); font-size: 11px; font-weight: 700; color: var(--nt-green); letter-spacing: .04em;
}
#sec-usuarios .usr-nombre { font-weight: 700; color: var(--nt-text); }
#sec-usuarios .usr-user-sub { font-size: 11px; color: var(--nt-dim); font-family: var(--ui-mono); margin-top: 2px; }
#sec-usuarios .usr-email { color: var(--nt-mute); font-family: var(--ui-mono); font-size: 12px; }
#sec-usuarios .usr-pill.is-cyan { background: color-mix(in srgb, var(--nt-cyan) 10%, transparent); color: var(--nt-cyan); border: 1px solid color-mix(in srgb, var(--nt-cyan) 22%, transparent); }
#sec-usuarios .usr-pill.is-amber { background: color-mix(in srgb, var(--nt-amber) 10%, transparent); color: var(--nt-amber); border: 1px solid color-mix(in srgb, var(--nt-amber) 25%, transparent); }
/* StatusDot canon (bloqueado) */
#sec-usuarios .usr-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; }
#sec-usuarios .usr-status.is-locked { color: var(--nt-red); }
#sec-usuarios .usr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
/* Intentos color-coded */
#sec-usuarios .usr-att { text-align: center; font-family: var(--ui-mono); font-size: 12px; font-weight: 600; }
#sec-usuarios .usr-att.is-dim { color: var(--nt-dim); }
#sec-usuarios .usr-att.is-amber { color: var(--nt-amber); }
#sec-usuarios .usr-att.is-red { color: var(--nt-red); }
/* Fila bloqueada (canon: tinte rojo, reemplaza opacity legacy) */
#sec-usuarios .usr-row-locked td { background: color-mix(in srgb, var(--nt-red) 3%, transparent); }
/* Acciones IconBtn canon */
#sec-usuarios .usr-acciones { text-align: right; white-space: nowrap; }
#sec-usuarios .usr-icon-btn {
  width: 30px; height: 30px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nt-mute); cursor: pointer; margin-left: 4px;
  transition: border-color .15s, color .15s; vertical-align: middle;
}
#sec-usuarios .usr-icon-btn:hover { border-color: var(--nt-line); color: var(--nt-text); }
#sec-usuarios .usr-icon-btn.is-cyan { color: var(--nt-cyan); }
#sec-usuarios .usr-icon-btn.is-amber { color: var(--nt-amber); }
#sec-usuarios .usr-icon-btn.is-red { color: var(--nt-red); }

/* U.4 — Roles y permisos + Logs de seguridad canon */
#sec-usuarios .usr-ghost-btn.is-green { color: var(--nt-green); border-color: var(--nt-green); font-weight: 700; font-size: 12.5px; }
/* Roles */
#sec-usuarios .usr-rol-name { font-family: var(--ui-mono); font-size: 12px; font-weight: 700; color: var(--nt-green); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
#sec-usuarios .usr-rol-name svg { color: var(--nt-dim); flex-shrink: 0; }
#sec-usuarios .usr-rol-id { font-size: 11px; color: var(--nt-dim); margin-top: 3px; }
#sec-usuarios .usr-rol-desc { color: var(--nt-text); font-weight: 500; font-size: 13px; }
#sec-usuarios .usr-rol-mono { font-size: 12px; color: var(--nt-mute); font-family: var(--ui-mono); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-usuarios .usr-rol-count { text-align: center; font-family: var(--ui-mono); font-size: 14px; font-weight: 700; color: var(--nt-text); }
/* Logs */
#sec-usuarios .usr-log-fecha { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-mute); white-space: nowrap; }
#sec-usuarios .usr-log-evt { font-family: var(--ui-mono); font-size: 11.5px; font-weight: 600; }
#sec-usuarios .usr-log-evt.is-green { color: var(--nt-green); }
#sec-usuarios .usr-log-evt.is-amber { color: var(--nt-amber); }
#sec-usuarios .usr-log-evt.is-red { color: var(--nt-red); }
#sec-usuarios .usr-log-user { font-family: var(--ui-mono); font-size: 12px; color: var(--nt-text); }
#sec-usuarios .usr-log-ip { font-family: var(--ui-mono); font-size: 11.5px; color: var(--nt-mute); }
#sec-usuarios .usr-log-ok { text-align: center; font-family: var(--ui-mono); font-weight: 700; }
#sec-usuarios .usr-log-ok.is-ok { color: var(--nt-green); }
#sec-usuarios .usr-log-ok.is-fail { color: var(--nt-red); }
#sec-usuarios .usr-log-det { font-size: 12.5px; color: var(--nt-mute); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* U.5 — Modales canon (user / rol / ajustes / reset-pass / 2fa-setup / 2fa-disable).
   Los 6 viven con estilos inline en shell.html → !important para pisar
   backdrop gris + caja bg-card (mismo trick M.4 / IN.3). */
.usr-modal { background: rgba(0,0,0,.78) !important; }
.usr-modal .usr-modal-box {
  background: var(--nt-surface) !important;
  border: 1px solid var(--nt-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 80px var(--nt-green-glow) !important;
}
.usr-modal .usr-m-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.usr-modal .usr-m-kicker { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .18em; font-weight: 700; margin-bottom: 8px; }
.usr-modal .usr-m-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--nt-text); }
.usr-modal .usr-m-sub { font-size: 12px; color: var(--nt-mute); margin-top: 4px; font-family: var(--ui-mono); }
.usr-modal .usr-m-close {
  width: 32px; height: 32px; border-radius: 6px; background: transparent;
  border: 1px solid var(--nt-line2); color: var(--nt-mute); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui-mono); font-size: 14px; flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.usr-modal .usr-m-close:hover { color: var(--nt-red); border-color: color-mix(in srgb, var(--nt-red) 35%, transparent); }
.usr-modal .usr-m-seclabel { font-family: var(--ui-mono); font-size: 10px; color: var(--nt-green); letter-spacing: .16em; font-weight: 700; margin: 16px 0 10px; }
.usr-modal .usr-m-note {
  margin-top: 8px; padding: 10px 14px; background: #000;
  border: 1px dashed var(--nt-line2); border-radius: 8px;
  font-size: 12px; color: var(--nt-mute); font-family: var(--ui-mono); letter-spacing: .02em;
}
/* Permisos tree (modal rol) */
#modal-rol .usr-m-permbox { background: #000 !important; border: 1px solid var(--nt-line2) !important; border-radius: 8px !important; }
#modal-rol .mu-perm-label { font-size: 12.5px; color: var(--nt-text); }
#modal-rol .perm-grupo summary strong { font-size: 12.5px; font-weight: 600; color: var(--nt-text); }

/* U.6b — FIX scroll horizontal: la regla NT global .tabla-wrapper { overflow:
   hidden } pisa el overflow-x:auto del shell (NT carga último). Las 3 tablas
   de Usuarios (equipo 7 cols / roles 7 / logs 6) quedaban recortadas sin
   scroll. Override scoped, mismo criterio que otras secciones anchas. */
#sec-usuarios .tabla-wrapper { overflow-x: auto; }
