/* planimetria.css — stili condivisi pagina planimetria (editor + ruoli).
   Estratto da templates/azienda/test/planimetria-mappa.html.twig (refactor luglio 2026). */

/* Tinte tenui degli stati per fondi e bordi di avvisi, bottoni di eliminazione e badge
   di questa pagina. La palette ha il gradino -light; qui servono anche un fondo piu'
   chiaro e due bordi, e si ricavano dal colore dello stato invece di riscrivere a mano
   la scala di Tailwind, che al primo cambio di palette resterebbe indietro. Mescolate
   col bianco e non col trasparente: restano uguali anche sopra un fondo gia' colorato. */
body.planimetria-page {
    --pl-danger-tenue:        color-mix(in srgb, var(--color-danger) 7%, var(--color-white));
    --pl-danger-bordo:        color-mix(in srgb, var(--color-danger) 30%, var(--color-white));
    --pl-danger-bordo-forte:  color-mix(in srgb, var(--color-danger) 50%, var(--color-white));
    --pl-success-tenue:       color-mix(in srgb, var(--color-success) 7%, var(--color-white));
    --pl-success-bordo:       color-mix(in srgb, var(--color-success) 30%, var(--color-white));
    --pl-success-bordo-forte: color-mix(in srgb, var(--color-success) 50%, var(--color-white));
    --pl-warning-tenue:       color-mix(in srgb, var(--color-warning) 8%, var(--color-white));
    --pl-warning-bordo:       color-mix(in srgb, var(--color-warning) 35%, var(--color-white));
}

        .planimetria-page .azienda-main, .planimetria-page .azienda-content,
        .planimetria-page .admin-main, .planimetria-page .admin-content {
            padding: 0 !important;
            height: 100vh !important;
            height: 100dvh !important; /* sul telefono la barra del browser non taglia il fondo */
            overflow: hidden;
        }

        /* ── Toolbar unica ──────────────────────────────────────────── */
        .map-toolbar {
            position: fixed;
            top: 50px; left: 70px; right: 0; height: 56px;
            background: var(--color-white);
            border-bottom: 1px solid var(--color-gray-200);
            display: flex; align-items: center; gap: var(--k-space-2); padding: 0 14px;
            /* Sotto alla sidebar (1000) e alla topbar (1030): sono chrome
               dell'applicazione e devono restare cliccabili sempre. */
            z-index: 990;
            transition: left 0.3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .map-toolbar,
        body.planimetria-page:has(.admin-sidebar:hover) .map-toolbar { left: 280px; }
        @media (max-width: 768px) { .map-toolbar { left: 0; } }

        .toolbar-sep { width: 1px; height: 26px; background: var(--color-gray-200); flex-shrink: 0; margin: 0 2px; }

        /* Sede picker */
        .sede-picker {
            position: relative;
            flex-shrink: 0;
        }
        .sede-trigger {
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: var(--k-space-1) var(--k-space-3); border: 1px solid var(--color-gray-300); border-radius: var(--k-radius);
            background: var(--color-gray-50); cursor: pointer; min-width: 200px; max-width: 260px;
            transition: border-color .15s, background .15s; text-align: left;
        }
        .sede-trigger:hover { border-color: var(--color-gray-400); background: var(--color-gray-100); }
        .sede-trigger.open { border-color: var(--color-primary); background: var(--color-white); }
        .sede-trigger-text { flex: 1; min-width: 0; }
        .sede-trigger-name {
            display: block; font-size: var(--k-text-xs); font-weight: 600; color: var(--color-gray-800);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .sede-trigger-name.placeholder { color: var(--color-gray-400); font-weight: 400; }
        .sede-trigger-addr {
            display: block; font-size: var(--k-text-2xs); color: var(--color-gray-500); margin-top: 1px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .sede-trigger-chevron { color: var(--color-gray-400); flex-shrink: 0; transition: transform .2s; }
        .sede-trigger.open .sede-trigger-chevron { transform: rotate(180deg); }

        .sede-dropdown {
            position: absolute; top: calc(100% + 4px); left: 0;
            min-width: 280px; max-height: 260px; overflow-y: auto;
            background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            box-shadow: var(--k-shadow);
            z-index: var(--z-dropdown); display: none;
        }
        .sede-dropdown.open { display: block; }
        .sede-option {
            padding: var(--k-space-2) var(--k-space-3); cursor: pointer; transition: background .1s;
            border-bottom: 1px solid var(--color-gray-100);
        }
        .sede-option:last-child { border-bottom: none; }
        .sede-option:hover { background: var(--color-gray-50); }
        .sede-option.selected { background: var(--color-primary-light); }
        .sede-opt-name { display: block; font-size: var(--k-text-sm); font-weight: 600; color: var(--color-gray-800); }
        .sede-opt-addr { display: block; font-size: var(--k-text-2xs); color: var(--color-gray-500); margin-top: 2px; }
        .sede-placeholder-option {
            padding: var(--k-space-2) var(--k-space-3); font-size: var(--k-text-xs); color: var(--color-gray-400); cursor: pointer;
            border-bottom: 1px solid var(--color-gray-100);
        }
        .sede-placeholder-option:hover { background: var(--color-gray-50); }

        /* Azienda search box (admin) */
        .azienda-search-wrap {
            position: sticky; top: 0; z-index: 1;
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: var(--k-space-2) var(--k-space-3); background: var(--color-white);
            border-bottom: 1px solid var(--color-gray-200);
        }
        .azienda-search-icon { color: var(--color-gray-400); flex-shrink: 0; }
        .azienda-search {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: var(--k-text-sm); color: var(--color-gray-800); padding: 2px 0;
        }
        .azienda-search::placeholder { color: var(--color-gray-400); }
        .azienda-no-results {
            padding: var(--k-space-3); font-size: var(--k-text-xs); color: var(--color-gray-400); text-align: center;
        }

        /* ── Palette strumenti (selezione | disegno) ──────────────────── */
        .tool-palette {
            position: fixed; top: 114px; left: 82px; z-index: 850;
            display: none; flex-direction: column; gap: var(--k-space-1);
            background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            padding: var(--k-space-1); box-shadow: var(--k-shadow);
            transition: left .3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .tool-palette,
        body.planimetria-page:has(.admin-sidebar:hover) .tool-palette { left: 292px; }
        @media (max-width: 768px) { .tool-palette { left: 12px; } }
        .tool-palette.show { display: flex; }
        .tool-btn {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid transparent; border-radius: var(--k-radius);
            background: transparent; color: var(--color-gray-500); cursor: pointer;
            transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
        }
        .tool-btn:hover { background: var(--color-gray-100); color: var(--color-gray-700); }
        .tool-btn.active {
            background: var(--color-primary);
            color: var(--color-white);
        }
        .tool-btn svg { width: 19px; height: 19px; }
        .tool-sep { height: 1px; background: var(--color-gray-200); margin: 2px var(--k-space-1); }

        /* Flyout tipi asset (accanto alla palette) */
        .asset-flyout {
            position: fixed; top: 114px; left: 138px; z-index: 900;
            width: 216px;
            background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            padding: var(--k-space-3); box-shadow: var(--k-shadow);
            display: none; transition: left .3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .asset-flyout,
        body.planimetria-page:has(.admin-sidebar:hover) .asset-flyout { left: 348px; }
        @media (max-width: 768px) { .asset-flyout { left: 68px; } }
        .asset-flyout.show { display: block; }

        /* Bottoni azione */
        .btn-map {
            padding: var(--k-space-1) var(--k-space-3); border: none; border-radius: var(--k-radius); cursor: pointer;
            font-size: var(--k-text-xs); font-weight: 500; transition: opacity .15s; white-space: nowrap;
        }
        .btn-map-primary   { background: var(--color-primary); color: var(--color-white); }
        .btn-map-primary:hover { opacity: .85; }
        .btn-map-secondary { background: var(--color-gray-100); color: var(--color-gray-700); border: 1px solid var(--color-gray-200); }
        .btn-map-secondary:hover { background: var(--color-gray-200); }
        .btn-map-danger    { background: var(--color-danger-light); color: var(--color-danger-solid); border: 1px solid var(--pl-danger-bordo); }
        .btn-map-danger:hover { background: var(--pl-danger-bordo); }
        .btn-map-success   { background: var(--color-primary); color: var(--color-white); }
        .btn-map-success:hover { opacity: .85; }

        .toolbar-right { margin-left: auto; display: flex; gap: var(--k-space-2); align-items: center; }

        /* ── Mappa ───────────────────────────────────────────────────── */
        #map {
            position: fixed;
            top: 106px; left: 70px; right: 0; bottom: 0;
            transition: left 0.3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) #map,
        body.planimetria-page:has(.admin-sidebar:hover) #map { left: 280px; }
        @media (max-width: 768px) { #map { left: 0; } }

        /* Placeholder mostrato quando nessuna sede è selezionata (al posto della mappa grigia) */
        .map-placeholder {
            position: fixed;
            top: 106px; left: 70px; right: 0; bottom: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--color-white);
            z-index: 5;
            transition: left 0.3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .map-placeholder,
        body.planimetria-page:has(.admin-sidebar:hover) .map-placeholder { left: 280px; }
        @media (max-width: 768px) { .map-placeholder { left: 0; } }
        .map-placeholder.hidden { display: none; }
        .map-placeholder-box {
            display: flex; flex-direction: column; align-items: center; text-align: center;
            gap: var(--k-space-2); padding: 0 var(--k-space-6); max-width: 420px; user-select: none;
        }
        .map-placeholder-icon { color: var(--color-gray-300); margin-bottom: var(--k-space-1); }
        .map-placeholder-title { font-size: var(--k-text-2xl); font-weight: 600; color: var(--color-gray-500); }
        .map-placeholder-sub { font-size: var(--k-text-sm); color: var(--color-gray-400); line-height: 1.5; }

        /* Cursore standard (freccia) sulla mappa: il pan è affidato al tasto
           centrale del mouse, la manina di default di MapLibre non serve */
        .maplibregl-canvas-container.maplibregl-interactive,
        .maplibregl-canvas-container.maplibregl-interactive:active { cursor: default; }

        .drawing .maplibregl-canvas,
        .drawing .maplibregl-canvas-container { cursor: crosshair !important; }

        /* ── Vertex markers ─────────────────────────────────────────── */
        .vertex {
            width: 10px; height: 10px;
            background: var(--color-white); border: 2px solid var(--color-primary);
            border-radius: var(--k-circle); cursor: pointer;
            transition: background .12s, border-color .12s, transform .12s;
        }
        .vertex:hover { transform: scale(1.25); }
        .vertex-first { width: 14px; height: 14px; border-width: 2.5px; }
        .vertex-first.closeable {
            background: var(--color-warning); border-color: var(--color-warning); transform: scale(1.2);
        }
        .vertex-edit {
            width: 12px; height: 12px;
            background: var(--color-white); border: 2px solid var(--color-warning);
            border-radius: var(--k-circle); cursor: move;
            transition: transform .1s, background .1s;
        }
        .vertex-edit:hover { transform: scale(1.4); background: var(--color-warning-light); }
        .vertex-mid {
            width: 8px; height: 8px;
            background: color-mix(in srgb, var(--color-white) 70%, transparent); border: 1.5px solid var(--color-gray-400);
            border-radius: var(--k-circle); cursor: pointer;
            transition: transform .1s, border-color .1s, background .1s;
        }
        .vertex-mid:hover { transform: scale(1.7); border-color: var(--color-warning); background: var(--color-white); }


        .editing .maplibregl-canvas,
        .editing .maplibregl-canvas-container { cursor: default !important; }

        /* ── Hint flottante ──────────────────────────────────────────── */
        .map-hint {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
            background: color-mix(in srgb, var(--color-gray-900) 85%, transparent); color: var(--color-gray-300); font-size: var(--k-text-xs);
            padding: var(--k-space-2) var(--k-space-5); border-radius: var(--k-radius); border: 1px solid var(--color-gray-700);
            z-index: 900; pointer-events: none; white-space: nowrap;
            backdrop-filter: blur(4px); display: none;
        }

        /* ── Strumenti mappa in basso a destra ───────────────────────
           Sopra l'attribuzione MapLibre: "torna alla sede" e il selettore
           dello sfondo, che mostra quello attivo e apre l'elenco delle annate.
           In fila con flex perché l'etichetta dello sfondo cambia larghezza. */
        .map-tools-br {
            position: fixed; right: 12px; bottom: 44px; z-index: 870;
            display: none; align-items: center; gap: var(--k-space-2);
        }
        /* Compaiono solo quando una sede è caricata (placeholder nascosto) */
        body.planimetria-page:has(#mapPlaceholder.hidden) .map-tools-br { display: flex; }
        .map-tool-btn {
            width: 40px; height: 40px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            box-shadow: var(--k-shadow);
            font-size: var(--k-text-md); color: var(--color-gray-600);
            cursor: pointer; transition: box-shadow .15s, border-color .15s, color .15s;
        }
        .map-tool-btn:hover {
            border-color: var(--color-gray-300); box-shadow: var(--k-shadow-lg);
            color: var(--color-primary);
        }
        .basemap-toggle {
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: 5px 12px 5px 5px;
            background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            box-shadow: var(--k-shadow);
            font-size: var(--k-text-xs); font-weight: 600; color: var(--color-gray-700);
            cursor: pointer; transition: box-shadow .15s, border-color .15s;
        }
        .basemap-toggle:hover { border-color: var(--color-gray-300); box-shadow: var(--k-shadow-lg); }
        /* Miniatura dello sfondo attivo: reticolo (stile vettoriale) finché il JS
           non ci mette sopra la tile vera dello sfondo raster selezionato. */
        .basemap-toggle-thumb {
            width: 28px; height: 28px; border-radius: var(--k-radius); flex-shrink: 0;
            border: 1px solid color-mix(in srgb, var(--color-black) 12%, transparent);
            background-color: var(--color-gray-200);
            background-size: cover; background-position: center;
            background-image:
                linear-gradient(90deg, transparent 44%, var(--color-white) 44% 56%, transparent 56%),
                linear-gradient(0deg, transparent 62%, var(--color-white) 62% 72%, transparent 72%);
        }
        /* Stessa forma della .section-badge, in ambra come la legenda civici */
        .basemap-toggle-note {
            background: var(--color-warning-light); color: var(--color-warning-testo-tinta);
            font-size: var(--k-text-2xs); font-weight: 800; line-height: 1.4;
            border-radius: var(--k-pill); padding: 1px var(--k-space-2);
        }
        .basemap-toggle.active { border-color: var(--color-gray-300); }

        /* Elenco sfondi: stesso pannello bianco degli altri (Piani, legenda civici) */
        .basemap-menu {
            position: fixed; right: 12px; bottom: 90px; z-index: 871;
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: 10px; width: 232px;
            box-shadow: var(--k-shadow);
            display: none;
        }
        .basemap-menu.show { display: block; }
        .basemap-menu-header {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .6px;
            margin-bottom: var(--k-space-2);
        }
        .basemap-list { display: flex; flex-direction: column; gap: var(--k-space-1); }
        /* Stessa riga selezionabile di .building-choice, con miniatura a sinistra */
        .basemap-option {
            display: flex; align-items: center; gap: var(--k-space-2); width: 100%;
            padding: var(--k-space-1) var(--k-space-2); background: var(--color-gray-50); color: var(--color-gray-800);
            border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); cursor: pointer;
            text-align: left; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, opacity .12s, transform .12s;
        }
        .basemap-option:hover { background: var(--color-gray-100); border-color: var(--color-gray-300); }
        .basemap-option.active {
            background: var(--color-primary);
            color: var(--color-white); border-color: var(--color-primary);
        }
        /* Come la miniatura del pulsante: reticolo sotto, tile vera sopra via JS */
        .basemap-option-thumb {
            width: 30px; height: 30px; border-radius: var(--k-radius); flex-shrink: 0;
            border: 1px solid color-mix(in srgb, var(--color-black) 12%, transparent);
            background-color: var(--color-gray-200);
            background-size: cover; background-position: center;
            background-image:
                linear-gradient(90deg, transparent 44%, var(--color-white) 44% 56%, transparent 56%),
                linear-gradient(0deg, transparent 62%, var(--color-white) 62% 72%, transparent 72%);
        }
        .basemap-option-text { display: flex; flex-direction: column; min-width: 0; }
        .basemap-option-label { font-size: var(--k-text-xs); font-weight: 600; }
        .basemap-option-sub { font-size: var(--k-text-2xs); opacity: .7; }
        .basemap-menu-note { margin-top: var(--k-space-2); color: var(--color-gray-400); font-size: var(--k-text-2xs); line-height: 1.35; }

        /* ── Pannello stats live ─────────────────────────────────────── */
        .draw-info {
            position: fixed; top: 114px; right: 12px;
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-4); z-index: 900;
            font-size: var(--k-text-xs); color: var(--color-gray-500); display: none;
            min-width: 155px; box-shadow: var(--k-shadow);
        }
        .di-row { display: flex; justify-content: space-between; gap: var(--k-space-4); padding: var(--k-space-1) 0; }
        .di-val { color: var(--color-gray-900); font-weight: 600; font-size: var(--k-text-sm); }
        .di-val.accent { color: var(--color-primary); }

        /* ── Legenda civici (basso sinistra) ──────────────────────────
           Pastiglia compatta sempre a fianco della mappa: il dettaglio delle
           fonti esce solo al passaggio del mouse (o col focus da tastiera),
           così non ruba spazio alla planimetria. `.show` la accende solo
           quando in mappa ci sono davvero dei civici (v. editor.js). */
        .civici-legend {
            position: fixed; bottom: 16px; left: 82px; z-index: 800;
            display: none; transition: left 0.3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .civici-legend,
        body.planimetria-page:has(.admin-sidebar:hover) .civici-legend { left: 292px; }
        .civici-legend.show { display: block; }
        .civici-legend-btn {
            display: flex; align-items: center; gap: var(--k-space-1);
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-3); cursor: help;
            box-shadow: var(--k-shadow);
            font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-500);
            font-family: inherit; line-height: 1;
        }
        .civici-legend:hover .civici-legend-btn,
        .civici-legend:focus-within .civici-legend-btn { color: var(--color-gray-700); border-color: var(--color-gray-300); }
        .civici-legend-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
        .civici-legend-panel {
            position: absolute; left: 0; bottom: calc(100% + 8px);
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-3);
            box-shadow: var(--k-shadow);
            font-size: var(--k-text-2xs); color: var(--color-gray-700); white-space: nowrap;
            opacity: 0; visibility: hidden; transform: translateY(4px);
            transition: opacity .15s ease, transform .15s ease, visibility .15s;
        }
        /* Ponte invisibile sugli 8px tra pastiglia e pannello: senza, passando
           il mouse sul pannello il hover si perde a metà strada e sfarfalla. */
        .civici-legend-panel::after {
            content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
        }
        .civici-legend:hover .civici-legend-panel,
        .civici-legend:focus-within .civici-legend-panel {
            opacity: 1; visibility: visible; transform: none;
        }
        .civici-legend-header {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .6px;
            margin-bottom: var(--k-space-2);
        }
        .civici-legend-row { display: flex; align-items: center; gap: var(--k-space-2); padding: 2px 0; }
        .civici-dot { width: 8px; height: 8px; border-radius: var(--k-circle); flex-shrink: 0; }
        .civici-legend-note { margin-top: var(--k-space-1); color: var(--color-gray-400); font-size: var(--k-text-2xs); }
        @media (max-width: 768px) { .civici-legend { left: 12px; } }

        /* ── Floor selector (basso sinistra, si alza con la barra Copertura) ── */
        /* Colonna destra: pannello Piani */
        #rightPanels {
            position: fixed; right: 12px; top: 114px; z-index: 860;
            display: flex; flex-direction: column; gap: var(--k-space-3);
            max-height: calc(100vh - 130px);
            max-height: calc(100dvh - 130px);
        }
        .floor-panel {
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: var(--k-space-3);
            min-width: 150px; max-width: 260px;
            box-shadow: var(--k-shadow);
            display: none;
        }
        .floor-panel.show { display: block; }
        .floor-panel-header {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .6px;
            margin-bottom: var(--k-space-2);
        }
        /* Scroll: con molti piani lo spaccato cresce in altezza */
        .floor-btn-list {
            display: flex; flex-direction: column; gap: var(--k-space-1); margin-bottom: var(--k-space-2);
            max-height: 44vh; overflow-y: auto; overflow-x: hidden;
        }
        .floor-btn-list::-webkit-scrollbar { width: 5px; }
        .floor-btn-list::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--k-radius); }
        .floor-btn {
            padding: var(--k-space-2) var(--k-space-3); background: var(--color-gray-50); color: var(--color-gray-700);
            border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); cursor: pointer;
            font-size: var(--k-text-xs); font-weight: 500; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
            display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2);
        }
        .floor-btn:hover { background: var(--color-gray-100); }
        .floor-btn.active {
            background: var(--color-primary);
            color: var(--color-white); border-color: var(--color-primary);
        }
        .floor-btn-del {
            background: none; border: none; color: inherit; cursor: pointer;
            font-size: var(--k-text-sm); padding: 0 2px; opacity: .5; line-height: 1;
        }
        .floor-btn-del:hover { opacity: 1; }
        .floor-actions { display: flex; gap: var(--k-space-1); }
        .floor-add-btn {
            flex: 1; padding: var(--k-space-1); background: var(--pl-success-tenue); color: var(--color-success-testo-tinta);
            border: 1px solid var(--pl-success-bordo); border-radius: var(--k-radius); cursor: pointer;
            font-size: var(--k-text-2xs); font-weight: 500; transition: background .15s;
        }
        .floor-add-btn:hover { background: var(--color-success-light); }
        .floor-del-btn {
            flex: 1; padding: var(--k-space-1); background: var(--pl-danger-tenue); color: var(--color-danger-solid-hover);
            border: 1px solid var(--pl-danger-bordo); border-radius: var(--k-radius); cursor: pointer;
            font-size: var(--k-text-2xs); font-weight: 500; transition: background .15s;
        }
        .floor-del-btn:hover:not(:disabled) { background: var(--color-danger-light); }
        .floor-add-btn:disabled, .floor-del-btn:disabled { opacity: .45; cursor: default; }

        /* Scelta edificio per la rimozione piano (dentro l'overlay di conferma) */
        .building-choice-list { display: flex; flex-direction: column; gap: var(--k-space-1); margin-top: var(--k-space-1); }
        .building-choice {
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: var(--k-space-2) var(--k-space-3); background: var(--color-gray-50); color: var(--color-gray-800);
            border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); cursor: pointer;
            font-size: var(--k-text-xs); font-weight: 500; text-align: left; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, opacity .12s, transform .12s;
        }
        .building-choice:hover { background: var(--color-gray-100); border-color: var(--color-gray-300); }
        .building-choice-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .building-choice-info { font-size: var(--k-text-2xs); color: var(--color-gray-400); }
        .building-choice-all { justify-content: center; background: var(--pl-danger-tenue); color: var(--color-danger-solid-hover); border-color: var(--pl-danger-bordo); }
        .building-choice-all:hover { background: var(--color-danger-light); border-color: var(--pl-danger-bordo-forte); }

        /* Canvas overlay: evidenzia in rosso solo la parte di sagoma che sconfina */
        .overlap-canvas {
            position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 3;
        }

        /* Spaccato assonometrico dei piani */
        /* flex-shrink 0: dentro la flex column NON deve comprimersi per stare nel
           max-height — deve sforare e far comparire la scrollbar */
        .floor-stack { display: block; margin: 0 auto var(--k-space-2); flex-shrink: 0; touch-action: none; }
        .floor-layer { cursor: pointer; transition: transform .15s ease; }
        .floor-layer.dragging { cursor: grabbing; opacity: .85; transition: none; }
        .floor-layer .fl-plate { transition: stroke .12s, fill-opacity .12s; }
        .floor-layer:hover .fl-plate { stroke: var(--color-gray-400); fill-opacity: .85; }
        .floor-layer.active:hover .fl-plate { stroke: var(--color-primary); }
        .fl-label {
            font-size: var(--k-text-2xs); font-weight: 700; fill: var(--color-gray-400);
            font-family: inherit; user-select: none;
        }
        .floor-layer:hover .fl-label { fill: var(--color-gray-600); }
        .floor-layer.active .fl-label { fill: var(--color-primary); }

        /* ── Pannello sinistro (edifici / reparti / asset) ───────────── */
        .left-panel {
            position: fixed; top: 114px; left: 82px;
            background: var(--color-white); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); padding: var(--k-space-3); z-index: 800;
            min-width: 175px; max-width: 215px;
            box-shadow: var(--k-shadow);
            display: none;
            transition: left 0.3s ease-in-out;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .left-panel { left: 292px; }
        .left-panel.show { display: block; }
        .left-panel-header {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .6px;
            margin-bottom: var(--k-space-2);
        }

        /* ── Struttura sede: albero Edifici → Reparti → Attrezzatura ──
           In alto a destra (al posto del selettore piani). */
        .struttura-panel {
            left: auto; right: 12px; top: 114px; bottom: auto;
            min-width: 215px; max-width: 260px; z-index: 810;
        }
        body.planimetria-page:has(.azienda-sidebar:hover) .struttura-panel,
        body.planimetria-page:has(.admin-sidebar:hover) .struttura-panel { left: auto; }

        .struttura-header {
            display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2);
            cursor: pointer; user-select: none; margin: -4px -4px 0; padding: var(--k-space-1);
            border-radius: var(--k-radius);
        }
        .struttura-header:hover { background: var(--color-gray-50); }
        .struttura-chevron { color: var(--color-gray-400); flex-shrink: 0; transition: transform .2s; }
        .struttura-panel.collapsed .struttura-chevron { transform: rotate(-90deg); }
        .struttura-body { margin-top: var(--k-space-2); }
        .struttura-panel.collapsed .struttura-body { display: none; }

        .structure-tree { display: flex; flex-direction: column; gap: 2px; max-height: min(430px, calc(100vh - 220px)); max-height: min(430px, calc(100dvh - 220px)); overflow-y: auto; }
        .structure-tree::-webkit-scrollbar { width: 5px; }
        .structure-tree::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--k-radius); }

        .tree-row {
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: var(--k-space-1) var(--k-space-2); border-radius: var(--k-radius);
            cursor: pointer; transition: background .12s;
            font-size: var(--k-text-xs); color: var(--color-gray-800);
        }
        .tree-row:hover { background: var(--color-gray-100); }
        .tree-row.selected { background: var(--color-primary-light); }
        .tree-row.invalid .tree-name { color: var(--color-danger-solid); }
        .tree-row-building { font-weight: 600; }
        .tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .tree-chevron {
            width: 16px; height: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: none; border: none; padding: 0; cursor: pointer; color: var(--color-gray-400);
        }
        .tree-chevron svg { transition: transform .15s; }
        .tree-chevron.collapsed svg { transform: rotate(-90deg); }
        .tree-children {
            margin-left: var(--k-space-3); padding-left: var(--k-space-2);
            border-left: 1px solid var(--color-gray-100);
            display: flex; flex-direction: column; gap: 1px;
        }
        .tree-children .tree-row { font-size: var(--k-text-2xs); padding: var(--k-space-1) var(--k-space-2); }
        .tree-swatch {
            width: 9px; height: 9px; flex-shrink: 0;
            border: 2px dashed; border-radius: var(--k-radius);
        }
        .tree-badge {
            flex-shrink: 0; font-size: var(--k-text-2xs); font-weight: 600;
            background: var(--color-gray-100); color: var(--color-gray-500);
            border-radius: var(--k-radius); padding: 1px var(--k-space-1);
        }
        .tree-asset-img { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
        .tree-asset-emoji { font-size: var(--k-text-2xs); flex-shrink: 0; }
        .tree-del {
            flex-shrink: 0; background: none; border: none; cursor: pointer;
            color: var(--color-gray-300); font-size: var(--k-text-md); padding: 0; line-height: 1;
        }
        .tree-del:hover { color: var(--color-danger-solid); }
        .tree-empty-note { font-size: var(--k-text-2xs); color: var(--color-gray-400); font-style: italic; padding: var(--k-space-1) var(--k-space-2); }
        .tree-orphans-label {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .5px;
            padding: var(--k-space-2) var(--k-space-2) 2px;
        }
        .tree-rename-input {
            flex: 1; min-width: 0; font-size: var(--k-text-xs);
            border: 1px solid var(--color-primary); border-radius: var(--k-radius);
            padding: 1px var(--k-space-1); outline: none; color: var(--color-gray-800);
        }

        .building-dot { width: 9px; height: 9px; border-radius: var(--k-circle); flex-shrink: 0; }
        .building-area { font-size: var(--k-text-2xs); color: var(--color-gray-400); white-space: nowrap; }
        .tree-floors {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 1px;
            background: var(--color-gray-100); border-radius: var(--k-radius); padding: 1px 2px;
        }
        .tree-floor-btn {
            width: 14px; height: 14px; border: none; background: none; cursor: pointer;
            color: var(--color-gray-500); font-size: var(--k-text-2xs); line-height: 1; padding: 0; border-radius: var(--k-radius);
            display: flex; align-items: center; justify-content: center;
        }
        .tree-floor-btn:hover:not(:disabled) { background: var(--color-gray-200); color: var(--color-gray-900); }
        .tree-floor-btn:disabled { opacity: .35; cursor: default; }
        .tree-floor-count { font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-500); min-width: 14px; text-align: center; }
        .building-list-empty { font-size: var(--k-text-2xs); color: var(--color-gray-400); text-align: center; padding: var(--k-space-3) 0; line-height: 1.5; }

        /* Reparto warning */
        .reparto-warn {
            background: var(--pl-danger-tenue); border: 1px solid var(--pl-danger-bordo);
            border-radius: var(--k-radius); padding: var(--k-space-1) var(--k-space-2);
            font-size: var(--k-text-2xs); color: var(--color-danger-solid); margin-bottom: var(--k-space-2);
            line-height: 1.4;
        }

        /* Reparto / Asset panels */
        .dept-select {
            width: 100%; padding: var(--k-space-2) var(--k-space-2); border: 1px solid var(--color-gray-200);
            border-radius: var(--k-radius); font-size: var(--k-text-xs); background: var(--color-gray-50);
            color: var(--color-gray-800); outline: none; margin-bottom: var(--k-space-2);
        }
        .dept-select:focus { border-color: var(--color-primary); background: var(--color-white); }

        /* Lista verticale: una voce per riga (icona + nome), la finestrella
           cresce in altezza e scrolla — mai in larghezza */
        .asset-grid { display: flex; flex-direction: column; gap: var(--k-space-1); margin-bottom: var(--k-space-2); max-height: 300px; overflow-y: auto; }
        .asset-item {
            display: flex; align-items: center;
            padding: var(--k-space-2) var(--k-space-2); border-radius: var(--k-radius); border: 1px solid var(--color-gray-100);
            cursor: pointer; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, opacity .12s, transform .12s; font-size: var(--k-text-2xs); color: var(--color-gray-700);
            text-align: left; gap: var(--k-space-2); background: var(--color-gray-50);
        }
        .asset-item:hover { background: var(--color-gray-100); border-color: var(--color-gray-200); }
        .asset-item.selected { background: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning-testo-tinta); }
        .asset-item img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
        .asset-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
        /* Tipo senza immagine: icona generica al posto della miniatura */
        .asset-item-icona { font-size: var(--k-text-2xl); }
        /* Messaggio vuoto a tutta riga se la lista torna a griglia (oggi e' flex) */
        .asset-grid .building-list-empty { grid-column: 1 / -1; }

        /* Ricerca in cima al flyout: lente a sinistra, × a destra solo con testo */
        .asset-cerca { position: relative; margin-bottom: var(--k-space-2); }
        .asset-cerca > i {
            position: absolute; left: var(--k-space-2); top: 50%; transform: translateY(-50%);
            font-size: var(--k-text-2xs); color: var(--color-gray-400); pointer-events: none;
        }
        .asset-cerca input {
            width: 100%; padding: var(--k-space-2) var(--k-space-6) var(--k-space-2) var(--k-space-6);
            border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
            font-size: var(--k-text-xs); background: var(--color-gray-50); color: var(--color-gray-800); outline: none;
        }
        .asset-cerca input:focus { border-color: var(--color-primary); background: var(--color-white); }
        .asset-cerca input::-webkit-search-cancel-button { display: none; }
        .asset-cerca-x {
            position: absolute; right: var(--k-space-1); top: 50%; transform: translateY(-50%);
            width: 22px; height: 22px; border: none; background: none; border-radius: var(--k-radius);
            color: var(--color-gray-500); font-size: var(--k-text-lg); line-height: 1; cursor: pointer;
        }
        .asset-cerca-x:hover { background: var(--color-gray-200); color: var(--color-gray-900); }
        /* Intestazione di gruppo (Serve l'abilitazione / Verifica periodica / Altre / In planimetria) */
        .asset-gruppo-titolo {
            font-size: var(--k-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
            color: var(--color-gray-500); padding: var(--k-space-2) var(--k-space-1) var(--k-space-1);
        }
        .asset-gruppo-titolo:first-child { padding-top: 0; }
        /* Attrezzatura già in planimetria: il nome dato dall'utente e il piano a destra */
        .asset-trovato .asset-trovato-piano { font-size: var(--k-text-2xs); color: var(--color-gray-500); white-space: nowrap; flex-shrink: 0; }
        .asset-trovato:hover .asset-trovato-piano { color: var(--color-primary); }
        /* Lampo attorno all'icona raggiunta dalla ricerca (marker temporaneo, v. vaiAllAttrezzatura) */
        .asset-lampo {
            width: 56px; height: 56px; border-radius: 50%; pointer-events: none;
            border: 3px solid var(--color-primary);
            animation: asset-lampo 0.9s ease-out 2;
        }
        @keyframes asset-lampo {
            0%   { transform: scale(.4); opacity: 1; }
            100% { transform: scale(1.3); opacity: 0; }
        }

        .panel-info-text { font-size: var(--k-text-2xs); color: var(--color-gray-400); line-height: 1.5; margin-bottom: var(--k-space-2); }

        /* MapLibre overrides */
        .maplibregl-ctrl-group {
            background: var(--color-white) !important; border: 1px solid var(--color-gray-200) !important;
            box-shadow: var(--k-shadow-xs) !important;
        }
        .maplibregl-ctrl-attrib { font-size: var(--k-text-2xs); }
        .maplibregl-popup-content {
            font-size: var(--k-text-sm); line-height: 1.6;
            border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-4);
            box-shadow: var(--k-shadow);
        }

        /* ── Modale conferma eliminazione ────────────────────────────── */
        .confirm-overlay {
            position: fixed; inset: 0; z-index: var(--z-modal);
            background: color-mix(in srgb, var(--color-gray-900) 55%, transparent); backdrop-filter: blur(2px);
            display: none; align-items: center; justify-content: center;
        }
        .confirm-overlay.show { display: flex; }
        .confirm-box {
            background: var(--color-white); border-radius: var(--k-radius); width: 420px; max-width: calc(100vw - 32px);
            box-shadow: var(--k-shadow-xl); overflow: hidden;
            animation: confirmPop .15s ease-out;
        }
        @keyframes confirmPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .confirm-head {
            display: flex; align-items: center; gap: var(--k-space-3);
            padding: var(--k-space-5) var(--k-space-5) var(--k-space-4); background: var(--pl-danger-tenue); border-bottom: 1px solid var(--color-danger-light);
        }
        .confirm-icon {
            flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--k-circle);
            background: var(--color-danger-light); color: var(--color-danger-solid);
            display: flex; align-items: center; justify-content: center;
        }
        .confirm-title { font-size: var(--k-text-xl); font-weight: 700; color: var(--color-danger-testo-tinta); line-height: 1.3; }
        .confirm-body { padding: var(--k-space-5) var(--k-space-5); font-size: var(--k-text-md); color: var(--color-gray-700); line-height: 1.6; }
        .confirm-body b { color: var(--color-gray-900); }
        .confirm-cascade {
            margin-top: var(--k-space-3); background: var(--pl-warning-tenue); border: 1px solid var(--pl-warning-bordo);
            border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-3); font-size: var(--k-text-sm); color: var(--color-warning-testo-tinta);
        }
        .confirm-cascade ul { margin: var(--k-space-2) 0 0; padding-left: var(--k-space-5); }
        .confirm-cascade li { margin: 2px 0; }
        .confirm-irrev { margin-top: var(--k-space-3); font-size: var(--k-text-xs); color: var(--color-gray-500); }
        .confirm-actions {
            display: flex; justify-content: flex-end; gap: var(--k-space-2);
            padding: var(--k-space-4) var(--k-space-5) var(--k-space-5); border-top: 1px solid var(--color-gray-100);
        }
        .confirm-btn {
            padding: var(--k-space-2) var(--k-space-4); border-radius: var(--k-radius); font-size: var(--k-text-sm); font-weight: 600;
            cursor: pointer; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
        }
        .confirm-btn-cancel { background: var(--color-gray-100); color: var(--color-gray-700); border-color: var(--color-gray-200); }
        .confirm-btn-cancel:hover { background: var(--color-gray-200); }
        .confirm-btn-delete { background: var(--color-danger-solid); color: var(--color-white); }
        .confirm-btn-delete:hover { background: var(--color-danger-solid-hover); }
        .confirm-btn-primary { background: var(--color-primary); color: var(--color-white); }
        .confirm-btn-primary:hover { opacity: .88; }

        /* Variante neutra (modale nuovo reparto) — toni verdi del tema azienda */
        .confirm-head.neutral { background: var(--color-primary-light); border-bottom-color: var(--color-primary-light); }
        .confirm-head.neutral .confirm-icon { background: var(--color-primary-light); color: var(--color-primary-testo); }
        .confirm-head.neutral .confirm-title { color: var(--color-primary-testo); }
        .modal-context { font-size: var(--k-text-xs); color: var(--color-gray-500); margin-bottom: var(--k-space-3); }
        .modal-context b { color: var(--color-gray-900); }
        .modal-field { margin-bottom: var(--k-space-3); }
        .modal-field:last-child { margin-bottom: 0; }
        .modal-field label { display: block; font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-500); margin-bottom: var(--k-space-1); }
        .dept-select.field-error { border-color: var(--color-danger-solid); background: var(--pl-danger-tenue); }

