/* ========================================================================== IRON ROUTE — LOS MODALES DEL DINERO, QUE NUNCA SE VIERON EL HALLAZGO, MEDIDO. `js/fuel.js` y `js/ifta.js` construyen cuatro modales con estas clases: .ifta-modal-overlay .ifta-modal .ifta-modal-header .ifta-modal-body .ifta-modal-footer .ifta-modal-close .ifta-input .ifta-btn **Ninguna de las ocho tenía una sola regla CSS en todo el proyecto.** Se buscaron en las 34 hojas: cero coincidencias. Lo que pasaba al pulsar «Registrar combustible», medido a 390×844: #fuel-log-modal position: static · z-index: auto · fondo transparente .ifta-modal x 0..390 y 138..602 ← en el flujo del documento O sea: el modal no es un modal. Es un bloque suelto pegado al final del ``, sin fondo, sin caja, por debajo del mapa y de la barra inferior. El conductor pulsa «Registrar combustible», no ocurre nada visible, y concluye que el botón está roto. Y son los DOS registros que alimentan el IFTA: sin ellos no hay galones por estado, y sin galones por estado el informe trimestral no existe. Un `innerHTML` que se pinta sin estilo no falla: sale mal y calla. No hay error de consola, no hay excepción, no hay nada que buscar. Es el mismo patrón que las `var()` sin definir de la cabecera: el navegador hace algo razonable con lo que le queda y no avisa. ── LA ESCALA DE Z-INDEX, DECLARADA ──────────────────────────────────── El proyecto tenía 22 valores distintos entre 1 y 10.010, puestos cada uno para ganarle al anterior. Aquí quedan escritos los seis que importan, con su porqué, para que el siguiente no tenga que adivinar ni subir a 10.011: --z-mapa 400 el lienzo y lo que Leaflet pinta encima --z-flotantes 900 carril derecho, «+ Viaje», «Reportar» --z-hojas 1200 paneles y hojas que tapan el mapa --z-menu 1300 el menú lateral y su velo --z-modal 2600 un modal tapa una hoja: por eso está encima --z-aviso 3000 los avisos, que tienen que verse SIEMPRE La regla de la casa: **si algo necesita estar por encima de otra cosa, se dice aquí con un nombre.** Un número suelto en un archivo cualquiera es una carrera que siempre acaba en `9999`. ========================================================================== */ :root { --z-mapa: 400; --z-flotantes: 900; --z-hojas: 1200; --z-menu: 1300; --z-modal: 2600; --z-aviso: 3000; } /* ── EL VELO ───────────────────────────────────────────────────────────── Cerrado es `display: none` y no un `transform` fuera de pantalla: un modal escondido con transform sigue recibiendo el tabulador, que es el defecto que `js/inerte.js` existe para arreglar. Aquí se evita de origen. */ .ifta-modal-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-modal, 2600); align-items: center; justify-content: center; padding: 16px; background: rgba(3, 13, 28, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ifta-modal-overlay.open { display: flex; } /* ── LA CAJA ───────────────────────────────────────────────────────────── `max-height` y el cuerpo desplazable, no por elegancia: el modal de IFTA tiene seis campos y un desplegable de 50 estados. En un Android de 640 px de alto, sin esto, el botón «Guardar» queda fuera — exactamente el defecto que acababa de arreglarse en el alta. */ .ifta-modal { display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--surface, #0A1B33); color: var(--text, #F5F7FA); border: 1px solid var(--line, #1E3A5F); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); overflow: hidden; } .ifta-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px 16px 12px; border-bottom: 1px solid var(--line, #1E3A5F); } .ifta-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; } .ifta-modal-close { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted, #9FB0C3); font-size: 18px; line-height: 1; cursor: pointer; } .ifta-modal-close:hover { background: var(--surface-2, #10294A); color: var(--text, #F5F7FA); } .ifta-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 14px; } /* Los campos vienen dentro de su `