/* Stile Gabry: le pagine comuni (Siti, Clienti, Impostazioni, Stato Sistema,
   Log Operatori...) prendono il nuovo aspetto ridefinendo le variabili di
   Bootstrap, senza toccare i loro template (spec §4.5).
   REGOLA: ogni selettore comincia con html[data-stile="gabry"]; con lo stile
   spento questo file non e' nemmeno caricato, ma il prefisso resta la garanzia
   (tests/test_stile_gabry_pagine_comuni.py). Caricato DOPO gabry.css. */
html[data-stile="gabry"] {
  --bs-body-bg: var(--color-page); --bs-body-color: var(--color-ink); --bs-body-font-family: var(--font-sans);
  --bs-secondary-color: var(--color-ink-2); --bs-tertiary-color: var(--color-ink-3);
  --bs-border-color: var(--color-line); --bs-border-color-translucent: var(--color-line);
  --bs-primary: var(--color-accent-core); --bs-primary-rgb: var(--theme-accent);
  --bs-link-color: var(--color-accent-ink); --bs-link-hover-color: var(--color-accent);
  --bs-tertiary-bg: var(--color-surface); --bs-secondary-bg: var(--color-raised);
}
html[data-stile="gabry"] .card { --bs-card-bg: var(--color-surface); --bs-card-border-color: var(--color-line);
  --bs-card-cap-bg: transparent; --bs-card-border-radius: 12px; box-shadow: var(--ombra-card); }
html[data-stile="gabry"] .bg-dark { background-color: var(--color-surface) !important; }
html[data-stile="gabry"] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-ink);
  --bs-table-border-color: var(--color-line); --bs-table-hover-bg: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"] .table-dark { --bs-table-bg: transparent; --bs-table-color: var(--color-ink); --bs-table-border-color: var(--color-line); }
html[data-stile="gabry"] .form-control, html[data-stile="gabry"] .form-select { border-radius: 8px; font-size: 13px; }
html[data-stile="gabry"] .form-control:focus, html[data-stile="gabry"] .form-select:focus {
  border-color: rgba(var(--theme-glow), .5); box-shadow: 0 0 0 1px rgba(var(--theme-glow), .5); }
html[data-stile="gabry"] .btn { border-radius: 8px; font-weight: 500; }
html[data-stile="gabry"] .btn-primary { --bs-btn-bg: rgba(var(--theme-glow), .13); --bs-btn-border-color: rgba(var(--theme-glow), .30);
  --bs-btn-color: var(--color-accent); --bs-btn-hover-bg: rgba(var(--theme-glow), .20); --bs-btn-hover-border-color: rgba(var(--theme-glow), .46);
  --bs-btn-hover-color: var(--color-accent); --bs-btn-active-bg: rgba(var(--theme-glow), .26); --bs-btn-active-color: var(--color-accent); }
html[data-stile="gabry"] .btn-outline-info { --bs-btn-color: var(--color-accent-ink); --bs-btn-border-color: var(--color-line-2);
  --bs-btn-hover-bg: rgba(var(--theme-glow), .14); --bs-btn-hover-border-color: rgba(var(--theme-glow), .34); --bs-btn-hover-color: var(--color-accent); }
html[data-stile="gabry"] .modal-content { background: var(--color-raised); border-color: var(--color-line-2); box-shadow: var(--ombra-alta); }
html[data-stile="gabry"] .dropdown-menu { --bs-dropdown-bg: var(--color-raised); --bs-dropdown-border-color: var(--color-line-2);
  --bs-dropdown-link-color: var(--color-ink); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--color-tint) 6%, transparent); }
html[data-stile="gabry"] .nav-tabs { --bs-nav-tabs-border-color: var(--color-line); --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--color-accent); --bs-nav-tabs-link-active-border-color: transparent transparent var(--color-accent); }
html[data-stile="gabry"] .text-white { color: var(--color-ink) !important; }
html[data-stile="gabry"] .text-muted { color: var(--color-ink-3) !important; }
/* Testo chiaro su fondo nero (log di Stato del sistema, segreto OAuth2): .bg-black resta nero in
   entrambi i temi, quindi il testo resta chiaro (la regola sopra lo farebbe scuro nel tema chiaro). */
