/* Portale TOIL — foglio di stile unico. Valori solo da token (sezione :root). CSP: nessuno stile inline. */

/* ===================== 1. Font self-hosted (OFL, vedi fonts/OFL.txt) ===================== */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-serif-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2")}

/* ===================== 2. Token ===================== */
:root{
  --bg:#f3f5f6;--panel:#ffffff;--fg:#13202a;--muted:#5b6975;--line:#dce2e7;--soft:#eef2f4;
  --band:#0e2a36;--band-fg:#f2f6f8;--band-muted:#a9bcc6;--brass:#b88a3b;
  --accent:#0f5c73;--accent-soft:#e2eef2;
  --bad:#b3261e;--bad-soft:#fbeceb;--warn:#9a5b00;--warn-soft:#fdf3e2;--ok:#1d6b3a;--ok-soft:#e8f4ec;
  /* serie categoriali dei grafici (come la pagina Scaduti) */
  --c-carb:#0f5c73;--c-fitti:#c98a2e;--c-comm:#6d5bb5;--c-nd:#8796a2;
  --line-strong:#b9c3cb;
  --shadow:0 4px 14px rgb(15 92 115 / .12);
  --shadow-pop:0 12px 32px rgb(14 42 54 / .22);
  --r:12px;--r-s:8px;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0c1115;--panel:#141b21;--fg:#e4eaef;--muted:#93a1ad;--line:#24303a;--soft:#18222a;
  --band:#0a2029;--band-fg:#eef4f7;--band-muted:#8fa7b3;--brass:#d6ad62;
  --accent:#5fb4cc;--accent-soft:#132d37;
  --bad:#f08a80;--bad-soft:#2d1716;--warn:#e2b25c;--warn-soft:#2b2312;--ok:#73c493;--ok-soft:#14261b;
  --c-carb:#3fa3bf;--c-fitti:#c08a36;--c-comm:#8f72f0;--c-nd:#6f7c87;
  --line-strong:#3a4954;
  --shadow:0 4px 14px rgb(0 0 0 / .35);
  --shadow-pop:0 12px 32px rgb(0 0 0 / .5);
  color-scheme:dark;
}}

