/**
 * layout-tokens.css — Sprint 4 (actualizado desde Sprint 2)
 * ════════════════════════════════════════════════════════════════════════════════
 * Fuente única de verdad para tokens CSS de posicionamiento de controles de UI
 * superpuestos sobre el mapa (vessel-selector, vessel-search-box…).
 *
 * Los valores se definen como custom properties en :root y se sobreescriben
 * en los selectores body[data-screen-type] escritos por layout-manager.js (Capa 2).
 *
 * Cargar ANTES de layout.css y dashboard_clean.css para que var() se resuelva.
 *
 * ── Breakpoints (espejo de BREAKPOINTS en core/device-info.js) ───────────────
 *  Nombre │  px  │ Alias legible       │ screenType
 * ────────┼──────┼─────────────────────┼────────────
 *   xs    │  360 │ Smartphone XS       │ smartphone
 *   sm    │  480 │ Smartphone S        │ smartphone
 *   md    │  600 │ Smartphone/Tablet S │ tablet (si touch)
 *   lg    │  768 │ Tablet M            │ tablet
 *   xl    │ 1024 │ Tablet L / Laptop S │ laptop
 *  xxl    │ 1280 │ Desktop compacto    │ laptop
 *  fhd    │ 1920 │ Full HD / Panoramic │ panoramic
 * ════════════════════════════════════════════════════════════════════════════════
 */

:root {
    /* ── Vessel Selector (panel izquierdo) ────────────────────────────────── */
    --ui-sidebar-left: 80px;
    --ui-sidebar-w:   320px;     /* coincide con max-width del .vessel-selector */
    --ui-sidebar-gap:  10px;     /* espacio entre selector y buscador */

    /* ── Vessel Search Box: anclada a la derecha del sidebar ──────────────── */
    --ui-search-left: calc(var(--ui-sidebar-left) + var(--ui-sidebar-w) + var(--ui-sidebar-gap));
}

/* ── Tablet ─────────────────────────────────────────────────────────────────── */
body[data-screen-type="tablet"] {
    --ui-sidebar-left: 10px;
    --ui-sidebar-w:   280px;
    /* --ui-search-left se recalcula automáticamente con el nuevo sidebar-left */
}

/* ── Smartphone ─────────────────────────────────────────────────────────────── */
body[data-screen-type="smartphone"] {
    --ui-sidebar-left: 5px;
    --ui-sidebar-w:   195px;
    /*
     * En smartphone la search-box usa right: 5px en lugar de left, por lo que
     * --ui-search-left no se aplica — el valor se recalcula igualmente pero
     * no tiene efecto en dashboard_clean.css para ese breakpoint.
     */
}