/* ── Section switch (Progettazione | Ruoli) ─────────────────────────── */
.section-switch { display: flex; gap: 2px; }
.section-btn {
    padding: var(--k-space-1) var(--k-space-4); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
    font-size: var(--k-text-xs); font-weight: 600; cursor: pointer; background: var(--color-gray-50);
    color: var(--color-gray-500); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--k-space-2);
}
.section-btn:hover { background: var(--color-gray-100); color: var(--color-gray-700); border-color: var(--color-gray-300); }
.section-btn.active {
    background: var(--color-primary);
    color: var(--color-white); border-color: var(--color-primary);
}
.section-btn i { font-size: var(--k-text-2xs); }

/* ══════════════════════════════════════════════════════════════════════
   SEZIONE RUOLI — sidebar, tab, assegnazioni, copertura
   Estratto da azienda/planimetria_gestioneruoli/index.html.twig (lug 2026)
   ══════════════════════════════════════════════════════════════════════ */

/* Sidebar ruoli (fissa a sinistra) + shift della mappa quando attiva */
.ruoli-sidebar {
    position: fixed; top: 106px; left: 70px; bottom: 0; width: 340px;
    background: var(--color-white); border-right: 1px solid var(--color-gray-200);
    display: none; flex-direction: column; overflow: hidden;
    z-index: 801; transition: left .3s ease-in-out;
}
body.planimetria-page:has(.azienda-sidebar:hover) .ruoli-sidebar,
body.planimetria-page:has(.admin-sidebar:hover) .ruoli-sidebar { left: 280px; }
.ruoli-sidebar.show { display: flex; }
@media (max-width: 768px) { .ruoli-sidebar { left: 0; width: 100%; height: 44vh; height: 44dvh; bottom: auto; border-right: none; border-bottom: 2px solid var(--color-gray-200); } }