/* ===================== 3. Base ===================== */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{font-size:87.5%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.5 var(--sans);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
h1{font:400 clamp(1.6rem,3vw,2.2rem)/1.15 var(--serif);letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:600;line-height:1.3}
h3{font-size:1rem;font-weight:600;line-height:1.35}
a{color:var(--accent)}
strong{font-weight:600}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.note{color:var(--muted);font-size:.875rem}
.lead{font-size:1rem}
.num,.n{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.band :focus-visible{outline-color:var(--band-fg)}
.inner{max-width:1400px;margin-inline:auto;padding-inline:16px}

.skip{position:absolute;left:16px;top:8px;transform:translateY(-200%);z-index:50;background:var(--panel);color:var(--accent);padding:8px 16px;border-radius:var(--r-s);font-weight:500;box-shadow:var(--shadow-pop)}
.skip:focus{transform:none}

/* ===================== 4. Banda di testata ===================== */
.band{background:var(--band);color:var(--band-fg);padding:20px 0 24px}
.band .inner{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-end}
.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:4px}
.eyebrow.dark{color:var(--muted)}
.tag{border:1px solid currentColor;border-radius:999px;padding:0 8px;margin-left:4px;letter-spacing:.08em}
.sub{color:var(--band-muted);margin-top:4px;font-size:.875rem}
.who{display:flex;gap:12px;align-items:center}
.who-id{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.who-name{font-weight:500}
.role{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brass);font-weight:600}

/* ===================== 5. Navigazione: reti + schede ===================== */
.nav{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav .inner{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.retesel{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.retesel::-webkit-scrollbar{display:none}
.retesel button{font:inherit;font-weight:500;font-size:.875rem;min-height:36px;padding:4px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out}
.retesel button:hover{border-color:var(--accent)}
.retesel button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.tabs{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.tabs::-webkit-scrollbar{display:none}
.tabs{scroll-padding-inline:16px}
.tabs.more-r{mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.tabs.more-l{mask-image:linear-gradient(to right,transparent,#000 48px);-webkit-mask-image:linear-gradient(to right,transparent,#000 48px)}
.tabs.more-l.more-r{mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.tabs [role=tab]{font:inherit;font-size:.875rem;background:none;border:0;border-bottom:2px solid transparent;padding:8px 0 12px;min-height:44px;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:color .15s ease-out}
.tabs [role=tab]:hover{color:var(--fg)}
.tabs [role=tab][aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent);font-weight:500}
.tabs [role=tab]:focus-visible{outline-offset:-2px}
.badge{display:inline-block;min-width:20px;padding:0 4px;border-radius:999px;background:var(--bad);color:var(--panel);font-size:.72rem;font-weight:600;text-align:center;line-height:20px}

/* ===================== 6. Pagina ===================== */
.page{flex:1;width:100%;max-width:1400px;margin-inline:auto;padding:24px 16px 48px;outline:none}
.appv,.pane{display:flex;flex-direction:column;gap:16px}
.phead{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-end}
.phead>div{display:flex;flex-direction:column;gap:4px;max-width:72ch}
.phead .note{min-height:1.5em}
#m-sum{min-height:3em}
.chead{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:baseline}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1000px){.grid2{grid-template-columns:7fr 5fr}.grid2.wide-l{grid-template-columns:3fr 2fr}}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.center{justify-content:center}
.stack{display:flex;flex-direction:column;gap:16px}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:16px 0}

/* ===================== 7. Card ===================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.inset{background:var(--bg)}
.login{max-width:30rem;width:100%;margin:32px auto;gap:16px;padding:32px}
.state{align-items:flex-start;padding:32px}
.state p{color:var(--muted);max-width:60ch}

/* ===================== 8. Bottoni ===================== */
.btn{font:inherit;font-size:.875rem;font-weight:500;min-height:36px;padding:4px 16px;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out}
.btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--band-fg);border-color:var(--band-muted)}
.btn.ghost:hover{background:rgb(255 255 255 / .08)}
.btn.sm{min-height:32px;padding:4px 12px;font-size:.8rem}
.btn.lg{min-height:44px;padding:8px 24px;font-size:1rem}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft)}
.btn[data-armed="1"]{background:var(--bad);border-color:var(--bad);color:var(--panel)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn.busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* aiuto "?" del glossario */
.help{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin-left:4px;border:0;background:none;cursor:pointer;color:var(--muted);vertical-align:middle;flex:none}
.help .q{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);font-size:.72rem;font-weight:600;line-height:1}
.help:hover .q,.help[aria-expanded=true] .q{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.gloss{font-size:.8rem;color:var(--fg);background:var(--accent-soft);border-radius:var(--r-s);padding:8px 12px;margin:4px 0}
.gloss-row{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.8rem;color:var(--muted)}
.gloss-row li{display:inline-flex;align-items:center}
.gloss-row .gloss{flex-basis:100%}
.gloss-wrap{display:contents}

/* ===================== 9. KPI ===================== */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.kpis.k3{grid-template-columns:1fr 1fr}
.kpis.k3>.kpi:first-child{grid-column:1/-1}
@media (min-width:720px){.kpis.k3{grid-template-columns:repeat(3,1fr)}.kpis.k3>.kpi:first-child{grid-column:auto}}
.kpis.k4{grid-template-columns:1fr 1fr}
@media (min-width:720px){.kpis.k4{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:132px}
.kpi .lab{font-size:.875rem;color:var(--muted);display:flex;align-items:center;min-height:24px}
.kpi .val{font:400 1.6rem/1.2 var(--serif);font-variant-numeric:tabular-nums;min-height:1.2em;overflow-wrap:anywhere}
.kpis.lg .val{font-size:clamp(1.6rem,3vw,2.2rem)}
.kpi .val.bad{color:var(--bad)}
.kpi .s{font-size:.8rem;color:var(--muted);min-height:1.5em}
.delta{font-size:.8rem;min-height:1.5em;display:flex;gap:4px;align-items:baseline;font-variant-numeric:tabular-nums}
.delta .ar{font-size:.72rem}
.delta.up{color:var(--bad)}.delta.down{color:var(--ok)}.delta.flat{color:var(--muted)}
.kpis.mini .kpi{min-height:0;padding:12px 16px}
.kpis.mini .val{font-size:1.25rem}

/* ===================== 10. Messaggi, stati ===================== */
.msg{border-radius:var(--r-s);padding:12px 16px;font-size:.875rem;border-left:4px solid}
.msg.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--fg)}
.msg.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--fg)}
.msg.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--fg)}
.msg.info{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.msg .mt{display:block}
.stcell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:normal}
.errbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.errbar p{flex:1 1 20rem}
.alertline>.msg{flex:1}
.alertline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.failed>:not(.phead):not(.errslot){display:none!important}
.empty{color:var(--muted);text-align:center;padding:32px 16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.empty strong{color:var(--fg);font-weight:500}
.ferr{color:var(--bad);font-size:.8rem}
.help-t{color:var(--muted);font-size:.8rem}

/* pill di stato */
.pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.4}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.mut{background:var(--soft);color:var(--muted)}
.t-bad{color:var(--bad)}.t-warn{color:var(--warn)}.t-ok{color:var(--ok)}.t-mut{color:var(--muted)}

