/* ============================================================
   ASPECTO GREATERWMS — capa de prueba (20/09/2026)
   ------------------------------------------------------------
   Viste el marco y el design system con los valores MEDIDOS sobre GreaterWMS
   (Quasar 1 + Material): ver pruebas/visual/greaterwms/ANALISIS.md. No cambia
   marcado ni comportamiento: son tokens y medidas. La ficha completa, con lo
   que pidió el usuario y por qué, está en ASPECTO-ELEMENTO.md.

   LOS TAMAÑOS DE LETRA, DE ÍCONOS Y EL ALTO DE LAS FILAS SON LOS DE LA MAQUETA:
   el usuario los comparó lado a lado y eligió esos (20/09/2026). Las únicas
   excepciones son la solapa Inventarios y las tarjetas de KPI, que pidió más
   chicas.

   Tres bloques:
     1. LA FORMA — medidas, sombras, fuente. Vale para el claro y el oscuro.
     2. LOS COLORES DEL CLARO.
     3. LOS COLORES DEL OSCURO — el mismo diseño con la tonalidad cambiada. El
        usuario lo pidió así: «el tema que está ok es el claro, rehacer el
        oscuro en base a ese». Ninguna regla de forma va acá.
   Un color NUNCA se escribe suelto en el bloque 1: va como token en el 2 y en
   el 3, o el oscuro se queda sin él.

   Se enlaza DESPUÉS de estilos.css y marco.css. Nunca en modo celular: el
   flujo de contar no se toca. Sacarlo = borrar el <link> del módulo.

   Lo que NO se copió, a propósito, porque son defectos de GreaterWMS: el
   triángulo azul en las esquinas de la barra, la tabla pasada 10 px del borde
   y el ítem activo que sólo se marca con el clic.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* SÓLO EN PANTALLA. El papel no se toca: Rótulos y Pallets imprimen etiquetas medidas al
   milímetro, e Inventario y Control de Entregas imprimen hojas. Todo lo que sale por la
   impresora queda exactamente como lo deja el módulo. */
