/* =====================================================================
   ERAKTIVE · stile condiviso (token + componenti)
   Fonte di verità: docs/design/layouts/definitiva.html e docs/design/schermate/*.html,
   valori documentati in docs/design/sistema.md. I moduli aggiungono il proprio CSS
   (public/assets/css/<modulo>.css) ma NON ridefiniscono token e componenti di questo file.
   ===================================================================== */

/* Geist variabile (pesi 100–900) servito localmente, con cifre tabellari (tnum). Licenza OFL: fonts/Geist-OFL.txt */
@font-face{
  font-family:"Geist";
  src:url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0d0e15; --side:#11121b; --card:#161724; --el:#1d1f30; --el-2:#23253a;
  --line:#262839; --line-2:#30334a;
  --text:#eef0f8; --text-2:#b1b4cc; --text-3:#8e91ad;
  /* accento: valori predefiniti (indaco). Con un colore scelto in Impostazioni → Aspetto il layout li
     ridefinisce tutti in un <style nonce> (Domain\Settings\AccentPalette): MAI colori d'accento letterali
     altrove, solo questi token (in JS: Erk.accent()). Le varianti -rgb servono per le trasparenze. */
  --accent:#7c6cf6; --accent-hi:#a59aff; --accent-lo:#463f8c; --accent-ink:#c4bcff;
  --accent-pale:#dcd7ff; --accent-mid:#8577ff; --accent-dim:#6a5fd6;
  --accent-btn:#6352e0; --accent-btn-hi:#6b5be6; --accent-tick0:#4f37e6; --accent-tick1:#8179f6;
  --accent-ghost:#25224a; --accent-ghost-2:#1b1a31;
  --accent-rgb:124,108,246; --accent-hi-rgb:165,154,255; --accent-pale-rgb:220,215,255;
  --brand:#4a84c8; --brand-ink:#9cc3f0; --brand-bg:rgba(74,132,200,.14);
  --blue:#8fbdf0; --blue-bg:rgba(74,132,200,.17);
  --good:#5fd99a; --good-bg:rgba(95,217,154,.12);
  --bad:#ff8b8b;  --bad-bg:rgba(255,120,120,.13);
  --warn:#f3b95a; --warn-bg:rgba(243,185,90,.13);
  --r:14px; --r-s:9px; --side-w:244px; --top-h:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Geist","Manrope",ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
.num,.amt,td{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
::selection{background:rgba(var(--accent-rgb),.45);color:#fff}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2a2c40;border-radius:8px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;margin:0;cursor:pointer;vertical-align:middle}
input[type=date]{color-scheme:dark}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- shell admin: sidebar ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.maincol{min-width:0}
/* niente logo in testa (il logo resta su login e portale): la navigazione parte subito, la prima sezione
   è allineata alla fascia della testata (64px) */
aside.side{background:var(--side);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:6px 14px 14px;overflow-y:auto}
aside.side > .sec:first-child{padding-top:18px}
.sec{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:22px 10px 8px}
nav a{display:flex;align-items:center;gap:11px;padding:12px 10px;border-radius:10px;color:var(--text-2);text-decoration:none;font-weight:500;margin-bottom:4px}
nav a:hover{background:var(--el);color:var(--text)}
nav a.on{background:rgba(var(--accent-rgb),.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)}
nav a.on svg{color:var(--accent-hi)}
nav a .lbl{flex:1;white-space:nowrap}
/* etichetta lunga («Canoni di manutenzione»): su due righe invece di tagliarla, l'eventuale badge resta a destra */
nav a .lbl.two{white-space:normal;line-height:1.2;min-width:0}
nav a:has(.lbl.two){padding-top:8px;padding-bottom:8px}
.badge-n{min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.badge-n.red{background:#c7353f;color:#fff}
.badge-n.mute{background:var(--el);color:var(--text-2)}
.badge-n.amb{background:var(--warn-bg);color:var(--warn)}
.badge-n.soon{background:none;border:1px solid var(--line-2);color:var(--text-3);font-weight:500;font-size:11px}
.badge-n:empty{display:none}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent-btn),#4a84c8);display:grid;place-items:center;font-weight:600;font-size:12.5px;color:#fff;flex:none}
.side-foot .who{min-width:0;flex:1}
.side-foot .who b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{font-size:12px;color:var(--text-3)}
.side-foot form{margin:0;flex:none}

/* ---------- testata ---------- */
header.top{height:64px;background:var(--side);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:30}
.search{flex:0 1 400px;position:relative}
.search label{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:1px solid var(--line);background:var(--bg);border-radius:10px;color:var(--text-3)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text);font:inherit;min-width:0}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{display:none}
.search label:focus-within{border-color:var(--accent)}
.sres{position:absolute;top:44px;left:0;right:0;background:var(--el);border:1px solid var(--line-2);border-radius:12px;padding:6px;z-index:40;box-shadow:0 20px 50px -12px rgba(0,0,0,.6);max-height:min(440px,70vh);overflow:auto}
.sres .g{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);padding:8px 10px 4px}
.sres a,.sres button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;text-align:left;font-size:13px;color:var(--text);text-decoration:none}
.sres a:hover,.sres button:hover,.sres a.act{background:var(--el-2)}
.sres .m{margin-left:auto;color:var(--text-2);white-space:nowrap}
.sres .empty{padding:10px;color:var(--text-2);font-size:13px}
kbd{font:500 11.5px "Geist",sans-serif;color:var(--text-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;background:var(--card)}
.top .sp{flex:1}

/* selettore anni: 4 recenti + archivio */
.yearsel{position:relative;display:flex;align-items:center;gap:2px;height:38px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.yearsel > button{height:30px;padding:0 11px;border:0;background:none;border-radius:7px;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.yearsel > button:hover{color:var(--text);background:var(--el)}
.yearsel > button.on{background:var(--el-2);color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.yearsel .more{display:inline-flex;align-items:center;gap:4px;padding:0 9px 0 7px;color:var(--text-3)}
.yearsel .more svg{width:14px;height:14px}
.yearsel .more.on svg{color:var(--accent-hi)}
.yearsel .div{width:1px;height:18px;background:var(--line-2);margin:0 3px;flex:none}
.ypop{position:absolute;top:44px;left:0;z-index:45;background:var(--el);border:1px solid var(--line-2);border-radius:12px;padding:10px;box-shadow:0 20px 50px -12px rgba(0,0,0,.65);width:252px}
.ypop .h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text-2);padding:0 2px 8px}
.ypop .h b{color:var(--text);font-weight:600;font-size:12.5px}
.ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ygrid button{height:34px;border:1px solid transparent;background:var(--card);border-radius:8px;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.ygrid button:hover{border-color:var(--line-2);background:var(--el-2)}
.ygrid button[aria-pressed="true"]{background:var(--accent-btn);color:#fff;border-color:transparent}
.ypop .f{font-size:11.5px;color:var(--text-3);padding:8px 2px 0}

/* ---------- bottoni ---------- */
.btn{white-space:nowrap;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:500;text-decoration:none}
.btn:hover{background:var(--el)}
.btn.pri{background:var(--accent-btn);border-color:transparent;color:#fff;font-weight:600}
.btn.pri:hover{background:var(--accent-btn-hi)}
.btn.sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn.sm svg.i{width:15px;height:15px}
.btn.sm.ic{padding:0 7px}
.btn.ghost{background:none;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--el);color:var(--text)}
.btn.danger{color:var(--bad);border-color:rgba(255,139,139,.35)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.acc svg{color:var(--accent-hi)}
.btn.block{width:100%}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.busy{pointer-events:none;opacity:.7}
.x{margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:none;display:grid;place-items:center;color:var(--text-2);flex:none}
.x:hover{background:var(--el);color:#fff}
.x svg.i{width:16px;height:16px}
.linkb{border:0;background:none;color:var(--accent-ink);font-size:12.5px;font-weight:500;padding:3px 6px;border-radius:6px}
.linkb:hover{background:var(--el);color:#fff}

/* ---------- contenuto ---------- */
main#main{padding:14px 24px 40px;min-width:0}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.hello h1{margin:0;font-size:23px;font-weight:600;letter-spacing:-.02em}
.hello p{margin:3px 0 0;color:var(--text-2);font-size:14.5px}
.hello p strong{color:var(--accent-ink);font-weight:600}
.hello .meta{text-align:right;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.phead h1{margin:0;font-size:23px;font-weight:600;letter-spacing:-.02em}
.phead p{margin:3px 0 0;color:var(--text-2);font-size:13.5px}
.phead .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo{display:inline-block;margin-top:4px;font-size:11px;color:var(--text-2);border:1px dashed var(--line-2);border-radius:6px;padding:1px 7px}
.ynote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.3);color:var(--text);font-size:13px;border-radius:10px;padding:8px 8px 8px 12px;margin-bottom:12px}
.ynote b{color:var(--accent-ink)}
.ynote .btn{margin-left:auto}
.narrow-note{display:none}
.foot{display:flex;justify-content:space-between;gap:12px;color:var(--text-3);font-size:12px;margin-top:18px;flex-wrap:wrap}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0;position:relative}
.ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.ch h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ch .s{font-size:12.5px;color:var(--text-3);margin-top:2px}
.ctrls{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* pill delta (▲/▼ + %) */
.pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.up{background:var(--good-bg);color:var(--good)}
.pill.down{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill svg{width:9px;height:9px;fill:currentColor}

/* toggle segmentato */
.seg{display:flex;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:9px}
.seg button{border:0;background:none;height:26px;padding:0 10px;border-radius:6px;font-size:12.5px;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--el-2);color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.seg.ico button{display:grid;place-items:center;width:32px;padding:0}
.seg.ico svg{width:17px;height:17px}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-2);font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* righe lista (scadenze, attività) */
.row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 8px;margin:0 -8px;border-radius:10px;cursor:pointer;border:0;background:none;width:calc(100% + 16px);text-align:left;color:inherit;text-decoration:none}
.row:hover{background:var(--el)}
.row .tt{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.row .tt .no{color:var(--text-2);font-variant-numeric:tabular-nums;margin-right:6px}
.row .mm{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{text-align:right}
.row .rt .amt{font-weight:600;font-size:13.5px;white-space:nowrap}
.tile{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.tile svg{width:15px;height:15px}
.tile.red{background:var(--bad-bg);color:var(--bad)}
.tile.amb{background:var(--warn-bg);color:var(--warn)}
.tile.grn{background:var(--good-bg);color:var(--good)}
.tile.ind{background:rgba(var(--accent-rgb),.15);color:var(--accent-hi)}
.tile.blu{background:var(--brand-bg);color:var(--brand-ink)}
.amt.red{color:var(--bad)}.amt.amb{color:var(--warn)}.amt.grn{color:var(--good)}
.c{font-size:.6em;color:var(--text-2);letter-spacing:0}

/* badge stato proforma (ProformaStatus::badgeHtml / Erk.statusBadge) */
.st{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.st svg{width:11px;height:11px;stroke-width:2.2}
.st.scad{background:var(--bad-bg);color:var(--bad)}
.st.da{background:rgba(var(--accent-rgb),.18);color:var(--accent-ink)}
.st.parz{background:var(--warn-bg);color:var(--warn)}
.st.inc{background:var(--good-bg);color:var(--good)}
.st.ann{background:var(--el-2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
/* proforma esclusa dal conteggio (Proformas\StatsExclusion): segnale discreto, tratteggiato */
.xbadge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--text-2);background:transparent;border:1px dashed var(--text-3);cursor:help}
.serie{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;background:var(--el-2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.serie.contr{background:rgba(var(--accent-rgb),.16);color:var(--accent-ink);box-shadow:none}

/* barre e indicatori */
.minibar{height:4px;border-radius:4px;background:#262839;overflow:hidden;width:56px}
.minibar span{display:block;height:100%;background:var(--accent);border-radius:4px}
.pbar{height:6px;border-radius:6px;background:var(--el-2);overflow:hidden;margin:10px 0 8px}
.pbar i{display:block;height:100%;border-radius:6px;background:var(--good)}

/* ---------- card KPI con sparkline (tinta solo nella fascia, mai dietro le cifre) ---------- */
.kwrap{container-type:inline-size;min-width:0}
.kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:100%}
.kpi{padding:14px 16px 0;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .2s}
.kpi:hover{border-color:var(--line-2)}
.kpi .t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text-2);font-weight:500}
.kpi .t .lb{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--el);flex:none}
.kpi .ic svg{width:14px;height:14px}
.kpi .v{font-size:23px;font-weight:600;letter-spacing:-.02em;margin-top:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi .v .c{font-size:14px;color:var(--text-2);letter-spacing:0;font-weight:500}
.kpi .n{font-size:12px;color:var(--text-2);margin-top:4px;line-height:1.35}
.kpi .n b{font-weight:600;color:var(--text)}
.kpi .n .r{color:var(--bad);font-weight:600}
.kpi .d{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.kpi .spark{margin:auto -16px 0;height:78px;position:relative;min-height:52px}
.kpi .spark svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.kpi.amber{border-color:rgba(243,185,90,.26)} .kpi.amber .spark{background:linear-gradient(180deg,rgba(243,185,90,0),rgba(243,185,90,.15))} .kpi.amber .ic{color:var(--warn)}
.kpi.violet{border-color:rgba(var(--accent-hi-rgb),.28)} .kpi.violet .spark{background:linear-gradient(180deg,rgba(var(--accent-hi-rgb),0),rgba(var(--accent-hi-rgb),.16))} .kpi.violet .ic{color:var(--accent-hi)}
.kpi.green{border-color:rgba(95,217,154,.24)} .kpi.green .spark{background:linear-gradient(180deg,rgba(95,217,154,0),rgba(95,217,154,.13))} .kpi.green .ic{color:var(--good)}
@container (max-width:560px){
  .kgrid{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:10px}
  .kpi{display:grid;grid-template-columns:minmax(0,1fr) 38%;grid-template-rows:auto auto auto auto;column-gap:10px;padding:10px 0 10px 14px}
  .kpi .t,.kpi .v,.kpi .n,.kpi .d{grid-column:1;padding-right:0}
  .kpi .d{margin-top:3px}
  .kpi .n{display:none}
  .kpi .t{justify-content:flex-start}
  .kpi .v{margin-top:4px;font-size:20px}
  .kpi .spark{grid-column:2;grid-row:1/5;margin:-10px 0 -10px;height:auto;min-height:0}
}

/* ---------- tabelle ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
th:first-child,td:first-child{text-align:left}
th.l,td.l{text-align:left}
th.r,td.r{text-align:right}
th[data-sort]{cursor:pointer}
th[data-sort]:hover{color:var(--text)}
th .ar{display:inline-block;width:10px;margin-left:3px;color:var(--accent-hi);opacity:0}
th[aria-sort] .ar{opacity:1}
td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
td .sm{color:var(--text-3);font-size:11.5px;margin-left:6px;font-weight:400}
td .muted{color:var(--text-3)}
tbody tr.link{cursor:pointer}
tbody tr.link:hover td{background:var(--el)}
tbody tr.cur td:first-child{color:var(--accent-ink);font-weight:600}
tbody tr:last-child td{border-bottom:0}
.tcard{padding:0;overflow:hidden}
.tfoot{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.tfoot b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.mini-note{font-size:12px;color:var(--text-3);margin-top:10px}

/* ---------- moduli ---------- */
.fm{display:grid;gap:12px}
.fm label,.fm .lb{display:grid;align-content:start;gap:5px;font-size:12px;color:var(--text-2);font-weight:500}
.fm input,.fm select,.fm textarea{height:38px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);padding:0 11px;font:inherit;font-size:13.5px;min-width:0;width:100%}
.fm textarea{height:90px;padding:9px 11px;resize:vertical;line-height:1.45}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--accent)}
.fm input[readonly]{color:var(--text-2)}
.fm input::placeholder,.fm textarea::placeholder{color:var(--text-3)}
.fm .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fm .three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fm .hint,.hint{font-size:11.5px;color:var(--text-3);font-weight:400;margin:0}
.fm .hint.w{color:var(--warn)}
.fm .err{font-size:12px;color:var(--bad);font-weight:500}
.fm .bad,.fm [aria-invalid="true"]{border-color:var(--bad)}
.money{position:relative}
.money span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:13.5px;pointer-events:none}
.money input{padding-left:26px;font-variant-numeric:tabular-nums}
.calc{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.radios label{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg);cursor:pointer;color:var(--text);font-size:13px}
.radios label:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.radios input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.radios label:has(input:focus-visible){outline:2px solid var(--accent-hi);outline-offset:2px}

/* avviso in linea (derivato): esito di un modulo, errori generici */
.note{display:flex;align-items:flex-start;gap:9px;border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.4;margin-bottom:12px;border:1px solid transparent}
.note svg.i{width:16px;height:16px;margin-top:1px}
.note.bad{background:var(--bad-bg);color:var(--bad);border-color:rgba(255,139,139,.28)}
.note.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(243,185,90,.28)}
.note.ok{background:var(--good-bg);color:var(--good);border-color:rgba(95,217,154,.26)}
.note.info{background:rgba(var(--accent-rgb),.10);color:var(--text);border-color:rgba(var(--accent-rgb),.3)}

/* ---------- stati: vuoto / nessun risultato / errore / caricamento ---------- */
.state{padding:56px 24px 60px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.state .tile{width:44px;height:44px;border-radius:12px}
.state .tile svg{width:21px;height:21px}
.state h2,.state h3{margin:6px 0 0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.state p{margin:0;color:var(--text-2);font-size:13.5px;max-width:520px;line-height:1.55}
.state .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.state .code{font-size:11.5px;color:var(--text-3);margin-top:4px}
.state.boxed{border:1px solid var(--line);border-radius:var(--r);background:var(--card);min-height:max(420px,calc(100vh - 230px));justify-content:center}
.noresult{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--el);border:1px solid var(--line-2);border-radius:10px;padding:8px 8px 8px 12px;margin-bottom:10px;font-size:13px;color:var(--text-2)}
.noresult b{color:var(--text)}
.noresult .sp{flex:1}
.sk{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--el) 0,#262940 50%,var(--el) 100%);background-size:200% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--accent-hi)}100%{box-shadow:0 0 0 2px transparent}}

/* ---------- popover/menu generico ---------- */
.pop{position:absolute;top:44px;left:0;z-index:45;background:var(--el);border:1px solid var(--line-2);border-radius:12px;padding:6px;box-shadow:0 20px 50px -12px rgba(0,0,0,.65);width:290px}
.pop button{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;align-items:center;width:100%;border:0;background:none;padding:6px 8px;border-radius:8px;text-align:left;font-size:13px}
.pop button:hover,.pop button[aria-checked="true"]{background:var(--el-2)}
.pop .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop .n{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
.pop hr{border:0;border-top:1px solid var(--line-2);margin:4px 2px}
.pop form{margin:0}
.ava{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--text-2);background:var(--el-2);border:1px solid var(--line-2);flex:none;font-style:normal;letter-spacing:.02em}
.ava.all{background:none;border-style:dashed}
.ava svg.i{width:13px;height:13px}

/* ---------- tooltip ---------- */
#tip{position:fixed;z-index:60;pointer-events:none;background:#20223a;border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transition:opacity .12s;min-width:160px;left:-9999px;top:0}
#tip.on{opacity:1}
#tip .h{font-weight:600;margin-bottom:4px}
#tip .l{display:flex;justify-content:space-between;gap:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
#tip .l b{color:var(--text);font-weight:600}
#tip .l i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#252842;border:1px solid var(--line-2);color:var(--text);padding:10px 16px;border-radius:10px;font-size:13px;opacity:0;transition:.2s;z-index:90;pointer-events:none;max-width:min(640px,90vw);display:flex;align-items:center;gap:12px}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast svg.i{width:15px;height:15px;color:var(--good)}
#toast.err svg.i{color:var(--bad)}
#toast.act{pointer-events:auto;padding-right:8px}
#toast button{border:0;background:var(--el-2);color:var(--accent-ink);font-weight:600;height:28px;padding:0 10px;border-radius:7px;white-space:nowrap}
#toast button:hover{background:#2c2f48}

/* ---------- pannello laterale (drawer) ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,7,12,.6);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--card);border-left:1px solid var(--line-2);z-index:75;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1),width .2s;display:flex;flex-direction:column;box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);visibility:hidden}
.drawer.md{width:min(540px,100vw)}
.drawer.wide{width:min(620px,100vw)}
.drawer.on{transform:none;visibility:visible}
.dh{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.dh .dh-t{min-width:0}
.dh h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.dh p{margin:4px 0 0;color:var(--text-2);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dh p:empty{display:none}
.db{padding:16px 22px;overflow:auto;flex:1}
.dsec{margin-bottom:18px}
.dsec h4{margin:0 0 8px;font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:8px}
.dsec h4 .aux{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;color:var(--text-3)}
.kv{display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:13.5px}
.kv span{color:var(--text-2)}
.kv b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.kv .tot{font-size:17px;padding-top:8px;border-top:1px solid var(--line)}
.kv .totl{padding-top:8px;border-top:1px solid var(--line);color:var(--text)}
.df{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.df:empty{display:none}
.df .sp{flex:1}

/* ---------- modale (stessi materiali del drawer) ---------- */
.mwrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;pointer-events:none}
.mwrap.on{pointer-events:auto}
.modal{width:min(480px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 20px 50px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.985);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.modal.lg{width:min(600px,100%)}
.modal.xl{width:min(720px,100%)}
.mwrap.on .modal{opacity:1;transform:none;visibility:visible}
.mh{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 12px}
.mh h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.mh p{margin:4px 0 0;color:var(--text-2);font-size:13px}
.mb{padding:4px 22px 16px;overflow:auto;font-size:13.5px;color:var(--text-2);line-height:1.5}
.mf{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--line);justify-content:flex-end;flex-wrap:wrap}
.mf .sp{flex:1}

/* ---------- portale clienti ---------- */
.papp{min-height:100vh}
.ptop{height:64px;background:var(--side);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:30}
.ptop .sp{flex:1}
.plogo{display:flex;align-items:center;gap:10px;padding-right:18px;border-right:1px solid var(--line);height:100%}
.plogo .crop{width:112px;height:46px;overflow:hidden;position:relative;flex:none;display:block}
.plogo .crop img{position:absolute;height:64px;width:auto;left:-4px;top:-6px}
.plogo .tag{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid rgba(74,132,200,.35);padding:2px 7px;border-radius:999px;white-space:nowrap}
.pnav a{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:10px;color:var(--text-2);text-decoration:none;font-weight:500;margin:0}
.pnav a:hover{background:var(--el);color:var(--text)}
.pnav a.on{background:rgba(var(--accent-rgb),.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)}
.pnav a.on svg{color:var(--accent-hi)}
.me{position:relative}
.me > button{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 6px;border-radius:12px;border:1px solid transparent;background:none;text-align:left}
.me > button:hover{background:var(--el);border-color:var(--line)}
.me .ava{width:32px;height:32px;font-size:11px;background:linear-gradient(135deg,#4a84c8,var(--accent-btn));color:#fff;border:0}
.me .who b{display:block;font-size:13px;font-weight:600}
.me .who span{font-size:12px;color:var(--text-3)}
.me > button > svg{width:15px;height:15px;color:var(--text-3)}
.me .pop{left:auto;right:0;top:50px;width:260px}
.me .pop .ava{width:24px;height:24px;background:none;border:1px dashed var(--line-2);color:var(--text-2)}
.mehead{padding:6px 8px 4px}
.mehead b{display:block;font-size:13px}
.mehead span{font-size:12px;color:var(--text-3)}
.pmain{max-width:1440px;margin:0 auto;padding:16px 24px 28px}

/* ---------- pagine di accesso (derivato: stessi token, card centrata) ---------- */
.area-auth{min-height:100vh;background:radial-gradient(900px 420px at 50% -10%,rgba(var(--accent-rgb),.10),transparent 70%),var(--bg)}
.auth{width:min(400px,100% - 32px);margin:0 auto;padding:7vh 0 32px}
.auth.wide{width:min(520px,100% - 32px)}
.auth-logo{display:flex;justify-content:center;margin-bottom:40px;width:min(460px,100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
.auth-logo img{height:auto;width:391px;max-width:100%}
.auth-card{padding:24px 26px 22px}
.auth-card h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.auth-card .lead{margin:6px 0 18px;color:var(--text-2);font-size:13.5px;line-height:1.5}
.auth-card .lead b{color:var(--text);font-weight:600}
.auth-card .lead.pre{white-space:pre-line}
.auth-card .btn.block{margin-top:4px}
.auth-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;background:rgba(var(--accent-rgb),.15);color:var(--accent-hi)}
.auth-ic svg.i{width:20px;height:20px}
.auth-ic.ok{background:var(--good-bg);color:var(--good)}
.auth-ic.warn{background:var(--warn-bg);color:var(--warn)}
.auth-ic.bad{background:var(--bad-bg);color:var(--bad)}
.err-code{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--text-3);font-variant-numeric:tabular-nums}
.auth-alt{margin:14px 0 0;text-align:center}
.auth-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.auth-foot{text-align:center;color:var(--text-3);font-size:12px;margin-top:16px}
.fm input.otp{height:46px;font-size:22px;font-weight:600;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.steps-v{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:16px}
.steps-v > li{position:relative;padding-left:34px;counter-increment:st}
.steps-v > li::before{content:counter(st);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--el-2);color:var(--text-2);font-size:11.5px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line-2)}
.steps-v > li > b{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.qr{width:184px;height:184px;background:#fff;border-radius:10px;padding:8px}
.qr svg{display:block;width:100%;height:100%}
.secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.secret code,.codes code{font:600 14px/1.3 "Geist",ui-monospace,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--text);background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;user-select:all}
.codes{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.codes code{display:block;text-align:center}

/* ---------- 1280 ---------- */
@media (max-width:1360px){
  :root{--side-w:223px}
}
/* ---------- 1024–1199: sidebar a icone ---------- */
@media (max-width:1199px){
  :root{--side-w:68px}
  aside.side{padding:12px 10px 12px}
  .sec,nav a .lbl,.side-foot .who,nav a .badge-n.soon{display:none}
  nav a{justify-content:center;position:relative;padding:10px 0;margin-bottom:2px}
  nav a .badge-n{position:absolute;top:2px;right:2px;min-width:18px;height:17px;font-size:10.5px;padding:0 5px}
  .side-foot{justify-content:center;flex-direction:column}
  .side-foot .x{margin:0}
  .sec{display:block;height:1px;padding:0;margin:12px 6px;background:var(--line);font-size:0}
  aside.side > .sec:first-child{display:none}
  header.top{padding:0 16px;gap:10px}
  main#main{padding:14px 16px 32px}
  .search{flex-basis:260px}
  .search kbd{display:none}
  .hello p .sub{display:none}
  .ptop{padding:0 16px;gap:12px}
  .pmain{padding:14px 16px 24px}
  .me .who span{display:none}
}
/* ---------- < 1024: degrado dichiarato ---------- */
@media (max-width:1023px){
  .app{grid-template-columns:1fr}
  aside.side{display:none}
  .narrow-note{display:block;background:var(--warn-bg);color:var(--warn);font-size:12.5px;padding:8px 12px;border-radius:10px;margin-bottom:12px}
  .yearsel > button.y:not(.on){display:none}
  .hello{flex-direction:column;align-items:flex-start}
  .hello .meta{text-align:left}
  .plogo .tag,.pnav{display:none}
  .fm .two,.fm .three{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Grafici: barre che crescono dalla base e fasci del sankey che si srotolano (solo al caricamento / cambio dati). */
svg .grow{transform-box:fill-box;transform-origin:50% 100%}
svg.anim-grow .grow{animation:barGrow .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
svg.anim-grow .grow-fade{animation:fadeIn .35s ease-out var(--d,0ms) both}
svg.anim-grow .tk{animation:fadeIn .4s ease-out var(--d,0ms) both}
.skwipe{transform-box:fill-box;transform-origin:0 50%;animation:skWipe 1s cubic-bezier(.3,.7,.2,1) var(--d,0ms) both}
/* in attesa che il grafico entri nello schermo: animazione ferma al primo fotogramma */
svg.anim-wait .grow,svg.anim-wait .grow-fade,svg.anim-wait .skwipe,svg.anim-wait .tk{animation-play-state:paused}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes skWipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){svg.anim-grow .grow,svg.anim-grow .grow-fade,svg.anim-grow .tk,.skwipe{animation:none}}

/* Barre orizzontali (quota clienti): crescono da sinistra; marcatori in dissolvenza. */
.grow-x{transform-origin:0 50%;animation:barGrowX .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
.fade-in{animation:fadeIn .35s ease-out var(--d,0ms) both}
@keyframes barGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.grow-x,.fade-in{animation:none}}