/* ========================================================================== IRON ROUTE — EL LAYOUT DE ESCRITORIO (el del dispatcher) EL PROBLEMA, DICHO SIN ADORNOS: `device-detect.js` llevaba meses poniendo la clase `ir-desktop` en el ``… y **ninguna hoja de estilo la usaba**. Cero reglas. O sea que el escritorio recibía exactamente la misma interfaz que el teléfono: hojas que suben desde abajo, menú hamburguesa que tapa la pantalla, objetivos de 48 px y cero hover. En un monitor de 27" eso se ve como una app de móvil estirada, y el dispatcher —que es quien la usa ahí, ocho horas, con ratón y teclado— pierde el 80 % de su pantalla. Y el ancho por sí solo no bastaba: una tablet de 1280 px se usa con el dedo. Por eso esto cuelga de `.ir-escritorio`, que `device-detect.js` solo pone cuando se cumplen LAS TRES: ancho ≥ 1024, puntero fino y sin táctil. QUÉ CAMBIA, Y POR QUÉ CADA COSA: 1. Los paneles dejan de subir desde abajo y se ACOPLAN a la derecha, altos y fijos. Un dispatcher no «abre y cierra» el planificador: lo tiene abierto todo el día al lado del mapa. 2. El menú deja de ser un cajón que tapa y pasa a ser un RAÍL fijo a la izquierda. Sin hamburguesa: en escritorio esconder la navegación detrás de un botón es esconderla y ya. 3. El mapa se encoge para dejarles sitio, en vez de quedar tapado. 4. Aparece el hover, que en táctil no existe y aquí es la mitad de la información: qué es pulsable se ve antes de pulsar. 5. La densidad sube: con ratón, 48 px por fila desperdicia pantalla. Baja a 40, que sigue siendo cómodo con puntero fino. Nunca por debajo. 6. El arrastre de las hojas se apaga: un `handle` para deslizar con el pulgar en una pantalla que no se toca es un adorno confuso. ========================================================================== */ .ir-escritorio { --rail-w: 240px; /* el raíl de navegación izquierdo */ --panel-w: 400px; /* el panel acoplado a la derecha */ } /* ── 1 · El raíl de navegación, siempre visible ─────────────────────────── */ .ir-escritorio .side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); transform: none; border-right: 1px solid var(--line, #1E3A5F); border-radius: 0; box-shadow: none; z-index: 900; overflow-y: auto; visibility: visible; } /* `aria-hidden="true"` es lo que el JS del móvil usa para cerrarlo. En escritorio el menú NO se cierra, así que también se neutraliza aquí — y el JS lo corrige en el atributo para que un lector de pantalla no anuncie como oculto algo que está a la vista. */ .ir-escritorio .side-menu[aria-hidden="true"] { visibility: visible; } .ir-escritorio .menu-overlay { display: none; } /* EL BOTÓN DEL MENÚ SE LLAMA `#menuBtn`, Y ESTA REGLA NOMBRABA A OTROS TRES. Reportado por el dueño el 5-ago: «en modo escritorio no me funciona bien». Medido: de los 32 selectores de esta hoja, 17 no encontraban ni un elemento, y estos tres eran de los peores — `[data-action="menu"]`, `.menu-toggle` y `.hamburger` no existen en este HTML. El botón real es `#menuBtn.search-menu-btn`. El efecto: en escritorio quedaban a la vez el menú lateral FIJO y el botón que sirve para abrir ese mismo menú. Dos formas de abrir lo que ya está abierto, una de ellas empujando el buscador. Se ve como «esto no está bien hecho» y en realidad era una regla escrita contra un DOM que no existe. Se dejan los tres nombres viejos por si algún parcial los usa, y se añaden los dos reales. Una regla que no encuentra nada no cuesta nada; la que faltaba costaba el diseño entero. */ .ir-escritorio [data-action="menu"], .ir-escritorio .menu-toggle, .ir-escritorio .hamburger, .ir-escritorio #menuBtn, .ir-escritorio .search-menu-btn { display: none; } .ir-escritorio .menu-item { min-height: 40px; font-size: 14px; border-radius: 8px; } .ir-escritorio .menu-item:hover { background: var(--surface-2, #10294A); color: var(--accent, #F58220); } /* ── 2 · El mapa cede el sitio ──────────────────────────────────────────── */ .ir-escritorio .map-wrapper, .ir-escritorio #main-content { margin-left: var(--rail-w); transition: margin-right 180ms ease; } /* Con un panel abierto, el mapa se estrecha en vez de quedar tapado: un dispatcher compara el panel CONTRA el mapa, no uno encima del otro. */ .ir-escritorio.ir-panel-abierto .map-wrapper, .ir-escritorio.ir-panel-abierto #main-content { margin-right: var(--panel-w); } /* ── 3 · Los paneles se acoplan a la derecha ────────────────────────────── */ .ir-escritorio .bottom-sheet { top: 0; bottom: 0; left: auto; right: 0; width: var(--panel-w); max-width: none; max-height: none; border-radius: 0; border-left: 1px solid var(--line, #1E3A5F); transform: translateX(100%); box-shadow: -8px 0 32px rgba(3, 13, 28, 0.28); } .ir-escritorio .bottom-sheet.open, .ir-escritorio .bottom-sheet[aria-hidden="false"] { transform: translateX(0); } .ir-escritorio .sheet-content { overflow-y: auto; padding-bottom: 24px; } /* El asa de arrastre no pinta nada donde no hay dedo. */ .ir-escritorio .sheet-handle { display: none; } /* El planificador de rutas usa su propia hoja, con su propio id. */ .ir-escritorio .ir-dir-sheet { top: 0; bottom: 0; left: auto; right: 0; width: var(--panel-w); max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; border-left: 1px solid var(--line, #1E3A5F); transform: translateX(100%); } .ir-escritorio .ir-dir-sheet.show { transform: translateX(0); } .ir-escritorio .ir-dir-drag, .ir-escritorio .ir-dir-handle { display: none; } /* ── 4 · Densidad y hover ───────────────────────────────────────────────── */ @media (pointer: fine) and (hover: hover) { .ir-escritorio .ir-dir-btn, .ir-escritorio .rg-usar, .ir-escritorio .pc-btn, .ir-escritorio .pc-sel { min-height: 40px; /* nunca menos: con ratón se acierta, pero 32 px sigue siendo incómodo de leer */ } .ir-escritorio .rg-item:hover, /* `.ir-dir-route-card` es el nombre ANTERIOR al rediseño del 3-ago; desde entonces la fila de ruta es `.ir-rt`. La regla se quedó apuntando al nombre viejo, así que el escritorio perdió el realce al pasar el ratón por encima justo en la pantalla donde se decide el viaje. */ .ir-escritorio .ir-rt:hover, .ir-escritorio .ir-dir-route-card:hover { border-color: var(--accent, #F58220); background: var(--surface-2, #10294A); } .ir-escritorio .rg-usar:hover { background: rgba(245, 130, 32, 0.08); } /* El cursor también informa: si cambia, es pulsable. */ .ir-escritorio button, .ir-escritorio [role="button"] { cursor: pointer; } } /* ── 5 · Teclado: en escritorio es la mitad de la interfaz ──────────────── */ .ir-escritorio :focus-visible { outline: 2px solid var(--accent, #F58220); outline-offset: 2px; } /* El enlace de saltar al contenido solo tiene sentido con teclado, y en escritorio es donde hay teclado. */ .ir-escritorio .skip-link:focus { position: fixed; top: 8px; left: calc(var(--rail-w) + 8px); z-index: 2000; } /* ── 6 · Pantallas muy anchas ───────────────────────────────────────────── */ @media (min-width: 1600px) { .ir-escritorio { --panel-w: 460px; --rail-w: 260px; } } @media (min-width: 2000px) { /* En un monitor 4K, estirar el panel a 800 px no lo hace más útil: hace las líneas de texto ilegiblemente largas. Se topa y punto. */ .ir-escritorio { --panel-w: 520px; } } /* ── 7 · Empotrado en el TMS ────────────────────────────────────────────── */ /* El dispatcher ya tiene la cabecera del TMS encima: la nuestra sería una segunda barra que roba alto y confunde sobre dónde está. */ .ir-empotrada .app-header, .ir-empotrada .side-menu, .ir-empotrada .menu-overlay { display: none; } .ir-empotrada .map-wrapper, .ir-empotrada #main-content { margin-left: 0; } /* ── 8 · Táctil: lo contrario, y explícito ─────────────────────────────── */ /* Se escribe aunque sea el comportamiento por defecto, porque el defecto cambia en cuanto alguien toca una hoja de arriba. En un dedo, 48 px. */ .ir-tactil .menu-item, .ir-tactil .ir-dir-btn, .ir-tactil .rg-usar, .ir-tactil .pc-btn { min-height: var(--touch, 48px); } /* El hover en táctil se queda «pegado» tras un toque y deja filas iluminadas que parecen seleccionadas. Se apaga. */ .ir-tactil .rg-item:hover, .ir-tactil .menu-item:hover, .ir-tactil .ir-rt:hover, .ir-tactil .ir-dir-route-card:hover { background: inherit; } /* ========================================================================== EL CONTENEDOR QUE SE COMÍA LOS CLICS Medido con Playwright a 1440×900: `.map-controls` es una caja de **1200×230 px con `z-index: 900`** y `pointer-events: auto`. No pinta nada —solo agrupa dos o tres botones en una esquina— pero su rectángulo cubre toda la franja inferior del mapa y está POR ENCIMA de `.quick-tiles` (z-index 800). Resultado: los diez accesos rápidos —planificador, truck stops, parking, básculas, gas, áreas de descanso, taller, lavado, médico, DOT— se veían perfectamente y **ningún clic les llegaba**. El clic moría en un contenedor transparente. Es el bug que hace que un usuario diga «los botones no funcionan», porque desde fuera es exactamente eso. LA REGLA: un contenedor que solo agrupa no debe interceptar el puntero. `pointer-events: none` en la caja y `auto` en lo que de verdad se pulsa. Va sin `!important` y sin subir el z-index de nadie: subir un z-index para ganarle a otro empieza una carrera que acaba en 9999. ========================================================================== */ .map-controls, .quick-tiles { pointer-events: none; } .map-controls > *, .quick-tiles .tiles-scroll, .quick-tiles .tile, .quick-tiles button, .quick-tiles a, .map-controls button, .map-controls a { pointer-events: auto; } /* ── La barra de accesos rápidos, a lo ancho del mapa ──────────────────── Estaba topada a `max-width: 480px` y centrada — la anchura de un teléfono, heredada de la regla de ≥768px. En un monitor de 1440 eso deja los tiles dentro de una franja de 480 px en el centro, y **los que se salen quedan fuera de su contenedor**: se ven, porque el scroll horizontal los pinta, pero el mapa está encima y se queda con el clic. Medido: de diez accesos, solo cuatro eran alcanzables. Los seis de la derecha —gas, áreas de descanso, taller, lavado, médico, DOT— caían fuera. En escritorio la barra ocupa el ancho del mapa (descontando el raíl) y ya no hace falta desplazarla: caben los diez. */ .ir-escritorio .quick-tiles { max-width: none; left: var(--rail-w); right: 0; transform: none; padding: 0 16px; } .ir-escritorio.ir-panel-abierto .quick-tiles { right: var(--panel-w); } .ir-escritorio .quick-tiles .tiles-scroll { justify-content: center; flex-wrap: wrap; overflow-x: visible; }