/* =========================================================================
   Sentinel - sistema grafico
   Regole: la pagina non scorre mai (guscio alto quanto lo schermo, scorrono solo
   tabelle ed elenchi nelle loro schede); grigi tendenti al celeste; tema chiaro
   predefinito (lo scuro solo se scelto: <html data-tema="scuro">); sempre un minimo
   di spazio tra le voci; tutta la larghezza usata con piu' colonne.
   ========================================================================= */

:root {
  --bg: #edf2f8;
  --superficie: #ffffff;
  --superficie-2: #f5f8fc;
  --superficie-3: #e8eef6;
  --bordo: #dbe3ee;
  --bordo-forte: #c6d2e1;
  --testo: #0e1a2b;
  --testo-2: #4a5a72;
  --testo-3: #7b8ba2;
  --accento: #3d5bd9;
  --accento-hover: #3048b8;
  --accento-tenue: #e7edfd;
  --accento-testo: #3048b8;
  --su-accento: #ffffff;
  --ok: #0f9466;         --ok-tenue: #e6f6ef;
  --attenzione: #b86e0a; --attenzione-tenue: #fdf4e3;
  --pericolo: #d93636;   --pericolo-tenue: #fdecec;
  --info: #2a6fdb;       --info-tenue: #e8f1fd;
  --arancio: #ea6c1a;
  --neutro-tenue: #e8eef6;
  --ombra-1: 0 1px 2px rgba(23, 43, 77, .06);
  --ombra-2: 0 1px 3px rgba(23, 43, 77, .08), 0 1px 2px rgba(23, 43, 77, .04);
  --ombra-3: 0 14px 34px -14px rgba(23, 43, 77, .25);
  --anello: 0 0 0 3px rgba(61, 91, 217, .18);
  --raggio: 12px;
  --raggio-piccolo: 8px;
  --spazio: 16px;
  --carattere: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light;
}
:root[data-tema="scuro"] {
  --bg: #0a111d; --superficie: #111b2b; --superficie-2: #142034; --superficie-3: #1a2740;
  --bordo: #213049; --bordo-forte: #2c3e5c; --testo: #e6edf7; --testo-2: #9fb0c8; --testo-3: #6b7f9c;
  --accento: #7d97ff; --accento-hover: #a3b5ff; --accento-tenue: rgba(125, 151, 255, .14); --accento-testo: #a3b5ff;
  --su-accento: #0a111d;
  --ok: #3fd19b; --ok-tenue: rgba(63, 209, 155, .12);
  --attenzione: #f5bd4f; --attenzione-tenue: rgba(245, 189, 79, .12);
  --pericolo: #ff7b7b; --pericolo-tenue: rgba(255, 123, 123, .12);
  --info: #6aa8ff; --info-tenue: rgba(106, 168, 255, .12);
  --arancio: #ff9a56;
  --neutro-tenue: #1a2740;
  --ombra-1: none; --ombra-2: 0 1px 2px rgba(0, 0, 0, .4); --ombra-3: 0 16px 40px -12px rgba(0, 0, 0, .65);
  --anello: 0 0 0 3px rgba(125, 151, 255, .28);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }     /* regola 1: la pagina non scorre mai */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--testo);
  font: 14.5px/1.5 var(--carattere); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
  transition: background-color .2s ease, color .2s ease;
}
a { color: var(--accento-testo); text-decoration: none; }
a:hover { color: var(--accento-hover); }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.375rem; font-weight: 650; }
h2 { font-size: .95rem; font-weight: 600; }
p { margin: 0; }
code { font: .85em ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--superficie-3); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.numeri { font-variant-numeric: tabular-nums; }
.tenue { color: var(--testo-2); }
.debole { color: var(--testo-3); }
.piccolo { font-size: .8125rem; }
.spazio-sopra { margin-top: 12px; }
.senza-margine { margin: 0 0 10px; font-size: 1rem; font-weight: 650; }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- guscio dell'app ---------- */
/* Fisso ai bordi della finestra e non 100vh: nella PWA su Android 100vh conta anche lo spazio sotto la barra di sistema,
   e la barra in basso finiva coperta (con 3 pulsanti) o fuori schermo (a gesti). */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.lato { display: none; }
.principale { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.barra {
  flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px;
  background: var(--superficie); border-bottom: 1px solid var(--bordo);
}
.barra .marchio-mobile { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--testo); }
.barra .titolo-barra { display: none; }
.barra .azioni-barra { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.logo { width: 28px; height: 28px; }

/* l'unica zona che puo' scorrere e' il contenuto, quando non entra (telefono, finestre basse) */
.contenuto { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 28px; overscroll-behavior: contain; }

.nav-basso { flex: none; display: flex; gap: 2px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--bordo); }
.nav-basso a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border-radius: 10px; font-size: .6875rem; font-weight: 550; color: var(--testo-3); }
.nav-basso a .ic { width: 21px; height: 21px; }
.nav-basso a.attiva { color: var(--accento-testo); background: var(--accento-tenue); }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transition: grid-template-columns .2s ease; }
  .lato { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--superficie); border-right: 1px solid var(--bordo); padding: 16px 12px; gap: 4px; }
  .lato-cima { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; }
  .lato .marchio { display: flex; align-items: center; gap: 10px; padding: 2px 8px; font-weight: 650; font-size: 1.05rem; color: var(--testo); flex: 1; min-width: 0; }
  .lato .marchio-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lato .btn-lato { flex: none; color: var(--testo-3); }
  .lato .btn-lato .ic { transform: rotate(180deg); transition: transform .2s ease; }
  .lato nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; }
  .lato .gruppo { font-size: .6875rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-3); padding: 14px 10px 4px; }
  .lato nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--raggio-piccolo); color: var(--testo-2); font-weight: 550; font-size: .875rem; }
  .lato nav a .voce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lato nav a:hover { background: var(--superficie-3); color: var(--testo); }
  .lato nav a.attiva { background: var(--accento-tenue); color: var(--accento-testo); }
  .lato .server-box { border: 1px solid var(--bordo); background: var(--superficie-2); border-radius: var(--raggio); padding: 12px; font-size: .8125rem; display: flex; flex-direction: column; gap: 2px; }
  .lato .server-box b { color: var(--testo); font-weight: 600; font-size: .875rem; }
  .lato .piede-lato {
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--bordo);
    display: flex; align-items: center; gap: 8px;
  }
  .lato .utente-lato { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: .8125rem; color: var(--testo-2); }
  .lato .utente-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra { padding: 0 24px; height: 60px; }
  .barra .marchio-mobile { display: none; }
  .barra .titolo-barra { display: flex; flex-direction: column; line-height: 1.2; }
  .barra .titolo-barra b { font-size: 1rem; font-weight: 650; color: var(--testo); }
  .barra .titolo-barra span { font-size: .75rem; color: var(--testo-3); }
  .nav-basso { display: none; }
  .contenuto { padding: 20px 24px; }

  /* sidebar compressa: solo icone */
  html[data-lato="chiuso"] .app { grid-template-columns: 72px minmax(0, 1fr); }
  html[data-lato="chiuso"] .lato { padding: 12px 8px; align-items: stretch; }
  html[data-lato="chiuso"] .lato-cima { flex-direction: column; gap: 6px; }
  html[data-lato="chiuso"] .lato .marchio { justify-content: center; padding: 2px 0; }
  html[data-lato="chiuso"] .lato .marchio-testo,
  html[data-lato="chiuso"] .lato .gruppo,
  html[data-lato="chiuso"] .lato .voce,
  html[data-lato="chiuso"] .lato .server-box,
  html[data-lato="chiuso"] .lato .utente-meta,
  html[data-lato="chiuso"] .lato .testo-esci { display: none; }
  html[data-lato="chiuso"] .lato .btn-lato { width: 100%; }
  html[data-lato="chiuso"] .lato .btn-lato .ic { transform: rotate(0deg); }
  html[data-lato="chiuso"] .lato nav a { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
  html[data-lato="chiuso"] .lato .piede-lato { flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }
  html[data-lato="chiuso"] .lato .utente-lato { justify-content: center; flex: none; }
}

/* ---------- pagine: colonna di sezioni con spazio fisso ---------- */
.pagina { display: flex; flex-direction: column; gap: var(--spazio); }
.pagina-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pagina-testa .intro { color: var(--testo-2); max-width: 760px; margin-top: 4px; }

/* Su schermi grandi la pagina riempie esattamente l'altezza: le schede "riempi" si allungano
   e il loro contenuto ".scorre" scorre dentro la scheda, mai la pagina. */
@media (min-width: 960px) and (min-height: 640px) {
  .pagina.piena { height: 100%; min-height: 0; }
  .pagina.piena > .area { flex: 1; min-height: 0; }
  .pagina.piena > .area-ip-3 { flex: 1; min-height: 0; }
}
.area { display: grid; gap: var(--spazio); min-height: 0; }
.colonna { display: flex; flex-direction: column; gap: var(--spazio); min-height: 0; min-width: 0; }

/* ---------- schede ---------- */
.card { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-1); min-width: 0; display: flex; flex-direction: column; }
.card.riempi { flex: 1; min-height: 0; }
.card-corpo { padding: 16px; }
.card-testa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bordo); }
.card-testa h2 { display: flex; align-items: center; gap: 8px; }
.card-testa h2 .ic { color: var(--testo-3); }
.card-testa .lato-destro { font-size: .8125rem; color: var(--testo-3); white-space: nowrap; }
.conta { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--superficie-3); color: var(--testo-2); font-size: .75rem; font-weight: 600; }
.scorre { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.card.riempi > .scorre { flex: 1; }
.card.riempi > .elenco-con-stati { flex: 1; min-height: 0; }
@media (max-width: 959px) { .scorre { max-height: 62vh; } }

/* barre di scorrimento sottili con bagliore come le icone accento */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accento) 55%, transparent) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accento) 75%, #fff), var(--accento));
  border-radius: 99px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accento) 55%, transparent),
              0 0 2px color-mix(in srgb, var(--accento) 80%, transparent);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accento-hover), var(--accento));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accento) 70%, transparent);
}
*::-webkit-scrollbar-corner { background: transparent; }
:root[data-tema="scuro"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a3b5ff, #7d97ff);
  box-shadow: 0 0 10px rgba(125, 151, 255, .55), 0 0 2px rgba(163, 181, 255, .8);
}

/* stato generale */
.stato { flex-direction: row; gap: 14px; align-items: center; padding: 16px; }
.stato .chip-stato { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.stato .chip-stato .ic { width: 23px; height: 23px; }
.stato .testi { min-width: 0; }
.stato h1 { font-size: 1.125rem; }
.stato p { margin-top: 3px; color: var(--testo-2); font-size: .875rem; }
.stato .meta { margin-left: auto; text-align: right; font-size: .75rem; color: var(--testo-3); white-space: nowrap; }
.stato .meta b { display: block; color: var(--testo-2); font-size: .8125rem; }
@media (max-width: 599px) { .stato .meta { display: none; } }
.tono-verde .chip-stato { background: var(--ok-tenue); color: var(--ok); }
.tono-giallo .chip-stato { background: var(--attenzione-tenue); color: var(--attenzione); }
.tono-rosso .chip-stato { background: var(--pericolo-tenue); color: var(--pericolo); }
.tono-grigio .chip-stato { background: var(--neutro-tenue); color: var(--testo-3); }
.tono-rosso { border-color: color-mix(in srgb, var(--pericolo) 35%, var(--bordo)); }

/* indicatori numerici */
.kpi-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .kpi-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spazio); } }
.kpi { display: flex; flex-direction: column; gap: 4px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; box-shadow: var(--ombra-1); color: var(--testo); min-width: 0; transition: border-color .15s, box-shadow .15s; }
a.kpi:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra-2); color: var(--testo); }
.kpi .riga-kpi { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--testo-2); font-size: .8125rem; font-weight: 550; }
.kpi .riga-kpi .ic { color: var(--testo-3); width: 17px; height: 17px; }
.kpi .valore { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .nota { font-size: .75rem; color: var(--testo-3); }
.kpi.pericolo .valore { color: var(--pericolo); }
.kpi.ok .valore { color: var(--ok); }

/* elenchi: voci separate da spazio (regola 4) */
.righe { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.righe > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); min-width: 0; }
.righe > li:hover { border-color: var(--bordo-forte); background: var(--superficie-2); }
.chip-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--superficie-3); color: var(--testo-2); }
.chip-ic .ic { width: 17px; height: 17px; }
.chip-ic.ok { background: var(--ok-tenue); color: var(--ok); }
.chip-ic.pericolo, .chip-ic.critico { background: var(--pericolo-tenue); color: var(--pericolo); }
.chip-ic.attenzione, .chip-ic.alto, .chip-ic.medio { background: var(--attenzione-tenue); color: var(--attenzione); }
.chip-ic.info, .chip-ic.basso { background: var(--info-tenue); color: var(--info); }
.chip-ic.accento { background: var(--accento-tenue); color: var(--accento-testo); }
.righe .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.righe .titolo { font-weight: 550; font-size: .875rem; color: var(--testo); overflow-wrap: anywhere; }
.righe .sotto { font-size: .8125rem; color: var(--testo-2); overflow-wrap: anywhere; }
.righe .destra { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .75rem; color: var(--testo-3); white-space: nowrap; }
.righe .azioni-riga { display: flex; gap: 6px; margin-left: auto; }
.righe .azioni-riga form { margin: 0; }
@media (max-width: 599px) {
  .righe > li { align-items: flex-start; }
  .righe > li.con-azioni { flex-wrap: wrap; }
  .righe > li.con-azioni .azioni-riga { width: 100%; }
  .righe > li.con-azioni .azioni-riga form, .righe > li.con-azioni .azioni-riga .btn { flex: 1; width: 100%; }
}
.suggerimento { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; font-size: .8125rem; color: var(--testo-2); background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); }
.suggerimento .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--attenzione); }
.sottotitolo-elenco { font-size: .6875rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-3); padding: 6px 4px 0; }

