:root{
 --bg:#060B16;--surface:#0B1424;--surface-2:#111E33;--surface-3:#17273F;
 --line:#21324E;--line-soft:#16233A;
 --ink:#0A1832;--sapphire:#2450D8;--sap-bright:#4D7CFF;--glow:rgba(77,124,255,.45);
 --gold:#F0B429;--gold-soft:#F7CE6B;
 --text:#EAF0FB;--muted:#9DB0D0;--faint:#63769A;
 --success:#2FD48A;--warning:#F5A524;--danger:#FF5C6C;
 --dv1:#4D7CFF;--dv2:#BC831F;--dv3:#1EA7B5;--dv4:#9B6BE6;--dv5:#E06A5C;
 --font:'Inter',system-ui,Arial,sans-serif;--display:'Manrope',sans-serif;--mono:'JetBrains Mono',monospace;
 --r:14px;
 --grad-lo:#0a1120;--header-bg:rgba(6,11,22,.8);
}
html[data-theme="light"]{
 --bg:#EDF1F9;--surface:#FFFFFF;--surface-2:#F1F5FC;--surface-3:#E4EAF3;
 --line:#DCE4F0;--line-soft:#E9EEF7;--grad-lo:#F8FAFE;
 --header-bg:rgba(255,255,255,.85);
 --sap-bright:#2450D8;--glow:rgba(36,80,216,.2);
 --text:#0C1A30;--muted:#4C5E7E;--faint:#8091AC;
 --success:#0E9E64;--warning:#B26A06;--danger:#DC2B3A;
}
html[data-theme="light"] .side .nav a.on{color:#0C1A30}
html[data-theme="light"] .nav a.on{background:rgba(36,80,216,.1)}
html[data-theme="light"] .nav a:hover{background:rgba(20,40,90,.05)}
html[data-theme="light"] tr:hover td{background:rgba(20,40,90,.03)}
html[data-theme="light"] .pill{background:#fff}
/* SVG theme flips */
html[data-theme="light"] text[fill="#EAF0FB"]{fill:#0C1A30}
html[data-theme="light"] text[fill="#F0B429"]{fill:#9A6B0C}
html[data-theme="light"] [stroke="#16233A"]{stroke:#E4EAF3}
html[data-theme="light"] [stroke="#17273F"]{stroke:#E4EAF3}
html[data-theme="light"] [fill="#2b3f63"]{fill:#C7D3E6}
html[data-theme="light"] [stroke="#0B1424"]{stroke:#FFFFFF}
html[data-theme="light"] .gold{color:#9A6B0C}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px}
a{color:inherit;text-decoration:none}
.display{font-family:var(--display);letter-spacing:-.02em;font-weight:800}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}.faint{color:var(--faint)}.gold{color:var(--gold)}
.datum{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);vertical-align:middle}
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
/* sidebar */
.side{background:#0A1224;border-right:1px solid #223354;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;--text:#EAF0FB;--muted:#B9C7E4;--faint:#8497B6;--line-soft:#2a3a58}
.side::before{content:"";position:absolute;inset:-8%;z-index:0;background:url(/static/proveon-cosmo.jpg) center 18%/cover;transform-origin:52% 28%;animation:pv-side-kb 34s ease-in-out infinite alternate;will-change:transform}
.side::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(9,17,34,.82),rgba(9,17,34,.60) 42%,rgba(9,17,34,.94));pointer-events:none}
.side>*{position:relative;z-index:1}
@keyframes pv-side-kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-2.5%)}}
@media (prefers-reduced-motion:reduce){.side::before{animation:none;transform:scale(1.04)}}
.brand{display:flex;align-items:center;gap:12px;padding:8px 6px 22px;text-decoration:none}
.brand .wm{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;white-space:nowrap}
.brand .wm .o{color:var(--gold)}
.navsec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:16px 10px 8px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:.15s;position:relative}
.nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav a.on{background:rgba(77,124,255,.13);color:#fff}
.nav a.on:before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--sap-bright)}
.nav a svg{opacity:.85}
.side .user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line-soft)}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--sap-bright),var(--sapphire));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px}
/* topbar */
.main{display:flex;flex-direction:column;min-width:0}
.top{height:62px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(12px);z-index:20}
.tbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:13px;padding:9px 15px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--sap-bright),var(--sapphire));color:#fff;box-shadow:0 6px 20px -8px var(--glow)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--text)}
/* content */
/* Niente overflow qui. Un contenitore con overflow:auto diventa il riquadro
   di scorrimento dei figli con position:sticky: la barra delle sezioni si
   ancorava a .content invece che alla finestra e, siccome .content è alto
   quanto il suo contenuto e non scorre mai, non si fermava mai in alto —
   scorreva via con la pagina. Le tabelle larghe hanno già il proprio
   contenitore con overflow-x nei rispettivi modelli. (19/10/2026) */