/* scheletri di caricamento */
.sk{display:inline-block;height:.9em;width:8em;max-width:100%;border-radius:4px;background:var(--soft);vertical-align:middle;animation:pulse 1.4s ease-in-out infinite}
.sk.w4{width:4em}.sk.w6{width:6em}.sk.w12{width:12em}.sk.full{width:100%}
.sk.blk{display:block;height:100%;min-height:64px}
.sk.btn-sk{width:9em;height:32px;border-radius:999px}
@keyframes pulse{50%{opacity:.5}}

/* ===================== 11. Liste priorità, reti, stampe ===================== */
.plist{display:flex;flex-direction:column}
.plist>li+li{border-top:1px solid var(--line)}
.prio{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;padding:12px 8px;margin-inline:-8px;color:inherit;text-decoration:none;border-radius:var(--r-s);min-height:72px;transition:background-color .15s ease-out}
.prio:hover{background:var(--accent-soft)}
.prio .lvl{grid-row:1/span 2}
.pmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.pname{font-weight:500;overflow-wrap:anywhere}
.pmeta{font-size:.8rem;color:var(--muted)}
.pmot{font-size:.875rem}
.pact{font-size:.8rem;color:var(--accent);font-weight:500}
.pamt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-variant-numeric:tabular-nums}
.pval{font-weight:600}
.pins{font-size:.8rem;color:var(--bad)}
.pgg{font-size:.8rem}
.lvl{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:4px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.lvl.bad{color:var(--bad)}.lvl.bad .dot{background:var(--bad)}
.lvl.warn{color:var(--warn)}.lvl.warn .dot{background:var(--warn)}
.lvl.ok{color:var(--ok)}.lvl.ok .dot{background:var(--ok)}
.lvl.mid{color:var(--muted)}.lvl.mid .dot{background:var(--muted)}
.prio.sk-item{pointer-events:none}

.rlist{display:flex;flex-direction:column;gap:16px}
.rrow{display:flex;flex-direction:column;gap:4px;min-height:64px}
.rtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rname{font-weight:600;font-size:1rem}
.rname.linkbtn{text-decoration:none;color:var(--fg);min-height:32px}
.rname.linkbtn:hover{color:var(--accent);text-decoration:underline}
.rval{font-variant-numeric:tabular-nums;font-weight:600}
.rbar{display:block;width:100%;height:8px}
.rbar .trk{fill:var(--soft)}
.rbar .fill{fill:var(--accent)}
.rmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--muted);align-items:center}

.stlist{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stlist.compact{grid-template-columns:1fr}
.st{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-height:120px}
.st.warn{border-color:var(--warn);background:var(--warn-soft)}
.st .rtop .pill{flex:none}
.st .stv{font:400 1.25rem/1.2 var(--serif);font-variant-numeric:tabular-nums}
.st .row{margin-top:auto;padding-top:8px}
.stlist.compact .st{min-height:0}

.mlist{display:flex;flex-direction:column}
.mlist>li+li{border-top:1px solid var(--line)}
.mrow{display:flex;justify-content:space-between;gap:12px;padding:12px 8px;margin-inline:-8px;border-radius:var(--r-s);color:inherit;text-decoration:none;min-height:56px;align-items:center}
.mrow:hover{background:var(--accent-soft)}
.mrow>span:first-child{display:flex;flex-direction:column;min-width:0}
.mrow .r{text-align:right;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;flex:none}

/* ===================== 12. I miei clienti (card) ===================== */
.clist{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.ccard{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none;min-height:148px;transition:box-shadow .15s ease-out,border-color .15s ease-out}
.ccard:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.ccard.mid{border-left-color:var(--line-strong)}
.ccard.bad{border-left-color:var(--bad)}.ccard.warn{border-left-color:var(--warn)}.ccard.ok{border-left-color:var(--ok)}
.ctop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ctop .pname{font-size:1rem}
.cnums{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;font-variant-numeric:tabular-nums}
.cnums .big{font:400 1.4rem/1.2 var(--serif)}
.cnums .lab{font-size:.72rem;color:var(--muted);display:block;text-transform:uppercase;letter-spacing:.06em}
.later{padding:0}
.later>summary{cursor:pointer;padding:16px 20px;font-weight:500;min-height:44px;list-style-position:inside}
.later>.clist{padding:0 16px 16px}
.search-f{max-width:28rem}
.filters .search-f{flex:1 1 18rem}

/* ===================== 13. Form ===================== */
.field{display:flex;flex-direction:column;gap:4px;min-width:0;border:0;padding:0;margin:0}
.field>label,.field>legend{font-size:.875rem;font-weight:500;color:var(--fg);padding:0}
input,select,textarea{font:inherit;font-size:.875rem;color:var(--fg)}
.search,select,.field input:not([type=checkbox]):not([type=file]){min-height:40px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--panel);width:100%}
.search:hover,select:hover,.field input:hover{border-color:var(--muted)}
input[type=file]{min-height:44px;padding:8px;border:1px dashed var(--line-strong);border-radius:var(--r-s);background:var(--bg);width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:500;margin-right:12px;padding:4px 16px;min-height:32px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--fg);cursor:pointer}
[aria-invalid=true]{border-color:var(--bad)!important}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin:0}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;min-height:36px;cursor:pointer}
.checks{display:flex;flex-wrap:wrap;gap:4px 20px}
.fgrid{display:grid;gap:16px 20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.8rem;font-weight:500;min-height:36px;padding:4px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed=true]::after{content:"×";font-size:1rem;line-height:1}
.sort-m{display:none}
.imp-out{display:flex;flex-direction:column;gap:12px}
.imp-out .tw{max-height:20rem}

