/* ══════════════════════════════════════════════════════════════════════════
   Stile Gabry (spec docs/superpowers/specs/2026-10-14-stile-gabry-design.md)
   Tutto vale SOLO sotto html[data-stile="gabry"]: con lo stile spento questo
   file non e' nemmeno incluso (base.html), e Jarvis resta com'e'.
   Sorgente di verita': src/index.css del mockup "docs/mockup/Mokup JarvisE".
   I valori dei token sono copiati ALLA LETTERA da li' (righe citate a lato):
   cambiarli qui senza cambiarli nel mockup fa divergere i due.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Carattere NaiConnect (index.css 26-34) ─────────────────────────────
   Nove pesi; il peso CSS viene dalla sottofamiglia del file, non dal suo
   usWeightClass (Sottile ed Extraleggero dichiarano entrambi 250). woff2
   (fonttools + brotli) con il TTF come riserva. */
@font-face { font-family: "NaiConnect"; src: url("../fonts/Sottile.woff2") format("woff2"), url("../fonts/Sottile.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Extraleggero.woff2") format("woff2"), url("../fonts/Extraleggero.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Leggero.woff2") format("woff2"), url("../fonts/Leggero.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Regolare.woff2") format("woff2"), url("../fonts/Regolare.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Medio.woff2") format("woff2"), url("../fonts/Medio.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Semigrassetto.woff2") format("woff2"), url("../fonts/Semigrassetto.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Grassetto.woff2") format("woff2"), url("../fonts/Grassetto.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Extragrassetto.woff2") format("woff2"), url("../fonts/Extragrassetto.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "NaiConnect"; src: url("../fonts/Nero.woff2") format("woff2"), url("../fonts/Nero.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ── 2. Token (index.css 36-146, 148-234) ──────────────────────────────────
   @theme del mockup -> html[data-stile="gabry"]; :root[data-theme="light"] ->
   html[data-stile="gabry"][data-theme="light"] (specificita' maggiore, come
   nel mockup). */
html[data-stile="gabry"] {
  /* I valori qui sono quelli del tema scuro. Il tema chiaro li sovrascrive
     più sotto su :root[data-theme="light"], che ha specificità maggiore.
     Le utility di Tailwind leggono le variabili, quindi seguono il tema senza
     bisogno di varianti dark: nel markup. */

  /* superfici */
  --color-chrome:  #161b19;   /* ripiego; i valori veri sono --chrome-top / --chrome-side */
  --color-page:    #0f1311;
  --color-surface: #171c1a;   /* card */
  --color-raised:  #1f2522;   /* modali, menu a tendina */
  --color-hover:   #222926;

  /* `tint` è il colore con cui si velano le superfici: bianco al buio, verde
     scurissimo alla luce. Serve perché `bg-white/5` alla luce sparirebbe. */
  --color-tint: #ffffff;

  /* inchiostro */
  --color-ink:   #e8edea;
  --color-ink-2: #9fa9a4;
  --color-ink-3: #7d8681;
  --color-axis:  #67706b;
  --color-grid:  #242b27;

  --color-line:   rgba(255, 255, 255, 0.08);
  --color-line-2: rgba(255, 255, 255, 0.14);

  /* accento */
  --color-accent:      #45e08f;
  --color-accent-ink:  #6fe4a6;
  --color-accent-core: #1faa5c;

  /* serie dei grafici — ordine fisso, identico nei due temi */
  --color-s1: #1faa5c;
  --color-s2: #3987e5;
  --color-s3: #d95926;
  --color-s4: #13a8a0;
  --color-s5: #c98500;
  --color-s6: #d55181;
  --color-s7: #9085e9;
  --color-s8: #e66767;

  /* scala sequenziale, da «vicino a zero» a «massimo» */
  --color-ramp-0: #08562b;
  --color-ramp-1: #07773d;
  --color-ramp-2: #129951;
  --color-ramp-3: #33b366;
  --color-ramp-4: #67ca86;
  --color-ramp-5: #95dfa9;
  --color-ramp-6: #c0f1cc;

  /* stati — quattro ruoli fissi, con il passo giusto per ogni tema */
  --color-good:     #0ca30c;
  --color-warning:  #fab219;
  --color-serious:  #ec835a;
  --color-critical: #d03b3b;

  --font-sans: "NaiConnect", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "NaiConnect", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Tema chiaro ────────────────────────────────────────────────────────────
   Stesse famiglie di tinta, passi diversi. Le serie dei grafici mantengono
   l'ORDINE del tema scuro: una serie verde deve restare verde passando da un
   tema all'altro, altrimenti il colore smette di seguire l'entità.
   Tutti i valori sono verificati: vedi _design/verifica-temi.mjs.
   ───────────────────────────────────────────────────────────────────────── */
html[data-stile="gabry"][data-theme="light"] {
  --color-chrome:  #ffffff;
  --color-page:    #f6f8f7;
  --color-surface: #ffffff;
  --color-raised:  #ffffff;
  --color-hover:   #f1f5f2;

  --color-tint: #0d281b;

  --color-ink:   #0d1411;
  --color-ink-2: #4b554f;
  --color-ink-3: #6d7772;
  --color-axis:  #78827c;
  --color-grid:  #e8edea;

  --color-line:   rgba(13, 40, 27, 0.10);
  --color-line-2: rgba(13, 40, 27, 0.18);

  --color-accent:      #0a7f41;
  --color-accent-ink:  #0a7f41;
  --color-accent-core: #0f8f48;

  --color-s1: #00a153;
  --color-s2: #3286e9;
  --color-s3: #d75928;
  --color-s4: #009b93;
  --color-s5: #b57700;
  --color-s6: #d45180;
  --color-s7: #8271e6;
  --color-s8: #d95255;

  --color-ramp-0: #d1efd8;
  --color-ramp-1: #ade0b9;
  --color-ramp-2: #87d09b;
  --color-ramp-3: #5cbe7b;
  --color-ramp-4: #23aa5b;
  --color-ramp-5: #008e47;
  --color-ramp-6: #006e35;

  --color-good:     #0a7c0a;
  --color-warning:  #8f6200;
  --color-serious:  #b4532a;
  --color-critical: #b32626;
}

html[data-stile="gabry"] {
  color-scheme: dark;
  /* Triplette RGB dell'accento, per comporre trasparenze.
     accent = tinta usata sulle superfici · glow = luce di bordi e stati attivi. */
  --theme-accent: 31, 170, 92;
  --theme-glow: 69, 224, 143;

  /* Quanto velo di verde portano le superfici. È LA manopola della
     "quantità di verde" del portale: alzarla ritinge tutto, abbassarla
     riporta le superfici al neutro. */
  --velo-chrome: 0.030;   /* topbar e menu */
  --velo-card:   0.014;   /* card */

  --ombra-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.25);
  --ombra-alta: 0 16px 40px -12px rgba(0, 0, 0, 0.75);

  /* Topbar e menu sono due contesti di colore SEPARATI, non una cornice
     unica: a tema chiaro la topbar resta verde molto scuro mentre il menu
     diventa bianco, quindi i due hanno scale di inchiostro opposte.
     Qui, a tema scuro, coincidono quasi del tutto. */
  --top-bg:     #06140e;
  --top-ink:    #e8edea;
  --top-ink-2:  #9fa9a4;
  --top-ink-3:  #7d8681;
  --top-accent: #2bff88;
  --top-glow:   43, 255, 136;
  --top-tint:   #ffffff;
  --top-line:   rgba(255, 255, 255, 0.07);
  --top-line-2: rgba(255, 255, 255, 0.13);
  --top-raised: #12291d;

  --side-bg:     #161b19;
  --side-ink:    #e8edea;
  --side-ink-2:  #9fa9a4;
  --side-ink-3:  #7d8681;
  --side-accent: #45e08f;
  --side-glow:   69, 224, 143;
  --side-tint:   #ffffff;
  --side-line:   rgba(255, 255, 255, 0.07);
  --side-line-2: rgba(255, 255, 255, 0.13);
  --side-raised: #1f2522;
  /* Colore di icona e testo sulla voce di menu attiva: l'accento, in
     entrambi i temi. */
  --side-attivo: var(--side-accent);

  --topbar-h: 48px;   /* come la barra del viewer (Marco 15-10); il mockup ha 56 */
  --sidebar-w: 241px;
  --sidebar-collapsed-w: 56px;
  /* Stessa curva del Portale: apertura morbida, "tech". */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-stile="gabry"][data-theme="light"] {
  color-scheme: light;
  --theme-accent: 15, 143, 72;
  --theme-glow: 10, 127, 65;
  --velo-chrome: 0.030;
  --velo-card:   0.000;

  /* A tema chiaro la topbar resta verde molto scuro: è la fascia che porta
     il marchio e dà identità alla pagina. Il menu invece è bianco e usa la
     stessa scala del contenuto — inchiostro scuro su fondo chiaro. */
  --top-bg:     #06140e;
  --top-ink:    #eef3f0;
  --top-ink-2:  #a9b5ae;
  --top-ink-3:  #879489;
  --top-accent: #2bff88;
  --top-glow:   43, 255, 136;
  --top-tint:   #ffffff;
  --top-line:   rgba(255, 255, 255, 0.09);
  --top-line-2: rgba(255, 255, 255, 0.16);
  --top-raised: #12291d;

  --side-bg:     #ffffff;
  --side-ink:    #0d1411;
  --side-ink-2:  #4b554f;
  --side-ink-3:  #6d7772;
  --side-accent: #0a7f41;
  --side-glow:   10, 127, 65;
  --side-tint:   #0d281b;
  --side-line:   rgba(13, 40, 27, 0.10);
  --side-line-2: rgba(13, 40, 27, 0.18);
  --side-raised: #ffffff;
  --side-attivo: var(--side-accent);
  --ombra-card: 0 1px 2px rgba(13, 40, 27, 0.06);
  --ombra-alta: 0 16px 40px -12px rgba(13, 40, 27, 0.18);
}

/* ── Variante Vigilanza: stesso stile, accento azzurro (spec 2026-10-16
   stile-gabry-vigilanza §4.2). Sovrascrive SOLO i token di colore verdi: gli
   stati (good/warning/serious/critical/info) restano quelli di oggi.
   I derivati (accent-ink/-core, hover, grid, axis, s1, ramp) tengono lo scarto
   di luminosita' rispetto al verde corrispondente. In energia nulla cambia
   (l'attributo data-variante non c'e'). ──────────────────────────────────── */
html[data-stile="gabry"][data-variante="vigilanza"] {
  --color-chrome:  #161b22;
  --color-page:    #0e1217;
  --color-surface: #161b22;
  --color-raised:  #1e242c;
  --color-hover:   #232a33;

  --color-ink:   #e8ecf1;
  --color-ink-2: #9ea8b4;
  --color-ink-3: #7c8794;
  --color-axis:  #67717d;
  --color-grid:  #242b34;

  --color-accent:      #4cb8ff;
  --color-accent-ink:  #82cbff;
  --color-accent-core: #1e88d6;

  --color-s1: #1e88d6;
  --color-s2: #5ce1e6;   /* ciano chiaro (Marco 17-10): s2 #3987e5 era quasi s1 */

  --color-ramp-0: #0b3f6b;
  --color-ramp-1: #0a5a9a;
  --color-ramp-2: #1478c4;
  --color-ramp-3: #3593dd;
  --color-ramp-4: #68b0ea;
  --color-ramp-5: #98ccf3;
  --color-ramp-6: #c3e2f8;

  --theme-accent: 30, 136, 214;
  --theme-glow: 76, 184, 255;

  --top-bg:     #06101c;
  --top-ink:    #e8ecf1;
  --top-ink-2:  #9ea8b4;
  --top-ink-3:  #8794a3;
  --top-accent: #5cc8ff;
  --top-glow:   92, 200, 255;
  --top-raised: #12203a;

  --side-bg:     #151a21;
  --side-ink:    #e8ecf1;
  --side-ink-2:  #9ea8b4;
  --side-ink-3:  #7c8794;
  --side-accent: #4cb8ff;
  --side-glow:   76, 184, 255;
  --side-raised: #1e242c;
}

html[data-stile="gabry"][data-variante="vigilanza"][data-theme="light"] {
  --color-chrome:  #ffffff;
  --color-page:    #f5f7fa;
  --color-surface: #ffffff;   /* il blocco scuro vigilanza viene dopo l'energia chiaro: va ripetuto */
  --color-raised:  #ffffff;
  --color-hover:   #eef3f8;

  --color-tint: #0d1b2a;

  --color-ink:   #0d1117;
  --color-ink-2: #4a5562;
  --color-ink-3: #5e6977;
  --color-axis:  #7a8594;
  --color-grid:  #e6ecf2;

  --color-line:   rgba(13, 27, 42, 0.10);
  --color-line-2: rgba(13, 27, 42, 0.18);

  --color-accent:      #0a6bb8;
  --color-accent-ink:  #0a6bb8;
  --color-accent-core: #0e74c4;

  --color-s1: #0a78c8;
  --color-s2: #0aa5c7;   /* ciano piu' scuro: #5ce1e6 sul bianco non si legge */

  --color-ramp-0: #d3e6f8;
  --color-ramp-1: #aed0f0;
  --color-ramp-2: #88bae8;
  --color-ramp-3: #5ca0de;
  --color-ramp-4: #2486cf;
  --color-ramp-5: #0a6bb8;
  --color-ramp-6: #0a528f;

  --theme-accent: 14, 116, 196;
  --theme-glow: 10, 107, 184;

  --top-bg:     #06101c;
  --top-ink:    #eef2f6;
  --top-ink-2:  #a9b3bf;
  --top-ink-3:  #8794a3;
  --top-accent: #5cc8ff;
  --top-glow:   92, 200, 255;
  --top-raised: #12203a;

  --side-bg:     #ffffff;
  --side-ink:    #0d1117;
  --side-ink-2:  #4a5562;
  --side-ink-3:  #5e6977;
  --side-accent: #0a6bb8;
  --side-glow:   10, 107, 184;
  --side-tint:   #0d1b2a;
  --side-line:   rgba(13, 27, 42, 0.10);
  --side-line-2: rgba(13, 27, 42, 0.18);
  --side-raised: #ffffff;
  --ombra-card: 0 1px 2px rgba(13, 27, 42, 0.06);
  --ombra-alta: 0 16px 40px -12px rgba(13, 27, 42, 0.18);
}

/* ── 3. Contesti di cornice e vetro (index.css 258-314) ─────────────────────
   .chrome-top / .chrome-side col loro nome: non collidono con Bootstrap. */
/* ── La cornice come contesto di colore ──────────────────────────────────
   Ridefinendo qui i token, ogni componente che sta dentro topbar e menu
   cambia scala da solo: non serve che sappia di trovarsi sulla cornice.
   Vale anche per i pannelli a tendina che si aprono dalla topbar, che
   altrimenti a tema chiaro sarebbero bianchi con sopra testo chiaro. */
.chrome-top {
  --color-chrome: var(--top-bg);
  --color-ink:    var(--top-ink);
  --color-ink-2:  var(--top-ink-2);
  --color-ink-3:  var(--top-ink-3);
  --color-accent: var(--top-accent);
  --color-raised: var(--top-raised);
  --color-tint:   var(--top-tint);
  --color-line:   var(--top-line);
  --color-line-2: var(--top-line-2);
  --theme-glow:   var(--top-glow);
  color: var(--color-ink);
}

.chrome-side {
  --menu-attivo:  var(--side-attivo);
  --color-chrome: var(--side-bg);
  --color-ink:    var(--side-ink);
  --color-ink-2:  var(--side-ink-2);
  --color-ink-3:  var(--side-ink-3);
  --color-accent: var(--side-accent);
  --color-raised: var(--side-raised);
  --color-tint:   var(--side-tint);
  --color-line:   var(--side-line);
  --color-line-2: var(--side-line-2);
  --theme-glow:   var(--side-glow);
  color: var(--color-ink);
}

/* ── Superfici di cornice: topbar e menu ───────────────────────────────────
   Quasi nere, con un velo di verde appena percepibile. Prima portavano lo
   stesso gradiente delle card a piena intensità, ed era quello a rendere
   tutto il portale verde. */
.glass {
  background: linear-gradient(180deg,
                rgba(var(--theme-accent), var(--velo-chrome)) 0%,
                rgba(var(--theme-accent), calc(var(--velo-chrome) * 0.35)) 100%),
              var(--color-chrome);
  /* `--velo-chrome` è la quantità di verde sulle superfici di cornice.
     Sul menu bianco va a zero: un velo verde su fondo bianco lo sporca. */
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--color-line);
}

.glass-raised {
  background: var(--color-raised);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--color-line-2);
  box-shadow: var(--ombra-alta);
}

/* ── 4. Componenti del mockup (index.css 316-468), RINOMINATI col prefisso g-
   perche' .card/.btn/.chip... collidono con Bootstrap. Valori identici. */
