/* ========================================================================== IRON ROUTE — CONTRASTE MEDIDO Y OBJETIVOS QUE EL DEDO ACIERTA Todo lo de aquí sale de un barrido que compone los fondos con alfa y salta los degradados (que no se pueden juzgar y por eso se declaran, no se inventan). Cada regla lleva su cifra de antes. Nada de esto se vio «a ojo». Un contraste de 2,6:1 se ve perfectamente en un monitor bueno a media luz, y desaparece en una cabina con el sol de frente, que es donde se usa esto. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1 · «Calcular Ruta» — blanco sobre naranja, 2.59:1 El botón principal del planificador. `#F58220` es el acento de marca y es precioso, pero **el blanco encima da 2,59:1** — el mínimo es 4,5. No se cambia el naranja de marca: se cambia la TINTA. Texto casi-negro sobre ese mismo naranja da **7,3:1**, y el botón sigue siendo naranja Iron Route. Es lo que hacen los botones de acento de cualquier sistema serio: el color fuerte va al fondo, no a la letra. ══════════════════════════════════════════════════════════════════════════ */ /* DOS CORRECCIONES SOBRE LA MARCHA, LAS DOS POR NO MEDIR ANTES DE ESCRIBIR: 1 · La primera versión apuntó a `.ir-dir-btn`, que es OTRO botón — fondo degradado azul, no naranja, y no estaba entre los fallos. Cambiarle la tinta a ciegas era tocar lo que no se midió. 2 · Escribí en este comentario que `--navy` «no está definido». **Falso, y comprobado después:** sí está definido, y AHÍ ESTÁ LA CAUSA DE VERDAD. `styles.css` dice `.btn-primary { color: var(--navy) }`, que es exactamente lo correcto: letra oscura sobre el acento. Pero el tema claro **redefine** el token: tema oscuro --navy: #030D1C (casi negro) tema claro --navy: #EEF1F6 (casi blanco) ← medido O sea que un token con nombre de COLOR («navy») se usa como token de ROL («el oscuro»), y al invertir la paleta se invierte con ella. La regla no cambió; cambió lo que significa su nombre. Es la misma trampa que `--ink`, que en claro vale `#EEF1F6`. Un nombre que describe el pigmento y no el papel deja de ser cierto en cuanto hay dos papeles. Queda anotado para el documento maestro: los tokens de la fundación deberían llamarse por su función, no por su color. */ /* 3 · Y una TERCERA corrección, porque la regla que escribí para arreglar esto rompió otra cosa. Puse `.btn-primary { color: #0B1F33 }` a lo ancho, y `.btn-primary` sale con DOS fondos distintos: #calcRouteBtn fondo #F58220 (naranja claro) .ir-rerun-onboarding fondo #A15200 (naranja oscuro accesible) Sobre el oscuro, la letra oscura da **2.96:1** — creé el mismo defecto que venía a quitar, en el botón de al lado. Medido, no supuesto: apareció en el siguiente barrido. La lección es la de siempre en esta hoja: **una tinta fija no sirve para un fondo variable.** Se apunta al botón que se midió y nada más. El de reiniciar onboarding se queda con su letra blanca, que sobre `#A15200` da 6,4:1 y está bien. */ #calcRouteBtn, #calcRouteBtn * { color: #0B1F33 !important; } /* ══════════════════════════════════════════════════════════════════════════ 2 · Los estados de permiso — el mismo tono encima del mismo tono Medido, ya compuesto el velo sobre el panel: «No solicitado» #B89438 sobre #FCF3E4 → 2.60:1 «Próximamente» #4A9FE8 sobre #E4F1FC → 2.46:1 («Concedido» y «Denegado» son del mismo patrón y caen igual.) Un texto del mismo tono que su propia pastilla es una decisión de estilo que se paga en legibilidad. Se conserva la pastilla de color —que es la señal rápida, y se ve incluso sin leer— y se oscurece la letra hasta cumplir. Los cuatro tonos elegidos son el mismo color de la familia bajado en luminosidad; sigue leyéndose «verde», «rojo», «ámbar», «azul». ══════════════════════════════════════════════════════════════════════════ */ /* CUARTA CORRECCIÓN, Y LA QUE CIERRA EL PATRÓN. La primera versión de estas cuatro reglas solo cambiaba la TINTA y dejaba la pastilla con un fondo semitransparente. Funcionaba… sobre el panel que medí ese día. Vuelto a medir con el barrido corriendo en LOS DOS TEMAS: «No solicitado» #6B5210 sobre rgb(51,50,57) → 1.71:1 «Próximamente» #14507F sobre rgb(27,48,81) → 1.57:1 O sea peor que antes de arreglarlo. Porque un fondo con alfa no es un color: es lo que haya debajo, y debajo hay un panel oscuro. Y el medidor tenía la culpa de que no se viera: **solo probaba el tema que el navegador eligiera**, así que afiné para el claro y di el oscuro por bueno sin abrirlo. Ya prueba los dos, siempre. LA REGLA QUE QUEDA, y es la misma que ya está escrita tres veces en esta hoja pero ahora aplicada hasta el final: **si el fondo puede cambiar, no se elige solo la tinta — se eligen LOS DOS a la vez.** Cada pastilla lleva su fondo opaco y su letra, medidos juntos. Así el contraste no depende del panel donde caiga, ni del tema, ni de lo que alguien ponga detrás mañana. Y siguen leyéndose como lo que son: verde, rojo, ámbar, azul. */ .ir-perms-state.granted { background: #0E3D28 !important; color: #6EE7B7 !important; } /* 8.02:1 */ .ir-perms-state.denied { background: #4A1512 !important; color: #FCA5A5 !important; } /* 7.86:1 */ .ir-perms-state.deferred, .ir-perms-state.unset { background: #3A2E0B !important; color: #F0C860 !important; } /* 8.34:1 */ .ir-perms-state.coming { background: #0F2E4A !important; color: #93C5FD !important; } /* 7.71:1 */ /* Y el botón de reiniciar el onboarding, por lo mismo. Medido: blanco sobre el oro `#D4A84B` da **2.21:1**. Antes lo dejé con letra blanca porque su fondo era el naranja oscuro `#A15200`; en el otro tema el fondo es oro y la misma letra deja de valer. Se fijan los dos juntos y se acabó el problema. */ .ir-rerun-onboarding { background: #D4A84B !important; color: #1A1305 !important; /* 8.34:1 */ } /* ══════════════════════════════════════════════════════════════════════════ 3 · El rótulo «Mapa» de la navegación — oro sobre casi-blanco, 2.04:1 `#D4A84B` sobre `#F4F6FA`. El oro de marca **no puede ser texto sobre claro**: sobre blanco da 2,1:1 en el mejor de los casos. Sigue siendo el color de la pestaña activa —en el fondo, en el subrayado, en el icono— pero la palabra se escribe en un oro oscurecido que cumple 5,5:1 y se sigue leyendo como oro. Se aplica solo cuando el tema es claro; en oscuro el oro sobre navy da 6,9:1 y ahí está bien como está. ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .nav-tab.active, html[data-theme="light"] .nav-tab.active *, html[data-theme="light"] .bottom-nav .active, html[data-theme="light"] .bottom-nav .active * { color: #7A5E10 !important; } /* ══════════════════════════════════════════════════════════════════════════ 4 · Seis objetivos que el dedo no acierta Medidos en teléfono (mínimo 48 px) y en escritorio (40 px con ratón): 19×48 #rp-share-btn «Compartir ruta» 19×44 #voice-nav-mute-btn «Silenciar» — EN NAVEGACIÓN 32×48 #irDirClose «Cerrar» 32×48 #irDirSwap «Invertir origen y destino» 32×48 #irDirAddStop «Añadir parada» 77×36 .ir-perms-action «Cambiar» El de silenciar es el más grave: se usa **conduciendo**, con una mano, a 65 mph, y mide 19 px de ancho. Un objetivo que se falla no ahorra espacio — gasta un intento, y ese intento son dos segundos con los ojos fuera de la carretera. Se ensancha con `min-width`, no con `padding`, para no descolocar el icono. ══════════════════════════════════════════════════════════════════════════ */ #rp-share-btn, #voice-nav-mute-btn, #irDirClose, #irDirSwap, #irDirAddStop, /* Los cuatro que faltaban en esta lista, encontrados barriendo la app entera a 1440×900 en vez de a mano: 40×40 los tres primeros y 359×40 el de ayuda. */ #swapRouteBtn, #ayuda-btn, .ayuda-btn, .ir-pf5-close { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .ir-perms-row .ir-perms-action { min-height: 48px; min-width: 88px; } /* ══════════════════════════════════════════════════════════════════════════ LA EXCEPCIÓN DE ESCRITORIO SE RETIRA, Y NO POR PURISMO Aquí había esto: @media (pointer: fine) and (min-width: 900px) { … { min-width: 40px; min-height: 40px; } } con el argumento «con ratón bastan 40, y en escritorio el espacio vale más». Suena razonable y está mal por dos motivos medidos: 1 · `pointer: fine` NO significa «no hay dedo». Significa «el puntero PRINCIPAL es fino». El portátil del dueño —el caso que `escritorio.mjs` prueba con nombre y apellido: «portátil con ratón Y pantalla táctil»— cumple `pointer: fine` y tiene pantalla táctil. O sea que la excepción le daba objetivos de 40 px justo a la máquina desde la que se usa esto. Lo que distingue de verdad es `any-pointer: coarse`, no `pointer: fine`. 2 · `ecosystem-core` fija `--touch: 48px` como suelo del ecosistema, sin excepción por dispositivo. Cuando una hoja de un producto contradice la fundación, manda la fundación; para eso existe. Y el «espacio vale más» no se sostiene con los números: son diez controles. Ocho píxeles por diez controles, en un lienzo de 1200×900, es el 0,07 % del área. No se estaba comprando espacio: se estaba vendiendo precisión. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 5 · El enlace de saltar al contenido, 179×44 Solo aparece al tabular, y es justamente para quien navega con teclado. 44 px es el mínimo de Apple, no el nuestro. ══════════════════════════════════════════════════════════════════════════ */ .skip-link { min-height: 48px; display: inline-flex; align-items: center; } /* ══════════════════════════════════════════════════════════════════════════ LO QUE SE DEJA COMO ESTÁ, A PROPÓSITO Los enlaces de atribución de Leaflet, MapTiler y OpenStreetMap miden 51×14, 46×14 y 151×14. Son enlaces legales obligatorios, todos los mapas del mundo los pintan a ese tamaño, y agrandarlos taparía mapa sin que nadie lo agradezca. Se anota como excepción consciente, no como olvido. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ LOS DOCE QUE APARECIERON AL SUBIR EL LISTÓN DE 44 A 48 `tests/suelo-y-dedo.mjs` barre cada elemento visible en cinco anchos. Con el umbral en 44 px salían cuatro; con el suelo de la casa —48, el que fija `ecosystem-core`— salen doce. La diferencia entre 44 y 48 parece cosmética y no lo es: 44 es el mínimo de Apple para un dedo quieto, y aquí el dedo va en un camión en marcha. Medido, con el ancho o el alto que tenían: voiceBtn 44×44 dictar la dirección rp-alt-tab ×3 ..×44 elegir entre las tres rutas rp-directions-toggle 224×44 abrir las indicaciones paso a paso pn-cerrar 40×44 cerrar cualquier panel fabNewTrip 94×44 empezar un viaje qa-arrow 36×44 el carrusel de accesos rápidos r24-arrow 32×44 ídem Los tres `rp-alt-tab` son el caso serio: son los botones con los que se elige la ruta, uno pegado al otro. Objetivos pequeños Y adyacentes es la combinación que produce el error caro — no fallar el toque, sino ACERTAR el de al lado y salir por otra ruta sin enterarse. Se sube el alto con `min-height` y el ancho solo donde era estrecho, para no descolocar filas que ya cuadran. ══════════════════════════════════════════════════════════════════════════ */ #voiceBtn, .rp-alt-tab, #rp-directions-toggle, .rp-directions-toggle, .pn-cerrar, .fab, #fabNewTrip { min-height: 48px; } /* Los que además eran estrechos. `min-width` y no `padding`: el icono se queda donde está y solo crece la zona que recibe el toque. Y `min-height` en los mismos: las flechas del carrusel se quedaron en 48×44 tras la primera pasada porque su alto lo fija un `height` fijo de su propia hoja, y `min-height` en el bloque de arriba no las cubría — no estaban en esa lista. Se aprende barriendo otra vez, no suponiendo que la primera corrección alcanzó. */ .pn-cerrar, .qa-arrow, .r24-arrow, .ir-r4-auth-btn, #voiceBtn { min-width: 48px; min-height: 48px; height: auto; display: inline-flex; align-items: center; justify-content: center; }