/* === SISTEMA VISIVO 2026 · foglio della pagina (CONDIVISO) ===
   Questo file NON si modifica a mano nelle pagine: e' l'ex blocco <style>
   da ~49 KB che stava in coda alla <head> di ogni pagina, ESTRATTO qui una
   volta sola. Cambi al template della pagina si fanno QUI, in un posto solo.
   Le pastiglie di stato stanno nel foglio gemello /mg_pastiglie.css, che
   solo le pagine che le usano agganciano (alcune hanno pastiglie piene a
   testo chiaro e non vanno svuotate: per quelle il foglio pastiglie si
   OMETTE). L'accento e la carta arrivano dai token di mgds.css, caricato
   per ultimo: per questo qui il colore non conta piu'. */

/* === SISTEMA VISIVO 2026 · foglio della pagina ===
   Sta DENTRO la pagina, in coda alla <head>, e viene dopo il foglio
   della pagina: a parita' di specificita' vince chi viene dopo, e
   `html:root .x` (0,2,1) batte comunque `.x` (0,1,0).
   Generato da strumenti/riscrivi_cyber.py — non si modifica a mano. */
@font-face{font-family:'Geist';font-weight:400;font-display:swap;src:url('/fonts/geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url('/fonts/geist-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-display:swap;src:url('/fonts/geist-600.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:700;font-display:swap;src:url('/fonts/geist-700.woff2') format('woff2')}
@font-face{font-family:'GeistMono';font-weight:400;font-display:swap;src:url('/fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'GeistMono';font-weight:500;font-display:swap;src:url('/fonts/geist-mono-500.woff2') format('woff2')}
@font-face{font-family:'GeistMono';font-weight:600;font-display:swap;src:url('/fonts/geist-mono-600.woff2') format('woff2')}

html:root{
  --campo:#F4F7FC; --carta-2:#F4F7FC;
  --bordo:#E4E6E1; --bordo-2:#CBCFC8;
  --ink:#0F1E33; --ink-2:#5A6575; --ink-3:#8B95A2;
  --indaco:#012E60; --arancio:#2f6bef; --arancio-pieno:#2f6bef;
  --grave:#C4321F; --attesa:#A87400; --calmo:#7B8593; --verde:#0E7A50;
  --om:0 1px 2px rgba(15,30,51,.05); --r:8px; --rc:6px;
  --mg-wrap:min(1900px, 96vw);
  /* Misure dei comandi, dal tema comune. L'altezza resta 44px perche' e' la
     dimensione minima di un bersaglio da toccare col dito; il raggio scende
     da 10 a 6 come tutti gli altri comandi del sistema — era l'ultimo pezzo
     rimasto sulla scala vecchia. */
  --mg-ctrl-h:44px; --mg-ctrl-r:6px;
  /* Token che sei pagine usavano senza che nessuno li definisse — nemmeno il
     tema comune. Non e' un difetto introdotto adesso: quelle regole non hanno
     mai fatto niente, perche' il CSS non protesta su un var() sconosciuto,
     salta la dichiarazione e va avanti. Il testo con `color:var(--rosso)`
     restava del colore che aveva, e nessuno se n'e' accorto.
     Qui prendono il valore semantico corrispondente. */
  --errore:#C4321F; --rosso:#C4321F; --giallo:#A87400; --neutro:#7B8593;
  --mono:'GeistMono',ui-monospace,monospace;
  /* nomi storici: li leggono le pagine, mg_sidebar.js e mg_theme.js.
     NON ci sono --carta e --bianco: vedi l'intestazione dello strumento. */
  --superficie:#FFFFFF; --superficie-2:#F4F7FC; --surface:#FFFFFF; --surface2:#F4F7FC;
  --linea:#E3E9F2; --line:#E3E9F2; --border:#E3E9F2;
  --inchiostro:#0E1B2E; --text:#0E1B2E; --testo:#0E1B2E;
  --grigio:#5A6575; --muted:#5A6575; --muto:#7E8AA0;
  --bg:#EEF1F8; --blue:#012E60; --primario:#012E60; --navy:#012E60;
  --orange:#2f6bef; --font:'Geist',system-ui,-apple-system,sans-serif;
  --ok:#0E7A50; --green:#0E7A50; --warn:#A87400; --amber:#A87400;
  --err:#C4321F; --ko:#C4321F; --red:#C4321F; --info:#012E60;
  --nav:#141A22; --nav2:#1C2530;
  --ds-ombra:0 1px 2px rgba(15,30,51,.05); --ds-ombra-2:0 2px 6px rgba(15,30,51,.07);
  --ds-raggio:8px; --ds-raggio-sm:6px;
  --radius:8px; --raggio:8px; --r2:10px; --dash-raggio:8px; --mgc-r:8px; --mgc-r-sm:6px;
  --sh:0 1px 2px rgba(15,30,51,.05); --shadow:0 1px 2px rgba(15,30,51,.05);
  --ombra:0 1px 2px rgba(15,30,51,.05); --dash-ombra:0 1px 2px rgba(15,30,51,.05);
}
html:root[data-theme="dark"]{
  --campo:#0B0D11; --ink-2:#98A1AD; --ink-3:#5E6773;
  --grave:#F2503C; --attesa:#E0972B; --calmo:#7A8494;
  --om:inset 0 1px 0 rgba(255,255,255,.045); --border:rgba(255,255,255,.09); --text:#E9ECF0; --muted:#98A1AD;
  --bg:#0B0D11;
  --err:#F2503C; --ko:#F2503C; --info:#5B9CFF;
  --nav:#0B0D11; --nav2:#15181E;
  --ds-ombra:inset 0 1px 0 rgba(255,255,255,.045);
  --sh:inset 0 1px 0 rgba(255,255,255,.045);
  --shadow:inset 0 1px 0 rgba(255,255,255,.045);
  --ombra:inset 0 1px 0 rgba(255,255,255,.045);
  --dash-ombra:inset 0 1px 0 rgba(255,255,255,.045);
}


/* ======================================== IL TEMA COMUNE, PORTATO DENTRO
   Queste sono le regole di mg_theme.css, tutte.

   Togliendo il link al tema la pagina si porta dentro il proprio aspetto —
   che era il punto — ma perde i componenti che il tema definiva e che il suo
   markup continua a usare. La prima volta ho recuperato un ELENCO di
   componenti scelto a mano, e ho lasciato fuori proprio `.ds-card`, che e'
   quella che ha il padding: il contenuto finiva contro il bordo e le schede
   sembravano avere bordi diversi fra loro. Un elenco compilato a mano e'
   esattamente il posto in cui ci si dimentica una riga.

   Adesso si prende tutto e non si sceglie niente. Il foglio pesa 22 KB in
   piu' per pagina, ed e' un prezzo che si paga volentieri per non dover
   indovinare quali componenti servono a quale pagina.

   Vengono PRIMA delle regole del sistema, che quindi vincono dove le due si
   sovrappongono. L'avevo scritto e poi le avevo messe DOPO: risultato, il
   tema comune rivinceva sul sistema, e il pulsante del tema tornava in alto a
   destra sopra il contenuto invece di stare in basso. Un commento che dice il
   contrario di quello che fa il codice e' peggio di nessun commento, perche'
   si smette di leggere il codice. */
html:root,html:root body{font-family:'Geist',system-ui,-apple-system,sans-serif}
html:root .ds-grid{display:grid;gap:18px}
html:root .ds-grid.k2{grid-template-columns:repeat(2,1fr)}
html:root .ds-grid.k3{grid-template-columns:repeat(3,1fr)}
html:root .ds-grid.k4{grid-template-columns:repeat(4,1fr)}
html:root .ds-grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
html:root .ds-card{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--ds-raggio);
  box-shadow:var(--ds-ombra);padding:20px 22px;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
html:root .ds-card.hover:hover{transform:translateY(-2px);box-shadow:var(--ds-ombra-2)}
html:root .ds-card.pad-lg{padding:24px 26px}
html:root .ds-card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
html:root .ds-card-h h3{font-size:15px;font-weight:600;color:var(--inchiostro);letter-spacing:-.2px}
html:root .ds-card-h .sub{font-size:12px;color:var(--muto);font-weight:600}
html:root .ds-card-h .right{margin-left:auto}
html:root .ds-kpi{position:relative;display:flex;align-items:flex-start;gap:13px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--ds-raggio);box-shadow:var(--ds-ombra);padding:15px 16px;overflow:hidden}
html:root .ds-kpi:hover{border-color:var(--bordo-2,#CBCFC8)}
html:root .ds-kpi .ic{width:38px;height:38px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex:none;box-shadow:none;background:var(--superficie-2);border:1px solid var(--linea);
  color:var(--indaco)}
html:root .ds-kpi .ic svg{stroke:currentColor}
html:root .presence .ic svg{stroke:currentColor;width:24px;height:24px}
html:root .ds-kpi .ic.blue{color:#012E60;background:color-mix(in srgb,#012E60 8%,var(--superficie))}
html:root .ds-kpi .ic.indigo{color:#1B4B85;background:color-mix(in srgb,#1B4B85 8%,var(--superficie))}
html:root .ds-kpi .ic.orange{color:#2f6bef;background:color-mix(in srgb,#2f6bef 10%,var(--superficie))}
html:root .ds-kpi .ic.green{color:#0E7A50;background:color-mix(in srgb,#0E7A50 9%,var(--superficie))}
html:root .ds-kpi .ic.amber{color:#A87400;background:color-mix(in srgb,#A87400 10%,var(--superficie))}
html:root .ds-kpi .ic.red{color:#C4321F;background:color-mix(in srgb,#C4321F 8%,var(--superficie))}
html:root .ds-kpi .bd{min-width:0;flex:1}
html:root .ds-kpi .lbl{font-size:12px;color:var(--muto);font-weight:600;margin-bottom:4px;letter-spacing:.1px}
html:root .ds-kpi .val{font-size:29px;font-weight:600;color:var(--inchiostro);line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
html:root .ds-kpi .foot{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muto);margin-top:7px}
html:root .ds-kpi .spark{position:absolute;right:14px;bottom:12px;width:74px;height:30px;opacity:.9}
html:root .ds-trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:7px}
html:root .ds-trend.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
html:root .ds-trend.down{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
html:root .ds-trend.flat{color:var(--muto);background:color-mix(in srgb,var(--muto) 14%,transparent)}
html:root .ds-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  padding:4px 11px;border-radius:5px;background:var(--superficie-2);color:var(--inchiostro);border:1px solid var(--linea)}
html:root .ds-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
html:root .ds-badge.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:transparent}
html:root .ds-badge.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:transparent}
html:root .ds-badge.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err);border-color:transparent}
html:root .ds-badge.info{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info);border-color:transparent}
html:root .ds-list{display:flex;flex-direction:column}
html:root .ds-list .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
html:root .ds-list .row:first-child{border-top:0}
html:root .ds-list .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--indaco);box-shadow:0 0 0 4px color-mix(in srgb,var(--indaco) 16%,transparent)}
html:root .ds-list .row .t{flex:1;min-width:0}
html:root .ds-list .row .t b{font-size:13.5px;color:var(--inchiostro);font-weight:500;display:block}
html:root .ds-list .row .t span{font-size:12px;color:var(--muto)}
html:root .ds-list .row .when{font-size:11.5px;color:var(--muto);white-space:nowrap}
html:root .ds-sect{font-size:12px;font-weight:600;color:var(--muto);text-transform:uppercase;letter-spacing:1px;margin:6px 0 12px}
html:root[data-theme="dark"] .ds-card,html:root[data-theme="dark"] .ds-kpi{box-shadow:none;border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.018), transparent), var(--superficie);}
html:root[data-theme="dark"] .ds-card.hover:hover,html:root[data-theme="dark"] .ds-kpi:hover{box-shadow:0 8px 28px rgba(0,0,0,.45);border-color:rgba(111,160,234,.35)}
html:root[data-theme="dark"] .ds-kpi .ic{box-shadow:0 4px 14px rgba(0,0,0,.4)}
html:root[data-theme="dark"] body{background:var(--bg);color:var(--inchiostro)}
html:root[data-theme="dark"] ::selection{background:rgba(255,122,26,.35)}
html:root[data-theme="dark"] .topbar{background:#101A2B;border-bottom-color:var(--linea)}
html:root[data-theme="dark"] .topbar input,html:root[data-theme="dark"] .topbar .cerca,html:root[data-theme="dark"] .topbar .search{background:#0C1422;color:var(--inchiostro);border-color:var(--linea)}
html:root[data-theme="dark"] .card,html:root[data-theme="dark"] .box,html:root[data-theme="dark"] .panel,html:root[data-theme="dark"] .kpi,html:root[data-theme="dark"] .sez,html:root[data-theme="dark"] .tile,html:root[data-theme="dark"] .widget,html:root[data-theme="dark"] .pannello{background:var(--superficie);
  border-color:var(--linea);
  color:var(--inchiostro);
  box-shadow:none;}
html:root[data-theme="dark"] .kpi .kpi-v,html:root[data-theme="dark"] .kpi-v{color:var(--inchiostro)}
html:root[data-theme="dark"] .kpi .kpi-l,html:root[data-theme="dark"] .kpi-l,html:root[data-theme="dark"] .muted,html:root[data-theme="dark"] .muto{color:var(--muto)}
html:root[data-theme="dark"] [style*="background:#fff"],html:root[data-theme="dark"] [style*="background:#FFF"],html:root[data-theme="dark"] [style*="background: #fff"],html:root[data-theme="dark"] [style*="background-color:#fff"]{background:var(--superficie) !important;}
html:root[data-theme="dark"] table{color:var(--inchiostro);border-color:var(--linea)}
html:root[data-theme="dark"] thead th,html:root[data-theme="dark"] th{background:var(--superficie-2);color:var(--inchiostro);border-color:var(--linea)}
html:root[data-theme="dark"] td{border-color:var(--linea)}
html:root[data-theme="dark"] tbody tr:hover{background:#18243A}
html:root[data-theme="dark"] input,html:root[data-theme="dark"] select,html:root[data-theme="dark"] textarea{background:#0F1A2B;color:var(--inchiostro);border-color:var(--linea);}
html:root[data-theme="dark"] input::placeholder,html:root[data-theme="dark"] textarea::placeholder{color:var(--muto)}
html:root[data-theme="dark"] .btn{background:#2B5BB0;color:#fff;border-color:#2B5BB0}
html:root[data-theme="dark"] .btn:hover{filter:brightness(1.08)}
html:root[data-theme="dark"] .btn.sec,html:root[data-theme="dark"] .btn.secondary,html:root[data-theme="dark"] .btn.ghost,html:root[data-theme="dark"] .btn.mini.sec{background:#1A2740;color:var(--inchiostro);border:1px solid var(--linea)}
html:root[data-theme="dark"] .btn.arancio,html:root[data-theme="dark"] .btn.primary-orange{background:var(--indaco);color:#1a1206;border-color:var(--arancio)}
html:root[data-theme="dark"] .pill,html:root[data-theme="dark"] .tag,html:root[data-theme="dark"] .chip,html:root[data-theme="dark"] .badge{background:#1C2740;color:var(--inchiostro);border-color:var(--linea)}
html:root[data-theme="dark"] .pill.ok{background:rgba(31,138,91,.18);color:#5FD3A0}
html:root[data-theme="dark"] .pill.warn{background:rgba(199,119,0,.18);color:#F2B560}
html:root[data-theme="dark"] .pill.err,html:root[data-theme="dark"] .pill.neg{background:rgba(192,57,43,.18);color:#F08C82}
html:root[data-theme="dark"] .tabs,html:root[data-theme="dark"] .tabs button{color:var(--inchiostro)}
html:root[data-theme="dark"] .tabs button.on{color:var(--arancio);border-color:var(--arancio)}
html:root[data-theme="dark"] a{color:var(--indaco)}
html:root[data-theme="dark"] code,html:root[data-theme="dark"] pre{background:#0C1422;color:#D6DEEA;border-color:var(--linea)}
html:root[data-theme="dark"] .num.pos,html:root[data-theme="dark"] .pos{color:#5FD3A0}
html:root[data-theme="dark"] .num.neg,html:root[data-theme="dark"] .neg{color:#F08C82}
html:root .mg-theme-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--linea);
  background:transparent;color:var(--grigio);cursor:pointer;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:background .15s,color .15s;flex:none;}
html:root .mg-theme-btn:hover{color:var(--arancio);border-color:var(--arancio)}
html:root[data-theme="dark"] .mg-theme-btn{color:var(--inchiostro);border-color:var(--linea)}
html.mg-theme-anim,html.mg-theme-anim *{transition:background-color .2s ease, color .2s ease, border-color .2s ease !important}
html:root body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html:root .card,html:root .box,html:root .panel,html:root .tile,html:root .widget,html:root .pannello,html:root .sez{border-radius:var(--ds-raggio);
  box-shadow:var(--ds-ombra);
  transition:box-shadow .16s ease, border-color .16s ease;}
html:root .btn{transition:filter .15s ease, box-shadow .15s ease, transform .05s ease}
html:root .btn:hover{filter:brightness(1.06)}
html:root .btn:active{transform:translateY(1px)}
html:root input,html:root select,html:root textarea{transition:border-color .15s ease, box-shadow .15s ease}
html:root input:focus,html:root select:focus,html:root textarea:focus{outline:none;
  border-color:var(--arancio);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--arancio) 18%, transparent);}
html:root tbody tr{transition:background .12s ease}
html:root a:focus-visible,html:root button:focus-visible,html:root .btn:focus-visible,html:root [tabindex]:focus-visible{outline:2px solid var(--arancio);outline-offset:2px;border-radius:4px;}
html:root{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--indaco) 30%,transparent) transparent}
html:root *::-webkit-scrollbar{width:11px;height:11px}
html:root *::-webkit-scrollbar-track{background:transparent}
html:root *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--indaco) 26%,transparent);border-radius:8px;border:3px solid transparent;background-clip:content-box}
html:root *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--indaco) 44%,transparent);background-clip:content-box}
html:root ::selection{background:color-mix(in srgb,var(--arancio) 28%,transparent)}
html:root[data-theme="dark"] input:focus,html:root[data-theme="dark"] select:focus,html:root[data-theme="dark"] textarea:focus{border-color:var(--arancio);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--arancio) 22%, transparent);}
html:root .wrap > h1,html:root body > h1{font-size:22px;font-weight:600;letter-spacing:-.5px;margin:0 0 4px;color:var(--inchiostro)}
html:root body > h1{margin:18px 22px 14px}
html:root .wrap > h1 + .sub,html:root .wrap > .sub{display:block;font-size:13px;color:var(--muto);margin:0 0 18px}
html:root thead th,html:root table > thead th{font-weight:500;border-bottom:1px solid var(--linea)}
html:root td,html:root th{border-color:var(--linea)}
html:root tbody tr:hover{background:color-mix(in srgb,var(--indaco) 5%,transparent)}
html:root .mg-theme-fab{position:fixed;top:10px;right:12px;z-index:60;width:38px;height:38px;border-radius:8px;
  border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);font-size:17px;line-height:1;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
html:root .mg-theme-fab:hover{border-color:var(--indaco)}
html:root :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),select,textarea){font-family:inherit; font-size:15px; line-height:1.2;
  min-height:var(--mg-ctrl-h);
  padding:10px 12px;
  border:1px solid var(--linea);
  border-radius:var(--mg-ctrl-r);
  background:var(--superficie);
  color:var(--inchiostro);
  box-sizing:border-box;}