body.planimetria-page.section-ruoli #map { left: 410px; }
body.planimetria-page.section-ruoli:has(.azienda-sidebar:hover) #map,
body.planimetria-page.section-ruoli:has(.admin-sidebar:hover) #map { left: 620px; }
body.planimetria-page.section-ruoli #civiciLegend { left: 422px; }
body.planimetria-page.section-ruoli:has(.azienda-sidebar:hover) #civiciLegend,
body.planimetria-page.section-ruoli:has(.admin-sidebar:hover) #civiciLegend { left: 632px; }
@media (max-width: 768px) { body.planimetria-page.section-ruoli #civiciLegend { left: 12px; } }
@media (max-width: 768px) { body.planimetria-page.section-ruoli #map { left: 0; } }

/* Tabs sidebar */
        .sidebar-tabs {
            display: flex; border-bottom: 2px solid var(--color-gray-200);
            flex-shrink: 0; background: var(--color-gray-50);
        }
        .sidebar-tab {
            flex: 1; padding: var(--k-space-3) var(--k-space-1);
            border: none; background: transparent;
            font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-500);
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--k-space-1);
            border-bottom: 2px solid transparent; margin-bottom: -2px;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s; white-space: nowrap;
        }
        .sidebar-tab:hover { color: var(--color-gray-700); background: var(--color-gray-100); }
        .sidebar-tab.active { color: var(--color-primary-testo); border-bottom-color: var(--color-primary); background: var(--color-white); }
        .sidebar-tab i { font-size: var(--k-text-2xs); }

        .sidebar-panel {
            display: none; flex: 1; overflow-y: auto; flex-direction: column; min-height: 0;
        }
        .sidebar-panel.active { display: flex; }
        .sidebar-panel::-webkit-scrollbar { width: 5px; }
        .sidebar-panel::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--k-radius); }

        /* ── Tab 1: Dipendenti ───────────────────────────────── */
        /* Footer del pannello: la lista scorre sopra, l'hint resta ancorato in basso */
        .drag-hint {
            font-size: var(--k-text-2xs); color: var(--color-gray-400); text-align: center; padding: var(--k-space-2) var(--k-space-3);
            display: flex; align-items: center; justify-content: center; gap: var(--k-space-1); flex-shrink: 0;
            border-top: 1px solid var(--color-gray-100); background: var(--color-gray-50);
        }
        .drag-hint i { font-size: var(--k-text-2xs); }

        .panel-body { flex: 1; overflow-y: auto; padding: var(--k-space-2) 0; }
        .panel-empty { padding: var(--k-space-8) var(--k-space-4); text-align: center; color: var(--color-gray-400); font-size: var(--k-text-xs); }
        /* Icona sopra il messaggio (spinner, nessuna sede). Due classi: il display
           di Font Awesome (.fas) ha la stessa specificita' di una sola. */
        .panel-empty .panel-empty-icon { display: block; margin-bottom: var(--k-space-2); font-size: var(--k-text-2xl); }
        .panel-empty .panel-empty-icon.segnaposto { font-size: var(--k-text-3xl); opacity: .3; }
        /* Intestazioni dei gruppi nella lista dipendenti (Dipendenti / Datori e soci) */
        .dip-group-header {
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-400);
            text-transform: uppercase; letter-spacing: .6px;
            margin: var(--k-space-3) 2px var(--k-space-2);
        }
        .dip-group-header:first-child { margin-top: 2px; }

        .group-label {
            display: flex; align-items: center; gap: var(--k-space-2);
            padding: var(--k-space-2) var(--k-space-3) var(--k-space-1); font-size: var(--k-text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
        }
        .group-count { margin-left: auto; padding: 1px var(--k-space-2); border-radius: var(--k-radius); font-size: var(--k-text-2xs); font-weight: 600; }

        .pl-dip-card {
            /* Tinta del tipo di persona su avatar ed etichetta: tre categorie da
               distinguere a colpo d'occhio, non stati. Datore e dipendente hanno il
               valore di un token; il viola del socio non ha un corrispettivo in
               palette ed e' definito solo qui. Chi ha gia' una postazione va in grigio. */
            --tinta-socio: #7c3aed;
            --dip-tinta: var(--color-info-solid);
            display: flex; flex-direction: column;
            margin: 2px var(--k-space-2); padding: var(--k-space-2) var(--k-space-2);
            border: 1px solid var(--color-gray-100); border-radius: var(--k-radius);
            background: var(--color-white); transition: border-color .12s, box-shadow .12s;
        }
        .pl-dip-card:hover { border-color: var(--color-gray-200); box-shadow: var(--k-shadow-xs); }
        .pl-dip-card.tipo-datore { --dip-tinta: var(--color-danger-solid); }
        .pl-dip-card.tipo-socio  { --dip-tinta: var(--tinta-socio); }
        .pl-dip-card.assigned { --dip-tinta: var(--color-gray-400); background: var(--pl-success-tenue); border-color: var(--pl-success-bordo); }
        .dip-card-main { display: flex; align-items: center; gap: var(--k-space-2); }
        .dip-avatar {
            width: 30px; height: 30px; border-radius: var(--k-circle); background: var(--dip-tinta);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-white); flex-shrink: 0; position: relative;
        }
        .dip-avatar .assigned-dot {
            position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: var(--k-circle);
            background: var(--color-success); border: 2px solid var(--color-white); display: flex; align-items: center; justify-content: center;
        }
        .dip-avatar .assigned-dot i { font-size: 5px; color: var(--color-white); }
        .dip-info { flex: 1; min-width: 0; }
        .dip-name { font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dip-type { font-size: var(--k-text-2xs); color: var(--dip-tinta); margin-top: 1px; }
        .dip-placed { font-size: var(--k-text-2xs); color: var(--color-success-dark); margin-top: 1px; font-weight: 600; }
        .dip-actions { display: flex; gap: var(--k-space-1); align-items: center; flex-shrink: 0; }
        .btn-assign {
            padding: var(--k-space-1) var(--k-space-2); border: 1px solid var(--color-primary);
            border-radius: var(--k-radius); font-size: var(--k-text-2xs); font-weight: 600;
            color: var(--color-primary); background: transparent;
            cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
        }
        .btn-assign:hover { background: var(--color-primary); color: var(--color-white); }
        .btn-remove-sm {
            padding: var(--k-space-1) var(--k-space-2); border: 1px solid var(--pl-danger-bordo);
            border-radius: var(--k-radius); font-size: var(--k-text-2xs); color: var(--color-danger-solid); background: var(--pl-danger-tenue); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
        }
        .btn-remove-sm:hover { background: var(--pl-danger-bordo); }

        .post-picker { margin-top: var(--k-space-1); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); overflow: hidden; background: var(--color-white); max-height: 180px; overflow-y: auto; }
        .post-picker-empty { padding: var(--k-space-2) var(--k-space-2); font-size: var(--k-text-2xs); color: var(--color-gray-400); text-align: center; }
        .post-item { display: flex; align-items: center; gap: var(--k-space-2); padding: var(--k-space-2) var(--k-space-2); cursor: pointer; transition: background .1s; font-size: var(--k-text-2xs); color: var(--color-gray-700); border-bottom: 1px solid var(--color-gray-50); }
        .post-item:last-child { border-bottom: none; }
        .post-item:hover:not(.occupied) { background: var(--pl-success-tenue); }
        .post-item.occupied { color: var(--color-gray-400); cursor: default; }
        .post-dot { width: 7px; height: 7px; border-radius: var(--k-circle); flex-shrink: 0; }
        .post-dot.free { background: var(--color-success); }
        .post-dot.occupied { background: var(--color-gray-300); }
        .post-num { flex-shrink: 0; min-width: 17px; height: 17px; padding: 0 var(--k-space-1); border-radius: var(--k-radius); background: var(--color-primary-light); color: var(--color-primary-testo); font-size: var(--k-text-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
        .post-item.occupied .post-num { background: var(--color-gray-100); color: var(--color-gray-400); }
        .post-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .post-locate { color: var(--color-gray-300); font-size: var(--k-text-2xs); flex-shrink: 0; transition: color .15s; }
        .post-item:hover .post-locate { color: var(--color-warning); }

        /* Tutte le card si trascinano (anche gli assegnati: spostamento/scambio) */
        .dip-card-main { cursor: grab; }
        .dip-card-main:active { cursor: grabbing; }
        .pl-dip-card.dragging { opacity: .45; transform: scale(.97); }
        body.planimetria-page.is-dragging, body.planimetria-page.is-dragging * { cursor: grabbing !important; user-select: none !important; }
        /* Omino che segue il puntatore: posizione e inclinazione le scrive ruoli.js,
           il resto sta qui. L'alone dice dove cadrebbe: rosso su una postazione
           occupata, verde su una libera, neutro fuori dalle postazioni. */
        .dip-drag-ghost { position: fixed; z-index: var(--z-popover); pointer-events: none; transform-origin: center top; }
        .dip-drag-ghost img {
            display: block; width: 38px; height: 38px;
            filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-black) 40%, transparent));
        }
        .dip-drag-ghost.su-occupata img { filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-danger-solid) 70%, transparent)); }
        .dip-drag-ghost.su-libera img { filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-success) 70%, transparent)); }
        .dip-drag-handle { color: var(--color-gray-300); font-size: var(--k-text-2xs); flex-shrink: 0; cursor: grab; padding: 0 2px; align-self: center; transition: color .15s; }
        .pl-dip-card:hover .dip-drag-handle { color: var(--color-gray-400); }

        /* ── Tab 2: Assegna Ruoli ────────────────────────────── */
        .ruoli-panel-inner { padding: var(--k-space-3); display: flex; flex-direction: column; gap: var(--k-space-2); }
        .ruoli-search-box { position: relative; }
        .ruoli-search-box input {
            width: 100%; padding: var(--k-space-2) var(--k-space-3) var(--k-space-2) var(--k-space-8); border: 1px solid var(--color-gray-300);
            border-radius: var(--k-radius); font-size: var(--k-text-xs); background: var(--color-gray-50); box-sizing: border-box;
        }
        .ruoli-search-box input:focus { outline: none; border-color: var(--color-primary); background: var(--color-white); }
        .ruoli-search-box i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--color-gray-400); font-size: var(--k-text-2xs); }
        .dip-ruolo-row { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); overflow: hidden; transition: box-shadow .15s; }
        .dip-ruolo-row:hover { box-shadow: var(--k-shadow); }
        .dip-row-header { display: flex; align-items: center; gap: var(--k-space-2); padding: var(--k-space-2) var(--k-space-3); }
        .dip-avatar-circle { width: 34px; height: 34px; border-radius: var(--k-circle); display: flex; align-items: center; justify-content: center; font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-white); flex-shrink: 0; }
        .dip-ruolo-name { font-size: var(--k-text-xs); font-weight: 700; color: var(--color-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dip-ruolo-mansione { font-size: var(--k-text-2xs); color: var(--color-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .add-ruolo-btn {
            padding: var(--k-space-1) var(--k-space-2); background: var(--color-primary-light); color: var(--color-primary-testo); border: 1px solid var(--color-primary);
            border-radius: var(--k-radius); font-size: var(--k-text-2xs); font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
            display: flex; align-items: center; gap: var(--k-space-1); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
        }
        .add-ruolo-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
        .dip-ruoli-tags { display: flex; flex-wrap: wrap; gap: var(--k-space-1); padding: 0 var(--k-space-3) var(--k-space-2); }
        .ruolo-tag { display: inline-flex; align-items: center; gap: var(--k-space-1); background: var(--color-gray-100); border: 1px solid var(--color-gray-200); color: var(--color-gray-700); padding: 2px var(--k-space-2); border-radius: var(--k-radius); font-size: var(--k-text-2xs); font-weight: 500; }
        .ruolo-tag.protected { background: var(--color-warning-light); border-color: var(--pl-warning-bordo); color: var(--color-warning-testo-tinta); }
        .ruolo-tag-remove { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-gray-400); font-size: var(--k-text-2xs); display: flex; align-items: center; line-height: 1; transition: color .15s; }
        .ruolo-tag-remove:hover { color: var(--color-danger); }
        .ruolo-tag-lock { font-size: var(--k-text-2xs); opacity: .5; }
        .no-ruoli-text { font-size: var(--k-text-2xs); color: var(--color-gray-400); font-style: italic; }
        .add-ruolo-dropdown { border-top: 1px solid var(--color-gray-200); background: var(--color-gray-50); padding: var(--k-space-1); display: flex; flex-direction: column; gap: 1px; }
        .dropdown-ruolo-item { padding: var(--k-space-2) var(--k-space-2); border-radius: var(--k-radius); font-size: var(--k-text-2xs); color: var(--color-gray-700); cursor: pointer; display: flex; align-items: center; gap: var(--k-space-2); transition: background .1s; }
        .dropdown-ruolo-item:hover { background: var(--color-primary-light); color: var(--color-primary-testo); }
        .dropdown-ruolo-icon { color: var(--color-primary); font-size: var(--k-text-2xs); }
        .dropdown-empty { padding: var(--k-space-2) var(--k-space-2); font-size: var(--k-text-2xs); color: var(--color-gray-400); font-style: italic; text-align: center; }
        .dropdown-restricted-note { padding: var(--k-space-1) var(--k-space-2); font-size: var(--k-text-2xs); color: var(--color-warning-testo-tinta); background: var(--color-warning-light); border-bottom: 1px solid var(--pl-warning-bordo); display: flex; align-items: center; gap: var(--k-space-1); }

        /* ── Tab 3: Copertura ────────────────────────────────── */
        .copertura-inner { padding: var(--k-space-3); display: flex; flex-direction: column; gap: var(--k-space-2); }
        .copertura-status-banner { border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-3); display: flex; flex-direction: column; gap: var(--k-space-1); }
        .copertura-status-banner.ok { background: var(--color-success-light); border: 1px solid var(--pl-success-bordo-forte); }
        .copertura-status-banner.warning { background: var(--color-danger-light); border: 1px solid var(--pl-danger-bordo-forte); }
        .copertura-status-title { display: flex; align-items: center; gap: var(--k-space-2); font-weight: 700; font-size: var(--k-text-sm); }
        .copertura-status-title.ok { color: var(--color-success-testo-tinta); }
        .copertura-status-title.warning { color: var(--color-danger-testo-tinta); }
        .copertura-status-detail { font-size: var(--k-text-xs); color: var(--color-gray-700); }
        .copertura-hint-box { background: var(--pl-warning-tenue); border: 1px solid var(--pl-warning-bordo); border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-3); font-size: var(--k-text-xs); color: var(--color-warning-testo-tinta); display: flex; align-items: flex-start; gap: var(--k-space-2); }
        .copertura-section-title { font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--k-space-1); }
        .copertura-addetto-item { display: flex; align-items: center; gap: var(--k-space-2); padding: var(--k-space-1) 0; border-bottom: 1px solid var(--color-gray-100); }
        .copertura-addetto-avatar { width: 24px; height: 24px; border-radius: var(--k-circle); display: flex; align-items: center; justify-content: center; font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-white); flex-shrink: 0; }
        .copertura-addetto-name { font-size: var(--k-text-2xs); color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ruoli-reparto-row { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-3); display: flex; align-items: center; gap: var(--k-space-2); }
        .ruoli-reparto-info { flex: 1; min-width: 0; }
        .ruoli-reparto-name { font-size: var(--k-text-2xs); font-weight: 600; color: var(--color-gray-800); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ruoli-reparto-meta { font-size: var(--k-text-2xs); color: var(--color-gray-400); }
        .ruoli-addetti-badge { background: var(--color-primary-light); border: 1px solid var(--color-primary); color: var(--color-primary-testo); font-size: var(--k-text-xs); font-weight: 700; padding: var(--k-space-1) var(--k-space-2); border-radius: var(--k-radius); white-space: nowrap; flex-shrink: 0; }

        /* ── MapLibre popup ──────────────────────────────────── */
        .maplibregl-ctrl-group { background: var(--color-white) !important; border: 1px solid var(--color-gray-200) !important; box-shadow: var(--k-shadow-xs) !important; }
        .maplibregl-popup-content { font-size: var(--k-text-sm); line-height: 1.6; border-radius: var(--k-radius); padding: var(--k-space-3) var(--k-space-4); box-shadow: var(--k-shadow); min-width: 220px; }
        .popup-title { font-weight: 700; color: var(--color-gray-800); margin-bottom: var(--k-space-2); font-size: var(--k-text-sm); display: flex; align-items: center; gap: var(--k-space-2); }
        .popup-title-icon { color: var(--color-primary); }
        .popup-assigned { font-size: var(--k-text-xs); color: var(--color-gray-700); margin-bottom: var(--k-space-2); padding: var(--k-space-2) var(--k-space-2); background: var(--pl-success-tenue); border-radius: var(--k-radius); border: 1px solid var(--pl-success-bordo); }
        .popup-assigned strong { color: var(--color-success-dark); }
        .popup-select { width: 100%; padding: var(--k-space-1) var(--k-space-2); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius); font-size: var(--k-text-xs); margin-bottom: var(--k-space-2); outline: none; }
        .popup-select:focus { border-color: var(--color-primary); }
        .popup-no-dip { font-size: var(--k-text-2xs); color: var(--color-gray-400); margin-bottom: var(--k-space-2); text-align: center; padding: var(--k-space-2); background: var(--color-gray-50); border-radius: var(--k-radius); }
        .popup-btn { width: 100%; padding: var(--k-space-2); border: none; border-radius: var(--k-radius); font-size: var(--k-text-xs); font-weight: 600; cursor: pointer; transition: opacity .15s; }
        .popup-btn-assign { background: var(--color-primary); color: var(--color-white); }
        .popup-btn-assign:hover { opacity: .85; }
        .popup-btn-remove { background: var(--color-danger-light); color: var(--color-danger-solid); margin-top: var(--k-space-1); }
        .popup-btn-remove:hover { background: var(--pl-danger-bordo); }

        /* ── Toast ───────────────────────────────────────────── */
        .toast-container { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: var(--z-avvisi); display: flex; flex-direction: column; gap: var(--k-space-2); pointer-events: none; }
        .toast { padding: var(--k-space-2) var(--k-space-4); border-radius: var(--k-radius); font-size: var(--k-text-xs); font-weight: 600; color: var(--color-white); box-shadow: var(--k-shadow); animation: toastIn .25s ease, toastOut .3s ease 2.5s forwards; pointer-events: none; }
        .toast.success { background: var(--color-success); }
        .toast.error { background: var(--color-danger); }
        @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* ── Tastino salva manuale (autosave sempre attivo, questo forza il flush) ── */
