/** * layout.css — Sprint 4 * ═══════════════════════════════════════════════════════════════════════════ * Fuente única de verdad para los selectores body[data-screen-type]. * Todos los cambios de posición/tamaño condicionados por screenType * que no dependen de @media queries deben vivir aquí. * * Orden de carga (HTML ): * layout-tokens.css → layout.css → dashboard-responsive.css → dashboard_clean.css * * El atributo data-screen-type es escrito por layout-manager.js (Capa 2). * Los valores de los tokens CSS se definen en layout-tokens.css. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Laptop / Panorámico — mapa a pantalla completa ─────────────────────── */ /* Extraído de dashboard-responsive.css Sprint 2 */ body[data-screen-type="laptop"] #map, body[data-screen-type="panoramic"] #map { top: var(--effective-header-height) !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: calc(100vh - var(--effective-header-height)) !important; height: calc(100dvh - var(--effective-header-height)) !important; margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════ Selectores semánticos — Tablet / Smartphone Complementan los @media queries para cubrir tablets en landscape >768px que no activan las reglas de max-width: 768px. Extraído de dashboard-responsive.css Sprint 2. ═══════════════════════════════════════════════════════════════════════════ */ /* Tablet: layers-control posición ajustada */ body[data-screen-type="tablet"] .layers-control, html[data-screen-type-early="tablet"] body .layers-control { top: calc(var(--effective-header-height, 75px) + 10px); right: 10px; left: auto; min-width: 70px; max-width: 110px; padding: 10px 6px; } /* Tablet: fleet-control posición ajustada */ body[data-screen-type="tablet"] .fleet-control, html[data-screen-type-early="tablet"] body .fleet-control { bottom: 10px; right: 10px; min-width: 70px; max-width: 110px; padding: 8px 6px; } /* Tablet: vessel-selector ancla left */ body[data-screen-type="tablet"] .vessel-selector, html[data-screen-type-early="tablet"] body .vessel-selector { top: calc(var(--effective-header-height, 75px) + 15px); left: 50px; min-width: 240px; max-width: 290px; } body[data-screen-type="tablet"] .vessel-selector-title, html[data-screen-type-early="tablet"] body .vessel-selector-title { font-size: 13px; } /* Smartphone: layers-control anclada inferior-derecha Activa ANTES de que JS ejecute gracias a data-screen-type-early. !important en todos los valores para ganar a bottom:330px !important del @media (max-width:480px) de dashboard-responsive.css (carga después, misma cadena autor — pero esta regla tiene especificidad 0,2,2 vs 0,1,0). */ html[data-screen-type-early="smartphone"] body .layers-control { top: auto !important; bottom: 10px !important; right: 5px !important; left: auto !important; min-width: auto !important; max-width: 50px !important; padding: 8px 4px !important; }