/* ── Card ───────────────────────────────────────────────────────────────────
   Superficie neutra, bordo a filo di capello. Il verde entra solo al
   passaggio del mouse: è il contenuto a dover colorare la card, non la card
   a colorare il contenuto. */
.g-card {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(160deg,
                rgba(var(--theme-accent), var(--velo-card)) 0%,
                rgba(var(--theme-accent), 0) 60%),
              var(--color-surface);
  box-shadow: var(--ombra-card);
}

/* Bordo disegnato come anello mascherato (non `border`): può accendersi in
   hover senza spostare il layout di un pixel. */
.g-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--color-line);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: background 0.5s ease;
}

.g-card:hover::before { background: rgba(var(--theme-glow), 0.34); }
.g-card-static::before { transition: none; }
.g-card-static:hover::before { background: var(--color-line); }
/* Card che portano a una pagina (Dashboard: Impianti con problemi, Casi aperti): link veri,
   con l'aspetto delle altre card. */
html[data-stile="gabry"] a.g-card { display: block; color: inherit; text-decoration: none; }
html[data-stile="gabry"] a.g-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Alone al passaggio del mouse, in coppia col bordo che si accende. */
.g-glow-hover { transition: box-shadow 0.5s ease; }
.g-glow-hover:hover { box-shadow: 0 0 26px -10px rgba(var(--theme-glow), 0.34), var(--ombra-card); }

/* ── Bottoni ──────────────────────────────────────────────────────────────── */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  /* Mai `transition: all` su elementi che ricevono il focus: animerebbe
     anche `outline-color`, che parte dal colore di sistema del browser
     (chiaro) e scivola verso l'accento — è il lampo bianco al clic. */
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease;
  background-color: color-mix(in srgb, var(--color-tint) 6%, transparent);
  border: 1px solid var(--color-line);
  color: var(--color-ink-2);
}
.g-btn:hover {
  background-color: color-mix(in srgb, var(--color-tint) 11%, transparent);
  border-color: var(--color-line-2);
  color: var(--color-ink);
}

.g-btn-primary {
  background-color: rgba(var(--theme-glow), 0.13);
  border-color: rgba(var(--theme-glow), 0.30);
  color: var(--color-accent);
}
.g-btn-primary:hover {
  background-color: rgba(var(--theme-glow), 0.20);
  border-color: rgba(var(--theme-glow), 0.46);
  color: var(--color-accent);
}

.g-btn-danger {
  background-color: color-mix(in srgb, var(--color-critical) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-critical) 32%, transparent);
  color: var(--color-critical);
}
.g-btn-danger:hover {
  background-color: color-mix(in srgb, var(--color-critical) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-critical) 50%, transparent);
}

.g-btn-ghost { background: transparent; border-color: transparent; color: var(--color-ink-3); }
.g-btn-ghost:hover {
  background-color: color-mix(in srgb, var(--color-tint) 8%, transparent);
  border-color: transparent;
  color: var(--color-ink);
}

.g-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.g-btn-icon { width: 34px; padding: 0; }
.g-btn-icon.g-btn-sm { width: 28px; }
.g-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Campi ──────────────────────────────────────────────────────────────── */
.g-field {
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-ink);
  background-color: color-mix(in srgb, var(--color-tint) 4%, transparent);
  border: 1px solid var(--color-line);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.g-field::placeholder { color: var(--color-ink-3); }
.g-field:hover { border-color: var(--color-line-2); }
.g-field:focus {
  /* Contorno accento a 1px: lo spessore di prima veniva dalla somma di tre
     strati (bordo + alone sfocato + contorno globale), non dal contorno. */
  outline: 1px solid rgba(var(--theme-glow), 0.7);
  outline-offset: 2px;
  border-color: rgba(var(--theme-glow), 0.5);
  box-shadow: none;
}
select.g-field { appearance: none; padding-right: 30px; cursor: pointer; }
select.g-field option { background: var(--color-raised); color: var(--color-ink); }
textarea.g-field { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.55; }
/* Spazio per le icone dentro al campo. Serve una classe dedicata perché
   .g-field vive in un layer e una utility come `pl-9` lo sovrascriverebbe. */
.g-field.ico-l { padding-left: 34px; }
.g-field.ico-r { padding-right: 34px; }
.g-field.ico-lr { padding-left: 34px; padding-right: 34px; }

/* ── Chip ───────────────────────────────────────────────────────────────── */
.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--color-tint) 6%, transparent);
  border: 1px solid var(--color-line);
  color: var(--color-ink-2);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
a.g-chip:hover, button.g-chip:hover {
  background-color: rgba(var(--theme-glow), 0.14);
  border-color: rgba(var(--theme-glow), 0.34);
  color: var(--color-accent);
}

/* ── 5. Accento, interazione, scrollbar, animazioni (index.css 489-582) ─────
   Le regole globali del mockup (*, ::selection, :where...) portano davanti
   html[data-stile="gabry"]: senza, toccherebbero anche Jarvis a stile spento
   se il file fosse incluso per sbaglio. */
/* ── Accento ────────────────────────────────────────────────────────────── */
.glow-text { text-shadow: 0 0 14px rgba(var(--theme-glow), 0.18); }
html[data-stile="gabry"][data-theme="light"] .glow-text { text-shadow: none; }
.glow-soft { box-shadow: 0 0 24px -8px rgba(var(--theme-glow), 0.3); }
.glow-ring { box-shadow: 0 0 0 1px rgba(var(--theme-glow), 0.34); }

/* Luce ambientale di fondo pagina: tre pozze verdi, molto tenui, dietro a
   tutto. Alla luce spariscono: su fondo chiaro una velatura verde sporca. */
.ambient::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 38rem at 8% -10%, rgba(var(--theme-glow), 0.035), transparent 60%),
    radial-gradient(46rem 34rem at 96% 4%, rgba(19, 168, 160, 0.028), transparent 62%);
}
html[data-stile="gabry"][data-variante="vigilanza"] .ambient::before {
  background:
    radial-gradient(58rem 38rem at 8% -10%, rgba(var(--theme-glow), 0.035), transparent 60%),
    radial-gradient(46rem 34rem at 96% 4%, rgba(80, 120, 255, 0.028), transparent 62%);
}
html[data-stile="gabry"][data-theme="light"] .ambient::before { background: none; }

/* Il file del logo è monocromatico bianco: a tema chiaro sparirebbe sul
   fondo chiaro. `brightness(0)` porta al nero qualunque tinta di partenza,
   senza dover mantenere due file. */
html[data-stile="gabry"][data-theme="light"] .logo-marchio { filter: brightness(0); }
/* ...tranne nella topbar, che resta verde scuro anche a tema chiaro. */
html[data-stile="gabry"][data-theme="light"] .chrome-top .logo-marchio { filter: none; }
/* Il menu bianco non porta velo verde: lo ingrigirebbe. */
html[data-stile="gabry"][data-theme="light"] .chrome-side { --velo-chrome: 0; }

/* ── Interazione ────────────────────────────────────────────────────────── */
/* Interruttori: stesso cursore dei tasti (.btn), anche da disattivati. */
html[data-stile="gabry"] [role="switch"] { cursor: pointer; }
html[data-stile="gabry"] [role="switch"]:disabled { cursor: not-allowed; }

/* I campi (.field) hanno un proprio stile di focus e sono esclusi da qui:
   sommando i due si otteneva un bordo spesso quattro strati. */
html[data-stile="gabry"] :where(a, button, input, select, textarea, [tabindex]):not(.g-field):focus-visible {
  outline: 2px solid rgba(var(--theme-glow), 0.65);
  outline-offset: 2px;
  border-radius: 8px;
}
html[data-stile="gabry"] ::selection { background: rgba(var(--theme-glow), 0.26); color: var(--color-ink); }

/* Hover delle voci di menu, con gli stessi valori del Portale: fondo al 6%,
   icona e testo che salgono all'85%. In CSS e non inline perché :hover non si
   scrive in un attributo style. */
html[data-stile="gabry"] .voci-menu a:not([data-attivo]):hover {
  background: color-mix(in srgb, var(--color-tint) 6%, transparent) !important;
}
/* Il contatore degli allarmi è escluso: resta rosso anche in hover. */
html[data-stile="gabry"] .voci-menu a:not([data-attivo]):hover span:not(.badge-menu) {
  color: color-mix(in srgb, var(--color-tint) 85%, transparent) !important;
}

/* Scrollbar in tinta: il menu di sinistra scorre, quindi si vede spesso. */
html[data-stile="gabry"] * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-tint) 16%, transparent) transparent; }
html[data-stile="gabry"] *::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-stile="gabry"] *::-webkit-scrollbar-track { background: transparent; }
html[data-stile="gabry"] *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-tint) 16%, transparent);
  border-radius: 99px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
html[data-stile="gabry"] *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-tint) 26%, transparent); background-clip: content-box; }

/* Colonne di numeri allineate; i valori hero restano proporzionali. */
html[data-stile="gabry"] .tnum { font-variant-numeric: tabular-nums; }

/* Testo "tecnico" — chiavi API, codici, esempi di comando. Resta NaiConnect:
   cifre tabulari e una spaziatura appena più larga bastano a farlo leggere
   come codice senza introdurre un secondo carattere nel portale. */
html[data-stile="gabry"] .code { font-variant-numeric: tabular-nums; letter-spacing: 0.015em; }

/* ── Animazioni ─────────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
html[data-stile="gabry"] .live-dot { animation: pulse-dot 2.4s ease-in-out infinite; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
html[data-stile="gabry"] .rise { animation: rise 0.42s var(--ease-expo) both; }

/* Radar impianti (gabry-bootstrap.css, sezione "Radar impianti"): fascio che gira e impulso
   dei rossi. Qui e non la' perche' in gabry-bootstrap.css ogni selettore comincia con
   html[data-stile="gabry"] (tests/test_stile_gabry_pagine_comuni.py) e "to {}" non potrebbe. */
@keyframes g-radar-imp-gira { to { transform: rotate(360deg); } }
/* Rimbalzo dell'icona rinfrescata da una verifica in diretta (Task 3, Marco 17-10): 1 -> 1.35
   -> 0.9 -> 1.1 -> la sua scala (inizio e fine dal valore calcolato: accesa e' 1.12). */
@keyframes g-radar-imp-rimbalza {
  30% { transform: scale(1.35); }
  55% { transform: scale(.9); }
  80% { transform: scale(1.1); }
}
/* Impulso dei rossi (Task 4, mockup RadarTorre): colori fissi dello schermo (--schermo-rosso),
   anello e alone scalati con la taglia delle icone (--ri-alone: 1, .6, .4). */
@keyframes g-radar-imp-pulsa {
  50% { box-shadow: 0 0 0 calc(6px * var(--ri-alone, 1)) rgba(var(--schermo-rosso), .12),
                    0 0 calc(18px * var(--ri-alone, 1)) rgba(var(--schermo-rosso), .75); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-stile="gabry"] *, html[data-stile="gabry"] *::before, html[data-stile="gabry"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 6. Pagina ─────────────────────────────────────────────────────────── */
html[data-stile="gabry"] body { background: var(--color-page); color: var(--color-ink); font-family: var(--font-sans); }

/* ── 7. Marchio (spec §4.2, mockup Wordmark.jsx) ───────────────────────────
   Germoglio in em: segue il corpo del testo (17 px in barra, 46 in copertina). */
.g-marchio { display: inline-block; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--color-ink); }
.g-marchio-rv { position: relative; display: inline-block; }
.g-germoglio { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.60em; line-height: 0; pointer-events: none; }
.g-germoglio svg { display: block; width: 1.12em; overflow: visible; }

/* ── 8. Guscio: barra, menu, contenuto (README del mockup §Guscio/§Topbar/§Menu;
   AppShell.jsx, Topbar.jsx, Sidebar.jsx) ─────────────────────────────────── */

/* Avvisi della barra: la barra e' verde quasi nera in ENTRAMBI i temi, quindi
   giallo e rosso restano quelli del tema scuro (i passi del tema chiaro,
   pensati per fondo bianco, sulla barra non si leggerebbero). */
html[data-stile="gabry"] .chrome-top { --top-warning: #fab219; --top-critical: #d03b3b; }

html[data-stile="gabry"] .g-barra { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 100;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 0; border-width: 0 0 1px 0; }
.g-barra-logo { display: flex; align-items: center; text-decoration: none; min-width: 0; }
/* Logo e marchio con le misure della barra del viewer (Navbar.svelte): 12 px dal bordo, 10 px fra i due. */
.g-barra-col-logo { display: flex; flex: none; padding-left: 12px; margin-right: 10px; }
.g-barra-col-logo img { height: 22px; width: auto; display: block; }
.g-barra-nome { position: relative; top: .5px; }
.g-barra-destra { display: flex; align-items: center; gap: 8px; }
.g-barra a.g-btn { text-decoration: none; }
/* Pulsanti icona 32x32, icona 14 a tratto 1,9 (Topbar.jsx). */
html[data-stile="gabry"] .g-barra .g-btn-icon.g-btn-ghost { position: relative; width: 32px; height: 32px; flex: none; border-radius: 8px; padding: 0; }
.g-barra .g-icona { stroke-width: 1.9; }
.g-avviso-giallo, .g-avviso-giallo:hover { color: var(--top-warning); }
.g-avviso-rosso, .g-avviso-rosso:hover { color: var(--top-critical); }
.g-avviso-verde, .g-avviso-verde:hover { color: var(--color-accent); }
/* Contatore: 14x14, testo 9 px, padding 0 3, senza alone; centrato sull'angolo
   in alto a destra e spostato di 6 px a sinistra e 6 px in giu' (Topbar.jsx). */
.g-contatore { position: absolute; right: 6px; top: 6px; transform: translate(50%, -50%); min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; font-size: 9px; font-weight: 600; line-height: 14px; text-align: center; background: var(--color-critical); color: #fff; }
.g-utente-nome { font-size: 14px; color: color-mix(in srgb, var(--color-tint) 65%, transparent); white-space: nowrap; }
.g-ruolo { flex: none; font-size: 12px; line-height: 20px; padding: 0 7px; border-radius: 4px; border: 1px solid var(--color-line-2);
  background: color-mix(in srgb, var(--color-tint) 8%, transparent); color: color-mix(in srgb, var(--color-tint) 40%, transparent); white-space: nowrap; }
@media (max-width: 767.98px) { .g-utente-nome, .g-ruolo { display: none; } }
/* Orologio del sistema: a sinistra dell'interruttore, token della barra (chiaro e scuro),
   cifre a larghezza fissa. Sotto i 768 px si nasconde la data e resta l'ora. */
.g-orologio { margin: 0 12px 0 0; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: color-mix(in srgb, var(--color-tint) 65%, transparent); }
@media (max-width: 767.98px) { .g-orologio-data { display: none; } }
/* Rimani connesso: l'interruttore della pagina di accesso (gabry/_accesso.html,
   Toggle del mockup) coi token del contesto barra, leggibile in entrambi i temi.
   Sotto i 768 px resta l'interruttore senza scritta (il title la spiega). */
.g-rimani { display: flex; align-items: center; gap: 8px; margin: 0 6px 0 0; cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: color-mix(in srgb, var(--color-tint) 65%, transparent); white-space: nowrap; user-select: none; }
.g-barra .g-interruttore { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 32px; height: 18px; margin: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-line-2); background: color-mix(in srgb, var(--color-tint) 8%, transparent); transition: all .2s ease; }
.g-barra .g-interruttore::after { content: ""; position: absolute; top: 50%; left: 2px; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%);
  background: var(--color-ink-3); transition: all .2s ease; }
.g-barra .g-interruttore:checked { background: rgba(var(--theme-glow), .3); border-color: rgba(var(--theme-glow), .55); }
.g-barra .g-interruttore:checked::after { left: 16px; background: var(--color-accent); box-shadow: 0 0 8px rgba(var(--theme-glow), .8); }
.g-barra .g-interruttore:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 767.98px) { .g-rimani-testo { display: none; } }
/* Avatar 24 px con le iniziali a 11 px (Avatar di primitives.jsx: fondo e bordo
   dell'alone del contesto). */
.g-avatar { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1;
  background: rgba(var(--theme-glow), .14); border: 1px solid rgba(var(--theme-glow), .28); color: var(--color-accent); cursor: pointer; }

/* Tendina dell'utente: pannello raised del contesto barra, 222 px (Topbar.jsx). */
html[data-stile="gabry"] .g-tendina { width: 222px; padding: 0; margin-top: 9px !important; border-radius: 12px; overflow: hidden;
  background: var(--color-raised); border: 1px solid var(--color-line-2); color: var(--color-ink); font-size: 12.5px; }
