/* ═══════════════════════════════════════════════════════════════════════════ DOS DIÁLOGOS QUE ESTABAN ABIERTOS TODO EL RATO, Y NADIE LOS VEÍA Encontrado auditando la app pantalla por pantalla, midiendo qué textos se pisan entre sí. En la pantalla principal salían diez choques como estos: «Rutas Guardadas» × «Calculando...» «Registro IFTA» × «Descargando Mapa» «Combustible» × «Preparando...» La causa: `js/hud-mode.js` y `js/offline-maps.js` construyen su panel con `document.body.appendChild(...)` al arrancar, y NO EXISTE NINGUNA REGLA QUE LOS OCULTE. Ambos alternan una clase para mostrarse —`.hud-active`, `.visible`— pero el estado base «cerrado» no estaba escrito en ninguna parte. Se buscó en las 29 hojas de estilo: cero reglas para `#hud-overlay` y cero para `#tile-download-modal`. ¿Por qué entonces no se ven? Porque el mapa ocupa la pantalla entera y los tapa. Están DEBAJO, en el flujo normal del documento, pintados y vivos. Eso no es estar oculto: es estar escondido por casualidad. Y trae cuatro problemas de verdad: 1 · ACCESIBILIDAD. Los dos llevan `role="dialog"` con `aria-modal="true"` —y el HUD, `role="application"`—. Un lector de pantalla anuncia un diálogo modal ABIERTO en cada carga y se queda atrapado dentro. Para un conductor que usa la app por voz, eso es la app entera inservible. 2 · EL TABULADOR. `#tile-download-cancel` y `#hud-exit-btn` son botones reales y enfocables. Se tabula por la pantalla y el foco desaparece dentro de un panel invisible. Es de los fallos más desconcertantes que existen: la tecla funciona y no pasa nada en pantalla. 3 · SE ASOMAN. Cualquier cambio de apilado, un desplazamiento, o un mapa que tarde en pintar los deja a la vista. Es lo que salía en la medida. 4 · EL MODAL DE DESCARGA NUNCA FUE UN MODAL. Sin una sola regla de estilo, `.visible` no lo centraba, no lo ponía encima ni le daba fondo: era texto suelto apilado en el cuerpo de la página. La descarga de mapas sin conexión llevaba desde siempre enseñando su progreso debajo del mapa, donde no se ve. Aquí se declara lo que faltaba: cerrado de verdad cuando está cerrado, y un diálogo como es debido cuando se abre. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CERRADO ES CERRADO ───────────────────────────────────────────────────── `display: none` saca el elemento del árbol de accesibilidad, del orden de tabulación y del flujo. Las tres cosas a la vez, que es justo lo que hacía falta. No se usa `opacity: 0` ni `visibility: hidden` a secas: dejan el nodo enfocable o anunciable, que es la mitad del problema que se está cerrando. */ #hud-overlay, #tile-download-modal { display: none; } #hud-overlay.hud-active, #tile-download-modal.visible { display: flex; } /* ── EL HUD: pantalla completa, encima de todo ──────────────────────────── */ #hud-overlay.hud-active { position: fixed; inset: 0; z-index: 4000; flex-direction: column; background: #000; /* el HUD se refleja en el parabrisas: negro puro y nada más */ color: var(--text, #F5F7FA); padding: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px); } #hud-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 14px; } /* El botón de salir del HUD se pulsa conduciendo: 48 px, como todo lo que se toca en esta casa. */ #hud-exit-btn { min-height: 48px; min-width: 48px; padding: 0 16px; border: 1px solid var(--border, rgba(255, 255, 255, 0.18)); border-radius: var(--radius-sm, 8px); background: rgba(255, 255, 255, 0.08); color: var(--text, #F5F7FA); font-size: 15px; cursor: pointer; } /* ── EL MODAL DE DESCARGA: centrado, con su velo ────────────────────────── */ #tile-download-modal.visible { position: fixed; inset: 0; z-index: 3800; align-items: center; justify-content: center; padding: 20px; /* Velo opaco de verdad. Un modal translúcido deja leer lo de detrás y las dos capas de texto se pisan — el mismo fallo que dejaba «Añadir parada» asomando bajo el desplegable de direcciones. */ background: rgba(3, 13, 28, 0.72); } #tile-download-panel { width: 100%; max-width: 360px; padding: 22px 20px; border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: var(--radius, 12px); /* Papel opaco con respaldo literal: si mañana falta el token, esto sigue siendo un panel y no un agujero transparente. */ background: var(--bg-elevated, #10294A); box-shadow: 0 18px 48px var(--shadow, rgba(0, 0, 0, 0.45)); color: var(--text, #F5F7FA); } #tile-download-title { font-family: var(--font-heading, inherit); font-size: var(--font-size-lg, 17px); font-weight: 700; margin-bottom: 6px; } #tile-download-subtitle { font-size: var(--font-size-sm, 13px); color: var(--text-muted, #9FB0C3); line-height: 1.45; margin-bottom: 16px; } .tile-progress-bar-wrap { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.1); } #tile-progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--accent, #D4A84B); transition: width var(--duration, 0.25s) var(--ease, ease); } #tile-progress-text { margin-top: 10px; font-size: var(--font-size-sm, 13px); color: var(--text-muted, #9FB0C3); /* Cifras que cambian mientras se mira: en monoespaciada no bailan. */ font-variant-numeric: tabular-nums; } #tile-download-cancel { display: block; width: 100%; min-height: 48px; margin-top: 18px; border: 1px solid var(--border, rgba(255, 255, 255, 0.18)); border-radius: var(--radius-sm, 8px); background: transparent; color: var(--text, #F5F7FA); font-size: var(--font-size-base, 15px); cursor: pointer; } #tile-download-cancel:hover { background: rgba(255, 255, 255, 0.06); } /* Con el movimiento reducido se quita la transición, no el resultado: la barra salta a su sitio en vez de deslizarse, pero sigue diciendo por dónde va. */ @media (prefers-reduced-motion: reduce) { #tile-progress-bar { transition: none; } }