:root{
  --ink:#0d1b2a; --ink-2:#3d5068; --ink-3:#6b7f99;
  --ground:#f4f6f9; --surface:#ffffff; --surface-2:#eef2f7;
  --line:#d5dee9; --line-soft:#e6ecf3;
  --navy:#0b3d68; --navy-deep:#082b4a; --accent:#0f8fa8;
  --ok:#0f7a4d; --ok-bg:#e2f4ea;
  --warn:#a05c00; --warn-bg:#fbeeda;
  --crit:#b3261e; --crit-bg:#fbe6e4;
  --info:#1c5fa8; --info-bg:#e4eefb;
  --shadow:0 1px 2px rgba(13,27,42,.06), 0 8px 24px rgba(13,27,42,.06);
  --r:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef5; --ink-2:#a9bacd; --ink-3:#7d90a6;
    --ground:#0b1520; --surface:#111d2b; --surface-2:#17263a;
    --line:#26384e; --line-soft:#1c2c40;
    --navy:#7fb4e0; --navy-deep:#0a1622; --accent:#3fc0d8;
    --ok:#5fd39b; --ok-bg:#0f2f22;
    --warn:#e5b05f; --warn-bg:#332512;
    --crit:#f18b83; --crit-bg:#3a1a17;
    --info:#8dbcf0; --info-bg:#13273f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef5; --ink-2:#a9bacd; --ink-3:#7d90a6;
  --ground:#0b1520; --surface:#111d2b; --surface-2:#17263a;
  --line:#26384e; --line-soft:#1c2c40;
  --navy:#7fb4e0; --navy-deep:#0a1622; --accent:#3fc0d8;
  --ok:#5fd39b; --ok-bg:#0f2f22;
  --warn:#e5b05f; --warn-bg:#332512;
  --crit:#f18b83; --crit-bg:#3a1a17;
  --info:#8dbcf0; --info-bg:#13273f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif;margin:0;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- barra superior ---------- */
.topbar{background:var(--navy-deep);color:#eaf2fa;position:sticky;top:0;z-index:40;
  border-bottom:1px solid rgba(255,255,255,.09)}
.topbar-in{max-width:1500px;margin:0 auto;padding:10px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;line-height:1}
.brand b{font-family:Archivo;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8fb4d6}
.gsearch{flex:1 1 320px;min-width:220px;display:flex;gap:0}
.gsearch input{flex:1;min-width:0;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-right:0;
  border-radius:var(--r) 0 0 var(--r);background:rgba(255,255,255,.07);color:#fff;font:inherit}
.gsearch input::placeholder{color:#88a6c2}
.gsearch button{padding:9px 16px;border:0;border-radius:0 var(--r) var(--r) 0;background:var(--accent);color:#04222a;font-weight:600}
.who{display:flex;align-items:center;gap:10px;font-size:12px;color:#b8cee4}
.who strong{display:block;color:#fff;font-size:13px}
.who button{background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:6px 11px;font-size:12px;color:#dce9f5}

/* ---------- layout ---------- */
.wrap{max-width:1500px;margin:0 auto;padding-block:20px 56px;padding-inline:20px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.pagehead p{margin:4px 0 0;color:var(--ink-3);font-size:13px}
.demo-flag{display:inline-flex;align-items:center;gap:7px;background:var(--warn-bg);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600}

/* ---------- indicadores ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.kpi{background:var(--surface);padding:13px 15px}
.kpi .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.kpi .v{font-family:Archivo;font-size:26px;font-weight:600;margin-top:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.kpi.alert .v{color:var(--crit)}

/* ---------- controles ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.tfilter{flex:1 1 260px;min-width:180px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);color:var(--ink);font:inherit}
.btn{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);padding:8px 13px;font-size:13px;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#08202f}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 12px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#08202f}

/* búsqueda avanzada */
.adv{display:none;padding:14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.adv.open{display:grid}
.f label{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.f input,.f select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.adv-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}

/* ---------- tabla ---------- */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1080px}
thead th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;font-family:Archivo;font-weight:600;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:10px 12px;white-space:nowrap;z-index:2}
:root[data-theme="dark"] thead th{color:#08202f}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:13px}
tbody tr:hover{background:var(--surface-2)}
tbody tr.sel{background:var(--info-bg)}
td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.ro{font-weight:600;color:var(--navy)}
.mode{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.mode svg{width:17px;height:17px;flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-crit{background:var(--crit-bg);color:var(--crit)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-mute{background:var(--surface-2);color:var(--ink-3)}
.eta-late{color:var(--crit);font-weight:600}
.rowbtn{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:30px;height:28px;
  display:inline-grid;place-items:center;margin-right:4px}
.rowbtn:hover{border-color:var(--accent);color:var(--accent)}
.rowbtn svg{width:15px;height:15px}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;color:var(--ink-3);font-size:12.5px}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}

/* ---------- panel lateral ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,22,36,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--surface);z-index:51;
  border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(8,22,36,.22);transform:translateX(102%);
  transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.dhead{padding:16px 18px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dhead h2{font-size:17px;font-weight:600}
.dhead .sub{color:var(--ink-3);font-size:12.5px;margin-top:3px}
.dbody{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:20px}
.sect h3{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12.5px}
.tl{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.tl li{position:relative;font-size:13px}
.tl li::before{content:"";position:absolute;left:-27px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line)}
.tl li.done::before{background:var(--ok);border-color:var(--ok)}
.tl li.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.tl .t{font-weight:600}
.tl .d{color:var(--ink-3);font-size:12px;font-family:"IBM Plex Mono",monospace}
.docs{display:flex;flex-direction:column;gap:7px}
.doc{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;padding:9px 11px;font-size:13px;background:var(--surface-2)}
.doc svg{width:16px;height:16px;color:var(--navy);flex:none}
.doc .g{margin-left:auto;font-size:11px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.note{font-size:12px;color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--line);border-radius:6px;padding:10px 12px}

/* aviso */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);background:var(--navy-deep);color:#eaf2fa;
  padding:11px 18px;border-radius:999px;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

.legend{margin-top:16px;font-size:12px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:640px){
  .kpi .v{font-size:22px}
  .drawer{width:100%}
}


/* --- pantalla de acceso --- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:28px}
.login-card .mark{font-family:Archivo;font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--navy)}
.login-card .mark span{display:block;font-family:"IBM Plex Sans";font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.login-card h1{font-size:18px;font-weight:600;margin:22px 0 5px}
.login-card p.lead{margin:0 0 20px;color:var(--ink-3);font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:5px}
.field input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);color:var(--ink);font:inherit}
.login-card .btn.primary{width:100%;padding:11px;font-size:14px;margin-top:6px}
.msg{margin-top:14px;font-size:12.5px;padding:10px 12px;border-radius:6px;display:none}
.msg.show{display:block}
.msg.err{background:var(--crit-bg);color:var(--crit)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.login-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--ink-3);line-height:1.6}
#app{display:none}
.staff-link{color:#cfe2f3;font-size:12px;text-decoration:none;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);padding:6px 11px}
.staff-link:hover{border-color:var(--accent);color:#fff}
.loading{padding:60px 20px;text-align:center;color:var(--ink-3)}

/* Logo oficial: acceso y cabecera del tracking */
.mark .nf-logo{display:block;width:280px;max-width:100%;height:auto;margin:0 auto 14px;background:#fff;padding:14px 18px;border-radius:6px;box-sizing:border-box;}
.brand{align-items:center;}
.brand .nf-logo{display:block;width:190px;max-width:100%;height:auto;background:#fff;padding:10px 14px;border-radius:6px;box-sizing:border-box;}

/* Legibilidad: el texto oscuro solo cuando el tema oscuro esta realmente en vigor.
   Antes se aplicaba tambien con el tema claro, dejando «Entrar» y las cabeceras
   de la tabla en azul oscuro sobre azul marino. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) thead th{color:#08202f}
}

/* Respetar indicadores ocultos fuera de demostración y del personal. */
#modoDemo[hidden], #panelStaff[hidden] { display: none !important; }

/* =====================================================================
   PARCHE MÓVIL · estilos.css del portal de tracking · 27-oct-2026
   =====================================================================

   Desplegado el 27-oct-2026 · dpl_4AqiYMkYkNxKa5BnvbNoNTcAtBoT. Se añade AL FINAL de `estilos.css`, después de todo lo
   existente: las dos reglas dependen de ganar por orden de cascada.

   VERIFICADO EN VIVO, no supuesto: inyectado en la página de producción
   desde el panel de navegador, a 390 × 844 px, y medido antes y después.

   | Medición                      | Antes  | Después |
   |-------------------------------|--------|---------|
   | Contraste pestaña activa OSC. | 2,21:1 | 7,56:1  |
   | Contraste pestaña activa CLARO| 11,16:1| 11,16:1 |
   | Alto de pestaña               | 31 px  | 44 px   |
   | Alto del buscador             | 41 px  | 44 px   |
   | Alto de desplegables avanzados| 35 px  | 44 px   |
   | Alto de botones avanzados     | 38 px  | 44 px   |
   | Alto del botón de documento   | 40 px  | 44 px   |
   | Scroll horizontal de página   | no     | no      |

   Reversión: borrar este bloque. No toca variables, ni colores de marca,
   ni ninguna otra regla.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · CONTRASTE DE LA PESTAÑA ACTIVA EN MODO OSCURO

   La corrección de color YA EXISTÍA en la hoja:

       :root[data-theme="dark"] .chip[aria-pressed="true"]{color:#08202f}

   pero está acotada a `:root[data-theme="dark"]`, es decir solo cuando el
   tema oscuro se fija con el atributo. Cuando el modo oscuro llega del
   SISTEMA, el tema se aplica por el otro camino de la hoja —
   `@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) }` —
   y esa regla de color no entra. Resultado: `--navy` pasa a ser el azul
   claro `#7fb4e0` y la pestaña activa queda con texto BLANCO encima,
   2,21:1.

   Es el mismo 2,21:1 que ya se midió una vez en este proyecto: la
   corrección se escribió con un solo selector cuando el tema tiene dos
   caminos. Aquí se replica con el selector que le falta.

   NO ES UN DEFECTO SOLO MÓVIL: esta regla no tiene condición de ancho,
   así que afecta también al escritorio en modo oscuro del sistema.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chip[aria-pressed="true"]{ color:#08202f; }
}

/* ---------------------------------------------------------------------
   2 · ZONAS DE TOQUE DE 44 px, SOLO EN MÓVIL

   Acotado a `max-width:640px`, el mismo corte que ya usa la hoja, para no
   cambiar nada en escritorio. Se usa `min-height` y no `height`: un
   control con texto largo sigue creciendo en lugar de recortarse.
   --------------------------------------------------------------------- */
@media (max-width:640px){

  /* Las pestañas eran lo más expuesto: 31 px y pegadas entre sí. */
  .chip{
    min-height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
  }

  /* Buscador, filtro de texto y toda la búsqueda avanzada. */
  #qbl, #qtab, #advBtn,
  #adv select, #adv input, #adv button{ min-height:44px; }

  /* El botón de descarga del documento, dentro de la ficha. */
  #dBody a, #dBody button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* =====================================================================
   ADENDA al parche móvil · estilos.css del portal de tracking
   28-oct-2026 · se añade AL FINAL, después del parche del 27-oct
   =====================================================================

   QUÉ SE ME ESCAPÓ

   El parche del 27-oct subió a 44 px las pestañas, el buscador, la
   búsqueda avanzada y el botón de documento — todo lo que vive DENTRO de
   la aplicación. Pero dejó fuera la pantalla de ACCESO, que es lo
   PRIMERO que toca un cliente en el teléfono.

   Medido sobre el CSS ya desplegado, a 390 px:

   | Control            | Desplegado | Con la adenda |
   |--------------------|------------|---------------|
   | Correo (#email)    | 43 px      | 44 px         |
   | Contraseña (#pass) | 43 px      | 44 px         |
   | Entrar (#btnEntrar)| 45 px      | 45 px (ya ok) |

   Verificado inyectándola en la página de producción y midiendo antes y
   después. Sin scroll horizontal. Reversión: borrar este bloque.
   ===================================================================== */
@media (max-width:640px){
  #email, #pass{ min-height:44px; }
}