/* ===================== 14. Tabelle ===================== */
.tw{overflow:auto;max-height:36rem;border-radius:var(--r-s)}
.tw:focus-visible{outline-offset:0}
.tw.tall{max-height:min(70vh,48rem)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.8rem;font-variant-numeric:tabular-nums}
caption{text-align:left}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td{white-space:nowrap}
td.wrap{white-space:normal;min-width:12rem;max-width:28rem;overflow-wrap:anywhere}
th{position:sticky;top:0;z-index:1;background:var(--panel);color:var(--muted);font-weight:500;white-space:nowrap;vertical-align:bottom}
th.n,td.n{text-align:right}
th .sortb{font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:24px;text-align:inherit}
th .sortb:hover{color:var(--fg)}
th .sortb .ind{display:inline-block;width:10px;font-size:.66rem;color:var(--accent)}
th[aria-sort] .sortb{color:var(--fg);font-weight:600}
tbody tr.click{cursor:pointer}
tbody tr.click:hover,tbody tr.sel{background:var(--accent-soft)}
tbody tr.click:focus-visible{outline-offset:-2px}
tfoot td{font-weight:600;border-top:2px solid var(--line-strong);border-bottom:0;position:sticky;bottom:0;background:var(--panel)}
.cname{display:flex;flex-direction:column;gap:2px;white-space:normal;min-width:14rem}
.cname .pname{font-size:.875rem}
.cname .pmeta{font-size:.8rem}
.det{font-size:.8rem;color:var(--muted);white-space:normal;min-width:14rem;max-width:32rem;overflow-wrap:anywhere}
.acts{display:flex;gap:8px;flex-wrap:wrap}
tr.skr td{height:49px}
.empty-cell{padding:0}

