/* ========================================================================== IRON ROUTE — LA PANTALLA MIENTRAS SE NAVEGA MEDIDO EN EL TELÉFONO DEL DUEÑO, 13-08-2026, navegando de verdad hacia Linden. Con la navegación en marcha seguían encima de la pantalla: HEADER.search-header 0,0 390×72 ← justo debajo de la barra de giro BUTTON.fab-collapse 330,392 48×48 DIV.map-controls 330,448 48×160 BUTTON#fabNewTrip «+VIAJE» 281,624 94×48 SECTION#quickTiles 0,678 390×88 ← tapado por la barra de abajo BUTTON.r24-arrow ×2 4/338,698 48×48 el botón de «Iniciar sesión», el de reportar y el chincheta Textual del dueño: «donde dice la llegada, restante, distancia, tapa los botones, y el pin, esa cosa ahí, unos botones que están superpuestos, entonces no puede ser así». POR QUÉ PASABA. `js/navigation.js` tenía esto: document.querySelectorAll('.topbar, .bottom-nav, .status-pill, .compass, .speed-display, .alert-badge, #irDirectionsSheet') Seis de esas siete clases YA NO EXISTEN. `.topbar` se convirtió en `.search-header` hace meses; `.compass`, `.status-pill` y `.speed-display` se retiraron. O sea que la función escondía fantasmas y dejaba en pie todo lo que de verdad estorbaba — y no fallaba, porque `querySelectorAll` de algo que no existe devuelve una lista vacía tan tranquila. El mismo defecto de siempre: la comprobación pasa porque pregunta lo que no es. LA CURA, Y POR QUÉ ES DISTINTA. Aquí no se listan siete clases más: se esconde POR REGLA todo lo flotante de la aplicación mientras dura la navegación. Si mañana alguien añade otro botón al mapa, queda cubierto sin que nadie se acuerde de este archivo. Lo único que sobrevive es la pantalla de navegación, que es lo que se mira a 60 mph. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1 · FUERA TODO LO QUE NO SEA NAVEGAR ══════════════════════════════════════════════════════════════════════════ */ /* POR QUÉ LA CLASE VA DOS VECES. `css/state-cleanup-f4.css` declara `html.ir-trip-idle .quick-tiles { display: block !important }`. Misma especificidad que la nuestra y carga después, así que ganaba él y la fila de fichas seguía encima del mapa en plena navegación. Repetir la clase sube la especificidad sin depender del ORDEN de las hojas, que es lo que se rompe en cuanto alguien mueve una línea del index. (Y sí: mientras se navega el viaje no está «idle». Esa clase la pone otro módulo; corregirla ahí es otra tarea, y hasta entonces esto no depende de ella.) */ html.ir-navegando.ir-navegando .search-header, html.ir-navegando.ir-navegando .bottom-nav, html.ir-navegando.ir-navegando .quick-tiles, /* Y por ID, porque `state-cleanup-f4.css` también escribe `#quickTiles`: un ID pesa más que tres clases, así que la versión por clase perdía igual. Contra un ID solo gana otro ID. */ html.ir-navegando.ir-navegando #quickTiles, html.ir-navegando.ir-navegando .r24-arrow, html.ir-navegando.ir-navegando .map-controls, html.ir-navegando.ir-navegando .ir-carril-colapso, html.ir-navegando.ir-navegando .fab-collapse-toggle, html.ir-navegando.ir-navegando #fabNewTrip, html.ir-navegando.ir-navegando .fab, html.ir-navegando.ir-navegando .rr-lanzar, html.ir-navegando.ir-navegando .ir-alert-fab, html.ir-navegando.ir-navegando .ir-cuenta-boton, html.ir-navegando.ir-navegando #authBtn, html.ir-navegando.ir-navegando .ir-atrib-boton, html.ir-navegando.ir-navegando .irc-capas, html.ir-navegando.ir-navegando #irDirectionsSheet, html.ir-navegando.ir-navegando .ir-pretrip-banner, /* Los tres que aparecieron al medir con la prueba puesta: la barra de voz de `voice-nav.js`, el velocímetro suelto de `speed-widget` y el botón de iniciar sesión. Los dos primeros son DUPLICADOS —la pantalla de navegación ya trae su botón de voz y su velocímetro—, y dos velocímetros distintos en la misma pantalla es peor que ninguno. El de iniciar sesión no se toca conduciendo. */ html.ir-navegando.ir-navegando #voice-nav-bar, html.ir-navegando.ir-navegando #speed-widget, html.ir-navegando.ir-navegando #ir-r4-auth-btn { display: none !important; } /* EL AVISO DE «SIN SEÑAL» SÍ SE QUEDA, y es de los pocos que se quedan. Saber que el mapa que estás viendo sale de la caché y no de la red cambia lo que haces en la siguiente salida. Lo que se corrige es DÓNDE: se baja por debajo de la barra de giro para que no se monte con ella. */ html.ir-navegando.ir-navegando #offline-mode-banner { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 172px) !important; left: 12px !important; right: 12px !important; z-index: 12; } /* El botón de «volver al norte» tampoco: en navegación el norte arriba no se ofrece, porque el mapa DEBE ir en el sentido de la marcha. Se recupera al terminar el viaje. */ html.ir-navegando.ir-navegando .ir-btn-norte { display: none !important; } /* Las hojas inferiores no se abren durante la navegación, pero si una quedó abierta al arrancar, se cierra: media pantalla de mapa tapada a 60 mph no es una hoja, es un accidente. */ html.ir-navegando.ir-navegando .bottom-sheet.open, html.ir-navegando.ir-navegando .bottom-sheet.abierta { transform: translateY(100%) !important; } /* La atribución de OpenStreetMap SÍ se queda — la licencia lo exige. Se baja al hueco que deja la barra de abajo para que no compita con nada. */ html.ir-navegando.ir-navegando .leaflet-control-attribution { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important; font-size: 10px !important; opacity: .75; } /* ══════════════════════════════════════════════════════════════════════════ 2 · LA BARRA DE GIRO — Y LA SEGUNDA MANIOBRA Textual del dueño: «tiene que decirte, en 1.1 millas tiene que salir a la derecha, pero ahí mismo tiene que decirte abajito, en letra pequeña, cuál es la próxima, porque a veces te llega la salida y ahí mismo hay otra entrada y ya uno se vuelve loco, uno va guiando a 50 millas por hora». Tiene toda la razón y es un problema real del oficio: en un enlace de autopista las dos maniobras caen a menos de 300 pies. Quien solo ve la primera toma la salida buena y falla la segunda, y con 53 pies detrás rectificar cuesta millas. La fila «LUEGO» dice la maniobra siguiente Y a qué distancia de la primera. Cuando ese hueco baja de 800 pies —donde de verdad se lía— la fila se enciende en ámbar y lo dice con todas las letras: «enseguida». ══════════════════════════════════════════════════════════════════════════ */ /* Opaca, no en degradado. Antes era `rgba(3,13,28,.95)` desvaneciéndose al 60 %: por debajo se leía «Buscar dirección o lugar…» de la cabecera, y dos textos superpuestos no se leen ni de cerca ni parado. */ html.ir-navegando.ir-navegando .ir-nav-turn-bar { background: var(--ink, #030D1C) !important; border-bottom: 1px solid var(--line, #1E3A5F); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); align-items: flex-start; flex-wrap: wrap; } html[data-theme="light"].ir-navegando .ir-nav-turn-bar { background: #0A1B33 !important; /* la barra de giro NO se aclara: es la única zona que se mira en marcha, y el contraste alto gana al sol de frente */ border-bottom-color: rgba(255, 255, 255, .14); } /* La fila de la segunda maniobra */ .ir-nav-then { display: none; flex-basis: 100%; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--text-muted, #9FB0C3); } html.ir-navegando.ir-navegando .ir-nav-then.ir-hay { display: flex; } .ir-nav-then-et { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #9FB0C3); flex: 0 0 auto; } .ir-nav-then-ic { display: flex; flex: 0 0 auto; color: var(--text, #F5F7FA); } .ir-nav-then-tx { /* 13 px y no menos: el suelo de la casa son 12, y esto se lee conduciendo. Si no cabe, se corta la calle — nunca la maniobra, que va delante. */ font-size: 13px; line-height: 1.25; color: var(--text, #F5F7FA); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Las dos maniobras pegadas: el caso que da el problema. */ .ir-nav-then.ir-pegada { border-top-color: var(--warning, #F5A623); } .ir-nav-then.ir-pegada .ir-nav-then-et, .ir-nav-then.ir-pegada .ir-nav-then-ic { color: var(--warning, #F5A623); } /* ══════════════════════════════════════════════════════════════════════════ 3 · LA BARRA DE ABAJO Se apoya en el borde inferior de verdad, contando la zona segura del iPhone. En la captura del dueño quedaba montada sobre la fila de fichas — que ahora ya no está— pero además le faltaba el respiro de abajo. ══════════════════════════════════════════════════════════════════════════ */ html.ir-navegando.ir-navegando .ir-nav-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--ink, #030D1C); border-top: 1px solid var(--line, #1E3A5F); } /* EN TEMA CLARO EL CROMO DE NAVEGACIÓN NO SE ACLARA. Se probó a ponerlo blanco y salió esto, medido: «19:37», «40m» y «30.2 mi» quedaban en dorado sobre blanco — 2,6:1, que es el mismo contraste que este proyecto ya declaró inservible para texto. Los números que dicen a qué hora llegas eran invisibles. Y el arreglo no es teñir cuatro reglas: es que en marcha el mapa va claro —de día se lee mejor— pero las barras van oscuras, que es lo que hace cualquier navegador serio. Una franja oscura con cifras claras aguanta el sol de frente; blanco sobre blanco no. Así que aquí el tema claro cambia el MAPA, no el cromo. */ html[data-theme="light"].ir-navegando .ir-nav-bottom { background: #030D1C; border-top-color: rgba(255, 255, 255, .14); } html[data-theme="light"].ir-navegando .ir-nav-bot-val { color: #F5F7FA; } html[data-theme="light"].ir-navegando .ir-nav-bot-label { color: #9FB0C3; } html[data-theme="light"].ir-navegando .ir-nav-speed { background: #030D1C; border-color: rgba(255, 255, 255, .14); } html[data-theme="light"].ir-navegando .ir-nav-speed-num { color: #E8C468; } html[data-theme="light"].ir-navegando .ir-nav-speed-unit { color: #9FB0C3; } /* ══════════════════════════════════════════════════════════════════════════ 4 · EL VELOCÍMETRO Y LOS DOS BOTONES QUE QUEDAN Se colocan respecto a la barra de abajo, no respecto al borde: si la barra crece —y crece, porque la zona segura del iPhone la empuja— lo de encima tiene que subir con ella o se monta. ══════════════════════════════════════════════════════════════════════════ */ html.ir-navegando.ir-navegando .ir-nav-speed { bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } html.ir-navegando.ir-navegando .ir-nav-search-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } html.ir-navegando.ir-navegando .ir-nav-recenter { bottom: calc(env(safe-area-inset-bottom, 0px) + 168px); } @media (prefers-reduced-motion: reduce) { .ir-nav-then { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 5 · LO QUE NO CABÍA MEDIDO en el teléfono del dueño y reproducido aquí a 390 px: .ir-nav-end-btn x 305 w 102 → borde derecho en 407 · 17 px FUERA .ir-nav-turn-street ancho 220, texto 247 → «Wood Avenue/C…» cortado teniendo 232 px libres Lo del botón es lo que fotografió: «Finalizar» a medias contra el borde. Y lo de la calle es peor de lo que parece, porque el nombre de la calle es justamente lo que hay que leer para saber si es ESTA salida o la siguiente. Las dos causas son la misma: medidas fijas —`max-width: 220px`, anchos por `flex: 1` sin `min-width: 0`— escritas para una pantalla concreta. Aquí se reparte lo que HAY: el botón pide lo suyo, las tres cifras se reparten el resto, y ninguna puede empujar a las demás fuera. ══════════════════════════════════════════════════════════════════════════ */ html.ir-navegando.ir-navegando .ir-nav-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 8px; padding-left: max(env(safe-area-inset-left, 0px), 12px); padding-right: max(env(safe-area-inset-right, 0px), 12px); } html.ir-navegando.ir-navegando .ir-nav-bot-item { min-width: 0; /* sin esto una cifra larga empuja al resto fuera */ text-align: center; } html.ir-navegando.ir-navegando .ir-nav-bot-val, html.ir-navegando.ir-navegando .ir-nav-bot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 17 px y cifras de ancho fijo. A 19 px «30.2 mi» pedía 89 px en una columna de 84 y salía «30.…» — la distancia que falta, cortada. Y `tabular-nums` evita que la hora baile de ancho al pasar de 19:38 a 19:41, que de reojo se lee como un parpadeo. */ html.ir-navegando.ir-navegando .ir-nav-bot-val { font-size: 17px; line-height: 1.15; font-variant-numeric: tabular-nums; } html.ir-navegando.ir-navegando .ir-nav-bot-label { font-size: 11px; line-height: 1.2; } html.ir-navegando.ir-navegando .ir-nav-end-btn { min-width: 0; width: auto; white-space: nowrap; padding: 0 14px; min-height: 44px; } /* La calle usa TODO el hueco que queda hasta el botón de voz. */ html.ir-navegando.ir-navegando .ir-nav-turn-info { min-width: 0; } html.ir-navegando.ir-navegando .ir-nav-turn-street { max-width: none; width: 100%; } /* El suelo de la casa son 48 px de objetivo táctil, y el de la voz medía 44. En una cabina con baches, cuatro píxeles son un fallo de puntería. */ html.ir-navegando.ir-navegando .ir-nav-voice-btn { width: 48px; height: 48px; flex: 0 0 48px; } /* Y si aun así no cabe, dos líneas antes que puntos suspensivos: «Turn right onto Wood Avenue/C…» no dice si es ESTA salida o la de después, que es justo la duda que se tiene a 50 mph. Dos líneas caben de sobra en la barra; a partir de ahí sí se corta. */ html.ir-navegando.ir-navegando .ir-nav-turn-street { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.22; } /* Teléfonos de 360 px —el Android barato que lleva medio oficio— siguen cortando por 4 px: «130.2» pide 78 en una columna de 74. Se recorta el aire, no la cifra: las tres columnas ganan 8 px cada una quitándoselos al hueco entre ellas y al relleno del botón. */ @media (max-width: 375px) { html.ir-navegando.ir-navegando .ir-nav-bottom { gap: 4px; padding-left: max(env(safe-area-inset-left, 0px), 8px); padding-right: max(env(safe-area-inset-right, 0px), 8px); } html.ir-navegando.ir-navegando .ir-nav-end-btn { padding: 0 10px; font-size: 14px; } html.ir-navegando.ir-navegando .ir-nav-bot-val { font-size: 16px; } } /* El botón de volver al centro, con el suelo táctil de la casa. Medía 44 px y se pulsa con el camión en marcha, que es el peor momento para fallar la puntería. Y va encima del velocímetro, en el lado del pulgar. */ html.ir-navegando.ir-navegando .ir-nav-recenter { width: 48px; height: 48px; border-radius: 24px; }