.g-tendina-testa { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--color-tint) 10%, transparent); }
.g-tendina-nome { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-ink); }
.g-tendina-email { margin: 2px 0 0; font-size: 11px; color: var(--color-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-stile="gabry"] .g-tendina > li:not(.g-tendina-testa) { padding: 0 6px; }
html[data-stile="gabry"] .g-tendina > li:nth-child(2) { padding-top: 6px; }
html[data-stile="gabry"] .g-tendina > li:last-child { padding-bottom: 6px; }
html[data-stile="gabry"] .g-tendina .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--color-ink-2); background: transparent; border: 0; text-align: left; transition: background-color .18s ease, color .18s ease; }
html[data-stile="gabry"] .g-tendina .dropdown-item:hover,
html[data-stile="gabry"] .g-tendina .dropdown-item:focus { background: color-mix(in srgb, var(--color-tint) 7%, transparent); color: var(--color-ink); }
html[data-stile="gabry"] .g-tendina .g-icona { stroke-width: 1.9; flex: none; }
.g-tendina-sep { height: 1px; margin: 6px 0; background: color-mix(in srgb, var(--color-tint) 10%, transparent); }
.g-tema-titolo { display: block; padding: 6px 10px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-3); }
html[data-stile="gabry"] .g-tendina [data-gabry-tema].attivo { color: var(--color-accent); background: rgba(var(--theme-glow), .13); }
html[data-stile="gabry"] .g-tendina .g-esci { color: #e97070; }
html[data-stile="gabry"] .g-tendina .g-esci:hover { color: #e97070; background: rgba(208, 59, 59, .16); }

/* Menu: sotto la barra, 56 px chiuso -> 241 aperto al passaggio del mouse. */
html[data-stile="gabry"] .g-menu { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 90;
  width: var(--sidebar-collapsed-w); height: calc(100vh - var(--topbar-h)); overflow-x: hidden; overflow-y: auto;
  transition: width .6s var(--ease-expo); will-change: width; border-width: 0 1px 0 0; display: flex; flex-direction: column; padding-top: 15px; }
html[data-stile="gabry"] .g-menu:hover,
html[data-stile="gabry"] .g-menu:has(:focus-visible) { width: var(--sidebar-w); }
/* Prefisso html[...] anche qui: a:hover di Bootstrap (0,1,1) batterebbe .g-voce e
   tingerebbe la voce attiva del colore dei link. */
html[data-stile="gabry"] .g-voce { position: relative; display: flex; align-items: center; flex: none; margin: 4px; width: calc(100% - 8px); height: 40px;
  padding: 0; border-radius: 8px; color: color-mix(in srgb, var(--color-tint) 55%, transparent); text-decoration: none;
  transition: background-color .2s ease; white-space: nowrap; }
/* L'icona: SEMPRE 16 px in una colonna fissa da 48, non cambia ne' misura ne' posto. */
.g-voce-icona { width: 48px; min-width: 48px; flex: none; display: flex; justify-content: center; transition: color .2s ease; }
.g-voce-icona svg { width: 16px; height: 16px; stroke-width: 1.9; }
.g-voce-testo { flex: 1 1 auto; min-width: 0; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; opacity: 0; transition: opacity .2s ease; }
html[data-stile="gabry"] .g-menu:hover .g-voce-testo,
html[data-stile="gabry"] .g-menu:has(:focus-visible) .g-voce-testo { opacity: 1; }
/* Voce selezionata: fondo al 10%, icona e testo pieni nell'accento, testo a 600,
   barretta luminosa 3 px x 60% arrotondata sul lato interno. */
html[data-stile="gabry"] .g-voce[data-attivo] { background: color-mix(in srgb, var(--color-tint) 10%, transparent); color: var(--menu-attivo); }
html[data-stile="gabry"] .g-voce[data-attivo] .g-voce-testo { font-weight: 600; }
html[data-stile="gabry"] .g-voce[data-attivo] .g-voce-icona svg { stroke-width: 2.2; }
html[data-stile="gabry"] .g-voce[data-attivo]::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--color-accent); box-shadow: 0 0 8px rgba(var(--theme-glow), .75); }
/* Contatore degli allarmi: a menu aperto la pillola, a menu chiuso un pallino
   sull'icona (Sidebar.jsx). Resta rosso anche in hover (.badge-menu). */
.g-badge-menu { display: grid; place-items: center; flex: none; height: 17px; min-width: 17px; margin-right: 10px; padding: 0 4px; border-radius: 999px;
  font-size: 10px; font-weight: 600; color: var(--color-critical); opacity: 0; transition: opacity .2s ease;
  background: color-mix(in srgb, var(--color-critical) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-critical) 42%, transparent); }
html[data-stile="gabry"] .g-menu:hover .g-badge-menu { opacity: 1; }
.g-voce:has(.g-badge-menu:not(.d-none))::after { content: ""; position: absolute; left: 30px; top: 10px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-critical); box-shadow: 0 0 7px color-mix(in srgb, var(--color-critical) 90%, transparent); transition: opacity .2s ease; }
html[data-stile="gabry"] .g-menu:hover .g-voce::after { opacity: 0; }
.g-menu-separatore { flex: none; height: 1px; margin: 8px 12px; background: var(--color-line); }
/* Piede: padding orizzontale 12 e trattino corto, altrimenti la riga (207,8 px
   a 11 px) non ci sta e compaiono i puntini (README del mockup). */
.g-menu-piede { margin-top: auto; padding: 12px; border-top: 1px solid var(--color-line); font-size: 11px; white-space: nowrap; overflow: hidden;
  text-align: center; opacity: 0; transition: opacity .2s ease; color: color-mix(in srgb, var(--color-tint) 34%, transparent); }
html[data-stile="gabry"] .g-menu:hover .g-menu-piede { opacity: 1; }

/* Contenuto: margine 24. Come nel mockup (menu e contenuto fianco a fianco)
   e come chiesto da Marco il 18-09, il contenuto si sposta quando il menu si
   apre, con la stessa curva e la stessa durata. ⚠️ Il selettore `~` vale
   perche' #main-content e' un fratello SUCCESSIVO di #gabry-menu in base.html. */
html[data-stile="gabry"] #main-content { margin: var(--topbar-h) 0 0 var(--sidebar-collapsed-w); min-height: calc(100vh - var(--topbar-h)); padding: 24px;
  transition: opacity 0.2s ease, margin-left .6s var(--ease-expo); }
html[data-stile="gabry"] .g-menu:hover ~ #main-content,
html[data-stile="gabry"] .g-menu:has(:focus-visible) ~ #main-content { margin-left: var(--sidebar-w); }

/* ── 9. Testata delle pagine (mockup PageHeader.jsx) ────────────────────── */
.g-testata { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.g-testata-sx { min-width: 0; }
.g-percorso { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 11.5px; color: var(--color-ink-3); }
.g-percorso a { color: inherit; text-decoration: none; transition: color .18s ease; }
.g-percorso a:hover { color: var(--color-accent); }
.g-percorso-sep { opacity: .5; }
html[data-stile="gabry"] .g-titolo { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sottotitolo { margin: 4px 0 0; font-size: 12.5px; color: var(--color-ink-3); }
.g-testata-azioni { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; }
.g-occhiello { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }

/* ── 10. Componenti delle pagine Energia (mockup primitives.jsx) ───────────
   Card con corpo a padding 16 (Card), testata di card (CardHeader), indicatore
   (Stat), badge e pallino di stato (StatusBadge/StatusDot: sempre icona +
   etichetta), coppie chiave/valore (KeyValue), stato vuoto. I toni seguono i
   token del tema (color-mix al posto delle triplette rgb fisse del mockup). */
.g-card-corpo { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 16px; }
.g-card-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.g-card-testa-sx { min-width: 0; }
.g-card-testa-dx { display: flex; flex: none; align-items: center; gap: 6px; }
.g-card-testa-dx a.g-chip { text-decoration: none; }
html[data-stile="gabry"] .g-card-titolo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.025em; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-card-titolo-icona { flex: none; color: var(--color-ink-3); }
.g-card-sottotitolo { margin: 2px 0 0; font-size: 11.5px; line-height: 1.375; color: var(--color-ink-3); }

.g-tono-accento { --t: var(--color-accent); }
.g-tono-s1 { --t: var(--color-s1); } .g-tono-s2 { --t: var(--color-s2); } .g-tono-s3 { --t: var(--color-s3); }
.g-tono-s4 { --t: var(--color-s4); } .g-tono-s5 { --t: var(--color-s5); }
.g-tono-good { --t: var(--color-good); } .g-tono-warning { --t: var(--color-warning); }
.g-tono-serious { --t: var(--color-serious); } .g-tono-critical { --t: var(--color-critical); }
.g-tono-neutral { --t: var(--color-ink-2); } .g-tono-info { --t: var(--color-s2); }

.g-stat { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 12px; }
.g-stat-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.g-stat-etichetta { font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--color-ink-3); }
.g-stat-icona { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: var(--t);
  border: 1px solid color-mix(in srgb, var(--color-tint) 8%, transparent); background: color-mix(in srgb, var(--color-tint) 3%, transparent); }
.g-stat-riga { display: flex; align-items: baseline; gap: 6px; }
.g-stat-valore { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: var(--t); }
.g-stat-hero .g-stat-valore { font-size: 42px; }
.g-tono-accento .g-stat-valore { text-shadow: 0 0 20px rgba(var(--theme-glow), .3); }
.g-stat-unita { font-size: 12.5px; font-weight: 500; color: var(--color-ink-3); }
.g-stat-nota { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 20px;
  font-size: 11.5px; font-weight: 500; color: var(--color-ink-3); }
.g-sparkline { flex: none; color: var(--t); overflow: visible; }
.g-stat-piede { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 10px; font-size: 11px;
  border-top: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); color: var(--color-ink-3); }
.g-stat-piede [data-nota] { font-weight: 600; color: var(--color-ink-2); }

.g-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border-radius: 6px; white-space: nowrap;
  font-size: 10.5px; font-weight: 500; border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
  background: color-mix(in srgb, var(--t) 14%, transparent); }
.g-badge svg { flex: none; stroke-width: 2.4; }
/* Testo dei badge (.g-badge e .energia-stato, un solo linguaggio): il tono pieno sulla sua
   tinta al 14% resta sotto 4,5:1 (critical scuro circa 2,6:1, Sano chiaro 4,4), quindi il
   testo e' un passo verso l'inchiostro: 50% di tono nello scuro, 70% nel chiaro (info chiaro all'80% fa 4,34). Fondo,
   bordo e pallino restano nel tono pieno. --t-testo sta sull'elemento, perche' legge il suo --t. */
html[data-stile="gabry"] :is(.g-badge, .energia-stato) { --t-testo: color-mix(in srgb, var(--t) 50%, var(--color-ink)); color: var(--t-testo); }
html[data-stile="gabry"][data-theme="light"] :is(.g-badge, .energia-stato) { --t-testo: color-mix(in srgb, var(--t) 70%, var(--color-ink)); }
.g-pallino { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 8px color-mix(in srgb, var(--t) 80%, transparent); }

.g-coppie { margin: 16px 0 0; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); }
.g-coppie > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-tint) 5%, transparent); }
.g-coppie > div:last-child { border-bottom: 0; }
.g-coppie dt { font-size: 11.5px; font-weight: 400; color: var(--color-ink-3); }
.g-coppie dd { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--color-ink-2); }

.g-grafico { position: relative; overflow: hidden; }
.g-vuoto { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 12.5px; color: var(--color-ink-3);
  background: var(--color-surface); }
.g-vuoto-riga { margin: 0; padding: 14px 0; text-align: center; font-size: 12.5px; color: var(--color-ink-3); }

/* ── 11. Dashboard (mockup src/pages/Dashboard.jsx) ─────────────────────────
   Griglie: 5 indicatori (2 da 640 px, 5 da 1280 = xl di Tailwind), poi file
   da tre colonne con la prima card su due, poi due colonne; gap 16. */
.g-dash-kpi, .g-dash-fila { display: grid; gap: 16px; margin-bottom: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .g-dash-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .g-dash-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .g-dash-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-dash-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-span-2 { grid-column: span 2 / span 2; }
}
.g-dash-ciambella { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 16px; }
.g-ciambella { position: relative; flex: none; width: 142px; height: 142px; }
.g-ciambella canvas { width: 142px !important; height: 142px !important; }
.g-ciambella-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.g-ciambella-numero { margin: 0; font-size: 26px; font-weight: 600; line-height: 1; color: var(--color-ink); }
.g-ciambella-testo { margin: 4px 0 0; font-size: 10.5px; color: var(--color-ink-3); }
.g-legenda-stati { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.g-legenda-voce { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-legenda-nome { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--color-ink-2); }
.g-legenda-nome svg { flex: none; color: var(--t); stroke-width: 2.4; }
.g-legenda-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-legenda-n { flex: none; font-size: 12px; font-weight: 600; color: var(--color-ink); }

/* Testata ferma (Marco 18-10, come Analisi, Report e la scheda impianto): occhiello, titolo,
   sottotitolo ed Esporta/Impianti restano in alto, scorrono solo le card. Il margine laterale di
   2 px tiene dentro l'ombra delle card, che il corpo con lo scorrimento taglierebbe. Niente su
   schermi bassi, come le altre pagine Gabry. */
@media (min-height: 700px) {
  html[data-stile="gabry"] .g-dash-pagina { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] .g-dash-pagina > .g-testata { flex: none; }
  html[data-stile="gabry"] .g-dash-pagina > .g-dash { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -2px; padding: 0 2px 8px; }
}

/* ── Radar della Dashboard Energia (Marco 18-10, mockup "Dashboard Energia con Radar") ──────
   Fila 2 con tre card: curva, Stato del portafoglio, radar degli impianti (templates/energia/
   gabry/dashboard.html, static/js/energia_radar_gabry.js). Da 1440 px tre colonne (radar almeno
   440, la scena e' 620 e si rimpicciolisce); da 1280 la curva sopra, sotto stato e radar affiancati; sotto, una colonna.
   Lo schermo e' quello del Radar della vigilanza (gabry-bootstrap.css, "Radar impianti") in piccolo:
   radar 340 invece di 600, fumetti FUORI dal radar in due colonne da 140 (scena 620 x 370, Marco 18-10). Come la' i colori sono
   FISSI (--schermo-*), ma col tema chiaro lo schermo e' bianco (Marco 18-10, valori a parte); i
   keyframes sono quelli della vigilanza (g-radar-imp-gira, g-radar-imp-pulsa: leggono
   --schermo-rosso e --ri-alone). */
@media (min-width: 1280px) {
  html[data-stile="gabry"] .g-dash-radar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-stile="gabry"] .g-dash-radar > #dash-curva { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  html[data-stile="gabry"] .g-dash-radar { grid-template-columns: minmax(0, 1.12fr) minmax(0, .9fr) minmax(440px, 1.28fr); }
  html[data-stile="gabry"] .g-dash-radar > #dash-curva { grid-column: auto; }
}
html[data-stile="gabry"] .g-dash-radar .g-dash-ciambella { flex-wrap: wrap; }
html[data-stile="gabry"] .g-radar-energia { --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; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 48%, 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)); }
html[data-stile="gabry"] .g-radar-energia::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
/* Tema chiaro (Marco 18-10): con Energia e Stile Gabry nel tema chiaro lo schermo e' bianco, nel tema scuro resta
   com'e'. Solo il radar della Dashboard Energia: il Radar della vigilanza resta sempre scuro. Stessi nomi delle
   variabili, valori fissi per il fondo bianco (stati piu' scuri per restare leggibili). */
html[data-stile="gabry"][data-theme="light"] .g-radar-energia { --schermo-fondo-centro: #ffffff; --schermo-fondo: #fbfcfb; --schermo-fondo-bordo: #eef3f0; --schermo-bordo: #dfe6e2;
  --schermo-testo: 25, 45, 37; --schermo-filo: 25, 118, 170; --schermo-luce: 25, 118, 170; --schermo-tacca: 25, 45, 37;
  --schermo-chiaro: 13, 20, 17; --schermo-icona: 255, 255, 255;
  --schermo-verde: 12, 150, 70; --schermo-arancio: 214, 128, 0; --schermo-rosso: 210, 45, 45; --schermo-grigio: 120, 132, 140;
  box-shadow: inset 0 0 60px rgba(13, 40, 27, .06), 0 1px 2px rgba(13, 40, 27, .06); }
