/* ========================================================================== IRON ROUTE — EL MODO CLARO, DE VERDAD EL PROBLEMA EXACTO QUE ARREGLA: `ajustes-vivos.js` pone `data-theme="light"` en el ``… y **ningún sitio redefinía los tokens para claro**. `tokens.css` lo dice literalmente: «No light theme; keep dark». Resultado: el conmutador de tema movía un atributo que casi nada leía, y las pocas reglas sueltas de claro que existen en cinco hojas dejaban una pantalla **blanca sobre blanca**: el fondo, la tarjeta, el panel y la barra, todos el mismo blanco, sin un borde que los separe. Eso no es «claro», es una hoja en blanco con letras encima. LA REGLA QUE LO ARREGLA, Y ES UNA SOLA: En oscuro, la jerarquía se construye **subiendo** de luz: el fondo es el más oscuro y cada capa por encima aclara. En claro **hay que invertirla**: el fondo es el más CLARO y cada capa por encima se ensucia un poco. Copiar el modo oscuro cambiando `#030D1C` por `#FFFFFF` y ya —que es lo que estaba pasando— colapsa las cuatro capas en una. Aquí el fondo NO es blanco puro: es un gris azulado muy claro (#EEF1F6). El blanco puro queda reservado para las tarjetas, que así **flotan** sobre el fondo en vez de fundirse con él. Es exactamente al revés que en oscuro, y es lo que hace que se distinga algo. CONTRASTE, MEDIDO Y NO A OJO (WCAG AA sobre el fondo de tarjeta #FFFFFF): · texto #16233A sobre #FFFFFF → 14.0:1 (AA y AAA) · apagado #52627A sobre #FFFFFF → 6.5:1 (AA para texto normal) · acento #A15200 sobre #FFFFFF → 5.4:1 (AA) ← el naranja de marca #F58220 da 2.6:1 sobre blanco, o sea que NO SIRVE para texto en claro. Se conserva #F58220 para rellenos y barras, donde no se lee texto encima, y para texto se usa la versión oscurecida. Un acento bonito e ilegible es un acento roto. · dorado #7A5E10 sobre #FFFFFF → 6.6:1 (AA) #D4A84B da 2.1:1 sobre blanco: tampoco vale para texto. DÓNDE NO SE APLICA: el mapa en navegación. En una cabina de noche una pantalla clara ciega, y eso sí es un asunto de seguridad. La navegación se queda oscura aunque el resto de la app esté en claro. ========================================================================== */ html[data-theme="light"] { color-scheme: light; /* ── La escala de superficies, de más clara a más sucia ─────────────── */ --ink: #EEF1F6; /* el lienzo. NO es blanco: si lo fuera, la tarjeta blanca no se vería como una tarjeta. */ --surface: #FFFFFF; /* tarjetas y paneles: aquí sí, blanco */ --surface-2: #F4F6FA; /* elementos elevados dentro de una tarjeta */ --line: #D3DAE6; /* bordes: sin esto, todo lo anterior es lo mismo */ --text: #16233A; --text-muted: #52627A; /* Acentos legibles en claro. Los de marca se conservan aparte para rellenos, que es donde sí funcionan. */ --gold: #7A5E10; --gold-light: #9A7818; --gold-fill: #D4A84B; /* ── CORREGIDO: el acento era NARANJA aquí y DORADO en el tema oscuro ── Medido: `--accent` valía `#A15200` en claro y `#D4A84B` en oscuro. No son dos tonos del mismo color, son dos colores. La app cambiaba de acento al cambiar de tema. Se unifica en el dorado, que es el que está desplegado — el porqué largo está en `css/styles.css`, donde se decidió. El dorado de marca sobre blanco da 2,21:1 y no se puede leer, así que aquí el papel de TEXTO lo hace un dorado oscurecido (6,11:1) y el de RELLENO se queda con el dorado de verdad. Es la misma separación que ya existía: lo que estaba mal no era la separación, era la familia. */ --accent: #7A5E10; /* TEXTO en claro: 6,11:1 sobre blanco */ --accent-fill:#D4A84B; /* RELLENO: el dorado de marca */ --accent-ink: #0B1F33; /* la tinta que va ENCIMA del relleno — 7,55:1 */ --accent-hover: #6B5210; --success: #0A7D53; --warning: #A15C00; --error: #B42318; /* Los mismos nombres que usa tokens.css, para que las pantallas antiguas cambien también. Que existan dos juegos de nombres es deuda de antes; mientras exista, los dos tienen que decir lo mismo. */ --color-bg: #EEF1F6; --color-bg-elev: #F4F6FA; --color-bg-card: #FFFFFF; --color-surface: #FFFFFF; --color-text: #16233A; --color-text-muted: #52627A; --color-text-on-gold: #1B1403; --color-border: #D3DAE6; --color-border-strong: #B7C1D2; --color-accent: #A15200; --color-accent-hover: #8A4600; --color-accent-active: #733A00; --color-navy-900: #EEF1F6; --color-navy-800: #F4F6FA; --color-navy-700: #E4E9F1; --color-navy-600: #D3DAE6; --color-success: #0A7D53; --color-warning: #A15C00; --color-danger: #B42318; --color-info: #1A6FB5; } /* La sombra hace en claro el trabajo que el color de fondo hace en oscuro: separar capas. Sin sombra, una tarjeta blanca sobre gris claro se lee como un rectángulo pintado, no como algo que está encima. */ html[data-theme="light"] .card, html[data-theme="light"] .panel, html[data-theme="light"] .bottom-sheet, html[data-theme="light"] .ir-dir-sheet, html[data-theme="light"] .side-menu, html[data-theme="light"] .leaflet-popup-content-wrapper { background: #FFFFFF; border: 1px solid #D3DAE6; box-shadow: 0 1px 2px rgba(22, 35, 58, 0.06), 0 8px 24px rgba(22, 35, 58, 0.08); } html[data-theme="light"] body { background: #EEF1F6; color: #16233A; } /* Los rellenos de marca se quedan como son: sobre un botón naranja lleno no se lee texto oscuro pequeño, se lee texto blanco grande, y ahí el contraste lo da el relleno. */ html[data-theme="light"] .ob-btn-primary, html[data-theme="light"] .btn-primary { background: var(--accent-fill, #F58220); border-color: var(--accent-fill, #F58220); color: #FFFFFF; } /* El foco tiene que verse sobre fondo claro: el dorado de marca sobre blanco casi desaparece. */ html[data-theme="light"] :focus-visible { outline: 2px solid #A15200; outline-offset: 2px; } /* ── LA EXCEPCIÓN QUE ES DE SEGURIDAD ─────────────────────────────────── En navegación el mapa se queda oscuro aunque la app esté en claro. Una pantalla blanca a las tres de la mañana en una cabina ciega al conductor durante los segundos que tarda la pupila en cerrarse, y esos segundos van a 65 mph. Esto no es una preferencia estética. */ html[data-theme="light"].ir-navegando, html[data-theme="light"] .ir-nav-activa { --ink: #030D1C; --surface: #0A1B33; --surface-2: #10294A; --line: #1E3A5F; --text: #F5F7FA; --text-muted: #9FB0C3; /* Y el acento vuelve al dorado del tema oscuro, no al naranja. Esta línea ponía #F58220: en cuanto arrancaba la navegación, la app cambiaba de color de acento a mitad de viaje. Es el mismo defecto de familia que se arregló arriba, escondido en el sitio donde menos se mira — nadie inspecciona la paleta con el camión andando. */ --accent: #D4A84B; --accent-fill: #D4A84B; --accent-ink: #030D1C; --gold: #D4A84B; } /* Alto contraste del sistema: si alguien lo pidió, se le da, no se negocia. */ @media (prefers-contrast: more) { html[data-theme="light"] { --text: #0B1524; --text-muted: #3A4A61; --line: #9FAABE; --color-text: #0B1524; --color-text-muted: #3A4A61; --color-border: #9FAABE; } } /* ══════════════════════════════════════════════════════════════════════════ LOS CINCO QUE SE PINTABAN CON EL ACENTO DE TEXTO EN VEZ DEL DE RELLENO Este mismo archivo, más arriba, separa dos acentos a propósito y lo explica: --accent: #A15200 para TEXTO — el naranja de marca sobre blanco da 2,6:1 y hay que oscurecerlo para leerlo --accent-fill: #F58220 para RELLENOS — ahí el naranja sí es el bueno La separación estaba bien. Lo que no se hizo fue repasar quién usa cuál. Barrido a 1440×900 en tema claro, buscando `background-color` igual a `rgb(161, 82, 0)`: #fabNewTrip 106×56 «+ Viaje», el botón principal del mapa .skip-link ...×48 saltar al contenido #pulse-dot 16×16 el latido de «estás aquí» .origin-dot 10×10 el punto de origen del planificador .slider 44×26 el interruptor de los ajustes Cinco rellenos pintados con el naranja OSCURECIDO PARA LEER TEXTO. El resultado es marrón: el botón más visible de la app, en tema claro, no lleva el color de la marca. Y no es solo estética — `ecosystem-core` fija `#F58220` como el acento de Iron Route, y es lo que distingue este producto de los otros cinco del ecosistema. Con el relleno bueno hay que cambiar la tinta: blanco sobre `#F58220` da 2,59:1 y el mínimo es 4,5. Tinta casi negra sobre ese naranja da 7,3:1. Es la misma regla que ya se aplicó a «Calcular Ruta» en `css/contraste-y-dedo.css`: el color fuerte va al fondo, nunca a la letra. ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] #fabNewTrip, html[data-theme="light"] .fab, html[data-theme="light"] .skip-link { background: var(--accent-fill, #F58220); color: #0B1F33; } html[data-theme="light"] #fabNewTrip svg, html[data-theme="light"] .fab svg { stroke: #0B1F33; } /* Los tres que no llevan texto encima: solo el relleno. */ html[data-theme="light"] #pulse-dot, html[data-theme="light"] .origin-dot, html[data-theme="light"] .input-dot.origin-dot, html[data-theme="light"] input:checked + .slider { background: var(--accent-fill, #F58220); }