/* tabelle: intestazione fissa, scorrono nella loro scheda (anche in orizzontale) */
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.tabella th { position: sticky; top: 0; z-index: 1; background: var(--superficie-2); text-align: left; font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-3); padding: 10px 14px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 10px 14px; border-bottom: 1px solid var(--bordo); white-space: nowrap; color: var(--testo); vertical-align: middle; }
.tabella td.a-capo { white-space: normal; min-width: 280px; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover td { background: var(--superficie-2); }
.tabella .cella-ic { display: inline-flex; align-items: center; gap: 8px; }
.tabella .cella-ic .ic { width: 16px; height: 16px; color: var(--testo-3); }

/* etichette */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .75rem; font-weight: 550; white-space: nowrap; background: var(--neutro-tenue); color: var(--testo-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.semplice::before { display: none; }
.badge.ok { background: var(--ok-tenue); color: var(--ok); }
.badge.pericolo, .badge.critico { background: var(--pericolo-tenue); color: var(--pericolo); }
.badge.attenzione, .badge.medio { background: var(--attenzione-tenue); color: var(--attenzione); }
.badge.alto { background: color-mix(in srgb, var(--arancio) 13%, transparent); color: var(--arancio); }
.badge.info, .badge.basso { background: var(--info-tenue); color: var(--info); }
.badge.accento { background: var(--accento-tenue); color: var(--accento-testo); }
.solo-mobile { display: none; }
@media (max-width: 599px) {
  .solo-mobile { display: inline-flex; align-self: flex-start; margin-bottom: 4px; }
  span.solo-mobile:not(.badge) { display: inline; margin: 0; }
  .solo-schermo-largo { display: none !important; }
}

/* stato di una protezione */
.spunta { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.spunta .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.spunta.ok { background: var(--ok-tenue); color: var(--ok); }
.spunta.no { background: var(--pericolo-tenue); color: var(--pericolo); }

/* filtri a segmenti */
.segmenti { display: inline-flex; gap: 4px; padding: 4px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); max-width: 100%; overflow-x: auto; }
.segmenti a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: calc(var(--raggio) - 4px); font-size: .85rem; font-weight: 550; color: var(--testo-2); white-space: nowrap; }
.segmenti a:hover { color: var(--testo); }
.segmenti a.attivo { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-2); }
.scegli-giorno { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 10px; border-radius: 7px; color: var(--testo-2); }
.scegli-giorno .ic { flex: none; }
.scegli-giorno input { height: 26px; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: .8125rem; font-weight: 550; color-scheme: light dark; }
.scegli-giorno.attivo { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-2); }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.punto.critico { background: var(--pericolo); } .punto.alto { background: var(--arancio); } .punto.medio { background: var(--attenzione); } .punto.basso { background: var(--info); }

/* grafico */
.grafico { padding: 16px 16px 12px; display: flex; flex-direction: column; }
.grafico svg { display: block; width: 100%; height: 150px; flex: none; }
/* la tela tiene un margine in alto per la quantità sopra la barra più alta */
.grafico .tela { position: relative; display: flex; flex-direction: column; padding-top: 16px; flex: none; }
.grafico .valori { position: absolute; left: 0; right: 0; top: 16px; bottom: 0; pointer-events: none; }
.grafico .valori span { position: absolute; transform: translate(-50%, -3px); font-size: .625rem; font-weight: 600; line-height: 1; color: var(--testo-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* nelle schede che riempiono l'altezza il grafico si allunga, senza mai superare la scheda */
.card.riempi .grafico { flex: 1; min-height: 0; }
.card.riempi .grafico .tela { flex: 1 1 0; min-height: 0; }
.card.riempi .grafico svg { flex: 1 1 0; height: auto; min-height: 100px; }
.grafico rect { fill: var(--accento); opacity: .85; transition: opacity .15s; }
.grafico rect:hover { opacity: 1; }
.grafico.pericolo rect { fill: var(--pericolo); opacity: .75; }
.grafico .base { stroke: var(--bordo-forte); stroke-width: .4; }
.grafico .assi { display: flex; font-size: .6875rem; color: var(--testo-3); margin-top: 8px; font-variant-numeric: tabular-nums; }
.grafico .assi span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.nota-scheda { padding: 0 16px 14px; font-size: .8125rem; color: var(--testo-3); }

/* classifiche */
.classifica > li { display: block; }
.classifica .riga { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; }
.classifica .riga span { overflow-wrap: anywhere; color: var(--testo); }
.classifica .riga b { font-weight: 650; font-variant-numeric: tabular-nums; }
.barretta { height: 6px; border-radius: 99px; background: var(--superficie-3); margin-top: 7px; overflow: hidden; }
.barretta progress { display: block; width: 100%; height: 6px; appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
.barretta progress::-webkit-progress-bar { background: transparent; }
.barretta progress::-webkit-progress-value { background: var(--pericolo); border-radius: 99px; }
.barretta progress::-moz-progress-bar { background: var(--pericolo); border-radius: 99px; }

/* tessere (pagina Altro) */
.tessere { display: grid; gap: 12px; }
@media (min-width: 640px) { .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tessera { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-1); color: var(--testo); }
.tessera:hover { border-color: var(--bordo-forte); color: var(--testo); box-shadow: var(--ombra-2); }
.tessera b { display: block; font-weight: 600; font-size: .9rem; }
.tessera span { font-size: .8125rem; color: var(--testo-2); }
.tessera > .ic { margin-left: auto; color: var(--testo-3); }

/* ---------- pulsanti ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; font: inherit; font-size: .8125rem; font-weight: 600; border-radius: 9px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:focus-visible { outline: none; box-shadow: var(--anello); }
.btn .ic { width: 16px; height: 16px; }
.btn-primario { background: var(--accento); color: var(--su-accento); box-shadow: var(--ombra-1); }
.btn-primario:hover { background: var(--accento-hover); color: var(--su-accento); }
.btn-secondario { background: var(--superficie); color: var(--testo); border-color: var(--bordo-forte); box-shadow: var(--ombra-1); }
.btn-secondario:hover { background: var(--superficie-3); color: var(--testo); }
.btn-pericolo { background: var(--pericolo-tenue); color: var(--pericolo); }
.btn-pericolo:hover { background: var(--pericolo); color: #fff; }
.btn-fantasma { background: transparent; color: var(--testo-2); }
.btn-fantasma:hover { background: var(--superficie-3); color: var(--testo); }
.btn-icona { width: 38px; padding: 0; }
.btn-piccolo { height: 32px; padding: 0 11px; font-size: .78rem; }
.btn-blocco { width: 100%; height: 44px; font-size: .9rem; }
.btn-esci .testo-esci { display: none; }
@media (min-width: 640px) { .btn-esci .testo-esci { display: inline; } }

/* interruttore tema: luna nel chiaro, sole nello scuro */
.tema-scuro-ic { display: none; }
:root[data-tema="scuro"] .tema-scuro-ic { display: inline; }
:root[data-tema="scuro"] .tema-chiaro-ic { display: none; }

.utente-chip { display: none; align-items: center; gap: 8px; font-size: .8125rem; color: var(--testo-2); padding: 0 4px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accento-tenue); color: var(--accento-testo); font-weight: 650; font-size: .8125rem; text-transform: uppercase; }
@media (min-width: 640px) { .utente-chip.solo-mobile { display: inline-flex; } }
@media (min-width: 960px) { .azioni-barra .solo-mobile { display: none !important; } }

/* ---------- moduli ---------- */
.campo { margin-bottom: 14px; }
label { display: block; font-size: .8125rem; font-weight: 600; color: var(--testo); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=email], input[type=number], select {
  width: 100%; height: 42px; padding: 0 13px; font: inherit; font-size: 1rem; color: var(--testo);
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 9px; box-shadow: var(--ombra-1); transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 960px) { input[type=text], input[type=password], input[type=email], input[type=number], select { font-size: .9rem; } }
input::placeholder { color: var(--testo-3); }
input:focus, select:focus { outline: none; border-color: var(--accento); box-shadow: var(--anello); }
select { cursor: pointer; }
input.codice { height: 56px; font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .45em; }
.aiuto { font-size: .75rem; color: var(--testo-3); margin-top: 6px; }
.riga-modulo { display: flex; flex-direction: column; gap: 10px; }
.due-campi { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .riga-modulo { flex-direction: row; align-items: center; } .riga-modulo input, .riga-modulo select { flex: 1; } .due-campi { grid-template-columns: 1fr 1fr; } }
.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 46px; }
.mostra-password { position: absolute; top: 0; right: 0; height: 100%; width: 44px; border: 0; background: none; color: var(--testo-3); cursor: pointer; display: grid; place-items: center; border-radius: 0 9px 9px 0; }
.mostra-password:hover { color: var(--testo); }
.mostra-password svg { width: 19px; height: 19px; fill: currentColor; }

/* messaggi */
.msg { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--raggio-piccolo); font-size: .8125rem; border: 1px solid transparent; }
.msg .ic { width: 17px; height: 17px; }
.msg.errore { background: var(--pericolo-tenue); color: var(--pericolo); border-color: color-mix(in srgb, var(--pericolo) 22%, transparent); }
.msg.ok { background: var(--ok-tenue); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.msg.info { background: var(--info-tenue); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.messaggi { display: flex; flex-direction: column; gap: 8px; }
.messaggi:empty { display: none; }

.vuoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--testo-3); padding: 26px 16px; font-size: .8125rem; flex: 1; }
.vuoto .chip-ic { width: 42px; height: 42px; border-radius: 12px; }