html:root :where(textarea){min-height:92px;}
html:root :where(select){-webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;}
html:root :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),select,textarea):focus{outline:none;
  border-color:var(--indaco);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--indaco) 14%, transparent);}
html:root :where(.wrap){max-width:var(--mg-wrap); margin:0 auto; padding:22px 16px 60px;}
html:root :where(.wrap>h1,h1.mg-title){font-size:22px; font-weight:600; letter-spacing:-.5px; margin:0 0 3px; color:var(--inchiostro);}
html:root :where(.sub,.sotto){color:var(--muto); font-size:13.5px; line-height:1.4; margin-bottom:14px;}
html:root :where(.card,.box){background:var(--superficie); border:1px solid var(--linea); border-radius:8px;
  box-shadow:var(--ds-ombra); padding:18px; margin-top:14px;}
/* Dentro un riquadro il body perde il padding della barra laterale, ma i
   margini orizzontali vanno ad AUTO, non a zero: margin-left:0 uccideva il
   `margin:0 auto` delle pagine con larghezza massima (Aggiorna in sicurezza,
   640px) e il contenuto restava incollato a sinistra invece che centrato. */
html[data-incorporata="1"] body{padding-left:0 !important;margin-left:auto !important;margin-right:auto !important}
html[data-incorporata="1"] .mg-sidebar,html[data-incorporata="1"] .mg-topbar,html[data-incorporata="1"] #mgSidebar,html[data-incorporata="1"] #mgHamb{display:none !important}
html:root .ds-hero{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
html:root .ds-hero h1{margin:6px 0 0;font-size:24px;letter-spacing:-.5px;color:var(--inchiostro);font-weight:600}
html:root .ds-hero .sommario{margin:6px 0 0;font-size:13.5px;color:var(--grigio)}
html:root .ds-hero .sommario b{color:var(--inchiostro)}
html:root .ds-hero .azioni{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
html:root .ds-eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--arancio);font-weight:600}
html:root .ds-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;
  padding:3px 10px;border-radius:5px;background:var(--superficie-2);color:var(--grigio);white-space:nowrap}