html[data-stile="gabry"][data-theme="light"] .g-radar-energia::before { background: repeating-linear-gradient(0deg, rgba(13, 40, 27, .018) 0 1px, transparent 1px 3px); }
html[data-stile="gabry"] .g-radar-energia .re-testa, html[data-stile="gabry"] .g-radar-energia .re-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 14px; padding: 9px 14px; font: 500 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; color: rgba(var(--schermo-testo), .65); }
html[data-stile="gabry"] .g-radar-energia .re-testa { border-bottom: 1px solid rgba(var(--schermo-filo), .12); }
html[data-stile="gabry"] .g-radar-energia .re-forte { font-weight: 600; color: rgb(var(--schermo-testo)); }
html[data-stile="gabry"] .g-radar-energia .re-piede { justify-content: flex-start; gap: 4px 16px; border-top: 1px solid rgba(var(--schermo-filo), .12); }
html[data-stile="gabry"] .g-radar-energia .re-pt { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
html[data-stile="gabry"] .g-radar-energia .re-pt-rosso { background: rgb(var(--schermo-rosso)); box-shadow: 0 0 6px rgb(var(--schermo-rosso)); }
html[data-stile="gabry"] .g-radar-energia .re-pt-arancio { background: rgb(var(--schermo-arancio)); box-shadow: 0 0 6px rgb(var(--schermo-arancio)); }
html[data-stile="gabry"] .g-radar-energia .re-pt-verde { background: rgb(var(--schermo-verde)); box-shadow: 0 0 6px rgb(var(--schermo-verde)); }
html[data-stile="gabry"] .g-radar-energia .re-pt-grigio { background: rgb(var(--schermo-grigio)); }
/* Corpo: la scena 620 x 370 si rimpicciolisce (energia_radar_gabry.js, adattaScena) se la card e' stretta. */
html[data-stile="gabry"] .g-radar-energia .re-corpo { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 4px 6px; overflow: hidden; }
html[data-stile="gabry"] .g-radar-energia .re-adatta { position: relative; flex: none; width: 620px; height: 370px; }
html[data-stile="gabry"] .g-radar-energia .re-scena { position: absolute; left: 0; top: 0; width: 620px; height: 370px; transform-origin: 0 0; }
html[data-stile="gabry"] .g-radar-energia .re-radar { position: absolute; left: 140px; top: 15px; width: 340px; height: 340px; }
html[data-stile="gabry"] .g-radar-energia .re-radar > span { position: absolute; display: block; }
html[data-stile="gabry"] .g-radar-energia .re-reticolo { left: 0; top: 0; width: 340px; height: 340px; 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: 20px 20px; background-position: 10px 10px; }
html[data-stile="gabry"] .g-radar-energia .re-anello { box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(var(--schermo-filo), .24); }
html[data-stile="gabry"] .g-radar-energia .re-a1 { left: 103px; top: 103px; width: 134px; height: 134px; border-color: rgba(var(--schermo-rosso), .38); background: rgba(var(--schermo-rosso), .05); }
html[data-stile="gabry"] .g-radar-energia .re-a2 { left: 62px; top: 62px; width: 216px; height: 216px; border-color: rgba(var(--schermo-arancio), .32); }
html[data-stile="gabry"] .g-radar-energia .re-a3 { left: 17px; top: 17px; width: 306px; height: 306px; border-color: rgba(var(--schermo-verde), .26); }
html[data-stile="gabry"] .g-radar-energia .re-a4 { left: 0; top: 0; width: 340px; height: 340px; border-color: rgba(var(--schermo-filo), .55);
  box-shadow: inset 0 0 30px rgba(var(--schermo-filo), .08), 0 0 14px rgba(var(--schermo-filo), .10); }
html[data-stile="gabry"] .g-radar-energia .re-asse { background: rgba(var(--schermo-filo), .12); }
html[data-stile="gabry"] .g-radar-energia .re-ax { left: 0; top: 170px; width: 340px; height: 1px; }
html[data-stile="gabry"] .g-radar-energia .re-ay { left: 170px; top: 0; width: 1px; height: 340px; }
html[data-stile="gabry"] .g-radar-energia .re-quadrante { left: 0; top: 0; width: 340px; height: 340px; }
html[data-stile="gabry"] .g-radar-energia .re-quadrante > span { position: absolute; display: block; }
html[data-stile="gabry"] .g-radar-energia .re-tacca { left: 169.5px; top: 0; width: 1px; background: rgba(var(--schermo-filo), .45); transform-origin: .5px 170px; }
html[data-stile="gabry"] .g-radar-energia .re-tacca-l { background: rgba(var(--schermo-tacca), .9); }
html[data-stile="gabry"] .g-radar-energia .re-grado { width: 24px; text-align: center; font: 500 8.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(var(--schermo-testo), .55); }
html[data-stile="gabry"] .g-radar-energia .re-scia { left: 0; top: 0; width: 340px; height: 340px; 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-energia .re-fascio { left: 169px; top: 0; width: 2px; height: 170px; 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 170px; animation: g-radar-imp-gira 18s linear infinite; }
html[data-stile="gabry"] .g-radar-energia .re-centro { left: 166px; top: 166px; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--schermo-filo)); box-shadow: 0 0 12px rgba(var(--schermo-filo), .9); }
html[data-stile="gabry"] .g-radar-energia .re-zona { left: 176px; font: 600 8px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: rgba(var(--schermo-testo), .5); }
html[data-stile="gabry"] .g-radar-energia .re-z-rosso { top: 106px; }
html[data-stile="gabry"] .g-radar-energia .re-z-arancio { top: 65px; }
html[data-stile="gabry"] .g-radar-energia .re-z-verde { top: 20px; }
html[data-stile="gabry"] .g-radar-energia .re-segnali { position: absolute; inset: 0; z-index: 2; }
/* Icone: left/top = centro (energia_radar_gabry.js), il margine negativo della taglia le centra.
   Taglia col numero degli impianti: re-dim-m fino a 60 (20 px), re-dim-s fino a 200 (14), oltre un
   pallino da 8 px senza simbolo con l'area del clic di 16 px. */
html[data-stile="gabry"] .g-radar-energia .re-segnale { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid;
  background: rgba(var(--schermo-icona), .92); text-decoration: none; transition: transform .15s ease; }
html[data-stile="gabry"] .g-radar-energia.re-dim-m { --ri-alone: 1; }
html[data-stile="gabry"] .g-radar-energia.re-dim-s { --ri-alone: .6; }
html[data-stile="gabry"] .g-radar-energia.re-dim-xs { --ri-alone: .4; }
html[data-stile="gabry"] .g-radar-energia.re-dim-m .re-segnale { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
html[data-stile="gabry"] .g-radar-energia.re-dim-s .re-segnale { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
html[data-stile="gabry"] .g-radar-energia.re-dim-xs .re-segnale { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1px; }
html[data-stile="gabry"] .g-radar-energia.re-dim-m .re-segnale svg { width: 11px; height: 11px; stroke-width: 2.6; }
html[data-stile="gabry"] .g-radar-energia.re-dim-s .re-segnale svg { width: 8px; height: 8px; stroke-width: 2.8; }
html[data-stile="gabry"] .g-radar-energia.re-dim-xs .re-segnale svg { display: none; }
html[data-stile="gabry"] .g-radar-energia.re-dim-xs .re-segnale::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
html[data-stile="gabry"] .g-radar-energia .re-verde { color: rgb(var(--schermo-verde)); border-color: rgba(var(--schermo-verde), .65); box-shadow: 0 0 calc(9px * var(--ri-alone, 1)) rgba(var(--schermo-verde), .35); }
html[data-stile="gabry"] .g-radar-energia .re-arancio { color: rgb(var(--schermo-arancio)); border-color: rgba(var(--schermo-arancio), .8); box-shadow: 0 0 calc(11px * var(--ri-alone, 1)) rgba(var(--schermo-arancio), .45); }
html[data-stile="gabry"] .g-radar-energia .re-rosso { color: rgb(var(--schermo-rosso)); border-color: rgba(var(--schermo-rosso), .9); box-shadow: 0 0 calc(13px * 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-energia .re-grigio { color: rgb(var(--schermo-grigio)); border-color: rgba(var(--schermo-grigio), .45); box-shadow: none; }
html[data-stile="gabry"] .g-radar-energia .re-segnale:hover, html[data-stile="gabry"] .g-radar-energia .re-segnale:focus-visible,
html[data-stile="gabry"] .g-radar-energia .re-segnale.re-acceso { z-index: 5; transform: scale(1.18); }
html[data-stile="gabry"] .g-radar-energia .re-segnale.re-acceso { filter: brightness(1.35); }
html[data-stile="gabry"] .g-radar-energia .re-segnale:focus-visible { outline: 2px solid rgb(var(--schermo-filo)); outline-offset: 2px; }
/* Fumetti torre di controllo: sfondo trasparente nel colore dello stato, linea sempre a gomito. */
html[data-stile="gabry"] .g-radar-energia .re-linee { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
html[data-stile="gabry"] .g-radar-energia .re-linee polyline.re-gomito { fill: none; stroke-width: 1.2; stroke-linejoin: round; }
html[data-stile="gabry"] .g-radar-energia .re-linee circle.re-punto { stroke: none; }
html[data-stile="gabry"] .g-radar-energia .re-l-rosso { stroke: rgb(var(--schermo-rosso)); fill: rgb(var(--schermo-rosso)); }
html[data-stile="gabry"] .g-radar-energia .re-l-arancio { stroke: rgb(var(--schermo-arancio)); fill: rgb(var(--schermo-arancio)); }
html[data-stile="gabry"] .g-radar-energia .re-l-verde { stroke: rgb(var(--schermo-verde)); fill: rgb(var(--schermo-verde)); }
html[data-stile="gabry"] .g-radar-energia .re-l-grigio { stroke: rgb(var(--schermo-grigio)); fill: rgb(var(--schermo-grigio)); }
html[data-stile="gabry"] .g-radar-energia .re-fumetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* Fumetti fuori dal radar, colonne strette (Marco 18-10): carattere ridotto, 10 px il nome e 8,5 px le righe. */
html[data-stile="gabry"] .g-radar-energia .re-fumetto { position: absolute; box-sizing: border-box; width: 122px; display: flex; flex-direction: column; gap: 0; padding: 4px 6px;
  border-radius: 5px; border: 1px solid; font-size: 10px; line-height: 1.25; color: rgb(var(--schermo-chiaro)); backdrop-filter: blur(2px); }
html[data-stile="gabry"] .g-radar-energia .re-fumetto b, html[data-stile="gabry"] .g-radar-energia .re-fumetto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-stile="gabry"] .g-radar-energia .re-fumetto b { font-weight: 600; }
html[data-stile="gabry"] .g-radar-energia .re-fumetto small { font: 500 8.5px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(var(--schermo-chiaro), .8); }
html[data-stile="gabry"] .g-radar-energia .re-f-rosso { background: rgba(var(--schermo-rosso), .18); border-color: rgba(var(--schermo-rosso), .55); }
html[data-stile="gabry"] .g-radar-energia .re-f-arancio { background: rgba(var(--schermo-arancio), .16); border-color: rgba(var(--schermo-arancio), .55); }
html[data-stile="gabry"] .g-radar-energia .re-f-verde { background: rgba(var(--schermo-verde), .14); border-color: rgba(var(--schermo-verde), .5); }
html[data-stile="gabry"] .g-radar-energia .re-f-grigio { background: rgba(var(--schermo-grigio), .16); border-color: rgba(var(--schermo-grigio), .45); }
/* Errore o nessun impianto: il messaggio sullo schermo scuro, non sulla superficie della card. */
html[data-stile="gabry"] .g-radar-energia .g-vuoto { z-index: 7; background: rgba(var(--schermo-icona), .82); color: rgba(var(--schermo-testo), .85); }
/* Pagina lasciata (ferma) e "riduci movimento": fascio, scia e impulso fermi. */
html[data-stile="gabry"] .g-radar-energia.re-fermo .re-fascio, html[data-stile="gabry"] .g-radar-energia.re-fermo .re-scia,
html[data-stile="gabry"] .g-radar-energia.re-fermo .re-rosso { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-stile="gabry"] .g-radar-energia .re-fascio, html[data-stile="gabry"] .g-radar-energia .re-scia, html[data-stile="gabry"] .g-radar-energia .re-rosso { animation: none; }
}

.g-dash-mappa { position: relative; flex: 1; min-height: 340px; margin-top: 8px; border-radius: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); }
/* maplibre-gl.css mette .maplibregl-map a position: relative: senza il prefisso la tela resterebbe alta 0. */
html[data-stile="gabry"] .g-dash-mappa-tela { position: absolute; inset: 0; }
.g-legenda-mappa { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }

.g-elenco-allarmi { display: flex; flex-direction: column; gap: 6px; }
html[data-stile="gabry"] .g-voce-allarme { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-tint) 6%, transparent); background: color-mix(in srgb, var(--color-tint) 2%, transparent);
  transition: background-color .18s ease, border-color .18s ease; }
html[data-stile="gabry"] .g-voce-allarme:hover { border-color: color-mix(in srgb, var(--color-tint) 15%, transparent); background: color-mix(in srgb, var(--color-tint) 5%, transparent); }
.g-voce-allarme-testo { flex: 1; min-width: 0; }
.g-voce-allarme-titolo, .g-voce-allarme-sotto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-voce-allarme-titolo { font-size: 12.5px; font-weight: 500; color: var(--color-ink); }
.g-voce-allarme-sotto { margin-top: 2px; font-size: 11px; color: var(--color-ink-3); }
.g-voce-allarme-dx { flex: none; text-align: right; }
.g-voce-allarme-quando { display: block; margin-top: 4px; font-size: 10.5px; color: var(--color-ink-3); }

/* Resa: barre orizzontali (HBars del mockup: etichetta 118 px, barra 12, valore a destra). */
.g-barre { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 11px; padding-top: 4px; }
.g-barre-piede { margin: 4px 0 0; padding-top: 10px; font-size: 11px; color: var(--color-ink-3); border-top: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); }
html[data-stile="gabry"] .g-barra-riga { display: grid; grid-template-columns: 118px minmax(0, 1fr) 48px; align-items: center; gap: 10px; text-decoration: none; }
/* Solo nelle righe del grafico: g-barra-nome e' anche la classe del marchio nella barra in alto. */
.g-barra-riga .g-barra-nome { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--color-ink-2); }
.g-barra-traccia { position: relative; height: 12px; }
.g-barra-piena { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--color-s1); transition: opacity .18s ease; }
.g-barre:hover .g-barra-riga:not(:hover) .g-barra-piena { opacity: .55; }
.g-barra-valore { font-size: 10.5px; font-weight: 600; color: var(--color-ink-2); }

.g-tabella-eventi { overflow-x: auto; }
.g-tabella-eventi table { width: 100%; border-collapse: collapse; font-size: 12px; }
.g-tabella-eventi tr[data-url] { cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--color-tint) 5%, transparent); transition: background-color .18s ease; }
.g-tabella-eventi tr[data-url]:last-child { border-bottom: 0; }
.g-tabella-eventi tr[data-url]:hover { background: color-mix(in srgb, var(--color-tint) 4%, transparent); }
.g-tabella-eventi td { padding: 8px 12px 8px 0; vertical-align: middle; }
.g-ev-ora { width: 86px; white-space: nowrap; font-size: 11px; color: var(--color-ink-3); }
.g-ev-gravita { width: 108px; }
.g-ev-coda { width: 104px; white-space: nowrap; font-weight: 500; color: var(--color-ink-3); }
.g-ev-titolo { color: var(--color-ink); }
.g-ev-dove { white-space: nowrap; font-size: 11.5px; color: var(--color-ink-3); }
html[data-stile="gabry"] .g-tabella-eventi td.g-ev-stato { padding-right: 0; text-align: right; white-space: nowrap; }
/* Controlli di MapLibre nei colori del tema (di serie sono bianchi). */
html[data-stile="gabry"] .g-dash-mappa .maplibregl-ctrl-group { background: var(--color-raised); border: 1px solid var(--color-line-2); box-shadow: none; }
html[data-stile="gabry"] .g-dash-mappa .maplibregl-ctrl-group button + button { border-top-color: var(--color-line); }
html[data-stile="gabry"][data-theme="dark"] .g-dash-mappa .maplibregl-ctrl-icon { filter: invert(1) brightness(.85); }
html[data-stile="gabry"] .g-dash-mappa .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--color-raised) 85%, transparent); color: var(--color-ink-3); font-size: 10px; }
html[data-stile="gabry"] .g-dash-mappa .maplibregl-ctrl-attrib a { color: var(--color-ink-2); }
html[data-stile="gabry"][data-theme="dark"] .g-dash-mappa .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* ── 12. Impianti (mockup src/pages/Plants.jsx, vista Tabella; DataTable.jsx) ──
   La tabella e' quella della tab Impianti di oggi (energia/_tab_impianti.html,
   radice #energia-impianti-box in display:contents): qui solo l'aspetto, tutto
   sotto html[data-stile="gabry"]. Bootstrap (.table, .btn) si ridisegna con le sue
   variabili; le regole per id servono a battere i colori cablati di Bootstrap.
   Testi grigi a --g-attenuato (gabry-bootstrap.css): --color-ink-3 sulle
   superfici resta sotto 4,5:1 in entrambi i temi. */
/* Pagina ferma, scorre solo la tabella con i nomi di colonna fermi (come la tab
   Impianti, richiesta di Marco 11-10); niente su schermi bassi. */