.btn-save-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
    background: var(--color-gray-50); color: var(--color-gray-500); cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.btn-save-icon:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary-light); }
.btn-save-icon:disabled { opacity: .5; cursor: default; }
.btn-save-icon svg { width: 16px; height: 16px; }

/* ── Copertura: avviso fisso in alto al centro, SOLO in Progettazione ──
   In Ruoli l'errore si legge sulla mappa (spotlight + pill con popup in hover),
   qui invece i segnali sono spenti e serve qualcosa di sempre visibile.
   Non è cliccabile e non intercetta il mouse: sotto ci si disegna. */
.copertura-avviso {
    position: fixed; top: 118px; left: calc(50vw + 35px); transform: translateX(-50%);
    z-index: 850; display: none; flex-direction: column; align-items: center; gap: var(--k-space-1);
    max-width: min(92vw, 560px); pointer-events: none;
    background: var(--color-danger-solid); color: var(--color-white); border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-4);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-danger-solid) 35%, transparent);
}
@media (max-width: 768px) { .copertura-avviso { left: 50vw; } }
body.planimetria-page:not(.section-ruoli) .copertura-avviso.show { display: flex; }

.cav-line {
    display: inline-flex; align-items: center; gap: var(--k-space-2);
    font-size: var(--k-text-sm); font-weight: 700; white-space: nowrap;
}
.cav-sub { font-size: var(--k-text-2xs); font-weight: 600; opacity: .85; text-align: center; }
/* La forma (triangolo/croce) arriva dalle classi .cov-shape-*; sul rosso
   il simbolo diventa bianco */
