/* ═══════════════════════════════════════════════════════════════════════
   Tokens del sistema de diseño ("Tarjetas planas"), con los colores de
   INTRADE LINK (res.company: primary_color #0F64A9; el azul marino #055199
   y el celeste #25AAE1 del logo). Un solo archivo para los dos temas, la escala
   tipográfica, el espacio, los radios y el movimiento. Se pega tal cual
   en web/ruta.html, web/login.html y web/tablero.html (o se sirve como
   /static/tokens.css) y TODO el CSS de la app se escribe contra estas
   variables. Ningún color, tamaño ni duración va escrito a mano en un
   componente.

   Reglas que este archivo hace cumplir:
   - SIN sombras ni degradados: la jerarquía la dan --linea y el peso.
   - El azul de la empresa (--marca) en: la cifra grande, el botón
     principal, la pestaña activa, el foco. Nunca de fondo grande.
   - Lo urgente, lo vencido y lo que se pierde va en --alerta (rojo), no en
     el color de la marca: una deuda en azul no se lee como deuda.
   - Verde y ámbar son SEMÁNTICOS (hay existencias / hay que cobrar), no acentos.
   - Cifras: Manrope 800 + tabular-nums, siempre.
   - Tres estados de tema: sin atributo (sigue al sistema),
     [data-theme="light"] y [data-theme="dark"] (el interruptor de la cuenta).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La fuente, EMBEBIDA. No desde Google en producción: la app tiene que
   verse igual sin señal, y el service worker guarda /static/. Los woff2
   se bajan una vez (ver marca.md → "Cómo traer Manrope"). ── */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fuentes/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fuentes/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fuentes/manrope-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("/static/fuentes/manrope-800.woff2") format("woff2")}

:root{
  /* ── color · tema claro (el completo va acá; el oscuro solo redefine) ── */
  --fondo:#F7F7F8;          /* la pantalla */
  --superficie:#FFFFFF;     /* tarjetas, campos, hojas */
  --tinta:#14171A;          /* texto principal */
  --sec:#3F464D;            /* texto secundario con peso */
  --ter:#7C8590;            /* texto de apoyo, rótulos, placeholders */
  --linea:#E6E8EB;          /* el ÚNICO separador */
  --marca-fija:#055199;     /* el del ícono y el splash: fijo, no cambia con el tema */
  --marca:#0F64A9;          /* la empresa. Con intención. 5,7:1 sobre --fondo */
  --marca-tonal:rgba(15,100,169,.08);  /* fondo de la pestaña activa, toque */
  --alerta:#C62828;         /* vencido, urgente, se va, borrar. 5,2:1 sobre --fondo */
  --alerta-tonal:rgba(198,40,40,.08);
  --sobre-alerta:#FFFFFF;
  --carbon:#0A2540;         /* la marca sobre oscuro */
  --logo-globo:#055199;     /* el globo del logotipo */
  --logo-letras:#055199;    /* "INTRADE LINK" del logotipo: azul marino, como en el logo real */
  --celeste:#25AAE1;        /* la órbita del logotipo. Solo el logo: no llega a 4,5:1 */
  --ok:#12855A;             /* existencias PROPIAS */
  --ok-tonal:rgba(18,133,90,.10);
  --ambar:#B86A00;          /* atención: cobrar, mirar la cartera de otro */
  --ambar-tonal:rgba(184,106,0,.10);
  --sobre-marca:#FFFFFF;     /* texto encima de --marca */
  --velo:rgba(20,23,26,.40);/* detrás de las hojas */

  /* ── tipografía ── */
  --fuente:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;   /* solo referencias/códigos */
  --t-36:2.25rem;  --t-30:1.875rem; --t-26:1.625rem; --t-22:1.375rem; --t-20:1.25rem;
  --t-17:1.0625rem;--t-15:.9375rem; --t-14:.875rem;   --t-13:.8125rem; --t-12:.75rem;
  --t-11:.6875rem;
  --alto:1.45;              /* line-height de cuerpo */
  --alto-cifra:1.05;        /* line-height de números grandes */
  --espaciado-cifra:-.03em; /* letter-spacing de números grandes */
  --espaciado-titulo:-.02em;
  --espaciado-rotulo:.08em; /* rótulos en mayúsculas */

  /* ── espacio · grilla de 4 ── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;
  --margen:16px;            /* borde de pantalla */
  --fila:56px;              /* tarjeta de cliente, mínimo */
  --toque:48px;             /* objetivo táctil mínimo */

  /* ── forma ── */
  --r12:12px;               /* botones, campos, pastillas, tarjetas chicas */
  --r14:14px;               /* tarjetas de cliente y producto */
  --r20:20px;               /* hojas inferiores */
  --r24:24px;               /* hoja de producto, splash */
  --pill:999px;             /* chips, existencias, avisos */
  --borde:1px solid var(--linea);

  /* ── movimiento · UNA curva, un reloj ── */
  --curva:cubic-bezier(.2,.7,.2,1);      /* arranca rápido, frena suave, no rebota */
  --t-toque:120ms;
  --t:200ms;                             /* casi todo */
  --t-pantalla:240ms;                    /* deslizar entre pantallas */
  --t-hoja:260ms;                        /* subir una hoja */
  --t-cifra:300ms;                       /* contar un número */
  --paso-cascada:22ms;                   /* entre filas al entrar (máx. 8 filas) */

  /* ── capas ── */
  --z-cabecera:30; --z-pastilla:64; --z-aviso-version:65; --z-hoja:70; --z-toast:90;

  color-scheme:light;
}