@media (min-height: 700px) {
  html[data-stile="gabry"] .g-impianti { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] .g-impianti > .g-testata { flex: none; }
  html[data-stile="gabry"] .g-impianti-card { flex: 1 1 auto; min-height: 0; }
  html[data-stile="gabry"] .g-impianti-card .table-responsive { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
/* I riquadri dei totali della tab non ci sono nel mockup: i totali vanno nel sottotitolo. */
html[data-stile="gabry"] .g-impianti #energia-riquadri { display: none; }
/* Riga dei filtri (FilterBar del mockup): pillole, ricerca, interruttore, abbinamento. */
html[data-stile="gabry"] .g-impianti #energia-impianti-box > .d-flex { gap: 8px 10px !important; margin-bottom: 12px !important; }
html[data-stile="gabry"] #energia-filtri { gap: 6px; }
html[data-stile="gabry"] #energia-filtri > .btn {
  --bs-btn-padding-x: 9px; --bs-btn-padding-y: 0; --bs-btn-font-size: 12px; --bs-btn-font-weight: 500;
  --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-2);
  --bs-btn-hover-color: var(--color-accent); --bs-btn-hover-bg: rgba(var(--theme-glow), .14); --bs-btn-hover-border-color: rgba(var(--theme-glow), .34);
  --bs-btn-active-color: var(--color-accent); --bs-btn-active-bg: rgba(var(--theme-glow), .14); --bs-btn-active-border-color: rgba(var(--theme-glow), .34);
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-left: 0; border-radius: 6px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
html[data-stile="gabry"][data-theme="light"] #energia-filtri > .btn { --bs-btn-hover-color: var(--g-accento-chiaro); --bs-btn-active-color: var(--g-accento-chiaro); }
html[data-stile="gabry"] #energia-filtri > .btn span { font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-stile="gabry"] .g-impianti #energia-cerca { height: 30px; min-height: 0; padding: 0 10px 0 32px; font-size: 12px;
  background: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") no-repeat 10px 50% / 13px 13px; }
html[data-stile="gabry"][data-theme="light"] .g-impianti #energia-cerca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7772' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] .g-impianti #energia-impianti-box .form-switch { display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0 0 0 4px !important; padding-left: 0; }
html[data-stile="gabry"] .g-impianti #energia-impianti-box .form-switch .form-check-label { font-size: 12px; }
html[data-stile="gabry"] #energia-inattivi { float: none; margin: 0; border-color: var(--g-bordo-campo); background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); cursor: pointer; }
html[data-stile="gabry"] #energia-inattivi:checked { background-color: var(--color-accent-core); border-color: var(--color-accent-core); }
html[data-stile="gabry"] .g-impianti [data-abbina-impianto] { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; }
html[data-stile="gabry"][data-theme="light"] .g-impianti [data-abbina-impianto] { --bs-btn-color: var(--g-accento-chiaro); --bs-btn-hover-color: var(--g-accento-chiaro); }

/* Tabella: righe 44 px, intestazioni 11,5 px maiuscole, passaggio del mouse al 5%. */
html[data-stile="gabry"] #energia-tabella { --bs-table-bg: transparent; --bs-table-color: var(--color-ink-2);
  --bs-table-border-color: color-mix(in srgb, var(--color-tint) 5%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--color-tint) 5%, transparent); --bs-table-hover-color: var(--color-ink);
  margin: 0; font-size: 12px; }
html[data-stile="gabry"] .g-impianti .table-responsive { border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; }
html[data-stile="gabry"] #energia-tabella thead th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 12px; vertical-align: middle; white-space: nowrap;
  font-size: 11.5px; 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"] #energia-tabella thead th[data-ordina] { cursor: pointer; user-select: none; transition: color .18s ease; }
html[data-stile="gabry"] #energia-tabella thead th[data-ordina]:hover { color: var(--color-ink); }
html[data-stile="gabry"] #energia-tabella thead th[data-ordina]::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px;
  background: currentColor; opacity: .35; -webkit-mask: 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%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-stile="gabry"] #energia-tabella thead th[aria-sort] { color: var(--color-accent); }
html[data-stile="gabry"] #energia-tabella thead th[aria-sort]::after { opacity: 1; }
html[data-stile="gabry"] #energia-tabella thead th[aria-sort="ascending"]::after { -webkit-mask-image: 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%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); mask-image: 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%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] #energia-tabella thead th[aria-sort="descending"]::after { -webkit-mask-image: 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%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); mask-image: 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%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] #energia-tabella tbody td { height: 44px; padding: 0 12px; vertical-align: middle; white-space: nowrap; }
html[data-stile="gabry"] #energia-tabella tbody tr:last-child > td { border-bottom: 0; }
html[data-stile="gabry"] #energia-tabella tbody tr[data-url] { cursor: pointer; }
html[data-stile="gabry"] #energia-tabella tbody tr > td { transition: box-shadow .18s ease; }
html[data-stile="gabry"] #energia-tabella td.text-end { font-variant-numeric: tabular-nums; }
html[data-stile="gabry"] #energia-tabella tbody tr[data-url] > td:nth-child(2) { font-weight: 500; color: var(--color-ink); }
/* Impianto non piu' presente: riga attenuata (la classe text-muted sta sulla riga). */
html[data-stile="gabry"] #energia-tabella tbody tr.text-muted > td { --bs-table-color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] #energia-tabella tbody tr.text-muted > td:nth-child(2) { color: var(--g-attenuato, var(--color-ink-3)); font-weight: 400; }
/* Sito abbinato in verde, come il badge "Sano" (Marco 11-10). */
html[data-stile="gabry"] #energia-tabella td.energia-sito { color: var(--color-good); }

/* Badge di stato dell'impianto (StatusBadge del mockup): icona + etichetta, tono dai token;
   il colore del testo viene dalla regola condivisa con .g-badge (sezione 10). */
html[data-stile="gabry"] .energia-stato { --t: var(--color-ink-2);
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 6px; white-space: nowrap;
  font-size: 10.5px; font-weight: 500; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); background: color-mix(in srgb, var(--t) 14%, transparent); }
html[data-stile="gabry"] .energia-stato::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--icona-stato, none) center / contain no-repeat; mask: var(--icona-stato, none) center / contain no-repeat; }
html[data-stile="gabry"] .energia-stato.sano { --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"); }
html[data-stile="gabry"] .energia-stato.allarme { --t: var(--color-warning); --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%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] .energia-stato.scollegato { --t: var(--color-critical); --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%3Cpath d='M12 20h.01'/%3E%3Cpath d='M8.5 16.429a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 12.859a10 10 0 0 1 5.17-2.69'/%3E%3Cpath d='M19 12.859a10 10 0 0 0-2.007-1.523'/%3E%3Cpath d='M2 8.82a15 15 0 0 1 4.177-2.643'/%3E%3Cpath d='M22 8.82a15 15 0 0 0-11.288-3.764'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] .energia-stato.guasto { --t: var(--color-critical); --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%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] .energia-stato.vecchio { --t: var(--color-ink-2); --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%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); }
/* Unita' di misura: "kWp" non diventa "KWP". */
html[data-stile="gabry"] #energia-tabella thead th:nth-child(3) { text-transform: none; }
/* I pulsanti-link della testata senza sottolineatura (a.g-btn). */
html[data-stile="gabry"] a.g-btn { text-decoration: none; }
/* Sottotitolo della testata: --color-ink-3 sul fondo pagina chiaro fa 4,34:1. */
html[data-stile="gabry"] .g-sottotitolo { color: var(--g-attenuato, var(--color-ink-3)); }
/* Impianto non attivo (diagramma Siti/impianti): badge neutro con circle-slash, non la spunta
   di 'sano'. La classe sta accanto allo stato, quindi serve la specificita' doppia. */
html[data-stile="gabry"] .energia-stato.non-attivo { --t: var(--color-ink-2); --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%3Cline x1='9' x2='15' y1='15' y2='9'/%3E%3C/svg%3E"); }

/* ── 13. Scheda impianto (mockup src/pages/PlantDetail.jsx; Tabs di primitives.jsx) ──
   templates/energia/gabry/impianto.html riusa i parziali della scheda di oggi
   (energia/_scheda_*.html): qui l'aspetto delle loro classi (pan-*, an-*, el-*,
   imp-*) coi token del tema, tutto sotto html[data-stile="gabry"]. Bootstrap
   (.btn-group, .table, .form-select) si ridisegna con le sue variabili. Testi
   grigi a --g-attenuato: --color-ink-3 sulle superfici resta sotto 4,5:1. */
/* Testata, meteo, indicatori e tab fermi: scorre solo il contenuto della tab
   (come la scheda di oggi, richiesta di Marco 11-10); niente su schermi bassi. */
@media (min-height: 760px) {
  html[data-stile="gabry"] .g-scheda { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] .g-scheda-testa { flex: none; }
  html[data-stile="gabry"] .g-scheda-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
}
html[data-stile="gabry"] .g-scheda .g-testata { margin-bottom: 14px; }
/* Percorso della testata: --color-ink-3 sul fondo pagina chiaro fa 4,34:1 (misura sul banco, Task 10). */
html[data-stile="gabry"] .g-percorso { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-scheda .g-testata-azioni .energia-stato { height: 28px; padding: 0 9px; font-size: 12px; }
html[data-stile="gabry"] .g-scheda-sezione { margin-top: 16px; }

/* Azioni della testata: pulsanti e sotto il meteo, allineati a destra (Marco 15-10). */
/* Su schermi stretti il blocco va a capo sotto il titolo: resta comunque a destra e puo' stringersi. */
html[data-stile="gabry"] .g-scheda .g-testata-azioni { flex: 0 1 auto; min-width: 0; margin-left: auto; }
html[data-stile="gabry"] .g-scheda-destra { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
html[data-stile="gabry"] .g-scheda-pulsanti { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
/* Meteo a pillole (energia_meteo_scheda.js: .ora con icona ed etichetta). */
html[data-stile="gabry"] .g-scheda-meteo { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; }
html[data-stile="gabry"] .g-scheda-destra .imp-meteo { justify-content: flex-end; }
html[data-stile="gabry"] .g-scheda-meteo-titolo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 28px; }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .ora { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 28px; padding: 0 9px 0 4px;
  border-radius: 99px; font-size: 11.5px; line-height: 1; color: var(--color-ink-2); font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-tint) 3%, transparent); }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .ora img { width: 22px; height: 22px; margin: 0; }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .ora.adesso { color: var(--color-accent); border-color: rgba(var(--theme-glow), .34); background: rgba(var(--theme-glow), .10); font-weight: 600; }
html[data-stile="gabry"][data-theme="light"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .ora.adesso { color: var(--g-accento-chiaro); }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .fonte, html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .vuoto { margin-left: 2px; font-size: 11px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] :is(.g-scheda, #energiaPlanimetriaModal) .imp-meteo .fonte a { color: inherit; }

/* Sei indicatori: 2 colonne, 6 da 1280 px (xl:grid-cols-6 del mockup); gap 16. */
.g-scheda-kpi { display: grid; gap: 16px; margin-bottom: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .g-scheda-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .g-scheda-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Tab (Tabs del mockup): testo 12,5 px, icona 14, sottolineatura accento con alone. */
.g-tabs-scorre { overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.g-tabs { position: relative; display: flex; gap: 4px; width: max-content; min-width: 100%; }
html[data-stile="gabry"] .g-tab { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 8px 12px; margin: 0;
  border: 0; border-radius: 0; background: transparent; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--g-attenuato, var(--color-ink-3)); cursor: pointer; transition: color .2s ease; }
html[data-stile="gabry"] .g-tab:hover { color: var(--color-ink-2); }
html[data-stile="gabry"] .g-tab.active { color: var(--color-accent); }
html[data-stile="gabry"][data-theme="light"] .g-tab.active { color: var(--color-accent-ink); }
html[data-stile="gabry"] .g-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 99px; pointer-events: none;
  background: var(--color-accent); box-shadow: 0 0 9px rgba(var(--theme-glow), .7); opacity: 0; transform: scaleX(.5);
  transition: opacity .2s ease, transform .32s cubic-bezier(.4, 0, .2, 1); }
html[data-stile="gabry"] .g-tab.active::after { opacity: 1; transform: none; }
html[data-stile="gabry"] .g-tab-conta { display: inline-grid; place-items: center; height: 16px; min-width: 16px; margin-left: 2px; padding: 0 4px; border-radius: 99px;
  font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--color-critical) 50%, var(--color-ink));
  background: color-mix(in srgb, var(--color-critical) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-critical) 38%, transparent); }
html[data-stile="gabry"] .g-tab-conta.d-none { display: none; }

/* Contenuto delle tab: righe di card a 16 px, tessere dentro le card a 10. */
html[data-stile="gabry"] .g-scheda-corpo .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
html[data-stile="gabry"] .g-scheda-corpo .g-card-corpo .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
html[data-stile="gabry"] .g-scheda-corpo .g-card .small { font-size: 11.5px; }
html[data-stile="gabry"] .g-scheda-corpo .g-card-titolo + .small { margin-top: 2px; }
/* Testi chiari di Bootstrap pensati per il fondo nero, e verde/ambra leggibili anche nello scuro. */
html[data-stile="gabry"] .g-scheda .text-light { color: var(--color-ink-2) !important; }
html[data-stile="gabry"] .g-scheda .text-success { color: var(--color-good) !important; }
html[data-stile="gabry"] .g-scheda .text-warning { color: var(--color-warning) !important; }
html[data-stile="gabry"] .g-scheda .imp-bassa { color: var(--color-warning); }
/* Contenitori dei grafici (GabryCharts.nuovo misura il contenitore): via se il grafico e' nascosto. */
html[data-stile="gabry"] .g-grafico:has(> canvas.d-none) { display: none; }
html[data-stile="gabry"] .g-scheda .g-grafico > canvas.mt-2 { margin-top: 0 !important; }

/* Pulsanti a gruppo (periodo, momento): il Segmented del mockup. */
html[data-stile="gabry"] .g-scheda .btn-group { gap: 2px; padding: 3px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 10%, transparent); background: color-mix(in srgb, var(--color-tint) 4%, transparent); }
html[data-stile="gabry"] .g-scheda .btn-group > .btn {
  --bs-btn-padding-x: 10px; --bs-btn-padding-y: 3px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 500;
  --bs-btn-color: var(--g-attenuato, var(--color-ink-3)); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-ink-2); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-accent); --bs-btn-active-bg: rgba(var(--theme-glow), .16); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--g-attenuato, var(--color-ink-3)); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
  margin-left: 0 !important; border-radius: 6px !important; transition: color .2s ease, background-color .2s ease; }
html[data-stile="gabry"] .g-scheda .btn-group > .btn.active { box-shadow: inset 0 0 0 1px rgba(var(--theme-glow), .3); }
html[data-stile="gabry"][data-theme="light"] .g-scheda .btn-group > .btn { --bs-btn-active-color: var(--g-accento-chiaro); }
/* Campi e interruttore della scheda (tendine inverter, giorno, confronto). */
html[data-stile="gabry"] .g-scheda .form-select-sm, html[data-stile="gabry"] .g-scheda .form-control-sm { height: 30px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12px; }
html[data-stile="gabry"] .g-scheda .form-switch .form-check-input { border-color: var(--g-bordo-campo); background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); cursor: pointer; }
html[data-stile="gabry"] .g-scheda .form-switch .form-check-input:checked { background-color: var(--color-accent-core); border-color: var(--color-accent-core); }

/* Tabelle Dispositivi e Allarmi inverter (DataTable del mockup, densa). */
html[data-stile="gabry"] .g-scheda .g-tabella { overflow-x: auto; border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; }
html[data-stile="gabry"] .g-scheda .g-tabella .table { --bs-table-bg: transparent; --bs-table-color: var(--color-ink-2);
  --bs-table-border-color: color-mix(in srgb, var(--color-tint) 5%, transparent); margin: 0; font-size: 12px; }