html:root .ds-pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
html:root .ds-pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
html:root .ds-pill.err{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
html:root .ds-pill.info{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
html:root .ds-pill.on{background:var(--indaco);color:#fff}
html:root button.ds-pill{border:0;cursor:pointer;font-family:inherit}
html:root button.ds-pill:hover{filter:brightness(.97)}
html:root .ds-filtri{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
html:root .ds-filtri .campo{display:flex;flex-direction:column;gap:5px;min-width:150px}
html:root .ds-filtri .campo.largo{flex:1;min-width:220px}
html:root .ds-filtri label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio);font-weight:600}
html:root .ds-filtri input,html:root .ds-filtri select{padding:9px 11px;border:1px solid var(--linea);border-radius:8px;
  background:var(--superficie);color:var(--inchiostro);font-family:inherit;font-size:13.5px;width:100%}
html:root .ds-filtri input:focus,html:root .ds-filtri select:focus{outline:none;border-color:var(--indaco);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--indaco) 15%,transparent)}
html:root .ds-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
html:root .ds-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  background:color-mix(in srgb,var(--indaco) 9%,transparent);color:var(--indaco);
  border:1px solid color-mix(in srgb,var(--indaco) 22%,transparent);border-radius:5px;padding:5px 8px 5px 12px}
html:root .ds-chip button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;font-size:14px;
  line-height:1;padding:0 3px;opacity:.65}
