@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#070b14; --bg2:#0a1020;
  --panel:#101827; --panel2:#131d2f; --panel3:#17233a; --surface:#101827; --surface-2:#0d1524;
  --appbar:#0c1220; --thead:#111a2a;
  --line:#24324a; --line2:#2d3e5c;
  --text:#f4f7ff; --muted:#8fa3c6; --dim:#627698;
  --accent:#5d82ff; --accent-weak:rgba(93,130,255,.14); --accent-strong:#7b65ff;
  --blue:#5d82ff; --blue2:#7b65ff; --cyan:#42c7ff;
  --ok:#39d9a1; --ok-bg:rgba(57,217,161,.10);
  --warn:#ffbf4a; --warn-bg:rgba(255,191,74,.10);
  --crit:#ff6574; --crit-bg:rgba(255,101,116,.10);
  --bar-track:#223049;
  --shadow:0 20px 60px rgba(0,0,0,.28); --shadow-md:0 12px 38px rgba(0,0,0,.22);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow:hidden;
  background:radial-gradient(circle at 80% -10%,rgba(93,130,255,.13),transparent 30%),
             radial-gradient(circle at 15% 110%,rgba(123,101,255,.09),transparent 32%),var(--bg)}
a{color:inherit}
::selection{background:rgba(93,130,255,.3)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code{font-family:ui-monospace,monospace;background:var(--surface-2);color:var(--cyan);padding:1px 6px;border-radius:6px;font-size:.86em}
*{scrollbar-width:thin;scrollbar-color:#2a3a56 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3a56;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a4d70;background-clip:content-box}
.app{display:flex;min-height:100vh}
.appbar{flex:none;width:248px;height:100vh;position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,#0d1524 0%,#0b1220 100%);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:18px 14px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;font-weight:900;letter-spacing:-.3px;font-size:16px}
.brand .logo,.brand .blu{color:var(--blue)}
.brand .logo{width:38px;height:38px;flex:none;padding:7px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 10px 25px rgba(93,130,255,.35);stroke:#fff;color:#fff}
.topnav{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:0 1 auto;overflow:visible}
.topnav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#aab8d0;
  text-decoration:none;font-weight:650;font-size:.9rem;border:none;transition:.18s ease;white-space:nowrap}
.topnav a svg{width:19px;height:19px;flex:none}
.topnav a:hover{background:#141f34;color:#fff;transform:translateX(2px)}
.topnav a.active{background:linear-gradient(90deg,rgba(93,130,255,.22),rgba(93,130,255,.11));color:#dce6ff;
  box-shadow:inset 0 0 0 1px rgba(93,130,255,.13)}
.topnav a.active svg{color:#7da0ff}
.topnav a.soon{opacity:.5}
#bellBtn{align-self:flex-start;border:1px solid var(--line);background:#101827!important;
  color:#eaf0ff;border-radius:11px;width:42px;height:42px;padding:0;display:grid;place-items:center}
#bellBtn:hover{border-color:#405578;background:#16223a!important}
#userBtn{width:100%;justify-content:flex-start;gap:10px;padding:9px;border-radius:14px;
  background:transparent!important;color:var(--text)}
#userBtn:hover{background:#121d30!important}
.who .u-n{font-size:13px;font-weight:800;color:var(--text)}
.who .u-e{font-size:11px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#4a73ff,#7f69ff);
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;flex:none}
#userMenu,#bellMenu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;
  background:#111a2a!important;border:1px solid #2b3b58;box-shadow:0 30px 90px rgba(0,0,0,.5);border-radius:14px}
#userMenu a,#userMenu button,#bellMenu a{color:var(--text)}
.content{flex:1;min-width:0;height:100vh;overflow:auto;padding:26px 28px 50px}
.page-h,.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
h1{margin:0 0 6px}
.sub{margin:0;color:var(--muted);font-size:14px}
.section-title{margin:24px 0 13px;font-size:15px;font-weight:800}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:10px 15px;
  font-weight:750;font-size:.88rem;cursor:pointer;text-decoration:none;transition:.18s ease;
  background:linear-gradient(135deg,var(--blue),#6f74ff);color:#fff;box-shadow:0 10px 22px rgba(93,130,255,.22)}
.btn:hover{filter:brightness(1.08);box-shadow:0 14px 28px rgba(93,130,255,.28)}
.btn.ghost,.btn.g{background:#101827;border:1px solid var(--line);color:#eaf0ff;box-shadow:none}
.btn.ghost:hover,.btn.g:hover{border-color:#405578;background:#16223a}
.btn.sm{padding:8px 12px;font-size:.82rem}
.btn.danger,.btn.dng{background:rgba(255,101,116,.07);color:#ff9aa5;border-color:rgba(255,101,116,.35);box-shadow:none}
.kpis,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.card,.panel,.kpi,.hero-note{background:linear-gradient(180deg,rgba(20,30,48,.96),rgba(15,23,38,.96));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 38px rgba(0,0,0,.16)}
.card{padding:18px 20px}.panel{padding:18px}
.panel h3{margin:0 0 15px;font-size:15px;font-weight:800}
.kpi{padding:17px 18px;display:flex;flex-direction:column;min-height:126px}
.kpi .kbadge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(93,130,255,.12);color:#82a0ff}
.kpi .kbadge svg{width:20px;height:20px}
.kpi .kt{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;margin-top:14px}
.kpi .kv{font-size:28px;font-weight:850;letter-spacing:-1px;margin-top:3px}
.card .k{color:var(--muted);font-size:.82rem}.card .v{font-size:1.9rem;font-weight:850;letter-spacing:-.8px;margin-top:6px}
.hero-note{padding:20px 22px}.hero-note b{color:var(--blue)}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;
  background:var(--accent-weak);color:#a9c0ff;margin-left:8px}
.pill,.status{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:850}
.pill.online,.pill.on,.pill.ok,.status.online{background:var(--ok-bg);color:var(--ok)}
.pill.offline,.pill.off,.pill.crit,.status.offline{background:var(--crit-bg);color:var(--crit)}
.pill.sconosciuto,.pill.warn,.status.warn{background:var(--warn-bg);color:var(--warn)}
th{font-size:10px;color:#7185a8;text-transform:uppercase;letter-spacing:.1em;text-align:left;padding:13px 16px;
  background:var(--thead);border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-bottom:1px solid rgba(36,50,74,.72);font-size:12px;color:#c3cee0}
tr:hover td{background:rgba(93,130,255,.035)}
tr:last-child td{border-bottom:none}
a.rowlink{font-weight:800;color:#6f94ff;text-decoration:none}
a.rowlink:hover{text-decoration:underline}
.tpanel{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:var(--panel);
  max-height:calc(100vh - 250px)}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:#9fb4d8}
th.sortAsc::after{content:' ▲';color:var(--blue)}th.sortDesc::after{content:' ▼';color:var(--blue)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label,.fl{font-size:11px;color:#9eb0cf;font-weight:750}
.field input,.field select,.inp,input[type=text],input[type=password],input[type=email],select,textarea{
  background:#0d1524;border:1px solid var(--line);color:#fff;border-radius:10px;padding:11px;outline:none;font-family:inherit}
.field input:focus,.field select:focus,.inp:focus,input:focus,select:focus,textarea:focus{border-color:#4f74e8;box-shadow:0 0 0 3px rgba(93,130,255,.15)}
.alert{padding:12px 15px;border-radius:12px;font-size:.88rem;margin-bottom:16px;border:1px solid transparent}
.alert.err{background:var(--crit-bg);color:var(--crit);border-color:rgba(255,101,116,.35)}
.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(57,217,161,.3)}
.empty{padding:60px 20px;text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.empty strong{display:block;color:#dce6f8;margin-bottom:7px}
.quota{height:7px;border-radius:99px;background:var(--bar-track);overflow:hidden;margin-top:9px}
.quota>i{display:block;height:100%;background:linear-gradient(90deg,#5d82ff,#42c7ff);border-radius:99px}
.bars{display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px;font-size:12px}
.bar .track{height:7px;border-radius:99px;background:var(--bar-track);overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,#5d82ff,#42c7ff);border-radius:99px}
.bar .bv{color:var(--muted);font-weight:700}
.legend{display:flex;flex-direction:column;gap:12px}
.legend .li,.legend-row{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.legend .sw,.legend-swatch{width:9px;height:9px;border-radius:3px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#111a2a;color:#9cafcd;
  border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800;text-decoration:none;cursor:pointer}
.chip.chip-on,.chip.on,.chip.active{border-color:#5678dc;background:rgba(93,130,255,.14);color:#d9e3ff}
.segbar,.ptabs,.tabs{display:inline-flex;gap:5px;padding:5px;background:#0e1625;border:1px solid var(--line);border-radius:12px;width:max-content}
.segbar .s,.segbar>*,.ptabs a,.tabs .tab{border:0;background:transparent;color:var(--muted);padding:9px 14px;border-radius:9px;font-weight:800;font-size:12px;text-decoration:none;cursor:pointer}
.segbar .on,.ptabs a.on,.tabs .tab.active{background:#5d82ff;color:#fff}
.ptabs .n{font-size:10px;padding:1px 6px;border-radius:999px;background:#1a2740;color:#9cb3db}
.ptabs a.on .n{background:rgba(255,255,255,.25);color:#fff}
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.atile{display:flex;gap:11px;align-items:center;padding:15px;background:#111b2c;border:1px solid var(--line);
  border-radius:13px;text-decoration:none;color:var(--text);transition:.18s}
.atile:hover{border-color:#4a67aa;transform:translateY(-2px)}
.atile .ti,.atile .ico{width:38px;height:38px;border-radius:11px;background:rgba(93,130,255,.11);color:#7ea0ff;display:grid;place-items:center;flex:none}
.atile h3{margin:0;font-size:13px;font-weight:800}.atile p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.ov{position:fixed;inset:0;z-index:300;background:rgba(3,6,12,.74);backdrop-filter:blur(6px);display:none}
.ov.on,.ov[style*="block"]{display:grid;place-items:center}
.ovbox,.mbox{background:#111a2a;border:1px solid #2b3b58;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.5);
  width:min(680px,94vw);padding:20px;max-height:88vh;overflow:auto}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1000px 500px at 50% -10%,rgba(93,130,255,.2),var(--bg))}
.logincard{background:linear-gradient(180deg,#111a2a,#0e1524);border:1px solid var(--line);border-radius:20px;
  padding:38px 40px;width:380px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.logincard label{display:block;font-size:11px;color:#9eb0cf;font-weight:750;margin:14px 0 6px}
.logincard input{width:100%;background:#0d1524;border:1px solid var(--line);color:#fff;border-radius:11px;padding:12px 14px}
.logincard .btn{width:100%;margin-top:22px;justify-content:center;padding:13px}
.logincard .err{background:var(--crit-bg);color:var(--crit);border:1px solid rgba(255,101,116,.35);padding:11px 14px;border-radius:10px;font-size:.86rem}
.hint{color:var(--muted);font-size:.85rem}
.gdot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.gpill{display:inline-flex;align-items:center;gap:7px;background:#111a2a;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:#c3cee0}
.big{font-size:28px;font-weight:850;letter-spacing:-1px}
.donut svg{transform:rotate(-90deg)}
.dv-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);max-height:calc(100vh - 300px)}
.dv-scroll table{border-collapse:separate;border-spacing:0;border:none}
.dv-scroll thead th{position:sticky;top:0;z-index:20;background:var(--thead)}
.dvgroups{max-height:150px;overflow-y:auto}

/* TILE_MOCKUP: tessere Azioni come il mockup (icona in badge blu, hover) */
.tile{background:#111b2c;border:1px solid var(--line);border-radius:13px;display:flex;gap:12px;align-items:center;padding:15px 16px;transition:border-color .15s,transform .15s;text-align:left;color:var(--text);cursor:pointer;width:100%}
.tile:hover{border-color:#4a67aa;transform:translateY(-2px)}
.tile .ic{width:38px;height:38px;border-radius:11px;background:rgba(93,130,255,.12);color:#7ea0ff;display:grid;place-items:center;flex:none}
.tile .ic svg{width:19px;height:19px}
.tile.danger .ic{background:rgba(255,101,116,.12);color:#ff9aa5}
.tile b{font-size:.92rem}
.tile>span:last-child{display:flex;flex-direction:column;gap:2px}
.tile>span:last-child>span,.tile .sub{color:var(--muted);font-size:.74rem}


/* ================= STICKY_GLOBALE =================
   Due cose impedivano alle intestazioni di restare in cima, su TUTTE le pagine:

   1) "table{border-collapse:collapse}" (riga sopra): con i bordi fusi, Chrome IGNORA
      position:sticky sui <th>. C'era gia' l'eccezione per .dv-scroll -- il problema era
      noto, ma risolto per una pagina sola. Qui vale per tutte.

   2) Lo scorrimento non e' della finestra ma di .content (height:100vh; overflow:auto).
      Ogni tentativo di bloccare il "body" non toccava nulla, e le intestazioni si
      aggrappavano al contenitore sbagliato.

   Da qui in poi: i bordi si separano ovunque ci sia una tabella dentro un contenitore
   che scorre, e i <th> si agganciano in cima a quel contenitore. */
.content table,
.tpanel table, .tbl-wrap table, .ag-scroll table, .pm-scroll table,
.pdscroll table, .dc-scroll table, .evt-scroll table, .dlp-scroll table{
  border-collapse:separate !important;
  border-spacing:0 ;
}
.content thead th,
.tpanel thead th, .tbl-wrap thead th, .ag-scroll thead th, .pm-scroll thead th,
.pdscroll thead th, .dc-scroll thead th, .evt-scroll thead th, .dlp-scroll thead th{
  position:sticky !important;
  top:0 !important;
  z-index:20;
  background:#111a2a !important;
  box-shadow:inset 0 -1px 0 var(--line);
}
/* thead e tr NON devono essere sticky a loro volta: manderebbero in conflitto i th */
.content thead, .content thead tr{position:static }
/* i contenitori che scorrono devono avere un'altezza vera, altrimenti crescono e basta */
.tpanel, .tbl-wrap, .ag-scroll, .pm-scroll, .pdscroll, .dc-scroll, .evt-scroll, .dlp-scroll{
  overflow:auto;
}


/* ================= STICKY_OVERFLOW =================
   Ultimo tassello. In app.css c'e' ".tpanel table, table.card { ... overflow:hidden }".
   overflow:hidden su un ANTENATO annulla position:sticky: il browser tratta la tabella
   come contenitore di scorrimento (che pero' non scorre mai), quindi il <th> non ha
   dove agganciarsi e scende con le righe. E' il secondo killer dello sticky dopo
   border-collapse -- e li avevamo tutti e due insieme.
   Lo smorzo SOLO per le tabelle dentro i contenitori che scorrono: l'arrotondamento
   resta al contenitore, che e' il posto giusto per farlo. */
.tpanel table, .tbl-wrap table, .ag-scroll table, .pm-scroll table,
.pdscroll table, .dc-scroll table, .evt-scroll table, .dlp-scroll table,
.dv-scroll table, .content table{
  overflow:visible !important;
  border:0 ;
  border-radius:0 ;
}
.tpanel, .tbl-wrap, .ag-scroll, .pm-scroll, .pdscroll,
.dc-scroll, .evt-scroll, .dlp-scroll, .dv-scroll{
  border-radius:var(--radius);
}

/* XIT_LOOK =================================================================
   Aggiunto in fondo apposta: vince su tutto senza dover riscrivere
   le regole di sopra. Per tornare indietro basta cancellare da qui alla fine.
   ========================================================================== */

/* ---------- 1. IN ALTO A DESTRA: campanella, tema, utente ----------
   Stavano in fondo alla barra laterale, dove non li guarda nessuno. */
.appbar-r{z-index:60}


/* ---------- 2. STESSO LAYOUT SU TUTTE LE PAGINE ---------- */
.content{padding:22px 24px 26px}
.page-h{display:flex;align-items:flex-end;gap:16px;margin:0 0 18px}
.page-h h1{margin:0}
.page-h .sub{margin:3px 0 0;color:var(--muted);font-size:.86rem}
.card,.panel,.tpanel,.ovbox,.mbox{border-radius:14px}
.card,.panel,.tpanel{border:1px solid var(--line);background:var(--panel)}
h2{letter-spacing:-.01em} h3{letter-spacing:.01em}

/* tabelle: la stessa densita' della dashboard, ovunque */
table{border-collapse:separate;border-spacing:0;width:100%;background:transparent;font-variant-numeric:tabular-nums}
table th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:10px 12px;background:var(--thead);border-bottom:1px solid var(--line);text-align:left}
table td{padding:0 12px;height:36px;font-size:13px;border-bottom:1px solid rgba(127,127,127,.10)}
table tbody tr:hover td{background:rgba(127,127,127,.06)}
table tbody tr:last-child td{border-bottom:0}

/* pulsanti e pastiglie: una misura sola in tutto il portale */
.btn{border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600}
.btn.sm{padding:5px 10px;font-size:12px}
.pill,.chip,.gpill{border-radius:99px;font-size:12px;padding:3px 9px}
input,select,textarea{border-radius:10px;font-size:13px}

/* ---------- 4. CARATTERI (sostituisce il vecchio XIT_SCALA) ---------- */
body{font-size:14px;line-height:1.5}
.k,.kl,.ksub,.sub,.muted{font-size:12.5px}
.op{font-size:13px}
.op-b .n{font-size:22px} .op-b .l{font-size:10px}
.op table.mac td{font-size:13px;height:35px}
.op table.mac th{font-size:11px}
.op .todo .t{font-size:13px} .op .todo .s{font-size:12px}
.op .grp{font-size:13px}
.xt-bar input.xt-q,.xt-b,.xt-foot{font-size:13px}


/* XIT_TITOLI ==============================================================
   Misurato: h1 usciva a 28px (regola generale del foglio) perche' la misura
   ridotta valeva solo dentro .page-h, e diverse pagine non ce l'hanno.
   Qui si abbassano i titoli ovunque, con un peso che vince. */
h1,.content h1{font-size:22px;font-weight:800;letter-spacing:-.02em!important}
h2,.content h2{font-size:17px;font-weight:800}
h3,.content h3{font-size:14.5px!important;font-weight:800!important}
h4{font-size:13px!important}
.content p.sub,.content .hint{font-size:12.5px}
/* fine XIT_TITOLI */

/* XIT_TOPBAR ==============================================================
   Adesso il blocco sta davvero in cima al contenuto (spostato nell'HTML),
   quindi bastano le misure: niente piu' forzature. */
.colonna{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;height:100vh}
.colonna > .content{flex:1 1 auto;min-height:0;height:auto!important;overflow:auto}
.topbar{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:8px 22px;border-bottom:1px solid var(--line);background:var(--appbar,var(--panel))}
.topbar .appbar-r{display:flex;flex-direction:row;align-items:center;
  gap:8px;margin:0;padding:0;border:0;background:none}
.topbar #bellBtn{width:34px;height:34px;
  border-radius:10px;margin:0;align-self:center}
.topbar #userBtn{width:auto!important;padding:4px 8px;border-radius:11px}
.topbar .who{min-width:0;text-align:right}
.topbar .who .u-n{font-size:12.5px!important;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:190px;line-height:1.2}
.topbar .who .u-e{font-size:10.5px!important;white-space:nowrap;line-height:1.15;color:var(--muted)}
.topbar .avatar{width:30px!important;height:30px;font-size:11.5px!important}
.appbar{height:100vh}
@media(max-width:820px){.topbar{padding:6px 12px}.topbar .who{display:none}}
/* fine XIT_TOPBAR */


/* XIT_RIFINITURE =========================================================
   Il menu' era scritto per aprirsi VERSO L'ALTO, e aveva senso quando quel
   blocco stava in fondo alla barra laterale. Adesso che sta in cima usciva
   dallo schermo: qui torna ad aprirsi verso il basso. */
.topbar #userMenu,.topbar #bellMenu{
  top:calc(100% + 8px); bottom:auto;
  right:0; left:auto; z-index:400}
.topbar{position:relative;z-index:50}
/* campanella e lunetta senza cornice: nella riga in alto stonava */
.topbar #bellBtn{
  border:0; background:transparent!important; color:var(--muted)}
.topbar #bellBtn:hover{
  background:rgba(127,127,127,.10); color:var(--text)}
/* fine XIT_RIFINITURE */

/* XIT_ICONE_TOP ==========================================================
   Senza cornice erano rimaste col colore "spento": su fondo scuro non si
   vedevano. Colore del testo, un filo piu' grandi, e lo stroke forzato a
   currentColor perche' nel file e' scritto dentro il tag. */
.topbar #bellBtn{
  color:var(--text); opacity:.9;
  width:36px!important; height:36px; border-radius:10px}
.topbar #bellBtn:hover{
  opacity:1; background:rgba(127,127,127,.14)!important}
.topbar #bellBtn svg{
  stroke:currentColor; width:19px!important; height:19px}
/* la pallina degli allarmi resta rossa e ben visibile */
.topbar #bellCount{background:var(--crit);color:#fff;
  border:2px solid var(--appbar,var(--panel))}
/* fine XIT_ICONE_TOP */

/* XIT_PM_FORZA ===========================================================
   Peso alto apposta: le regole dentro le pagine sono !important ma "leggere"
   (.pm-scroll td vale 0,1,1). Queste valgono di piu' e vincono comunque,
   qualunque cosa resti scritta li' dentro. */
body .app .colonna .content .pm-scroll td,
body .app .content .pm-scroll td,
body .app .content table.cl td,
body .app .content table td{font-size:13px!important;height:36px!important;padding:0 12px!important}
body .app .colonna .content .pm-scroll th,
body .app .content .pm-scroll th,
body .app .content thead th,
body .app .content table th{font-size:10.5px!important;padding:9px 12px!important;letter-spacing:.09em!important}
body .app .content .pm-scroll td .hostc,
body .app .content .pm-scroll td b{font-size:13px}
body .app .content .pmband .pm-v,
body .app .content .pmb-kpi .big{font-size:18px!important}
body .app .content .pmband .pm-k,
body .app .content .pmb-klab,
body .app .content .pmb-lab{font-size:9.5px!important}
body .app .content .thermo .big{font-size:22px!important}
body .app .content .ptabs a,
body .app .content .segbar a,
body .app .content .tabs a{font-size:12.5px!important;padding:6px 13px}
body .app .content .gdrop-btn,
body .app .content .gdrop-item{font-size:12.5px!important}
body .app .content .hbar{font-size:12.5px!important}
body .app .content .fl2{font-size:10px!important}
body .app .content h1{font-size:22px}
body .app .content h2{font-size:17px}
body .app .content h3{font-size:14.5px}

.topbar .appbar-r{background:none!important;border:0;box-shadow:none;
  padding:0;overflow:visible}
.topbar{min-height:52px}
/* fine XIT_PM_FORZA */

/* XIT_CAMPANELLA =========================================================
   La pallina rossa era posizionata sulla misura vecchia del pulsante e
   sbordava. E la luna non si vedeva: il disegno le arriva dal codice, qui
   ci si assicura che abbia tratto, spessore e spazio. */
.topbar #bellBtn{position:relative;display:grid;place-items:center;
  overflow:visible}
.topbar #bellCount{
  position:absolute; top:2px; right:2px;
  min-width:15px; height:15px; padding:0 3px;
  border-radius:99px; font-size:9.5px!important; line-height:15px;
  font-weight:800; text-align:center;
  background:var(--crit)!important; color:#fff; border:0;
  box-shadow:0 0 0 2px var(--appbar, var(--panel))}
/* fine XIT_CAMPANELLA */


/* XITCUR1 -- le freccette su/giu' dei campi numerici: le disegna il browser,
   sono grigie, larghe e non seguono il tema. Compaiono su ogni pagina che ha
   un numero da scrivere. Si tolgono e si scrive il numero a mano.
   E il trattino lampeggiante prende il colore d'accento: quello di serie e'
   nero, e su fondo scuro si vede a fatica. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input,textarea,select{caret-color:var(--accent,#5d82ff)}
input:focus,textarea:focus,select:focus{outline:none}
select{cursor:pointer}


/* XITTOP1 -- il blocco utente con la campanella stava appiccicato al bordo
   inferiore della barra. Un po' di respiro sotto, e il contenuto sotto la
   barra non le finisce addosso. */
.topbar{padding-top:9px ; padding-bottom:12px }
.topbar .appbar-r{align-items:center}
.topbar .avatar{margin-bottom:1px}


/* XITTOP3 -- il modo giusto: si dice al browser che l'interfaccia e' scura, e
   da li' disegna scuri l'icona dell'orologio, il pannellino che si apre, le
   barre di scorrimento e tutti i controlli di sistema. Il filtro sull'icona
   era un rattoppo che funzionava solo su alcuni browser. */
:root{color-scheme:dark}
html,body{color-scheme:dark}


/* XITCLK1 -- l'icona dell'orologio (e del calendario) la disegnava il browser:
   nera, diversa su ognuno, e irraggiungibile su Firefox. Quei campi hanno lo
   stile scritto dentro il tag, quindi le regole del foglio perdevano sempre.
   Adesso l'icona di serie e' invisibile ma resta cliccabile, e sopra ci sta la
   nostra: una sola, uguale su Chrome, Edge e Firefox. */
input[type=time], input[type=date], input[type=datetime-local],
input[type=month], input[type=week]{
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a3bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 15px 15px !important;
  padding-right: 36px !important;
}
/* XITCLK5 -- l'icona del calendario era sparita. Quei campi hanno lo
   stile scritto dentro il tag (style="background:var(--bg);...") e
   "background" e' una scorciatoia: azzera background-image. Contro uno
   stile inline vince solo !important, e la pulizia del 25/07 lo aveva
   tolto. Lo spazio prima del punto e virgola era il segno rimasto. */
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator{
  opacity: 0 ;
  cursor: pointer;
  width: 26px;
  margin-right: -4px;
}
/* XITCLK2 -- tolta: su Firefox quella riga poteva togliere il selettore
   invece della sola icona. L'apertura adesso la gestiamo noi, cliccando
   sul campo, quindi non serve piu' spegnere niente. */
input[type=time]:hover, input[type=date]:hover{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d4e6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important;
}



/* XITSPUNTE -- spunte e pallini in tutto il portale.
   Prima erano quelle del browser: grigie sembravano disabilitate, e col tema
   scuro si vedeva un quadrato bianco che stonava con tutto il resto.
   accent-color basta da solo e non rompe niente: il browser disegna la sua
   spunta usando il nostro colore. Le disabilitate restano smorte, cosi si
   distinguono davvero da quelle spente. */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--accent, #5d82ff);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex: none;
}
/* XITSPUNTEDIS -- disegnate da noi. accent-color faceva quel che poteva,
   ma il quadrato resta quello del sistema e con questo tema stona.
   ESCLUSE quelle dentro gli interruttori (sw, sw2, pdset): li la casella
   non e una casella, e vestirla la trasformerebbe in un quadratino. */
input[type="checkbox"]:not(.sw *):not(.sw2 *):not(.pdset *){
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; border-radius:5px;
  border:1.5px solid var(--line2, #2a3a58);
  background:var(--bg, #0a0f1c);
  display:inline-grid; place-content:center;
  transition:border-color .12s, background .12s;
  position:relative; top:1px;
}
input[type="checkbox"]:not(.sw *):not(.sw2 *):not(.pdset *):hover{
  border-color:var(--accent, #5d82ff);
}
input[type="checkbox"]:not(.sw *):not(.sw2 *):not(.pdset *):checked{
  background:var(--accent, #5d82ff); border-color:var(--accent, #5d82ff);
}
/* il segno di spunta: disegnato, non un carattere -- i caratteri cambiano
   forma da un sistema all altro e si vedeva la differenza */
input[type="checkbox"]:not(.sw *):not(.sw2 *):not(.pdset *):checked::after{
  content:""; width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
/* selezione parziale: ne' spento ne' acceso, e si deve capire */
input[type="checkbox"]:indeterminate:not(.sw *):not(.sw2 *):not(.pdset *){
  background:var(--accent, #5d82ff); border-color:var(--accent, #5d82ff);
}
input[type="checkbox"]:indeterminate:not(.sw *):not(.sw2 *):not(.pdset *)::after{
  content:""; width:9px; height:2px; background:#fff; border:0;
}
input[type="checkbox"]:not(.sw *):not(.sw2 *):not(.pdset *):focus-visible{
  outline:2px solid rgba(111,155,255,.55); outline-offset:2px;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
  opacity: .38;
  cursor: not-allowed;
}
/* il testo accanto segue la spunta: acceso quando e acceso */
label:has(> input[type="checkbox"]:checked),
label:has(> input[type="radio"]:checked){
  color: var(--text);
}


/* XITCATRIS -- una CATEGORIA non e una spunta come le altre: comanda quelle
   sotto. Prima erano tutte uguali e nessuno lo capiva.
   Riga sopra, testo piu grande, e i livelli rientrati: il rientro dice
   "questi dipendono da quella" senza bisogno di scriverlo. */
.xcat{
  display:flex; align-items:flex-start; gap:8px;
  padding-top:11px; margin-top:5px;
  border-top:1px solid var(--line);
  font-size:.93rem; font-weight:700; color:var(--text);
  cursor:pointer;
}
.xcat:first-child{border-top:0; padding-top:0; margin-top:0}
.xcat input[type="checkbox"]{width:16px;height:16px;margin-top:2px}
.xcat .sub{display:block;font-size:.73rem;font-weight:400;color:var(--muted);
  line-height:1.4;margin-top:2px}
.xliv{margin-left:24px; display:flex; flex-direction:column; gap:7px; margin-top:7px}
.xliv label{font-size:.83rem; font-weight:400}
/* quando la categoria e spenta, i suoi livelli si spengono con lei */
.xliv.off{opacity:.42}


/* XITRIENTRO -- i livelli rientrati sotto la loro categoria: senza, sembrano
   voci dello stesso peso e non si capisce che dipendono da quella sopra.
   Nella scheda macchina le voci non sono dentro un contenitore, quindi il
   rientro si da a chi VIENE DOPO una .xcat fino alla prossima. */
.xcat ~ label:not(.xcat){margin-left:26px}


/* XITAVVLARGA -- la finestra degli avvisi: tre gruppi affiancati, niente
   scorrimento. In colonna sola diventava lunghissima e si perdeva il filo
   fra una categoria e l altra.
   Su schermi bassi la finestra sale piu in alto invece di far scorrere. */
#avvM .ovbox{max-width:940px}
#avvM .xcat{font-size:.88rem;padding-top:0;margin-top:0;border-top:0}
#avvM .xcat ~ label:not(.xcat){margin-left:23px;font-size:.8rem}
@media(max-width:900px){
  #avvM .ovbox > form > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}


/* XITAVVPULITA -- il testo lungo in colonne strette va a capo a meta frase e
   diventa illeggibile: e quello che si vedeva.
   Nella finestra degli avvisi si tiene solo il NOME della voce -- "Critico",
   "Attenzione", "Informazione" -- e si nascondono le spiegazioni lunghe: chi
   ha bisogno del dettaglio lo trova nella Guida, e qui deve solo spuntare.
   Le tre categorie restano per esteso, sono i titoli. */
#avvM .xcat ~ label:not(.xcat) > span[style*="opacity"],
#avvM .xcat ~ label:not(.xcat) span[style*=".7"]{display:none}
#avvM .xcat > span > span[style*="display:block"]{display:none !important}
#avvM label{white-space:nowrap}
#avvM .xcat{white-space:normal;align-items:center;min-height:34px}
#avvM .xcat b,#avvM .xcat > span > b{font-size:.87rem}
/* la riga sotto il titolo: solo il nome del gruppo, senza la coda */
#avvM .xcat > span{display:flex;align-items:center}

/* XITSTICKY -- la barra della tabella (cerca / esporta / righe) e la riga
   dei titoli restano FERME in alto mentre si scorre la pagina. Valgono per
   tutte le tabelle del portale. L altezza della barra la misura il
   JavaScript e la scrive in --xt-top: qui c e solo il ripiego. */
.xt-bar{position:sticky;top:0;z-index:7;background:var(--panel);
  padding-top:10px;padding-bottom:10px}

/* XITSCORRE -- scatola che scorre attorno alla tabella, titoli fermi dentro. */
.xit-scorre{overflow:auto;border-radius:12px}
.xit-scorre table thead th{position:sticky;top:0;z-index:6;background:var(--thead)}

/* XITRIEPILOGO -- il riquadro di sola lettura si riconosce a colpo d occhio:
   piatto, bordo tratteggiato, niente ombra. Non e una cosa su cui si clicca. */
.bx.riep{background:transparent;border:1px dashed var(--line);box-shadow:none}
.bx.riep .bh{border-bottom:1px dashed var(--line)}
.bx.riep table td{border-bottom:1px dashed rgba(127,127,127,.14);height:32px}

/* XITLEGENDA -- la legenda dei simboli sotto la tabella dei tentativi. */
.leg{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  padding:10px 16px 4px;font-size:.72rem;color:var(--muted)}
.leg .ix{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;font-style:normal;
  font-size:.66rem;font-weight:800;margin-right:5px;vertical-align:-3px}
.leg .leg-n{flex:1 1 100%;opacity:.85;line-height:1.45;margin-top:2px}
/* XITLEGENDA2 -- legenda in linea col titolo del riquadro. */
.leg .leg-n{display:none}
.bh .leg{display:inline-flex;flex-wrap:wrap;gap:4px 14px;padding:0 0 0 12px;
  font-size:.7rem;color:var(--muted);align-items:center}
/* XITTASTOREG -- disabilita in ambra, abilita in verde: non sono
   pulsanti come gli altri, cambiano lo stato di una regola. */
.btn.reg-off{background:rgba(255,191,74,.14);border:1px solid rgba(255,191,74,.45);
  color:#ffcf7a}
.btn.reg-on{background:rgba(57,217,161,.14);border:1px solid rgba(57,217,161,.45);
  color:#7ce8c4}
/* XITCOPPOP -- finestra della copertura: si apre sopra la pagina, non la
   sostituisce. display:grid quando si mostra (con none non si vedrebbe). */
.xit-pop{display:none;position:fixed;inset:0;z-index:60;
  background:rgba(4,8,16,.62);place-items:center;padding:24px}
.xit-pop-box{background:var(--panel);border:1px solid var(--line);
  border-radius:16px;max-width:900px;width:100%;max-height:82vh;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.xit-pop-h{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--panel);z-index:2}

/* XITFISSA3 -- pagine del SIEM: la pagina non scorre, scorre la tabella.
   Fatto in CSS e non a numeri: nessun lampeggio e niente da misurare.
   Il riquadro che deve crescere lo marca il JS con .xit-cresce. */
main.content.fisso{display:flex;flex-direction:column;overflow:hidden}
main.content.fisso > *{flex:0 0 auto}
main.content.fisso .xit-cresce{flex:1 1 auto;min-height:0;overflow:auto}
main.content.fisso .xit-cresce table{margin:0}
/* XITFISSA4 -- dentro il riquadro che scorre, la barra della tabella e
   la riga dei titoli restano in alto. Qui sticky funziona davvero,
   perche c e un contenitore che scorre: e la condizione che mancava
   nei tentativi di stamattina. */
main.content.fisso .xit-cresce .xt-bar{position:sticky;top:0;z-index:7;
  background:var(--panel);margin:0;padding:10px 16px}
main.content.fisso .xit-cresce thead th{position:sticky;top:52px;z-index:6;
  background:var(--thead)}

/* XITPIULUNGA -- nelle pagine ferme il piede da 50px e i margini fra le
   fasce erano pensati per una pagina che scorre: qui sono spazio tolto
   alla tabella. Circa 60px recuperati, senza stringere niente. */
main.content.fisso{padding-bottom:14px}
main.content.fisso .page-h{margin-bottom:8px}
main.content.fisso .ptabs{margin-bottom:10px}
main.content.fisso .kpis{margin-bottom:10px}
main.content.fisso .toolbar{margin-bottom:10px}
main.content.fisso > p.sub{margin:6px 0 0}
/* XITBARRAPULITA -- la barra della tabella non deve sembrare un blocco
   a se: stesso fondo del riquadro, niente angoli, solo una riga sotto
   che la stacca dalle righe che le scorrono dietro. */
main.content.fisso .xit-cresce .xt-bar{background:var(--panel);
  border-radius:0;border-bottom:1px solid var(--line);margin:0;
  padding:9px 16px}
/* senza barra dentro (Eventi) i titoli si fermano in cima */
main.content.fisso .xit-cresce thead th{top:0}
main.content.fisso .xit-cresce:has(.xt-bar) thead th{top:52px}

/* XITBARRACOMEEV -- la barra della tabella non e un pezzo del riquadro:
   si veste come la riga di comandi di Eventi. Niente fondo pieno, niente
   cornice, stessi rientri; resta appiccicata in alto perche dentro il
   riquadro che scorre sticky funziona. */
main.content.fisso .xit-cresce{background:transparent;border:0}
main.content.fisso .xit-cresce .xt-bar{background:transparent;border:0;
  border-radius:0;margin:0;padding:0 2px 10px}
main.content.fisso .xit-cresce .xt-bar input.xt-q{background:rgba(127,127,127,.07)}
main.content.fisso .xit-cresce > table{background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
main.content.fisso .xit-cresce:has(.xt-bar) thead th{top:44px}

/* XITPOPCAMPI -- dentro le finestrelle i campi devono somigliare a quelli
   della pagina: fondo scuro, bordo della linea, angoli tondi. Il
   color-scheme dice al browser di disegnare anche il calendario in scuro. */
.xit-pop input, .xit-pop select{background:rgba(127,127,127,.09);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  color:var(--text);font:inherit;font-size:13px;color-scheme:dark}
.xit-pop input[type="date"]{min-width:150px}
.xit-pop form{display:block}
.xit-pop .btn{margin-right:8px}
.xit-pop .sub{color:var(--muted);font-size:12px}

/* XITCARDBASSE -- nelle pagine del SIEM i numeri in cima servono a
   inquadrare, non a riempire: card basse e testo piu piccolo. Lo spazio
   guadagnato va tutto alla tabella, che e la cosa che si legge davvero. */
main.content.fisso .kpi{padding:10px 14px}
main.content.fisso .kpi .kt{font-size:9.5px;letter-spacing:.08em}
main.content.fisso .kpi .kv{font-size:24px;line-height:1.1;margin:2px 0}
main.content.fisso .kpi .sub{font-size:11px;margin-top:1px}
main.content.fisso .kpis{gap:10px}
/* i tre grafici piu bassi: la forma si legge lo stesso */
main.content.fisso #sgA, main.content.fisso #sgB, main.content.fisso #sgC{
  height:84px !important}
main.content.fisso #sgA .apexcharts-canvas,
main.content.fisso #sgB .apexcharts-canvas,
main.content.fisso #sgC .apexcharts-canvas{height:84px !important}

/* XITESPMENU -- Esporta e l ultima voce della riga: spinto a destra. */
.ptabs{display:flex;align-items:center}
.ptabs .esp{margin-left:auto;color:var(--muted);font-size:12.5px}
.ptabs .esp:hover{color:var(--text)}

/* XITESPFUORI -- la riga in alto: linguette a sinistra, comando a destra,
   con lo spazio in mezzo. Il comando non e una linguetta e non deve
   sembrarlo. */
.siemtop{display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-bottom:14px;flex-wrap:wrap}
.siemtop .ptabs{margin-bottom:0}
.siemtop .esp{color:var(--muted);font-size:12.5px;white-space:nowrap;
  border:1px solid var(--line);border-radius:10px;padding:7px 13px}
.siemtop .esp:hover{color:var(--text);border-color:var(--muted)}
/* XITCERCARIGA -- la riga di ricerca in alto: vale per tutte le pagine
   del SIEM, non solo per Vulnerabilita dove era nata. */
.vcerca{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vcerca span{font-size:12px;color:var(--muted)}
.vcerca input{background:rgba(127,127,127,.09);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;color:var(--text);font:inherit;
  font-size:13px;color-scheme:dark}
.vcerca input::placeholder{color:var(--muted)}

/* XITORIGCRESCE -- in Indagine la tabella delle origini prende lo spazio
   che avanza, come le altre pagine del SIEM. */
main.content.fisso .cc-wrap, main.content.fisso .panel:has(> table){
  min-height:0}
main.content.fisso .section-title{margin:10px 0 6px}

/* XITALTEZZAVERA -- il riquadro che contiene la tabella principale prende
   un altezza vera, non una crescita flessibile che si perde per strada
   quando il riquadro e annidato dentro altri contenitori.
   Il numero e lo schermo meno cio che sta sopra e sotto. */
main.content.fisso .xit-cresce{height:calc(100vh - 330px);min-height:320px;
  overflow:auto}
/* su Indagine sopra c e anche la fila dei grafici: si toglie altro spazio */
main.content.fisso .cc-wrap.xit-cresce{height:calc(100vh - 470px)}
@media(max-height:820px){
  main.content.fisso .xit-cresce{height:calc(100vh - 300px)}
  main.content.fisso .cc-wrap.xit-cresce{height:calc(100vh - 430px)}
}

/* XITFONDOPIENO -- con poche righe la tabella non riempie il riquadro e si
   vedeva il fondo della pagina sotto le righe. Il fondo lo mette il
   riquadro, non la tabella: cosi la scatola e piena fino in fondo. */
main.content.fisso .xit-cresce{background:var(--panel);
  border:1px solid var(--line);border-radius:14px}
main.content.fisso .xit-cresce > table{background:transparent;
  border:0;border-radius:0}
main.content.fisso .xit-cresce > table tbody tr:last-child td{border-bottom:0}

/* XITBTNSPENTO -- un pulsante disabilitato restava identico a uno
   acceso: si finiva per cliccarlo mentre l operazione era in
   corso. Vale per tutti i pulsanti del portale, non solo per
   quello che mi ha fatto accorgere del difetto. */
.btn:disabled,.btn[disabled],button:disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none}

/* XITMENU4 -- il menu aveva tredici voci tutte sullo
   stesso piano: Dashboard pesava come Scheda tecnica.
   Tre gruppi con etichetta, e la voce attiva sollevata
   dal fondo invece della sfumatura. Sta in fondo al
   file apposta: vince sulle regole di sopra senza
   doverle riscrivere. */
.topnav .tit{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#56688a;padding:14px 12px 5px}
.topnav .sep{height:1px;background:var(--line);margin:11px 6px}
.topnav a{border:1px solid transparent}
.topnav a.active{background:#16223a;border-color:#31456b;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:#eaf0ff;font-weight:600}
.topnav a.active svg{color:var(--accent);opacity:1}

/* XITMENUCHIUDI -- l etichetta di gruppo diventa un
   comando: freccia a destra, gira quando e chiusa. */
.topnav .tit{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.topnav .tit:hover{color:#7f93b5}
.topnav .tit:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.topnav .tit .ch{margin-left:auto;font-size:9px;line-height:1;opacity:.75;transition:transform .18s ease}
.topnav .tit.chiuso .ch{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.topnav .tit .ch{transition:none}}

/* XITMENUSTRETTO -- il grasso non era il carattere: ogni
   voce aveva 11px di riempimento sopra e sotto per 19px
   di testo. Qui si recuperano circa 170px, cioe quattro
   voci. L altezza minima resta 30px: sotto quella si
   sbaglia bersaglio col mouse. */
.topnav{gap:3px}
.topnav a{padding:7px 10px;font-size:12.5px;min-height:30px;gap:10px}
.topnav a svg{width:16px;height:16px}
.topnav .tit{padding:9px 11px 4px}
.topnav .sep{margin:8px 6px}