html[data-stile="gabry"] .g-scheda .g-tabella thead th { height: 34px; padding: 0 12px; vertical-align: middle; white-space: nowrap;
  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"] .g-scheda .g-tabella tbody td { height: 38px; padding: 0 12px; vertical-align: middle; white-space: nowrap; }
html[data-stile="gabry"] .g-scheda .g-tabella tbody tr:last-child > td { border-bottom: 0; }
html[data-stile="gabry"] .g-scheda .g-tabella tbody tr > td:first-child { font-weight: 500; color: var(--color-ink); }
html[data-stile="gabry"] .g-scheda .g-tabella td.text-end { font-variant-numeric: tabular-nums; }
html[data-stile="gabry"] .g-scheda .g-tabella tbody td.text-muted { font-weight: 400; color: var(--g-attenuato, var(--color-ink-3)); }
/* Allarme aperto (riga table-warning text-dark di oggi): tinta del tono warning, testo d'inchiostro. */
html[data-stile="gabry"] .g-scheda .g-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"] .g-scheda .g-tabella tr.table-warning > td:first-child { box-shadow: inset 2px 0 0 var(--color-warning); }
/* Allarme chiuso (energia_scheda.js, solo Stile Gabry): badge verde con la spunta, accanto ad "Aperto" (tono allarme). */
html[data-stile="gabry"] .g-scheda .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"); }

/* Panoramica: flusso di energia (nodi e frecce), barra di oggi, tessere. */
html[data-stile="gabry"] .g-scheda .pan-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-stile="gabry"] .g-scheda .pan-grande { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: var(--color-ink); }
.g-scheda .pan-flusso { position: relative; width: 640px; height: 304px; margin: 0 auto; }
html[data-stile="gabry"] .g-scheda .pan-nodo { position: absolute; display: flex; align-items: center; gap: 10px; width: 136px; height: 72px; padding: 8px 10px;
  box-sizing: border-box; border-radius: 12px; font-size: 12.5px; color: var(--color-ink); transition: opacity .3s ease;
  border: 1.5px solid var(--color-line-2); background: color-mix(in srgb, var(--color-tint) 3%, var(--color-surface)); }
html[data-stile="gabry"] .g-scheda .pan-nodo .g-icona { flex: none; color: var(--color-ink-2); }
html[data-stile="gabry"] .g-scheda .pan-nodo b { font-weight: 600; }
html[data-stile="gabry"] .g-scheda .pan-nodo .pan-valore { font-size: 14px; font-weight: 600; }
html[data-stile="gabry"] .g-scheda .pan-nodo.sole { border-color: var(--color-s5); }
html[data-stile="gabry"] .g-scheda .pan-nodo.sole .g-icona { color: var(--color-s5); }
html[data-stile="gabry"] .g-scheda .pan-nodo.casa { border-color: var(--color-ink-2); }
html[data-stile="gabry"] .g-scheda .pan-nodo.rete { border-color: var(--color-s2); }
html[data-stile="gabry"] .g-scheda .pan-nodo.rete .g-icona { color: var(--color-s2); }
/* Nodo spento (0 kW): si attenuano bordo e icona, non il testo. Con opacity .5 su tutto il nodo
   nome e valore scendevano a 3,5:1 nel chiaro e 4,4:1 nello scuro (Task 13); opacity: 1 batte
   anche la regola .pan-nodo.spento di energia/impianto.html. */
html[data-stile="gabry"] .g-scheda .pan-nodo.spento { opacity: 1; border-color: var(--color-line-2); border-style: dashed; }
html[data-stile="gabry"] .g-scheda .pan-nodo.spento .g-icona { opacity: .45; }
.g-scheda .pan-freccia { position: absolute; overflow: visible; fill: none; stroke: var(--color-axis); stroke-width: 3; stroke-linecap: round; }
.g-scheda .pan-freccia path { stroke-dasharray: 2 7; }
.g-scheda .pan-freccia.attiva path { stroke-dasharray: 10 7; animation: pan-scorre-g .9s linear infinite; }
.g-scheda .pan-freccia.sole { stroke: var(--color-s5); }
.g-scheda .pan-freccia.rete { stroke: var(--color-s2); }
@keyframes pan-scorre-g { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
/* Punte delle frecce: il CSS vince sull'attributo fill, cosi' seguono il tema. */
html[data-stile="gabry"] #pan-punta-sole path { fill: var(--color-s5); }
html[data-stile="gabry"] #pan-punta-rete path { fill: var(--color-s2); }
html[data-stile="gabry"] #pan-punta-spenta path { fill: var(--color-axis); }
.g-scheda .pan-chip { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.g-scheda .pan-chip.rete { background: var(--color-s2); }
.g-scheda .pan-chip.casa { background: var(--color-s5); }
html[data-stile="gabry"] .g-scheda .pan-tessera { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px 12px; 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"] .g-scheda .pan-tessera span { font-size: 11px; line-height: 1.35; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-scheda .pan-tessera b { font-size: 15px; font-weight: 600; color: var(--color-ink); }

/* Analisi: calendario a rampa (una tinta sola, come la Heatmap del mockup), tessere MPPT. */
.g-scheda .an-calendario { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); gap: 3px; }
.g-scheda .an-cella { width: 14px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--color-tint) 6%, transparent); }
.g-scheda .an-cella.l0 { background: var(--color-ramp-0); } .g-scheda .an-cella.l1 { background: var(--color-ramp-1); }
.g-scheda .an-cella.l2 { background: var(--color-ramp-3); } .g-scheda .an-cella.l3 { background: var(--color-ramp-4); }
.g-scheda .an-cella.l4 { background: var(--color-ramp-6); }
.g-scheda .an-cella.migliore { outline: 2px solid var(--color-s2); outline-offset: 1px; }
.g-scheda .an-mppt-riga { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
html[data-stile="gabry"] .g-scheda .an-tessera { min-width: 92px; padding: 6px 8px; border-radius: 8px; font-size: 12px; 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"] .g-scheda .an-tessera.verde { border-color: color-mix(in srgb, var(--color-good) 70%, transparent); }
html[data-stile="gabry"] .g-scheda .an-tessera.ambra { border-color: var(--color-warning); }
html[data-stile="gabry"] .g-scheda .an-tessera.rosso { border-color: var(--color-critical); }
html[data-stile="gabry"] .g-scheda .an-tessera.nessuna { opacity: .6; }
/* Elettrico: banda sotto la tessera (verde nella norma, ambra al limite, rosso fuori). */
.g-scheda .el-banda { height: 4px; margin-top: 6px; border-radius: 2px; background: color-mix(in srgb, var(--color-tint) 10%, transparent); }
.g-scheda .el-banda.verde { background: var(--color-good); }
.g-scheda .el-banda.ambra { background: var(--color-warning); }
.g-scheda .el-banda.rosso { background: var(--color-critical); }

/* Modali della scheda (mappa, planimetria, telecamere, sito): la X bianca non si vede nel chiaro. */
html[data-stile="gabry"][data-theme="light"] .modal .btn-close-white { filter: none; }
/* I modali di oggi (abbinamento ai siti, planimetria, telecamere dell'impianto) hanno colori
   cablati nel loro <style>, pensati per il fondo nero: qui presi dai token, cosi' restano
   leggibili nel chiaro (misura sul banco del Task 10: fino a 1,05:1 prima). Valgono anche
   per le altre pagine Gabry che li includono (Impianti, Siti e impianti). */
/* Solo i modali della scheda e delle Regole dei casi (Nuova regola, Conferma): altrove .text-light
   puo' stare su fondo nero (log di Stato del sistema). */
html[data-stile="gabry"] :is(#casiTelImpiantoModal, #energiaPlanimetriaModal, #energiaMappaTelecamereModal, #energiaAbbinaModal, #energiaMappaModal, #casiRegolaModal, #casiConfermaModal) .text-light:not(.bg-black) { color: var(--color-ink) !important; }
html[data-stile="gabry"] :is(#casiTelImpiantoModal, #energiaPlanimetriaModal, #energiaMappaTelecamereModal, #energiaAbbinaModal, #energiaMappaModal, #casiRegolaModal, #casiConfermaModal) .list-group-item { --bs-list-group-color: var(--color-ink); --bs-list-group-border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-colonna, .ab-lavoro) { background: color-mix(in srgb, var(--color-tint) 3%, var(--color-raised)); border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaAbbinaModal :is(h6.ab-titolo, .ab-filtri) { border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaAbbinaModal :is(h6.ab-titolo, .ab-sotto, .ab-vuoto, .ab-libero, .ab-card .ab-x) { color: var(--color-ink-2); }   /* sul fondo del modale --g-attenuato resta a 4,4:1 nello scuro */
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-voce, .ab-card, .ab-figlio) { background: color-mix(in srgb, var(--color-tint) 5%, var(--color-raised)); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-voce:hover, .ab-figlio:hover) { border-color: var(--g-bordo-campo); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-voce.abbinata, .ab-voce.nel-lavoro, .ab-figlio.scelto) { border-color: var(--color-s2); background: color-mix(in srgb, var(--color-s2) 12%, var(--color-raised)); }
html[data-stile="gabry"] #energiaAbbinaModal .ab-voce.abbinata::after, html[data-stile="gabry"] #energiaAbbinaModal .ab-piu { color: var(--color-s2); }
html[data-stile="gabry"] #energiaAbbinaModal .ab-voce.attiva { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, var(--color-raised)); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-card.video, .ab-card.sito) { border-color: var(--color-s2); }
html[data-stile="gabry"] #energiaAbbinaModal .ab-card.impianto { border-color: var(--color-warning); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-libero, .ab-piu) { border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaAbbinaModal .ab-msg-errore { color: var(--color-critical); }
html[data-stile="gabry"] #energiaAbbinaModal .ab-msg-ok { color: var(--color-good); }
html[data-stile="gabry"] #energiaPlanimetriaModal .pl-scena { background: var(--color-page); }
html[data-stile="gabry"] #energiaPlanimetriaModal :is(.pl-elenco, .pl-colonna-live, .pl-cella-testa) { background: var(--color-surface); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaPlanimetriaModal :is(#plLiveSinistra, #plLiveDestra) { border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaPlanimetriaModal .pl-elenco h6, html[data-stile="gabry"] #energiaPlanimetriaModal :is(.pl-voce .pl-togli, .pl-live-btn, .pl-carica) { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] #energiaPlanimetriaModal .pl-voce { background: color-mix(in srgb, var(--color-tint) 5%, var(--color-surface)); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaPlanimetriaModal .pl-voce.posata { border-color: var(--color-s2); }
html[data-stile="gabry"] #energiaPlanimetriaModal .pl-carica { border-color: var(--g-bordo-campo); }
/* Telecamere sulla mappa (Marco 18-10): stesse correzioni della planimetria, la mappa resta satellitare. */
html[data-stile="gabry"] #energiaMappaTelecamereModal :is(.mt-elenco, .mt-colonna-live, .mt-cella-testa) { background: var(--color-surface); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaMappaTelecamereModal :is(#mtLiveSinistra, #mtLiveDestra) { border-color: var(--color-line-2); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-elenco h6, html[data-stile="gabry"] #energiaMappaTelecamereModal :is(.mt-voce .mt-togli, .mt-voce .mt-voce-dir, .mt-live-btn, .mt-cono-riga .et) { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-voce { background: color-mix(in srgb, var(--color-tint) 5%, var(--color-surface)); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-voce.posata { border-color: var(--color-s2); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-voce.scelta { background: color-mix(in srgb, var(--color-s2) 14%, var(--color-surface)); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-cono { background: color-mix(in srgb, var(--color-tint) 3%, var(--color-surface)); border-color: var(--color-line-2); color: var(--color-ink); }
html[data-stile="gabry"] #energiaMappaTelecamereModal .mt-cono .btn-outline-secondary { color: var(--color-ink); border-color: var(--color-line-2); }

/* ── 14. Mappa, Allarmi e scheda del caso (mockup src/pages/Mappa.jsx, Alarms.jsx) ──
   Le pagine riusano i parziali di oggi: energia/_tab_mappa.html (radice #mappa-box),
   energia/_tab_casi.html (radice #energia-casi) e gli id della scheda caso di oggi.
   Qui l'aspetto, tutto sotto html[data-stile="gabry"]; le regole di energia/index.html
   e di energia/caso.html non arrivano nelle pagine Gabry. Testi grigi a --g-attenuato. */
/* Icone di gravita' e di stato dei casi (lucide, maschere come .energia-stato della sezione 12). */
html[data-stile="gabry"] { --ic-octagon: 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%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
  --ic-triangolo: 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%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ic-info: 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='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ic-barrato: 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%3Cline x1='9' x2='15' y1='15' y2='9'/%3E%3C/svg%3E");
  --ic-spunta: 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");
  --ic-campanella: 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%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M22 8c0-2.3-.8-4.3-2-6'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3Cpath d='M4 2C2.8 3.7 2 5.7 2 8'/%3E%3C/svg%3E");
  --ic-occhio: 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%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-scudo: 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%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --ic-chiave: 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%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E"); }
html[data-stile="gabry"] .energia-stato:is(.gravita-alta, .gravita-1) { --t: var(--color-critical); --icona-stato: var(--ic-octagon); }
html[data-stile="gabry"] .energia-stato.gravita-2 { --t: var(--color-serious); --icona-stato: var(--ic-triangolo); }
html[data-stile="gabry"] .energia-stato:is(.gravita-media, .gravita-3) { --t: var(--color-warning); --icona-stato: var(--ic-triangolo); }
html[data-stile="gabry"] .energia-stato:is(.gravita-bassa, .gravita-4) { --t: var(--color-s2); --icona-stato: var(--ic-info); }
html[data-stile="gabry"] .energia-stato.gravita-nessuna { --t: var(--color-ink-2); --icona-stato: var(--ic-barrato); }
html[data-stile="gabry"] .energia-stato.caso-aperto { --t: var(--color-warning); --icona-stato: var(--ic-triangolo); }
html[data-stile="gabry"] .energia-stato.caso-chiuso { --t: var(--color-good); --icona-stato: var(--ic-spunta); }
html[data-stile="gabry"] .energia-stato.caso-nuovo { --t: var(--color-serious); --icona-stato: var(--ic-campanella); }
html[data-stile="gabry"] .energia-stato.caso-visto { --t: var(--color-ink-2); --icona-stato: var(--ic-occhio); }
html[data-stile="gabry"] .energia-stato.coda-sicurezza { --t: var(--color-ink-2); --icona-stato: var(--ic-scudo); }
html[data-stile="gabry"] .energia-stato.coda-manutenzione { --t: var(--color-ink-2); --icona-stato: var(--ic-chiave); }
/* Lo stato del caso arriva in minuscolo dall'API (casi_caso.js scrive c.stato). */
html[data-stile="gabry"] #caso-stato { text-transform: capitalize; }

/* Mappa: pagina ferma alta quanto la finestra; mappa a sinistra, elenco a destra (mockup, ruling R18).
   Su schermo stretto una colonna sola: prima la mappa, sotto l'elenco (ordine del documento). */
html[data-stile="gabry"] .g-mappa-corpo, html[data-stile="gabry"] .g-allarmi-corpo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
html[data-stile="gabry"] .g-mappa-elenco .g-card-corpo { min-height: 0; }
html[data-stile="gabry"] .g-mappa-lista { max-height: 320px; margin: 0 -8px; padding: 0; list-style: none; overflow-y: auto; }
html[data-stile="gabry"] .g-mappa-voce { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; text-align: left;
  background: transparent; color: var(--color-ink-2); cursor: pointer; transition: background-color .18s ease; }
html[data-stile="gabry"] .g-mappa-voce:hover { background: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"] .g-mappa-voce.attiva { background: color-mix(in srgb, var(--color-tint) 8%, transparent); box-shadow: inset 2px 0 0 var(--color-accent); }
html[data-stile="gabry"] .g-mappa-voce-testo { flex: 1; min-width: 0; }
html[data-stile="gabry"] .g-mappa-voce-nome, html[data-stile="gabry"] .g-mappa-voce-sotto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-stile="gabry"] .g-mappa-voce-nome { font-size: 12.5px; font-weight: 500; color: var(--color-ink); }
html[data-stile="gabry"] .g-mappa-voce-sotto { margin-top: 1px; font-size: 11px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-mappa-voce .energia-stato { flex: none; }
html[data-stile="gabry"] .g-mappa-card .g-card-corpo { padding: 12px 14px 14px; }
html[data-stile="gabry"] .g-mappa-pagina .energia-mappa-box { position: relative; height: 62vh; min-height: 420px; border-radius: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); background: var(--color-page); }
/* maplibre-gl.css mette .maplibregl-map a position: relative: senza il prefisso la tela resterebbe alta 0. */
html[data-stile="gabry"] .g-mappa-pagina #mappa-energia { position: absolute; inset: 0; }
@media (min-width: 1200px) {
  html[data-stile="gabry"] .g-mappa-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
  html[data-stile="gabry"] .g-allarmi-corpo { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1200px) and (min-height: 700px) {
  html[data-stile="gabry"] :is(.g-mappa-pagina, .g-allarmi) { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] :is(.g-mappa-pagina, .g-allarmi) > .g-testata { flex: none; }
  html[data-stile="gabry"] :is(.g-mappa-corpo, .g-allarmi-corpo) { flex: 1 1 auto; min-height: 0; }
  html[data-stile="gabry"] .g-mappa-corpo > .g-card, html[data-stile="gabry"] .g-allarmi-corpo > .g-card { min-height: 0; }
  html[data-stile="gabry"] .g-mappa-lista { flex: 1 1 auto; max-height: none; min-height: 0; }
  html[data-stile="gabry"] .g-mappa-card .g-card-corpo > .d-flex { flex: none; }
  html[data-stile="gabry"] .g-mappa-pagina .energia-mappa-box { flex: 1 1 auto; height: auto; min-height: 0; }
}
/* Barra sopra la mappa: fondali come Segmented, Inquadra tutti come g-btn. */
html[data-stile="gabry"] .g-mappa-card .g-card-corpo > .d-flex { margin: 0 0 10px !important; }
html[data-stile="gabry"] #mappa-fondali { gap: 2px; padding: 3px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 10%, transparent); background: color-mix(in srgb, var(--color-tint) 4%, transparent); }
html[data-stile="gabry"] #mappa-fondali > .btn, html[data-stile="gabry"] #mappa-inquadra {
  --bs-btn-padding-x: 10px; --bs-btn-padding-y: 3px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 500;
  --bs-btn-color: var(--g-attenuato, var(--color-ink-3)); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-ink-2); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-accent); --bs-btn-active-bg: rgba(var(--theme-glow), .16); --bs-btn-active-border-color: transparent;
  margin-left: 0 !important; border-radius: 6px !important; transition: color .2s ease, background-color .2s ease; }
html[data-stile="gabry"] #mappa-fondali > .btn.active { box-shadow: inset 0 0 0 1px rgba(var(--theme-glow), .3); }
html[data-stile="gabry"][data-theme="light"] #mappa-fondali > .btn { --bs-btn-active-color: var(--g-accento-chiaro); }
html[data-stile="gabry"] #mappa-inquadra { --bs-btn-color: var(--color-ink-2); --bs-btn-hover-color: var(--color-ink); height: 30px; border: 1px solid var(--color-line) !important;
  background: color-mix(in srgb, var(--color-tint) 6%, transparent); }
html[data-stile="gabry"] .g-mappa-card .g-card-corpo > .d-flex .small { font-size: 11.5px; }
html[data-stile="gabry"] .g-mappa-card .g-card-corpo > .d-flex .text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-mappa-card #mappa-messaggio { color: var(--color-warning) !important; }
/* Avvisi sulla mappa, segnaposti a ventaglio, fumetto e pannello meteo coi token. */
html[data-stile="gabry"] .g-mappa-pagina .mappa-avviso { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 8px;
  font-size: 12.5px; color: var(--color-ink-2); background: color-mix(in srgb, var(--color-raised) 92%, transparent); border: 1px solid var(--color-line-2); }
/* In alto a sinistra: in basso a sinistra c'e' la legenda dei pallini (Marco 15-10). */
html[data-stile="gabry"] .g-mappa-pagina .mappa-senza { position: absolute; left: 8px; top: 8px; z-index: 2; max-width: 60%; padding: 4px 10px; border-radius: 6px; font-size: 11.5px;
  color: var(--color-ink-2); background: color-mix(in srgb, var(--color-raised) 92%, transparent); border: 1px solid var(--color-line); }
html[data-stile="gabry"] .g-mappa-pagina .mappa-senza a { color: var(--color-accent-ink); }
html[data-stile="gabry"][data-theme="light"] .g-mappa-pagina .mappa-senza a { color: var(--g-accento-chiaro); }
html[data-stile="gabry"] .g-mappa-pagina .mappa-ventaglio { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #1a1d21; color: #1a1d21; font: bold 14px system-ui, sans-serif; cursor: pointer; }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto .maplibregl-popup-content { padding: 10px 12px; border-radius: 10px; font-size: 12px;
  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"] .g-mappa-pagina .energia-fumetto strong { color: var(--color-ink); }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto .text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto .text-warning { color: color-mix(in srgb, var(--color-warning) 60%, var(--color-ink)) !important; }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--color-line-2); }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--color-line-2); }
html[data-stile="gabry"] .g-mappa-pagina .energia-fumetto .maplibregl-popup-close-button { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-mappa-pagina .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"] .g-mappa-pagina .mappa-meteo :is(.striscia div, .fonte, .fonte a) { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-mappa-pagina .mappa-meteo .text-info { color: var(--color-s2) !important; }
/* Scheda dell'impianto al passaggio del mouse sul pallino (Marco 15-10, mockup PlantMap.jsx SchedaMappa):
   vetro rialzato agganciato al pallino da energia_mappa.js, sotto il pannello meteo (z-index 3). */
/* Legenda coi colori dei pallini (Marco 15-10; mockup Mappa.jsx): vetro in basso a sinistra, pallino dello
   stesso colore, bordo e alone dei pallini della mappa, nome e numero degli impianti. Non prende il mouse. */
html[data-stile="gabry"] .g-mappa-legenda { position: absolute; left: 8px; bottom: 28px; z-index: 2; max-width: calc(100% - 16px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 12px; border-radius: 8px; pointer-events: none; }
html[data-stile="gabry"] .g-mappa-legenda-voce { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-ink-2); }
html[data-stile="gabry"] .g-mappa-legenda-punto { width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1.3px solid var(--color-surface); box-shadow: 0 0 4px currentColor; }
html[data-stile="gabry"] .g-mappa-legenda-n { font-weight: 600; color: var(--color-ink); }
html[data-stile="gabry"] .g-mappa-scheda { position: absolute; z-index: 2; width: max-content; min-width: 236px; max-width: 320px;
  padding: 8px 12px; border-radius: 8px; color: var(--color-ink-2); }
html[data-stile="gabry"] .g-mappa-scheda-nome { font-size: 12px; font-weight: 600; color: var(--color-ink); }
html[data-stile="gabry"] .g-mappa-scheda-sotto { margin-top: 2px; font-size: 11px; color: var(--color-ink-3); }
html[data-stile="gabry"] .g-mappa-scheda-riga, html[data-stile="gabry"] .g-mappa-scheda-azioni { display: flex; align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--color-tint) 10%, transparent); }
html[data-stile="gabry"] .g-mappa-scheda-riga { gap: 12px; margin-top: 6px; padding-top: 6px; }
/* Stato come nel mockup: icona + etichetta nel colore di stato, senza il riquadro del badge (il testo
   resta su --t-testo della regola condivisa dei badge, leggibile in entrambi i temi). */
html[data-stile="gabry"] .g-mappa-scheda .energia-stato { height: auto; gap: 4px; padding: 0; border: 0; background: none; font-size: 11px; }
html[data-stile="gabry"] .g-mappa-scheda .energia-stato::before { width: 11px; height: 11px; }
html[data-stile="gabry"] .g-mappa-scheda-valore { font-size: 11px; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
html[data-stile="gabry"] .g-mappa-scheda-allarme { margin-top: 4px; font-size: 11px; color: color-mix(in srgb, var(--color-warning) 60%, var(--color-ink)); }
html[data-stile="gabry"] .g-mappa-scheda-azioni { gap: 6px; margin-top: 8px; padding-top: 8px; }
html[data-stile="gabry"] .g-mappa-scheda-azioni .g-btn-primary { flex: 1; }
html[data-stile="gabry"][data-theme="light"] .g-mappa-pagina .btn-close-white { filter: none; }
html[data-stile="gabry"] .g-mappa-pagina .maplibregl-ctrl-group { background: var(--color-raised); border: 1px solid var(--color-line-2); box-shadow: none; }
html[data-stile="gabry"] .g-mappa-pagina .maplibregl-ctrl-group button + button { border-top-color: var(--color-line); }
html[data-stile="gabry"][data-theme="dark"] .g-mappa-pagina .maplibregl-ctrl-icon { filter: invert(1) brightness(.85); }
html[data-stile="gabry"] .g-mappa-pagina .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--color-raised) 85%, transparent); color: var(--color-ink-3); font-size: 10px; }
html[data-stile="gabry"] .g-mappa-pagina .maplibregl-ctrl-attrib a { color: var(--color-ink-2); }
html[data-stile="gabry"][data-theme="dark"] .g-mappa-pagina .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* Allarmi: le code come le schede (Tabs) del mockup, filtri a destra, tabella che scorre sotto. */
html[data-stile="gabry"] .g-allarmi-card .g-card-corpo, html[data-stile="gabry"] .g-allarmi-casi { min-height: 0; }
html[data-stile="gabry"] .g-allarmi-casi { display: flex; flex: 1 1 auto; flex-direction: column; }
html[data-stile="gabry"] .g-allarmi-casi > .d-flex:first-child { flex: none; gap: 8px 12px !important; margin: 0 0 12px !important; border-bottom: 1px solid var(--color-line); }
html[data-stile="gabry"] #casi-code { display: flex; gap: 4px; margin-bottom: -1px; }
html[data-stile="gabry"] #casi-code > .btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin: 0 !important;
  border: 0; border-radius: 0 !important; background: transparent; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--g-attenuato, var(--color-ink-3)); box-shadow: none; transition: color .2s ease; }