html:root .ds-chip button:hover{opacity:1}
html:root .ds-tab{width:100%;border-collapse:collapse}
html:root .ds-tab th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio);
  font-weight:600;text-align:left;padding:0 10px 11px;white-space:nowrap}
html:root .ds-tab td{padding:11px 10px;border-top:1px solid var(--linea);font-size:13px;
  color:var(--inchiostro);vertical-align:top}
html:root .ds-tab tbody tr.cliccabile{cursor:pointer}
html:root .ds-tab tbody tr:hover td{background:var(--superficie-2)}
html:root .ds-tab td small{display:block;color:var(--grigio);font-size:11px;margin-top:2px}
html:root .ds-tab .num{font-variant-numeric:tabular-nums;white-space:nowrap}
html:root .ds-vuoto{color:var(--grigio);font-size:13px;padding:20px 4px;text-align:center}
html:root .ds-modal{position:fixed;inset:0;background:rgba(7,22,45,.5);z-index:1000;display:none;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
html:root .ds-modal.aperta{display:flex}
html:root .ds-modal .foglio{background:var(--superficie);border-radius:5px;width:100%;max-width:760px;
  max-height:calc(100vh - 80px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 70px rgba(7,22,45,.32);margin:auto}
html:root .ds-modal .testa{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--linea)}
html:root .ds-modal .testa h3{flex:1;margin:0;font-size:16px;font-weight:600;color:var(--inchiostro)}
html:root .ds-modal .chiudi{background:none;border:0;font-size:15px;color:var(--grigio);cursor:pointer;
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
html:root .ds-modal .chiudi:hover{background:var(--superficie-2);color:var(--inchiostro)}
html:root .ds-modal .corpo{padding:18px 22px;overflow-y:auto}
html:root .ds-modal .piede{display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--linea)}
html:root .ds-dett{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--linea)}
html:root .ds-dett .k{font-size:12.5px;color:var(--grigio)}
html:root .ds-dett .v{font-size:13px;text-align:right;word-break:break-word}
html:root .ds-pre{background:var(--superficie-2);border:1px solid var(--linea);border-radius:8px;padding:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;white-space:pre-wrap;
  word-break:break-word;max-height:280px;overflow:auto;margin-top:10px}