@media screen{

/* ══ 2. LOS COLORES DEL CLARO ══════════════════════════════════ */
:root:not([data-theme="dark"]):not(.modo-celular){
  --marco-barra:linear-gradient(90deg,#4a4f57,#2b2f36);--marco-punto:#fff;
  --marco-fondo-menu:#eee;--marco-txt:#000;--marco-dim:rgba(0,0,0,.6);--marco-borde:rgba(0,0,0,.12);--marco-fila:rgba(0,0,0,.15);
  --marco-act:linear-gradient(90deg,#4a4f57,#2b2f36);--marco-act-txt:#fff;--marco-act-filete:transparent;
  --marco-sup:#fff;

  /* GRISES EN LUGAR DE LOS AZULES (20/09/2026). El usuario: «usar algún gris bonito para reemplazar los
     azules de la app, y dejar los rojos para negativos y alertas como sucede en toda app». El primario es
     grafito; el rojo queda SÓLO en --negative, en los chips de diferencia y en el logo. Antes: primario
     #1976d2 / #1565c0, pizarra #606c88→#3f4c6b, franja #01579b, chip info #e3f0fc / #1565c0 (los azules
     de GreaterWMS / Quasar). Positivo, negativo y aviso siguen siendo los de Quasar. */
  --primary:#3c4048;--primary-dark:#2b2f36;--sobre-prim:#fff;
  --positive:#21ba45;--negative:#c10015;--warning:#f2c037;
  --bg:#ece9e6;--surface:#fff;--surface-alt:#fafafa;--row:#f5f5f5;
  --text:#000;--text-2:rgba(0,0,0,.6);--line:rgba(0,0,0,.12);

  /* los chips del claro: en Inventario los da estilos.css; los módulos de la sección 4 no lo enlazan */
  --chip-ok-bg:#dcfce7;  --chip-ok-tx:#15803d;
  --chip-dif-bg:#fee2e2; --chip-dif-tx:#b91c1c;
  --chip-pend-bg:#fef3c7;--chip-pend-tx:#a16207;
  --chip-info-bg:#ececee;--chip-info-tx:#3c4048;

  --gw-fondo:linear-gradient(90deg,#ece9e6,#fff);
  --gw-dlg:#2b2f36;                                  /* la franja de los diálogos */
  --gw-borde-campo:rgba(0,0,0,.24);
  --gw-velo:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15));   /* al pasar el mouse, sobre cualquier color */
  --gw-velo-liso:rgba(0,0,0,.15);
  --gw-velo-barra:rgba(255,255,255,.15);
  --gw-fila-encima:rgba(0,0,0,.03);
  --gw-telon:rgba(0,0,0,.4);
  /* la escalera de sombras de Material, las tres capas */
  --gw-s2:0 1px 5px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);
  --gw-s4:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px rgba(0,0,0,.14),0 1px 10px rgba(0,0,0,.12);
  --gw-s18:0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
  --gw-s24:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
  --shadow:var(--gw-s2);      /* acá y no en el bloque 1: estilos.css lo pisa en el oscuro con un selector más pesado */
}

/* ══ 3. LOS COLORES DEL OSCURO ═════════════════════════════════
   El mismo diseño con la tonalidad cambiada, en neutros: el fondo casi negro, las superficies suben de a
   un escalón (así se lee la profundidad, que con sombra negra sobre fondo oscuro no alcanza) y el ítem
   activo lleva el grafito del claro, que acá es lo que resalta. El primario es un gris claro, y lo que va
   ENCIMA de él pasa a ser oscuro (--sobre-prim). El rojo, sólo para lo negativo. */
:root[data-theme="dark"]:not(.modo-celular){
  --marco-barra:linear-gradient(90deg,#33373e,#1d2026);--marco-punto:#fff;
  --marco-fondo-menu:#191b1f;--marco-txt:#e6e9f0;--marco-dim:rgba(255,255,255,.6);--marco-borde:rgba(255,255,255,.12);--marco-fila:rgba(255,255,255,.1);
  --marco-act:linear-gradient(90deg,#4a4f57,#2b2f36);--marco-act-txt:#fff;--marco-act-filete:transparent;
  --marco-sup:#26282d;

  --primary:#d5d8de;--primary-dark:#b9bdc6;--sobre-prim:#16181c;      /* gris claro, con texto oscuro encima */
  --positive:#3ddc67;--negative:#ff6b78;--warning:#f2c037;
  --bg:#121316;--surface:#1e2024;--surface-alt:#26282d;--row:#2b2e34;      /* neutros: el oscuro ya no es azulado */
  --text:#e6e9f0;--text-2:rgba(255,255,255,.6);--line:rgba(255,255,255,.12);

  --chip-ok-bg:rgba(61,220,103,.16);  --chip-ok-tx:#3ddc67;
  --chip-dif-bg:rgba(255,107,120,.16);--chip-dif-tx:#ff6b78;
  --chip-pend-bg:rgba(242,192,55,.16);--chip-pend-tx:#f2c037;
  --chip-info-bg:rgba(255,255,255,.1);--chip-info-tx:#d5d8de;

  --gw-fondo:linear-gradient(90deg,#0f1012,#17181c);
  --gw-dlg:#26282d;
  --gw-borde-campo:rgba(255,255,255,.28);
  --gw-velo:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1));
  --gw-velo-liso:rgba(255,255,255,.1);
  --gw-velo-barra:rgba(255,255,255,.12);
  --gw-fila-encima:rgba(255,255,255,.04);
  --gw-telon:rgba(0,0,0,.6);
  /* las mismas tres capas, más cargadas: sobre fondo oscuro la sombra se pierde */
  --gw-s2:0 1px 5px rgba(0,0,0,.45),0 2px 2px rgba(0,0,0,.35),0 3px 1px -2px rgba(0,0,0,.3);
  --gw-s4:0 2px 4px -1px rgba(0,0,0,.5),0 4px 5px rgba(0,0,0,.4),0 1px 10px rgba(0,0,0,.35);
  --gw-s18:0 9px 11px -5px rgba(0,0,0,.5),0 18px 28px 2px rgba(0,0,0,.4),0 7px 34px 6px rgba(0,0,0,.35);
  --gw-s24:0 11px 15px -7px rgba(0,0,0,.5),0 24px 38px 3px rgba(0,0,0,.4),0 9px 46px 8px rgba(0,0,0,.35);
  --shadow:var(--gw-s2);

  color-scheme:dark;                                 /* los combos y el calendario del navegador, en oscuro */
  /* estilos.css le da al título del diálogo un fondo propio en el oscuro, con un
     selector que pesa más que el del bloque 1: acá se le vuelve a ganar */
  .dlg-head{background:var(--gw-dlg);border-bottom:0}
  /* el botón lleno: texto oscuro sobre el azul claro (el blanco no se lee) */
  .btn:not(.flat):not(.outline):not(.positive):not(.negative){color:var(--sobre-prim)}
  .marco-barra #barraExtras .btn{color:#fff}
}

/* ══ 1. LA FORMA — igual en el claro y en el oscuro ════════════ */
:root:not(.modo-celular){
  --marco-alto:50px;--marco-menu:200px;--marco-mini:56px;
  --marco-fd:Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --marco-fb:Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fd:Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fb:Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius:4px;

  /* ── página ── */
  body{background:var(--gw-fondo) fixed;line-height:1.5}

  /* ── barra de arriba ── */
  .marco-barra{padding-left:12px;padding-right:12px;gap:0;border-bottom:0;box-shadow:var(--gw-s18);z-index:2000}
  .marco-marca{font-weight:700;letter-spacing:.21px;text-transform:capitalize;padding:0 12px}
  .marco-logo{margin-left:8px}
  .marco-logo + .marco-marca{padding-left:10px}
  @media (max-width:480px){ .marco-logo + .marco-marca{display:none} }     /* el isotipo alcanza: el nombre se cortaba en «Eleme…» */
  .marco-btn{height:32px;margin:0 10px;padding:0 4px;border-radius:3px;font-weight:500;letter-spacing:normal}
  .marco-ic{width:34px;height:34px}
  .marco-btn:hover,.marco-ic:hover{background:var(--gw-velo-barra)}
  .marco-barra #barraExtras .btn{height:32px;border-radius:3px;background:none;font-weight:500}
  .marco-desplegable{border:0;border-radius:4px;padding:8px 0;box-shadow:var(--gw-s2)}
  .marco-desplegable button{border-radius:0;padding:12px 16px;font-weight:400}

  /* ── menú lateral ── */
  .marco-menu{z-index:1000;box-shadow:var(--gw-s24)}
  .marco-menu a{gap:32px;padding:8px 16px;font-weight:400;white-space:normal;line-height:1.2;
    transition:color .3s,background-color .3s}
  .marco-menu a.marco-activo{font-weight:400;box-shadow:none}
  .marco-menu a.marco-activo:hover{background:var(--marco-act)}
  .marco-menu .marco-sep{margin:0}
  .marco-menu .marco-grupo{display:none}          /* GreaterWMS separa los grupos sólo con la línea */

  /* ── solapas: ícono arriba, todo del color del texto, la activa con una raya ── */
  /* 52 px y no los 72 de GreaterWMS: el usuario pidió la barra más baja para darle
     lugar a lo que viene abajo (calendario, tablas), 20/09/2026 */
  .solapas{gap:0;margin-top:-4px}
  .sol{justify-content:center;gap:0;min-height:52px;padding:0 14px;font-weight:500;
    letter-spacing:normal;line-height:18px;color:var(--text);transition:color .3s,background-color .3s}
  .sol:hover{background-image:var(--gw-velo)}
  .sol.on{border-bottom-color:var(--text)}
  .sol .cuenta{top:1px;right:2px}

  /* ── tarjetas: borde + la sombra más alta, como la tabla de GreaterWMS ── */
  .card{border:1px solid var(--line);box-shadow:var(--gw-s24)}
  .toolbar{padding:12px 16px;min-height:65px}
  .toolbar h2{font-weight:500;letter-spacing:.1px;text-transform:none}
  /* las tarjetas de KPI, un 20 % más chicas en todo (pedido del usuario, 20/09/2026):
     número 30→24, rótulo 11,5→9,2, relleno 12×16→10×13, filete 4→3, separación 12→10 */
  .kpis{gap:10px;margin-bottom:13px;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .kpi{padding:10px 13px;border-left-width:3px}
  .kpi .v{font-size:24px;font-weight:700;letter-spacing:0}
  .kpi .l{font-size:9.2px;margin-top:1px}
  .kpi .progress{height:4px;margin-top:6px}

  /* ── botones ── */
  .btn{height:36px;padding:0 16px;border-radius:3px;font-weight:500;letter-spacing:normal;box-shadow:var(--gw-s2)}
  .btn:hover,.btn.flat:hover,.btn.outline:hover,.btn.positive:hover,.btn.negative:hover{filter:none;background-image:var(--gw-velo)}
  .btn.flat:hover,.btn.outline:hover,.btn.positive:hover,.btn.negative:hover{background-color:var(--surface)}
  .btn.sm{height:30px;padding:0 10px}
  .grupo-btn{border-radius:7px;box-shadow:var(--gw-s2)}
  .grupo-btn .btn{box-shadow:none;border-radius:0}
  .grupo-btn .btn:first-child{border-radius:7px 0 0 7px}
  .grupo-btn .btn:last-child{border-radius:0 7px 7px 0}
  .grupo-btn .btn:only-child{border-radius:7px}
  .icon-btn{width:42px;height:42px}
  .icon-btn:hover{background:var(--gw-velo-liso)}

  /* ── buscador y campos ── */
  .search{height:40px;border-radius:28px;border-color:var(--gw-borde-campo);color:var(--text-2)}
  .search:hover{border-color:var(--text)}
  .search:focus-within{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
  .search svg{order:2}
  .field label{font-weight:400;letter-spacing:.1px;text-transform:none}
  .field input,.field select,.field textarea,select.filter,.buscador{height:40px;border-radius:0;border-color:var(--gw-borde-campo);background:var(--surface);padding:0 12px}
  .field textarea{height:auto;padding:9px 12px}
  .field input:hover,.field select:hover,.field textarea:hover,.buscador:hover{border-color:var(--text)}
  .field input:focus,.field select:focus,.field textarea:focus,.buscador:focus{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}

  /* ── tablas: tamaños y alto de fila de la maqueta; de GreaterWMS, el peso 500 y las líneas ── */
  .table-wrap th,.table-wrap td{border-color:var(--line)}
  .table-wrap th{font-weight:500;letter-spacing:0}
  .table-wrap tbody tr:hover{background:var(--gw-fila-encima)}
  /* las tablas propias de Inventario (.tabla-inv es la de la solapa Inventarios) */
  .tabla,.tabla-inv{border-radius:4px;border-color:var(--line)}
  .tabla thead th,.tabla-inv th{font-weight:500;letter-spacing:0;color:var(--text)}
  .tabla-inv tbody tr:hover{background:var(--gw-fila-encima)}
  .tabla-inv .abrir-inv{font-weight:500}

  /* ── solapa Inventarios, un punto más chica (pedido del usuario, 20/09/2026): con
     Roboto, que es más ancha que Barlow, los tamaños de la maqueta quedaban grandes. ── */
  .acciones-inv{gap:8px;margin-bottom:10px}
  .acciones-inv .btn{height:30px;padding:0 11px;gap:6px;font-size:11.5px}
  .acciones-inv .search{height:34px}
  .acciones-inv .search input{font-size:13px}
  .tabla-inv th,.tabla-inv td{height:38px;padding:0 10px;font-size:12.5px}
  .tabla-inv th{height:40px;font-size:11.5px}
  .tabla-inv td.tramos{padding:4px 10px;font-size:12px}
  .tabla-inv .abrir-inv{font-size:12.5px}
  .tabla-inv .chip{font-size:.64rem;padding:1px 8px}
  .avance-mini{width:52px;height:4px;margin-right:6px}
  .acc-inv button{width:28px;height:28px}
  .acc-inv button svg{width:17px;height:17px}

  /* ── paginado: abajo y centrado, la página activa invertida ── */
  .paginas{padding:10px;gap:4px}
  .paginas .total{font-size:12.5px}
  .paginas button{min-width:26px;height:26px;border-radius:3px;font-size:12.5px;font-weight:500}
  .paginas button:hover:not(:disabled){background:var(--gw-velo-liso)}
  .paginas button.actual{background:var(--text);color:var(--surface)}

  /* ── diálogos: franja azul de 50 px ── */
  dialog{width:min(92vw,400px);border-radius:4px;box-shadow:var(--gw-s4)}
  dialog::backdrop{background:var(--gw-telon)}
  .dlg-head{display:flex;align-items:center;min-height:50px;padding:0 12px;background:var(--gw-dlg);
    font-weight:400;letter-spacing:0;text-transform:none}
  .dlg-body{padding:16px}
  .dlg-actions{gap:25px;padding:15px}
}

/* ══ 4. LOS MÓDULOS QUE NO PASARON POR EL DESIGN SYSTEM ════════
   Nueve de los diez módulos que faltaban (todos menos index) comparten un
   vocabulario: las variables --ground / --surface-2 / --linea / --ink /
   --acento / --ok / --bad…, y los componentes .cabecera, .boton, .boton-2,
   .mini, .panel, label.campo, .aviso, .chip, .tabla-marco. Nacieron
   sólo-oscuros y con el rojo de Elemento.

   Acá se traduce ESE vocabulario al aspecto, una sola vez para todos. El
   módulo sólo enlaza marco.css + greaterwms.css + menu-lateral.js; NO enlaza
   estilos.css (que pisa reglas globales y obligaría a revisar cada módulo
   entero). Lo propio de un módulo que no entre en este vocabulario va al
   final, en su sub-bloque, con el nombre del módulo.

   Sólo vale donde el módulo lo pide con <html data-gw="clasico">: Inventario, que sí
   pasó por el design system, también tiene .envoltorio, tablas y .chip, y esto no
   lo tiene que tocar.

   Todo son var(): sirve igual en el claro y en el oscuro. */
:root[data-gw="clasico"]:not(.modo-celular){
  /* las variables viejas, colgadas de los tokens del aspecto */
  --ground:var(--bg);--surface-2:var(--surface-alt);--surface-3:var(--row);
  --linea:var(--line);--linea-fuerte:var(--gw-borde-campo);
  --ink:var(--text);--ink-2:var(--text-2);--ink-3:var(--text-2);
  --acento:var(--primary);--acento-2:var(--primary-dark);--sobre-acento:var(--sobre-prim);
  --acento-suave:color-mix(in srgb,var(--primary) 12%,transparent);
  --ok:var(--chip-ok-tx);--ok-suave:var(--chip-ok-bg);
  --warn:var(--chip-pend-tx);--warn-suave:var(--chip-pend-bg);
  --bad:var(--chip-dif-tx);--bad-suave:var(--chip-dif-bg);
  --info:var(--chip-info-tx);--info-suave:var(--chip-info-bg);

  body{color:var(--text)}

  /* la cabecera del módulo pasa a ser el título de la página: el marco ya da la
     marca, «Inicio» y el estado de la conexión, así que acá quedan las migas
     (.rotulo) y el nombre, sin el filete rojo ni el logo */
  .envoltorio{max-width:none;margin:0;padding:14px 16px 40px;gap:14px}
  .cabecera{align-items:center;padding-bottom:0;border-bottom:0;gap:10px}
  .cabecera .marca{gap:0}
  .cabecera .rotulo{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2)}
  .cabecera h1{font-size:20px;font-weight:500;letter-spacing:.1px;text-transform:none;gap:.28em}   /* es flex: sin gap, «Resumen Ejecutivo» salía pegado */
  .cabecera .logo-e{display:none}
  .cabecera a[href="index.html"],.cabecera a[href="/"],.cabecera a[href="./"]{display:none}

  /* el estado de la conexión, cuando el marco lo mudó a la barra de arriba */
  .marco-barra .conn-indicator{height:32px;margin:0 10px;padding:0 12px;border:0;border-radius:3px;
    background:var(--gw-velo-barra);font-size:13px;font-weight:500;letter-spacing:normal}
  .marco-barra .conn-txt{color:#fff}

  /* botones: .boton = el lleno; .boton-2 = el blanco con sombra; .mini = el chico */
  .boton,.boton-2,.mini{justify-content:center;border:0;border-radius:3px;font-weight:500;letter-spacing:normal;
    white-space:nowrap;box-shadow:var(--gw-s2);transition:background-color .3s}
  .boton,.boton-2{height:36px;padding:0 16px;font-size:12.8px}
  .boton{background-color:var(--primary);color:var(--sobre-prim)}
  .boton-2,.mini{background-color:var(--surface);color:var(--text)}
  .mini{height:28px;padding:0 10px;font-size:11.5px}
  .boton:hover,.boton-2:hover,.mini:hover{opacity:1;background-image:var(--gw-velo)}
  .boton-2:hover,.mini:hover{background-color:var(--surface);color:var(--text)}
  .mini.riesgo{color:var(--negative)} .mini.ok{color:var(--positive)}
  .mini.riesgo:hover,.mini.ok:hover{background-color:var(--surface)}
  .mini.riesgo:hover{color:var(--negative)} .mini.ok:hover{color:var(--positive)}
  .boton:disabled{background-color:var(--row);color:var(--text-2);box-shadow:none;opacity:.6;background-image:none}
  .boton:focus-visible,.boton-2:focus-visible,.mini:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  /* paneles: la tarjeta del aspecto, con su barra de título */
  .panel{border:1px solid var(--line);border-radius:4px;background:var(--surface);box-shadow:var(--gw-s24)}
  .panel > h3{min-height:56px;padding:10px 16px;background:none;border-bottom:1px solid var(--line);
    font-size:17px;font-weight:500;letter-spacing:.1px;text-transform:none}
  .panel > h3 small{font-size:12.5px;color:var(--text-2);margin-top:1px}
  .panel .cuerpo{padding:14px 16px}
  .panel + .panel{margin-top:14px}
  .fila-campos + .pista{margin-top:10px}

  /* campos: cuadrados, 40 px, etiqueta liviana */
  label.campo > span{font-size:11.5px;font-weight:400;letter-spacing:.1px;text-transform:none;color:var(--text-2)}
  .envoltorio input[type=text],.envoltorio input[type=search],.envoltorio input[type=number],.envoltorio input[type=date],
  .envoltorio input[type=password],.envoltorio select,.envoltorio textarea{
    border:1px solid var(--gw-borde-campo);border-radius:0;background:var(--surface);color:var(--text)}
  .envoltorio input[type=text],.envoltorio input[type=search],.envoltorio input[type=number],.envoltorio input[type=date],
  .envoltorio input[type=password],.envoltorio select{height:40px;padding:0 12px;font-size:14px}
  .envoltorio input:hover,.envoltorio select:hover,.envoltorio textarea:hover{border-color:var(--text)}
  .envoltorio input:focus,.envoltorio select:focus,.envoltorio textarea:focus,
  .envoltorio input:focus-visible,.envoltorio select:focus-visible{outline:0;border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}

  /* avisos y pistas */
  .pista{color:var(--text-2)}
  .aviso{border-radius:4px}
  .aviso.bad{color:var(--chip-dif-tx)}

  /* tablas compactas: los valores de la solapa Inventarios */
  .tabla-marco{border-color:var(--line);border-radius:4px}
  .envoltorio table:not(:is(.rot,.rp,.hoja-dif,.hoja-impresion,.previa-hoja,.previa-rotulo-marco) table){font-size:12.5px}
  .envoltorio th:not(:is(.rot,.rp,.hoja-dif,.hoja-impresion,.previa-hoja,.previa-rotulo-marco) th){height:40px;padding:0 10px;background:none;border-bottom:1px solid var(--line);
    font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text)}
  .envoltorio td:not(:is(.rot,.rp,.hoja-dif,.hoja-impresion,.previa-hoja,.previa-rotulo-marco) td){height:38px;padding:0 10px;border-bottom-color:var(--line)}
  .envoltorio tbody tr:hover{background:var(--gw-fila-encima)}
  .envoltorio td.acc{align-items:center}

  /* LO QUE SE IMPRIME, VISTO EN PANTALLA: las previas de etiquetas y rótulos y el medidor del
     rótulo de pallet tienen que verse (y MEDIRSE) con la tipografía del papel, que es Barlow.
     «Papel = previa» es una regla del proyecto: si la previa usa otra letra, miente. */
  .previa-hoja,.previa-et,.previa-rotulo-marco,#medidorRotulo,.rot,.rp,.hoja-dif,.hoja-impresion{
    --fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;
    font-family:'Barlow',-apple-system,"Segoe UI",system-ui,sans-serif}

  /* Generar Abastecimientos (picking-sap) tiene 'Barlow Condensed' escrito a mano en sus reglas
     de pantalla, en vez del token: acá se le vuelve a dar el token. Adentro de una previa de
     impresión el token sigue siendo Barlow (bloque de arriba), así que no las toca. */
  .rotulo,h1,.zona h2,.campo label,.filtros h3,.bloque-filtro>.k,.metrica .k,h2.seccion,.insignia,th,
  .marcador .k,.marcador .v i,.barra-rutas .cab h3,.chip-ruta .nom,.caja>.cab h3,.sello,.mini{font-family:var(--fd)}
  .chip small{font-family:var(--fb)}

  /* buscadores con el ícono adentro: no perder el lugar del ícono */
  .envoltorio .buscador input{padding-left:34px}

  /* tarjetas de KPI de Abastecer y Control de Entregas (.k rótulo, .v número, .n nota): sueltas,
     con su sombra, y un 20 % más chicas, como las de Inventario */
  .kpis{gap:10px;background:none;border:0;border-radius:0;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .kpi{padding:9px 12px 9px 11px;gap:1px;border-radius:4px;box-shadow:var(--gw-s2)}
  .kpi .k{font-size:9.2px;letter-spacing:.6px}
  .kpi .v{font-family:var(--fb);font-size:22px;font-weight:700;letter-spacing:0;line-height:1.15}
  .kpi .n{font-size:10.5px;color:var(--text-2)}
  .kpi.on{background:var(--row)}

  /* ── Emergentes (.fondo-modal + .modal) ── las de Abastecer Olas (Agregar diferencia, Reporte,
     Comentario) y la del armado en Generador de Pallets. Una sola vez para todas: telón del
     aspecto, radio 4, la sombra de los diálogos, título en peso 500 sin mayúscula, campos de
     40 px cuadrados. Todo con tokens: sirve igual en el claro y en el oscuro.
     z-index 3000: esta capa sube la barra a 2000 y el menú a 1000 (marco.css los deja en 65 y 60),
     y un telón en 200 quedaba DEBAJO del marco: la barra le comía 14 px al título. */
  .fondo-modal{z-index:3000;background:var(--gw-telon)}
  .modal{border:0;border-radius:4px;background:var(--surface);color:var(--text);box-shadow:var(--gw-s4)}
  .modal .cab-modal{min-height:56px;padding:8px 8px 8px 16px;background:none;border-bottom:1px solid var(--line);border-radius:4px 4px 0 0}
  .modal .cab-modal h3{font-family:var(--fd);font-size:17px;font-weight:500;letter-spacing:.1px;text-transform:none}
  .modal .cab-modal small{font-size:12.5px;color:var(--text-2)}
  .cerrar-modal{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;padding:0;
    border-radius:50%;color:var(--text-2);transition:background-color .3s}
  .cerrar-modal:hover{color:var(--text);background:var(--gw-velo-liso)}
  .modal .cuerpo-modal{padding:14px 16px 16px}
  .pie-modal{border-top-color:var(--line)}
  .pie-modal .aviso-borrador{color:var(--text-2)}
  /* los campos de adentro: las emergentes viven FUERA de .envoltorio, así que las reglas de campos
     de más arriba no las alcanzan. Los casilleros de la tabla de reparto (.in-rep) no toman el
     alto de 40: inflarían cada renglón. */
  .modal input[type=text],.modal input[type=search],.modal input[type=number],.modal input[type=date],.modal select,.modal textarea{
    border:1px solid var(--gw-borde-campo);border-radius:0;background:var(--surface);color:var(--text)}
  .modal input[type=text]:not(.in-rep),.modal input[type=search],.modal input[type=number]:not(.in-rep),.modal input[type=date],.modal select{
    height:40px;padding:0 12px;font-size:14px}
  .modal input:disabled{background:var(--row);color:var(--text-2)}
  .modal input:hover:not(:disabled),.modal select:hover,.modal textarea:hover{border-color:var(--text)}
  .modal input:focus,.modal select:focus,.modal textarea:focus{outline:0;border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
  .modal .campo label{font-size:11.5px;font-weight:400;letter-spacing:.1px;text-transform:none;color:var(--text-2)}
  .modal .elegido-item,.modal .sugerencias,.modal .rep-cli{border-color:var(--line);border-radius:4px}
  .modal .elegido-item{background:var(--surface-alt)}
  /* en el celular, toda la pantalla; lo ancho (la tabla de reparto) corre de costado adentro */
  @media (max-width:760px){
    .fondo-modal{padding:0}
    .modal{min-height:100vh;min-height:100dvh;border-radius:0}
    .modal .cab-modal{border-radius:0;min-height:52px}
    .modal .cuerpo-modal{padding:12px;overflow-x:auto}
    .cerrar-modal{width:44px;height:44px}
    .modal input[type=text]:not(.in-rep),.modal input[type=search],.modal input[type=number]:not(.in-rep),.modal input[type=date],.modal select{
      height:44px;font-size:16px}                     /* 16 px: con menos, el iPhone hace zoom al enfocar */
    .pie-modal .boton,.pie-modal .boton-2{height:40px}
  }

  /* ── Generador de Pallets ── la grilla de guardados y la papelera: el chip de estado en píldora
     sin borde, como el de Inventarios; el encabezado en peso 500; la página activa invertida */
  .estado-chip{border:0;border-radius:20px;padding:1px 8px;font-size:.64rem;font-weight:700;letter-spacing:.5px}
  .estado-chip.abierto{border:0;background:var(--chip-pend-bg);color:var(--chip-pend-tx)}
  .estado-chip.cerrado{border:0;background:var(--row);color:var(--text-2)}
  .lista-pallets{border-color:var(--line);border-radius:4px}
  .tabla-pal th[data-orden]:hover{color:var(--primary)}
  .acc-pal button:hover{background:var(--gw-velo-liso)}
  .paginas-pal button:hover:not(:disabled){background:var(--gw-velo-liso)}
  .paginas-pal button.actual{background:var(--text);color:var(--surface)}
  /* la emergente del armado (20/09/2026): en PC, compacta -es un formulario, no una botonera-; en
     el celular, para el dedo: se arma parado al lado del pallet */
  .modal .tarjetas-prov{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
  .modal .tarjetas-unidad{grid-template-columns:repeat(2,minmax(110px,180px))}
  .modal .tarjeta-prov{padding:10px 8px;border:1px solid var(--gw-borde-campo);border-radius:4px;background:var(--surface);
    font-family:var(--fd);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
  .modal .tarjeta-prov:hover{border-color:var(--text)}
  .modal .tarjeta-prov.sel{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--acento-suave)}
  .modal .tarjeta-prov.nueva{color:var(--text-2)}
  .modal .lista-items,.modal .lista-productos,.modal .lista-cajas,.modal .det-cajas,.modal .pie-totales{border-color:var(--line);border-radius:4px}
  .modal .lista-items{max-height:176px}
  .modal .item-fila{padding:8px 12px;border-bottom-color:var(--line)}
  .modal .item-nombre{font-size:13px;font-weight:500}
  .modal .item-fila.sel{box-shadow:inset 3px 0 0 var(--primary)}
  .modal .item-fila.nuevo{font-weight:500}
  .modal .producto-fila{padding:7px 12px}
  .modal .kg-entrada input:not(#x){height:52px;padding:0 14px;font-size:24px;font-weight:700}
  .modal .kg-entrada .campo.cajas input:not(#x){font-size:20px}
  .modal .pie-totales{padding:8px 12px;background:var(--row)}
  .modal .pie-totales .tot-kg{font-family:var(--fb);font-size:18px;font-weight:700}
  .modal .pie-totales .tot-kg small{color:var(--text-2)}
  .modal .boton-2:disabled,.modal .boton-2:disabled:hover{color:var(--text-2);background-image:none;box-shadow:none;opacity:.55;cursor:not-allowed}
  .modal .det-cajas > summary{color:var(--text-2);font-weight:500}
  .previa-tit{font-family:var(--fd);font-size:13px;font-weight:500}
  .previa-tit small{color:var(--text-2)}
  .modal .n-pallet{border:0;border-radius:20px;padding:1px 9px;font-size:11px;background:var(--chip-ok-bg);color:var(--chip-ok-tx)}
  .modal .n-pallet.abierto{border:0;background:var(--chip-pend-bg);color:var(--chip-pend-tx)}
  /* en el celular la grilla se apila (lo hace pallets.html): acá se le sacan las medidas de tabla,
     que esta capa pone con más peso que el módulo */
  @media (max-width:760px){
    /* «+ Nuevo pallet» (20/09/2026) es un .boton más en la barra de «Pallets guardados»; en
       angosto se toca con el dedo, parado al lado del pallet: renglón entero y 48 px de alto */
    .acc-guardados .nuevo-pallet{height:48px;font-size:15px}
    /* la emergente en el celular: tarjetas y renglones para el dedo, el KG a 30 px y el botón principal de 48 */
    .modal .tarjeta-prov{padding:16px 8px;font-size:15px}
    .modal .lista-items{max-height:34vh}
    .modal .item-fila{padding:13px 12px}
    .modal .item-nombre{font-size:14.5px}
    .modal .kg-entrada input:not(#x){height:64px;font-size:30px}
    .modal .kg-entrada .campo.cajas input:not(#x){font-size:24px}
    .col-form .fila-campos .boton-2,.ver-rotulo{height:44px}
    .pie-modal .boton{height:48px;font-size:15px}
    .envoltorio .tabla-pal td:not(#x){height:auto;padding:0;border:0;font-size:11.5px}
    .envoltorio .tabla-pal td.nom:not(#x){font-size:13.5px}
    .envoltorio .tabla-pal tbody tr:hover{background:none}
  }
  /* la barra de arriba en angosto: del estado de la conexión queda sólo el punto */
  @media (max-width:820px){
    .marco-barra .conn-indicator{margin:0 2px;padding:0 6px;background:none;flex:0 0 auto}
    .marco-barra #barraExtras,.marco-barra .marco-extras{flex:0 0 auto}
    .marco-marca{min-width:0;overflow:hidden;text-overflow:ellipsis}
    .marco-barra .conn-txt{display:none}
  }

  /* ── Depósito 3D ── la escena 3D es SIEMPRE oscura (la pinta Three.js, no sigue al tema). Lo que va encima de ella
     —leyenda, ayuda del pie, ficha del pallet— tiene que seguir con letra clara también en el tema claro: con los tokens
     del claro quedaba negro sobre negro. */
  .escena{--ink:#e2e8f0;--ink-2:#cbd5e1;--ink-3:#94a3b8;--linea:#2a3342;--warn:#f5a623;color:#e2e8f0;background:#161b23;border-color:var(--line)}

  /* ── Resumen Ejecutivo ── las alertas y los estados traían colores pastel escritos a mano, pensados para fondo oscuro:
     en el claro no se leían. Pasan a los tokens de los chips, que tienen su par claro y oscuro. «Sin actividad hoy» no
     es un error: va en gris, no en rojo. */
  .alerta{border-radius:4px}
  .alerta.red{background:var(--chip-dif-bg);border-color:var(--chip-dif-tx);color:var(--chip-dif-tx)}
  .alerta.warn{background:var(--chip-pend-bg);border-color:var(--chip-pend-tx);color:var(--chip-pend-tx)}
  .alerta.info{background:var(--chip-info-bg);border-color:var(--chip-info-tx);color:var(--chip-info-tx)}
  .alerta.ok{background:var(--chip-ok-bg);border-color:var(--chip-ok-tx);color:var(--chip-ok-tx)}
  .mod-act.ok{color:var(--chip-ok-tx)}
  .mod-act.off{color:var(--text-2)}
  .mod-err{color:var(--chip-dif-tx)}

  /* chips: píldora, sin borde */
  .chip{border:0;border-radius:20px;padding:1px 8px;font-size:.64rem;font-weight:700;letter-spacing:.5px;
    background:var(--row);color:var(--text-2)}
  .chip.admin{background:var(--chip-info-bg);color:var(--chip-info-tx)}
  .chip.activo{background:var(--chip-ok-bg);color:var(--chip-ok-tx)}
  .chip.baja{background:var(--chip-dif-bg);color:var(--chip-dif-tx)}
  .chip.pendiente{background:var(--chip-pend-bg);color:var(--chip-pend-tx)}
}

/* ══ 5. LA PORTADA Y EL LOGIN (index.html) ═════════════════════
   La portada tiene su propio vocabulario (--sur, --bdr, --red, --txt…; .top, .hero,
   .tile, #auth-gate, .auth-card) y era sólo-oscura con el rojo de Elemento. Acá se
   traduce al aspecto, claro y oscuro. Vale donde el módulo lo pide con
   <html data-gw="inicio">.

   NO se toca ni una línea del login: es por donde entran todos. Sólo cómo se ve.
   Mientras nadie entró (body.locked) marco.css esconde el marco, y el tema lo sigue
   poniendo menu-lateral.js antes del primer pintado, así que el login también
   respeta claro / oscuro. El logo de Elemento queda con su rojo: es la marca. */
:root[data-gw="inicio"]{
  --sur:var(--surface);--sur2:var(--surface-alt);--sur3:var(--row);--bdr:var(--line);
  --red:var(--primary);--rdim:var(--chip-dif-tx);--rbg:var(--chip-dif-bg);
  --grn:var(--positive);--yel:var(--warning);
  --txt:var(--text);--dim:var(--text-2);--mid:var(--text-2);--r:4px;

  body{padding-right:16px;padding-bottom:40px;align-items:stretch}
  body::before{display:none}                         /* el resplandor rojo que respiraba */

  /* adentro: el marco ya da la marca, el usuario y «Cerrar sesión» */
  .top{display:none}
  .hero,.sec-lb,.grid,.foot{max-width:none;width:auto;margin-left:16px}   /* el hueco izquierdo del body lo usa el menú */
  .hero{margin:14px 0 14px 16px;animation:none;opacity:1}
  .welcome-lb{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2)}
  .welcome{font-family:var(--fd);font-size:20px;font-weight:500;letter-spacing:.1px;text-transform:none;line-height:1.3;margin-top:0}
  .welcome span{color:inherit}
  .subtitle{font-size:13px;margin-top:2px;max-width:none}
  .sec-lb{font-size:11.5px;font-weight:500;letter-spacing:.5px;margin-bottom:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--gw-s2);
    padding:14px 16px;gap:6px;min-height:104px;color:var(--text);animation:none;opacity:1;
    transition:box-shadow .3s,background-color .3s}
  .tile::after{display:none}                         /* el brillo que cruzaba al pasar el mouse */
  .tile:hover{transform:none;border-color:var(--line);box-shadow:var(--gw-s4);background-image:var(--gw-velo)}
  .tile:focus-visible{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
  .tile .kbd{background:none;border-color:var(--line);color:var(--text-2);border-radius:3px}
  .tile-ic svg{width:1.6rem;height:1.6rem}
  .tile-nm{font-size:15px;font-weight:500;letter-spacing:.1px;text-transform:none}
  .tile-desc{font-size:12.5px;color:var(--text-2)}
  .foot{color:var(--text-2)}

  /* el estado de la conexión en la barra, igual que en los módulos clásicos */
  .marco-barra .conn-indicator{display:flex;align-items:center;gap:6px;height:32px;margin:0 10px;padding:0 12px;border:0;border-radius:3px;
    background:var(--gw-velo-barra);font-size:13px;font-weight:500;letter-spacing:normal}
  .marco-barra .conn-txt{color:#fff}
  @media (max-width:820px){
    .marco-barra .conn-indicator{margin:0 2px;padding:0 6px;background:none;flex:0 0 auto}
    .marco-barra .conn-txt{display:none}
    .marco-barra #barraExtras,.marco-barra .marco-extras{flex:0 0 auto}
    .marco-marca{min-width:0;overflow:hidden;text-overflow:ellipsis}
  }

  /* ── los tres indicadores (portada-kpis.js) ──
     Tarjetas del aspecto con su filete de color. La animación es UNA: el número cuenta desde
     cero y detrás se dibuja solo el trazo de los últimos 14 días. Los colores son tokens, así
     que siguen a la paleta que se elija. */
  .kpis-portada{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px 16px}
  .kpi-p{--c:var(--primary);position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"ico rot" "num num" "sub sub";align-items:center;gap:4px 10px;min-height:118px;padding:14px 16px 12px;
    background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:4px;box-shadow:var(--gw-s2);
    color:var(--text);text-decoration:none;transition:box-shadow .3s;
    animation:kpiSube .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
  #kpiP-docenas{--c:var(--positive)}
  #kpiP-inventarios{--c:var(--chip-pend-tx)}
  .kpi-p:hover{box-shadow:var(--gw-s4);background-image:var(--gw-velo)}
  .kpi-p:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .kpi-p > span,.kpi-p > b{position:relative;z-index:1}
  .kpi-p-ico{grid-area:ico;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    background:color-mix(in srgb,var(--c) 14%,transparent)}
  .kpi-p-ico svg{width:18px;height:18px;fill:var(--c)}
  .kpi-p-rot{grid-area:rot;font-size:12.5px;font-weight:500;color:var(--text-2)}
  .kpi-p-num{grid-area:num;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
  .kpi-p-sub{grid-area:sub;font-size:12px;color:var(--text-2)}
  /* el trazo: ocupa la mitad derecha, por detrás del texto. Se descubre con una cortina que se corre de
     izquierda a derecha (clip-path). NO con stroke-dasharray: con el grosor fijo de la línea
     (non-scaling-stroke) el navegador calcula mal el largo y el trazo queda cortado al medio. */
  .kpi-p-trazo{position:absolute;right:0;bottom:0;width:58%;height:60px;pointer-events:none;clip-path:inset(0 100% 0 0)}
  .kpi-p-trazo .linea{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
  .kpi-p-trazo .area{fill:color-mix(in srgb,var(--c) 11%,transparent)}
  .kpi-p.listo .kpi-p-trazo{animation:kpiTrazo 1.5s cubic-bezier(.4,0,.2,1) .2s forwards}
  .kpi-p.plano .kpi-p-trazo,.kpi-p.sin-dato .kpi-p-trazo,.kpi-p.cargando .kpi-p-trazo{display:none}
  .kpi-p.cargando .kpi-p-num{width:96px;height:36px;margin:2px 0;border-radius:4px;color:transparent;background:var(--row);
    animation:kpiLate 1.1s ease-in-out infinite}
  .kpi-p.sin-dato .kpi-p-num{color:var(--text-2)}
  @media (prefers-reduced-motion:reduce){
    .kpi-p,.kpi-p.listo .kpi-p-trazo,.kpi-p.cargando .kpi-p-num{animation:none}
    .kpi-p-trazo{clip-path:none}
  }
  @media (max-width:760px){
    .kpis-portada{grid-template-columns:1fr;gap:10px}
    .kpi-p{min-height:96px;padding:12px 14px 10px}
    .kpi-p-num{font-size:30px}
  }

  /* ── las herramientas se van de la portada: ya están en el menú lateral, siempre a la vista («son
     redundantes», el usuario). Se ESCONDEN, no se borran del HTML: el script de la portada las sigue
     nombrando (tileUsuarios, tileResumen, los atajos 1–7) y no se le toca una línea. ── */
  .sec-lb,.grid,.subtitle{display:none}
  /* …PERO en pantallas angostas las herramientas VUELVEN (20/09/2026). Hasta 820 px el menú lateral es un cajón
     escondido detrás de la hamburguesa, y sin las herramientas la portada del celular quedaba sin ninguna opción a la
     vista: lo notó el usuario en el simulador. Ahí van PRIMERO y compactas (ícono + nombre, de a dos): el que entra
     desde el celular viene a trabajar; los indicadores y los rankings quedan debajo. 820 px es el mismo corte en el
     que marco.css pasa el menú a cajón: si cambia uno, cambia el otro. */
  @media (max-width:820px){
    .sec-lb,.grid{display:revert}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
    .sec-lb{margin:0 0 8px 16px}
    .hero{order:0;margin-bottom:10px} .sec-lb{order:1} .grid{order:2} .kpis-portada{order:3} .tops-portada{order:4} .foot{order:5}
    .tile{flex-direction:row;align-items:center;gap:10px;min-height:54px;padding:8px 12px}
    .tile-ic{flex:0 0 auto}
    .tile-ic svg{width:1.4rem;height:1.4rem}
    .tile-nm{font-size:13.5px;line-height:1.2}
    .tile-desc,.tile .kbd,.tile .arrow{display:none}
  }

  /* ── los dos rankings (portada-kpis.js): top 5 de clientes y de artículos ──
     Una tarjeta del aspecto con cinco renglones; debajo de cada uno, una barra que CRECE hasta su
     proporción contra el primero. Misma idea que el trazo de los KPI: la animación dice algo. */
  .tops-portada{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px 16px}
  .top-p{--c:var(--primary);background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--gw-s2);
    padding:14px 16px 10px;min-width:0;animation:kpiSube .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
  #topP-articulos{--c:var(--positive)}
  .top-p header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:8px}
  .top-p h3{margin:0;font-size:15px;font-weight:500;letter-spacing:.1px;color:var(--text)}
  .top-p small{font-size:12px;color:var(--text-2)}
  .top-p ol{list-style:none;margin:0;padding:0}
  .top-p li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:0 8px;padding:7px 0 9px;position:relative;
    border-top:1px solid var(--line);font-size:13px}
  .top-p li:first-child{border-top:0}
  .top-p .pos{font-size:11.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
  .top-p li:first-child .pos{color:var(--c)}
  .top-p .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
  .top-p .doc{font-weight:700;font-variant-numeric:tabular-nums}
  .top-p .barra{position:absolute;left:30px;right:0;bottom:3px;height:3px;border-radius:3px;background:var(--row);overflow:hidden}
  .top-p .barra::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--c);opacity:.85;
    width:calc(var(--p,0) * 100%);transform:scaleX(0);transform-origin:left center}
  .top-p.listo .barra::after{animation:topCrece .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--j,0) * 90ms)}
  .top-p li.vacio{display:block;padding:18px 0;color:var(--text-2);text-align:center;border-top:0}
  .top-p.cargando li{min-height:34px}
  .top-p.cargando .nom{height:12px;border-radius:3px;background:var(--row);animation:kpiLate 1.1s ease-in-out infinite}
  .top-p.cargando .barra{display:none}
  @media (prefers-reduced-motion:reduce){
    .top-p,.top-p.listo .barra::after,.top-p.cargando .nom{animation:none}
    .top-p .barra::after{transform:none}
  }
  @media (max-width:760px){ .tops-portada{grid-template-columns:1fr;gap:10px} }

  /* el login: una tarjeta del aspecto sobre el fondo de la app */
  #auth-gate{background:var(--gw-fondo)}
  .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--gw-s24);
    padding:26px 24px;animation:none}
  .auth-card h2{font-family:var(--fd);font-size:20px;font-weight:500;letter-spacing:.1px;text-transform:none;color:var(--text)}
  .auth-card h2 span{color:inherit}
  .auth-card .a-sub{font-size:12.5px;color:var(--text-2);margin:2px 0 20px}
  .auth-card label{font-size:11.5px;font-weight:400;letter-spacing:.1px;color:var(--text-2)}
  .auth-card input,.auth-card select{height:40px;padding:0 12px;border:1px solid var(--gw-borde-campo);border-radius:0;
    background-color:var(--surface);color:var(--text);font-size:14px}
  .auth-card input:hover,.auth-card select:hover{border-color:var(--text)}
  .auth-card input:focus,.auth-card select:focus{outline:0;border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
  .auth-card select option{background:var(--surface);color:var(--text)}
  .auth-card .a-btn{height:40px;padding:0 16px;border-radius:3px;background-color:var(--primary);color:var(--sobre-prim);
    font-family:var(--fb);font-size:13.5px;font-weight:500;letter-spacing:.3px;box-shadow:var(--gw-s2)}
  .auth-card .a-btn:hover{opacity:1;background-image:var(--gw-velo)}
  .auth-card .a-btn:disabled{opacity:.55;box-shadow:none;background-image:none}
  .a-err{background:var(--chip-dif-bg);border:0;color:var(--chip-dif-tx);border-radius:4px}
  .a-nota{background:var(--chip-ok-bg);border:0;color:var(--chip-ok-tx);border-radius:4px}
  .a-btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

}

/* Los @keyframes de los indicadores de la portada van ACÁ, sueltos: adentro de una regla anidada el
   navegador los ignora sin avisar (así quedó el trazo sin dibujarse la primera vez). */
@keyframes kpiSube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kpiTrazo{to{clip-path:inset(0 0 0 0)}}
@keyframes kpiLate{50%{opacity:.45}}
@keyframes topCrece{to{transform:scaleX(1)}}
}