html[data-stile="gabry"] #casi-code > .btn:hover { color: var(--color-ink-2); }
html[data-stile="gabry"] #casi-code > .btn.active { color: var(--color-accent); }
html[data-stile="gabry"][data-theme="light"] #casi-code > .btn.active { color: var(--color-accent-ink); }
html[data-stile="gabry"] #casi-code > .btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 99px; pointer-events: none;
  background: var(--color-accent); box-shadow: 0 0 9px rgba(var(--theme-glow), .7); opacity: 0; transform: scaleX(.5);
  transition: opacity .2s ease, transform .32s cubic-bezier(.4, 0, .2, 1); }
html[data-stile="gabry"] #casi-code > .btn.active::after { opacity: 1; transform: none; }
html[data-stile="gabry"] #casi-code .badge { display: inline-grid; place-items: center; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 99px;
  font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--color-critical) 50%, var(--color-ink)) !important;
  background: color-mix(in srgb, var(--color-critical) 18%, transparent) !important; border: 1px solid color-mix(in srgb, var(--color-critical) 38%, transparent); }
html[data-stile="gabry"] #casi-code .badge.bg-warning { color: color-mix(in srgb, var(--color-warning) 50%, var(--color-ink)) !important;
  background: color-mix(in srgb, var(--color-warning) 18%, transparent) !important; border-color: color-mix(in srgb, var(--color-warning) 38%, transparent); }
html[data-stile="gabry"] #casi-code .badge.bg-secondary { color: var(--color-ink-2) !important; background: color-mix(in srgb, var(--color-tint) 10%, transparent) !important; border-color: var(--color-line-2); }
html[data-stile="gabry"][data-theme="light"] #casi-code .badge { color: color-mix(in srgb, var(--color-critical) 70%, var(--color-ink)) !important; }
html[data-stile="gabry"][data-theme="light"] #casi-code .badge.bg-warning { color: color-mix(in srgb, var(--color-warning) 45%, var(--color-ink)) !important; }
html[data-stile="gabry"][data-theme="light"] #casi-code .badge.bg-secondary { color: var(--color-ink-2) !important; }
html[data-stile="gabry"] #casi-code .badge.d-none { display: none !important; }
html[data-stile="gabry"] .g-allarmi-casi :is(.form-select-sm, .form-control-sm) { height: 30px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12px; }
html[data-stile="gabry"] .g-allarmi-casi label.text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; font-size: 12px; }
html[data-stile="gabry"] #casi-motore { color: var(--color-warning) !important; font-size: 12px; }
html[data-stile="gabry"] #energia-allarmi-filtri { gap: 8px 10px !important; margin-bottom: 12px !important; }
html[data-stile="gabry"] #energia-allarmi-filtri .form-check-input { border-color: var(--g-bordo-campo); background-color: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); cursor: pointer; }
html[data-stile="gabry"] #energia-allarmi-filtri .form-check-input:checked { background-color: var(--color-accent-core); border-color: var(--color-accent-core); }
html[data-stile="gabry"] .g-allarmi-casi .table-responsive { border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); border-radius: 8px; }
html[data-stile="gabry"] :is(#casi-tabella, #energia-allarmi-tabella) { --bs-table-bg: transparent; --bs-table-color: var(--color-ink-2);
  --bs-table-border-color: color-mix(in srgb, var(--color-tint) 5%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--color-tint) 5%, transparent); --bs-table-hover-color: var(--color-ink); margin: 0; font-size: 12px; }