html:root .ds-riservato{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--arancio) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--arancio) 28%,transparent);border-radius:8px;
  padding:12px 14px;font-size:12.5px;color:var(--inchiostro);margin-bottom:16px}
html:root .ds-riservato b{color:var(--arancio)}
html:root .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--indaco);color:#fff;border:1px solid var(--indaco);
  border-radius:8px;padding:10px 16px;font-family:inherit;font-size:13px;
  font-weight:500;cursor:pointer;text-decoration:none;line-height:1.2}
html:root .btn:hover{filter:brightness(1.06)}
html:root .btn:disabled{opacity:.55;cursor:default;filter:none}
html:root .btn.sec,html:root .btn.secondary,html:root .btn.ghost,html:root .btn.gh{background:var(--superficie);color:var(--inchiostro);
  border:1px solid var(--linea)}
html:root .btn.sec:hover,html:root .btn.secondary:hover,html:root .btn.ghost:hover,html:root .btn.gh:hover{border-color:var(--indaco)}
html:root .btn.mini{padding:6px 11px;font-size:12px;border-radius:8px}
html:root .btn.arancio,html:root .btn.ar,html:root .btn.primary-orange{background:var(--arancio);border-color:var(--arancio);color:#fff}
@media(max-width:1100px){html:root .ds-grid.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){html:root .ds-grid.k2,html:root .ds-grid.k3,html:root .ds-grid.k4{grid-template-columns:1fr}}
@media(max-width:1024px){html:root .grid4,html:root .grid3,html:root .kpi,html:root .kpis{grid-template-columns:repeat(2,1fr)}html:root .ds-grid.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){html:root .grid,html:root .grid2,html:root .grid3,html:root .grid4,html:root .row2,html:root .cards,html:root .pcards,html:root .filtri,html:root .cc-two,html:root .areas,html:root .cru,html:root .two{grid-template-columns:1fr}html:root .ds-grid.k2,html:root .ds-grid.k3,html:root .ds-grid.k4{grid-template-columns:1fr}html:root .kpi,html:root .kpis,html:root .k4{grid-template-columns:repeat(2,1fr)}html:root [style*="grid-template-columns"]{grid-template-columns:1fr !important}html:root .grid>*,html:root .grid2>*,html:root .grid3>*,html:root .grid4>*,html:root .campi>*,html:root .form>*,html:root .due>*,html:root .tre>*,html:root .quattro>*,html:root [style*="grid-template-columns"]>*,html:root [style*="grid-column"]{grid-column:auto !important;grid-row:auto !important}html:root .wrap{padding-left:14px;padding-right:14px}html:root img{max-width:100%;height:auto}html:root .wrap > h1,html:root body > h1{font-size:20px}html:root table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:13px}html:root .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}html:root .tabs button,html:root .tabs a,html:root .tabs .tab{white-space:nowrap;flex:0 0 auto}html:root .modal-box,html:root .modal-card,html:root .modal-content,html:root .modal-box-lg{max-width:94vw}}
@media(max-width:980px){html:root .mg-theme-fab{top:8px;right:8px}}
@media(max-width:760px){html:root .ds-hero .azioni{margin-left:0;width:100%}html:root .ds-filtri .campo{min-width:100%}html:root .ds-modal{padding:0}html:root .ds-modal .foglio{max-width:100%;min-height:100vh;max-height:100vh;border-radius:0}
/* Sotto i 760px i FORM a griglia (.grid) vanno a UNA colonna e ogni campo torna
   a occupare la propria colonna: senza questo, i campi che nel desktop spannano
   piu' colonne (grid-column:1/3, 1/4) creano colonne implicite strette in cui
   gli altri campi si accalcano e le select si tagliano. Copre telefoni e
   phablet, non solo <=640. */
html:root .grid{grid-template-columns:1fr}html:root .grid>*,html:root [style*="grid-column"]{grid-column:auto !important;grid-row:auto !important}html:root .grid input,html:root .grid select,html:root .grid textarea{max-width:100%}}

/* ------------------------------------------------- fascia per ID
   Le pagine chiamano il contenitore delle tessere in troppi modi perche'
   inseguirli per classe abbia senso: dentro #kpis ho trovato figli .k,
   .kpi, .ds-kpi, .card, .mini, .box. Quarantasette pagine pero' usano lo
   stesso ID, e l'ID e' una cosa sola per pagina: si prende quello e si
   stilano i figli diretti, qualunque nome abbiano.

   E' il motivo per cui SOC Log & SIEM, Identity Control Center e
   Vulnerabilita' Wazuh restavano una colonna di numeri sciolti: le loro
   celle non si chiamano .kpi, e io cercavo .kpi. */
html:root #kpis,html:root #kpi,html:root #sintesi,html:root #riepilogo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--bordo);border:1px solid var(--bordo);
  border-radius:var(--ds-raggio);box-shadow:var(--ds-ombra);overflow:hidden;
  margin-bottom:16px;padding:0;
}
html:root #kpis > *,html:root #kpi > *,html:root #sintesi > *,html:root #riepilogo > *{
  background:var(--superficie);border:0;border-radius:0;box-shadow:none;
  padding:13px 16px;margin:0;min-width:0;overflow-wrap:anywhere;
}
/* Le celle scritte a mano hanno tre forme ricorrenti per l'etichetta e due
   per la cifra. Si coprono tutte: una cella con la cifra da 13px in mezzo a
   celle con la cifra da 24px si legge come un errore. */
/* `.d` NON e' in questo elenco, ed e' stato un errore mettercelo. Nei mockup
   .d vuol dire «descrizione», sotto il numero; sulla pagina del bilancio vuol
   dire «delta», cioe' la variazione sull'anno prima — e questa regola la
   dipingeva grigia sopra il verde e il rosso che la pagina aveva gia'
   messo. Un nome di una lettera sola non basta a dire che cosa e' una cosa. */
