/* =========================================================================
   Stili alternativi a Oceano (si scelgono in fondo al menu, restano salvati nel browser: <html data-stile="...">).
   Non cambiano solo i colori ma anche la forma:
   - Grafite:  bianco e nero, schede morbide senza bordo, pillole, icone in cerchi grigi, voce attiva a pillola nera
   - Salvia:   barra scura con sole icone staccata dal bordo, fondo salvia, accento lime, riquadro di stato in vetro
   - Smeraldo: cornice sfumata verde-petrolio con il menu a icone, contenuto su un foglio chiaro arrotondato, elenchi pastello
   - Cobalto:  SaaS bianco e blu, icone degli indicatori in cerchi pieni a colori
   - Menta:    SaaS bianco e verde acqua, icone in cerchi tenui, voce attiva con barretta
   - Ametista: menu orizzontale in alto in una pillola scura, voce attiva viola, riquadro di stato scuro
   Caricato dopo stile.css: a parita' di regola vince questo. I grigi restano tendenti al celeste o al verde, mai neutri.
   ========================================================================= */

/* ---------- forme comuni ai tre stili ---------- */
:root:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) {
  --raggio: 22px; --raggio-piccolo: 14px;
  --ombra-1: 0 1px 2px rgba(16, 24, 32, .04), 0 12px 30px -20px rgba(16, 24, 32, .22);
  --ombra-2: 0 2px 6px rgba(16, 24, 32, .05), 0 18px 40px -22px rgba(16, 24, 32, .3);
}
:root:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) body { background: var(--bg); }
:root:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .barra {
  background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .barra .titolo-barra b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

/* schede e indicatori: niente bordo e niente filo colorato, solo ombra morbida */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .card,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .kpi { border: 0; box-shadow: var(--ombra-1); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .card[class*=" c-"]::before,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .kpi::after { display: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .card-testa { background: none; border-bottom-color: transparent; padding: 16px 18px 10px; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .card-testa h2 { font-weight: 700; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .card-testa h2 .ic { border-radius: 50%; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .kpi .riga-kpi .ic { border-radius: 50%; box-shadow: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .kpi .valore { font-weight: 750; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .chip-ic { border-radius: 50%; }

/* elenchi: righe a fascia arrotondata, senza bordo */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .righe > li { border: 0; background: var(--superficie-2); border-radius: var(--raggio-piccolo); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .righe > li:hover { background: var(--superficie-3); box-shadow: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .righe > li.sottotitolo-elenco { background: none; }

/* tabelle: righe staccate e arrotondate, intestazione senza fondo */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella { border-spacing: 0 6px; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella th { background: var(--superficie); border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 600; color: var(--testo-3); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella td { border-bottom: 0; background: var(--superficie-2); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella td:first-child { border-radius: 12px 0 0 12px; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella td:last-child { border-radius: 0 12px 12px 0; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .tabella tbody tr:hover td { background: var(--superficie-3); }

/* pulsanti, schede di sezione e filtri a pillola */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .btn { border-radius: 999px; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .btn-secondario { box-shadow: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .segmenti,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .schede-sicurezza { border: 0; border-radius: 999px; background: var(--superficie); box-shadow: var(--ombra-1); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .segmenti a,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .schede-sicurezza a { border-radius: 999px; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .conta { background: var(--superficie-3); color: var(--testo-2); }

/* riquadro di stato: chiaro, il colore dello stato solo nel bollino */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato { color: var(--testo); box-shadow: var(--ombra-1); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato::before,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato::after { display: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato h1 { color: var(--testo); font-weight: 750; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato p,
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato .meta { color: var(--testo-2); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato .meta b { color: var(--testo); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato .chip-stato { border-radius: 50%; box-shadow: none; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato.tono-verde .chip-stato { background: var(--ok); color: #fff; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato.tono-giallo .chip-stato { background: var(--attenzione); color: #fff; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato.tono-rosso .chip-stato { background: var(--pericolo); color: #fff; }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .stato.tono-grigio .chip-stato { background: var(--testo-3); color: #fff; }

/* barre di avanzamento e grafici a tinta piena */
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .barretta progress::-webkit-progress-value { background: var(--tinta); }
:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"]) .barretta progress::-moz-progress-bar { background: var(--tinta); }

/* =========================================================================
   Grafite
   ========================================================================= */
:root[data-stile="grafite"] {
  --bg: #e7eaee; --superficie: #ffffff; --superficie-2: #f3f5f7; --superficie-3: #e9edf1;
  --bordo: #e2e6eb; --bordo-forte: #c9d0d8; --testo: #121417; --testo-2: #4a515b; --testo-3: #8a929c;
  --accento: #121417; --accento-hover: #000000; --accento-tenue: #e9edf1; --accento-testo: #121417; --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(18, 20, 23, .16);
  --sfumatura-accento: linear-gradient(135deg, #30343b 0%, #0c0e11 100%);
  --tinta: #121417; --tinta-2: #8a929c;
}
:root[data-stile="grafite"][data-tema="scuro"] {
  --bg: #0d0f12; --superficie: #171a1e; --superficie-2: #1d2126; --superficie-3: #252a30;
  --bordo: #2a2f36; --bordo-forte: #3a414a; --testo: #f1f3f5; --testo-2: #aab1ba; --testo-3: #747c86;
  --accento: #f1f3f5; --accento-hover: #ffffff; --accento-tenue: #252a30; --accento-testo: #f1f3f5; --su-accento: #121417;
  --sfumatura-accento: linear-gradient(135deg, #ffffff 0%, #d5dae0 100%);
  --tinta: #f1f3f5; --tinta-2: #747c86;
}
/* le tinte delle sezioni diventano nero e grigio */
:root[data-stile="grafite"] :is(.c-blu, .c-viola, .c-verde, .c-rosso, .c-ambra, .c-ciano) { --tinta: var(--testo); --tinta-2: var(--testo-3); }
[data-stile="grafite"] .card-testa h2 .ic,
[data-stile="grafite"] .kpi .riga-kpi .ic { background: var(--superficie-3); color: var(--testo); }
[data-stile="grafite"] .btn-primario { background: var(--sfumatura-accento); color: var(--su-accento); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6); }
[data-stile="grafite"] .btn-primario:hover { background: var(--accento-hover); color: var(--su-accento); }
[data-stile="grafite"] .btn-secondario { background: transparent; border: 1.5px solid var(--testo); color: var(--testo); }
[data-stile="grafite"] .segmenti a.attivo, [data-stile="grafite"] .scegli-giorno.attivo,
[data-stile="grafite"] .schede-sicurezza a.attiva { background: var(--sfumatura-accento); color: var(--su-accento); }
[data-stile="grafite"] .stato { background: var(--superficie); }
[data-stile="grafite"] .avatar, [data-stile="grafite"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: var(--su-accento); box-shadow: none; }
[data-stile="grafite"] .sf-a1 { stop-color: #b9c0c8; } [data-stile="grafite"] .sf-a2 { stop-color: #121417; }
[data-stile="grafite"][data-tema="scuro"] .sf-a1 { stop-color: #4a515b; } [data-stile="grafite"][data-tema="scuro"] .sf-a2 { stop-color: #f1f3f5; }
[data-stile="grafite"] .sf-p1 { stop-color: #8a929c; } [data-stile="grafite"] .sf-p2 { stop-color: #121417; }
[data-stile="grafite"][data-tema="scuro"] .sf-p1 { stop-color: #4a515b; } [data-stile="grafite"][data-tema="scuro"] .sf-p2 { stop-color: #f1f3f5; }
[data-stile="grafite"] .accesso { background: var(--bg); }
@media (min-width: 960px) {
  /* menu bianco: ogni voce con l'icona in un cerchio grigio, voce attiva a pillola nera */
  :root[data-stile="grafite"] .lato { background: var(--superficie); box-shadow: none; border-right: 0; padding: 22px 16px; }
  :root[data-stile="grafite"] .lato .marchio { color: var(--testo); }
  :root[data-stile="grafite"] .lato .gruppo { color: var(--testo-3); }
  :root[data-stile="grafite"] .lato nav { gap: 6px; }
  :root[data-stile="grafite"] .lato nav a { height: 46px; padding: 0 7px; border-radius: 999px; color: var(--testo-2); }
  :root[data-stile="grafite"] .lato nav a .ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--superficie-3); color: var(--testo); }
  :root[data-stile="grafite"] .lato nav a:hover { background: var(--superficie-2); color: var(--testo); }
  :root[data-stile="grafite"] .lato nav a.attiva { background: var(--sfumatura-accento); color: var(--su-accento); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .55); }
  :root[data-stile="grafite"] .lato nav a.attiva .ic { background: var(--su-accento); color: var(--accento); }
  :root[data-stile="grafite"] .lato .server-box { background: var(--superficie-2); border: 0; color: var(--testo-2); }
  :root[data-stile="grafite"] .lato .server-box b { color: var(--testo); }
  :root[data-stile="grafite"] .lato .server-box .debole, [data-stile="grafite"] .lato .utente-lato .debole { color: var(--testo-3); }
  :root[data-stile="grafite"] .lato .btn-lato { color: var(--testo-3); }
  :root[data-stile="grafite"] .lato .btn-lato:hover { background: var(--superficie-2); color: var(--testo); }
  :root[data-stile="grafite"] .lato .piede-lato { border-top-color: var(--bordo); }
  :root[data-stile="grafite"] .lato .utente-lato { color: var(--testo); }
}

/* =========================================================================
   Salvia
   ========================================================================= */
:root[data-stile="salvia"] {
  --bg: #e3e8e1; --superficie: #ffffff; --superficie-2: #f3f6f1; --superficie-3: #e8eee5;
  --bordo: #dfe6dc; --bordo-forte: #c5d0c0; --testo: #181c17; --testo-2: #4c5649; --testo-3: #85907f;
  --accento: #8cc63f; --accento-hover: #7ab030; --accento-tenue: #eef7df; --accento-testo: #4d7c0f; --su-accento: #181c17;
  --anello: 0 0 0 3px rgba(140, 198, 63, .3);
  --sfumatura-accento: linear-gradient(135deg, #a3d65c 0%, #84c03a 100%);
  --tinta: #6aa121; --tinta-2: #a3d65c;
  --binario: #1c1f1b;
}
:root[data-stile="salvia"][data-tema="scuro"] {
  --bg: #111410; --superficie: #191d18; --superficie-2: #1f241e; --superficie-3: #272d25;
  --bordo: #2a3128; --bordo-forte: #3a4337; --testo: #eef2ea; --testo-2: #aeb8a8; --testo-3: #788272;
  --accento: #a3e635; --accento-hover: #bef264; --accento-tenue: rgba(163, 230, 53, .14); --accento-testo: #bef264; --su-accento: #10130e;
  --binario: #0a0c09;
}
:root[data-stile="salvia"] :is(.c-blu, .c-viola, .c-verde, .c-rosso, .c-ambra, .c-ciano) { --tinta: #6aa121; --tinta-2: #a3d65c; }
[data-stile="salvia"] .card-testa h2 .ic { background: transparent; box-shadow: inset 0 0 0 1px var(--bordo-forte); color: var(--testo-2); }
[data-stile="salvia"] .kpi .riga-kpi .ic { background: transparent; box-shadow: inset 0 0 0 1px var(--bordo-forte); color: var(--testo-2); }
[data-stile="salvia"] .btn-primario { background: var(--sfumatura-accento); color: var(--su-accento); box-shadow: 0 10px 20px -12px rgba(106, 161, 33, .8); }
[data-stile="salvia"] .btn-primario:hover { background: var(--accento-hover); color: var(--su-accento); }
[data-stile="salvia"] .btn-secondario { background: var(--superficie); border-color: var(--bordo-forte); }
[data-stile="salvia"] .segmenti a.attivo, [data-stile="salvia"] .scegli-giorno.attivo,
[data-stile="salvia"] .schede-sicurezza a.attiva { background: var(--binario); color: #fff; }
[data-stile="salvia"][data-tema="scuro"] .segmenti a.attivo, [data-stile="salvia"][data-tema="scuro"] .schede-sicurezza a.attiva { background: var(--accento); color: var(--su-accento); }
/* riquadro di stato in vetro su fondo salvia, titolo in maiuscolo */
[data-stile="salvia"] .stato { background: linear-gradient(135deg, #e9eee5 0%, #cfdac9 100%); }
[data-stile="salvia"][data-tema="scuro"] .stato { background: linear-gradient(135deg, #222820 0%, #1a1f19 100%); }
[data-stile="salvia"] .stato h1 { text-transform: uppercase; letter-spacing: .01em; }
[data-stile="salvia"] .stato .meta > * { background: rgba(255, 255, 255, .45); border-radius: 14px; }
[data-stile="salvia"] .avatar, [data-stile="salvia"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: var(--su-accento); box-shadow: none; }
[data-stile="salvia"] .sf-a1 { stop-color: #c7e89a; } [data-stile="salvia"] .sf-a2 { stop-color: #6aa121; }
[data-stile="salvia"] .sf-p1 { stop-color: #a3d65c; } [data-stile="salvia"] .sf-p2 { stop-color: #2f3a28; }
[data-stile="salvia"][data-tema="scuro"] .sf-p2 { stop-color: #5d7a3a; }
[data-stile="salvia"] .accesso { background: radial-gradient(700px 480px at 20% 20%, rgba(163, 214, 92, .35), transparent 62%), var(--bg); }
@media (min-width: 960px) {
  /* barra scura staccata dai bordi della finestra; aperta con i nomi, chiusa con le sole icone (pulsante in alto) */
  :root[data-stile="salvia"] .app { grid-template-columns: 250px minmax(0, 1fr); }
  :root[data-stile="salvia"][data-lato="chiuso"] .app { grid-template-columns: 96px minmax(0, 1fr); }
  :root[data-stile="salvia"] .lato { margin: 14px 0 14px 14px; border-radius: 26px; background: var(--binario); border-right: 0;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); padding: 16px 12px; }
  :root[data-stile="salvia"] .lato .marchio { color: #fff; }
  :root[data-stile="salvia"] .lato .marchio .logo { width: 34px; height: 34px; border-radius: 12px; }
  :root[data-stile="salvia"] .lato .gruppo { color: #7c8677; }
  :root[data-stile="salvia"] .lato nav { gap: 6px; }
  :root[data-stile="salvia"] .lato nav a { height: 44px; border-radius: 14px; color: #c3cabf; }
  :root[data-stile="salvia"] .lato nav a .ic { color: #c3cabf; }
  :root[data-stile="salvia"] .lato nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  :root[data-stile="salvia"] .lato nav a.attiva { background: #3a4038; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
  :root[data-stile="salvia"] .lato nav a.attiva .ic { color: var(--accento); }
  :root[data-stile="salvia"] .lato .btn-lato { color: #9aa394; }
  :root[data-stile="salvia"] .lato .btn-lato:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  :root[data-stile="salvia"] .lato .server-box { background: rgba(255, 255, 255, .06); border: 0; color: #c3cabf; }
  :root[data-stile="salvia"] .lato .server-box b, :root[data-stile="salvia"] .lato .utente-lato { color: #fff; }
  :root[data-stile="salvia"] .lato .server-box .debole, :root[data-stile="salvia"] .lato .utente-lato .debole { color: #8d9788; }
  :root[data-stile="salvia"] .lato .piede-lato { border-top-color: rgba(255, 255, 255, .1); }
  :root[data-stile="salvia"][data-lato="chiuso"] .lato { padding: 14px 8px; }
  :root[data-stile="salvia"][data-lato="chiuso"] .lato nav a { width: 46px; height: 46px; border-radius: 15px; }
}

/* =========================================================================
   Smeraldo
   ========================================================================= */
:root[data-stile="smeraldo"] {
  --bg: #f1f5f4; --superficie: #ffffff; --superficie-2: #f2f7f5; --superficie-3: #e6efec;
  --bordo: #e1ebe7; --bordo-forte: #c7d8d2; --testo: #14211e; --testo-2: #4a5d58; --testo-3: #869a94;
  --accento: #0f6e7f; --accento-hover: #0b5866; --accento-tenue: #e2f1f1; --accento-testo: #0f6e7f; --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(15, 110, 127, .2);
  --sfumatura-accento: linear-gradient(135deg, #5cbf5f 0%, #2e9a6b 50%, #0f6e7f 100%);
  --tinta: #2e9a6b; --tinta-2: #6fcf73;
  --cornice: linear-gradient(160deg, #66c466 0%, #3aa36a 45%, #157485 100%);
}
:root[data-stile="smeraldo"][data-tema="scuro"] {
  --bg: #0f1716; --superficie: #16201f; --superficie-2: #1b2726; --superficie-3: #22302e;
  --bordo: #26353a; --bordo-forte: #33474a; --testo: #ecf4f2; --testo-2: #a5b9b4; --testo-3: #6f857f;
  --accento: #4fd1a5; --accento-hover: #7ee0bf; --accento-tenue: rgba(79, 209, 165, .14); --accento-testo: #7ee0bf; --su-accento: #0b1514;
  --cornice: linear-gradient(160deg, #1f5a35 0%, #134a43 50%, #0a3440 100%);
}
/* elenchi e indicatori in colori pastello, uno per tinta di sezione */
:root[data-stile="smeraldo"] .c-blu   { --tinta: #2f80c0; --tinta-2: #7cb8e6; --pastello: #e6f1fb; }
:root[data-stile="smeraldo"] .c-viola { --tinta: #8b5cc4; --tinta-2: #c09ae6; --pastello: #f1eafb; }
:root[data-stile="smeraldo"] .c-verde { --tinta: #2e9a6b; --tinta-2: #6fcf73; --pastello: #e6f5ea; }
:root[data-stile="smeraldo"] .c-rosso { --tinta: #d0545b; --tinta-2: #f0959a; --pastello: #fcebec; }
:root[data-stile="smeraldo"] .c-ambra { --tinta: #c98a2b; --tinta-2: #f0c27a; --pastello: #fcf1e3; }
:root[data-stile="smeraldo"] .c-ciano { --tinta: #0f6e7f; --tinta-2: #4fb6c4; --pastello: #e2f1f1; }
[data-stile="smeraldo"]:not([data-tema="scuro"]) .card[class*=" c-"] .righe > li:not(.sottotitolo-elenco) { background: var(--pastello, var(--superficie-2)); }
[data-stile="smeraldo"]:not([data-tema="scuro"]) .card[class*=" c-"] .righe > li:hover { background: color-mix(in srgb, var(--pastello, var(--superficie-2)) 70%, var(--tinta) 8%); }
[data-stile="smeraldo"] .card-testa h2 .ic,
[data-stile="smeraldo"] .kpi .riga-kpi .ic { background: color-mix(in srgb, var(--tinta) 14%, transparent); color: var(--tinta); }
[data-stile="smeraldo"] .tabella tbody tr:hover td { background: #e3f4e6; }
[data-stile="smeraldo"][data-tema="scuro"] .tabella tbody tr:hover td { background: var(--superficie-3); }
[data-stile="smeraldo"] .btn-primario { background: var(--accento); color: var(--su-accento); box-shadow: 0 10px 20px -12px rgba(15, 110, 127, .8); }
[data-stile="smeraldo"] .btn-primario:hover { background: var(--accento-hover); color: var(--su-accento); }
[data-stile="smeraldo"] .segmenti a.attivo, [data-stile="smeraldo"] .scegli-giorno.attivo,
[data-stile="smeraldo"] .schede-sicurezza a.attiva { background: var(--accento); color: var(--su-accento); }
/* riquadro di stato: sfumato come la cornice, l'unico blocco a colori pieni */
[data-stile="smeraldo"] .stato { background: var(--cornice); color: #fff; }
[data-stile="smeraldo"] .stato h1, [data-stile="smeraldo"] .stato .meta b { color: #fff; }
[data-stile="smeraldo"] .stato p, [data-stile="smeraldo"] .stato .meta { color: rgba(255, 255, 255, .86); }
[data-stile="smeraldo"] .stato .chip-stato { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
[data-stile="smeraldo"] .avatar, [data-stile="smeraldo"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: none; }
[data-stile="smeraldo"] .sf-a1 { stop-color: #8fdc92; } [data-stile="smeraldo"] .sf-a2 { stop-color: #0f6e7f; }
[data-stile="smeraldo"] .sf-p1 { stop-color: #6fcf73; } [data-stile="smeraldo"] .sf-p2 { stop-color: #157485; }
[data-stile="smeraldo"] .accesso { background: var(--cornice); }
@media (min-width: 960px) {
  /* cornice sfumata con il menu (aperto con i nomi, chiuso con le sole icone); il contenuto e' un foglio chiaro arrotondato */
  :root[data-stile="smeraldo"] .app { grid-template-columns: 236px minmax(0, 1fr); background: var(--cornice); }
  :root[data-stile="smeraldo"][data-lato="chiuso"] .app { grid-template-columns: 92px minmax(0, 1fr); }
  :root[data-stile="smeraldo"] .principale { margin: 14px 14px 14px 0; border-radius: 30px; background: var(--bg); overflow: hidden;
    box-shadow: 0 24px 50px -24px rgba(5, 40, 40, .55); }
  :root[data-stile="smeraldo"] .lato { background: transparent; border-right: 0; box-shadow: none; padding: 18px 14px; }
  :root[data-stile="smeraldo"] .lato .marchio { color: #fff; }
  :root[data-stile="smeraldo"] .lato .marchio .logo { width: 36px; height: 36px; border-radius: 50%; --logo-fondo: #fff; --logo-icona: #0f6e7f; }
  :root[data-stile="smeraldo"] .lato .gruppo { color: rgba(255, 255, 255, .6); }
  :root[data-stile="smeraldo"] .lato nav { gap: 6px; }
  :root[data-stile="smeraldo"] .lato nav a { height: 44px; border-radius: 14px; color: rgba(255, 255, 255, .88); }
  :root[data-stile="smeraldo"] .lato nav a .ic { color: rgba(255, 255, 255, .9); }
  :root[data-stile="smeraldo"] .lato nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  :root[data-stile="smeraldo"] .lato nav a.attiva { background: #fff; color: #0f6e7f; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); }
  :root[data-stile="smeraldo"] .lato nav a.attiva .ic { color: #0f6e7f; }
  :root[data-stile="smeraldo"] .lato .btn-lato { color: rgba(255, 255, 255, .8); }
  :root[data-stile="smeraldo"] .lato .btn-lato:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  :root[data-stile="smeraldo"] .lato .server-box { background: rgba(255, 255, 255, .14); border: 0; color: rgba(255, 255, 255, .9); }
  :root[data-stile="smeraldo"] .lato .server-box b, :root[data-stile="smeraldo"] .lato .utente-lato { color: #fff; }
  :root[data-stile="smeraldo"] .lato .server-box .debole, :root[data-stile="smeraldo"] .lato .utente-lato .debole { color: rgba(255, 255, 255, .7); }
  :root[data-stile="smeraldo"] .lato .piede-lato { border-top-color: rgba(255, 255, 255, .2); }
  :root[data-stile="smeraldo"][data-lato="chiuso"] .lato { padding: 16px 8px; }
  :root[data-stile="smeraldo"][data-lato="chiuso"] .lato nav a { width: 46px; height: 46px; }
}

/* ---------- scelta dello stile: menu dell'icona tavolozza nella barra in alto (_macro.html bottone_stile) ---------- */
.menu-stile { display: inline-flex; position: relative; }
/* la barra in alto (effetto vetro) ha un suo livello: lo si porta sopra il contenuto, cosi' il menu non finisce sotto le schede */
.barra { position: relative; z-index: 30; }
/* sotto l'icona, allineato a destra (non fixed: il backdrop-filter della barra farebbe da riferimento al posto della finestra) */
.menu-stile .menu-stile-scelte { position: absolute; top: calc(100% + 8px); right: 0; left: auto; width: 230px; }
.menu-stile > summary { list-style: none; }
.menu-stile > summary::-webkit-details-marker { display: none; }
.menu-stile[open] > summary { background: var(--superficie-3); }
.menu-stile-scelte button { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.menu-stile-scelte .cosa { grid-column: 2; }
.menu-stile-scelte .stile-campione { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.menu-stile-scelte button[aria-pressed="true"] { background: var(--accento-tenue); }
.menu-stile-scelte button[aria-pressed="true"] b { color: var(--accento-testo); }
@media (min-width: 0) {
  .campione-oceano { background: linear-gradient(135deg, #042f3d, #0284c7 55%, #10b981); }
  .campione-grafite { background: linear-gradient(135deg, #ffffff 50%, #121417 50%); }
  .campione-salvia { background: linear-gradient(135deg, #1c1f1b 50%, #a3d65c 50%); }
  .campione-smeraldo { background: linear-gradient(160deg, #66c466, #157485); }
}

/* =========================================================================
   Cobalto e Menta: SaaS pulito. Menu laterale bianco, schede con bordo sottilissimo e ombra leggera,
   indicatori con l'icona in un cerchio (pieno in Cobalto, tenue in Menta), barre colorate per sezione.
   ========================================================================= */
:root:is([data-stile="cobalto"], [data-stile="menta"]) { --raggio: 16px; --raggio-piccolo: 11px;
  --ombra-1: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px -12px rgba(15, 23, 42, .14); }
:root:is([data-stile="cobalto"], [data-stile="menta"]) body { background: var(--bg); }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .barra { background: var(--superficie); }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .card, :root:is([data-stile="cobalto"], [data-stile="menta"]) .kpi { border-color: var(--bordo); }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .card[class*=" c-"]::before,
:root:is([data-stile="cobalto"], [data-stile="menta"]) .kpi::after { display: none; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .card-testa { background: none; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .card-testa h2 { font-weight: 650; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .kpi .riga-kpi .ic { width: 44px; height: 44px; padding: 11px; border-radius: 50%; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .chip-ic { border-radius: 50%; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .btn { border-radius: 10px; }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .barretta progress::-webkit-progress-value { background: var(--tinta); }
:root:is([data-stile="cobalto"], [data-stile="menta"]) .barretta progress::-moz-progress-bar { background: var(--tinta); }
@media (min-width: 960px) {
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato { background: var(--superficie); border-right: 1px solid var(--bordo); box-shadow: none; }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .marchio { color: var(--testo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .gruppo { color: var(--testo-3); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato nav a { color: var(--testo-2); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato nav a .ic { color: var(--testo-3); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato nav a:hover { background: var(--superficie-2); color: var(--testo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato nav a.attiva { background: var(--accento-tenue); color: var(--accento-testo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato nav a.attiva .ic { color: var(--accento); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .server-box { background: var(--accento-tenue); border: 0; color: var(--testo-2); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .server-box b { color: var(--accento-testo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato :is(.server-box .debole, .utente-lato .debole) { color: var(--testo-3); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .btn-lato { color: var(--testo-3); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .btn-lato:hover { background: var(--superficie-2); color: var(--testo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .piede-lato { border-top-color: var(--bordo); }
  :root:is([data-stile="cobalto"], [data-stile="menta"]) .lato .utente-lato { color: var(--testo); }
}

/* ---------- Cobalto: blu, icone degli indicatori in cerchi pieni a colori ---------- */
:root[data-stile="cobalto"] {
  --bg: #f4f6fb; --superficie: #ffffff; --superficie-2: #f6f8fc; --superficie-3: #eef2f9;
  --bordo: #e8edf5; --bordo-forte: #d3dbe8; --testo: #111a2e; --testo-2: #4a5670; --testo-3: #8a95ab;
  --accento: #2563eb; --accento-hover: #1d4ed8; --accento-tenue: #e8efff; --accento-testo: #1d4ed8; --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(37, 99, 235, .2);
  --sfumatura-accento: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --tinta: #2563eb; --tinta-2: #60a5fa;
}
:root[data-stile="cobalto"][data-tema="scuro"] {
  --bg: #0b1020; --superficie: #121a2e; --superficie-2: #16203a; --superficie-3: #1c2846;
  --bordo: #22304f; --bordo-forte: #2e3f66; --testo: #e8eefc; --testo-2: #a3b1cf; --testo-3: #6c7a99;
  --accento: #6aa1ff; --accento-hover: #93bbff; --accento-tenue: rgba(106, 161, 255, .14); --accento-testo: #93bbff; --su-accento: #0b1020;
}
:root[data-stile="cobalto"] .c-ambra { --tinta: #f59e0b; --tinta-2: #fbbf24; }
:root[data-stile="cobalto"] .kpi .riga-kpi .ic { color: #fff; background: linear-gradient(135deg, var(--tinta-2), var(--tinta)); box-shadow: 0 10px 18px -10px var(--tinta); }
:root[data-stile="cobalto"] .card-testa h2 .ic { border-radius: 10px; }
:root[data-stile="cobalto"] .btn-primario { background: var(--accento); color: #fff; box-shadow: 0 8px 16px -10px #2563eb; }
:root[data-stile="cobalto"] .btn-primario:hover { background: var(--accento-hover); color: #fff; }
:root[data-stile="cobalto"] :is(.segmenti a.attivo, .scegli-giorno.attivo, .schede-sicurezza a.attiva) { background: var(--accento); color: #fff; }
:root[data-stile="cobalto"] .avatar, :root[data-stile="cobalto"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: none; }
:root[data-stile="cobalto"] .sf-a1 { stop-color: #93c5fd; } :root[data-stile="cobalto"] .sf-a2 { stop-color: #2563eb; }
:root[data-stile="cobalto"] .sf-p1 { stop-color: #bfdbfe; } :root[data-stile="cobalto"] .sf-p2 { stop-color: #1d4ed8; }
:root[data-stile="cobalto"] .stato { box-shadow: 0 14px 30px -18px rgba(29, 78, 216, .55); }
:root[data-stile="cobalto"] .stato.tono-verde { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%); }
:root[data-stile="cobalto"] .accesso { background: radial-gradient(640px 440px at 15% 15%, rgba(147, 197, 253, .45), transparent 62%),
  radial-gradient(560px 420px at 90% 90%, rgba(167, 139, 250, .3), transparent 62%), var(--bg); }

/* ---------- Menta: verde acqua, icone in cerchi tenui, voce attiva con barretta ---------- */
:root[data-stile="menta"] {
  --bg: #f3f8f8; --superficie: #ffffff; --superficie-2: #f4f9f9; --superficie-3: #e8f3f2;
  --bordo: #e2eeed; --bordo-forte: #c8dcda; --testo: #0f1f24; --testo-2: #46605f; --testo-3: #849b99;
  --accento: #0d9488; --accento-hover: #0f766e; --accento-tenue: #e0f5f2; --accento-testo: #0f766e; --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(13, 148, 136, .2);
  --sfumatura-accento: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  --tinta: #0d9488; --tinta-2: #2dd4bf;
}
:root[data-stile="menta"][data-tema="scuro"] {
  --bg: #0a1415; --superficie: #111d1f; --superficie-2: #152426; --superficie-3: #1b2e30;
  --bordo: #213638; --bordo-forte: #2d4648; --testo: #e6f4f2; --testo-2: #a0bcb9; --testo-3: #6a8784;
  --accento: #2dd4bf; --accento-hover: #5eead4; --accento-tenue: rgba(45, 212, 191, .13); --accento-testo: #5eead4; --su-accento: #0a1415;
}
:root[data-stile="menta"] .c-viola { --tinta: #0891b2; --tinta-2: #67e8f9; }
:root[data-stile="menta"] .c-rosso { --tinta: #e0607e; --tinta-2: #f9a8bb; }
:root[data-stile="menta"] .kpi .riga-kpi .ic, :root[data-stile="menta"] .card-testa h2 .ic { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 13%, transparent); box-shadow: none; }
:root[data-stile="menta"] .btn-primario { background: var(--accento); color: #fff; box-shadow: 0 8px 16px -10px #0d9488; }
:root[data-stile="menta"] .btn-primario:hover { background: var(--accento-hover); color: #fff; }
:root[data-stile="menta"] :is(.segmenti a.attivo, .scegli-giorno.attivo, .schede-sicurezza a.attiva) { background: var(--accento-tenue); color: var(--accento-testo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accento) 30%, transparent); }
:root[data-stile="menta"] .avatar, :root[data-stile="menta"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: none; }
:root[data-stile="menta"] .sf-a1 { stop-color: #99f6e4; } :root[data-stile="menta"] .sf-a2 { stop-color: #0d9488; }
:root[data-stile="menta"] .sf-p1 { stop-color: #a5f3fc; } :root[data-stile="menta"] .sf-p2 { stop-color: #0e7490; }
:root[data-stile="menta"] .stato.tono-verde { background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 50%, #0d9488 100%); }
:root[data-stile="menta"] .accesso { background: radial-gradient(640px 440px at 15% 15%, rgba(94, 234, 212, .4), transparent 62%), var(--bg); }
@media (min-width: 960px) {
  :root[data-stile="menta"] .lato nav a.attiva { box-shadow: inset 3px 0 0 var(--accento); border-radius: 4px 11px 11px 4px; }
}

/* =========================================================================
   Ametista: menu orizzontale in alto (pillola scura, voce attiva viola), schede bianche grandi,
   riquadro di stato scuro con bagliore viola. Chiuso, il menu in alto mostra le sole icone.
   ========================================================================= */
:root[data-stile="ametista"] {
  --bg: #eef0f6; --superficie: #ffffff; --superficie-2: #f5f6fb; --superficie-3: #eceef7;
  --bordo: #e6e8f2; --bordo-forte: #cfd3e4; --testo: #14152a; --testo-2: #4d5170; --testo-3: #8a8eab;
  --accento: #6d5dfc; --accento-hover: #5a49f0; --accento-tenue: #efedff; --accento-testo: #5a49f0; --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(109, 93, 252, .22);
  --sfumatura-accento: linear-gradient(135deg, #8b7dff 0%, #6d5dfc 100%);
  --tinta: #6d5dfc; --tinta-2: #a59bff;
  --raggio: 20px; --raggio-piccolo: 13px;
  --ombra-1: 0 1px 2px rgba(20, 21, 42, .04), 0 12px 28px -18px rgba(20, 21, 42, .2);
  --pannello: #1f2033;
}
:root[data-stile="ametista"][data-tema="scuro"] {
  --bg: #0d0e18; --superficie: #171828; --superficie-2: #1c1d30; --superficie-3: #24263c;
  --bordo: #2a2c45; --bordo-forte: #3a3d5c; --testo: #eceefd; --testo-2: #a9acd0; --testo-3: #6f7396;
  --accento: #8b7dff; --accento-hover: #a59bff; --accento-tenue: rgba(139, 125, 255, .16); --accento-testo: #b3aaff; --su-accento: #ffffff;
  --pannello: #0a0b14;
}
:root[data-stile="ametista"] body { background: var(--bg); }
:root[data-stile="ametista"] .barra { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-stile="ametista"] .barra .titolo-barra b { font-size: 1.6rem; font-weight: 750; letter-spacing: -.025em; }
:root[data-stile="ametista"] .card, :root[data-stile="ametista"] .kpi { border: 0; box-shadow: var(--ombra-1); }
:root[data-stile="ametista"] .card[class*=" c-"]::before, :root[data-stile="ametista"] .kpi::after { display: none; }
:root[data-stile="ametista"] .card-testa { background: none; border-bottom-color: transparent; }
:root[data-stile="ametista"] .card-testa h2 { font-weight: 650; }
:root[data-stile="ametista"] :is(.c-blu, .c-viola, .c-ciano) { --tinta: #6d5dfc; --tinta-2: #a59bff; }
:root[data-stile="ametista"] .kpi .riga-kpi .ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 12%, transparent); box-shadow: none; }
:root[data-stile="ametista"] .card-testa h2 .ic { border-radius: 10px; }
:root[data-stile="ametista"] .kpi .valore { font-weight: 750; }
:root[data-stile="ametista"] .btn { border-radius: 999px; }
:root[data-stile="ametista"] .btn-primario { background: var(--accento); color: #fff; box-shadow: 0 10px 20px -12px #6d5dfc; }
:root[data-stile="ametista"] .btn-primario:hover { background: var(--accento-hover); color: #fff; }
:root[data-stile="ametista"] :is(.segmenti, .schede-sicurezza) { border: 0; border-radius: 999px; background: var(--superficie); box-shadow: var(--ombra-1); }
:root[data-stile="ametista"] :is(.segmenti a, .schede-sicurezza a) { border-radius: 999px; }
:root[data-stile="ametista"] :is(.segmenti a.attivo, .scegli-giorno.attivo, .schede-sicurezza a.attiva) { background: var(--accento); color: #fff; }
:root[data-stile="ametista"] .righe > li { border-color: transparent; background: var(--superficie-2); }
:root[data-stile="ametista"] .righe > li:hover { background: var(--accento-tenue); box-shadow: none; }
:root[data-stile="ametista"] .righe > li.sottotitolo-elenco { background: none; }
/* riquadro di stato: pannello scuro con bagliore viola, il colore dello stato nel bollino */
:root[data-stile="ametista"] .stato { background: radial-gradient(420px 220px at 90% 0%, rgba(109, 93, 252, .55), transparent 70%), var(--pannello); color: #fff; }
:root[data-stile="ametista"] .stato::before, :root[data-stile="ametista"] .stato::after { display: none; }
:root[data-stile="ametista"] .stato .chip-stato { border-radius: 14px; }
:root[data-stile="ametista"] .stato.tono-verde .chip-stato { background: #22c55e; color: #fff; }
:root[data-stile="ametista"] .stato.tono-giallo .chip-stato { background: #f59e0b; color: #fff; }
:root[data-stile="ametista"] .stato.tono-rosso .chip-stato { background: #f43f5e; color: #fff; }
:root[data-stile="ametista"] .avatar, :root[data-stile="ametista"] .nav-basso a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: none; }
:root[data-stile="ametista"] .sf-a1 { stop-color: #c7c0ff; } :root[data-stile="ametista"] .sf-a2 { stop-color: #6d5dfc; }
:root[data-stile="ametista"] .sf-p1 { stop-color: #d6d1ff; } :root[data-stile="ametista"] .sf-p2 { stop-color: #4a3ddb; }
:root[data-stile="ametista"] .barretta progress::-webkit-progress-value { background: var(--tinta); }
:root[data-stile="ametista"] .barretta progress::-moz-progress-bar { background: var(--tinta); }
:root[data-stile="ametista"] .accesso { background: radial-gradient(640px 440px at 20% 20%, rgba(139, 125, 255, .35), transparent 62%), var(--bg); }
@media (min-width: 960px) {
  :root[data-stile="ametista"] .app, :root[data-stile="ametista"][data-lato="chiuso"] .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  :root[data-stile="ametista"] .lato, :root[data-stile="ametista"][data-lato="chiuso"] .lato {
    flex-direction: row; align-items: center; gap: 14px; padding: 14px 24px 4px; overflow: visible; background: transparent; border-right: 0; box-shadow: none; min-height: 0; }
  :root[data-stile="ametista"] .lato-cima, :root[data-stile="ametista"][data-lato="chiuso"] .lato-cima { flex-direction: row; flex: none; padding: 0; gap: 4px; }
  :root[data-stile="ametista"] .lato .marchio { color: var(--testo); flex: none; }
  :root[data-stile="ametista"] .lato .btn-lato { color: var(--testo-3); }
  :root[data-stile="ametista"][data-lato="chiuso"] .lato .btn-lato { width: auto; }
  :root[data-stile="ametista"] .lato nav { flex-direction: row; flex: 0 1 auto; min-width: 0; gap: 2px; padding: 5px; border-radius: 999px; background: var(--pannello);
    overflow-x: auto; scrollbar-width: none; box-shadow: 0 12px 24px -16px rgba(20, 21, 42, .6); }
  :root[data-stile="ametista"] .lato nav::-webkit-scrollbar { display: none; }
  :root[data-stile="ametista"] .lato .gruppo, :root[data-stile="ametista"] .lato .server-box { display: none; }
  :root[data-stile="ametista"] .lato nav a { flex: none; height: 36px; padding: 0 11px; gap: 6px; border-radius: 999px; font-size: .8125rem; color: #c9cbe3; white-space: nowrap; }
  :root[data-stile="ametista"] .lato nav a .ic { width: 16px; height: 16px; color: #a3a6c9; }
  :root[data-stile="ametista"] .lato nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  :root[data-stile="ametista"] .lato nav a.attiva { background: var(--accento); color: #fff; box-shadow: 0 8px 16px -8px rgba(109, 93, 252, .9); }
  :root[data-stile="ametista"] .lato nav a.attiva .ic { color: #fff; }
  :root[data-stile="ametista"][data-lato="chiuso"] .lato nav a { width: 38px; padding: 0; margin: 0; }
  :root[data-stile="ametista"] .lato .piede-lato, :root[data-stile="ametista"][data-lato="chiuso"] .lato .piede-lato {
    flex-direction: row; margin: 0; padding: 0; border-top: 0; flex: none; }
  :root[data-stile="ametista"] .lato .utente-lato { color: var(--testo); }
  :root[data-stile="ametista"] .lato .utente-lato .debole { color: var(--testo-3); }
}

/* campioni dei nuovi stili */
@media (min-width: 0) {
  .campione-cobalto { background: linear-gradient(135deg, #ffffff 45%, #2563eb 45%); }
  .campione-menta { background: linear-gradient(135deg, #ffffff 45%, #0d9488 45%); }
  .campione-ametista { background: linear-gradient(135deg, #1f2033 50%, #6d5dfc 50%); }
}

/* =========================================================================
   Grafici: ogni stile ha la sua forma, non solo i suoi colori (pezzi disegnati da _macro.html grafico(),
   nascosti di base in stile.css). Le barre si stringono con scaleX attorno al loro centro.
   - Grafite:  barre sottili arrotondate nere su binari grigi, griglia tratteggiata, fumetto nero sul massimo
   - Salvia:   lecca-lecca (stelo sottile e pallino lime), colonna del massimo evidenziata, fumetto scuro
   - Smeraldo: curva morbida con area sfumata, pallino e fumetto sul massimo
   - Cobalto:  barre arrotondate su binari azzurri, griglia continua
   - Menta:    linea con pallini su ogni giorno e area leggera, fumetto sul massimo
   - Ametista: barre chiare arrotondate, il massimo pieno e sfumato con il fumetto viola
   ========================================================================= */
:root:not([data-stile="oceano"]) .grafico rect.asta,
:root:not([data-stile="oceano"]) .grafico rect.binario { transform-box: fill-box; transform-origin: center bottom; }
/* fumetto sul massimo (al posto dei numeri sopra ogni barra) */
:root:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"], [data-stile="menta"], [data-stile="ametista"]) .grafico .valori span { display: none; }
:root:is([data-stile="grafite"], [data-stile="salvia"], [data-stile="smeraldo"], [data-stile="menta"], [data-stile="ametista"]) .grafico .valori span.massimo {
  display: block; padding: 4px 8px; border-radius: 999px; font-size: .6875rem; color: #fff; background: var(--fumetto, var(--testo)); transform: translate(-50%, -10px);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }

/* ---------- Grafite ---------- */
[data-stile="grafite"] .grafico .griglia { display: inline; }
[data-stile="grafite"] .grafico .base { display: none; }
[data-stile="grafite"] .grafico rect.binario { display: inline; fill: var(--superficie-3); transform: scaleX(.34); rx: 3; ry: 4; }
[data-stile="grafite"] .grafico rect.asta, [data-stile="grafite"] .grafico.pericolo rect.asta { fill: var(--testo); transform: scaleX(.34); rx: 3; ry: 4; }
[data-stile="grafite"] .grafico { --fumetto: var(--testo); }
[data-stile="grafite"] .grafico .valori span.massimo { color: var(--superficie); }

/* ---------- Salvia ---------- */
[data-stile="salvia"] .grafico .griglia { display: inline; }
[data-stile="salvia"] .grafico rect.binario.massimo { display: inline; fill: var(--accento-tenue); transform: scaleX(.7); rx: 4; ry: 6; }
[data-stile="salvia"] .grafico rect.asta, [data-stile="salvia"] .grafico.pericolo rect.asta { fill: var(--bordo-forte); transform: scaleX(.05); }
[data-stile="salvia"] .grafico .punti span { display: block; width: 11px; height: 11px; background: var(--accento); box-shadow: 0 0 0 2px var(--superficie); }
[data-stile="salvia"] .grafico .punti span.massimo { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 7px color-mix(in srgb, var(--accento) 30%, transparent); }
[data-stile="salvia"] .grafico { --fumetto: var(--binario); }
[data-stile="salvia"] .grafico .valori span.massimo { transform: translate(-50%, -18px); }

/* ---------- Smeraldo ---------- */
[data-stile="smeraldo"] .grafico .griglia { display: inline; }
[data-stile="smeraldo"] .grafico rect.asta { display: none; }
[data-stile="smeraldo"] .grafico .curva-area { display: inline; fill: url(#sf-accento); opacity: .35; }
[data-stile="smeraldo"] .grafico .curva-linea { display: inline; stroke: #2e9a6b; stroke-width: 3; }
[data-stile="smeraldo"] .grafico.pericolo .curva-area { fill: url(#sf-pericolo); }
[data-stile="smeraldo"] .grafico.pericolo .curva-linea { stroke: #157485; }
[data-stile="smeraldo"] .grafico .punti span.massimo { display: block; width: 14px; height: 14px; background: var(--superficie); box-shadow: inset 0 0 0 3px #157485, 0 4px 10px -4px rgba(0, 0, 0, .4); }
[data-stile="smeraldo"] .grafico { --fumetto: #157485; }
[data-stile="smeraldo"] .grafico .valori span.massimo { transform: translate(-50%, -16px); }

/* ---------- Cobalto ---------- */
[data-stile="cobalto"] .grafico .griglia { display: inline; stroke-dasharray: none; }
[data-stile="cobalto"] .grafico rect.binario { display: inline; fill: var(--accento-tenue); transform: scaleX(.6); rx: 2.4; ry: 4; }
[data-stile="cobalto"] .grafico rect.asta { transform: scaleX(.6); rx: 2.4; ry: 4; }

/* ---------- Menta ---------- */
[data-stile="menta"] .grafico .griglia { display: inline; stroke-dasharray: none; }
[data-stile="menta"] .grafico rect.asta { display: none; }
[data-stile="menta"] .grafico .curva-area { display: inline; fill: var(--accento); opacity: .1; }
[data-stile="menta"] .grafico .curva-linea { display: inline; stroke: var(--accento); stroke-width: 2; }
[data-stile="menta"] .grafico.pericolo .curva-area { fill: #0e7490; }
[data-stile="menta"] .grafico.pericolo .curva-linea { stroke: #0e7490; }
[data-stile="menta"] .grafico .punti span { display: block; width: 9px; height: 9px; background: var(--superficie); box-shadow: inset 0 0 0 2px var(--accento); }
[data-stile="menta"] .grafico .punti span.massimo { width: 14px; height: 14px; background: var(--accento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 25%, transparent); }
[data-stile="menta"] .grafico { --fumetto: var(--accento); }
[data-stile="menta"] .grafico .valori span.massimo { transform: translate(-50%, -16px); border-radius: 6px; }

/* ---------- Ametista ---------- */
[data-stile="ametista"] .grafico .base { display: none; }
[data-stile="ametista"] .grafico rect.asta, [data-stile="ametista"] .grafico.pericolo rect.asta { fill: var(--accento); opacity: .28; transform: scaleX(.62); rx: 2.6; ry: 5; }
[data-stile="ametista"] .grafico rect.asta.massimo, [data-stile="ametista"] .grafico.pericolo rect.asta.massimo { fill: url(#sf-accento); opacity: 1; }
[data-stile="ametista"] .grafico rect.asta:hover { opacity: .6; }
[data-stile="ametista"] .grafico { --fumetto: var(--accento); }

/* ---------- andamenti di Prestazioni (curve): spessore, griglia e fondo per stile ---------- */
[data-stile="grafite"] .andamento > svg, [data-stile="ametista"] .andamento > svg { background: none; }
[data-stile="grafite"] .andamento .tratto { stroke: var(--testo); stroke-width: 1.6; }
[data-stile="grafite"] .andamento .area { opacity: .45; }
[data-stile="salvia"] .andamento .tratto { stroke: var(--binario); stroke-width: 2; }
[data-stile="salvia"] .andamento .sl-1 { stop-color: var(--accento); stop-opacity: .55; }
[data-stile="smeraldo"] .andamento .tratto { stroke-width: 3; }
[data-stile="smeraldo"] .andamento .sl-1 { stop-opacity: .6; }
[data-stile="cobalto"] .andamento .griglia, [data-stile="menta"] .andamento .griglia { stroke-dasharray: none; }
[data-stile="cobalto"] .andamento > svg { background: var(--superficie-2); }
[data-stile="menta"] .andamento .tratto { stroke-width: 2; }
[data-stile="menta"] .andamento .sl-1 { stop-opacity: .25; }
[data-stile="ametista"] .andamento .tratto { stroke-width: 2.5; }
[data-stile="ametista"] .andamento .griglia { display: none; }

/* logo: scudo scuro dove la sfumatura e' chiara (lime di Salvia, bianco di Grafite in tema scuro) */
:root[data-stile="salvia"], :root[data-stile="grafite"][data-tema="scuro"] { --logo-icona: var(--su-accento); }