html[data-stile="gabry"] .bg-black.text-white, html[data-stile="gabry"] .bg-black.text-light { color: #f8f9fa !important; }
html[data-stile="gabry"] #nya-chat { background: var(--color-raised); border-color: var(--color-line-2); }
html[data-stile="gabry"] #nya-chat-header { background: linear-gradient(135deg, var(--color-accent-core), var(--color-accent)); }

/* ── Tema chiaro: colori cablati nelle pagine di oggi ─────────────────────────
   Regole aggiunte dopo la misura del contrasto sul Mac (Task 5, Step 4). */
/* Le variabili storiche di base.css (palette nera del Portale) prese dai token
   Gabry: tutte le regole di base.css che le leggono seguono il tema. */
html[data-stile="gabry"] {
  --bg-primary: var(--color-page); --bg-secondary: var(--color-surface); --bg-card: var(--color-surface);
  --border-color: var(--color-line); --text-primary: var(--color-ink); --text-secondary: var(--color-ink-2);
  --text-faint: var(--color-ink-3); --accent: var(--color-accent-ink); --primary: var(--color-accent-ink);
  --campo-bg: color-mix(in srgb, var(--color-tint) 4%, transparent); --campo-bordo-focus: rgba(var(--theme-glow), .5);
  --menu-bg: var(--color-raised); --menu-hover: color-mix(in srgb, var(--color-tint) 6%, transparent);
}

/* Testo attenuato nel chiaro: --color-ink-3 (#6d7772) sul fondo pagina fa
   4,34:1, sotto il 4,5 richiesto dal testo piccolo. */
html[data-stile="gabry"] { --g-bordo-campo: var(--color-axis);
  /* Verde del testo sui pulsanti tinti nel chiaro: #0a7f41 sulla tinta al 13% resta sotto 4,5:1. */
  --g-accento-chiaro: #086b37; }
html[data-stile="gabry"][data-theme="light"] { --g-attenuato: #5e6863; }
/* Variante Vigilanza: gli stessi due grigi/verdi cablati diventano azzurro-grigi. */
html[data-stile="gabry"][data-variante="vigilanza"] { --g-accento-chiaro: #085a9c; }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] { --g-attenuato: #566170; }
html[data-stile="gabry"][data-theme="light"] .text-muted { color: var(--g-attenuato) !important; }

/* Campi: base.css e i CSS di pagina li scrivono con proprieta' proprie
   (background/border), che le variabili Bootstrap non raggiungono. */
html[data-stile="gabry"] .form-control, html[data-stile="gabry"] .form-select,
html[data-stile="gabry"] .input-group-text { background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] .input-group-text { color: var(--color-ink-2); }
html[data-stile="gabry"] .form-control::placeholder { color: var(--color-ink-3); }
html[data-stile="gabry"][data-theme="light"] .form-control::placeholder { color: var(--g-attenuato); }
/* Bordo dei campi: almeno 3:1 col fondo (WCAG 1.4.11). --color-axis fa
   3,4:1 sulla card scura e 3,8:1 sulla pagina chiara; --color-line-2 no. */
html[data-stile="gabry"] .form-control, html[data-stile="gabry"] .form-select,
html[data-stile="gabry"] .input-group-text { border-color: var(--g-bordo-campo); }
html[data-stile="gabry"] .form-label, html[data-stile="gabry"] .form-check-label { color: var(--color-ink-2); }

/* Pulsanti pieni: base.css li disegna con `background` (sfumatura o tinta) e
   testo bianco; nelle tinte di Bootstrap/base il bianco resta sotto 4,5:1. */
html[data-stile="gabry"] .btn-primary { background: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); color: var(--bs-btn-color); }
html[data-stile="gabry"] .btn-primary:hover { background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color); box-shadow: none; transform: none; }
html[data-stile="gabry"][data-theme="light"] .btn-primary { --bs-btn-color: var(--g-accento-chiaro); --bs-btn-hover-color: var(--g-accento-chiaro); --bs-btn-active-color: var(--g-accento-chiaro); }
html[data-stile="gabry"] .btn-success { background: #047857; color: #ffffff; }
html[data-stile="gabry"] .btn-info { background: #0e7490; color: #ffffff; }
html[data-stile="gabry"] .btn-warning { background: #b45309; color: #ffffff; }
/* Passaggio del mouse: un tono piu' scuro (bianco sempre >= 4,5:1), senza il
   sollevamento e l'alone di base.css; .btn-info resta col testo bianco. */
html[data-stile="gabry"] .btn-success:hover, html[data-stile="gabry"] .btn-success:focus { background: #065f46; color: #ffffff; transform: none; box-shadow: none; }
html[data-stile="gabry"] .btn-info:hover, html[data-stile="gabry"] .btn-info:focus { background: #155e75; color: #ffffff; transform: none; box-shadow: none; }
html[data-stile="gabry"] .btn-warning:hover, html[data-stile="gabry"] .btn-warning:focus { background: #92400e; color: #ffffff; transform: none; box-shadow: none; }
html[data-stile="gabry"][data-theme="light"] .btn-outline-light { --bs-btn-color: var(--color-ink-2); --bs-btn-border-color: var(--g-bordo-campo); --bs-btn-hover-bg: color-mix(in srgb, var(--color-tint) 6%, transparent); --bs-btn-hover-color: var(--color-ink); }

/* Badge: su info e warning il bianco non si legge (1,96:1 e 1,63:1). */
html[data-stile="gabry"] .badge.bg-info, html[data-stile="gabry"] .badge.bg-warning { color: #0d1411 !important; }
/* .bg-dark diventa la superficie (sopra): il badge scuro resta un badge. */
html[data-stile="gabry"] .badge.bg-dark { background-color: color-mix(in srgb, var(--color-tint) 12%, var(--color-surface)) !important; color: var(--color-ink) !important; }
html[data-stile="gabry"][data-theme="light"] .badge.bg-secondary { background-color: #5c6660 !important; }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] .badge.bg-secondary { background-color: #566170 !important; }

/* Testi colorati di Bootstrap pensati per il fondo nero. */
html[data-stile="gabry"][data-theme="light"] .text-info { color: #0e7490 !important; }
html[data-stile="gabry"][data-theme="light"] .text-warning { color: var(--color-warning) !important; }
html[data-stile="gabry"][data-theme="light"] .text-success { color: var(--color-good) !important; }
html[data-stile="gabry"][data-theme="light"] .text-danger { color: var(--color-critical) !important; }

/* Intestazioni fisse delle tabelle (base.css: nero e bianco cablati). */
html[data-stile="gabry"] .table-responsive thead th { background-color: var(--color-surface); color: var(--color-ink-2); border-bottom-color: var(--color-line-2); }

/* Card blu degli eventi (dashboard.css), usata da Log Operatori. */
html[data-stile="gabry"] .events-card { background: var(--color-surface); border-color: var(--color-line); box-shadow: var(--ombra-card); }
html[data-stile="gabry"] .events-card .card-header { background: transparent; border-bottom-color: var(--color-line); }
html[data-stile="gabry"] .events-card .table { color: var(--color-ink); }
html[data-stile="gabry"] .events-card .table thead, html[data-stile="gabry"] .events-card .table thead th { background: var(--color-surface) !important; color: var(--color-ink-2); border-bottom-color: var(--color-line-2); }
html[data-stile="gabry"] .events-card .table tbody tr { border-bottom-color: var(--color-line); }
html[data-stile="gabry"] .events-card .table tbody td { color: var(--color-ink); }

/* Paginazione (base.css: grigi di Bootstrap scuro cablati). */
html[data-stile="gabry"] .pagination .page-link { background-color: var(--color-surface) !important; border-color: var(--color-line-2) !important; color: var(--color-ink-2) !important; }
html[data-stile="gabry"] .pagination .page-item.active .page-link { background-color: rgba(var(--theme-glow), .13) !important; color: var(--color-accent-ink) !important; }
html[data-stile="gabry"][data-theme="light"] .pagination .page-item.active .page-link { color: var(--g-accento-chiaro) !important; }

/* Regole dei casi (Impostazioni): grigio cablato #8f99a3. */
html[data-stile="gabry"] #casi-regole-elenco .casi-regola .riassunto, html[data-stile="gabry"] #casi-regole-elenco .gruppo { color: var(--color-ink-3); }
html[data-stile="gabry"][data-theme="light"] #casi-regole-elenco .casi-regola .riassunto, html[data-stile="gabry"][data-theme="light"] #casi-regole-elenco .gruppo { color: var(--g-attenuato); }

/* Nya: ciano su bianco (1,8:1) scritto in linea nel base.html. */
html[data-stile="gabry"] #nya-badge { background: var(--color-raised) !important; border-color: var(--color-accent) !important; box-shadow: var(--ombra-card) !important; }
html[data-stile="gabry"] #nya-badge span { color: var(--color-accent-ink) !important; }
html[data-stile="gabry"] #nya-tooltip { background: var(--color-raised) !important; border-color: var(--color-accent) !important; color: var(--color-accent-ink) !important; box-shadow: var(--ombra-card) !important; }

/* Scuro: segnaposto e testo attenuato a --color-ink-3 restano a 4,1-4,3:1
   sulle superfici; un passo verso --color-ink-2 li porta sopra 4,5. */
html[data-stile="gabry"][data-theme="dark"] { --g-attenuato: color-mix(in srgb, var(--color-ink-3) 55%, var(--color-ink-2)); }
html[data-stile="gabry"][data-theme="dark"] .text-muted { color: var(--g-attenuato) !important; }
html[data-stile="gabry"][data-theme="dark"] .form-control::placeholder { color: var(--g-attenuato); }
html[data-stile="gabry"] .btn-outline-secondary { --bs-btn-color: var(--color-ink-2); --bs-btn-border-color: var(--color-line-2);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-tint) 8%, transparent); --bs-btn-hover-color: var(--color-ink); --bs-btn-hover-border-color: var(--color-line-2); }

/* ===== Pagine della vigilanza ===== */
/* Dashboard vigilanza: card di riepilogo (dashboard.css, sfumatura blu-notte
   cablata) e card Stato Sistema (fondi e bordi scritti in linea). */
html[data-stile="gabry"] .stat-card { background: var(--color-surface); border-color: var(--color-line); box-shadow: var(--ombra-card); }
html[data-stile="gabry"] .stat-card:hover { border-color: var(--color-line-2); box-shadow: var(--ombra-card); }
html[data-stile="gabry"] .stat-card .stat-label { color: var(--color-ink-2); }
html[data-stile="gabry"] .stat-card .stat-value { color: var(--color-ink); }
html[data-stile="gabry"] .card:has(> .system-status-scroll) { background: var(--color-surface) !important; border-color: var(--color-line) !important; box-shadow: var(--ombra-card); }
html[data-stile="gabry"] .card:has(> .system-status-scroll) > .card-header { background: transparent !important; border-bottom-color: var(--color-line) !important; }
html[data-stile="gabry"] .system-status-scroll hr { border-color: var(--color-line-2) !important; }
html[data-stile="gabry"] .system-status-scroll { scrollbar-color: var(--color-line-2) transparent; }
html[data-stile="gabry"] .system-status-scroll::-webkit-scrollbar-thumb { background: var(--color-line-2); }

/* Dettaglio sito (sites/view.html, stile in pagina): righe degli impianti con
   fondo nero al 20%, nome bianco e descrizione grigia: nel chiaro il nome
   spariva sul bianco. */
html[data-stile="gabry"][data-variante="vigilanza"] .system-list-item { background: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .system-list-item .system-name { color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] .system-list-item .system-desc { color: var(--color-ink-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .system-list { scrollbar-color: var(--color-line-2) transparent; }
html[data-stile="gabry"][data-variante="vigilanza"] .system-list::-webkit-scrollbar-track { background: transparent; }
html[data-stile="gabry"][data-variante="vigilanza"] .system-list::-webkit-scrollbar-thumb { background: var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .mini-system-card:hover { box-shadow: var(--ombra-card); border-color: var(--color-line-2); }

/* Card con border-secondary (Dettaglio sito, Stato Sistema): grigio #6c757d
   pieno, piu' marcato del filo delle altre card. */
html[data-stile="gabry"][data-variante="vigilanza"] .card.border-secondary { border-color: var(--color-line-2) !important; }

/* Stato Sistema (dashboard/system_status.html): interruttori Monitorato e
   Critico verdi di Bootstrap, riga al passaggio bianca al 5%. */
html[data-stile="gabry"][data-variante="vigilanza"] .toggle-switch-sm .toggle-slider-sm { background-color: var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .toggle-switch-sm input:checked + .toggle-slider-sm { background-color: var(--color-accent-core); }
html[data-stile="gabry"][data-variante="vigilanza"] .table-services tbody tr:hover { background-color: color-mix(in srgb, var(--color-tint) 5%, transparent); }

/* Tendine (js/tendine.js): la voce gia' scelta usa --sidebar-active, il nero
   del tema classico (#272727); nel chiaro il testo scuro spariva. Stessa
   evidenza della pagina attiva della paginazione. */
html[data-stile="gabry"] .tendina-voce.scelta { background: rgba(var(--theme-glow), .13); color: var(--color-accent-ink); }
html[data-stile="gabry"][data-theme="light"] .tendina-voce.scelta { color: var(--g-accento-chiaro); }
html[data-stile="gabry"][data-theme="light"] .tendina-elenco { box-shadow: 0 8px 24px -6px rgba(13, 27, 42, .22); }

/* ===== Gestione Energia a schede (vigilanza) ===== */
/* In vigilanza+energia la voce Gestione Energia apre le pagine di oggi (energia/index.html con le tab,
   la scheda impianto energia/impianto.html, la scheda del caso energia/caso.html): i loro <style> hanno
   i colori cablati per il fondo nero. Qui gli stessi valori della scheda Gabry energia (gabry.css,
   regole .g-scheda .pan-*, .an-*, .el-*, .g-tabella, .g-flotta, .g-siti, .g-mappa-pagina), solo sotto
   data-variante="vigilanza": l'energia Gabry (pagine gabry/) e lo stile spento non cambiano.
   Restano com'erano, perche' hanno un significato e si leggono in entrambi i temi: i segnaposti e il
   ventaglio sulla mappa satellitare (stati e #1a1d21 sul pallino colorato), le icone della planimetria,
   il giallo del sole e il rosso della nascita nel grafico del caso (casi_caso.js). */

/* Testi chiari di Bootstrap pensati per il fondo nero (come .text-white): Panoramica "kWh prodotti",
   Analisi nome dell'inverter, Elettrico "confronta col giorno prima", modali del caso. Il log nero di
   Stato del sistema (.bg-black) resta chiaro. */
html[data-stile="gabry"][data-variante="vigilanza"] .text-light:not(.bg-black) { color: var(--color-ink-2) !important; }
html[data-stile="gabry"][data-variante="vigilanza"] .modal-content.text-light:not(.bg-black) { color: var(--color-ink) !important; }
html[data-stile="gabry"][data-variante="vigilanza"] .form-control.bg-dark,
html[data-stile="gabry"][data-variante="vigilanza"] .form-select.bg-dark { background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)) !important; }
html[data-stile="gabry"][data-variante="vigilanza"] .form-control.bg-dark.text-light,
html[data-stile="gabry"][data-variante="vigilanza"] .form-select.bg-dark.text-light { color: var(--color-ink) !important; }
/* Filetti grigi pieni di Bootstrap (#6c757d) nelle tre pagine: il filo delle card. */
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .border-secondary,
html[data-stile="gabry"][data-variante="vigilanza"] #impianto-root .border-secondary,
html[data-stile="gabry"][data-variante="vigilanza"] #caso-root .border-secondary,
html[data-stile="gabry"][data-variante="vigilanza"] #casiTelImpiantoModal .border-secondary { border-color: var(--color-line-2) !important; }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-report-box hr.border-secondary { opacity: 1; border-color: color-mix(in srgb, var(--color-tint) 8%, transparent) !important; }

/* Riquadri riassuntivi (tab Impianti e scheda classica): numeri bianchi su bianco nel chiaro. */
html[data-stile="gabry"][data-variante="vigilanza"] .energia-riquadro .v { color: var(--color-ink); font-variant-numeric: tabular-nums; }
html[data-stile="gabry"][data-variante="vigilanza"] .energia-riquadro .l { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"][data-variante="vigilanza"] .energia-riquadro.rosso .v { color: var(--color-critical); }
html[data-stile="gabry"][data-variante="vigilanza"] .imp-bassa { color: var(--color-warning); }

/* Scheda impianto: testata e riquadro dei grafici (#343a40), card della Panoramica (#161b22 !important). */
html[data-stile="gabry"][data-variante="vigilanza"] #imp-testata { border-bottom-color: var(--color-line); }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-grafici { border-color: var(--color-line); border-radius: 8px; }
html[data-stile="gabry"][data-variante="vigilanza"] .imp-sezione { border-top-color: var(--color-line); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-card { background: var(--color-surface) !important; }

/* Panoramica: flusso (nodi e frecce), numeri, barra di oggi, tessere (valori di .g-scheda). */
html[data-stile="gabry"][data-variante="vigilanza"] .pan-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-grande { color: var(--color-ink); letter-spacing: -0.025em; }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo { color: var(--color-ink); border: 1.5px solid var(--color-line-2);
  background: color-mix(in srgb, var(--color-tint) 3%, var(--color-surface)); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo i { color: var(--color-ink-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.sole { border-color: var(--color-s5); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.sole i { color: var(--color-s5); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.casa { border-color: var(--color-ink-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.rete { border-color: var(--color-s2); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.rete i { color: var(--color-s2); }
/* Nodo spento: si attenuano bordo e icona, non il testo (con opacity .5 nome e valore sotto 4,5:1). */
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.spento { opacity: 1; border-color: var(--color-line-2); border-style: dashed; }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-nodo.spento i { opacity: .45; }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-freccia { stroke: var(--color-axis); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-freccia.sole { stroke: var(--color-s5); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-freccia.rete { stroke: var(--color-s2); }
/* Quadratini della legenda: stessi token della barra (energia_panoramica.js, RETE/SOLE con GabryCharts). */
html[data-stile="gabry"][data-variante="vigilanza"] .pan-chip { border-radius: 3px; }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-chip.rete { background: var(--color-s2); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-chip.casa { background: var(--color-s5); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-tessera { gap: 4px; height: 100%; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); background: color-mix(in srgb, var(--color-tint) 2%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-tessera span { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"][data-variante="vigilanza"] .pan-tessera b { font-weight: 600; color: var(--color-ink); }

/* Analisi: calendario a rampa (una tinta sola, come la scheda Gabry), tessere MPPT. */
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella { background: color-mix(in srgb, var(--color-tint) 6%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.l0 { background: var(--color-ramp-0); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.l1 { background: var(--color-ramp-1); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.l2 { background: var(--color-ramp-3); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.l3 { background: var(--color-ramp-4); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.l4 { background: var(--color-ramp-6); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-cella.migliore { outline: 2px solid var(--color-s2); outline-offset: 1px; }
html[data-stile="gabry"][data-variante="vigilanza"] .an-tessera { color: var(--color-ink-2);
  border: 1px solid color-mix(in srgb, var(--color-tint) 9%, transparent); background: color-mix(in srgb, var(--color-tint) 2%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-tessera.verde { border-color: color-mix(in srgb, var(--color-good) 70%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-tessera.ambra { border-color: var(--color-warning); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-tessera.rosso { border-color: var(--color-critical); }
html[data-stile="gabry"][data-variante="vigilanza"] .an-tessera.nessuna { opacity: .6; }
/* Il numero in kWh (.pan-num.text-white) e' gia' all'inchiostro; "MPPT n" e' .text-muted. */

/* Elettrico: banda sotto la tessera (verde nella norma, ambra al limite, rosso fuori). */
html[data-stile="gabry"][data-variante="vigilanza"] .el-banda { background: color-mix(in srgb, var(--color-tint) 10%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .el-banda.verde { background: var(--color-good); }
html[data-stile="gabry"][data-variante="vigilanza"] .el-banda.ambra { background: var(--color-warning); }
html[data-stile="gabry"][data-variante="vigilanza"] .el-banda.rosso { background: var(--color-critical); }
html[data-stile="gabry"][data-variante="vigilanza"] #impianto-root .form-switch .form-check-input { border-color: var(--g-bordo-campo); background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); }
html[data-stile="gabry"][data-variante="vigilanza"] #impianto-root .form-switch .form-check-input:checked { background-color: var(--color-accent-core); border-color: var(--color-accent-core); }

/* Meteo in icone sotto i pulsanti. */
html[data-stile="gabry"][data-variante="vigilanza"] .imp-meteo .ora { color: var(--color-ink-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .imp-meteo .ora.adesso { color: var(--color-accent); font-weight: 600; }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] .imp-meteo .ora.adesso { color: var(--g-accento-chiaro); }
html[data-stile="gabry"][data-variante="vigilanza"] .imp-meteo .fonte,
html[data-stile="gabry"][data-variante="vigilanza"] .imp-meteo .fonte a,
html[data-stile="gabry"][data-variante="vigilanza"] .imp-meteo .vuoto { color: var(--g-attenuato, var(--color-ink-3)); }

/* Dispositivi e allarmi: la tabella dei dispositivi (1063 px in una card di 952) tagliava Potenza e
   Temp.; ora scorre in orizzontale con le celle su una riga, come la .g-tabella della scheda Gabry.
   Il titolo resta fermo a sinistra mentre la tabella scorre. */
html[data-stile="gabry"][data-variante="vigilanza"] .card-body:has(> #imp-dispositivi),
html[data-stile="gabry"][data-variante="vigilanza"] .card-body:has(> #imp-allarmi) { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-line-2) transparent; }
html[data-stile="gabry"][data-variante="vigilanza"] .card-body:has(> #imp-dispositivi) > h6,
html[data-stile="gabry"][data-variante="vigilanza"] .card-body:has(> #imp-allarmi) > h6 { position: sticky; left: 0; }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi { --bs-table-color: var(--color-ink-2);
  --bs-table-border-color: color-mix(in srgb, var(--color-tint) 5%, transparent); font-size: 12px; }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi th,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi td,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi th,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi td { white-space: nowrap; vertical-align: middle; }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi thead th,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi thead th { font-size: 11px; font-weight: 600; letter-spacing: .025em;
  text-transform: uppercase; color: var(--g-attenuato, var(--color-ink-3)); background: var(--color-raised); border-bottom: 0;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-tint) 9%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi tbody tr > td:first-child,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi tbody tr > td:first-child { font-weight: 500; color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi td.text-end,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi td.text-end { font-variant-numeric: tabular-nums; }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-dispositivi tbody td.text-muted,
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi tbody td.text-muted { font-weight: 400; color: var(--g-attenuato, var(--color-ink-3)) !important; }
/* Allarme aperto (table-warning text-dark: giallo pallido col testo nero, abbagliante nello scuro):
   tinta del tono warning e testo d'inchiostro, come la scheda Gabry. Anche nella tab Allarmi inverter. */
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi tr.table-warning,
html[data-stile="gabry"][data-variante="vigilanza"] #energia-allarmi-tabella tr.table-warning { --bs-table-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --bs-table-color: var(--color-ink); --bs-table-border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-ink) !important; }
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi tr.table-warning > td:first-child,
html[data-stile="gabry"][data-variante="vigilanza"] #energia-allarmi-tabella tr.table-warning > td:first-child { box-shadow: inset 2px 0 0 var(--color-warning); }
/* Badge di stato degli allarmi (energia_scheda.js con GabryCharts): "Chiuso" verde con la spunta. */
html[data-stile="gabry"][data-variante="vigilanza"] #imp-allarmi .energia-stato.chiuso { --t: var(--color-good); --icona-stato: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* Gestione Energia (index.html): riquadri che scorrono, mappa, diagramma Siti/impianti, Flotta. */
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .table-responsive { border-color: color-mix(in srgb, var(--color-tint) 7%, transparent) !important; border-radius: 8px; }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-mappa-box { border-color: color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-avviso,
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-senza { color: var(--color-ink-2);
  background: color-mix(in srgb, var(--color-raised) 92%, transparent); border: 1px solid var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-senza a { color: var(--color-accent-ink); }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] #energia-root .mappa-senza a { color: var(--g-accento-chiaro); }
/* Pannello meteo e fumetto della mappa (energia_mappa_comune.css), anche nel modale della scheda. */
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-meteo,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .mappa-meteo { color: var(--color-ink-2);
  background: color-mix(in srgb, var(--color-raised) 96%, transparent); border-left: 1px solid var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-meteo .striscia div,
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-meteo .fonte,
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-meteo .fonte a,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .mappa-meteo .striscia div,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .mappa-meteo .fonte,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .mappa-meteo .fonte a { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .mappa-meteo .text-info,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .mappa-meteo .text-info { color: var(--color-s2) !important; }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] #energia-root .btn-close-white { filter: none; }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-fumetto .maplibregl-popup-content,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .energia-fumetto .maplibregl-popup-content { color: var(--color-ink-2);
  background: var(--color-raised); border: 1px solid var(--color-line-2); box-shadow: var(--ombra-alta); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-fumetto strong,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .energia-fumetto strong { color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-fumetto.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .energia-fumetto.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-fumetto.maplibregl-popup-anchor-top .maplibregl-popup-tip,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .energia-fumetto.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root .energia-fumetto .maplibregl-popup-close-button,
html[data-stile="gabry"][data-variante="vigilanza"] #energiaMappaModal .energia-fumetto .maplibregl-popup-close-button { color: var(--g-attenuato, var(--color-ink-3)); }
/* Diagramma Siti/impianti (valori di .g-siti): fondo pagina, card del tema, impianto ambra, sito e video s2. */
html[data-stile="gabry"][data-variante="vigilanza"] .energia-diagramma-box { background: var(--color-page); border-color: color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root #diagramma-archi line { stroke: var(--color-axis); }
html[data-stile="gabry"][data-variante="vigilanza"] #energia-root #dg-freccia path { fill: var(--color-axis); }
html[data-stile="gabry"][data-variante="vigilanza"] .dg-card { background: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); box-shadow: var(--ombra-card); }
html[data-stile="gabry"][data-variante="vigilanza"] .dg-card.impianto { border-color: var(--color-warning); }
html[data-stile="gabry"][data-variante="vigilanza"] .dg-card.video,
html[data-stile="gabry"][data-variante="vigilanza"] .dg-card.sito { border-color: var(--color-s2); }
html[data-stile="gabry"][data-variante="vigilanza"] .dg-nome { color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] .dg-nome i,
html[data-stile="gabry"][data-variante="vigilanza"] .dg-sotto { color: var(--g-attenuato, var(--color-ink-3)); }
/* Flotta (valori di .g-flotta): riquadri che scorrono, mappa di calore a rampa, tessere. */
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-scorre { border-color: color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; scrollbar-color: var(--color-line-2) transparent; }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-scorre::-webkit-scrollbar-thumb { background: var(--color-line-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .nome,
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .testa { background: var(--color-surface); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .nome { color: var(--color-ink-2); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .nome:hover { color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .testa { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c { border-radius: 3px; background: color-mix(in srgb, var(--color-tint) 6%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c.l0 { background: var(--color-ramp-0); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c.l1 { background: var(--color-ramp-1); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c.l2 { background: var(--color-ramp-3); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c.l3 { background: var(--color-ramp-4); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-calore .c.l4 { background: var(--color-ramp-6); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera { color: var(--color-ink-2); transition: border-color .18s ease, background-color .18s ease;
  border-color: color-mix(in srgb, var(--color-tint) 9%, transparent); background: color-mix(in srgb, var(--color-tint) 2%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera:hover { border-color: rgba(var(--theme-glow), .4); background: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera.attenzione { border-color: color-mix(in srgb, var(--color-critical) 55%, transparent);
  background: color-mix(in srgb, var(--color-critical) 7%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera.attenzione.tono-allarme { border-color: color-mix(in srgb, var(--color-warning) 60%, transparent);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera b { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-ink); }
html[data-stile="gabry"][data-variante="vigilanza"] .flotta-tessera .energia-stato { margin-bottom: 2px; }
/* Pallino di gravita' dei casi: il giallo #f2b84b sul bianco fa 1,8:1 (un segno grafico vuole 3:1). */
html[data-stile="gabry"][data-variante="vigilanza"] .casi-pallino.alta { background: var(--color-critical); }
html[data-stile="gabry"][data-variante="vigilanza"] .casi-pallino.media { background: var(--color-warning); }
html[data-stile="gabry"][data-variante="vigilanza"] .casi-pallino.bassa { background: var(--color-ink-3); }

/* Scheda del caso: miniature delle foto (valori di .g-caso). */
html[data-stile="gabry"][data-variante="vigilanza"] #caso-foto .gruppo { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"][data-variante="vigilanza"] #caso-foto figure img { border-color: var(--color-line-2); border-radius: 6px; }
html[data-stile="gabry"][data-variante="vigilanza"] #caso-foto figure:hover img { border-color: rgba(var(--theme-glow), .6); }
html[data-stile="gabry"][data-variante="vigilanza"] #caso-foto figcaption { color: var(--g-attenuato, var(--color-ink-3)); }

/* ===== Configurazione logica ===== */
/* Modale del Dettaglio sito (sites/_configurazione_logica.html): colori del fondo nero scritti nel suo
   <style>; il JS (configurazione_logica.js) legge da qui il fondo delle card (--cfg-fondo-card), il
   neutro del conteggio (--cfg-neutro) e la tavolozza dei sistemi (--cfg-pal-0..5, esadecimali a 6 cifre:
   il JS ci aggiunge l'alfa). Tavolozza senza viola (Marco 17-10) e lontana dall'accento (selezione),
   dall'ambra (zona attiva) e dal rosso (errori). */
html[data-stile="gabry"] #cfgLogicaModal { --cfg-fondo-card: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); --cfg-neutro: var(--color-ink-2);
  --cfg-pal-0: #13a8a0; --cfg-pal-1: #e46fb4; --cfg-pal-2: #d8c64a; --cfg-pal-3: #4f86f7; --cfg-pal-4: #b98a5e; --cfg-pal-5: #8a98a8; }
html[data-stile="gabry"][data-variante="vigilanza"] #cfgLogicaModal { --cfg-pal-3: #4cc77a; }
html[data-stile="gabry"][data-theme="light"] #cfgLogicaModal {
  --cfg-pal-0: #0f8f88; --cfg-pal-1: #c2416f; --cfg-pal-2: #a08b12; --cfg-pal-3: #3b6fd8; --cfg-pal-4: #8a6238; --cfg-pal-5: #66788a; }
html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] #cfgLogicaModal { --cfg-pal-3: #2f9e5b; }
html[data-stile="gabry"] #cfgLogicaModal .cfg-colonna, html[data-stile="gabry"] #cfgLogicaModal .cfg-lavoro { background: var(--color-surface); border-color: var(--color-line-2); }
html[data-stile="gabry"] #cfgLogicaModal h6.cfg-titolo { color: var(--g-attenuato, var(--color-ink-3)); border-bottom-color: var(--color-line); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-sistema { background: var(--cfg-fondo-card); border-color: var(--color-line); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-voce { background: color-mix(in srgb, var(--color-tint) 3%, var(--color-surface)); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-voce:hover { border-color: var(--color-line-2); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-tipo, html[data-stile="gabry"] #cfgLogicaModal .cfg-n, html[data-stile="gabry"] #cfgLogicaModal .cfg-nota, html[data-stile="gabry"] #cfgLogicaModal .cfg-sist, html[data-stile="gabry"] #cfgLogicaModal .cfg-attesa, html[data-stile="gabry"] #cfgLogicaModal .cfg-vuoto { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-piu { border-color: var(--color-line-2); color: var(--color-accent); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-conteggio, html[data-stile="gabry"] #cfgLogicaModal .cfg-aggiungi { color: var(--color-accent); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-aggiungi { border-color: var(--color-line-2); }
html[data-stile="gabry"][data-theme="light"] #cfgLogicaModal .cfg-piu, html[data-stile="gabry"][data-theme="light"] #cfgLogicaModal .cfg-conteggio, html[data-stile="gabry"][data-theme="light"] #cfgLogicaModal .cfg-aggiungi { color: var(--g-accento-chiaro); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-voce.nel-lavoro { border-color: var(--color-accent); background: rgba(var(--theme-glow), .16); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-voce.attiva { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-avviso { color: var(--color-warning); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-card-zona { background: var(--cfg-fondo-card); border-color: var(--color-warning); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-card-cam { background: var(--cfg-fondo-card); border-color: var(--color-accent); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-card-cam .cfg-x { color: var(--color-ink-3); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-card-cam .cfg-x:hover, html[data-stile="gabry"] #cfgLogicaModal .cfg-msg-errore { color: var(--color-critical); }
html[data-stile="gabry"] #cfgLogicaModal .cfg-msg-ok { color: var(--color-good); }
html[data-stile="gabry"] #cfgLogicaLinee line { stroke: var(--color-accent); }
html[data-stile="gabry"] #cfgLogicaFreccia path { fill: var(--color-accent); }
html[data-stile="gabry"] #cfgLogicaModal .modal-header, html[data-stile="gabry"] #cfgLogicaModal .modal-footer { border-color: var(--color-line) !important; }
html[data-stile="gabry"] #cfgLogicaModal .modal-content { border-color: var(--color-line-2) !important; }
html[data-stile="gabry"][data-theme="light"] #cfgLogicaModal .btn-close-white, html[data-stile="gabry"][data-theme="light"] #cfgLogicaLimiteModal .btn-close-white { filter: none; }
html[data-stile="gabry"] #cfgLogicaLimiteModal .modal-body.text-white { color: var(--color-ink) !important; }

/* Dettaglio sito: stato dei sistemi (spec 2026-10-17 par. 4.7, mockup "SitoStato").
   Badge tinti come nel mockup (t-good / t-crit / t-acc) al posto dei pieni di Bootstrap,
   righe chiave/valore coi grigi del tema, ultimo evento d'allarme in rosso critico. */
html[data-stile="gabry"] .stato-badge { border: 1px solid var(--color-line); border-radius: 6px; font-weight: 500;
  color: var(--color-ink-2) !important; background-color: color-mix(in srgb, var(--color-tint) 6%, transparent) !important; }
html[data-stile="gabry"] .stato-badge.stato-in-linea { color: var(--color-good) !important;
  background-color: color-mix(in srgb, var(--color-good) 14%, transparent) !important; border-color: color-mix(in srgb, var(--color-good) 30%, transparent); }
html[data-stile="gabry"] .stato-badge.stato-fuori { color: var(--color-critical) !important;
  background-color: color-mix(in srgb, var(--color-critical) 14%, transparent) !important; border-color: color-mix(in srgb, var(--color-critical) 30%, transparent); }
html[data-stile="gabry"] .stato-badge.stato-in-linea .stato-dot { box-shadow: 0 0 8px color-mix(in srgb, var(--color-good) 80%, transparent); }
html[data-stile="gabry"] .stato-badge.stato-fuori .stato-dot { box-shadow: 0 0 8px color-mix(in srgb, var(--color-critical) 80%, transparent); }
html[data-stile="gabry"] .stato-badge.stato-grigio .stato-dot { background: color-mix(in srgb, var(--color-tint) 28%, transparent); }
html[data-stile="gabry"] .stato-riga { border-bottom-color: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"] .stato-riga dt { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .stato-riga dd { color: var(--color-ink-2); }
html[data-stile="gabry"] .stato-riga dd small { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .stato-riga.stato-allarme dd { color: var(--color-critical); }
html[data-stile="gabry"] .stato-area { border: 1px solid var(--color-line); border-radius: 6px; font-weight: 500;
  color: var(--color-ink-2) !important; background-color: color-mix(in srgb, var(--color-tint) 6%, transparent) !important; }
html[data-stile="gabry"] .stato-area.stato-area-inserita { color: var(--color-accent) !important;
  background-color: rgba(var(--theme-glow), .12) !important; border-color: rgba(var(--theme-glow), .3); }
html[data-stile="gabry"][data-theme="light"] .stato-area.stato-area-inserita { color: var(--g-accento-chiaro) !important; }
/* Verifica in diretta (sito_stato.js): "Verifica in corso..." con l'accento (t-acc del mockup),
   "Cloud non raggiungibile" ambra (t-warn). Con Stile Gabry i badge di stato e delle aree non
   portano le classi bg-* (macro _stato_sistema.html e sito_stato.js): i colori pieni di
   Bootstrap, piu' specifici (.badge.bg-secondary del vigilanza chiaro), li rendevano
   illeggibili. Qui restano solo i badge tinti. */
html[data-stile="gabry"] .stato-badge.stato-verifica { color: var(--color-accent) !important;
  background-color: rgba(var(--theme-glow), .12) !important; border-color: rgba(var(--theme-glow), .3); }
html[data-stile="gabry"][data-theme="light"] .stato-badge.stato-verifica { color: var(--g-accento-chiaro) !important; }
html[data-stile="gabry"] .stato-badge.stato-irraggiungibile { color: var(--color-warning) !important;
  background-color: color-mix(in srgb, var(--color-warning) 14%, transparent) !important; border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
html[data-stile="gabry"] .stato-badge.stato-irraggiungibile .stato-dot { box-shadow: 0 0 8px color-mix(in srgb, var(--color-warning) 80%, transparent); }
/* Impaginazione del mockup "SitoStato" (Task 4): impianto con il filo e il velo del tema
   (.impianto del mockup), testata col nome in --color-ink e codice/icone in --color-ink-2. */
html[data-stile="gabry"] .system-list-item.impianto { border-color: var(--color-line); background: color-mix(in srgb, var(--color-tint) 2%, transparent); }
html[data-stile="gabry"] .impianto-testa .impianto-nome { color: var(--color-ink); }
html[data-stile="gabry"] .impianto-testa .impianto-info { color: var(--color-ink-2); }
/* Card del Dettaglio sito (mockup "SitoStato"): testata senza la fascia grigia, filo sotto,
   titolo in --color-ink peso 600, icona del tipo nel quadratino .tile-ico, conteggio come badge
   neutro. --tile e' il colore del tipo (nel chiaro l'accento diventa --g-accento-chiaro). */
html[data-stile="gabry"] .scheda-comunicatori { --tile: var(--color-good); }
html[data-stile="gabry"] .scheda-allarme { --tile: var(--color-warning); }
html[data-stile="gabry"] .scheda-video { --tile: var(--color-accent); }
html[data-stile="gabry"][data-theme="light"] .scheda-video { --tile: var(--g-accento-chiaro); }
html[data-stile="gabry"] .scheda-antincendio { --tile: var(--color-critical); }
/* Testata su una riga sola in tutte e quattro le card: "Impianti Antincendio" + "+ Aggiungi" andava a capo
   e la card risultava piu' alta delle altre (titolo piu' piccolo, come l'h3 del mockup, e taglio coi puntini). */
html[data-stile="gabry"] .mini-system-card .card-header { background: transparent; border-bottom: 1px solid var(--color-line) !important; flex-wrap: nowrap; }
html[data-stile="gabry"] .mini-system-card .card-header > div { min-width: 0; }
html[data-stile="gabry"] .mini-system-card .card-header h5 { color: var(--color-ink) !important; font-weight: 600; font-size: 1.02rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-stile="gabry"] .mini-system-card .card-header .btn { flex: none; }
html[data-stile="gabry"] .mini-system-card .tile-ico { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; margin-right: 8px; border-radius: 8px; color: var(--tile);
  background: color-mix(in srgb, var(--tile) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tile) 30%, transparent); }
html[data-stile="gabry"] .mini-system-card .tile-ico i { margin: 0 !important; font-size: 0.85rem; color: inherit !important; }
html[data-stile="gabry"] .mini-system-card .conteggio-sistemi { border: 1px solid var(--color-line); border-radius: 6px; font-weight: 600;
  color: var(--color-ink-2); background-color: color-mix(in srgb, var(--color-tint) 6%, transparent); }
/* Pulsanti piccoli (+ Aggiungi nella testata, viewer, copia link, modifica, elimina, camera):
   neutri del tema, niente outline colorati di Bootstrap. "Elimina" ha l'icona critica. */
html[data-stile="gabry"] .mini-system-card .card-header .btn, html[data-stile="gabry"] .impianto-azioni .btn {
  border-radius: 7px; --bs-btn-color: var(--color-ink-2); --bs-btn-bg: color-mix(in srgb, var(--color-tint) 6%, transparent); --bs-btn-border-color: var(--color-line);
  --bs-btn-hover-color: var(--color-ink); --bs-btn-hover-bg: color-mix(in srgb, var(--color-tint) 11%, transparent); --bs-btn-hover-border-color: var(--color-line-2);
  --bs-btn-active-color: var(--color-ink); --bs-btn-active-bg: color-mix(in srgb, var(--color-tint) 11%, transparent); --bs-btn-active-border-color: var(--color-line-2);
  --bs-btn-focus-shadow-rgb: var(--theme-glow); }
html[data-stile="gabry"] .impianto-azioni .btn-outline-danger i { color: var(--color-critical); }
/* Riepilogo (Codici Attivazione, Comunicatori, Allarme, Video, Antincendio): numeri in peso 600, etichette attenuate. */
html[data-stile="gabry"] .riepilogo-sito h4 { font-weight: 600; }
html[data-stile="gabry"] .riepilogo-sito small { color: var(--g-attenuato, var(--color-ink-3)) !important; }

/* ===== Radar impianti ===== */
/* Pagina Radar (templates/dashboard/radar.html, static/js/radar.js; spec 2026-10-17-radar-impianti
   par. 4.3). Filtri, Riepilogo e "Da guardare" coi token Gabry vigilanza (seguono il tema).
   Task 4 (Marco 17-10, mockup approvato RadarTorre.dc.html, "Schermo stile torre di controllo"):
   la card del radar e' lo SCHERMO, sempre scuro anche col tema chiaro (decisione di Marco), con
   le misure del mockup (radar 600, fumetti 172; scena 1000 x 600 = colonna 200 + radar 600 +
   colonna 200, 20 px piu' larghe del mockup perche' il tratto orizzontale del gomito si veda sempre;
   scalata da radar.js per riempire la pagina). Unica eccezione alla regola "solo token del tema": lo
   schermo non cambia col tema, quindi i suoi colori sono FISSI, dichiarati una volta sola nelle
   variabili --schermo-* di .ri-schermo coi valori del mockup (le tinte come terne r, g, b per
   rgba()); nessuna regola dello schermo usa data-theme o i token --color-*.
   Taglia delle icone (Marco 17-10, "se un Jarvis ha 500 impianti diventa un problema"): la
   radice ha ri-dim-m (fino a 60 impianti, 22 px col simbolo da 12), ri-dim-s (fino a 200, 16 px,
   simbolo da 9) o ri-dim-xs (oltre, pallino da 10 px senza simbolo, area del clic di 16 px col
   ::before); --ri-alone scala aloni e impulso. Keyframes in gabry.css. */
html[data-stile="gabry"] .g-radar-impianti .ri-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-stile="gabry"] .g-radar-impianti .ri-filtro[aria-pressed="true"] { background-color: rgba(var(--theme-glow), .13); border-color: rgba(var(--theme-glow), .30); color: var(--color-accent); }
html[data-stile="gabry"][data-theme="light"] .g-radar-impianti .ri-filtro[aria-pressed="true"] { color: var(--g-accento-chiaro); }
html[data-stile="gabry"] .g-radar-impianti .ri-filtro-n { margin-left: 5px; font-size: 11px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-radar-impianti .ri-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { html[data-stile="gabry"] .g-radar-impianti .ri-griglia { grid-template-columns: minmax(0, 1fr); } }
/* Lo schermo: fondo radiale blu-nero con vignettatura, righe di scansione, bordo. */
html[data-stile="gabry"] .g-radar-impianti .ri-schermo { --schermo-fondo-centro: #0c2534; --schermo-fondo: #071722; --schermo-fondo-bordo: #02090f; --schermo-bordo: #143444;
  --schermo-testo: 159, 216, 245; --schermo-filo: 92, 200, 255; --schermo-luce: 180, 236, 255; --schermo-tacca: 180, 228, 252;
  --schermo-chiaro: 232, 246, 253; --schermo-icona: 3, 15, 22;
  --schermo-verde: 61, 220, 132; --schermo-arancio: 255, 176, 32; --schermo-rosso: 255, 90, 90; --schermo-grigio: 138, 152, 168;
  position: relative; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%, var(--schermo-fondo-centro) 0%, var(--schermo-fondo) 46%, var(--schermo-fondo-bordo) 100%);
  border: 1px solid var(--schermo-bordo); box-shadow: inset 0 0 90px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .35);
  color: rgb(var(--schermo-testo)); display: flex; flex-direction: column; min-width: 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-schermo::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
/* Testata e piede in monospazio; su schermi stretti vanno a capo. */
html[data-stile="gabry"] .g-radar-impianti .ri-schermo-testa, html[data-stile="gabry"] .g-radar-impianti .ri-schermo-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 16px;
  font: 500 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; color: rgba(var(--schermo-testo), .65); }
html[data-stile="gabry"] .g-radar-impianti .ri-schermo-testa { border-bottom: 1px solid rgba(var(--schermo-filo), .12); }
html[data-stile="gabry"] .g-radar-impianti .ri-schermo-piede { border-top: 1px solid rgba(var(--schermo-filo), .12); justify-content: flex-start; gap: 4px 22px; }
html[data-stile="gabry"] .g-radar-impianti .ri-pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
html[data-stile="gabry"] .g-radar-impianti .ri-pt-rosso { background: rgb(var(--schermo-rosso)); box-shadow: 0 0 6px rgb(var(--schermo-rosso)); }
html[data-stile="gabry"] .g-radar-impianti .ri-pt-arancio { background: rgb(var(--schermo-arancio)); box-shadow: 0 0 6px rgb(var(--schermo-arancio)); }
html[data-stile="gabry"] .g-radar-impianti .ri-pt-verde { background: rgb(var(--schermo-verde)); box-shadow: 0 0 6px rgb(var(--schermo-verde)); }
html[data-stile="gabry"] .g-radar-impianti .ri-pt-grigio { background: rgb(var(--schermo-grigio)); }
/* Corpo dello schermo: ri-adatta prende la scala (radar.js, adatta) per riempire la pagina. */
html[data-stile="gabry"] .g-radar-impianti .ri-schermo-corpo { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 14px 16px; min-width: 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-adatta { position: relative; width: 1000px; height: 600px; flex: none; }
html[data-stile="gabry"] .g-radar-impianti .ri-scena { position: absolute; left: 0; top: 0; width: 1000px; height: 600px; transform-origin: 0 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-scena > .ri-box { position: absolute; left: 200px; top: 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-linee { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
html[data-stile="gabry"] .g-radar-impianti .ri-linee circle { stroke: none; }
/* Linea a gomito del fumetto (Marco 17-10, torre di controllo): polyline, mai riempita. */
html[data-stile="gabry"] .g-radar-impianti .ri-linee polyline.ri-gomito { fill: none; stroke-width: 1.2; stroke-linejoin: round; }
html[data-stile="gabry"] .g-radar-impianti .ri-linee .ri-l-rosso { stroke: rgb(var(--schermo-rosso)); fill: rgb(var(--schermo-rosso)); }
html[data-stile="gabry"] .g-radar-impianti .ri-linee .ri-l-arancio { stroke: rgb(var(--schermo-arancio)); fill: rgb(var(--schermo-arancio)); }
html[data-stile="gabry"] .g-radar-impianti .ri-linee .ri-l-verde { stroke: rgb(var(--schermo-verde)); fill: rgb(var(--schermo-verde)); }
html[data-stile="gabry"] .g-radar-impianti .ri-linee .ri-l-grigio { stroke: rgb(var(--schermo-grigio)); fill: rgb(var(--schermo-grigio)); }
html[data-stile="gabry"] .g-radar-impianti .ri-etichette { position: absolute; left: 0; top: 0; width: 1000px; height: 600px; z-index: 4; pointer-events: none; }
/* Fumetti: sfondo trasparente nel colore dello stato (Marco 17-10), riga dello stato in monospazio. */
html[data-stile="gabry"] .g-radar-impianti .ri-etichetta { position: absolute; width: 172px; box-sizing: border-box; padding: 6px 9px; border-radius: 6px; border: 1px solid;
  display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.3; color: rgb(var(--schermo-chiaro));
  backdrop-filter: blur(2px); transition: top .2s ease, opacity .2s ease; }
html[data-stile="gabry"] .g-radar-impianti .ri-etichetta b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-stile="gabry"] .g-radar-impianti .ri-etichetta small { font: 500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(var(--schermo-chiaro), .78); }
html[data-stile="gabry"] .g-radar-impianti .ri-e-rosso { background: rgba(var(--schermo-rosso), .16); border-color: rgba(var(--schermo-rosso), .55); }
html[data-stile="gabry"] .g-radar-impianti .ri-e-arancio { background: rgba(var(--schermo-arancio), .15); border-color: rgba(var(--schermo-arancio), .55); }
html[data-stile="gabry"] .g-radar-impianti .ri-e-verde { background: rgba(var(--schermo-verde), .13); border-color: rgba(var(--schermo-verde), .5); }
html[data-stile="gabry"] .g-radar-impianti .ri-e-grigio { background: rgba(var(--schermo-grigio), .14); border-color: rgba(var(--schermo-grigio), .45); }
html[data-stile="gabry"] .g-radar-impianti .ri-box { position: relative; z-index: 2; width: 600px; height: 600px; flex: none; }
html[data-stile="gabry"] .g-radar-impianti .ri-radar { position: absolute; inset: 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-radar > span { position: absolute; display: block; }
html[data-stile="gabry"] .g-radar-impianti .ri-reticolo { left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%;
  background-image: linear-gradient(rgba(var(--schermo-filo), .055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--schermo-filo), .055) 1px, transparent 1px);
  background-size: 30px 30px; background-position: 15px 15px; }
html[data-stile="gabry"] .g-radar-impianti .ri-anello { border-radius: 50%; border: 1px solid rgba(var(--schermo-filo), .24); }
html[data-stile="gabry"] .g-radar-impianti .ri-a1 { left: 182px; top: 182px; width: 236px; height: 236px; border-color: rgba(var(--schermo-rosso), .38); background: rgba(var(--schermo-rosso), .05); }
html[data-stile="gabry"] .g-radar-impianti .ri-a2 { left: 110px; top: 110px; width: 380px; height: 380px; border-color: rgba(var(--schermo-arancio), .32); }
html[data-stile="gabry"] .g-radar-impianti .ri-a3 { left: 30px; top: 30px; width: 540px; height: 540px; border-color: rgba(var(--schermo-verde), .26); }
html[data-stile="gabry"] .g-radar-impianti .ri-a4 { left: 0; top: 0; width: 600px; height: 600px; border-color: rgba(var(--schermo-filo), .55);
  box-shadow: inset 0 0 40px rgba(var(--schermo-filo), .08), 0 0 18px rgba(var(--schermo-filo), .10); }
html[data-stile="gabry"] .g-radar-impianti .ri-asse { background: rgba(var(--schermo-filo), .12); }
html[data-stile="gabry"] .g-radar-impianti .ri-ax { left: 0; top: 300px; width: 600px; height: 1px; }
html[data-stile="gabry"] .g-radar-impianti .ri-ay { left: 300px; top: 0; width: 1px; height: 600px; }
/* Tacche ogni 5 gradi (piu' lunghe ogni 10 e 30) e numeri ogni 30: radar.js, disegnaQuadrante. */
html[data-stile="gabry"] .g-radar-impianti .ri-quadrante { left: 0; top: 0; width: 600px; height: 600px; }
html[data-stile="gabry"] .g-radar-impianti .ri-quadrante > span { position: absolute; display: block; }
html[data-stile="gabry"] .g-radar-impianti .ri-tacca { left: 299.5px; top: 0; width: 1px; background: rgba(var(--schermo-filo), .45); transform-origin: .5px 300px; }
html[data-stile="gabry"] .g-radar-impianti .ri-tacca-l { background: rgba(var(--schermo-tacca), .9); }
html[data-stile="gabry"] .g-radar-impianti .ri-grado { width: 24px; text-align: center; font: 500 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(var(--schermo-testo), .72); }
/* Fascio: scia conica + linea luminosa, un giro ogni 18 s (radar.js legge l'angolo da .ri-fascio). */
html[data-stile="gabry"] .g-radar-impianti .ri-scia { left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--schermo-filo), 0) 0deg, rgba(var(--schermo-filo), 0) 250deg, rgba(var(--schermo-filo), .07) 320deg, rgba(var(--schermo-filo), .26) 359deg, rgba(var(--schermo-filo), 0) 360deg);
  animation: g-radar-imp-gira 18s linear infinite; }
html[data-stile="gabry"] .g-radar-impianti .ri-fascio { left: 299px; top: 0; width: 2px; height: 300px; border-radius: 1px;
  background: linear-gradient(to top, rgba(var(--schermo-luce), .95), rgba(var(--schermo-luce), .05)); box-shadow: 0 0 10px rgba(var(--schermo-filo), .8);
  transform-origin: 1px 300px; animation: g-radar-imp-gira 18s linear infinite; }
html[data-stile="gabry"] .g-radar-impianti .ri-centro { left: 295px; top: 295px; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--schermo-filo)); box-shadow: 0 0 12px rgba(var(--schermo-filo), .9); }
html[data-stile="gabry"] .g-radar-impianti .ri-zona { left: 306px; font: 600 9.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: rgba(var(--schermo-testo), .55); }
html[data-stile="gabry"] .g-radar-impianti .ri-z-rosso { top: 186px; }
html[data-stile="gabry"] .g-radar-impianti .ri-z-arancio { top: 114px; }
html[data-stile="gabry"] .g-radar-impianti .ri-z-verde { top: 36px; }
html[data-stile="gabry"] .g-radar-impianti .ri-segnali { position: absolute; inset: 0; }
/* Icone: left/top = centro (radar.js), il margine negativo della taglia le centra. */
html[data-stile="gabry"] .g-radar-impianti .ri-segnale { position: absolute; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--schermo-icona), .92);
  border: 1.5px solid; text-decoration: none; z-index: 1; transition: transform .15s ease; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-m { --ri-alone: 1; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-s { --ri-alone: .6; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-xs { --ri-alone: .4; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-m .ri-segnale { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-s .ri-segnale { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-xs .ri-segnale { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-width: 1px; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-m .ri-segnale-ico svg { width: 12px; height: 12px; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-s .ri-segnale-ico svg { width: 9px; height: 9px; }
html[data-stile="gabry"] .g-radar-impianti.ri-dim-xs .ri-segnale-ico { display: none; }
/* Pallino da 10 px: area del clic e del passaggio del mouse di 16 px (8 + 2 x 4), invisibile. */
html[data-stile="gabry"] .g-radar-impianti.ri-dim-xs .ri-segnale::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
html[data-stile="gabry"] .g-radar-impianti .ri-verde { color: rgb(var(--schermo-verde)); border-color: rgba(var(--schermo-verde), .65); box-shadow: 0 0 calc(10px * var(--ri-alone, 1)) rgba(var(--schermo-verde), .35); }
html[data-stile="gabry"] .g-radar-impianti .ri-arancio { color: rgb(var(--schermo-arancio)); border-color: rgba(var(--schermo-arancio), .8); box-shadow: 0 0 calc(12px * var(--ri-alone, 1)) rgba(var(--schermo-arancio), .45); }
html[data-stile="gabry"] .g-radar-impianti .ri-rosso { color: rgb(var(--schermo-rosso)); border-color: rgba(var(--schermo-rosso), .9); box-shadow: 0 0 calc(14px * var(--ri-alone, 1)) rgba(var(--schermo-rosso), .6);
  animation: g-radar-imp-pulsa 1.6s ease-in-out infinite; }
html[data-stile="gabry"] .g-radar-impianti .ri-grigio { color: rgb(var(--schermo-grigio)); border-color: rgba(var(--schermo-grigio), .45); box-shadow: none; }
html[data-stile="gabry"] .g-radar-impianti .ri-segnale:hover, html[data-stile="gabry"] .g-radar-impianti .ri-segnale:focus-visible { z-index: 5; transform: scale(1.12); }
html[data-stile="gabry"] .g-radar-impianti .ri-segnale:focus-visible { outline: 2px solid rgb(var(--schermo-filo)); outline-offset: 2px; }
html[data-stile="gabry"] .g-radar-impianti .ri-verde:hover { color: rgb(var(--schermo-verde)); }
html[data-stile="gabry"] .g-radar-impianti .ri-arancio:hover { color: rgb(var(--schermo-arancio)); }
html[data-stile="gabry"] .g-radar-impianti .ri-rosso:hover { color: rgb(var(--schermo-rosso)); }
html[data-stile="gabry"] .g-radar-impianti .ri-grigio:hover { color: rgb(var(--schermo-testo)); }
html[data-stile="gabry"] .g-radar-impianti .ri-segnale-ico { display: grid; place-items: center; }
html[data-stile="gabry"] .g-radar-impianti .ri-nota { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 9px;
  border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-line-2); box-shadow: var(--ombra-card); font-size: 12px; line-height: 1.5;
  color: var(--color-ink); opacity: 0; pointer-events: none; transition: opacity .15s ease; display: flex; flex-direction: column; gap: 2px; }
html[data-stile="gabry"] .g-radar-impianti .ri-nota-sx .ri-nota { left: auto; right: 44px; }
/* Marco 17-10: il fascio (18 s a giro) accende l'icona su cui passa (radar.js, ri-illuminato). */
html[data-stile="gabry"] .g-radar-impianti .ri-segnale.ri-illuminato { z-index: 4; transform: scale(1.12); }
html[data-stile="gabry"] .g-radar-impianti .ri-nota small { font-size: 11px; font-weight: 400; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-radar-impianti .ri-lato { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-stile="gabry"] .g-radar-impianti .ri-pannello { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
html[data-stile="gabry"] .g-radar-impianti .ri-guardare { gap: 10px; }
html[data-stile="gabry"] .g-radar-impianti .ri-pannello > * { position: relative; z-index: 2; }
html[data-stile="gabry"] .g-radar-impianti .ri-h3 { font-size: 13px; font-weight: 600; line-height: 1.5; margin: 0; color: var(--color-ink); }
html[data-stile="gabry"] .g-radar-impianti .ri-conti { display: flex; flex-direction: column; gap: 8px; }
html[data-stile="gabry"] .g-radar-impianti .ri-conto { display: flex; align-items: center; gap: 10px; }
html[data-stile="gabry"] .g-radar-impianti .ri-lbl { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-radar-impianti .ri-val { font-size: 20px; font-weight: 600; line-height: 1; }
html[data-stile="gabry"] .g-radar-impianti .ri-v-rosso { color: var(--color-critical); }
html[data-stile="gabry"] .g-radar-impianti .ri-v-arancio { color: var(--color-warning); }
html[data-stile="gabry"] .g-radar-impianti .ri-v-verde { color: var(--color-good); }
html[data-stile="gabry"] .g-radar-impianti .ri-v-grigio { color: var(--color-ink-2); }
html[data-stile="gabry"] .g-radar-impianti .ri-pallino-off { background: color-mix(in srgb, var(--color-tint) 28%, transparent); box-shadow: none; }
html[data-stile="gabry"] .g-radar-impianti .ri-nota-testo { margin: 0; font-size: 11.5px; color: var(--g-attenuato, var(--color-ink-3)); }
/* Revisione finale I2: dati vecchi (giri falliti di fila) in tono warning sopra "Da guardare". */
html[data-stile="gabry"] .g-radar-impianti .ri-vecchi { color: var(--color-warning); font-weight: 500; }
html[data-stile="gabry"] .g-radar-impianti .ri-riga { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-tint) 6%, transparent);
  color: var(--color-ink-2); text-decoration: none; }
/* Pannello largo 300 (mockup RadarTorre): il nome tiene almeno 96 px, il motivo va a capo invece di coprirlo. */
html[data-stile="gabry"] .g-radar-impianti .ri-riga-testi { flex: 1 1 96px; min-width: 96px; display: flex; flex-direction: column; }
html[data-stile="gabry"] .g-radar-impianti .ri-riga-nome { font-weight: 600; font-size: 12.5px; color: var(--color-ink); }
html[data-stile="gabry"] .g-radar-impianti .ri-riga:hover .ri-riga-nome { color: var(--color-accent); }
html[data-stile="gabry"][data-theme="light"] .g-radar-impianti .ri-riga:hover .ri-riga-nome { color: var(--g-accento-chiaro); }
html[data-stile="gabry"] .g-radar-impianti .ri-riga-sito { font-size: 11px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-radar-impianti .ri-riga-badge { margin-left: auto; flex: 0 1 auto; min-width: 0; height: auto; min-height: 22px; padding: 3px 8px; font-size: 11.5px;
  line-height: 1.3; white-space: normal; }
/* Uscendo dalla pagina (radar.js, spa:beforeNavigate) e con "riduci movimento": fascio, scia e impulso fermi. */
/* Marco 17-10 (Task 3): l'icona appena rinfrescata da una verifica in diretta rimbalza (radar.js, ri-rimbalzo).
   Sui rossi l'impulso continua insieme al rimbalzo. */
html[data-stile="gabry"] .g-radar-impianti .ri-segnale.ri-rimbalzo { animation: g-radar-imp-rimbalza .6s ease-out; }
html[data-stile="gabry"] .g-radar-impianti .ri-rosso.ri-rimbalzo { animation: g-radar-imp-rimbalza .6s ease-out, g-radar-imp-pulsa 1.6s ease-in-out infinite; }
html[data-stile="gabry"] .g-radar-impianti.ri-fermo .ri-fascio, html[data-stile="gabry"] .g-radar-impianti.ri-fermo .ri-scia, html[data-stile="gabry"] .g-radar-impianti.ri-fermo .ri-rosso,
html[data-stile="gabry"] .g-radar-impianti.ri-fermo .ri-rimbalzo, html[data-stile="gabry"] .g-radar-impianti.ri-fermo .ri-rosso.ri-rimbalzo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-stile="gabry"] .g-radar-impianti .ri-fascio, html[data-stile="gabry"] .g-radar-impianti .ri-scia, html[data-stile="gabry"] .g-radar-impianti .ri-rosso,
  html[data-stile="gabry"] .g-radar-impianti .ri-rimbalzo, html[data-stile="gabry"] .g-radar-impianti .ri-rosso.ri-rimbalzo { animation: none; }
}