html:root #kpis .t,html:root #kpis .l,html:root #kpis .lbl,
html:root #kpi .t,html:root #kpi .l,html:root #kpi .lbl{
  font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:0;
  margin:0 0 2px;text-transform:none;display:block}
/* La variazione si legge dal colore prima che dal triangolino. */
html:root .d.up,html:root .up.d{color:var(--verde)}
html:root .d.down,html:root .down.d{color:var(--grave)}
/* Un importo non va a capo: «(42.093.950,45)» spezzato dopo la virgola con la
   parentesi sola sulla riga sotto non e' un numero, e' un refuso. Si stringe
   invece di spezzarsi, e sotto i 560 la cella se ne prende una intera. */
html:root #kpis .n,html:root #kpis .v,html:root #kpis .val,
html:root #kpi .n,html:root #kpi .v,html:root #kpi .val{
  font-family:'GeistMono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(15px,4.4vw,24px);font-weight:500;letter-spacing:-.03em;
  line-height:1.2;color:var(--indaco);display:block;
  white-space:nowrap;overflow-wrap:normal}
html:root #kpis .k.bad .n,html:root #kpi .k.bad .n{color:var(--grave)}
html:root #kpis .k.warn .n,html:root #kpi .k.warn .n{color:var(--attesa)}
html:root #kpis .k.ok .n,html:root #kpi .k.ok .n{color:var(--verde)}
@media(max-width:560px){
  /* Due colonne esatte: cosi' «ultimo figlio in posizione dispari» vuol dire
     davvero «solo sulla sua riga», e la cella puo' prendersela tutta invece di
     lasciare accanto un rettangolo grigio — che poi non e' grigio per scelta,
     e' il fondo del contenitore che si vede dove la cella non c'e'. */
  html:root #kpis,html:root #kpi,html:root #sintesi,html:root #riepilogo,
  html:root .ds-grid:has(> .ds-kpi),html:root .kpis:has(> .kpi),
  html:root .kpi-grid:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))}
  /* La cella rimasta sola prende la riga intera E si centra: allineata a
     sinistra come le altre, in mezzo a una riga larga il doppio, sembra una
     cella a cui manca la vicina. Centrata sembra quello che e', cioe' un
     totale che sta per conto suo. */
  html:root #kpis > *:last-child:nth-child(odd),
  html:root #kpi > *:last-child:nth-child(odd),
  html:root .ds-grid:has(> .ds-kpi) > *:last-child:nth-child(odd),
  html:root .kpis:has(> .kpi) > *:last-child:nth-child(odd),
  html:root .kpi-grid:has(> .kpi) > *:last-child:nth-child(odd){
    grid-column:1 / -1;text-align:center}
}
@media(max-width:760px){
  html:root #kpis > *,html:root #kpi > *{padding:11px 13px}
}

/* I campi di un filtro non sono blocchi: se perdono il flex diventano larghi
   quanto la scheda e il comando in fondo esce dal bordo. */
html:root .ds-filtri .campo,html:root .filtri .campo{min-width:0}
@media(max-width:760px){
  html:root .ds-filtri,html:root .filtri{flex-wrap:wrap}
  html:root .ds-filtri .campo,html:root .filtri .campo{min-width:100%}
}

/* ------------------------------------------------------------- base */
html:root body{background:var(--campo);color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
html:root button,html:root input,html:root select,html:root textarea,html:root table{
  font-family:'Geist',system-ui,-apple-system,sans-serif}
html:root h1{font-size:21px;font-weight:600;letter-spacing:-.02em}
html:root h2{font-size:15px;font-weight:600;letter-spacing:-.02em}
html:root h3{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
html:root .wrap,html:root .container,html:root .contenuto{max-width:var(--mg-wrap)}

/* La barra scura in cima ad alcune pagine: resta scura ma smette di essere
   blu notte, che sul fondo caldo stona. */
/* La barra NON ha un'altezza fissa, e questa e' la riga che ha tenuto in piedi
   il difetto per tre versioni.

   Le avevo dato height:52px pensando alle pagine con una barra slanciata in
   cima. Quando poi la barra ha imparato ad andare a capo, la scatola e'
   rimasta alta 52 e il contenuto della seconda riga — «Aggiungi documento» a
   larghezza piena — usciva dal fondo e finiva sopra la scheda sotto. I
   margini che ho aggiunto due volte non potevano funzionare: il problema non
   era lo spazio DOPO la barra, era che la barra non conteneva il suo
   contenuto. */
html:root .topbar{background:var(--superficie);color:var(--ink);
  border-bottom:1px solid var(--bordo)}
html:root .topbar .logo{font-size:16px;font-weight:600;color:var(--indaco);letter-spacing:-.02em}
/* Il lato destro della barra ha un proprietario: .tb-right, creato da
   mg_theme.js se la pagina non ce l'ha. Prima luna e campanello venivano
   appesi in coda alla .topbar, cioe' DOPO un eventuale margin-left:auto di un
   altro pulsante: sui fascicoli erano tre elementi a contendersi lo stesso
   lato, e sul telefono la riga usciva dalla barra sovrapponendosi all'elenco. */
html:root .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;min-height:56px;height:auto}
html:root .tb-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
html:root .tb-right button,html:root .topbar .mg-theme-btn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--rc);border:1px solid var(--bordo);background:var(--superficie);
  font-size:15px;line-height:1;cursor:pointer;padding:0}
html:root .tb-right button:hover,html:root .topbar .mg-theme-btn:hover{background:var(--campo)}
@media(max-width:760px){
  /* Sotto i 760 il comando principale della barra prende una riga sua: in fila
     con nome e comandi di sistema non ci sta, e finiva sopra il contenuto. */
  html:root .topbar > button:not(.mg-theme-btn):last-of-type,
  html:root .topbar .addbtn{flex:1 1 100%;margin-left:0;order:3;margin-top:4px}
  /* La barra si stacca da quello che viene dopo: un comando appiccicato al
     bordo della scheda sotto sembra parte della scheda, e non lo e'. */
  html:root .topbar{margin-bottom:14px}
  html:root .tb-right{order:2}
}

