/* * Tokens de color de Escalautos: UN solo lugar para los dos modos (2026-10-05). * * El sitio nació oscuro (el Autoverso es de noche) y Estiven pidió un modo claro como el del CRM: instantáneo, con * buen contraste, que cubra todo el sitio y lo que se construya después. La regla es la del CRM: los colores se * nombran por su FUNCIÓN, no por su valor, y se definen dos veces —oscuro en :root (el modo por defecto) y claro * bajo html[data-theme="light"]—. Ninguna hoja nueva escribe un color fijo: usa estos tokens (lo vigila * .herramientas/reglas-web.sh). Las hojas viejas se van pasando a tokens; mientras tanto, assets/css/escalautos-claro.css * cubre en claro lo que todavía está escrito a mano. * * Cómo se elige el modo: la cookie `ea_tema` (inc/tema.php la lee en el servidor y pone el atributo en ; un * guion en el la lee también por si la página viene de una caché). Sin cookie: oscuro. * * Contraste (WCAG AA, 4,5:1 para texto normal): en claro el morado de marca #0099f6 sobre blanco da 6,5:1; el morado * claro #37b3ff sólo 3,3:1, así que los textos y enlaces morados en claro usan #0d7cbf (8,1:1). Los verdes de precio y * éxito también cambian: #34d399 sobre blanco da 1,9:1; #0b8a5c da 5,0:1. */ :root { color-scheme: dark; /* ── Fondos y superficies ── */ --ea-fondo: #021119; /* el lienzo de la página (= la noche de marca) */ --ea-fondo-2: #031621; /* franjas que se separan apenas del lienzo */ --ea-superficie: #031927; /* tarjetas, paneles, tarjetas de servicio */ --ea-superficie-2: #042234; /* elevado: menús, modales, campos */ --ea-vidrio: rgba(255, 255, 255, 0.05); /* tarjeta de vidrio de la web */ --ea-vidrio-2: rgba(255, 255, 255, 0.08); /* vidrio al pasar el mouse / chips */ --ea-velo: rgba(2, 17, 25, 0.72); /* detrás de modales y menús desplegados */ /* ── Texto ── */ --ea-texto: #ffffff; --ea-texto-2: rgba(255, 255, 255, 0.72); /* bajadas y descripciones */ --ea-texto-3: rgba(255, 255, 255, 0.55); /* notas, fechas, placeholders */ --ea-texto-inverso: #021119; /* texto sobre un fondo blanco (ícono de botón, placa) */ /* ── Líneas ── */ --ea-linea: rgba(255, 255, 255, 0.1); --ea-linea-2: rgba(255, 255, 255, 0.18); /* bordes de botones secundarios, foco suave */ --ea-linea-acento: rgba(0, 153, 246, 0.25); /* ── Acento (el morado de marca y su familia) ── */ --ea-acento: #0099f6; --ea-acento-fuerte: #0d7cbf; /* hover / pulsado */ --ea-acento-texto: #85d6ff; /* texto morado legible sobre el fondo */ --ea-acento-suave: rgba(0, 153, 246, 0.16); /* fondos suaves de chips, tarjetas elegidas */ --ea-acento-borde: rgba(55, 179, 255, 0.45); --ea-sobre-acento: #ffffff; /* texto sobre el morado */ /* ── Estados ── */ --ea-exito: #34d399; /* precio, hecho */ --ea-exito-suave: rgba(52, 211, 153, 0.14); --ea-alerta: #f19238; --ea-error: #ff6b6b; --ea-whatsapp: #00e688; /* ── Servicios: el color de cada moneda, como texto legible sobre el fondo (hero de la portada) ── */ --ea-srv-morado: #62c6ff; --ea-srv-verde: #34e39a; --ea-srv-azul: #4cc3ff; --ea-srv-naranja: #ffab5e; /* ── Luz y sombra ── */ --ea-brillo: rgba(0, 153, 246, 0.22); /* resplandores del fondo */ --ea-brillo-2: rgba(36, 106, 188, 0.12); --ea-brillo-3: rgba(35, 214, 255, 0.13); --ea-sombra: 0 20px 50px rgba(0, 0, 0, 0.45); --ea-sombra-2: 0 8px 24px rgba(0, 0, 0, 0.35); --ea-rejilla: 1; /* la trama de fondo: 1 se ve, 0 no */ --ea-logo-invertir: 1; /* logos de aliados: en oscuro van en blanco (filter), en claro no */ /* ── Los nombres que ya usaban las hojas anteriores (alias) ── */ --ea-night: #021119; /* la noche de MARCA: no cambia con el modo (tarjeta Escalamigos, placas) */ --ea-txt: var(--ea-texto); --ea-txt-2: var(--ea-texto-2); --ea-card: rgba(255, 255, 255, 0.04); --ea-line: var(--ea-linea); --ea-tarjeta: var(--ea-superficie); --ea-borde: var(--ea-linea-acento); --ea-chat-fondo: var(--ea-superficie); --ea-chat-capa: var(--ea-superficie-2); --ea-chat-linea: rgba(255, 255, 255, 0.09); --ea-chat-texto: rgba(255, 255, 255, 0.92); --ea-chat-suave: rgba(255, 255, 255, 0.62); } html[data-theme="light"] { color-scheme: light; --ea-fondo: #ffffff; --ea-fondo-2: #fbfcfe; --ea-superficie: #f9fcfe; /* lila 50 del brand book */ --ea-superficie-2: #ffffff; --ea-vidrio: rgba(0, 153, 246, 0.05); --ea-vidrio-2: rgba(0, 153, 246, 0.09); --ea-velo: rgba(27, 27, 27, 0.45); --ea-texto: #1b1b1b; /* la tinta del logo */ --ea-texto-2: #3f484d; /* 8,2:1 sobre blanco */ --ea-texto-3: #5b666b; /* 5,1:1 */ --ea-texto-inverso: #ffffff; --ea-linea: rgba(27, 27, 27, 0.1); --ea-linea-2: rgba(27, 27, 27, 0.18); --ea-linea-acento: rgba(0, 153, 246, 0.22); --ea-acento: #0099f6; --ea-acento-fuerte: #0d7cbf; --ea-acento-texto: #0c73b1; --ea-acento-suave: #f3f9fc; /* lila 100 */ --ea-acento-borde: rgba(0, 153, 246, 0.35); --ea-sobre-acento: #ffffff; --ea-exito: #0a7d53; /* 5:1 sobre blanco (con #0b8a5c el precio quedaba en 4,4) */ --ea-exito-suave: rgba(11, 138, 92, 0.12); --ea-alerta: #b85c0a; --ea-error: #c62828; --ea-whatsapp: #0f9d6a; --ea-srv-morado: #0d7cbf; --ea-srv-verde: #0b8a5c; --ea-srv-azul: #0072bb; --ea-srv-naranja: #b85c0a; --ea-brillo: rgba(0, 153, 246, 0.09); --ea-brillo-2: rgba(36, 106, 188, 0.05); --ea-brillo-3: rgba(35, 214, 255, 0.06); --ea-sombra: 0 18px 48px rgba(14, 63, 90, 0.12), 0 2px 6px rgba(14, 63, 90, 0.05); /* morada y suave: el gris ensucia el blanco */ --ea-sombra-2: 0 8px 22px rgba(14, 63, 90, 0.09); --ea-rejilla: 0.45; --ea-logo-invertir: 0; --ea-card: rgba(0, 153, 246, 0.04); --ea-primary-300: #0d7cbf; /* el «acento claro» de escalautos-marca.css: en claro tiene que leerse sobre blanco */ --ea-chat-linea: rgba(27, 27, 27, 0.1); --ea-chat-texto: #1b1b1b; --ea-chat-suave: #3f484d; } /* Sin animación al cambiar: el CRM cambia de golpe y se siente más rápido que un fundido. Mientras cambia, ninguna transición (tema.js pone la clase un instante). */ html.ea-tema-cambiando *, html.ea-tema-cambiando *::before, html.ea-tema-cambiando *::after { transition: none !important; }