/* Tokens de color de los 11 modos de manejo (modos.js). Una sola fuente: index.html y todas las páginas aparte (catálogo, guías, juegos,
   legal…) cargan esta hoja; tema.js (o el script del <head> de index.html) pone html[data-modo] antes de pintar.
   Base (:root) = «EMIR Verde», el menta sobre negro de siempre (los valores de index.html). Sin atributo = «EMIR» (negro). Claro y EV son los claros.
   Solo variables y el logo (va en todas las páginas): las reglas que pintan piezas del portal viven en modos.css. */
:root{--negro:#000;--fondo:#07090C;--sup:#0F141B;--sup2:#151B24;--linea:rgba(255,255,255,.09);--linea2:rgba(255,255,255,.16);
  --texto:#EEF1F5;--gris:#9AA3B0;--gris2:#6B7480;--menta:#89FF9E;--menta-osc:rgba(137,255,158,.12);
  --ambar:#FFB020;--ambar-osc:rgba(255,176,32,.12);--rojo:#FF5A4E;--rojo-osc:rgba(255,90,78,.12)}
:root{--menta-rgb:137,255,158;--sobre-menta:#000;--panel:#0B0F14;--tinta:#fff;--tinta-rgb:255,255,255;--texto2:#C9D0D9;--logo-txt:#fff;--vidrio-rgb:9,13,21}

/* EMIR: la misma paleta de la bienvenida y de las páginas de marca (registro-celular.css, marca.css): casi negro #07090C, blanco #EEF1F5,
   grises #9AA3B0 y plata 206,214,224; acentos en grises y el único color lo ponen las fotos. Contraste medido (docs/duotonos.md) */
html:not([data-modo]),html[data-modo="emir"]{--menta:#EEF1F5;--menta-rgb:238,241,245;--menta-osc:rgba(255,255,255,.08);--sobre-menta:#0B0F14;
  --negro:#000;--fondo:#07090C;--sup:#0F141B;--sup2:#151B24;--panel:#0B0F14;--linea:rgba(255,255,255,.09);--linea2:rgba(255,255,255,.16);
  --texto:#EEF1F5;--texto2:#C9D0D9;--gris:#9AA3B0;--gris2:#848D99;--tinta:#fff;--tinta-rgb:255,255,255;--vidrio-rgb:9,13,21;--logo-txt:#fff;
  --plata-rgb:206,214,224;--dt1:#EEF1F5;--dt2:#CED6E0}
/* Pista: amarillo con negro, como la señalización de pista y de taller. Mismo casi negro que EMIR; botones amarillos con letra negra (14.9:1);
   dos tonos amarillo → ámbar (−15°, la luz baja 0.06 porque el ámbar a la misma luz se apaga en pantalla; 12.0:1). El amarillo nunca va como letra sobre claro */
html[data-modo="pista"]{--menta:#FFD60A;--menta-rgb:255,214,10;--menta-osc:rgba(255,214,10,.12);--sobre-menta:#000;
  --fondo:#07090C;--sup:#0F141B;--sup2:#151B24;--panel:#0B0F14;--gris2:#848D99;--dt1:#FFD60A;--dt2:#FDB71E}
html[data-modo="carrera"]{--menta:#FF2E3E;--menta-rgb:255,46,62;--menta-osc:rgba(255,46,62,.13);--sobre-menta:#000;
  --fondo:#0A0607;--sup:#161012;--sup2:#1F1619;--panel:#110B0D}
html[data-modo="hibrido"]{--menta:#3DA9FF;--menta-rgb:61,169,255;--menta-osc:rgba(61,169,255,.13);--sobre-menta:#000;
  --fondo:#050A12;--sup:#0C1422;--sup2:#121C2D;--panel:#08101B}
html[data-modo="sport"]{--menta:#FF8A1F;--menta-rgb:255,138,31;--menta-osc:rgba(255,138,31,.13);--sobre-menta:#000;
  --fondo:#0A0806;--sup:#16110C;--sup2:#1F1810;--panel:#100C08}
html[data-modo="nitro"]{--menta:#B57BFF;--menta-rgb:181,123,255;--menta-osc:rgba(181,123,255,.14);--sobre-menta:#000;
  --fondo:#08060E;--sup:#120F1C;--sup2:#1A1528;--panel:#0D0A15}
/* Rosa y Lila (pedido para técnicas): mismos fondos oscuros con un velo del color; ambos pasan de 6.5:1 en cualquier fondo y llevan letra negra encima */
html[data-modo="rosa"]{--menta:#FF6FAE;--menta-rgb:255,111,174;--menta-osc:rgba(255,111,174,.13);--sobre-menta:#000;
  --fondo:#0C0609;--sup:#180F14;--sup2:#22151C;--panel:#130A0F}
html[data-modo="lila"]{--menta:#D2B4FF;--menta-rgb:210,180,255;--menta-osc:rgba(210,180,255,.13);--sobre-menta:#000;
  --fondo:#0A0810;--sup:#14111D;--sup2:#1C1828;--panel:#100C18}
/* EV: el único claro. Verde más profundo para que se lea sobre blanco y lleve letra blanca encima */
html[data-modo="ev"]{color-scheme:light;--menta:#06703A;--menta-rgb:6,112,58;--menta-osc:rgba(6,112,58,.1);--sobre-menta:#fff;
  --negro:#fff;--fondo:#F2F5F3;--sup:#FFFFFF;--sup2:#E8EEEA;--panel:#FFFFFF;--linea:rgba(14,23,19,.11);--linea2:rgba(14,23,19,.2);
  --texto:#0E1713;--texto2:#2F3A35;--gris:#4D5A53;--gris2:#5A665F;--tinta:#0E1713;--tinta-rgb:14,23,19;--logo-txt:#0E1713;--vidrio-rgb:255,255,255;
  --ambar:#1B55AD;--ambar-osc:rgba(27,85,173,.12);--rojo:#B8231A;--rojo-osc:rgba(184,35,26,.1)}   /* rojo: #D42A1E daba 4.3:1 sobre las cajas grises */
/* EMIR Claro (Rodrigo, 29 oct: «uno al revés, de fondo blanco con lo demás negro elegante»): el inverso de EMIR. Blanco puro, negro tinta #0B0F14
   para letra y botones (19.0:1), grises medidos sobre blanco, #F4F5F7 y #EAECEF: gris #59616D 6.1:1 / 5.7:1, gris2 #626A76 5.5:1 / 5.0:1 / 4.6:1.
   Sin menta: en blanco no pasa contraste (1.3:1); el color lo ponen las fotos, como en EMIR. Comparte con EV las reglas de modo claro */
html[data-modo="claro"]{color-scheme:light;--menta:#0B0F14;--menta-rgb:11,15,20;--menta-osc:rgba(11,15,20,.06);--sobre-menta:#fff;
  --negro:#fff;--fondo:#FFFFFF;--sup:#F4F5F7;--sup2:#EAECEF;--panel:#FFFFFF;--linea:rgba(11,15,20,.1);--linea2:rgba(11,15,20,.18);
  --texto:#0B0F14;--texto2:#2B323C;--gris:#59616D;--gris2:#626A76;--tinta:#0B0F14;--tinta-rgb:11,15,20;--logo-txt:#0B0F14;--vidrio-rgb:255,255,255;
  --plata-rgb:89,97,109;--dt1:#0B0F14;--dt2:#2B323C;
  --ambar:#1B55AD;--ambar-osc:rgba(27,85,173,.1);--rojo:#C8261B;--rojo-osc:rgba(200,38,27,.08)}
/* «En espera» (Órdenes, Agenda, avisos): azul, no naranja (Rodrigo, 4 nov). Claro y EV lo traen arriba (#1B55AD, 5.0:1 a 7.1:1 sobre sus fondos);
   en los modos oscuros, #6FA8FF (7.2:1 a 8.4:1). El gris de apoyo de los oscuros que heredan de index.html sube a #848D99 (AA sobre sus fondos) */
html:not([data-modo="claro"]):not([data-modo="ev"]){--ambar:#6FA8FF;--ambar-osc:rgba(111,168,255,.14);--gris2:#848D99}

/* logo EMIR: en los modos, el motor toma el color del modo y «EMIR» el del texto (máscara con la misma imagen) */
html[data-modo]:not([data-modo="verde"]):not([data-modo="emir"]) img[src$="emir-logo-blanco.png"]{object-position:0 -99999px;
  background:linear-gradient(90deg,var(--menta) 0 43%,var(--logo-txt) 43%);
  -webkit-mask:url(emir-logo-blanco.png) center/100% 100% no-repeat;mask:url(emir-logo-blanco.png) center/100% 100% no-repeat}

/* EMIR (blanco y negro): el logo va todo en blanco, igual que en la bienvenida (#rcBienvenida .rc-logo img); en EMIR Verde sigue verde */
:is(html:not([data-modo]),html[data-modo="emir"]) img[src$="emir-logo-blanco.png"]{filter:brightness(0) invert(1)}