/* --------------------------------------------------- contenitori */
html:root .card,html:root .box,html:root .panel,html:root .scheda,
html:root .tile,html:root .widget,html:root .riquadro,html:root .wcard,
html:root .kpic,html:root .mgc-card,html:root .ds-card,html:root .sheet{
  background:var(--superficie);border:1px solid var(--bordo);
  border-radius:var(--ds-raggio);box-shadow:var(--ds-ombra);
}
html:root .card:hover,html:root .box:hover,html:root .ds-card:hover,
html:root .scheda:hover,html:root .kpi:hover{transform:none}

/* --------------------------------------------------------- numeri
   In questo prodotto i numeri SONO il contenuto: importi, punteggi, conti
   alla rovescia. Se non sono incolonnati due righe vicine non si
   confrontano a occhio, e la tabella smette di servire. */
html:root .value,html:root .kpi-valore,html:root .numero,html:root .big,
html:root .val,html:root .score,html:root .kpi .n,html:root .kpi .v{
  font-family:'GeistMono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;font-weight:500;
}

/* ---------------------------------------------------------- tessere KPI
   Dove le tessere stanno in una griglia, la griglia diventa la fascia di
   sintesi: quattro schede staccate sembrano quattro cose indipendenti, una
   fascia sola racconta una progressione. Il markup non si tocca.

   LA PRIMA STESURA USAVA display:flex ED E' STATA UN ERRORE, visto su un
   telefono e non qui. Con flex le celle si comprimono all'infinito: sulla
   dashboard cinque tessere in 400px diventavano cinque colonne da 80px con
   le etichette sovrapposte una sull'altra. Il rimedio non e' un'altra soglia
   — le soglie fisse sono il motivo per cui c'era da rimediare. E' una
   griglia che si conta le colonne da sola: sotto una certa larghezza la
   colonna non ci sta e va a capo, senza che nessuno abbia deciso a quanti
   pixel succede.

   I filetti sono il `gap` colorato di fondo, non un border sulla cella:
   cosi' restano giusti in qualunque disposizione le celle finiscano, anche
   a tre sopra e due sotto, dove i border-right darebbero linee appese. */
html:root .ds-grid:has(> .ds-kpi),html:root .kpis:has(> .kpi),
html:root .kpi-grid:has(> .kpi){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--bordo);border:1px solid var(--bordo);
  border-radius:var(--ds-raggio);box-shadow:var(--ds-ombra);overflow:hidden;
}
html:root .ds-grid:has(> .ds-kpi) > .ds-kpi,
html:root .kpis:has(> .kpi) > .kpi,
html:root .kpi-grid:has(> .kpi) > .kpi{
  background:var(--superficie);border:0;border-radius:0;box-shadow:none;
  padding:13px 16px;display:block;min-width:0;overflow-wrap:anywhere;
}
/* Il quadrato con l'emoji sparisce dentro la fascia: in una riga di numeri
   ruba meta' della larghezza e non dice niente in piu' dell'etichetta. */
html:root .ds-grid:has(> .ds-kpi) .ic,html:root .kpis:has(> .kpi) .ic{display:none}
html:root .ds-kpi .lbl,html:root .kpi .l,html:root .kpi .lbl{
  font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:0;margin:0 0 2px;
  overflow-wrap:anywhere}
/* La cifra si stringe da sola sugli schermi stretti invece di uscire dalla
   cella: e' l'unico elemento che non puo' andare a capo. */
html:root .ds-kpi .val,html:root .kpi .n,html:root .kpi .v{
  font-size:clamp(18px,4.6vw,24px);font-weight:500;line-height:1.2;color:var(--indaco)}