.cav-shape { width: 13px; height: 13px; flex-shrink: 0; }
.cav-line .cov-shape-ai,
.cav-line .cov-shape-ps { background: var(--color-white); }
.cav-count { font-size: var(--k-text-xs); font-weight: 600; opacity: .85; }
.cav-seg {
    display: inline-flex; align-items: center; gap: var(--k-space-1);
    background: color-mix(in srgb, var(--color-white) 16%, transparent); border-radius: var(--k-pill);
    padding: 2px var(--k-space-2); font-size: var(--k-text-2xs);
}

/* Contatore rosso sul tab "Ruoli" dello switch di sezione */
.section-badge {
    background: var(--color-danger-solid); color: var(--color-white);
    font-size: var(--k-text-2xs); font-weight: 800; line-height: 1.4;
    border-radius: var(--k-pill); padding: 1px var(--k-space-2);
}

/* ── Deficit copertura per edificio: pill al centroide dell'edificio oscurato ──
   Simboli dei tag ruoli sicurezza (gestione dipendenti): triangolo = Antincendio,
   croce = Primo Soccorso (predisposta) */
.cov-marker { display: none; flex-direction: column; align-items: center; gap: var(--k-space-1); cursor: help; }
body.planimetria-page.section-ruoli .cov-marker { display: flex; }
.cov-marker:hover { z-index: 5; }
.cov-pill {
    display: inline-flex; align-items: center; gap: var(--k-space-1);
    background: var(--color-white); border: 1.5px solid var(--pl-danger-bordo); border-radius: var(--k-pill);
    padding: var(--k-space-1) var(--k-space-2); font-size: var(--k-text-2xs); font-weight: 800; color: var(--color-danger-solid-hover);
    box-shadow: var(--k-shadow); white-space: nowrap;
}
.cov-pill:hover { background: var(--pl-danger-tenue); }
.cov-shape { width: 11px; height: 11px; flex-shrink: 0; }
.cov-shape-ai { background: var(--color-danger-solid); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* Verde della croce di primo soccorso: non e' il verde di stato. Lo stesso valore
   lo disegna ruoli.js (COVERAGE_ROLES) sul canvas dei badge accanto agli omini,
   dove var() non arriva: se cambia, cambia in tutti e due i posti. */
.cov-shape-ps { --primo-soccorso: #16a34a; background: var(--primo-soccorso); clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%); }
/* Popup dell'edificio scoperto: esce al passaggio del mouse sulla pill.
   pointer-events none -> è solo informativo e non intercetta il drag dei
   dipendenti sulla mappa; il mouse resta sulla pill, che tiene aperto il popup. */
.cov-popup {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    width: max-content; max-width: 300px;
    background: var(--color-white); border: 1px solid var(--pl-danger-bordo); border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-lg);
    padding: var(--k-space-3) var(--k-space-3); text-align: left; cursor: default;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.cov-marker:hover .cov-popup {
    opacity: 1; visibility: visible; transform: translateX(-50%);
}
.cov-popup-title {
    font-size: var(--k-text-2xs); font-weight: 800; color: var(--color-gray-400);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--k-space-2);
}
.cov-popup-row {
    display: flex; align-items: flex-start; gap: var(--k-space-2);
    font-size: var(--k-text-xs); color: var(--color-danger-testo-tinta); font-weight: 600; line-height: 1.45;
    margin-top: var(--k-space-2);
}
.cov-popup-row .cov-shape { margin-top: 2px; }
.cov-popup-names { font-size: var(--k-text-2xs); color: var(--color-gray-700); margin: var(--k-space-1) 0 0 var(--k-space-5); line-height: 1.45; }
.cov-popup-label { font-weight: 700; color: var(--color-gray-500); }
.cov-popup-warn { color: var(--color-warning-testo-tinta); }
.cov-popup-hint {
    font-size: var(--k-text-2xs); color: var(--color-warning-testo-tinta); background: var(--pl-warning-tenue);
    border: 1px solid var(--pl-warning-bordo); border-radius: var(--k-radius);
    padding: var(--k-space-2) var(--k-space-2); margin-top: var(--k-space-2); line-height: 1.45;
}

/* ── Puntino posizione sede (visibile finché non c'è un edificio disegnato) ── */
.sede-pin-dot {
    /* Ombra scura del puntino sulla mappa: deve staccarlo anche dalla foto aerea,
       quindi e' piu' marcata delle elevazioni del design system. La usano sia la
       regola sia i fotogrammi della pulsazione, che la sovrascrivono a ciclo continuo. */
    --ombra-pin: 0 1px 4px color-mix(in srgb, var(--color-black) 35%, transparent);
    width: 16px; height: 16px; border-radius: var(--k-circle);
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    box-shadow: var(--ombra-pin);
    cursor: default;
    animation: sedePinPulse 1.8s ease-out infinite;
}
@keyframes sedePinPulse {
    0%   { box-shadow: var(--ombra-pin), 0 0 0 0 rgba(var(--color-primary-rgb), .45); }
    70%  { box-shadow: var(--ombra-pin), 0 0 0 14px rgba(var(--color-primary-rgb), 0); }
    100% { box-shadow: var(--ombra-pin), 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Gestione tramite foto (planimetria/foto.js)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schermata iniziale: mappa | foto ─────────────────────────────────────
   Copre l'area di contenuto (toolbar compresa) finché non si è scelto: i
   picker delle sedi partono solo dopo, così in modalità foto non si va a
   geocodificare un indirizzo che non serve. */
.mode-splash {
    position: fixed; top: 50px; left: 70px; right: 0; bottom: 0;
    /* Copre l'area di lavoro, non l'applicazione: sta sopra la toolbar della
       mappa (990) ma sotto la sidebar (1000) e la topbar (1030), che restano
       raggiungibili. A 1200 ci finiva sopra, e chi non voleva scegliere niente
       si trovava la pagina murata. */
    z-index: 995; display: flex; align-items: center; justify-content: center;
    padding: var(--k-space-6); overflow-y: auto;
    background: var(--color-gray-50);
    transition: left .3s ease-in-out;
}
.mode-splash.hidden { display: none; }
/* La sidebar si apre in sovrapposizione al passaggio del mouse: lo splash si
   sposta con lei, come fa la toolbar, cosi' le due schede restano intere. */
body.planimetria-page:has(.azienda-sidebar:hover) .mode-splash,
body.planimetria-page:has(.admin-sidebar:hover) .mode-splash { left: 280px; }
@media (max-width: 768px) { .mode-splash { left: 0; padding: var(--k-space-4); } }

.mode-splash-inner { width: 100%; max-width: 880px; }
.mode-splash-head { text-align: center; margin-bottom: var(--k-space-6); }
.mode-splash-title { font-size: var(--k-text-2xl); font-weight: 700; color: var(--color-gray-900); }
.mode-splash-sub { font-size: var(--k-text-sm); color: var(--color-gray-500); margin-top: var(--k-space-2); }

.mode-splash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-5); }
@media (max-width: 700px) { .mode-splash-grid { grid-template-columns: 1fr; } }

.mode-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--k-space-3);
    padding: var(--k-space-6) var(--k-space-6) var(--k-space-6); text-align: center; cursor: pointer;
    background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-xs);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mode-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--k-shadow-lg);
    transform: translateY(-2px);
}
.mode-card-icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gray-600);
}
.mode-card-title { font-size: var(--k-text-xl); font-weight: 700; color: var(--color-gray-800); }
.mode-card-text { font-size: var(--k-text-sm); color: var(--color-gray-500); line-height: 1.55; }
.mode-card-cta {
    margin-top: var(--k-space-2); padding: var(--k-space-2) var(--k-space-5); border-radius: var(--k-radius);
    background: var(--color-primary); color: var(--color-white);
    font-size: var(--k-text-sm); font-weight: 600;
}