/* ===================== 15. Grafico anzianità ===================== */
.legend{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.8rem;color:var(--muted)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.sw{width:12px;height:12px;border-radius:3px;flex:none}
.chart{position:relative;height:260px;width:100%}
.chart.is-empty{height:auto}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.s-carb{fill:var(--c-carb);background:var(--c-carb)}
.s-fitti{fill:var(--c-fitti);background:var(--c-fitti)}
.s-comm{fill:var(--c-comm);background:var(--c-comm)}
.s-nd{fill:var(--c-nd);background:var(--c-nd)}
.ax-grid{stroke:var(--line);stroke-width:1}
.ax-base{stroke:var(--line-strong);stroke-width:1}
.ax-t{fill:var(--muted);font:400 12px var(--sans);font-variant-numeric:tabular-nums}
.ax-x{fill:var(--fg);font:500 12px var(--sans)}
.ax-v{fill:var(--fg);font:600 12px var(--sans);font-variant-numeric:tabular-nums}
.col{cursor:pointer;outline:none}
.col .hit{fill:transparent}
.col:focus-visible .hit,.col.on .hit{fill:var(--accent-soft)}
.col:focus-visible .hit{stroke:var(--accent);stroke-width:2}
.chart.dim .col:not(.on) .seg{opacity:.35}
.readout{font-size:.875rem;min-height:3em;color:var(--muted)}
.readout strong{color:var(--fg)}

/* ===================== 16. Dettaglio cliente (dialog) ===================== */
dialog{color:var(--fg);background:var(--panel);border:1px solid var(--line);padding:0}
dialog::backdrop{background:rgb(8 20 26 / .55)}
.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(100vw,760px);max-width:100vw;border-radius:0;border-width:0 0 0 1px;box-shadow:var(--shadow-pop);flex-direction:column}
.drawer[open]{display:flex;animation:slidein .2s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:0}}
.dhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--line)}
.dhead h2{font:400 1.4rem/1.25 var(--serif);overflow-wrap:anywhere}
.dbody{padding:20px 24px 32px;overflow:auto;display:flex;flex-direction:column;gap:16px;flex:1}
.advice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px}
.advice.bad{background:var(--bad-soft);border-color:var(--bad)}
.advice.warn{background:var(--warn-soft);border-color:var(--warn)}
.advice.ok{background:var(--ok-soft);border-color:var(--ok)}
.advice>div{display:flex;flex-direction:column;gap:2px}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:12px 20px;font-size:.875rem}
.dl>div{display:flex;flex-direction:column;gap:2px}
.dl dt{color:var(--muted);font-size:.8rem}
.dl dd{font-variant-numeric:tabular-nums}
.sess{max-width:min(28rem,calc(100vw - 32px));border-radius:var(--r);padding:24px;box-shadow:var(--shadow-pop)}
.sess[open]{display:flex;flex-direction:column;gap:12px}
.countdown{font:400 2.2rem/1.2 var(--serif);font-variant-numeric:tabular-nums}

/* ===================== 17. Toast ===================== */
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--fg);color:var(--panel);padding:12px 20px;border-radius:var(--r-s);font-size:.875rem;box-shadow:var(--shadow-pop);z-index:60;transition:opacity .2s ease-out}
.toast:empty{opacity:0;pointer-events:none;padding:0}

/* ===================== 18. Telefono (≤ 720px) ===================== */
@media (max-width:720px){
  .band{padding:16px 0}
  .band .inner{align-items:center}
  .brand .sub{display:none}
  h1{font-size:1.5rem}
  .who-id{display:none}
  .page{padding-top:16px}
  .card{padding:16px}
  .phead{align-items:flex-start}
  .tabs{gap:20px}
  .retesel{flex-wrap:wrap;overflow:visible}
  .retesel button{min-height:44px}
  .phead .note{min-height:3em}
  .btn,.chip{min-height:44px}
  .btn.sm{min-height:44px}
  .help{width:44px;height:44px;margin:-10px -10px -10px -6px}
  .sort-m{display:flex;flex:1 1 100%}
  .search-f{max-width:none}
  .prio{grid-template-columns:auto 1fr;min-height:88px}
  .prio .pamt{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:4px 12px}
  .prio .lvl{grid-row:1/span 2;min-width:56px}
  .drawer{width:100vw;border-width:0}
  .nav{position:static}
  .tcard{background:none;border:0;padding:0;border-radius:0}
  .dhead,.dbody{padding-inline:16px}

  /* tabelle → lista di card */
  .tw,.tw:focus-visible{outline-offset:0}
.tw.tall{max-height:none;overflow:visible}
  table.cards-m,table.cards-m tbody,table.cards-m tfoot,table.cards-m tr,table.cards-m td{display:block}
  table.cards-m thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.cards-m tr{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:12px;background:var(--panel);display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
  table.cards-m td{border:0;padding:0;white-space:normal;text-align:left;min-width:0;max-width:none}
  table.cards-m td.n{text-align:left}
  table.cards-m td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
  table.cards-m td.span{grid-column:1/-1}
  table.cards-m td.hide-m,table.cards-m td[data-label]:empty{display:none}
  table.cards-m .cname{min-width:0}
  table.cards-m tfoot tr{background:var(--soft);position:static}
  table.cards-m tfoot td{position:static;background:none;border:0}
  table.cards-m td.empty-cell{grid-column:1/-1}
  table.cards-m tr.skr{min-height:120px}
  table.cards-m tr.skr td{height:auto}
}
@media (pointer:coarse){
  .btn,.chip,.retesel button{min-height:44px}
  .help{width:44px;height:44px;margin:-10px -10px -10px -6px}
}

/* ===================== 19. Movimento ridotto / stampa ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .seg,.rbar .fill{forced-color-adjust:none}
  .pill,.badge{border:1px solid CanvasText}
}