.ip-grande { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 12px; }
.mio-ip { display: flex; flex-direction: column; gap: 6px; min-width: min(100%, 260px); max-width: 340px; padding: 10px 14px; flex: none; }
.mio-ip-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mio-ip-valore { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.mio-ip-azioni { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.mio-ip-azioni input { flex: 1; height: 32px; font-size: .8125rem; }
.riga-ip-cima { display: flex; flex-wrap: wrap; gap: var(--spazio); align-items: stretch; flex: none; }
.riga-ip-cima > .riga-aggiungi { flex: 1; min-width: min(100%, 420px); }
.riga-aggiungi { padding: 12px 16px; }
.form-aggiungi-ip { display: grid; gap: 10px 14px; align-items: end; }
.form-aggiungi-ip .campo { margin: 0; }
@media (min-width: 720px) {
  .form-aggiungi-ip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
}
.area-ip-3 { display: grid; gap: var(--spazio); grid-template-columns: 1fr; min-height: 0; flex: 1; }
@media (min-width: 1100px) {
  .area-ip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.area-ip-3 > .card { min-height: 0; }
.area-ip-3 .azioni-riga { flex-wrap: nowrap; align-items: center; }
.riga-pending { background: color-mix(in srgb, var(--accento) 6%, transparent); }
.sync-cd { font-weight: 500; opacity: .85; }
.pagina.piena > .card.in-corso { flex: none; }
.c-rosso { --tinta: #f43f5e; --tinta-2: #fb7185; }
.in-corso { border-color: color-mix(in srgb, var(--accento) 40%, var(--bordo)); }
.ruota { animation: ruota 1.4s linear infinite; }
@keyframes ruota { to { transform: rotate(360deg); } }

/* ---------- disposizioni delle pagine su schermi grandi ---------- */
@media (min-width: 960px) {
  .area-pano { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
               grid-template-areas: "dafare accessi" "grafico avvisi"; }
  .area-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .area-lista { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .area-utenti { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .area-utenti .zona-account-utenti { min-height: 0; align-self: stretch; }
  .area-utenti .zona-account-utenti > .card { height: 100%; }
}
@media (min-width: 1400px) {
  .pagina .testa-pano { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.75fr); gap: var(--spazio); }
  .testa-pano .kpi-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .area-pano { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
               grid-template-areas: "dafare grafico accessi" "dafare avvisi accessi"; }
  .area-3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.testa-pano { display: flex; flex-direction: column; gap: var(--spazio); }
.zona-dafare { grid-area: dafare; } .zona-grafico { grid-area: grafico; } .zona-accessi { grid-area: accessi; } .zona-avvisi { grid-area: avvisi; }
@media (max-width: 959px) { .zona-dafare, .zona-grafico, .zona-accessi, .zona-avvisi { grid-area: auto; } }

/* ---------- pagine di accesso (unica eccezione: possono scorrere su schermi molto bassi) ---------- */
.accesso { height: 100%; overflow: auto; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(1100px 480px at 50% -10%, var(--accento-tenue), transparent 70%), var(--bg); }
.accesso .scheda { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.accesso .testa { text-align: center; margin-bottom: 6px; }
.accesso .testa .logo { width: 48px; height: 48px; }
.accesso .testa h1 { margin-top: 14px; font-size: 1.3rem; }
.accesso .testa p { margin-top: 6px; color: var(--testo-2); font-size: .875rem; }
.accesso .card { padding: 22px; box-shadow: var(--ombra-3); display: block; }
.accesso .tema-angolo { position: fixed; top: 14px; right: 14px; }
.accesso .piede { text-align: center; font-size: .8125rem; }
.passi { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.passi span { width: 32px; height: 4px; border-radius: 99px; background: var(--bordo-forte); }
.passi span.fatto { background: var(--accento); }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 200px; margin: 6px auto 14px; border: 1px solid var(--bordo); }
.qr svg { display: block; width: 100%; height: auto; }
.segreto { font: .95rem ui-monospace, Consolas, monospace; text-align: center; background: var(--superficie-3); border-radius: var(--raggio-piccolo); padding: 10px; overflow-wrap: anywhere; letter-spacing: .04em; }
ol.istruzioni { padding-left: 1.1rem; margin: 0 0 14px; color: var(--testo-2); font-size: .875rem; display: flex; flex-direction: column; gap: 6px; }
ol.istruzioni b { color: var(--testo); }
.kpi-griglia.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .kpi-griglia.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.righe > li.sottotitolo-elenco, .righe > li.sottotitolo-elenco:hover { border: 0; background: none; padding: 8px 4px 0; display: block; }
.card.peso-2 { flex: 2; }
/* pagina Attacchi: grafico e tabella a sinistra, classifiche a destra */
@media (min-width: 960px) {
  .area-attacchi { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
                   grid-template-areas: "grafico ip" "tabella utenti"; }
  .area-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  .area-attacchi { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "grafico ip utenti" "tabella ip utenti"; }
  .area-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.zona-ip { grid-area: ip; } .zona-utenti { grid-area: utenti; } .zona-tabella { grid-area: tabella; }
@media (max-width: 959px) { .zona-ip, .zona-utenti, .zona-tabella { grid-area: auto; } }
.kpi .valore.piccolo-valore { font-size: 1.15rem; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* voci con titolo + etichetta sulla stessa riga e dettagli sotto a tutta larghezza */
.righe > li.voce-alta { align-items: flex-start; }
.righe > li.voce-alta > .chip-ic { margin-top: 1px; }
.testa-voce { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.testa-voce .badge { margin-top: 1px; }
@media (min-width: 1400px) { .testa-pano .stato .meta { display: none; } }

/* attivita' pianificate */
@media (min-width: 960px) {
  .area-attivita { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2.2fr) minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .area-attivita { grid-template-columns: minmax(0, 2.6fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 1fr); }
}
.elenco-con-stati { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.elenco-con-stati > .scorre { flex: 1; min-height: 0; }
.filtro-stato { display: flex; align-items: center; }
/* filtro nella testa della scheda: pillola nello stesso colore del conteggio accanto */
.filtro-stato select {
  width: auto; max-width: min(200px, 46vw); height: 28px; margin: 0;
  padding: 0 30px 0 12px; border-radius: 99px; font-size: .8125rem; font-weight: 600;
  color: var(--tinta); background-color: color-mix(in srgb, var(--tinta) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tinta) 28%, transparent); box-shadow: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.filtro-stato select:hover { background-color: color-mix(in srgb, var(--tinta) 16%, transparent); }
.filtro-stato select:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 22%, transparent); }
.filtro-stato option { color: var(--testo); background: var(--superficie); font-weight: 500; }
.kpi-griglia.cinque .scheda-comandi { grid-column: 1 / -1; justify-content: space-between; gap: 10px; }
@media (min-width: 1200px) { .kpi-griglia.cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-griglia.cinque .scheda-comandi { grid-column: auto; } }
.scheda-comandi .controllo-adesso { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; line-height: 1.3; }
.scheda-comandi .comandi-server { display: flex; flex-wrap: wrap; gap: 8px; }
.card-testa-azioni { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn-icona.btn-piccolo { width: 32px; padding: 0; }
.azioni-tabella { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.azioni-tabella form { margin: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.testo-pericolo { color: var(--pericolo); }
.testo-limitato { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dettagli { display: flex; flex-direction: column; gap: 12px; }
.dettagli > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.blocco-codice { display: block; padding: 8px 10px; white-space: pre-wrap; word-break: break-all; line-height: 1.45; }
.nascosto { display: none !important; }
.righe.senza-bordo { padding: 8px 0 0; }
.pulsanti-push { justify-content: flex-start; flex-wrap: wrap; }

/* =========================================================================
   Tema vivace: colori di sezione, menu blu notte, stato sfumato, profondita
   ========================================================================= */
:root {
  --bg: #e9eff9;
  --ombra-1: 0 1px 2px rgba(23, 43, 90, .06), 0 6px 16px -10px rgba(23, 43, 90, .18);
  --ombra-2: 0 2px 4px rgba(23, 43, 90, .08), 0 12px 24px -12px rgba(23, 43, 90, .28);
  --tinta: #4f46e5; --tinta-2: #818cf8;
  --sfumatura-accento: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #7c3aed 100%);
}
:root[data-tema="scuro"] { --bg: #080d18; --ombra-1: 0 1px 2px rgba(0, 0, 0, .45); --ombra-2: 0 8px 24px -10px rgba(0, 0, 0, .7); }

.c-blu   { --tinta: #2563eb; --tinta-2: #60a5fa; }
.c-viola { --tinta: #7c3aed; --tinta-2: #a78bfa; }
.c-verde { --tinta: #059669; --tinta-2: #34d399; }
.c-rosso { --tinta: #e11d48; --tinta-2: #fb7185; }
.c-ambra { --tinta: #d97706; --tinta-2: #fbbf24; }
.c-ciano { --tinta: #0891b2; --tinta-2: #22d3ee; }

/* sfondo con profondita leggera */
body {
  background:
    radial-gradient(1100px 620px at 105% -12%, rgba(99, 102, 241, .14), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(14, 165, 233, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-tema="scuro"] body {
  background:
    radial-gradient(1100px 620px at 105% -12%, rgba(99, 102, 241, .16), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(14, 165, 233, .10), transparent 60%),
    var(--bg);
}
.barra { background: color-mix(in srgb, var(--superficie) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* menu laterale blu notte */
@media (min-width: 960px) {
  .lato { background: linear-gradient(180deg, #1e1b4b 0%, #272270 55%, #312e81 100%); border-right: 0; box-shadow: 4px 0 24px -12px rgba(30, 27, 75, .5); }
  :root[data-tema="scuro"] .lato { background: linear-gradient(180deg, #0c0a24 0%, #15124a 60%, #1e1b4b 100%); }
  .lato .marchio { color: #fff; }
  .lato .gruppo { color: rgba(199, 210, 254, .5); }
  .lato nav a { color: #c7d2fe; }
  .lato nav a .ic { color: #a5b4fc; }
  .lato nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .lato nav a.attiva { background: linear-gradient(90deg, rgba(129, 140, 248, .35), rgba(129, 140, 248, .12)); color: #fff; box-shadow: inset 3px 0 0 #a5b4fc; }
  .lato nav a.attiva .ic { color: #fff; }
  .lato .server-box { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #c7d2fe; }
  .lato .server-box b { color: #fff; }
  .lato .server-box .debole { color: rgba(199, 210, 254, .7); }
  .lato .btn-lato { color: rgba(199, 210, 254, .7); }
  .lato .btn-lato:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  .lato .piede-lato { border-top-color: rgba(255, 255, 255, .12); }
  .lato .utente-lato { color: #c7d2fe; }
  .lato .utente-lato .debole { color: rgba(199, 210, 254, .65); }
}

/* barra in basso del telefono: voce attiva sfumata */
.nav-basso a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: 0 6px 14px -8px #4f46e5; }

/* riquadro di stato a colori pieni */
.stato { position: relative; overflow: hidden; border: 0; color: #fff; }
.stato::before, .stato::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.stato::before { width: 260px; height: 260px; right: -70px; top: -120px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); }
.stato::after { width: 180px; height: 180px; right: 120px; bottom: -110px; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); }
.stato.tono-verde { background: linear-gradient(135deg, #10b981 0%, #059669 55%, #0d9488 100%); }
.stato.tono-giallo { background: linear-gradient(135deg, #f59e0b 0%, #f97316 60%, #ea580c 100%); }
.stato.tono-rosso { background: linear-gradient(135deg, #fb7185 0%, #e11d48 55%, #be123c 100%); }
.stato.tono-grigio { background: linear-gradient(135deg, #64748b 0%, #475569 60%, #334155 100%); }
.stato h1 { color: #fff; }
.stato p, .stato .meta { color: rgba(255, 255, 255, .86); }
.stato .meta b { color: #fff; }
.stato .chip-stato, .tono-verde .chip-stato, .tono-giallo .chip-stato, .tono-rosso .chip-stato, .tono-grigio .chip-stato {
  background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.stato.card { box-shadow: 0 14px 30px -16px rgba(23, 43, 90, .45); }

/* indicatori: bollino colorato sfumato e alone */
.kpi { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--tinta) 14%, var(--bordo)); }
.kpi::after { content: ""; position: absolute; width: 170px; height: 170px; right: -60px; top: -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 18%, transparent), transparent 70%); }
.kpi .riga-kpi .ic { width: 36px; height: 36px; padding: 9px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--tinta-2), var(--tinta)); box-shadow: 0 8px 16px -8px var(--tinta); position: relative; z-index: 1; }
.kpi .valore { position: relative; z-index: 1; }
a.kpi:hover { border-color: color-mix(in srgb, var(--tinta) 40%, var(--bordo)); }

/* schede: filo colorato in alto e icona del titolo in un bollino */
.card { position: relative; overflow: hidden; }
.card[class*=" c-"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--tinta), var(--tinta-2)); z-index: 2; }
.card-testa h2 .ic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 13%, transparent); }
.card-testa { background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 5%, transparent), transparent); }

/* righe: al passaggio, filo colorato a sinistra */
.righe > li { position: relative; }
.righe > li:hover { border-color: color-mix(in srgb, var(--tinta) 35%, var(--bordo)); box-shadow: inset 3px 0 0 var(--tinta); }

/* tessere della pagina Altro */
.tessera .chip-ic.accento { background: linear-gradient(135deg, var(--tinta-2), var(--tinta)); color: #fff; box-shadow: 0 8px 16px -8px var(--tinta); }
.tessera:hover { border-color: color-mix(in srgb, var(--tinta) 40%, var(--bordo)); }

/* pulsanti principali e filtro attivo sfumati */
.btn-primario { background: var(--sfumatura-accento); color: #fff; box-shadow: 0 8px 18px -10px #4f46e5; }
.btn-primario:hover { background: linear-gradient(135deg, #4f46e5, #4338ca 60%, #6d28d9); color: #fff; }
.segmenti a.attivo, .scegli-giorno.attivo { background: var(--accento-tenue); color: var(--accento-testo); box-shadow: none; }  /* come le schede (.schede-sicurezza) */
.avatar { background: var(--sfumatura-accento); color: #fff; }

/* etichette un po piu sature */
.badge.ok { background: color-mix(in srgb, #10b981 16%, transparent); }
.badge.pericolo, .badge.critico { background: color-mix(in srgb, #f43f5e 15%, transparent); }
.badge.attenzione, .badge.medio { background: color-mix(in srgb, #f59e0b 18%, transparent); }
.badge.info, .badge.basso { background: color-mix(in srgb, #3b82f6 15%, transparent); }
.conta { background: color-mix(in srgb, var(--tinta) 14%, transparent); color: var(--tinta); }

/* grafici e barre sfumati */
.grafico rect { fill: url(#sf-accento); opacity: 1; }
.grafico.pericolo rect { fill: url(#sf-pericolo); opacity: 1; }
.grafico rect:hover { filter: brightness(1.12); }
.sf-a1 { stop-color: #a5b4fc; } .sf-a2 { stop-color: #4f46e5; }
.sf-p1 { stop-color: #fda4af; } .sf-p2 { stop-color: #e11d48; }
.barretta progress::-webkit-progress-value { background: linear-gradient(90deg, var(--tinta-2), var(--tinta)); }
.barretta progress::-moz-progress-bar { background: linear-gradient(90deg, var(--tinta-2), var(--tinta)); }

/* pagina di accesso: sfondo a macchie di colore */
.accesso {
  background:
    radial-gradient(620px 420px at 12% 18%, rgba(99, 102, 241, .38), transparent 62%),
    radial-gradient(520px 420px at 88% 26%, rgba(236, 72, 153, .22), transparent 62%),
    radial-gradient(680px 520px at 55% 108%, rgba(14, 165, 233, .28), transparent 62%),
    var(--bg);
}
.accesso .card { border-color: rgba(255, 255, 255, .6); background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* telefono: etichetta sopra il titolo nelle voci con titolo + etichetta */
@media (max-width: 599px) {
  .testa-voce { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
}
/* tabelle piu' compatte sugli schermi medi, cosi' entrano tutte le colonne */
@media (max-width: 1599px) {
  .area-attivita .tabella th, .area-attivita .tabella td { padding: 9px 10px; }
  .area-attivita .testo-limitato { max-width: 220px; }
}
.area-attivita .scorre { overflow-x: hidden; overflow-y: auto; }
.area-attivita .tabella { table-layout: fixed; width: 100%; }
.area-attivita .tabella th,
.area-attivita .tabella td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
.area-attivita .tabella td.a-capo { min-width: 0; }
.area-attivita .tabella th:nth-child(1),
.area-attivita .tabella td:nth-child(1) { width: 22%; }
.area-attivita .tabella th:nth-child(2),
.area-attivita .tabella td:nth-child(2) { width: 18%; }
.area-attivita .tabella th:nth-child(3),
.area-attivita .tabella td:nth-child(3) { width: 8%; }
.area-attivita .tabella th:nth-child(4),
.area-attivita .tabella td:nth-child(4) { width: 10%; }
.area-attivita .tabella th:nth-child(5),
.area-attivita .tabella td:nth-child(5) { width: 14%; }
.area-attivita .tabella th:nth-child(6),
.area-attivita .tabella td:nth-child(6) { width: 16%; }
.area-attivita .tabella th:nth-child(7),
.area-attivita .tabella td:nth-child(7) { width: 12%; }
.area-attivita .badge { height: auto; min-height: 22px; white-space: normal; line-height: 1.25; padding: 3px 9px; max-width: 100%; }
.area-attivita .badge-multilinea { display: inline-flex; flex-wrap: wrap; align-items: center; }
.area-attivita .azioni-tabella { flex-wrap: wrap; justify-content: flex-start; }
.riga-pending .badge.info { white-space: normal; }

/* ---------- pagina Prestazioni ---------- */
@media (min-width: 960px) {
  .area-prestazioni { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
                      grid-template-areas: "andamento stato" "andamento processi"; }
}
@media (min-width: 1400px) {
  .area-prestazioni { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
                      grid-template-areas: "andamento stato processi"; }
}
.zona-andamento { grid-area: andamento; } .zona-stato { grid-area: stato; } .zona-processi { grid-area: processi; }
@media (max-width: 959px) { .zona-andamento, .zona-stato, .zona-processi { grid-area: auto; } }
/* colonna di stato: i servizi si prendono lo spazio e scorrono, dischi e sistema restano interi */
.zona-stato > .card:not(.riempi), .zona-processi > .card:not(.riempi) { flex: none; }
.zona-stato > .card.riempi, .zona-processi > .card.riempi { min-height: 160px; }
.righe.servizi > li { padding: 8px 10px; gap: 10px; }
.righe.servizi .chip-ic { width: 30px; height: 30px; }
.tabella-processi { table-layout: fixed; }
.tabella-processi .col-ram { width: 86px; } .tabella-processi .col-cpu { width: 58px; }
.tabella-processi th, .tabella-processi td { padding: 9px 10px; }
.tabella-processi td.cella-processo { white-space: normal; overflow-wrap: anywhere; }
.tabella-processi .barretta { max-width: none; }
@media (min-width: 960px) and (min-height: 640px) {
  .zona-stato, .zona-processi { overflow: auto; }
}
@media (min-width: 960px) and (max-width: 1399px) { .area-prestazioni .scheda-sistema { display: none; } }

.andamenti { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 12px; }
.andamento { flex: 1 1 0; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
.andamento-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .8125rem; flex-wrap: wrap; }
.andamento-testa .nome { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--testo); }
.andamento-testa .nome .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--tinta-2), var(--tinta)); }
.andamento-testa .cifre b { font-size: 1.05rem; color: var(--tinta); }
.andamento > svg { display: block; width: 100%; flex: 1 1 0; min-height: 60px; border-radius: 8px;
  background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.andamento .griglia { stroke: var(--bordo); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.andamento .tratto { fill: none; stroke: var(--tinta); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.andamento .sl-1 { stop-color: var(--tinta-2); stop-opacity: .45; }
.andamento .sl-2 { stop-color: var(--tinta-2); stop-opacity: .03; }
.andamenti .assi { display: flex; font-size: .6875rem; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.andamenti .assi span { flex: 1 1 0; text-align: center; white-space: nowrap; }
@media (max-width: 959px) { .andamento { min-height: 130px; } }

.barretta.attenzione progress::-webkit-progress-value { background: linear-gradient(90deg, #fbbf24, #d97706); }
.barretta.attenzione progress::-moz-progress-bar { background: linear-gradient(90deg, #fbbf24, #d97706); }
.barretta.pericolo progress::-webkit-progress-value { background: linear-gradient(90deg, #fb7185, #e11d48); }
.barretta.pericolo progress::-moz-progress-bar { background: linear-gradient(90deg, #fb7185, #e11d48); }
.testo-ok { color: var(--ok); } .testo-attenzione { color: var(--attenzione); }
.tabella .barretta { margin-top: 5px; max-width: 220px; }

.dati-sistema { margin: 0; padding: 12px 16px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: .8125rem; }
.dati-sistema dt { color: var(--testo-3); }
.dati-sistema dd { margin: 0; color: var(--testo); overflow-wrap: anywhere; }
.dati-utente { margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: .8125rem; }
.dati-utente dt { color: var(--testo-3); }
.dati-utente dd { margin: 0; color: var(--testo); overflow-wrap: anywhere; }

.account-compatti { gap: 8px; }
.righe.account-compatti > li.voce-account {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 10px 12px; border-radius: var(--raggio-piccolo);
  border: 1px solid var(--bordo); background: var(--superficie-2);
}
.righe.account-compatti > li.voce-account.sospeso { opacity: .78; }
.account-cima { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-titolo { flex: 1; min-width: 0; }
.account-titolo .sotto { margin-top: 2px; font-size: .75rem; line-height: 1.35; }
.account-cima .azioni-riga { margin-left: 0; flex: none; flex-wrap: nowrap; }
.account-modifica {
  display: grid; gap: 8px; align-items: end;
  grid-template-columns: 1fr;
}
.account-modifica .campo { margin: 0; }
.account-modifica input, .account-modifica select { height: 32px; font-size: .8125rem; }
@media (min-width: 720px) {
  .account-modifica { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(110px, .7fr) minmax(0, 1fr) auto; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* barra di caricamento al cambio pagina (app.js) */
html.in-caricamento::after {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #818cf8, #4f46e5, #22d3ee); transform-origin: 0 50%;
  animation: caricamento 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes caricamento { from { transform: scaleX(0); } 60% { transform: scaleX(.7); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { html.in-caricamento::after { animation: none; transform: scaleX(.6); } }

/* ---------- pagina Aggiornamenti ---------- */
@media (min-width: 960px) {
  .area-aggiornamenti { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); grid-template-rows: minmax(0, 1fr); }
}
.zona-agg-elenchi > .card:not(.riempi), .zona-agg-lato > .card:not(.riempi) { flex: none; }
.zona-agg-elenchi > .card.riempi, .zona-agg-lato > .card.riempi { min-height: 180px; }
.scheda-da-installare { max-height: 38%; }
.scheda-da-installare .scorre { min-height: 0; }
.tabella-aggiornamenti { table-layout: fixed; }
.tabella-aggiornamenti .col-data { width: 118px; } .tabella-aggiornamenti .col-esito { width: 150px; }
.tabella td.a-capo-libero { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .tabella-aggiornamenti .col-data { width: 84px; } .tabella-aggiornamenti .col-esito { width: 104px; }
  .tabella-aggiornamenti th, .tabella-aggiornamenti td { padding: 9px 8px; }
}

/* righe dei servizi: nome sempre leggibile, comandi e stato in coda vanno a capo se lo spazio non basta */
.righe.servizi > li { flex-wrap: wrap; }
.righe.servizi .corpo { flex: 1 1 140px; }
.righe.servizi > li.riga-pending .azioni-riga { width: 100%; justify-content: flex-end; align-items: center; margin-left: 0; }
.righe.servizi .azioni-riga .badge { height: auto; min-height: 24px; white-space: normal; }

/* ---------- pagina Backup ---------- */
@media (min-width: 960px) {
  .area-backup { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); grid-template-rows: minmax(0, 1fr); }
}
.zona-backup-lato > .card:not(.riempi) { flex: none; }
.zona-backup-lato > .card.riempi { min-height: 160px; }
.tabella-backup { table-layout: fixed; }
.tabella-backup .col-giorno { width: 104px; } .tabella-backup .col-allegati { width: 190px; } .tabella-backup .col-stato { width: 200px; }
.tabella-backup td { white-space: normal; }
.riga-barra { display: flex; justify-content: space-between; gap: 8px; }
.cella-barra .barretta { margin-top: 6px; }
@media (max-width: 599px) {
  .tabella-backup .col-giorno { width: 66px; } .tabella-backup .col-allegati { width: 84px; } .tabella-backup .col-stato { width: 96px; }
  .tabella-backup th, .tabella-backup td { padding: 9px 8px; }
}
@media (max-width: 599px) { .tabella-backup .solo-largo { display: none; } }
.comando-aggiorna { padding: 4px 12px 14px; font-size: .8125rem; color: var(--testo-2); display: flex; flex-direction: column; gap: 6px; }
.comando-aggiorna code { display: block; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; user-select: all; }
.zona-agg-lato > .scheda-librerie { min-height: 220px; }

/* pagina di stato pubblica */
.stato-pubblico .scheda { max-width: 520px; }
.stato-globale { width: 56px; height: 56px; border-radius: 16px; display: inline-grid; place-items: center; color: #fff; }
.stato-globale .ic { width: 28px; height: 28px; }
.stato-globale.ok { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 10px 22px -10px #059669; }
.stato-globale.pericolo { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 22px -10px #e11d48; }
.stato-pubblico .card { padding: 6px; }

/* Sicurezza app: schede per applicazione cliccabili (filtrano la tabella) */
.kpi-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi-link:hover { transform: translateY(-1px); }
.kpi-link.attiva { outline: 2px solid var(--accento); outline-offset: -2px; }
.tabella-sicurezza { table-layout: fixed; width: 100%; }
.tabella-sicurezza td { white-space: normal; vertical-align: top; }
.tabella-sicurezza .col-gravita { width: 96px; }
.tabella-sicurezza .col-app { width: 150px; }
.tabella-sicurezza .col-dove { width: 230px; }
.tabella-sicurezza td.numeri { word-break: break-all; }
.tabella-sicurezza tr.debole td { opacity: .6; }
@media (max-width: 760px) {
  .tabella-sicurezza .col-app, .tabella-sicurezza .col-dove { width: auto; }
}

/* Sicurezza: schede Controllo generale / Checklist */
.testata-sicurezza { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.testata-sicurezza .controllo-adesso { display: flex; align-items: center; gap: 10px; }
.schede-sicurezza { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--raggio); background: var(--superficie); border: 1px solid var(--bordo); }
.schede-sicurezza a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: calc(var(--raggio) - 4px); color: var(--testo-2); text-decoration: none; font-size: .85rem; font-weight: 550; }
.schede-sicurezza a.attiva { background: var(--accento-tenue); color: var(--accento-testo); }
.filtri-checklist { display: flex; gap: 6px; flex-wrap: wrap; }


/* Richieste a Claude */
.area-richieste { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 1100px) { .area-richieste { grid-template-columns: minmax(0, 1fr); } }
.testo-claude { width: 100%; box-sizing: border-box; font-family: var(--font-mono, Consolas, monospace); font-size: .8rem; line-height: 1.5; padding: 10px; border: 1px solid var(--bordo); border-radius: calc(var(--raggio) - 4px); background: var(--superficie-2, var(--superficie)); color: var(--testo); resize: vertical; }
.azioni-richieste { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.azioni-richieste form { margin: 0; }
.tabella-richieste { table-layout: fixed; width: 100%; }
.tabella-richieste td { white-space: normal; vertical-align: top; }
.tabella-richieste .col-codice { width: 80px; }
.tabella-richieste .col-stato-r { width: 130px; }
.tabella-richieste .col-azioni-r { width: 84px; }
.tabella-richieste tr.debole td { opacity: .6; }
.riga-azioni { display: flex; gap: 2px; margin: 0; }

/* =====================================================================
   Checklist sicurezza (stile ripreso dalla pagina Sicurezza di Irenstorm)
   ===================================================================== */
.ck { gap: 14px; }
.ck-app { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-app-voce { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 12px; background: var(--superficie);
  border: 1px solid var(--bordo); color: var(--testo-2); text-decoration: none; font-size: .85rem; font-weight: 550; box-shadow: var(--ombra-1); }
.ck-app-voce b { color: var(--testo); }
.ck-app-voce:hover { border-color: var(--accento); }
.ck-app-voce.attiva { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.ck-app-voce.attiva b { color: var(--su-accento); }
.ck-app-pct { font-variant-numeric: tabular-nums; opacity: .85; }
.ck-app-alte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pericolo); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.ck-kpi-griglia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ck-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--superficie);
  border: 1px solid var(--bordo); box-shadow: var(--ombra-1); color: var(--testo); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.ck-kpi:hover { transform: translateY(-1px); }
.ck-kpi.attiva { border-color: var(--accento); }
.ck-kpi > i { width: 44px; height: 44px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; }
.ck-kpi > i svg { width: 20px; height: 20px; }
.ck-kpi b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ck-kpi span { font-size: .8rem; color: var(--testo-2); font-weight: 600; }
.ck-kpi small { display: block; font-size: .7rem; color: var(--testo-2); }
.ck-kpi.verde > i { background: var(--ok-tenue); color: var(--ok); }
.ck-kpi.blu > i { background: var(--info-tenue); color: var(--info); }
.ck-kpi.grigio > i { background: var(--neutro-tenue); color: var(--testo-2); }
.ck-kpi.rosso > i { background: var(--pericolo-tenue); color: var(--pericolo); }
.ck-kpi.rosso b { color: var(--pericolo); }
.ck-anello { --p: 0; width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--neutro-tenue) 0); }
.ck-anello b { width: 40px; height: 40px; border-radius: 50%; background: var(--superficie); display: flex; align-items: center; justify-content: center; font-size: .75rem !important; }

.ck-filtri { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-chip-gruppo { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra-1); flex-wrap: wrap; }
.ck-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 9px; font-size: .8rem; font-weight: 600; color: var(--testo-2); text-decoration: none; }
.ck-chip svg { width: 13px; height: 13px; }
.ck-chip:hover { background: var(--neutro-tenue); color: var(--testo); }
.ck-chip.attiva { background: var(--accento); color: var(--su-accento); }
.ck-chip.rischio-critico.attiva, .ck-chip.rischio-alto.attiva { background: var(--pericolo); color: #fff; }
.ck-chip.rischio-medio.attiva { background: var(--attenzione); color: #fff; }
.ck-chip.rischio-basso.attiva { background: var(--ok); color: #fff; }
.ck-azzera { background: var(--superficie); border: 1px solid var(--bordo); }
.ck-categoria { margin: 0; }
.ck-categoria select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo); }

.ck-card { padding: 16px 18px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra-1); min-width: 0; }
.ck-card-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--testo); }
.ck-lettera { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 7px; background: var(--accento-tenue); color: var(--accento-testo); font-size: .8rem; }
.ck-lettera svg { width: 14px; height: 14px; }
.ck-card-app { padding: 2px 7px; border-radius: 6px; background: var(--neutro-tenue); color: var(--testo-2); font-size: .72rem; }
.ck-card-cnt { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--testo-2); text-transform: none; letter-spacing: 0; }

.ck-voce { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--bordo); }
.ck-card-tit + .ck-voce { border-top: none; }
.ck-voce > details { flex: 1; min-width: 0; }
.ck-voce summary { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; cursor: pointer; list-style: none; }
.ck-voce summary::-webkit-details-marker { display: none; }
.ck-voce summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-right: 2px solid var(--testo-2); border-bottom: 2px solid var(--testo-2); transform: rotate(-45deg); transition: transform .15s; }
.ck-voce details[open] summary::before { transform: rotate(45deg); }
.ck-codice { flex: 0 0 84px; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 800; color: var(--accento-testo); font-variant-numeric: tabular-nums; }
.ck-copia { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--testo-3); cursor: pointer; opacity: .6; transition: opacity .15s, background .15s; }
.ck-copia .ic { width: 13px; height: 13px; }
.ck-copia:hover, .ck-copia:focus-visible { opacity: 1; background: var(--bordo); color: var(--testo); }
.ck-copia.copiato { opacity: 1; color: var(--ok); }
.ck-voce-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-voce-tit strong { font-size: .9rem; color: var(--testo); }
.ck-voce-tit small { font-size: .8rem; color: var(--testo-2); line-height: 1.4; }
.ck-etichette { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ck-voce.stato-fatto .ck-voce-tit strong, .ck-voce.stato-accettato .ck-voce-tit strong { color: var(--testo-2); }
.ck-comandi { display: flex; gap: 6px; padding-top: 8px; flex: none; }
.ck-comandi form { margin: 0; }
.ck-pill { appearance: none; -webkit-appearance: none; border: none; outline: none; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-align: center; text-align-last: center; width: 112px; }
.ck-pill.stato-fatto { background: var(--ok-tenue); color: var(--ok); }
.ck-pill.stato-parziale { background: var(--info-tenue); color: var(--info); }
.ck-pill.stato-da_fare { background: var(--attenzione-tenue); color: var(--attenzione); }
.ck-pill.stato-da_verificare { background: var(--neutro-tenue); color: var(--testo-2); }
.ck-pill.stato-accettato { background: var(--accento-tenue); color: var(--accento-testo); }
.ck-pill.rischio-critico, .ck-pill.rischio-alto { background: var(--pericolo-tenue); color: var(--pericolo); }
.ck-pill.rischio-medio { background: var(--attenzione-tenue); color: var(--attenzione); }
.ck-pill.rischio-basso { background: var(--ok-tenue); color: var(--ok); }
.ck-pill option { background: var(--superficie); color: var(--testo); }

.ck-dett { display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 14px 93px; }
.ck-blocco label { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-2); margin-bottom: 4px; }
.ck-blocco label svg { width: 13px; height: 13px; }
.ck-blocco p { margin: 0; font-size: .85rem; line-height: 1.5; }
.ck-nota { font-size: .85rem; line-height: 1.5; white-space: pre-wrap; background: var(--neutro-tenue); border-radius: 8px; padding: 8px 10px; }
.ck-nota.chiusa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ck-nota-apri { margin-top: 4px; border: none; background: transparent; padding: 2px 0; font-size: .78rem; font-weight: 700; color: var(--accento-testo); cursor: pointer; }
.ck-trovati, .ck-storico { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.ck-agg { font-size: .75rem; color: var(--testo-2); }
.ck-importa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 1100px) { .ck-kpi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ck-kpi-pct { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .ck-voce { flex-wrap: wrap; gap: 0 10px; }
  /* il testo prende tutta la riga: prima restava accanto ai due menu e andava a una parola per riga */
  .ck-voce > details { flex: 1 1 100%; }
  .ck-comandi { padding: 0 4px 10px 22px; flex-wrap: wrap; }
  .ck-dett { padding-left: 4px; }
  .ck-codice { flex-basis: auto; }
  .ck-voce summary { flex-wrap: wrap; gap: 4px 10px; }
  .ck-voce-tit { flex-basis: 100%; padding-left: 17px; }
}
.revisione-app { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.revisione-app li { color: var(--testo-2); }
.revisione-app b { color: var(--testo); font-weight: 600; }
/* checklist: voci comuni alle app su una riga, casella «Raggruppa» e copia del titolo */
.ck-unisci { border: 1px solid var(--bordo); background: var(--superficie); box-shadow: var(--ombra-1); border-radius: 12px; padding: 8px 12px; }
.ck-unisci.attiva { border-color: var(--accento); }
.ck-casella { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--testo-3); }
.ck-casella svg { width: 11px; height: 11px; opacity: 0; }
.ck-unisci.attiva .ck-casella { background: var(--su-accento); border-color: var(--su-accento); color: var(--accento); }
.ck-unisci.attiva .ck-casella svg { opacity: 1; }
.ck-voce-tit strong .ck-copia { vertical-align: middle; margin-left: 2px; }
.ck-app-stati { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 46%; }
.ck-app-stato { padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.ck-app-stato b { font-weight: 600; }
.ck-app-stato.stato-fatto { background: var(--ok-tenue); color: var(--ok); }
.ck-app-stato.stato-parziale { background: var(--info-tenue); color: var(--info); }
.ck-app-stato.stato-da_fare { background: var(--attenzione-tenue); color: var(--attenzione); }
.ck-app-stato.stato-da_verificare { background: var(--neutro-tenue); color: var(--testo-2); }
.ck-app-stato.stato-accettato { background: var(--accento-tenue); color: var(--accento-testo); }
.ck-comune-app { padding: 10px 0; border-top: 1px dashed var(--bordo); display: grid; gap: 6px; }
.ck-comune-app:first-child { border-top: none; padding-top: 0; }
.ck-comune-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-comune-nome { font-weight: 600; font-size: .85rem; color: var(--testo); flex: 1; }
@media (max-width: 760px) {
  .ck-app-stati { max-width: none; justify-content: flex-start; flex-basis: 100%; }
  .ck-comune .ck-voce > details > summary, .ck-comune summary { flex-wrap: wrap; }
}
/* Errori app */
.errori-cerca { display: flex; gap: 6px; align-items: center; flex: 1 1 320px; }
.errori-cerca input[type=search] { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); color: var(--testo); font: inherit; font-size: .85rem; box-shadow: var(--ombra-1); }
.errori-visti { margin-left: auto; }
.errori-tabella tr.errore-nuovo td:first-child { box-shadow: inset 3px 0 0 var(--pericolo); }
.errore-dettaglio summary { cursor: pointer; }
.errore-corpo { margin-top: 6px; display: grid; gap: 4px; }
.errore-traccia { margin: 0; padding: 10px; max-height: 320px; overflow: auto; font-size: .75rem; line-height: 1.45; background: var(--neutro-tenue); border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
/* Log app: stile terminale, come il tema «terminale» di Spedizioni (fondo scuro anche col tema chiaro) */
.log-terminale { --t-fondo: #0e1116; --t-riga: #11151a; --t-bordo: #292e34; --t-testo: #d8dbdf; --t-tenue: #6e7681;
  --t-verde: #34d399; --t-rosso: #f26161; --t-ambra: #e3b341; --t-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: var(--t-fondo); border: 1px solid var(--t-bordo); color: var(--t-testo); padding: 0; overflow: hidden; color-scheme: dark; }
.log-terminale::before { display: none; }
.log-terminale-testa { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--t-bordo);
  background: #161b22; font-family: var(--t-mono); font-size: .78rem; }
.log-pallini { display: inline-flex; gap: 6px; flex: none; }
.log-pallini i { width: 10px; height: 10px; border-radius: 50%; background: #f26161; }
.log-pallini i:nth-child(2) { background: #e3b341; }
.log-pallini i:nth-child(3) { background: var(--t-verde); }
.log-prompt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-tenue); }
.log-prompt b { color: var(--t-verde); font-weight: 700; }
.log-conta { color: var(--t-tenue); white-space: nowrap; }
.log-terminale .scorre { background: var(--t-fondo); scrollbar-color: #30363d transparent; }
.log-righe { list-style: none; margin: 0; padding: 6px 0; font-family: var(--t-mono); font-size: .78rem; line-height: 1.5; }
.log-righe li { display: grid; grid-template-columns: 150px 72px 1fr; gap: 10px; padding: 3px 14px; align-items: start; border: none; }
.log-righe li:hover { background: var(--t-riga); }
.log-ora { color: var(--t-tenue); white-space: nowrap; }
.log-livello { font-weight: 700; color: var(--t-verde); }
.log-msg, .log-voce summary { word-break: break-word; color: var(--t-testo); }
.log-voce summary { cursor: pointer; }
.log-fonte { display: inline-block; min-width: 9.5em; margin-right: 8px; color: #79c0ff; }
.log-voce summary::marker { color: var(--t-tenue); }
.log-warning .log-livello { color: var(--t-ambra); }
.log-warning .log-msg, .log-warning .log-voce summary { color: #f0d58c; }
.log-error .log-livello, .log-critical .log-livello { color: var(--t-rosso); }
.log-error, .log-critical { background: rgba(242, 97, 97, .08); }
.log-error .log-msg, .log-error .log-voce summary { color: #ffb4b4; }
.log-terminale .errore-traccia { background: #0b0f14; color: #c9d1d9; border: 1px solid var(--t-bordo); border-radius: 4px; margin-top: 6px; font-family: var(--t-mono); }
.log-terminale .vuoto { color: var(--t-tenue); }
@media (max-width: 760px) { .log-righe li { grid-template-columns: 1fr; gap: 0; padding: 5px 12px; } .log-conta { display: none; } }
/* schede dei gruppi del menu (Server, Difese) in cima alla pagina */
.schede-gruppo { margin: 0 0 14px; flex-wrap: wrap; max-width: 100%; }
/* schede a sinistra, filtri della pagina (periodo, giorni...) a destra sulla stessa riga; da telefono vanno a capo */
.riga-schede { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 14px; }
.riga-schede .schede-gruppo { margin: 0; }
.riga-schede-destra { margin-left: auto; max-width: 100%; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.riga-schede-destra .controllo-adesso { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
/* titolo e descrizione della pagina nella barra in alto (da 960px); il titolo grande resta solo da telefono */
@media (min-width: 960px) {
  .pagina-testa .testa-mobile { display: none; }
  .pagina-testa:not(:has(> div:nth-child(2))) { display: none; }
  .barra { height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .barra .titolo-barra { min-width: 0; max-width: 900px; gap: 2px; }
  .barra .titolo-barra b { font-size: 1.15rem; }
  .barra .titolo-barra span { font-size: .8rem; color: var(--testo-2); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* =========================================================================
   Stile "terminale" di tutta l'app, come Spedizioni: carattere a spaziatura fissa, verde come accento, niente sfumature.
   Si sceglie in fondo al menu (Blu notte / Terminale), resta salvato nel browser: <html data-stile="terminale">
   (vedi tema.js e app.js). Segue il pulsante chiaro/scuro: chiaro di default, scuro con data-tema="scuro".
   ========================================================================= */
.stili-lato { display: none; }
@media (min-width: 960px) {
  .stili-lato { display: flex; align-items: center; gap: 6px; padding: 10px 4px 0; }
  .stili-lato-nome { flex: 1; font-size: .6875rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: rgba(199, 210, 254, .5); }
  .stile-campione { width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; }
  .stile-campione[aria-pressed="true"] { outline: 2px solid #a5b4fc; outline-offset: 2px; }
  .campione-notte { background: linear-gradient(135deg, #1e1b4b, #4f46e5); }
  .campione-terminale { background: linear-gradient(135deg, #0b0f14 55%, #34d399 55%); }
  html[data-lato="chiuso"] .stili-lato { flex-direction: column; padding: 8px 0 0; }
  html[data-lato="chiuso"] .stili-lato-nome { display: none; }
}

/* --- colori: chiaro (grigi celesti, verde scuro leggibile su fondo chiaro) --- */
:root[data-stile="terminale"] {
  --bg: #f1f4f8; --superficie: #ffffff; --superficie-2: #f6f8fb; --superficie-3: #e8edf3;
  --bordo: #d3dbe5; --bordo-forte: #b3bfcd; --testo: #1f2328; --testo-2: #4f5b69; --testo-3: #848f9c;
  --accento: #1a7f37; --accento-hover: #116329; --accento-tenue: rgba(26, 127, 55, .10); --accento-testo: #1a7f37;
  --su-accento: #ffffff;
  --ok: #1a7f37; --ok-tenue: rgba(26, 127, 55, .10);
  --attenzione: #9a6700; --attenzione-tenue: rgba(191, 135, 0, .12);
  --pericolo: #cf222e; --pericolo-tenue: rgba(207, 34, 46, .09);
  --info: #0969da; --info-tenue: rgba(9, 105, 218, .09);
  --arancio: #bc4c00;
  --neutro-tenue: #e8edf3;
  --ombra-1: none; --ombra-2: none; --ombra-3: 0 16px 40px -12px rgba(31, 35, 40, .25);
  --anello: 0 0 0 3px rgba(26, 127, 55, .2);
  --raggio: 4px; --raggio-piccolo: 4px;
  --tinta: #1a7f37; --tinta-2: #2da44e;
  --sfumatura-accento: #1a7f37;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --carattere: var(--mono);
  /* menu laterale e barra */
  --tl-fondo: #f6f8fb; --tl-barra: #ffffff; --tl-box: #ffffff; --tl-linea: #d3dbe5;
  --tl-testo: #4f5b69; --tl-tenue: #848f9c; --tl-forte: #1f2328; --tl-accento: #1a7f37;
  --tl-hover: rgba(26, 127, 55, .06); --tl-attivo: rgba(26, 127, 55, .10);
  --tl-scorri: #c4ccd5;
  color-scheme: light;
}
:root[data-stile="terminale"] .c-blu   { --tinta: #0969da; --tinta-2: #218bff; }
:root[data-stile="terminale"] .c-viola { --tinta: #8250df; --tinta-2: #a475f9; }
:root[data-stile="terminale"] .c-verde { --tinta: #1a7f37; --tinta-2: #2da44e; }
:root[data-stile="terminale"] .c-rosso { --tinta: #cf222e; --tinta-2: #fa4549; }
:root[data-stile="terminale"] .c-ambra { --tinta: #9a6700; --tinta-2: #bf8700; }
:root[data-stile="terminale"] .c-ciano { --tinta: #1b7c83; --tinta-2: #3192aa; }

/* --- colori: scuro (come Spedizioni) --- */
:root[data-stile="terminale"][data-tema="scuro"] {
  --bg: #0e1116; --superficie: #11151a; --superficie-2: #151a20; --superficie-3: #1b2128;
  --bordo: #292e34; --bordo-forte: #363c44; --testo: #d8dbdf; --testo-2: #afb5bd; --testo-3: #6e7681;
  --accento: #34d399; --accento-hover: #6ee7b7; --accento-tenue: rgba(52, 211, 153, .12); --accento-testo: #34d399;
  --su-accento: #0b0f14;
  --ok: #34d399; --ok-tenue: rgba(52, 211, 153, .12);
  --attenzione: #e3b341; --attenzione-tenue: rgba(227, 179, 65, .12);
  --pericolo: #f26161; --pericolo-tenue: rgba(242, 97, 97, .12);
  --info: #58a6ff; --info-tenue: rgba(88, 166, 255, .12);
  --arancio: #f0883e;
  --neutro-tenue: #1b2128;
  --ombra-3: 0 16px 40px -12px rgba(0, 0, 0, .7);
  --anello: 0 0 0 3px rgba(52, 211, 153, .25);
  --tinta: #34d399; --tinta-2: #6ee7b7;
  --sfumatura-accento: #34d399;
  --tl-fondo: #0b0f14; --tl-barra: #0b0f14; --tl-box: #0e1116; --tl-linea: rgba(255, 255, 255, .08);
  --tl-testo: #8b949e; --tl-tenue: #6e7681; --tl-forte: #e5e7eb; --tl-accento: #34d399;
  --tl-hover: rgba(52, 211, 153, .06); --tl-attivo: rgba(52, 211, 153, .1);
  --tl-scorri: #363c44;
  color-scheme: dark;
}
:root[data-stile="terminale"][data-tema="scuro"] .c-blu   { --tinta: #58a6ff; --tinta-2: #79b8ff; }
:root[data-stile="terminale"][data-tema="scuro"] .c-viola { --tinta: #bc8cff; --tinta-2: #d2a8ff; }
:root[data-stile="terminale"][data-tema="scuro"] .c-verde { --tinta: #34d399; --tinta-2: #6ee7b7; }
:root[data-stile="terminale"][data-tema="scuro"] .c-rosso { --tinta: #f26161; --tinta-2: #ff8a8a; }
:root[data-stile="terminale"][data-tema="scuro"] .c-ambra { --tinta: #e3b341; --tinta-2: #f2cc60; }
:root[data-stile="terminale"][data-tema="scuro"] .c-ciano { --tinta: #39c5cf; --tinta-2: #56d4dd; }

/* base: carattere fisso un po' piu' piccolo, niente sfumature di sfondo */
:root[data-stile="terminale"] body { background: var(--bg); font-size: 13.5px; font-feature-settings: normal; }
:root[data-stile="terminale"] h1, :root[data-stile="terminale"] h2, :root[data-stile="terminale"] h3 { letter-spacing: 0; }
:root[data-stile="terminale"] code { border-radius: 3px; }
:root[data-stile="terminale"] *::-webkit-scrollbar-thumb { background: var(--tl-scorri); box-shadow: none; }
:root[data-stile="terminale"] *::-webkit-scrollbar-thumb:hover { background: var(--accento); box-shadow: none; }

/* barra in alto: titolo come un percorso */
:root[data-stile="terminale"] .barra { background: var(--tl-barra); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--bordo); }
:root[data-stile="terminale"] .barra .titolo-barra b::before { content: "~/ "; color: var(--accento); }

/* schede, indicatori, riquadro di stato: piatti, con il colore solo su bordi e testo */
:root[data-stile="terminale"] .card[class*=" c-"]::before { background: var(--tinta); height: 2px; }
:root[data-stile="terminale"] .card-testa { background: none; }
:root[data-stile="terminale"] .card-testa h2 .ic { background: none; padding: 0; width: 18px; height: 18px; border-radius: 0; }
:root[data-stile="terminale"] .kpi::after { display: none; }
:root[data-stile="terminale"] .kpi .riga-kpi .ic { background: none; color: var(--tinta); box-shadow: none; border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 4px; }
:root[data-stile="terminale"] .stato { background: var(--superficie); color: var(--testo); box-shadow: inset 3px 0 0 var(--tono); border: 1px solid var(--bordo); }
:root[data-stile="terminale"] .stato::before, :root[data-stile="terminale"] .stato::after { display: none; }
:root[data-stile="terminale"] .stato.tono-verde { --tono: var(--ok); }
:root[data-stile="terminale"] .stato.tono-giallo { --tono: var(--attenzione); }
:root[data-stile="terminale"] .stato.tono-rosso { --tono: var(--pericolo); }
:root[data-stile="terminale"] .stato.tono-grigio { --tono: var(--testo-3); }
:root[data-stile="terminale"] .stato h1 { color: var(--tono); }
:root[data-stile="terminale"] .stato p, :root[data-stile="terminale"] .stato .meta { color: var(--testo-2); }
:root[data-stile="terminale"] .stato .meta b { color: var(--testo); }
:root[data-stile="terminale"] .stato .chip-stato { background: color-mix(in srgb, var(--tono) 14%, transparent); color: var(--tono); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 40%, transparent); }
:root[data-stile="terminale"] .tessera .chip-ic.accento { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 45%, transparent); }

/* pulsanti, filtri e voci attive */
:root[data-stile="terminale"] .btn-primario { background: var(--accento); color: var(--su-accento); box-shadow: none; }
:root[data-stile="terminale"] .btn-primario:hover { background: var(--accento-hover); color: var(--su-accento); }
:root[data-stile="terminale"] .segmenti a.attivo::before,
:root[data-stile="terminale"] .schede-sicurezza a.attiva::before { content: ">"; margin-right: -2px; }
:root[data-stile="terminale"] .ck-app-voce.attiva { background: var(--accento-tenue); border-color: var(--accento); color: var(--accento); }
:root[data-stile="terminale"] .ck-app-voce.attiva b { color: var(--accento); }
:root[data-stile="terminale"] .nav-basso { background: var(--tl-barra); }
:root[data-stile="terminale"] .nav-basso a.attiva { background: var(--accento-tenue); color: var(--accento); box-shadow: inset 0 2px 0 var(--accento); }
:root[data-stile="terminale"] .avatar { background: var(--accento); color: var(--su-accento); border-radius: 4px; }

/* grafici e barre: colori pieni */
:root[data-stile="terminale"] .sf-a1 { stop-color: var(--tinta-2); } :root[data-stile="terminale"] .sf-a2 { stop-color: var(--accento); }
:root[data-stile="terminale"] .sf-p1 { stop-color: var(--pericolo); } :root[data-stile="terminale"] .sf-p2 { stop-color: var(--pericolo); }
:root[data-stile="terminale"] .barretta progress::-webkit-progress-value { background: var(--tinta); }
:root[data-stile="terminale"] .barretta progress::-moz-progress-bar { background: var(--tinta); }

/* menu laterale: voce attiva verde con barretta e prompt "> ", logo con cursore */
@media (min-width: 960px) {
  :root[data-stile="terminale"] .lato { background: var(--tl-fondo); border-right: 1px solid var(--tl-linea); box-shadow: none; }
  :root[data-stile="terminale"] .lato .marchio { color: var(--tl-accento); font-weight: 600; }
  :root[data-stile="terminale"] .lato .marchio-testo::after { content: "_"; animation: cursore-lato 1.1s steps(1) infinite; }
  :root[data-stile="terminale"] .lato .gruppo { color: var(--tl-tenue); text-transform: lowercase; letter-spacing: .02em; font-weight: 500; }
  :root[data-stile="terminale"] .lato .gruppo::before { content: "// "; }
  :root[data-stile="terminale"] .lato nav a { color: var(--tl-testo); font-size: .8rem; font-weight: 500; height: 34px; }
  :root[data-stile="terminale"] .lato nav a .ic { color: currentColor; }
  :root[data-stile="terminale"] .lato nav a:hover { background: var(--tl-hover); color: var(--tl-forte); }
  :root[data-stile="terminale"] .lato nav a.attiva { background: var(--tl-attivo); color: var(--tl-accento); box-shadow: inset 3px 0 0 var(--tl-accento); }
  :root[data-stile="terminale"] .lato nav a.attiva .ic { color: var(--tl-accento); }
  :root[data-stile="terminale"] .lato nav a.attiva .voce::before { content: "> "; }
  :root[data-stile="terminale"] .lato .server-box { background: var(--tl-box); border-color: var(--tl-linea); color: var(--tl-testo); font-size: .75rem; }
  :root[data-stile="terminale"] .lato .server-box b { color: var(--tl-forte); font-size: .78rem; }
  :root[data-stile="terminale"] .lato .server-box b::before { content: "$ "; color: var(--tl-accento); }
  :root[data-stile="terminale"] .lato .server-box .debole { color: var(--tl-tenue); }
  :root[data-stile="terminale"] .lato .btn-lato { color: var(--tl-tenue); }
  :root[data-stile="terminale"] .lato .btn-lato:hover { color: var(--tl-accento); background: var(--tl-hover); }
  :root[data-stile="terminale"] .lato .piede-lato { border-top-color: var(--tl-linea); }
  :root[data-stile="terminale"] .lato .utente-lato { color: var(--tl-forte); }
  :root[data-stile="terminale"] .lato .utente-lato .debole { color: var(--tl-tenue); }
  :root[data-stile="terminale"] .stili-lato-nome { color: var(--tl-tenue); text-transform: lowercase; letter-spacing: .02em; }
  :root[data-stile="terminale"] .stile-campione { border-radius: 3px; border-color: var(--tl-linea); }
  :root[data-stile="terminale"] .stile-campione[aria-pressed="true"] { outline-color: var(--tl-accento); }
}
@keyframes cursore-lato { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-stile="terminale"] .lato .marchio-testo::after { animation: none; } }

/* pagina Database: quattro schede in due righe da computer, una sotto l'altra da telefono */
.area-db { grid-template-columns: 1fr; }
@media (min-width: 960px) { .area-db { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } }
.area-db > .card, .area-2 > .card { min-height: 0; }
.tabella .destra { text-align: right; white-space: nowrap; }
.avviso-db { flex: none; padding: 10px 14px; border-left: 3px solid var(--attenzione); }
.avviso-db .ic { color: var(--attenzione); }

/* pagina App Android: QR per scaricare l'APK dal telefono e passi d'installazione */
.app-scarica { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 16px; }
.app-qr { flex: none; width: 168px; padding: 8px; background: #fff; border-radius: var(--raggio-piccolo); border: 1px solid var(--bordo); }
.app-qr svg { display: block; width: 100%; height: auto; }
.app-scarica > div:last-child { flex: 1; min-width: 220px; }
.app-passi { margin: 0 16px 16px; padding-left: 20px; display: grid; gap: 8px; color: var(--testo-2); }
form.in-linea { display: inline; }

/* IP autorizzati e Dispositivi: storia della voce in piccolo; legenda degli stati in una riga da computer */
.righe .sotto.storia-ip { font-size: .75rem; color: var(--testo-3); }
.legenda-disp { flex: none; display: grid; gap: 8px 18px; padding: 12px 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .legenda-disp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legenda-voce { display: flex; align-items: flex-start; gap: 10px; font-size: .8125rem; color: var(--testo-2); }
.legenda-voce .badge { flex: none; }
.legenda-nota { grid-column: 1 / -1; display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.legenda-nota .ic { flex: none; margin-top: 1px; }
.nota-card { padding: 10px 16px 14px; margin: 0; }

/* ---------- Claude: pulsante «Indaga» e rapporti ---------- */
.form-claude { display: inline-flex; margin: 0; }
.riga-claude { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.badge-claude .ic { width: 13px; height: 13px; }
.azioni-errore, .azioni-avviso { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.azioni-claude { display: flex; gap: 8px; flex-wrap: wrap; }
.sessione-claude { scroll-margin-top: 12px; }
.rapporto-claude { font-size: .9rem; line-height: 1.6; color: var(--testo); }
.rapporto-claude .md-titolo { font-size: 1rem; font-weight: 650; margin: 16px 0 6px; color: var(--testo); }
.rapporto-claude .md-titolo:first-child { margin-top: 0; }
.rapporto-claude p { margin: 0 0 8px; }
.rapporto-claude .md-elenco { margin: 0 0 10px; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 4px; }
.rapporto-claude .md-codice { background: var(--superficie-3); border-radius: var(--raggio-piccolo); padding: 10px; overflow: auto; font: .8rem ui-monospace, Consolas, monospace; }
.rapporto-claude .scorre-orizz { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); }
.rapporto-claude .md-tabella td { white-space: normal; min-width: 120px; }
.contesto-claude summary { cursor: pointer; }

/* ---------- Servizi di Windows e Web server (nginx): amministra/servizi.py, amministra/nginx.py ---------- */
@media (min-width: 960px) {
  .area-servizi { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
  .area-nginx { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .area-nginx > .colonna { grid-row: 1 / span 2; grid-column: 2; }
}
@media (min-width: 1300px) {
  .area-nginx { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .area-nginx > .colonna { grid-row: 1; grid-column: 2; }
}
.servizi-win code, .area-nginx .righe code { font-size: .75rem; }
.servizi-win .azioni-riga { flex-wrap: wrap; justify-content: flex-end; }
.avviso-nginx { flex: none; border: none; background: none; box-shadow: none; }
.avviso-nginx .msg { line-height: 1.55; }
.avviso-nginx .msg code { color: inherit; }
.comandi-nginx { display: flex; flex-direction: column; gap: 10px; }
.comandi-nginx p { margin: 0; }
.pulsanti-nginx { display: flex; flex-wrap: wrap; gap: 8px; }
.pulsanti-nginx form, .comando-in-coda form { margin: 0; }
.comando-in-coda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--raggio-piccolo); }
.righe.compatte { padding: 6px 10px 10px; gap: 4px; }
.righe.compatte > li { padding: 7px 10px; gap: 10px; }
.righe.compatte .chip-ic { width: 28px; height: 28px; border-radius: 8px; }
.righe.compatte .chip-ic .ic { width: 14px; height: 14px; }
.area-nginx .righe .sotto .ic { width: 12px; height: 12px; vertical-align: -1px; color: var(--testo-3); }
.area-nginx h3.sottotitolo-elenco { margin: 8px 12px 0; }
.riparazione-nginx { display: grid; gap: 8px; padding: 0 16px 12px; justify-items: start; }
.riparazione-nginx p { margin: 0; }
.riparazione-nginx pre { width: 100%; box-sizing: border-box; }
.testo-log { font: .72rem ui-monospace, Consolas, monospace; }

/* ---------- Gestione MySQL (amministra/mysql_gestione.py) ---------- */
.area-mysql { grid-template-columns: 1fr; }
@media (min-width: 960px) { .area-mysql { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.mysql-attiva { flex: none; }
.mysql-passi { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--testo-2); font-size: .875rem; }
.mysql-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.mysql-badge { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mysql-permessi { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); }
.mysql-db { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mysql-db .btn { flex: none; height: 26px; }
.mysql-azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.mysql-anteprima { flex: none; max-height: 70%; }
.mysql-anteprima-corpo { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mysql-spiega { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .875rem; color: var(--testo-2); }
.mysql-sql-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mysql-sql { margin: 0; font: .8125rem/1.5 ui-monospace, Consolas, monospace; background: var(--superficie-3); border-radius: var(--raggio-piccolo); padding: 10px 12px; }
.mysql-conferma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Log di sistema (amministra/log_sistema.py) e Firewall (amministra/firewall.py) ---------- */
.ls-numero { margin-left: 4px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.ls-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .8125rem; color: var(--testo-2); flex: none; }
.ls-nota .ic { flex: none; margin-top: 2px; color: var(--info); }
.log-terminale .ls-volte { display: inline-block; min-width: 3.2em; margin-right: 6px; color: var(--t-ambra); font-weight: 700; }
.log-terminale .ls-titolo { color: #79c0ff; margin-right: 6px; }
.log-terminale .ls-dettaglio { display: grid; gap: 6px; margin: 6px 0 4px; }
.log-terminale .ls-meta { color: var(--t-tenue); }
.log-terminale .ls-dettaglio .errore-traccia { margin-top: 0; max-height: 200px; }
.log-terminale .riga-claude .btn { color: #c9d1d9; border-color: var(--t-bordo); }
.log-audit .log-livello { color: #79c0ff; }
.log-info .log-livello { color: var(--t-tenue); }
.area-ls-visite { grid-template-columns: 1fr; }
.ls-tabella td.a-capo-libero { min-width: 140px; }
@media (min-width: 960px) {
  .area-ls-visite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .8fr); }
  .area-fw { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
}
.area-fw > .colonna > .card.riempi { flex: 1; min-height: 0; }
.fw-bloccati { flex: none; max-height: 48%; min-height: 0; }
.fw-bloccati > .scorre { min-height: 0; flex: 1; }
.fw-blocca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; padding: 12px 16px 4px; align-items: center; }
.fw-blocca input { height: 34px; font-size: .8125rem; min-width: 0; }
@media (max-width: 520px) { .fw-blocca { grid-template-columns: 1fr; } }
.fw-tabella td { vertical-align: top; }
.fw-tabella td .badge + div { margin-top: 4px; }
.fw-tabella tr.fw-gruppo td { background: var(--superficie-2); font-weight: 650; font-size: .75rem; letter-spacing: .03em; color: var(--testo-2); padding: 8px 14px; }
.fw-tabella tr.debole td { opacity: .62; }
.fw-tabella tr.debole td:last-child { opacity: 1; }
.fw-note { min-width: 200px; }
.fw-note .badge { margin: 0 4px 4px 0; white-space: normal; }


/* ---------- Attività pianificate: nuova / modifica (amministra/attivita_gestione) ---------- */
.area-attgest { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .area-attgest { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); } }
.area-attgest > .colonna > .card:not(.riempi) { flex: none; }
@media (min-width: 960px) and (min-height: 640px) { .area-attgest > .colonna { overflow-y: auto; overscroll-behavior: contain; } .area-attgest > .colonna > .card.riempi { flex: none; } }
.form-attgest { display: grid; gap: 14px var(--spazio); align-content: start; }
@media (min-width: 1400px) { .form-attgest { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-attgest .att-pulsanti { grid-column: 1 / -1; } }
.att-gruppo { border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: 12px 14px 4px; margin: 0; min-width: 0; background: var(--superficie-2); }
.att-gruppo legend { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: .8125rem; font-weight: 650; color: var(--testo-2); }
.att-gruppo legend .ic { width: 15px; height: 15px; color: var(--testo-3); }
.att-gruppo .suggerimento { margin-bottom: 12px; }
.att-gruppo .etichetta { display: block; font-size: .8125rem; font-weight: 600; color: var(--testo); margin-bottom: 6px; }
.form-attgest input[type=date] { width: 100%; height: 42px; padding: 0 13px; font: inherit; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: 9px; box-shadow: var(--ombra-1); }
.form-attgest input[type=date]:focus { outline: none; border-color: var(--accento); box-shadow: var(--anello); }
.att-giorni-scelta { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 11px; border: 1px solid var(--bordo); border-radius: 9px;
  background: var(--superficie); font-weight: 550; font-size: .8125rem; color: var(--testo-2); cursor: pointer; }
.att-chip:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); color: var(--accento-testo); }
.att-chip input { accent-color: var(--accento); margin: 0; }
.att-attiva { display: flex; align-items: flex-end; }
.att-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.att-anteprima td { vertical-align: top; }
.att-anteprima td:first-child { white-space: nowrap; }
/* campi della pianificazione: solo quelli del tipo scelto (senza :has restano tutti visibili) */
@supports selector(:has(a)) {
  .form-attgest .att-solo { display: none; }
  .form-attgest:has(#att-tipo option[value=una_volta]:checked) :is(.att-data, .att-orari, .att-ripeti),
  .form-attgest:has(#att-tipo option[value=giornaliera]:checked) :is(.att-orari, .att-ogni, .att-ripeti),
  .form-attgest:has(#att-tipo option[value=settimanale]:checked) :is(.att-orari, .att-giorni, .att-ripeti),
  .form-attgest:has(#att-tipo option[value=avvio]:checked) .att-ripeti,
  .form-attgest:has(#att-tipo option[value=accesso]:checked) .att-ripeti { display: block; }
  .form-attgest:has(#att-tipo option[value=una_volta]:checked) .due-campi.att-ripeti,
  .form-attgest:has(#att-tipo option[value=giornaliera]:checked) .due-campi.att-ripeti,
  .form-attgest:has(#att-tipo option[value=settimanale]:checked) .due-campi.att-ripeti,
  .form-attgest:has(#att-tipo option[value=avvio]:checked) .due-campi.att-ripeti,
  .form-attgest:has(#att-tipo option[value=accesso]:checked) .due-campi.att-ripeti { display: grid; }
}
.att-modificata { flex: none; }

/* rapporti di Claude: avviso sopra i comandi proposti */
.rapporto-claude .md-avviso-comando { margin: 8px 0 4px; font-size: .78rem; font-weight: 600; color: var(--attenzione); }
.rapporto-claude .md-avviso-comando + .md-codice { margin-top: 0; border-left: 3px solid var(--attenzione); }

/* Controllo generale: colonna del pulsante Indaga */
.tabella-sicurezza .col-claude { width: 120px; }

/* Database: query lente (dettaglio apribile) */
.query-lenta .lenta { width: 100%; }
.query-lenta .lenta > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.query-lenta .lenta > summary::-webkit-details-marker { display: none; }
.query-lenta .lenta-corpo { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; overflow-x: auto; }
.query-lenta .riga-claude { margin-top: 8px; gap: 10px; flex-wrap: wrap; }

/* Claude: indagini compatte, si aprono con un clic */
.elenco-claude { display: flex; flex-direction: column; gap: 8px; }
.sessione-claude > summary { list-style: none; cursor: pointer; }
.sessione-claude > summary::-webkit-details-marker { display: none; }
.sessione-testa { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.sessione-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tinta); background: color-mix(in srgb, var(--tinta) 13%, transparent); }
.sessione-ic .ic { width: 16px; height: 16px; }
.sessione-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sessione-titolo { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessione-breve { color: var(--testo-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sessione-freccia { flex: none; color: var(--testo-3); transition: transform .15s; }
.sessione-claude[open] .sessione-freccia { transform: rotate(90deg); }
.sessione-claude[open] .sessione-breve { display: none; }
.sessione-corpo { border-top: 1px solid var(--bordo); }

/* righe compatte: il problema mostra titolo e livello, con un clic consiglio e «Indaga» */
.voce-apribile > summary { list-style: none; cursor: pointer; }
.voce-apribile > summary::-webkit-details-marker { display: none; }
.voce-apribile .voce-freccia { flex: none; display: inline-flex; color: var(--testo-3); transition: transform .15s; }
.voce-apribile .voce-freccia .ic { width: 15px; height: 15px; }
.voce-apribile[open] .voce-freccia { transform: rotate(90deg); }
/* query lunghe: tre righe, con un clic tutta */
.blocco-codice.corto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.blocco-codice.corto.aperto { display: block; }

/* =========================================================================
   Stile "oceano": come Blu notte, ma con menu blu petrolio e accento tra blu e smeraldo.
   Si sceglie in fondo al menu, resta salvato nel browser: <html data-stile="oceano">
   ========================================================================= */
@media (min-width: 960px) {
  .campione-oceano { background: linear-gradient(135deg, #042f3d, #0284c7 55%, #10b981); }
  .campione-rame { background: linear-gradient(135deg, #f1f5f9 50%, #b45309 50%); }
}
:root[data-stile="oceano"] {
  --accento: #0e7490; --accento-hover: #155e75; --accento-tenue: #e0f4f6; --accento-testo: #0e7490;
  --anello: 0 0 0 3px rgba(14, 116, 144, .2);
  --sfumatura-accento: linear-gradient(135deg, #0284c7 0%, #0891b2 50%, #059669 100%);
  --tinta: #0891b2; --tinta-2: #2dd4bf;
}
:root[data-stile="oceano"][data-tema="scuro"] {
  --accento: #2dd4bf; --accento-hover: #5eead4; --accento-tenue: rgba(45, 212, 191, .13); --accento-testo: #5eead4;
  --anello: 0 0 0 3px rgba(45, 212, 191, .26);
}
:root[data-stile="oceano"] body {
  background:
    radial-gradient(1100px 620px at 105% -12%, rgba(8, 145, 178, .15), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(16, 185, 129, .13), transparent 60%),
    var(--bg);
}
:root[data-stile="oceano"][data-tema="scuro"] body {
  background:
    radial-gradient(1100px 620px at 105% -12%, rgba(8, 145, 178, .16), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(16, 185, 129, .10), transparent 60%),
    var(--bg);
}
:root[data-stile="oceano"] .nav-basso a.attiva { box-shadow: 0 6px 14px -8px #0891b2; }
:root[data-stile="oceano"] .btn-primario { box-shadow: 0 8px 18px -10px #0891b2; }
:root[data-stile="oceano"] .btn-primario:hover { background: linear-gradient(135deg, #0369a1, #0e7490 55%, #047857); }
:root[data-stile="oceano"] .sf-a1 { stop-color: #67e8f9; } :root[data-stile="oceano"] .sf-a2 { stop-color: #0891b2; }
:root[data-stile="oceano"] .accesso {
  background:
    radial-gradient(620px 420px at 12% 18%, rgba(2, 132, 199, .32), transparent 62%),
    radial-gradient(520px 420px at 88% 26%, rgba(16, 185, 129, .26), transparent 62%),
    radial-gradient(680px 520px at 55% 108%, rgba(8, 145, 178, .28), transparent 62%),
    var(--bg);
}
@media (min-width: 960px) {
  :root[data-stile="oceano"] .lato { background: linear-gradient(180deg, #042f3d 0%, #064e5f 55%, #065f5b 100%); box-shadow: 4px 0 24px -12px rgba(4, 47, 61, .55); }
  :root[data-stile="oceano"][data-tema="scuro"] .lato { background: linear-gradient(180deg, #021a23 0%, #04303b 60%, #063d3c 100%); }
  :root[data-stile="oceano"] .lato .gruppo { color: rgba(167, 243, 208, .5); }
  :root[data-stile="oceano"] .lato nav a { color: #c5ecf2; }
  :root[data-stile="oceano"] .lato nav a .ic { color: #7dd3c8; }
  :root[data-stile="oceano"] .lato nav a.attiva { background: linear-gradient(90deg, rgba(45, 212, 191, .32), rgba(45, 212, 191, .10)); color: #fff; box-shadow: inset 3px 0 0 #5eead4; }
  :root[data-stile="oceano"] .lato nav a.attiva .ic { color: #fff; }
  :root[data-stile="oceano"] .lato .server-box,
  :root[data-stile="oceano"] .lato .utente-lato { color: #c5ecf2; }
  :root[data-stile="oceano"] .lato .server-box .debole,
  :root[data-stile="oceano"] .lato .utente-lato .debole,
  :root[data-stile="oceano"] .lato .btn-lato { color: rgba(197, 236, 242, .7); }
  :root[data-stile="oceano"] .stili-lato-nome { color: rgba(167, 243, 208, .5); }
  :root[data-stile="oceano"] .stile-campione[aria-pressed="true"] { outline-color: #5eead4; }
}

/* =========================================================================
   Stile "rame": moderno ed elegante. Menu chiaro e vetroso, angoli morbidi, schede senza bordo
   con ombre leggere, accento rame caldo su blu inchiostro; i grigi restano celesti.
   <html data-stile="rame">
   ========================================================================= */
:root[data-stile="rame"] {
  --bg: #eef2f7; --superficie: #ffffff; --superficie-2: #f6f8fb; --superficie-3: #edf1f6;
  --bordo: #e3e9f1; --bordo-forte: #cdd6e2; --testo: #142033; --testo-2: #4b5a70; --testo-3: #8090a6;
  --accento: #b45309; --accento-hover: #92400e; --accento-tenue: #fbefe3; --accento-testo: #9a3f0b;
  --su-accento: #ffffff;
  --anello: 0 0 0 3px rgba(180, 83, 9, .18);
  --raggio: 16px; --raggio-piccolo: 10px;
  --ombra-1: 0 1px 2px rgba(20, 32, 51, .04), 0 10px 26px -16px rgba(20, 32, 51, .22);
  --ombra-2: 0 2px 4px rgba(20, 32, 51, .05), 0 16px 34px -18px rgba(20, 32, 51, .3);
  --sfumatura-accento: linear-gradient(135deg, #d97706 0%, #b45309 55%, #9a3412 100%);
  --rm-inchiostro: #1b2a44; --rm-vetro: rgba(255, 255, 255, .72);
  --tinta: #b45309; --tinta-2: #f59e0b;
}
:root[data-stile="rame"][data-tema="scuro"] {
  --bg: #0b1220; --superficie: #121b2c; --superficie-2: #152036; --superficie-3: #1b2740;
  --bordo: #1f2c44; --bordo-forte: #2a3a57; --testo: #e8edf6; --testo-2: #a4b2c8; --testo-3: #6f819d;
  --accento: #f59e5b; --accento-hover: #fbbf8a; --accento-tenue: rgba(245, 158, 91, .14); --accento-testo: #fbbf8a;
  --su-accento: #1a1206;
  --anello: 0 0 0 3px rgba(245, 158, 91, .26);
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .8);
  --ombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 36px -18px rgba(0, 0, 0, .85);
  --rm-inchiostro: #e8edf6; --rm-vetro: rgba(18, 27, 44, .72);
  --tinta: #f59e5b; --tinta-2: #fbbf8a;
}
:root[data-stile="rame"] body {
  background:
    radial-gradient(1000px 600px at 100% -10%, rgba(217, 119, 6, .10), transparent 60%),
    radial-gradient(900px 560px at -10% 110%, rgba(56, 120, 200, .12), transparent 60%),
    var(--bg);
}
:root[data-stile="rame"][data-tema="scuro"] body {
  background:
    radial-gradient(1000px 600px at 100% -10%, rgba(245, 158, 91, .10), transparent 60%),
    radial-gradient(900px 560px at -10% 110%, rgba(56, 120, 200, .12), transparent 60%),
    var(--bg);
}
:root[data-stile="rame"] h1 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600; letter-spacing: -.01em; }

/* schede: niente bordo, ombra morbida, filo di sezione sottile */
:root[data-stile="rame"] .card { border-color: transparent; }
:root[data-stile="rame"][data-tema="scuro"] .card { border-color: var(--bordo); }
:root[data-stile="rame"] .card[class*=" c-"]::before { height: 2px; opacity: .85; }
:root[data-stile="rame"] .card-testa { background: none; }
:root[data-stile="rame"] .kpi::after { opacity: .7; }
:root[data-stile="rame"] .kpi .riga-kpi .ic { border-radius: 12px; }

/* riquadro di stato: inchiostro profondo con il colore dello stato in una fascia */
:root[data-stile="rame"] .stato { background: linear-gradient(135deg, #1b2a44 0%, #24375a 100%); box-shadow: inset 4px 0 0 var(--tono, #94a3b8), 0 16px 32px -18px rgba(20, 32, 51, .55); }
:root[data-stile="rame"] .stato.tono-verde { --tono: #34d399; }
:root[data-stile="rame"] .stato.tono-giallo { --tono: #fbbf24; }
:root[data-stile="rame"] .stato.tono-rosso { --tono: #fb7185; }
:root[data-stile="rame"] .stato.tono-grigio { --tono: #94a3b8; }
:root[data-stile="rame"] .stato h1 { color: #fff; }
:root[data-stile="rame"] .stato .chip-stato { background: color-mix(in srgb, var(--tono) 22%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 55%, transparent); }

/* pulsanti, voci attive, barra */
:root[data-stile="rame"] .btn-primario { box-shadow: 0 10px 20px -12px #b45309; }
:root[data-stile="rame"] .btn-primario:hover { background: linear-gradient(135deg, #c2620a, #92400e 60%, #7c2d12); }
:root[data-stile="rame"][data-tema="scuro"] .btn-primario { color: #1a1206; }
:root[data-stile="rame"] .nav-basso a.attiva { box-shadow: 0 6px 14px -8px #b45309; }
:root[data-stile="rame"] .barra { background: var(--rm-vetro); border-bottom-color: transparent; box-shadow: 0 1px 0 var(--bordo); }
:root[data-stile="rame"] .sf-a1 { stop-color: #fdba74; } :root[data-stile="rame"] .sf-a2 { stop-color: #b45309; }
:root[data-stile="rame"] .accesso {
  background:
    radial-gradient(620px 420px at 12% 18%, rgba(217, 119, 6, .24), transparent 62%),
    radial-gradient(520px 420px at 88% 26%, rgba(56, 120, 200, .24), transparent 62%),
    radial-gradient(680px 520px at 55% 108%, rgba(27, 42, 68, .22), transparent 62%),
    var(--bg);
}

/* menu laterale chiaro e vetroso, voci a pillola, voce attiva color rame */
@media (min-width: 960px) {
  :root[data-stile="rame"] .lato { background: var(--rm-vetro); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--bordo); box-shadow: 6px 0 30px -22px rgba(20, 32, 51, .35); }
  :root[data-stile="rame"][data-tema="scuro"] .lato { background: linear-gradient(180deg, #0e1729, #111c31); }
  :root[data-stile="rame"] .lato .marchio { color: var(--rm-inchiostro); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600; letter-spacing: .01em; }
  :root[data-stile="rame"] .lato .gruppo { color: var(--testo-3); }
  :root[data-stile="rame"] .lato nav a { color: var(--testo-2); border-radius: 999px; }
  :root[data-stile="rame"] .lato nav a .ic { color: var(--testo-3); }
  :root[data-stile="rame"] .lato nav a:hover { background: var(--superficie-3); color: var(--testo); }
  :root[data-stile="rame"] .lato nav a.attiva { background: var(--sfumatura-accento); color: #fff; box-shadow: 0 8px 18px -12px #b45309; }
  :root[data-stile="rame"][data-tema="scuro"] .lato nav a.attiva { color: #1a1206; }
  :root[data-stile="rame"] .lato nav a.attiva .ic { color: currentColor; }
  :root[data-stile="rame"] .lato .server-box { background: var(--superficie); border-color: var(--bordo); color: var(--testo-2); border-radius: 14px; }
  :root[data-stile="rame"] .lato .server-box b { color: var(--testo); }
  :root[data-stile="rame"] .lato .server-box .debole,
  :root[data-stile="rame"] .lato .utente-lato .debole { color: var(--testo-3); }
  :root[data-stile="rame"] .lato .btn-lato { color: var(--testo-3); }
  :root[data-stile="rame"] .lato .btn-lato:hover { color: var(--accento-testo); background: var(--accento-tenue); }
  :root[data-stile="rame"] .lato .piede-lato { border-top-color: var(--bordo); }
  :root[data-stile="rame"] .lato .utente-lato { color: var(--testo); }
  :root[data-stile="rame"] .stili-lato-nome { color: var(--testo-3); }
  :root[data-stile="rame"] .stile-campione { border-color: var(--bordo-forte); }
  :root[data-stile="rame"] .stile-campione[aria-pressed="true"] { outline-color: var(--accento); }
}

/* Avvisi: il testo porta alla pagina dove si risolve il problema */
.link-avviso { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accento) 35%, transparent); text-underline-offset: 3px; }
.link-avviso:hover { color: var(--accento-testo); text-decoration-color: currentColor; }

/* Claude › Chat (claude_chat.html, chat.js): elenco delle chat a sinistra, conversazione a destra */
.chat-griglia { display: grid; gap: var(--spazio); grid-template-columns: 1fr; min-height: 0; flex: 1; }
@media (min-width: 960px) { .chat-griglia { grid-template-columns: 280px minmax(0, 1fr); } }
.chat-elenco { min-height: 0; overflow: auto; }
@media (max-width: 959px) { .chat-elenco .righe { max-height: 28vh; overflow: auto; } }
.chat-nuova { display: flex; gap: 8px; align-items: center; }
.chat-nuova select { flex: 1; }
.chat-voce { display: block; color: inherit; text-decoration: none; min-width: 0; }
.chat-voce .titolo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attuale { background: var(--accento-tenue); border-radius: var(--raggio-piccolo); }
.chat-principale { display: flex; flex-direction: column; min-height: 70vh; min-width: 0; }
@media (min-width: 960px) { .chat-principale { min-height: 0; height: calc(100vh - 170px); } }
.chat-titolo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-azioni-testa { display: flex; gap: 6px; margin-left: auto; }
.chat-flusso { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-vuota { margin: auto; text-align: center; max-width: 420px; }
.chat-msg { display: flex; flex-direction: column; max-width: 100%; }
.chat-utente { align-items: flex-end; }
.chat-utente .chat-bolla { background: var(--accento); color: var(--su-accento); white-space: pre-wrap; word-break: break-word; max-width: 85%; }
.chat-claude .chat-bolla { background: var(--superficie-2); border: 1px solid var(--bordo); max-width: 100%; overflow-x: auto; }
.chat-bolla { padding: 10px 14px; border-radius: var(--raggio); }
.chat-utente.stato-da_inviare .chat-bolla { opacity: .7; }
.chat-meta { font-size: .72rem; color: var(--testo-3); margin-top: 3px; padding: 0 4px; }
.chat-strumento { font-size: .82rem; color: var(--testo-2); border-left: 2px solid var(--bordo-forte); padding: 2px 0 2px 10px; }
.chat-strumento summary { cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-strumento summary::-webkit-details-marker { display: none; }
.chat-strumento-testo { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
.chat-segno { display: inline-block; width: 1.2em; font-weight: 700; }
.stato-ok .chat-segno { color: var(--ok); }
.stato-errore .chat-segno { color: var(--pericolo); }
.stato-in_corso .chat-segno { color: var(--info); }
.chat-codice { background: var(--superficie-3); border-radius: var(--raggio-piccolo); padding: 8px 10px; margin: 6px 0 0; overflow: auto; max-height: 260px;
  font: .78rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.chat-permesso { border: 1px solid var(--attenzione); background: var(--attenzione-tenue); border-radius: var(--raggio); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.stato-consentito .chat-permesso, .stato-negato .chat-permesso, .stato-scaduto .chat-permesso { border-color: var(--bordo); background: var(--superficie-2); }
.chat-permesso-pulsanti { display: flex; gap: 8px; }
.chat-permesso .badge { align-self: flex-start; }
.chat-blocco-etichetta { font-size: .72rem; color: var(--testo-3); margin-top: 4px; }
.chat-blocco.meno .chat-codice { border-left: 3px solid var(--pericolo); }
.chat-blocco.piu .chat-codice { border-left: 3px solid var(--ok); }
.chat-avviso { font-size: .82rem; text-align: center; }
.chat-scrivi { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bordo); align-items: flex-end; }
.chat-scrivi textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 40vh; font: inherit; padding: 9px 12px; border-radius: var(--raggio-piccolo);
  border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--testo); }
.chat-scrivi textarea:focus { outline: none; box-shadow: var(--anello); border-color: var(--accento); }
@media (max-width: 599px) { .chat-scrivi .solo-largo { display: none; } }