/* ── Pannello della foto (in basso a sinistra, dove in modalità mappa c'è
      la legenda dei civici — che in modalità foto è spenta) ───────────── */
.foto-panel {
    position: fixed; left: 82px; bottom: 16px; width: 252px;
    z-index: 830; display: none; flex-direction: column; gap: var(--k-space-2);
    background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
    box-shadow: var(--k-shadow); padding: var(--k-space-3) var(--k-space-3);
}
.foto-panel.show { display: flex; }
@media (max-width: 768px) {
    .foto-panel { left: 8px; right: 8px; width: auto; bottom: 8px; }
}
.foto-panel-header {
    font-size: var(--k-text-xs); font-weight: 700; color: var(--color-gray-700);
    text-transform: uppercase; letter-spacing: .03em;
}
.foto-text { font-size: var(--k-text-xs); color: var(--color-gray-500); line-height: 1.5; margin: 0; }
.foto-loading { font-size: var(--k-text-xs); color: var(--color-gray-500); display: flex; align-items: center; gap: var(--k-space-2); }
.foto-hint {
    font-size: var(--k-text-2xs); color: var(--color-warning-testo-tinta); background: var(--pl-warning-tenue);
    border: 1px solid var(--pl-warning-bordo); border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-2); line-height: 1.45;
}