/* ── tema oscuro: sigue al sistema, salvo elección explícita de claro ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#0E1114; --superficie:#151A1F; --tinta:#F2F5F7; --sec:#C4CCD3; --ter:#7F8B96;
    --linea:#232A31; --marca:#5AB0EE; --marca-tonal:rgba(90,176,238,.14); --carbon:#06121F;
    --logo-globo:#5AB0EE; --celeste:#A6DDF8; --logo-letras:#F2F5F7;
    --alerta:#FF6B6B; --alerta-tonal:rgba(255,107,107,.14); --sobre-alerta:#1A0408;
    --ok:#3DD68C; --ok-tonal:rgba(61,214,140,.12); --ambar:#F2A93B; --ambar-tonal:rgba(242,169,59,.12);
    --sobre-marca:#04121F; --velo:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
/* ── el interruptor de la cuenta gana en las dos direcciones ── */
:root[data-theme="dark"]{
  --fondo:#0E1114; --superficie:#151A1F; --tinta:#F2F5F7; --sec:#C4CCD3; --ter:#7F8B96;
  --linea:#232A31; --marca:#5AB0EE; --marca-tonal:rgba(90,176,238,.14); --carbon:#06121F;
  --logo-globo:#5AB0EE; --celeste:#A6DDF8; --logo-letras:#F2F5F7;
  --alerta:#FF6B6B; --alerta-tonal:rgba(255,107,107,.14); --sobre-alerta:#1A0408;
  --ok:#3DD68C; --ok-tonal:rgba(61,214,140,.12); --ambar:#F2A93B; --ambar-tonal:rgba(242,169,59,.12);
  --sobre-marca:#04121F; --velo:rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ── accesibilidad: dos interruptores más en la cuenta ── */
/* Letra grande: todo sube 15 %. Como todo está en rem, basta con esto. */
:root[data-letra="grande"]{font-size:115%}
/* Alto contraste: los grises se oscurecen y las líneas se marcan. */
:root[data-contraste="alto"]{--ter:#4A545C;--sec:#22292E;--linea:#B9C0C6}
@media (prefers-color-scheme:dark){
  :root[data-contraste="alto"]:not([data-theme="light"]){--ter:#B5C0C8;--sec:#E6ECF0;--linea:#3E4A53}
}
:root[data-theme="dark"][data-contraste="alto"]{--ter:#B5C0C8;--sec:#E6ECF0;--linea:#3E4A53}

/* ── base ── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:500 var(--t-15)/var(--alto) var(--fuente);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overscroll-behavior-y:contain}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── utilidades de cifra y rótulo, para no repetirlas en cada componente ── */
.cifra{font-weight:800;letter-spacing:var(--espaciado-cifra);line-height:var(--alto-cifra);font-variant-numeric:tabular-nums}
.rotulo{font-size:var(--t-11);font-weight:800;letter-spacing:var(--espaciado-rotulo);text-transform:uppercase;color:var(--ter)}
.tocable{min-width:var(--toque);min-height:var(--toque)}