/* TTB 2.0 — tokens de color y tipografía (2026-10-21).

   Estructura tomada TAL CUAL de diseno/ttb-erp-oficina.html (los mismos
   nombres de token, el mismo cristal, los dos bloques de modo oscuro). Lo
   único que cambia son los valores de marca, por instrucción de Pablo: «usa la
   colorimetría de TTB». La maqueta traía rojo + azul (que es la paleta de TIB,
   otra empresa); aquí van los colores medidos del logo de TTB:

     azul    #3471BA  (las dos T)  → acción y navegación
     naranja #E1633D  (la B)       → identidad y lo que urge

   El rojo queda SOLO para lo negativo (--mal): un botón naranja junto a una
   cifra en rojo se confunde de un vistazo.

   Cuatro tokens con nombre que dice para qué sirven (2026-10-21):
     --azul / --naranja               la MARCA: fondos, barras, bordes, rellenos
                                      y botones con texto blanco encima.
     --azul-texto / --naranja-texto   texto chico de color sobre blanco (el de
                                      marca no alcanza el contraste mínimo 4.5:1).
   En oscuro se aclaran: --azul #4683CC (4.63:1 sobre #0f1624) y el naranja
   pasa tal cual (5.22:1).

   ALCANCES SIEMPRE CLAROS (Pablo, 2026-10-21): el bloque claro también se
   declara en `body.op` (la app del operador: bajo el sol un teléfono en modo
   oscuro es ilegible y muchos lo traen sin saberlo) y en `.mapa-caja` (las
   teselas del mapa siempre son claras; un marcador aclarado no se vería). El
   modo oscuro solo toca la raíz, así que adentro de esos dos se quedan los
   valores claros, hoy y para lo que se agregue después. */
:root,body.op,.mapa-caja{
  --rail-tn:12 24 44;        /* navy TTB para el vidrio oscuro */
  --rail-tx:#93a6c6; --rail-on:#fff;
  --naranja:#E1633D; --naranja-texto:#BC5333; --naranja-sv:#FCEDE6;
  --azul:#3471BA; --azul-texto:#2B5E9E; --azul-sv:#E8F0FA;
  --pg:#e9eef6; --pg-2:#dfe6f1;
  --sup:#fff; --sup-2:#f6f8fc; --sup-3:#e9eef6;
  --gl:255 255 255;          /* vidrio claro */
  --ink:#0a1322; --ink-2:#4e5b73; --ink-3:#848fa5;
  --bd:#dde4ef; --bd-2:#c8d2e2;
  --ok:#0a7349; --ok-sv:#e0f3ea;
  --ojo:#8a5d04; --ojo-sv:#fcf0d4;
  --mal:#ae1b27; --mal-sv:#fbe7e9;
  --grano:.04;
  --bdA:rgba(52,113,186,.115); --bdB:rgba(225,99,61,.08);
  --glr:.70; --glc:.62; --glb:.66;
  --wm:rgba(52,113,186,.155); --wmr:rgba(225,99,61,.18); --wml:rgba(52,113,186,.13);
  --ui:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mo:'IBM Plex Mono',ui-monospace,monospace;
}
body.op,.mapa-caja{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --rail-tn:4 9 18; --rail-tx:#8294b2;
  --naranja:#E1633D; --naranja-texto:#E1633D; --naranja-sv:#2B1711;
  --azul:#4683CC; --azul-texto:#4683CC; --azul-sv:#101e36;
  --pg:#070b13; --pg-2:#040710;
  --sup:#0f1624; --sup-2:#141c2c; --sup-3:#1b2436;
  --gl:22 31 48;
  --ink:#e7ecf6; --ink-2:#95a2bb; --ink-3:#69758d;
  --bd:#1d2635; --bd-2:#2a3447;
  --ok:#3fb582; --ok-sv:#0a2a1c;
  --ojo:#d0a03a; --ojo-sv:#271e10;
  --mal:#e2626c; --mal-sv:#2c1317;
  --grano:.055;
  --bdA:rgba(74,144,217,.12); --bdB:rgba(238,122,85,.09);
  --glr:.62; --glc:.68; --glb:.70;
  --wm:rgba(111,176,232,.115); --wmr:rgba(238,122,85,.2); --wml:rgba(111,176,232,.15);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --rail-tn:4 9 18; --rail-tx:#8294b2;
  --naranja:#E1633D; --naranja-texto:#E1633D; --naranja-sv:#2B1711;
  --azul:#4683CC; --azul-texto:#4683CC; --azul-sv:#101e36;
  --pg:#070b13; --pg-2:#040710;
  --sup:#0f1624; --sup-2:#141c2c; --sup-3:#1b2436;
  --gl:22 31 48;
  --ink:#e7ecf6; --ink-2:#95a2bb; --ink-3:#69758d;
  --bd:#1d2635; --bd-2:#2a3447;
  --ok:#3fb582; --ok-sv:#0a2a1c;
  --ojo:#d0a03a; --ojo-sv:#271e10;
  --mal:#e2626c; --mal-sv:#2c1317;
  --grano:.055;
  --bdA:rgba(74,144,217,.12); --bdB:rgba(238,122,85,.09);
  --glr:.62; --glc:.68; --glb:.70;
  --wm:rgba(111,176,232,.115); --wmr:rgba(238,122,85,.2); --wml:rgba(111,176,232,.15);
  color-scheme:dark;
}
/* Íconos del sprite (parciales/iconos.svg), con las reglas de la maqueta. */
svg.i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:16px;height:16px;stroke-width:1.9}
svg.i.lg{width:28px;height:28px;stroke-width:1.9}
.mono{font-family:var(--mo);letter-spacing:-.02em}