html[data-stile="gabry"] :is(#casi-tabella, #energia-allarmi-tabella) thead th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 12px; vertical-align: middle; white-space: nowrap;
  font-size: 11.5px; 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"] #casi-tabella thead th[data-ordina]:hover { color: var(--color-ink); }
html[data-stile="gabry"] :is(#casi-tabella, #energia-allarmi-tabella) tbody td { height: 44px; padding: 6px 12px; vertical-align: middle; }
html[data-stile="gabry"] :is(#casi-tabella, #energia-allarmi-tabella) tbody tr:last-child > td { border-bottom: 0; }
html[data-stile="gabry"] #casi-tabella tbody td.fw-semibold, html[data-stile="gabry"] #energia-allarmi-tabella td.fw-semibold { color: var(--color-ink); font-weight: 500 !important; }
html[data-stile="gabry"] :is(#casi-tabella, #energia-allarmi-tabella) td.text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] #casi-tabella td .text-info { color: var(--color-s2) !important; }
html[data-stile="gabry"] #casi-tabella td .energia-stato { margin-right: 4px; }
/* Ultima colonna: badge e chi (visto da / chiuso da) sulla stessa riga; data e badge di gravita' senza a capo. */
html[data-stile="gabry"] #casi-tabella tbody td:is(:first-child, :nth-child(2), :last-child) { white-space: nowrap; }
/* Chi l'ha visto (casi_energia.js, span con title): tagliato con l'ellissi, altrimenti
   l'email intera (circa 160 px, non va a capo) a 1280 px fa uscire la tabella dal riquadro. */
html[data-stile="gabry"] #casi-tabella .g-caso-chi { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
/* Caso nuovo (non ancora visto): riga tinta nel tono serious con la barra a sinistra, non il rosso pieno di oggi. */
html[data-stile="gabry"] #casi-tabella tr.casi-nuovo > td { background: color-mix(in srgb, var(--color-serious) 9%, transparent); }
html[data-stile="gabry"] #casi-tabella tr.casi-nuovo > td:first-child { box-shadow: inset 2px 0 0 var(--color-serious); }
html[data-stile="gabry"] #casi-tabella tr.g-scelta > td { background: rgba(var(--theme-glow), .10); }
html[data-stile="gabry"] #casi-tabella tr.g-scelta > td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
html[data-stile="gabry"] #energia-allarmi-tabella tr.g-aperto > td:first-child { box-shadow: inset 2px 0 0 var(--color-warning); }
html[data-stile="gabry"] #energia-allarmi-pagine { gap: 8px !important; margin-top: 10px; color: var(--g-attenuato, var(--color-ink-3)); }
@media (min-width: 1200px) and (min-height: 700px) {
  html[data-stile="gabry"] .g-allarmi-casi .table-responsive { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  html[data-stile="gabry"] .g-allarmi-casi #casi-allarmi:not(.d-none) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  html[data-stile="gabry"] .g-allarmi-casi #casi-allarmi > :not(.table-responsive) { flex: none; }
}
/* Scheda di dettaglio (SchedaAllarme del mockup). */
html[data-stile="gabry"] .g-allarme-vuoto { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 12px; text-align: center; }
html[data-stile="gabry"] .g-allarme-vuoto-icona { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--color-ink-3);
  border: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-tint) 3%, transparent); }
html[data-stile="gabry"] .g-allarme-vuoto-titolo { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--color-ink); }
html[data-stile="gabry"] .g-allarme-vuoto-testo { max-width: 260px; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-allarme-dettaglio .g-card-titolo { white-space: normal; }
html[data-stile="gabry"] .g-allarme-dettaglio .g-card-sottotitolo { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-allarme-dettaglio .g-card-corpo { overflow-y: auto; }
html[data-stile="gabry"] .g-allarme-badge { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-stile="gabry"] .g-allarme-perche { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.55; color: var(--color-ink-2);
  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"] .g-allarme-dettaglio .g-coppie dt { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-allarme-dettaglio .g-coppie dd { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
html[data-stile="gabry"] .g-allarme-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Scheda del caso: testata ferma, scorre il corpo (come la scheda di oggi); card del mockup. */
@media (min-height: 700px) {
  html[data-stile="gabry"] .g-caso { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] .g-caso #caso-testa { flex: none; }
  html[data-stile="gabry"] .g-caso #caso-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
}
html[data-stile="gabry"] .g-caso .g-testata { margin-bottom: 16px; }
html[data-stile="gabry"] .g-caso .g-testata-azioni .energia-stato { height: 28px; padding: 0 9px; font-size: 12px; }
html[data-stile="gabry"] .g-caso .g-titolo { white-space: normal; }
html[data-stile="gabry"] .g-caso #caso-corpo .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
html[data-stile="gabry"] .g-caso #caso-corpo .row.g-2 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
html[data-stile="gabry"] .g-caso #caso-corpo .mb-3 { margin-bottom: 16px !important; }
html[data-stile="gabry"] .g-caso .g-card-sottotitolo { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-caso .g-card-sottotitolo strong { color: var(--color-ink); font-weight: 600; }
html[data-stile="gabry"] .g-caso .g-caso-nota { margin: 0; font-size: 12px; color: var(--g-attenuato, var(--color-ink-3)); }
/* Righe chiave/valore scritte da casi_caso.js (border-bottom border-secondary, esiti in verde/ambra). */
html[data-stile="gabry"] .g-caso :is(#caso-condizioni, #caso-contesto, #caso-eventi, #caso-diario) > div { border-color: color-mix(in srgb, var(--color-tint) 6%, transparent) !important;
  font-size: 12px; color: var(--color-ink-2); padding-top: 7px !important; padding-bottom: 7px !important; }
html[data-stile="gabry"] .g-caso :is(#caso-condizioni, #caso-contesto, #caso-eventi, #caso-diario) > div:last-child { border-bottom: 0 !important; }
html[data-stile="gabry"] .g-caso :is(#caso-condizioni, #caso-contesto, #caso-eventi, #caso-diario) .text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-caso #caso-condizioni .text-success { color: var(--color-good) !important; font-weight: 600; }
html[data-stile="gabry"] .g-caso #caso-condizioni .text-warning { color: var(--color-warning) !important; }
html[data-stile="gabry"] .g-caso #caso-condizioni .text-danger { color: var(--color-critical) !important; }
html[data-stile="gabry"][data-theme="light"] .g-caso #caso-condizioni .text-warning { color: color-mix(in srgb, var(--color-warning) 55%, var(--color-ink)) !important; }
html[data-stile="gabry"] .g-caso #caso-video-griglia .badge.bg-secondary { color: var(--color-ink-2); background: color-mix(in srgb, var(--color-tint) 10%, transparent) !important; }
html[data-stile="gabry"] .g-caso #caso-video-griglia .text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-caso #caso-video-griglia .text-info { color: var(--color-accent-ink) !important; }
html[data-stile="gabry"][data-theme="light"] .g-caso #caso-video-griglia .text-info { color: var(--g-accento-chiaro) !important; }
/* Foto (C4): miniature come la scheda di oggi; affiancate ai video la card prende l'altezza di quella Video e scorre dentro. */
@media (min-width: 992px) {
  html[data-stile="gabry"] .g-caso #caso-video-foto:has(#caso-video) .caso-colonna-foto { position: relative; }
  html[data-stile="gabry"] .g-caso #caso-video-foto:has(#caso-video) .caso-colonna-foto > #caso-foto { position: absolute; inset: 0 calc(var(--bs-gutter-x) * .5); }
  html[data-stile="gabry"] .g-caso #caso-video-foto:has(#caso-video) #caso-foto .g-caso-foto-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
html[data-stile="gabry"] .g-caso #caso-foto .gruppo { margin: 4px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-caso #caso-foto .tel { display: inline-flex; flex-direction: column; margin: 0 14px 10px 0; vertical-align: top; }
html[data-stile="gabry"] .g-caso #caso-foto .tel > span { margin-bottom: 3px; font-size: 12px; color: var(--color-ink-2); }
html[data-stile="gabry"] .g-caso #caso-foto .tel .text-muted { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-caso #caso-foto .tel .righe { display: flex; gap: 6px; }
html[data-stile="gabry"] .g-caso #caso-foto figure { margin: 0; text-align: center; cursor: pointer; }
html[data-stile="gabry"] .g-caso #caso-foto figure img { width: 128px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-line-2); transition: border-color .18s ease; }
html[data-stile="gabry"] .g-caso #caso-foto figure:hover img { border-color: rgba(var(--theme-glow), .6); }
html[data-stile="gabry"] .g-caso #caso-foto figcaption { font-size: 10.5px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-caso #caso-foto-gruppi > .text-muted { font-size: 12px; color: var(--g-attenuato, var(--color-ink-3)) !important; }
/* Pulsante primario nel chiaro: l'accento sulla card bianca fa 4,26:1 (misura sul banco, Task 11, "Apri il caso");
   col verde scuro di gabry-bootstrap.css supera 4,5. Vale per tutte le pagine Gabry (stessa scelta di R11). */
html[data-stile="gabry"][data-theme="light"] :is(.g-btn-primary, .g-btn-primary:hover) { color: var(--g-accento-chiaro); }

/* ── 15. Analisi, Report, Siti e impianti (mockup src/pages/Analytics.jsx, Reports.jsx) ──
   Le pagine riusano i parziali delle tab di oggi con `pagina_gabry`: energia/_tab_flotta.html
   (radice #energia-flotta), energia/_tab_report.html (#energia-report-box) ed
   energia/_tab_abbinamento.html (#energia-abbinamento-box, display:contents). Le regole che
   energia/index.html scrive nel suo <style> (flotta, diagramma) non arrivano nelle pagine Gabry:
   qui le stesse misure coi token del tema, tutto sotto html[data-stile="gabry"].
   Testi grigi a --g-attenuato. */
/* Pagine ferme: testata (e periodo) fermi, scorre solo il corpo; il diagramma riempie lo spazio.
   Niente su schermi bassi, come le altre pagine Gabry. */
@media (min-height: 700px) {
  html[data-stile="gabry"] :is(.g-analisi, .g-report, .g-siti) { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
  html[data-stile="gabry"] :is(.g-analisi, .g-report, .g-siti) > .g-testata { flex: none; }
  html[data-stile="gabry"] .g-analisi .g-flotta { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html[data-stile="gabry"] .g-analisi .g-flotta-barra { flex: none; }
  html[data-stile="gabry"] .g-analisi .flotta-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
  html[data-stile="gabry"] .g-report-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
  html[data-stile="gabry"] .g-siti-card { flex: 1 1 auto; min-height: 0; }
  html[data-stile="gabry"] .g-siti .energia-diagramma-box { flex: 1 1 auto; height: auto; }
}
html[data-stile="gabry"] :is(.g-analisi, .g-report) .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }

/* Analisi: periodo come il Segmented del mockup, a destra (FilterBar). */
html[data-stile="gabry"] .g-flotta-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
html[data-stile="gabry"] .g-flotta-barra .btn-group { gap: 2px; padding: 3px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 10%, transparent); background: color-mix(in srgb, var(--color-tint) 4%, transparent); }
html[data-stile="gabry"] .g-flotta-barra .btn-group > .btn {
  --bs-btn-padding-x: 10px; --bs-btn-padding-y: 3px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 500;
  --bs-btn-color: var(--g-attenuato, var(--color-ink-3)); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-ink-2); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-accent); --bs-btn-active-bg: rgba(var(--theme-glow), .16); --bs-btn-active-border-color: transparent;
  margin-left: 0 !important; border-radius: 6px !important; transition: color .2s ease, background-color .2s ease; }
html[data-stile="gabry"] .g-flotta-barra .btn-group > .btn.active { box-shadow: inset 0 0 0 1px rgba(var(--theme-glow), .3); }
html[data-stile="gabry"][data-theme="light"] .g-flotta-barra .btn-group > .btn { --bs-btn-active-color: var(--g-accento-chiaro); }
html[data-stile="gabry"] .g-flotta .g-card-sottotitolo, html[data-stile="gabry"] .g-flotta .g-card-titolo-icona { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-flotta .g-card-titolo { margin-bottom: 0; }
/* Riquadri che scorrono dentro la card (classifica, calore, tessere): nomi e date fermi. */
html[data-stile="gabry"] .g-flotta .flotta-scorre { max-height: 360px; overflow: auto; padding: 4px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); scrollbar-width: thin; scrollbar-color: var(--color-line-2) transparent; }
html[data-stile="gabry"] .g-flotta #flotta-classifica-alto { position: relative; overflow: hidden; }
html[data-stile="gabry"] .g-flotta .flotta-calore { display: grid; gap: 2px; align-items: center; font-size: 11px; }
html[data-stile="gabry"] .g-flotta .flotta-calore .nome { position: sticky; left: 0; z-index: 1; padding-right: 8px; white-space: nowrap; cursor: pointer;
  background: var(--color-surface); color: var(--color-ink-2); transition: color .18s ease; }
html[data-stile="gabry"] .g-flotta .flotta-calore .nome:hover { color: var(--color-ink); }
html[data-stile="gabry"] .g-flotta .flotta-calore .testa { position: sticky; top: 0; z-index: 2; padding-bottom: 2px; white-space: nowrap; overflow: visible; text-align: left;
  font-size: 10px; background: var(--color-surface); color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-flotta .flotta-calore .testa.nome { z-index: 3; cursor: default; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-flotta .flotta-calore .c { height: 16px; min-width: 10px; border-radius: 3px; background: color-mix(in srgb, var(--color-tint) 6%, transparent); }
/* Rampa sequenziale del tema (Heatmap del mockup), stessi passi del calendario della scheda. */
html[data-stile="gabry"] .g-flotta .flotta-calore .c.l0 { background: var(--color-ramp-0); }
html[data-stile="gabry"] .g-flotta .flotta-calore .c.l1 { background: var(--color-ramp-1); }
html[data-stile="gabry"] .g-flotta .flotta-calore .c.l2 { background: var(--color-ramp-3); }
html[data-stile="gabry"] .g-flotta .flotta-calore .c.l3 { background: var(--color-ramp-4); }
html[data-stile="gabry"] .g-flotta .flotta-calore .c.l4 { background: var(--color-ramp-6); }
html[data-stile="gabry"] .g-flotta .flotta-schermo { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
html[data-stile="gabry"] .g-flotta .flotta-tessera { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 8px;
  font-size: 12px; text-decoration: none; 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);
  transition: border-color .18s ease, background-color .18s ease; }
html[data-stile="gabry"] .g-flotta .flotta-tessera:hover { border-color: rgba(var(--theme-glow), .4); background: color-mix(in srgb, var(--color-tint) 5%, transparent); }
html[data-stile="gabry"] .g-flotta .flotta-tessera.attenzione { border-color: color-mix(in srgb, var(--color-critical) 55%, transparent);
  background: color-mix(in srgb, var(--color-critical) 7%, transparent); }
/* La tessera segue il tono del badge: in allarme (e "Resa bassa ieri" di un impianto sano) ambra, non rossa. */
html[data-stile="gabry"] .g-flotta .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"] .g-flotta .flotta-tessera b { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--color-ink); }
html[data-stile="gabry"] .g-flotta .flotta-tessera > div { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

/* Report: due card affiancate (PDF e CSV, impostazioni e logo); filetti e testi coi token. */
html[data-stile="gabry"] .g-report hr.border-secondary { margin: 18px 0; opacity: 1; border-color: color-mix(in srgb, var(--color-tint) 8%, transparent) !important; }
html[data-stile="gabry"] .g-report :is(.form-label, .form-text, p.small) { color: var(--g-attenuato, var(--color-ink-3)) !important; }
html[data-stile="gabry"] .g-report .form-label { margin-bottom: 4px; font-size: 11.5px; font-weight: 500; }
html[data-stile="gabry"] .g-report :is(.form-text, p.small) { font-size: 11.5px; }
/* Il corpo della card e' una colonna flessibile: i pulsanti restano della loro misura. */
html[data-stile="gabry"] .g-report .g-card-corpo > .g-btn { align-self: flex-start; }
html[data-stile="gabry"] .g-report :is(.form-select-sm, .form-control-sm:not(textarea):not([type="file"])) { height: 32px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12.5px; }
html[data-stile="gabry"] .g-report .g-card-titolo .g-icona { flex: none; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-report #report-logo-anteprima { border: 1px solid var(--color-line-2); }
html[data-stile="gabry"] .g-report :is(#report-messaggio, #report-impostazioni-messaggio).text-success { color: var(--color-good) !important; }
/* Errore nello scuro: il rosso pieno sulla card fa 3,6:1, un passo verso l'inchiostro come i badge. */
html[data-stile="gabry"] .g-report :is(#report-messaggio, #report-impostazioni-messaggio).text-danger { color: color-mix(in srgb, var(--color-critical) 55%, var(--color-ink)) !important; }
html[data-stile="gabry"][data-theme="light"] .g-report :is(#report-messaggio, #report-impostazioni-messaggio).text-danger { color: var(--color-critical) !important; }

/* Siti e impianti: barra sopra il diagramma; il conteggio sta nel sottotitolo della testata. */
html[data-stile="gabry"] .g-siti-card .g-card-corpo { min-height: 0; }
html[data-stile="gabry"] .g-diagramma-barra { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
html[data-stile="gabry"] .g-siti #diagramma-messaggio { margin-left: auto; font-size: 12px; color: var(--color-warning); }
html[data-stile="gabry"] .g-siti #diagramma-conteggio { display: none; }
html[data-stile="gabry"] .g-siti .energia-diagramma-box { position: relative; height: 62vh; min-height: 360px; overflow: hidden; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 7%, transparent); background: var(--color-page); }
html[data-stile="gabry"] .g-siti #diagramma-vuoto { color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-diagramma-vuoto-icona { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-tint) 8%, transparent); background: color-mix(in srgb, var(--color-tint) 3%, transparent); color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-diagramma-vuoto-titolo { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
html[data-stile="gabry"] .g-siti #diagramma-scena { position: absolute; inset: 0; cursor: grab; touch-action: none; }
html[data-stile="gabry"] .g-siti #diagramma-scena:active { cursor: grabbing; }
html[data-stile="gabry"] .g-siti #diagramma-piano { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
html[data-stile="gabry"] .g-siti #diagramma-archi { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
/* Linee: grigio degli assi (il JS mette in linea la tinta della catena); punta di base dello stesso grigio. */
html[data-stile="gabry"] .g-siti #diagramma-archi line { stroke: var(--color-axis); stroke-width: 2; marker-end: url(#dg-freccia); transition: opacity .15s; }
html[data-stile="gabry"] .g-siti #diagramma-archi line.dg-acceso { stroke-width: 3.5px; }
html[data-stile="gabry"] .g-siti #dg-freccia path { fill: var(--color-axis); }
/* Nodi: card del tema; bordo come nel modale di abbinamento (impianto nel tono warning, sito e video in s2). */
html[data-stile="gabry"] .g-siti .dg-card { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 190px; height: 58px; padding: 6px 10px; overflow: hidden; border-radius: 8px; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--color-tint) 4%, var(--color-surface)); box-shadow: var(--ombra-card); transition: opacity .15s; }
html[data-stile="gabry"] .g-siti .dg-card.impianto { border: 2px solid var(--color-warning); }
html[data-stile="gabry"] .g-siti .dg-card.video { border: 2px solid var(--color-s2); }
html[data-stile="gabry"] .g-siti .dg-card.sito { border: 3px solid var(--color-s2); }
html[data-stile="gabry"] .g-siti .dg-card.inattivo { opacity: .55; }
html[data-stile="gabry"] .g-siti :is(#diagramma-archi line.dg-spento, .dg-card.dg-spento) { opacity: .15; }
html[data-stile="gabry"] .g-siti .dg-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--color-ink); }
html[data-stile="gabry"] .g-siti .dg-nome i { width: 16px; color: var(--g-attenuato, var(--color-ink-3)); }
html[data-stile="gabry"] .g-siti .dg-pallino { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
html[data-stile="gabry"] .g-siti .dg-sotto { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--g-attenuato, var(--color-ink-3)); }
/* Pulsante di pericolo (Togli il logo): il rosso pieno sulla sua tinta fa 3,2:1 nello scuro (misura sul
   banco, Task 12); il testo fa un passo verso l'inchiostro come i badge (sezione 10). Fondo e bordo restano. */
html[data-stile="gabry"] :is(.g-btn-danger, .g-btn-danger:hover) { color: color-mix(in srgb, var(--color-critical) 55%, var(--color-ink)); }
html[data-stile="gabry"][data-theme="light"] :is(.g-btn-danger, .g-btn-danger:hover) { color: var(--color-critical); }
/* Modale "Abbina impianti ai siti" (regole della sezione 13): il "+" in s2 e le voci bloccate a
   opacita' .45 restavano sotto 4,5:1 (3,7 e 3,6 nello scuro, 3,3 e 3,0 nel chiaro; misura sul banco,
   Task 12). Il "+" fa un passo verso l'inchiostro; la voce bloccata resta piena, grigia e col cursore vietato. */
html[data-stile="gabry"] #energiaAbbinaModal .ab-piu { color: color-mix(in srgb, var(--color-s2) 60%, var(--color-ink)); }
html[data-stile="gabry"] #energiaAbbinaModal :is(.ab-voce.bloccata, .ab-figlio.bloccata) { opacity: 1; color: var(--g-attenuato, var(--color-ink-3));
  background: transparent; border-style: dashed; }
/* Frecce dello spazio di lavoro: il ciano cablato nel JS diventa la s2 del tema, come i bordi delle card. */
html[data-stile="gabry"] #energiaAbbinaModal #abbinaLinee line { stroke: var(--color-s2); }
html[data-stile="gabry"] #energiaAbbinaModal #abbinaFreccia path { fill: var(--color-s2); }