.foto-btn-row { display: flex; gap: var(--k-space-2); flex-wrap: wrap; }
.foto-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-2);
    padding: var(--k-space-2) var(--k-space-3); border: 1px solid var(--color-gray-300); border-radius: var(--k-radius);
    background: var(--color-gray-50); color: var(--color-gray-700); font-size: var(--k-text-xs); font-weight: 600;
    cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.foto-btn:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); }
.foto-btn.grow { flex: 1; }
.foto-btn.wide { width: 100%; }
.foto-btn.primary {
    background: var(--color-primary); border-color: transparent; color: var(--color-white);
}
.foto-btn.primary:hover { opacity: .9; background: var(--color-primary); }
.foto-btn.active {
    background: var(--color-primary-light); border-color: var(--color-primary);
    color: var(--color-primary);
}
.foto-btn.danger { color: var(--color-danger-solid-hover); border-color: var(--pl-danger-bordo); background: var(--pl-danger-tenue); }
.foto-btn.danger:hover { background: var(--color-danger-light); border-color: var(--pl-danger-bordo-forte); }

.foto-scala-row { display: flex; align-items: center; gap: var(--k-space-2); flex-wrap: wrap; }
.foto-scala-val { font-size: var(--k-text-md); font-weight: 700; color: var(--color-gray-800); }
.foto-badge {
    font-size: var(--k-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 2px var(--k-space-2); border-radius: var(--k-pill);
    background: var(--pl-success-tenue); color: var(--color-success-solid); border: 1px solid var(--pl-success-bordo);
}
.foto-badge.warn { background: var(--pl-warning-tenue); color: var(--color-warning-solid); border-color: var(--pl-warning-bordo); }

.foto-opacita { display: flex; align-items: center; gap: var(--k-space-2); font-size: var(--k-text-xs); color: var(--color-gray-500); }
.foto-opacita input { flex: 1; }

.foto-panel-footer { display: flex; gap: var(--k-space-3); }
.foto-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: var(--k-text-xs); font-weight: 600; color: var(--color-gray-500); text-align: left;
}
.foto-link:hover { color: var(--color-gray-700); text-decoration: underline; }
.foto-link.danger { color: var(--color-danger-solid); }
.foto-link.modo {
    display: flex; align-items: center; gap: var(--k-space-2);
    border-top: 1px solid var(--color-gray-100); padding-top: var(--k-space-2); margin-top: 2px;
}


/* ── Veli sopra la mappa ───────────────────────────────────────────────────
   Regolazione e calibrazione passano da qui: il gesto non arriva mai agli
   strumenti di disegno, che altrimenti tirerebbero su un poligono. */
.foto-calib, .sposta-velo {
    position: fixed; top: 106px; left: 70px; right: 0; bottom: 0;
    z-index: 820; display: none;
}
.foto-calib.show, .sposta-velo.show { display: block; }
@media (max-width: 768px) { .foto-calib, .sposta-velo { left: 0; } }

.foto-calib { cursor: crosshair; }
.sposta-velo { cursor: grab; touch-action: none; }
.sposta-velo.dragging { cursor: grabbing; }
/* Rotazione: il cursore dice che il gesto e' "gira", non "trascina" */
.sposta-velo.ruota { cursor: alias; }
.sposta-velo.ruota.dragging { cursor: grabbing; }

.foto-calib-hint {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    max-width: min(92vw, 520px); text-align: center;
    background: color-mix(in srgb, var(--color-gray-900) 92%, transparent); color: var(--color-white);
    font-size: var(--k-text-xs); font-weight: 600; line-height: 1.5;
    border-radius: var(--k-radius); padding: var(--k-space-2) var(--k-space-4);
    box-shadow: var(--k-shadow); pointer-events: none;
}

/* In modalità foto lo sfondo della mappa non esiste: il selettore ortofoto/
   satellite sparisce (il pulsante "torna alla sede" resta e inquadra la foto). */
body.planimetria-page.planimetria-foto #btnSatellite,
body.planimetria-page.planimetria-foto #basemapMenu { display: none !important; }

/* ── Fotocamera in pagina ────────────────────────────────────────────────── */
.foto-camera {
    position: fixed; inset: 0; z-index: var(--z-preview);
    display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--color-gray-900) 88%, transparent); padding: var(--k-space-5);
}
.foto-camera.show { display: flex; }
.foto-camera-box { display: flex; flex-direction: column; gap: var(--k-space-3); align-items: center; max-width: 100%; }
.foto-camera-video {
    max-width: min(94vw, 900px); max-height: 72vh;
    border-radius: var(--k-radius); background: var(--color-black); box-shadow: var(--k-shadow-lg);
}
.foto-camera-actions { display: flex; gap: var(--k-space-2); }
.foto-camera-actions .foto-btn { padding: var(--k-space-2) var(--k-space-4); font-size: var(--k-text-sm); }
.foto-camera-hint { font-size: var(--k-text-xs); color: var(--color-gray-200); text-align: center; }

/* ── Avvio della modalità foto: due passaggi al centro dello schermo ───────────
   Al centro e non in un angolo perché sono passaggi obbligati: senza la foto non
   si disegna, e senza la scala i metri quadri non vorrebbero dire niente. Lo
   sfondo velato tiene fuori la mappa finché non si è deciso. */
.foto-wizard {
    /* Parte sotto la toolbar: il selettore sede e lo switch Mappa|Foto devono
       restare raggiungibili anche con il passaggio aperto. */
    position: fixed; top: 106px; left: 70px; right: 0; bottom: 0;
    /* Stesso ragionamento dello splash: sopra la mappa, sotto la chrome. */
    z-index: 995; display: none; align-items: center; justify-content: center;
    padding: var(--k-space-5); background: color-mix(in srgb, var(--color-gray-900) 32%, transparent);
    transition: left .3s ease-in-out;
}
.foto-wizard.show { display: flex; }
body.planimetria-page:has(.azienda-sidebar:hover) .foto-wizard,
body.planimetria-page:has(.admin-sidebar:hover) .foto-wizard { left: 280px; }
@media (max-width: 768px) { .foto-wizard { left: 0; padding: 14px; } }

.foto-wizard-box {
    width: 100%; max-width: 460px;
    background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-lg); padding: var(--k-space-6) var(--k-space-6);
}
.foto-wizard-step {
    font-size: var(--k-text-2xs); font-weight: 700; color: var(--color-gray-500);
    text-transform: uppercase; letter-spacing: .06em;
}
.foto-wizard-title { font-size: var(--k-text-xl); font-weight: 700; color: var(--color-gray-900); margin: var(--k-space-1) 0 var(--k-space-3); }
.foto-wizard-text { font-size: var(--k-text-sm); color: var(--color-gray-600); line-height: 1.6; margin: 0 0 var(--k-space-2); }
.foto-wizard-actions {
    display: flex; align-items: center; gap: var(--k-space-3); flex-wrap: wrap; margin-top: var(--k-space-4);
}
/* Seconda strada, per chi la foto la vuole rifare invece di misurarla */
.foto-wizard-alt {
    display: flex; align-items: center; gap: var(--k-space-3); flex-wrap: wrap;
    margin-top: var(--k-space-4); padding-top: var(--k-space-3); border-top: 1px solid var(--color-gray-100);
    font-size: var(--k-text-xs); color: var(--color-gray-500);
}

/* Senza foto gli strumenti di disegno non hanno su cosa lavorare */
body.planimetria-page.foto-senza-foto #toolPalette,
body.planimetria-page.foto-senza-foto #blockPalette,
body.planimetria-page.foto-senza-foto #panelStruttura { opacity: .4; pointer-events: none; }

/* ── Palette staccata: agisce sulla planimetria intera ─────────────────────────
   Stesso aspetto della palette degli strumenti (`.tool-palette`) ma separata:
   quello che c'è dentro non disegna, muove e gira tutto il disegno in blocco.
   Il `top` lo calcola editor.js (_posizionaBlockPalette) misurando la palette
   sopra, così le due non si accavallano se cambiano gli strumenti. */
.block-palette { top: 400px; }

/* ── Trasparenza dello sfondo (mappa e foto) ───────────────────────────────────
   Un comando solo, accanto agli altri strumenti mappa: sbiadisce la mappa (velo
   bianco) o la foto, per far risaltare quello che si sta disegnando. Il pannello
   si apre sopra il pulsante, dalla stessa parte del menu degli sfondi. */