html:root .ds-kpi .foot{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* -------------------------------------------------------- tabelle
   La testata a fondo indaco pieno col testo bianco era una barra scura che
   gridava sopra il dato, che e' il motivo per cui la pagina si apre. */
html:root th{background:transparent;color:var(--ink-3);text-align:left;
  font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;
  border-bottom:1px solid var(--bordo)}
html:root td{border-bottom:1px solid var(--bordo)}
html:root tbody tr:hover{background:var(--carta-2)}

/* -------------------------------------------------------- comandi
   L'arancio e' l'unica azione arancione della schermata: se ce ne fossero
   due, una delle due non era la prima cosa. */
html:root .btn{font:inherit;font-size:13px;font-weight:500;padding:8px 13px;
  border-radius:var(--rc);border:1px solid var(--arancio-pieno);cursor:pointer;
  background:var(--arancio-pieno);color:#fff}
html:root .btn:hover{filter:brightness(.94)}
html:root .btn.sec,html:root .btn.ghost,html:root .btn.calmo{
  background:var(--superficie);color:var(--ink);border-color:var(--bordo-2)}
html:root .btn.sec:hover{background:var(--campo);filter:none}
html:root .btn.mini{padding:4px 9px;font-size:12px}
html:root .btn.danger{background:var(--grave);border-color:var(--grave)}
/* Un comando spento non e' un comando arancione con meno inchiostro: a
   opacita' 45 il testo bianco su arancio pallido non si legge, e sembra un
   difetto invece di uno stato. Spento vuol dire grigio. */
html:root .btn.off,html:root .btn[disabled],html:root button[disabled]{
  background:var(--superficie);color:var(--ink-3);border-color:var(--bordo);
  opacity:1;cursor:default;filter:none}
html:root button:focus-visible,html:root .btn:focus-visible,
html:root input:focus-visible,html:root select:focus-visible,
html:root textarea:focus-visible{outline:2px solid var(--indaco);outline-offset:2px}
html:root input,html:root select,html:root textarea{
  border:1px solid var(--bordo-2);border-radius:var(--rc);
  background:var(--superficie);color:var(--ink);font-size:13px}
html:root label{font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}

/* ---------------------------------------------------------- linguette
   Il rettangolo pieno con l'angolo tondo in alto e' la firma dei pannelli
   generati. Qui l'attivo e' un filetto sotto la parola. */
html:root .tabs{border-bottom:1px solid var(--bordo);gap:2px}
html:root .tab{border:0;border-bottom:2px solid transparent;border-radius:0;
  background:none;font-weight:400;color:var(--ink-3);margin-bottom:-1px;
  padding:10px 12px;cursor:pointer;font:inherit;font-size:13px}
html:root .tab:hover{color:var(--ink)}
html:root .tab.on,html:root .tab.attiva,html:root .tab.active{
  background:none;color:var(--ink);font-weight:500;border-bottom-color:var(--arancio-pieno)}

/* ----------------------------------------------------------- finestre */
/* `.modal` NON si tocca, ed e' una lezione gia' imparata una volta con `.d`.
   Su alcune pagine .modal e' il velo scuro che copre lo schermo; su altre —
   45_fascicoli fra queste — e' la finestra bianca dentro il velo, che si
   chiama .ov. Dare un fondo semitrasparente a `.modal` sulla seconda vuol
   dire dipingere di grigio il contenuto della finestra, ed e' esattamente
   quello che e' successo: «Storia del documento» era diventato un rettangolo
   grigio con dentro il testo. Si stila solo .ds-modal, che e' un nome del
   design system e vuol dire una cosa sola. */
html:root .sheet{box-shadow:0 8px 30px rgba(11,13,17,.18)}
html:root .sh-h{background:var(--carta-2);border-bottom:1px solid var(--bordo)}
html:root .sh-h h3{font-size:15px;font-weight:600}

/* -------------------------------------------------------------- note
   Non decorano: scrivono la CONSEGUENZA. "Scaduto" e' un dato; "finche' e'
   scaduta la mansione non e' idonea" e' cio' che fa prendere una decisione. */
html:root .msg,html:root .warn-box,html:root .nota,html:root .obs,html:root .nvd{
  background:none;border:0;border-left:2px solid var(--bordo-2);border-radius:0;
  padding:2px 0 2px 11px;color:var(--ink-2);font-size:12.2px;line-height:1.5}
html:root .msg.warn,html:root .warn-box{border-left-color:var(--arancio-pieno)}
html:root .msg.err,html:root .msg.danger{border-left-color:var(--grave)}
html:root .msg.ok{border-left-color:var(--verde)}

html:root .empty,html:root .vuoto{color:var(--ink-3);font-size:12.5px;text-align:center}

/* il pulsante del tema vive in mg_theme.js e senza mg_theme.css sarebbe informe */
html:root .mg-theme-btn,html:root .mg-theme-fab{font:inherit;font-size:14px;
  line-height:1;cursor:pointer;background:var(--superficie);color:var(--ink);
  border:1px solid var(--bordo-2);border-radius:var(--rc);width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center}
html:root .mg-theme-fab{position:fixed;right:14px;bottom:14px;z-index:70;box-shadow:var(--om)}

/* ------------------------------------------------------- caselle
   Una casella di spunta non e' un campo con l'etichetta sopra: l'etichetta
   le sta accanto e non va in maiuscoletto, altrimenti sullo schermo stretto
   la casella resta sola a sinistra e tre parole maiuscole le galleggiano
   accanto — che e' quello che succedeva su Vulnerabilita' Wazuh. */
html:root input[type="checkbox"],html:root input[type="radio"]{
  width:18px;height:18px;flex:none;accent-color:var(--indaco);margin:0}
html:root .campo:has(> input[type="checkbox"]),
html:root .campo:has(> input[type="radio"]),
html:root label:has(> input[type="checkbox"]),
html:root label:has(> input[type="radio"]){
  flex-direction:row;align-items:center;gap:9px;min-width:0}
html:root .campo:has(> input[type="checkbox"]) label,
html:root .campo:has(> input[type="radio"]) label{
  text-transform:none;letter-spacing:0;font-size:12.8px;font-weight:400;
  color:var(--ink-2);order:2}

@media(max-width:760px){
  html:root input,html:root select,html:root textarea{font-size:16px}
  html:root .btn{min-height:38px}
  /* Le righe che accostano un titolo e una spiegazione: se non vanno a capo,
     il titolo si strizza in due parole per riga e la spiegazione si prende il
     resto — «Piano di rimedio» su due righe accanto al suo sottotitolo. */
  html:root .ds-card-h,html:root .ds-hero,html:root .testa,html:root .head,
  html:root .azioni,html:root .actions,html:root .toolbar,html:root .bar,
  html:root .filtri,html:root .campi{flex-wrap:wrap}
  html:root .ds-card-h h3,html:root .ds-hero h1{min-width:0;flex:1 1 100%}
  /* Le griglie a colonne fisse diventano una colonna: sotto i 560 una
     colonna da 280px in una pagina da 393 e' meta' contenuto fuori campo. */
  html:root [class*="griglia"],html:root [class*="grid"],html:root [class*="cols"],
  html:root .due,html:root .tre,html:root .quattro{grid-template-columns:1fr}

  /* LE 740 RIGHE FLEX.
     Non sono state cercate una per una, ed e' una scelta: flex-wrap su un
     elemento che NON e' flex non fa assolutamente niente, e su uno che lo e'
     ha effetto solo quando il contenuto non ci starebbe comunque. Cioe' e'
     una regola che si attiva da sola esattamente nei casi che volevo
     correggere, e resta inerte in tutti gli altri — comprese le righe di due
     elementi dove andare a capo peggiorerebbe, che ci stanno e non vanno a
     capo.
     Vale solo dentro il contenuto della pagina: la barra laterale ha le sue
     misure e non si tocca. */
  html:root .wrap div,html:root .wrap span,html:root .wrap header,html:root .wrap footer,
  html:root .content div,html:root .contenuto div,html:root .foglio div,
  html:root .sheet div,html:root .modal div{flex-wrap:wrap}
  /* Un elemento dentro una riga che va a capo non puo' pretendere una
     larghezza minima piu' grande dello schermo. */
  html:root .wrap div,html:root .content div,html:root .contenuto div,
  html:root .foglio div,html:root .sheet div{min-width:0}
  html:root .ds-grid:has(> .ds-kpi) > .ds-kpi,
  html:root .kpis:has(> .kpi) > .kpi,
  html:root .kpi-grid:has(> .kpi) > .kpi{padding:11px 13px}
  html:root .wrap,html:root .container,html:root .contenuto,
  html:root .foglio,html:root .content{padding-left:13px;padding-right:13px}
  /* Le tabelle non si comprimono: si fanno scorrere invece di uscire dal
     bordo, che sul telefono e' il modo piu' rapido di perdere una colonna. */
  html:root table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html:root table th,html:root table td{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* === fine foglio condiviso === */
