/* ========================================================================== IRON ROUTE — UN SOLO CARRIL DERECHO PARA LOS CONTROLES DEL MAPA EL DEFECTO, MEDIDO A 1440×900 ANTES DE ESTO: .irc-capas x 1084..1428 y 84..139 (344×62) ← capas base .map-controls x 928.. 980 y 494..720 ( 52×226) ← todo lo demás Botón de cuenta, «Reportar», atribución, baldosas ...... a 12 px Dos islas sin eje común. Entre el borde derecho de una y el de la otra hay 448 px. Para pasar de calle a satélite y luego centrarse en la ubicación, el ratón cruza la pantalla en diagonal entre dos grupos que no comparten ni fila ni columna. Cinco flotantes a 12 px del borde, uno a 460. Y el 460 no es un número fijo: sale de `right: calc(50% - 260px)`, o sea que en un monitor de 1920 la columna se planta a 700 px del borde, en el centro del lienzo. La regla estaba pensada para centrar una app de teléfono dentro de una tableta y nadie la revisó al llegar el escritorio. LA DECISIÓN: un solo carril de 48 px pegado al borde derecho, con todo dentro y en un orden que responde a con qué frecuencia se toca cada cosa. El borde de pantalla es un objetivo de profundidad infinita —el cursor se para solo contra él—; una columna flotando en mitad del lienzo hay que apuntarla. GEOMETRÍA A 1440×900 (carril x = 1380..1428, apilado de abajo arriba): Restricciones de camión (1380, 676) ┐ contexto de la carga Capas de datos (1380, 620) │ — lo que decide la ruta, Mapa base (1380, 564) ┘ pegado al codo Mi ubicación (1380, 500) posición Zoom − (1380, 436) ┐ encuadre — se toca menos, Zoom + (1380, 380) ┘ así que va arriba Colapsar ▼ (1380, 316) fuera del grupo que colapsa 8 px entre hermanos, 16 px entre grupos, pie a 12 px por encima de la cabeza de «Reportar» (736). Todos 48×48: hoy el ▼ mide 40 y sus vecinos 52. LA BARRA DE TRES CHIPS DESAPARECE EN TODOS LOS ANCHOS. Ocupaba 21.328 px² permanentes de mapa que no se podían plegar, pintaba una losa navy `rgba(6,20,40,.95)` idéntica en claro y en oscuro —el único objeto oscuro del mapa claro— y duplicaba el rótulo «Capas del mapa» con `#layersBtn`. Se cambia de mapa base una vez por sesión, no una vez por minuto: no merece 21.328 px permanentes, merece un botón de 2.304. Va la última de las hojas para ganar por orden de cascada, no con `!important`: subir la fuerza de una regla para ganarle a otra empieza una carrera que acaba en `!important` por todas partes y en nadie sabiendo quién manda. ========================================================================== */ /* ── LA BARRA FLOTANTE, FUERA EN TODOS LOS ANCHOS ─────────────────────── `js/carril-derecho.js` además la quita del DOM. Dos mecanismos para lo mismo: si la hoja llega tarde por caché, el otro lo cubre; y quitarla del DOM la saca también del tabulador y del lector de pantalla, que es lo correcto para un control duplicado. */ .irc-capas { display: none; } /* ══════════════════════════════════════════════════════════════════════════ ESCRITORIO Y TABLETA (≥768) ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .map-controls { right: 12px; /* 176 = 12 px de aire + los 164 px que ocupan «Reportar» y su margen. Es una distancia al borde inferior, así que no depende del alto de la ventana: a 900 el pie cae en 724; a 1080, en 904. */ bottom: 176px; left: auto; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 900; } /* Los tres que ya existían medían 52; el ▼, 40. Un carril con tres anchos distintos se lee como tres cosas distintas. */ .map-controls .map-ctrl-btn, .map-controls .ir-carril-btn { width: 48px; height: 48px; min-width: 48px; min-height: 48px; flex: 0 0 48px; border-radius: 12px; } /* 16 px donde cambia el grupo: encuadre → posición → contexto de la carga. El hueco es lo único que dice que son tres asuntos distintos. */ .map-controls #locateBtn, .map-controls #irBaseBtn { margin-top: 8px; } /* ── EL ▼, FUERA DEL GRUPO QUE ENCOGE ──────────────────────────────── Vivía DENTRO de `.map-controls`. Un clic ponía el contenedor en 0×0 y el propio botón desaparecía con él, escribía `fab_collapsed=1` y sobrevivía al reload: el conductor perdía para siempre «Mi ubicación», las siete capas de datos —alturas de puente, límites de peso, hazmat, cadenas— y restricciones de camión, sin ninguna vía de vuelta visible. Ahora vive fuera, encima del carril, y se queda cuando el carril se pliega. Es la diferencia entre plegar y perder. */ .ir-carril-colapso { position: fixed; right: 12px; bottom: 536px; /* 176 + 408 − 48: justo encima del carril */ width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; z-index: 901; border: 1px solid var(--line, #1E3A5F); background: var(--surface, #0A1B33); color: var(--text, #F5F7FA); cursor: pointer; transition: transform .2s ease; } .ir-carril-colapso:hover { background: var(--surface-2, #10294A); } .ir-carril-colapso[aria-expanded="false"] { transform: rotate(180deg); } /* Los dos ▼ viejos no se esconden a medias: se quitan del DOM en el JS. Esto cubre el caso de que el bundle los vuelva a inyectar. */ .map-controls .r25-collapse-btn, .map-controls .fab-collapse-toggle { display: none; } /* Plegado: se esconden los botones, NO el contenedor. Así el ▼ de fuera conserva su sitio y su tamaño. */ .map-controls.collapsed .map-ctrl-btn, .map-controls.collapsed .ir-carril-btn { display: none; } .map-controls.collapsed { /* La regla de `ui-fixes-p0.css` lo ponía en `scale(0)`. Aquí no. */ transform: none; opacity: 1; pointer-events: none; } /* ── EL DESPLEGABLE DE MAPA BASE, ABRIENDO A LA IZQUIERDA ──────────── Borde derecho en 1368 —12 px de aire respecto al carril— y pie alineado con el pie de su botón (612). Crece hacia arriba, que es donde hay sitio: por encima solo está la cabecera de búsqueda, a 316 px. */ .ir-carril-base { position: fixed; right: 72px; bottom: 288px; width: 180px; z-index: 1200; background: var(--surface, #0A1B33); border: 1px solid var(--line, #1E3A5F); border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } .ir-carril-base[hidden] { display: none; } .ir-carril-base-tit { margin: 4px 8px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #9FB0C3); } .ir-carril-base-chip { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text, #F5F7FA); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .ir-carril-base-chip:hover { background: var(--surface-2, #10294A); } .ir-carril-base-chip .ir-carril-base-ic { font-size: 18px; line-height: 1; } .ir-carril-base-chip[aria-pressed="true"] { border-color: var(--accent, #F58220); background: color-mix(in srgb, var(--accent, #F58220) 14%, transparent); } /* ── LOS PANELES SE ACOPLAN A LA IZQUIERDA ─────────────────────────── Medido: un panel lateral abierto a 1440 entraba en x = 1040 y tapaba el carril entero. El riel del menú manda en el borde izquierdo, el carril manda en el derecho, y el mapa queda entero entre los dos. */ .ir-escritorio .ir-pf5-panel.open, .ir-escritorio .bottom-sheet.open { left: var(--rail-w, 240px); right: auto; } /* Y con ellos acoplados a la izquierda, el carril tiene que VOLVER. `esquina-superior.css` esconde los cinco flotantes del mapa cuando hay una hoja abierta, con un argumento que era correcto en el teléfono: la hoja tapa el mapa entera, así que sus botones no pintan nada. En escritorio ya no lo es — medido, la hoja ocupa x 240..640 y quedan 800 px de mapa a la vista. Esconder el zoom y «mi ubicación» mientras se mira el registro de combustible es quitarle al dispatcher justo lo que usa para comprobar lo que está leyendo. La excepción cuelga de `.ir-escritorio`, que `device-detect.js` solo pone cuando hay ratón de verdad: en la tableta de 768 la hoja sigue siendo de ancho completo y los controles siguen escondiéndose, que ahí sí toca. */ .ir-escritorio:has(.ir-pf5-panel.open) .map-controls, .ir-escritorio:has(.bottom-sheet.open) .map-controls, .ir-escritorio:has(.ir-pf5-panel.open) .ir-carril-colapso, .ir-escritorio:has(.bottom-sheet.open) .ir-carril-colapso { opacity: 1; visibility: visible; pointer-events: auto; } } /* Tema claro: el carril no puede ser la única losa oscura del mapa claro. */ html[data-theme="light"] .ir-carril-colapso, html[data-theme="light"] .ir-carril-base { background: #FFFFFF; color: #0A1B33; border-color: #D8E0EA; } html[data-theme="light"] .ir-carril-base-chip { color: #0A1B33; } html[data-theme="light"] .ir-carril-base-chip:hover { background: #EEF3F9; } html[data-theme="light"] .ir-carril-base-tit { color: #5B6B7F; }