.map-tool-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sfondo-alpha-panel {
    position: fixed; right: 12px; bottom: 92px; z-index: 871;
    display: none; flex-direction: column; gap: var(--k-space-2); width: 220px;
    background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
    box-shadow: var(--k-shadow); padding: var(--k-space-3) var(--k-space-3);
}
.sfondo-alpha-panel.show { display: flex; }
.sfondo-alpha-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-space-2);
    font-size: var(--k-text-xs); font-weight: 600; color: var(--color-gray-700);
}
.sfondo-alpha-val { font-size: var(--k-text-xs); font-weight: 700; color: var(--color-gray-900); }
.sfondo-alpha-panel input[type=range] { width: 100%; }
.sfondo-alpha-reset {
    align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer;
    font-size: var(--k-text-xs); font-weight: 600; color: var(--color-gray-500);
}
.sfondo-alpha-reset:hover { color: var(--color-gray-700); text-decoration: underline; }

/* ── Fuoco da tastiera ─────────────────────────────────────────────────────────
   Editor a schermo pieno: qui il Tab è l'unico modo per raggiungere i comandi a
   icona, e diversi campi azzerano l'outline per non sporcare il bordo
   arrotondato. Il colore è quello dell'area, come il resto della pagina.
   `.civici-legend-btn` ha già la sua regola, più su. */
.sede-trigger:focus-visible,
.tool-btn:focus-visible,
.map-tool-btn:focus-visible,
.basemap-toggle:focus-visible,
.section-btn:focus-visible,
.btn-save-icon:focus-visible,
.foto-btn:focus-visible,
.confirm-btn:focus-visible,
.floor-btn:focus-visible,
.dept-select:focus-visible,
.popup-select:focus-visible {
    outline: 2px solid var(--color-primary-solid);
    outline-offset: 2px;
}
/* Campi senza bordo proprio: lo mostra il contenitore, e l'outline sta dentro
   perché tendina e pannello tagliano quello che esce. */
.azienda-search-wrap:focus-within,
.ruoli-search-box:focus-within {
    outline: 2px solid var(--color-primary-solid);
    outline-offset: -2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tablet e telefono
   Sotto i 1024px la sidebar dell'app è un overlay (collapsible-sidebar.css):
   niente fascia di 70px a sinistra. Il :is(..., *) ha la stessa specificità
   delle regole :has(.sidebar:hover) qui sopra, e le batte anche col dito
   rimasto "in hover" sulla sidebar dopo averla chiusa.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    body.planimetria-page:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) :is(.map-toolbar, #map, .map-placeholder, .mode-splash, .foto-calib, .sposta-velo, .foto-wizard, .ruoli-sidebar) { left: 0; }
    body.planimetria-page:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) :is(.tool-palette, .civici-legend, .foto-panel) { left: 12px; }
    body.planimetria-page:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) .asset-flyout { left: 68px; }
    body.planimetria-page.section-ruoli:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) #map { left: 340px; }
    body.planimetria-page.section-ruoli:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) #civiciLegend { left: 352px; }
    .copertura-avviso { left: 50vw; }
    .mode-splash { padding: var(--k-space-4); }
    /* I picker cedono spazio invece di spingere fuori lo switch */
    .sede-picker { flex-shrink: 1; min-width: 0; }
    .sede-trigger { min-width: 0; }
}

/* Chip dei piani e menu «⋯»: esistono solo su telefono. Su PC i contenitori
   del menu non fanno da scatola e la barra resta identica. */
.floor-chip, .toolbar-more-btn { display: none; }
.toolbar-more, .toolbar-more-menu { display: contents; }

@media (max-width: 768px) {
    /* Spazio da lasciare libero in basso: barra strumenti (40px + bordi) e margini */
    body.planimetria-page { --pl-basso: calc(66px + env(safe-area-inset-bottom, 0px)); }
    body.planimetria-page:not(:has(#toolPalette.show)) { --pl-basso: calc(12px + env(safe-area-inset-bottom, 0px)); }

    /* ── Barra in alto: una riga sola ── */
    .map-toolbar { padding: 0 var(--k-space-2); gap: 6px; }
    .map-toolbar > .toolbar-sep { display: none; }
    .sede-picker { flex: 1 1 0; }
    .sede-trigger { width: 100%; max-width: none; min-height: 40px; padding: var(--k-space-1) var(--k-space-2); }
    .sede-trigger-name { font-size: var(--k-text-sm); }
    .sede-trigger-addr { display: none; }
    .sede-dropdown { min-width: min(280px, calc(100vw - 16px)); }
    #sectionSwitch { flex-shrink: 0; }
    #sectionSwitch .section-btn { min-width: 40px; height: 40px; padding: 0 var(--k-space-3); justify-content: center; gap: var(--k-space-1); }
    #sectionSwitch .section-btn i { font-size: var(--k-text-sm); }
    .section-btn-label { display: none; }

    .toolbar-more { display: block; position: relative; flex-shrink: 0; }
    .toolbar-more-btn {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
        background: var(--color-gray-50); color: var(--color-gray-600); cursor: pointer;
    }
    .toolbar-more-btn[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-white); }
    .toolbar-more-menu {
        display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown);
        flex-direction: column; gap: var(--k-space-2); min-width: 220px;
        background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
        box-shadow: var(--k-shadow); padding: var(--k-space-2);
    }
    .toolbar-more-menu.open { display: flex; }
    .toolbar-more-menu .toolbar-sep { display: none !important; }
    .toolbar-more-menu .mode-switch .section-btn { flex: 1; height: 40px; justify-content: center; }
    .toolbar-more-menu .toolbar-right { margin-left: 0; justify-content: space-between; }
    .toolbar-more-menu #autoSaveLabel { font-size: var(--k-text-xs); color: var(--color-gray-500); }
    .toolbar-more-menu .btn-save-icon { width: auto; height: 40px; padding: 0 var(--k-space-3); gap: var(--k-space-2); margin-left: auto; font-size: var(--k-text-xs); font-weight: 600; }
    .toolbar-more-menu .btn-save-icon::after { content: 'Salva ora'; }

    /* ── Strumenti di disegno: barra orizzontale in basso ──
       Pulsanti da 40px: le due palette (8 strumenti) stanno intere in 390px.
       Su schermi più stretti la palette principale scorre, con una sfumatura
       al bordo (classe .scorre, v. editor.js) a dire che c'è dell'altro. */
    body.planimetria-page .tool-palette {
        top: auto !important; /* blockPalette riceve il top inline da editor.js */
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none;
    }
    body.planimetria-page .tool-palette::-webkit-scrollbar { display: none; }
    body.planimetria-page #toolPalette { left: 8px; max-width: calc(100vw - 112px); } /* a destra c'è la palette Sposta/Ruota */
    body.planimetria-page #blockPalette { left: auto; right: 8px; }
    #toolPalette.scorre { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
    #toolPalette.scorre.in-fondo { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
    .tool-palette .tool-btn { width: 40px; height: 40px; flex-shrink: 0; }
    .tool-palette .tool-sep { width: 1px; height: auto; flex-shrink: 0; margin: var(--k-space-1) 2px; }
    body.planimetria-page #assetFlyout {
        top: auto; left: 8px; right: 56px; width: auto; bottom: var(--pl-basso);
        max-height: 45vh; max-height: 45dvh; overflow-y: auto;
    }
    .asset-flyout .asset-grid { max-height: none; }
    /* Il flyout scorre intero: la ricerca resta attaccata in alto */
    .asset-flyout .asset-cerca { position: sticky; top: calc(-1 * var(--k-space-3)); z-index: 1; background: var(--color-white); padding-top: var(--k-space-2); }

    /* ── Pulsanti mappa: colonna a destra sopra la barra ── */
    .map-tools-br { right: 8px; bottom: var(--pl-basso); flex-direction: column; align-items: flex-end; gap: 6px; }
    .basemap-toggle { padding: 5px; }
    .basemap-toggle-label, .basemap-toggle-note { display: none !important; }
    .basemap-menu, .sfondo-alpha-panel { right: 56px; bottom: var(--pl-basso); width: min(232px, calc(100vw - 72px)); }
    body.planimetria-page:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) .civici-legend { left: 12px; bottom: var(--pl-basso); }
    .foto-panel { bottom: var(--pl-basso); right: 56px; }
    .toast-container { bottom: calc(var(--pl-basso) + 8px); }

    /* ── Hint e statistiche di disegno ── */
    .map-hint {
        left: 12px; transform: none; bottom: var(--pl-basso);
        max-width: calc(100vw - 76px); white-space: normal; padding: var(--k-space-2) var(--k-space-3);
    }
    body.planimetria-page:has(#civiciLegend.show) .map-hint { bottom: calc(var(--pl-basso) + 44px); }
    .draw-info {
        top: auto; right: 8px; bottom: calc(var(--pl-basso) + 140px); /* sopra la colonna dei pulsanti */
        min-width: 0; padding: var(--k-space-1) var(--k-space-3); font-size: var(--k-text-2xs);
    }
    .di-row { gap: var(--k-space-3); padding: 2px 0; }
    .di-val { font-size: var(--k-text-xs); }

    /* ── Avviso Copertura: pillola a sinistra, lascia posto al chip dei piani ── */
    .copertura-avviso {
        top: 114px; left: 8px; transform: none; align-items: flex-start;
        max-width: calc(100vw - 92px); padding: var(--k-space-1) var(--k-space-3);
    }
    .cav-line { white-space: normal; flex-wrap: wrap; font-size: var(--k-text-xs); }
    .cav-sub { text-align: left; }

    /* ── Piani: chip in alto a destra, il pannello si apre come foglio ── */
    body.planimetria-page:has(#floorPanel.show) .floor-chip {
        position: fixed; top: 114px; right: 8px; z-index: 860;
        display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-1);
        min-width: 56px; height: 40px; padding: 0 var(--k-space-3);
        background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--k-radius);
        box-shadow: var(--k-shadow);
        font-size: var(--k-text-sm); font-weight: 700; color: var(--color-primary); cursor: pointer;
    }
    .floor-chip[aria-expanded="true"] { border-color: var(--color-primary); }
    body.planimetria-page:not(.pl-piani-aperti) #rightPanels { display: none; }
    #rightPanels {
        top: 162px; right: 8px; max-width: calc(100vw - 16px);
        max-height: calc(100vh - 162px - var(--pl-basso) - 8px);
        max-height: calc(100dvh - 162px - var(--pl-basso) - 8px); overflow-y: auto;
    }
    .floor-btn-list { max-height: none; }
    .floor-actions button { min-height: 40px; }
    /* Col foglio aperto i pannellini della mappa si fanno da parte */
    body.planimetria-page.pl-piani-aperti :is(.copertura-avviso, .map-tools-br, .draw-info, .map-hint) { display: none !important; }

    /* ── Ruoli: lista in alto, la mappa occupa lo spazio che resta sotto ── */
    body.planimetria-page.section-ruoli:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) #map { left: 0; }
    body.planimetria-page.section-ruoli:is(:has(.azienda-sidebar:hover), :has(.admin-sidebar:hover), *) #civiciLegend { left: 12px; }
    body.planimetria-page.section-ruoli :is(#map, .map-placeholder) { top: calc(106px + 44vh); top: calc(106px + 44dvh); }
    body.planimetria-page.section-ruoli:has(#floorPanel.show) .floor-chip { top: calc(114px + 44vh); top: calc(114px + 44dvh); }
    body.planimetria-page.section-ruoli #rightPanels {
        top: calc(162px + 44vh); top: calc(162px + 44dvh);
        max-height: calc(56vh - 174px); max-height: calc(56dvh - 174px);
    }
}