.content{padding:24px;min-width:0}
/* --- briciole di navigazione (rifatte 04/10/2026: erano illeggibili e non cliccabili) --- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:6px;padding:2px 4px;transition:.15s}
.crumbs a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.crumbs b{color:var(--text);font-weight:600}
.crumbs .sep{color:var(--faint);opacity:.6}
.crumb-back{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px !important;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text) !important;font-weight:500}
.crumb-back:hover{border-color:var(--sap-bright);background:var(--surface-3)}
.crumb-back svg{flex-shrink:0}
html[data-theme="light"] .crumbs a:hover{background:rgba(20,40,90,.06)}

/* --- contesto impresa nella barra laterale --- */
.ctx{margin:4px 0 6px;padding:6px 0 8px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ctxhead{display:flex !important;align-items:center;gap:9px;font-weight:600 !important;color:var(--text) !important}
.ctxname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxsub{display:block !important;padding:7px 11px 7px 37px !important;font-size:12.8px !important;
  color:var(--muted) !important;border-radius:9px;position:relative}
.ctxsub::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:1px;background:var(--line)}
.ctxsub:hover{color:var(--text) !important;background:rgba(255,255,255,.04)}
.ctxsub.on{color:var(--text) !important;background:rgba(77,124,255,.14)}
.ctxsub.on::before{background:var(--sap-bright);width:2px}
html[data-theme="light"] .ctxsub:hover{background:rgba(20,40,90,.05)}
html[data-theme="light"] .ctxsub.on{background:rgba(36,80,216,.1)}
@media(max-width:900px){.ctx{border:0;width:100%}.ctxsub{padding-left:16px !important}.ctxsub::before{display:none}}
.cohead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;flex-wrap:wrap}
.cohead h1{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.cometa{display:flex;gap:14px;color:var(--faint);font-size:12.5px;font-family:var(--mono);margin-top:6px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin:18px 0 22px}
.tabs a{padding:10px 14px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--text);border-color:var(--sap-bright)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);font-size:12px;color:var(--muted)}
.pill.ok{border-color:rgba(47,212,138,.4);color:var(--success);background:rgba(47,212,138,.08)}
/* grid */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.tile{background:linear-gradient(180deg,var(--surface),var(--grad-lo));border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden}
.tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tile .v{font-family:var(--display);font-weight:800;font-size:30px;margin-top:6px;letter-spacing:-.02em}
.tile .sub{font-size:12px;color:var(--muted);margin-top:2px}
.delta{font-family:var(--mono);font-size:11px}.up{color:var(--success)}.down{color:var(--danger)}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.panel{background:linear-gradient(180deg,var(--surface),var(--grad-lo));border:1px solid var(--line);border-radius:var(--r);padding:18px}
.panel h3{font-family:var(--display);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.panel .csub{font-size:12px;color:var(--faint);font-family:var(--mono);margin-top:2px;margin-bottom:14px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
/* explainability */
.factor{margin-bottom:12px}
.factor .fr{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.bar{height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:5px}
/* alerts */
.alert{display:flex;gap:12px;padding:12px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:10px;background:var(--surface)}
.dotwarn{flex:0 0 8px;height:8px;border-radius:50%;margin-top:5px}
/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 10px 10px;border-bottom:1px solid var(--line-soft)}
td{padding:12px 10px;border-bottom:1px solid var(--line-soft)}
tr:hover td{background:rgba(255,255,255,.02)}
.chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:6px;font-weight:500}
.chip.a{background:rgba(47,212,138,.14);color:var(--success)}
.chip.b{background:rgba(77,124,255,.14);color:var(--sap-bright)}
.chip.c{background:rgba(245,165,36,.14);color:var(--warning)}
.oversight{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.side .nav a.on{background:rgba(77,124,255,.22);color:#fff}.side .nav a:hover{background:rgba(255,255,255,.07)}html[data-theme="light"] .side .nav a.on{color:#fff;background:rgba(77,124,255,.22)}html[data-theme="light"] .side .nav a:hover{background:rgba(255,255,255,.07)}html[data-theme="light"] .side .user{border-top-color:#2a3a58}
.side,.side .brand .wm,.side .user{color:#EAF0FB}


/* ---- extra components for sub-pages ---- */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.pagehead h1{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.pagehead p{color:var(--faint);font-size:13px;margin-top:4px;font-family:var(--mono)}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.chipfilter{font-size:12.5px;color:var(--muted);padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer}
.chipfilter.on{color:#fff;border-color:var(--sap-bright);background:rgba(77,124,255,.14)}
html[data-theme=light] .chipfilter.on{color:#0C1A30}
.searchbox{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--faint);font-size:13px;min-width:240px}
.btn-lg{padding:12px 18px;font-size:14px}
/* stepper */
.stepper{display:flex;gap:10px;align-items:center;margin:8px 0 22px}
.stepper .st{display:flex;align-items:center;gap:9px;color:var(--faint);font-size:13px}
.stepper .st .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.stepper .st.on{color:var(--text)}.stepper .st.on .n{background:var(--sap-bright);border-color:var(--sap-bright);color:#fff}
.stepper .st.done .n{background:rgba(47,212,138,.15);border-color:var(--success);color:var(--success)}
.stepper .sep{flex:1;height:1px;background:var(--line-soft);min-width:20px}
/* dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:16px;padding:40px;text-align:center;background:radial-gradient(600px 200px at 50% 0,rgba(77,124,255,.06),transparent 70%)}
.dropzone .ap{margin:0 auto 14px;width:70px;height:70px}
.dropzone b{color:var(--sap-bright)}
.spin{transform-origin:center;animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.pulse{animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:11px;background:var(--surface);margin-bottom:9px}
.doc .fi{width:34px;height:34px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--muted)}
.doc .meta{flex:1}.doc .meta b{font-size:13.5px}.doc .meta span{display:block;color:var(--faint);font-size:11.5px}
.progress{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:6px}.progress span{display:block;height:100%;background:var(--sap-bright)}
.connector{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid var(--line-soft);border-radius:11px;background:var(--surface);margin-bottom:9px}
/* report doc */
.reportdoc{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.reportdoc .rhead{background:var(--ink);color:#EAF0FB;padding:24px 28px;display:flex;justify-content:space-between;align-items:flex-start}
html[data-theme=light] .reportdoc .rhead{color:#EAF0FB}
.reportdoc .rbody{padding:26px 28px}
.rsection{margin-bottom:22px}
.rsection h4{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.rrow{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
/* offers */
.offer{border:1px solid var(--line);border-radius:14px;padding:18px;background:linear-gradient(180deg,var(--surface),var(--grad-lo));position:relative}
.offer.best{border-color:var(--sap-bright);box-shadow:0 0 0 1px var(--sap-bright)}
.offer .bank{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.offer .logo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:#fff}
.offer .rrow2{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.tagbest{position:absolute;top:-10px;right:16px;background:var(--sap-bright);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
/* onboarding */
.ob-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.ob-left{background:var(--ink);color:#EAF0FB;position:relative;overflow:hidden;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between}
.ob-right{padding:56px;display:flex;align-items:center;justify-content:center}
.ob-card{width:100%;max-width:460px}
.ob-step{display:flex;gap:14px;padding:16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);margin-bottom:12px;align-items:flex-start}
.ob-step .ic{width:40px;height:40px;border-radius:11px;background:rgba(77,124,255,.12);border:1px solid rgba(77,124,255,.3);display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.ob-step.done .ic{background:rgba(47,212,138,.14);border-color:var(--success);color:var(--success)}
.obar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin:18px 0}.obar span{display:block;height:100%;background:linear-gradient(90deg,var(--sap-bright),var(--sapphire))}
@media(max-width:900px){.ob-wrap{grid-template-columns:1fr}.ob-left{display:none}}

/* ==========================================================================
   PROVEON app — TEMA "Signal/Aperture" applicato ai componenti reali
   (segue il design-system dei mockup, sopra). Ridefinisce i token storici
   in versione scura e riveste ogni classe legacy col linguaggio dei mockup.
   Dark-only. Reversibile: rimuovere da qui in giù.
   ========================================================================== */
:root{
  /* contratto token storico (usato nei template) in versione scura */
  --ink:#EAF0FB; --ink-2:#C6D4EA; --slate:#9DB0D0; --faint:#6E82A6;
  --mist:#060B16; --card:#0B1424; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08);
  --brand:#4D7CFF; --brand-700:#6E9BFF; --brand-900:#12224A; --brand-050:rgba(77,124,255,.16);
  --sapphire:#4D7CFF; --gold:#F0B429; --teal:#1EA7B5;
  --ok:#2FD48A; --warn:#F5A524; --bad:#FF5C6C;
  --ok-050:rgba(47,212,138,.14); --warn-050:rgba(245,165,36,.15); --bad-050:rgba(255,92,108,.15);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 14px 34px -18px rgba(0,0,0,.72);
  --radius:16px;
}
html{background:var(--bg)}
body{background:
  radial-gradient(1100px 520px at 82% -8%,rgba(77,124,255,.14),transparent 60%),
  radial-gradient(760px 420px at 4% 6%,rgba(240,180,41,.05),transparent 55%),
  var(--bg);
  color:var(--text);font-family:var(--font)}
a{color:var(--brand)}a:hover{color:var(--brand-700)}

/* ---- Tipografia in linguaggio mockup ---- */
h1{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--text)}
h3{font-family:var(--display);font-weight:700;font-size:15px;color:var(--text)}
h4{font-family:var(--display);font-weight:700;color:var(--text)}
.muted{color:var(--muted)} .small{font-size:12px} .sapphire{color:var(--sap-bright)}
h3 small,h3 .muted,h1 small{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.02em;color:var(--faint)}
.back{display:inline-block;color:var(--faint);font-family:var(--mono);font-size:12.5px;margin-bottom:12px;text-decoration:none}
.back:hover{color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---- Card = pannello dei mockup ---- */
.card{background:linear-gradient(180deg,var(--surface),var(--grad-lo));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow)}
.card h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 12px}

/* ---- Tessere KPI (stat/kpi/flag) = tile dei mockup ---- */
.stats,.kpis{display:grid;gap:12px}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpis{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.stat,.kpi{background:linear-gradient(180deg,var(--surface-2),var(--grad-lo));border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.stat b,.kpi b,.flag b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:500}
.stat span,.kpi span,.flag span{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.card:not(.summary) .stats .stat span{font-size:15px;font-weight:650;line-height:1.35;word-break:break-word}
.stat.durc-regolare span{color:var(--success)}
.stat.durc-irregolare span,.stat.durc-scaduto span{color:var(--danger)}
.stat.durc-assente span{color:var(--muted)}

/* ---- Anello rating + box rating ---- */
.summary{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.analysis{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.g-cls{fill:var(--text);font-family:var(--display)} .g-score{fill:var(--muted)}
.g-label{color:var(--muted);font-size:12px;margin-top:4px;font-weight:600}
.gring-A{color:#2FD48A}.gring-B{color:#2FD48A}.gring-C{color:var(--gold)}.gring-D{color:#E8894F}.gring-E{color:var(--danger)}
.rating{background:linear-gradient(180deg,#132449,#0d1830);border:1px solid var(--line);color:#fff;
  border-radius:16px;min-width:150px;padding:16px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rating .cls{font-family:var(--display);font-weight:800;font-size:44px;line-height:1}
.rating-A{background:linear-gradient(180deg,#12724a,#0d3a2b)}.rating-B{background:linear-gradient(180deg,#12724a,#0d3a2b)}
.rating-C{background:linear-gradient(180deg,#8a6a12,#3a2f0d)}.rating-D{background:linear-gradient(180deg,#8a4a12,#3a220d)}
.rating-E{background:linear-gradient(180deg,#8a2530,#3a0d12)}

/* ---- Barre (meter / m-track) — rifatte il 19/10/2026 -------------------
   Com'era: barra alta 11px, riempita da una sfumatura ciano→verde, senza
   alcun riferimento sulla traccia. Tre difetti sovrapposti:
   1. la sfumatura non significava niente. Dentro la stessa barra il colore
      cambiava da un capo all'altro, e l'occhio legge il colore finale, non
      quello della banda: un indice "giallo" finiva arancione acceso.
   2. la traccia era un 0–100 senza tacche, quindi sei indici molto diversi
      fra loro mostravano sei barre piene identiche. Informazione zero.
   3. le righe non avevano spaziatura (.meters non era mai stato definito)
      e le etichette lunghe andavano a capo disallineando la riga.
   Ora: colore di stato pieno, due tacche sulle soglie del modello, righe
   distanziate e raggruppate per categoria. */
.meters{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.m-track{background:var(--surface-3);border:1px solid var(--line);border-radius:6px;
  height:8px;overflow:hidden;position:relative}
.m-fill{height:100%;border-radius:0 4px 4px 0;transition:width .35s}
/* Colori di stato pieni: il verde vuol dire "sopra la soglia buona", non è
   una decorazione. Sono gli stessi tre token usati ovunque nell'applicazione. */
.mband-verde{background:var(--success)}
.mband-giallo{background:var(--warning)}
.mband-rosso{background:var(--danger)}
/* Le due soglie del modello di rating: il punteggio vale 50 sulla soglia
   minima e 80 su quella buona (services/rating.py). Disegnarle trasforma una
   barra astratta in «dove siamo rispetto al riferimento». */
.m-track.soglie::before,.m-track.soglie::after{content:"";position:absolute;
  top:0;bottom:0;width:1px;background:var(--bg);opacity:.8}
.m-track.soglie::before{left:50%}
.m-track.soglie::after{left:80%}
.m-nota{font-size:11px;color:var(--faint);line-height:1}
.meter{display:grid;grid-template-columns:230px 1fr 74px;align-items:center;gap:12px}
.meters-indici .meter{grid-template-columns:236px 1fr 78px 14px}
.m-label{font-size:13px;color:var(--muted);line-height:1.3}
.m-val{text-align:right;font-family:var(--display);font-weight:700;color:var(--text);
  font-size:13px;font-variant-numeric:tabular-nums}
.m-val.spenta{color:var(--faint);font-weight:600}
/* Lo stato non sta mai nel solo colore: accanto al valore c'è un segno che si
   legge anche stampato in bianco e nero o da chi non distingue rosso e verde. */
.m-segno{font-size:12px;text-align:center;font-weight:700;line-height:1}
.sg-verde{color:var(--success)}.sg-giallo{color:var(--warning)}.sg-rosso{color:var(--danger)}
.m-gruppo{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin:9px 0 1px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.meters>.m-gruppo:first-child{margin-top:0}
.m-na{font-size:10px;color:var(--faint);padding-left:8px;line-height:12px}
.csub{font-size:12px;color:var(--faint);font-family:var(--mono);margin:-4px 0 14px}
@media(max-width:640px){
  .meter,.meters-indici .meter{grid-template-columns:1fr 60px 14px;
    grid-template-areas:"lab val seg" "trk trk trk";gap:6px 10px}
  .m-label{grid-area:lab}.m-val{grid-area:val}.m-segno{grid-area:seg}
  .m-track,.m-nota{grid-area:trk}
}

/* ---- liste raccomandazioni / racc ---- */
.racc{list-style:none;padding:0;margin:.2em 0;display:flex;flex-direction:column;gap:7px}
.racc li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px}
.racc li b{margin-left:auto;font-variant-numeric:tabular-nums}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:.4em 0}
@media(max-width:640px){.col2{grid-template-columns:1fr}}
h4.ok{color:var(--success)}h4.warn{color:var(--warning)}
h4.ok,h4.warn{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin:.2em 0 .5em;font-family:var(--mono);font-weight:500}
.commento .sintesi{font-size:15px;color:var(--text);font-weight:600;margin:.2em 0 .8em}
.commento ul{margin:.2em 0 .6em;padding-left:18px}.commento li{margin:.25em 0;font-size:14px;color:var(--ink-2)}
.reg{font-size:13px;color:var(--muted);margin:.6em 0 .2em}
.cr-block h4.sapphire{color:var(--sap-bright);font-family:var(--display);margin:.2em 0 .3em}
.cr-block p{color:var(--ink-2);font-size:13.5px}
.crx{fill:var(--muted)} .crtrend{display:block;margin-top:6px}
.var-up{color:var(--success)}.var-down{color:var(--danger)}.var-flat{color:var(--muted)}

/* ---- Tessere semaforo ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tiles .tile{background:linear-gradient(180deg,var(--surface-2),var(--grad-lo));border:1px solid var(--line);
  border-left:5px solid var(--faint);border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.tiles .tile b{color:var(--text);font-size:14px}
.tile .tsym{font-weight:800;font-size:16px;line-height:1}
.tile .tband{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tiles .tile-verde{border-left-color:var(--success);background:linear-gradient(180deg,rgba(47,212,138,.10),var(--grad-lo))}.tile-verde .tsym{color:var(--success)}
.tiles .tile-giallo{border-left-color:var(--warning);background:linear-gradient(180deg,rgba(245,165,36,.10),var(--grad-lo))}.tile-giallo .tsym{color:var(--warning)}
.tiles .tile-rosso{border-left-color:var(--danger);background:linear-gradient(180deg,rgba(255,92,108,.10),var(--grad-lo))}.tile-rosso .tsym{color:var(--danger)}

/* ---- Tabelle ---- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl thead th{text-align:left;color:var(--faint);background:var(--surface-2);padding:9px 11px;font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);font-weight:500}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.tbl tbody tr:last-child td{border-bottom:0}.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.warnrow td{background:var(--warn-050);color:var(--warning);font-size:12.5px}

/* ---- Tabella lunga: l'intestazione resta ---------------------------------
   Sulla mappatura del piano dei conti ci sono 156 tendine su tredicimila
   pixel di pagina: dopo due schermate non si sa più quale colonna sia quale,
   e «F/V» accanto a «riga del riclassificato» è proprio la coppia che si
   confonde. Si ferma sotto la barra in alto (62px) più l'intestazione di
   pagina, la cui altezza vera sta in --testa e cambia quando si stringe.

   Il contenitore NON può avere overflow: un antenato con overflow diventa il
   riquadro di scorrimento dello sticky, e l'intestazione si fermerebbe
   rispetto a lui — cioè non si fermerebbe affatto. È lo stesso inciampo di
   .content di ieri. Sotto i 900px lo scorrimento laterale serve davvero, e
   lì si rinuncia all'intestazione ferma. */
.tabfissa{overflow:visible}
.tabfissa .tbl thead th{position:sticky;z-index:6;box-shadow:inset 0 -1px 0 var(--line);
  top:calc(62px + var(--testa, 112px) + var(--linguette, 0px))}
@media (max-width:900px){
  .tabfissa{overflow-x:auto}
  .tabfissa .tbl thead th{position:static}
}

/* ---- Badge / pill / stati ---- */
.band{display:inline-block;min-width:20px;padding:3px 10px;text-align:center;border-radius:999px;color:#04121f;
  font-family:var(--display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.band-verde{background:var(--success)}.band-giallo{background:var(--warning)}.band-rosso{background:var(--danger)}.band-neutro{background:var(--muted)}
.status{font-size:12px;padding:4px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;color:var(--muted)}
.status-parsed{color:var(--success);border-color:rgba(47,212,138,.4);background:var(--ok-050)}
.status-needs_review{color:var(--warning);border-color:rgba(245,165,36,.4);background:var(--warn-050)}
.status-error{color:var(--danger);border-color:rgba(255,92,108,.4);background:var(--bad-050)}
.chk{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px}
.chk-ok{color:var(--success);background:var(--ok-050)}.chk-bad{color:var(--danger);background:var(--bad-050)}.chk-warn{color:var(--warning);background:var(--warn-050)}
.pill-ok{background:var(--ok-050);color:#7CE7B6;border:1px solid rgba(47,212,138,.35)}
.pill-warn{background:var(--warn-050);color:#F5C77A;border:1px solid rgba(245,165,36,.35)}
.pill-bad{background:var(--bad-050);color:#FF9AA6;border:1px solid rgba(255,92,108,.35)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot-verde{background:var(--success)}.dot-giallo{background:var(--warning)}.dot-rosso{background:var(--danger)}

/* ---- Bottoni ---- */
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--sap-bright),var(--sapphire));
  color:#fff;border:1px solid transparent;padding:9px 15px;border-radius:10px;font-family:var(--display);font-weight:700;
  font-size:13px;cursor:pointer;text-decoration:none;box-shadow:0 6px 20px -8px var(--glow)}
.btn:hover{filter:brightness(1.07)}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--gold);
  border:1px solid rgba(240,180,41,.4);padding:9px 15px;border-radius:10px;font-family:var(--display);font-weight:700;font-size:13px;text-decoration:none}
.btn-gold:hover{background:rgba(240,180,41,.12)}
.actions .btn{background:var(--surface-2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.actions .btn:hover{border-color:var(--sap-bright);background:rgba(77,124,255,.10)}
.actions .btn-gold{background:linear-gradient(180deg,var(--sap-bright),var(--sapphire));color:#fff;border-color:transparent}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;font-family:var(--display)}
.btn-ghost:hover{border-color:var(--sap-bright)}
.btn-prev{border:1px solid var(--sap-bright);background:var(--surface-2);color:var(--sap-bright);border-radius:9px;padding:5px 12px;cursor:pointer;font-size:13px;margin-right:6px;font-weight:600}
.btn-prev:hover{background:var(--sap-bright);color:#fff}
.btn-del{border:1px solid var(--line);background:var(--surface-2);color:var(--danger);border-radius:9px;padding:5px 12px;cursor:pointer;font-size:13px;font-weight:600}
.btn-del:hover{background:var(--bad-050);border-color:rgba(255,92,108,.5)}
.link{color:var(--sap-bright);font-weight:600}

/* ---- Form ---- */
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inp,.inline-form input,.inline-form select,form label input,textarea,input[type=text],input[type=email],
input[type=password],input[type=number],input[type=date],select{
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;
  background:var(--surface-2);color:var(--text)}
input::placeholder{color:var(--faint)}
input[type=file]{color:var(--muted);font-size:13px}
.inp:focus,.inline-form input:focus,.inline-form select:focus,form label input:focus,input:focus,select:focus{
  outline:2px solid var(--brand-050);border-color:var(--sap-bright)}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px;align-items:end}
.grid-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.grid-form .btn{align-self:end}
.orgsel{background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
/* Il menu a discesa di un <select> lo disegna il SISTEMA OPERATIVO, non noi.
   macOS lo disegna sempre chiaro e ignora questi stili, quindi qui il difetto
   non si vede; Windows invece eredita lo sfondo del select, che nel tema scuro
   e' #111E33, e ci scrive sopra il colore qui sotto. Con il solo `color` il
   risultato era testo quasi nero su fondo quasi nero: la lista sembrava vuota
   e si leggeva una voce per volta, quella sotto il mouse, perche' il sistema
   evidenzia quella riga con un colore suo. Segnalato da Camillo il 21/10/2026.
   Lo sfondo esplicito e' la correzione: senza di quello il colore non basta. */
.orgsel option,select option{background-color:#FFFFFF;color:#0f172a}
.role{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);padding:5px 12px;border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}

/* ---- Messaggi ---- */
.alert{background:var(--bad-050);color:#FF9AA6;padding:11px 14px;border-radius:11px;font-size:14px;border:1px solid rgba(255,92,108,.4)}
.okmsg{background:var(--ok-050);color:#7CE7B6;padding:11px 14px;border-radius:11px;font-size:14px;border:1px solid rgba(47,212,138,.35);margin:8px 0}

/* ---- Dashboard: griglia pratiche ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.company{text-decoration:none;color:inherit;transition:.16s;display:block}
.company:hover{border-color:var(--sap-bright);transform:translateY(-2px)}
.company .link{color:var(--sap-bright);font-weight:600;font-size:14px}

/* ---- riquadro disclaimer AI (inline #f3f6fb) ---- */
.card p.muted.small[style*="f3f6fb"]{background:var(--surface-2)!important;border-left-color:var(--sap-bright)!important;color:var(--ink-2)!important}

/* ---- chat ---- */
.chatlog{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px;max-height:300px;overflow:auto}
.chat-q{align-self:flex-end;background:linear-gradient(180deg,var(--sap-bright),var(--sapphire));color:#fff;padding:8px 13px;border-radius:14px 14px 4px 14px;font-size:13.5px;max-width:78%}
.chat-a{align-self:flex-start;background:var(--surface-2);color:var(--text);padding:8px 13px;border-radius:14px 14px 14px 4px;font-size:13.5px;max-width:90%;white-space:pre-wrap;border:1px solid var(--line-2)}

/* ---- foot ---- */
.foot{color:var(--faint);text-align:center;font-size:12px;padding:22px}

/* ==========================================================================
   Login / autenticazione: schermata cosmica a tutto campo
   ========================================================================== */
.authwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 20px;position:relative;overflow:hidden;background:var(--bg)}
.authwrap::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,22,.60),rgba(6,11,22,.86)),
    radial-gradient(900px 460px at 78% 6%,rgba(77,124,255,.30),transparent 60%),
    url(/static/proveon-cosmo.jpg) center/cover no-repeat;
  animation:pv-cosmo 34s ease-in-out infinite alternate;will-change:transform;transform-origin:62% 40%}
@keyframes pv-cosmo{from{transform:scale(1.05)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
.authbrand{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.authbrand .wm{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;color:#EAF0FB}
.authbrand .wm .o{color:var(--gold)}
.authbody{position:relative;z-index:1;width:100%;max-width:420px}
.authbody .card,.authbody .card.login{margin:0;width:100%;background:linear-gradient(180deg,rgba(11,20,36,.90),rgba(10,17,32,.94));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 90px -30px rgba(0,0,0,.9)}
.login{max-width:420px;margin:0 auto}.login form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.login label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin-top:12px}
.authfoot{position:relative;z-index:1;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.authwrap::before{animation:none}}

/* ---- responsive shell ---- */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;overflow:visible}
  .side .brand{padding:0 8px 0 0}.side .navsec{display:none}
  .side .nav{flex-direction:row;flex-wrap:wrap;gap:4px}.side .nav a.on:before{display:none}
  .side .user{margin:0 0 0 auto;border-top:0;padding:4px 8px}
}

/* ---- dettagli shell usati da base.html ---- */
.side .user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid #2a3a58;text-decoration:none;color:#EAF0FB}
.side .user:hover{opacity:.9}
.uinfo{min-width:0}
.uname{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;color:#EAF0FB}
.urole{font-size:10.5px}
.side .nav a.platlink{color:#F7CE6B}
.top .search{flex:1;max-width:420px}

/* summary: KPI in riga accanto all'anello (come mockup) */
.summary .stats,.analysis .stats{flex:1 1 320px;min-width:280px}
.gauge{display:flex;flex-direction:column;align-items:center;flex:none;gap:4px}

/* --- indice di sezione sulla scheda impresa (04/10/2026) --- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* lo stacco dei collegamenti interni segue l'altezza vera dell'intestazione,
   che cambia quando si stringe: --testa la aggiorna lo script. */
.anchor{display:block;height:0;scroll-margin-top:calc(62px + var(--testa, 112px) + 14px)}
/* 62px è l'altezza esatta della barra in alto, che è anch'essa sticky:
   la barra delle sezioni si ferma appena sotto, senza coprirla e senza
   finirci sotto. Vale anche sotto i 900px, dove la barra in alto resta
   dov'è e la striscia dei moduli scorre via. */
/* ---- Intestazione di pagina fissa (19/10/2026) ----------------------------
   Il raggruppamento lo fa uno script in base.html; qui c'è solo l'aspetto.
   62px è l'altezza della barra in alto, che è anch'essa sticky: questa si
   ferma appena sotto. */
.pagetop{position:sticky;top:62px;z-index:8;background:var(--bg);
  padding-top:10px;margin-bottom:16px;transition:padding .15s}
.pagetop .crumbs{margin-bottom:10px}
.pagetop .cohead{margin-bottom:0}
/* dentro l'intestazione l'indice di sezione non è più sticky per conto suo:
   lo è il contenitore. Due sticky annidati si fermano a quote diverse. */
.pagetop .tabs-nav{position:static;padding-top:10px;margin-bottom:0}
.pagetop::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:linear-gradient(180deg,var(--bg),transparent);pointer-events:none}
/* Stretta: scorrendo restano le briciole e il titolo, spariscono i contorni. */
.pagetop.ridotta{padding-top:6px}
.pagetop.ridotta .crumbs{margin-bottom:4px}
.pagetop.ridotta h1{font-size:20px}
.pagetop.ridotta .cometa{display:none}
.pagetop.ridotta .pill,.pagetop.ridotta .cohead .btn{transform:scale(.92)}

/* Striscia di schede che NON sta nell'intestazione perché sulla pagina viene
   dopo qualcos'altro (nel business plan, dopo le assunzioni del piano):
   tirarla su nell'intestazione cambierebbe l'ordine della pagina. Resta dove
   è e si ferma sotto l'intestazione, che è alta --testa. */
.tabs-sotto{position:sticky;top:calc(62px + var(--testa, 112px));z-index:6;
  background:var(--bg);padding-top:8px;flex-wrap:wrap}

/* Quindici schede in fila non sono una navigazione: sono un elenco. L'etichetta
   divide quelle che CHIEDONO qualcosa da quelle che RISPONDONO, e si legge come
   un'etichetta, non come una scheda su cui si puo' cliccare (23/10/2026). */
.tabgruppo{align-self:center;padding:0 10px 0 2px;margin-bottom:-1px;
  font-family:var(--display);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;
  border-bottom:2px solid transparent}
.tabgruppo + a{border-left:1px solid var(--line-soft)}

.tabs-nav{position:sticky;top:62px;z-index:6;background:var(--bg);
  padding-top:12px;margin-top:0;margin-bottom:22px}
.tabs-nav a{cursor:pointer;text-decoration:none}
.tabs-nav a:hover{color:var(--text)}
/* Quando è appoggiata in alto deve leggersi come una barra, non come testo
   sospeso sopra il contenuto che le scorre dietro. */
.tabs-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:10px;
  background:linear-gradient(180deg,var(--bg),transparent);pointer-events:none}
@media(max-width:900px){.pagetop{top:62px}}

/* --- ricerca imprese nella barra in alto --- */
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:0 13px;color:var(--faint);font-size:13px;margin:0}
.search:focus-within{border-color:var(--sap-bright);box-shadow:0 0 0 3px var(--glow)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);
  font-family:var(--font);font-size:13px;padding:10px 0}
.search input::placeholder{color:var(--faint)}
.search svg{flex-shrink:0;color:var(--faint)}
@media(max-width:900px){.search{max-width:none}}


/* ===== Sezioni della scheda impresa ======================================
   La scheda è ordinata per domanda: ogni sezione ne copre una sola. Il
   numero e la domanda in chiaro servono a rendere visibile il criterio,
   altrimenti resta nella testa di chi l'ha ordinata. */
.sezione{display:flex;align-items:baseline;gap:11px;margin:38px 0 16px;scroll-margin-top:124px}
.sezione::before{content:"";width:16px;height:2px;border-radius:2px;
  background:var(--gold);flex:none;position:relative;top:-4px}
.sezione h2{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text);margin:0;flex:none}
.sezione .dom{font-size:12.5px;color:var(--faint);flex:none}
.sezione::after{content:"";flex:1;height:1px;background:var(--line-soft);
  position:relative;top:-3px}
@media(max-width:700px){
  .sezione{flex-wrap:wrap;gap:8px;margin:28px 0 12px}
  .sezione .dom{width:100%;order:3}
  .sezione::after{display:none}
}

/* ---- Le due griglie del business plan professional ------------------------
   Sono tabelle da compilare, non da leggere: dieci righe per sette colonne e
   quattordici per otto. Vogliono l'intestazione ferma (.tabfissa), e
   .tabfissa vieta l'overflow sul contenitore — quindi la tabella deve stare
   nella larghezza da sé, altrimenti sborda dalla pagina e porta con sé la
   barra laterale. Da qui table-layout:fixed con le colonne in percentuale: la
   tabella non può crescere oltre il suo contenitore, sono le celle a
   stringersi. Senza min-width:0 un input dentro una cella fissa si rifiuta
   comunque di rimpicciolirsi. */
.linee-ric,.linee-cos{table-layout:fixed;width:100%}
.linee-ric td,.linee-cos td{padding:6px 7px;vertical-align:middle}
.linee-ric th,.linee-cos th{padding:8px 7px;white-space:normal;line-height:1.25}
.linee-ric .inp,.linee-cos .inp{width:100%;min-width:0;box-sizing:border-box}

/* I due modi di una linea di ricavo si dividono la stessa colonna: si vede
   solo il campo del modo scelto. Nascosto, non disabilitato — un campo
   disabilitato il browser non lo invia, e queste colonne si rileggono per
   posizione. La regola serve perché .inp porta un display suo, che vincerebbe
   su quello del browser per [hidden]. */
.linee-ric [hidden]{display:none !important}

.linee-ric col.c1{width:20%}.linee-ric col.c2{width:16%}.linee-ric col.c3{width:14%}
.linee-ric col.c4{width:12%}.linee-ric col.c5{width:14%}.linee-ric col.c6{width:12%}
.linee-ric col.c7{width:12%}
.linee-cos col.k1{width:19%}.linee-cos col.k2{width:14%}.linee-cos col.k3{width:10%}
.linee-cos col.k4{width:14%}.linee-cos col.k5{width:10%}.linee-cos col.k6{width:7%}
.linee-cos col.k7{width:16%}.linee-cos col.k8{width:10%}

/* Sotto i 900px le celle diventerebbero illeggibili: lì la tabella torna a
   scorrere in orizzontale, e l'intestazione ferma la si perde (la regola
   generale di .tabfissa). Una griglia così su un telefono non si compila
   comunque: si guarda. */
@media (max-width:900px){.linee-ric,.linee-cos{min-width:900px}}

/* Le due griglie di investimenti e fonti: stessa logica delle linee di ricavo
   — intestazione ferma, quindi niente overflow sul contenitore, quindi
   larghezza governata dalle colonne e non dal contenuto. */
.beni-inv,.beni-fon{table-layout:fixed;width:100%}
.beni-inv td,.beni-fon td{padding:6px 7px;vertical-align:middle}
.beni-inv th,.beni-fon th{padding:8px 7px;white-space:normal;line-height:1.25}
.beni-inv .inp,.beni-fon .inp{width:100%;min-width:0;box-sizing:border-box}
.beni-inv col.b1{width:38%}.beni-inv col.b2{width:17%}.beni-inv col.b3{width:11%}
.beni-inv col.b4{width:13%}.beni-inv col.b5{width:21%}
.beni-fon col.f1{width:17%}.beni-fon col.f2{width:15%}.beni-fon col.f3{width:11%}
.beni-fon col.f4{width:7%}.beni-fon col.f5{width:8%}.beni-fon col.f6{width:8%}
.beni-fon col.f7{width:8%}.beni-fon col.f8{width:9%}.beni-fon col.f9{width:8%}
.beni-fon col.f10{width:9%}
@media (max-width:900px){.beni-inv,.beni-fon{min-width:900px}}

/* La griglia delle altre poste del circolante: stessa regola delle altre. */
.circ-voci{table-layout:fixed;width:100%}
.circ-voci td{padding:6px 7px;vertical-align:middle}
.circ-voci th{padding:8px 7px;white-space:normal;line-height:1.25}
.circ-voci .inp{width:100%;min-width:0;box-sizing:border-box}
.circ-voci col.v1{width:42%}.circ-voci col.v2{width:17%}
.circ-voci col.v3{width:26%}.circ-voci col.v4{width:15%}
@media (max-width:900px){.circ-voci{min-width:760px}}

/* Classificazione dei costi per categoria: quattro colonne, due da compilare.
   La colonna della provenienza e' la piu' larga delle due di testo perche'
   porta due dichiarazioni per riga (importo e quota), e se va a capo male
   la riga cresce e la griglia si disallinea. */
.ricl-voci{table-layout:fixed;width:100%}
.ricl-voci td{padding:6px 7px;vertical-align:middle}
.ricl-voci th{padding:8px 7px;white-space:normal;line-height:1.25}
.ricl-voci .inp{width:100%;min-width:0;box-sizing:border-box}
.ricl-voci col.v1{width:34%}.ricl-voci col.v2{width:18%}
.ricl-voci col.v3{width:16%}.ricl-voci col.v4{width:32%}
@media (max-width:900px){.ricl-voci{min-width:720px}}


/* Etichetta sopra, campo sotto — sempre.
   I moduli sono scritti come <label>Testo<input></label>, con il campo sulla
   stessa riga del testo. Finche' le etichette sono corte sembra allineato;
   appena una e' piu' lunga delle altre va a capo da sola e il suo campo scende
   di una riga mentre i vicini restano su. Succedeva nei «Giorni medi
   dell'impresa» del business plan, dove «Giorni pagamento fornitori» si
   comportava diversamente dagli altri due. Sono 62 etichette cosi' in tutta
   l'applicazione: si governano da qui, non a mano una per una (20/10/2026).
   Caselle di spunta e radio restano in linea col loro testo, che e' giusto. */
label > input:not([type=checkbox]):not([type=radio]):not([type=file]),
label > select,
label > textarea{display:block;width:100%;margin-top:4px;box-sizing:border-box}

/* ---- Controllo di gestione: schede, blocchi, gruppi (21/10/2026) ----
   Centocinquanta conti in una lista non si leggono, si scorrono. Si leggono a
   strati: scheda, blocco, raggruppamento di provenienza. Chi lavora apre un
   gruppo, lo chiude e passa oltre, e in ogni momento vede quanto manca senza
   dover aprire niente. */
.cdg-blocco-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.cdg-gruppo{border:1px solid var(--line-soft,var(--line));border-radius:10px;margin:8px 0;background:rgba(255,255,255,.012)}
.cdg-gruppo > summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  font-size:13px;list-style:none;border-radius:10px}
.cdg-gruppo > summary::-webkit-details-marker{display:none}
.cdg-gruppo > summary::before{content:"▸";color:var(--faint);font-size:11px;width:10px}
.cdg-gruppo[open] > summary::before{content:"▾"}
.cdg-gruppo > summary:hover{background:var(--surface-2)}
.cdg-gruppo-nome{font-weight:650;color:var(--text);text-transform:uppercase;letter-spacing:.03em;font-size:11.5px}
.cdg-gruppo-tot{margin-left:auto;color:var(--muted);font-size:12px}
.cdg-gruppo .tbl{margin:0 0 8px}
.cdg-manca{background:rgba(255,92,108,.06)}
.cdg-nome{padding-left:10px}
.cdg-pct{width:74px;text-align:right}
.cdg-origine{max-width:230px}
.cdg-controlli{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft,var(--line))}
.cdg-fv{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.cdg-sp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cdg-sp h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cdg-tot td{border-top:1px solid var(--line)}
@media (max-width:760px){
  .cdg-blocco-top{flex-direction:column}
  .cdg-gruppo-tot{margin-left:0}
}
.cdg-periodo-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:10px}
.cdg-periodo-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}

/* ---- Indici: i numeri sotto il rapporto (22/10/2026) ----
   Una percentuale da sola non si puo' controllare. Sotto ogni barra stanno le
   due grandezze da cui il rapporto nasce, in euro, perche' sono quelle di cui
   si discute davvero quando qualcuno legge l'analisi. */
.m-comp{grid-column:1/-1;font-size:11px;color:var(--faint);margin:-2px 0 6px;line-height:1.5}
.m-comp b{color:var(--muted);font-weight:600;font-family:var(--mono);font-size:11px}
.cdg-appr{margin:20px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tbl-appr td{padding-top:6px;padding-bottom:6px}