/* ===========================================================================
   BASE — struttura e componenti. Nessun colore scritto a mano:
   ogni valore arriva da una variabile definita in tema.css.
   Se qui compare un #hex, e' un errore da correggere.
   =========================================================================== */

/* =========================================================================
   2. BASE
   ========================================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--text);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.neg{color:var(--neg)} .pos{color:var(--pos)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* etichetta larga: ricorre come marcatore di sezione in tutta l'applicazione */
.eyebrow{
  font-family:var(--font-display); font-stretch:118%; font-weight:600;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; display:block;
}
h1{font-family:var(--font-display); font-stretch:96%; font-weight:700; font-size:26px;
   letter-spacing:-.02em; margin:0 0 6px; line-height:1.15}
h2{font:inherit} /* neutralizzato: i titoli di sezione usano .eyebrow */
.sub{color:var(--muted); font-size:13.5px; margin:0 0 24px; max-width:64ch}

/* firma grafica: l'evidenziatore giallo sul numero che conta */
.mark{
  background-image:linear-gradient(104deg, transparent 1%, var(--accent) 1%, var(--accent) 99%, transparent 99%);
  background-size:100% 62%; background-position:0 78%; background-repeat:no-repeat;
  padding:0 3px; color:var(--accent-ink);
}

/* =========================================================================
   3. TELAIO: barra laterale + barra alta
   ========================================================================= */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
body.naked .shell{grid-template-columns:1fr}
body.naked .side, body.naked .top{display:none}

.side{background:var(--frame); color:var(--frame-text); position:sticky; top:0; height:100vh;
  overflow-y:auto; display:flex; flex-direction:column; padding-bottom:8px}
.brand{padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.09)}
.brand b{display:block; font-family:var(--font-display); font-stretch:100%; font-weight:700;
  font-size:16px; color:var(--frame-text-hi); letter-spacing:-.01em}
.brand span{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--frame-text-faint);
  font-family:var(--font-display); font-stretch:112%}
.brand .dot{display:inline-block; width:7px; height:7px; background:var(--accent); margin-right:7px;
  vertical-align:2px}
.navlab{font-family:var(--font-display); font-stretch:114%; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--frame-text-faint); padding:18px 18px 6px}
.navb{display:block; width:100%; text-align:left; background:none; border:0; color:var(--frame-text);
  font:inherit; font-size:13.5px; padding:7px 18px; cursor:pointer; border-left:3px solid transparent}
.navb .n{font-family:var(--font-num); font-size:11px; color:var(--frame-text-faint); margin-right:8px}
.navb:hover{color:var(--frame-text-hi); background:rgba(255,255,255,.05)}
.navb[aria-current="true"]{color:var(--frame-text-hi); background:rgba(255,255,255,.08);
  border-left-color:var(--accent); font-weight:500}
.navb[aria-current="true"] .n{color:var(--accent)}
.navb[hidden]{display:none}
.side-foot{margin-top:auto; padding:14px 18px 4px; border-top:1px solid rgba(255,255,255,.09)}
.side-foot .who{display:flex; align-items:center; gap:9px}
.side-foot .who b{color:var(--frame-text-hi); font-weight:500; font-size:13px; display:block}
.side-foot .who small{color:var(--frame-text-faint); font-size:11px}
.side-foot .esci{background:none; border:0; font:inherit; font-size:11.5px; cursor:pointer;
  padding:0; margin-top:10px; color:var(--frame-text-faint);
  text-decoration:underline; text-underline-offset:3px}
.side-foot .esci:hover{color:var(--frame-text-hi)}

.top{background:var(--frame); color:var(--frame-text); padding:0 24px; height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:5; border-bottom:1px solid rgba(255,255,255,.09)}
.crumb{font-size:12.5px; color:var(--frame-text-dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crumb b{color:var(--frame-text-hi); font-weight:500}
.crumb i{font-style:normal; color:var(--frame-text-faint); margin:0 6px}
.topright{display:flex; align-items:center; gap:8px; flex-shrink:0}
.chip{font-size:11.5px; padding:4px 9px; border:1px solid rgba(255,255,255,.16); border-radius:100px;
  color:var(--frame-text); background:rgba(255,255,255,.04)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.chip.sel{padding:0}
.chip.sel select{background:none; border:0; color:var(--frame-text); font:inherit; font-size:11.5px;
  padding:4px 9px; cursor:pointer}
.chip.sel select option{background:var(--panel); color:var(--text)}
.avatar{width:27px; height:27px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; font-family:var(--font-display); flex-shrink:0}
.avatar.g{background:var(--frame-2); color:var(--frame-text-hi)}

.main{min-width:0}
.page{padding:30px 32px 70px; max-width:1120px}
.page[hidden]{display:none}
.phead{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap}
.phead .grow{flex:1; min-width:280px}
.phead .acts{display:flex; gap:8px; padding-top:4px; flex-wrap:wrap}

/* =========================================================================
   4. COMPONENTI
   ========================================================================= */
.card{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:20px;
  box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card-h{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.card-h .eyebrow{margin:0}
.card-h .grow{flex:1}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.stack{margin-top:16px}

.btn{font:inherit; font-size:13px; font-weight:500; padding:7px 14px; border-radius:var(--r);
  border:1px solid var(--frame); background:var(--frame); color:var(--frame-text-hi); cursor:pointer;
  white-space:nowrap}
.btn:hover{opacity:.88}
.btn.key{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.ghost{background:var(--panel); color:var(--text); border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--panel-2); opacity:1}
.btn.danger{background:var(--panel); color:var(--neg); border-color:var(--neg)}
.btn.sm{font-size:12px; padding:4px 10px}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.linkb{background:none; border:0; font:inherit; font-size:12.5px; color:var(--text-soft);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0}
.linkb:hover{color:var(--text)}

.tag{display:inline-block; white-space:nowrap; font-size:10.5px; letter-spacing:.03em; padding:2px 7px; border-radius:2px;
  font-weight:600; font-family:var(--font-display); font-stretch:108%; text-transform:uppercase}
.t-ok{background:var(--pos-soft); color:var(--pos)}
.t-warn{background:var(--accent-soft); color:var(--accent-line)}
.t-err{background:var(--neg-soft); color:var(--neg)}
.t-mute{background:var(--panel-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--rule)}
.t-info{background:var(--info-soft); color:var(--info)}
html[data-theme="notte"] .t-warn{color:var(--accent)}

/* tabelle contabili */
table{width:100%; border-collapse:collapse}
th{font-family:var(--font-display); font-stretch:110%; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600; text-align:right;
  padding:0 0 8px; border-bottom:1px solid var(--rule-strong)}
th:first-child{text-align:left}
td{padding:7px 0; border-bottom:1px solid var(--rule); text-align:right; font-size:13px}
td:first-child{text-align:left; color:var(--text-soft)}
tr.tot td{font-weight:600; color:var(--text); border-bottom:2px solid var(--rule-strong); padding-top:9px}
tr.sub td:first-child{padding-left:16px; color:var(--muted)}
table.pad td, table.pad th{padding-left:10px; padding-right:10px}
table.pad td:first-child, table.pad th:first-child{padding-left:0}
table.pad td:last-child, table.pad th:last-child{padding-right:0}
.col-plan{background:var(--panel-2)}
.hint{font-size:11.5px; color:var(--faint); margin-top:10px}

.rowlist{border-top:1px solid var(--rule)}
.rowitem{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule)}
.rowitem b{font-weight:500; font-size:14px}
.rowitem .grow{flex:1; min-width:0}
.rowitem small{display:block; color:var(--muted); font-size:12px}
.rowitem:hover{background:var(--panel-2)}

.kpi{padding:14px 16px; border:1px solid var(--rule); border-radius:var(--r); background:var(--panel)}
.kpi .lab{font-family:var(--font-display); font-stretch:112%; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:600}
.kpi .val{font-size:21px; font-weight:500; margin-top:5px; letter-spacing:-.02em}
.kpi .delta{font-size:11.5px; margin-top:3px; color:var(--muted)}
.kpi.key{border-color:var(--frame); border-width:1px; box-shadow:inset 3px 0 0 var(--accent)}

.bar{height:6px; background:var(--panel-2); border-radius:100px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--rule)}
.bar i{display:block; height:100%; background:var(--frame)}
.bar.acc i{background:var(--accent)}

.note{background:var(--panel-2); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:12px 14px; font-size:12.5px; color:var(--text-soft)}
.note b{color:var(--text)}
.quote{border-left:3px solid var(--accent); background:var(--accent-soft); padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0; color:var(--text)}
.quote p{margin:0 0 10px} .quote p:last-child{margin:0}

/* campi */
.field{display:block; margin-bottom:14px}
.field .lab{display:block; font-size:12px; color:var(--text-soft); margin-bottom:5px; font-weight:500}
.field .help{font-size:11.5px; color:var(--faint); margin-top:5px}
.field .err{font-size:11.5px; color:var(--neg); margin-top:5px}
.inp{font:inherit; font-size:13.5px; padding:8px 10px; border:1px solid var(--rule-strong);
  border-radius:var(--r); background:var(--panel); color:var(--text); width:100%}
.inp:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent-line)}
.inp.bad{border-color:var(--neg); background:var(--neg-soft)}
.inp.n{font-family:var(--font-num); font-variant-numeric:tabular-nums; text-align:right;
  width:104px; padding:4px 8px; font-size:13px}
.inp.ghosted{color:var(--faint); border-style:dashed}
select.inp{cursor:pointer}
.inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--text-soft); cursor:pointer}
.check input{margin-top:3px; accent-color:var(--frame)}

.sw{width:36px; height:20px; border-radius:100px; background:var(--rule-strong); position:relative;
  border:0; cursor:pointer; flex-shrink:0; transition:background .15s}
.sw::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--knob); transition:left .15s}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{left:18px}

/* tab a pillola dentro le schede */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tab{font:inherit; font-size:12.5px; padding:5px 12px; border:1px solid var(--rule-strong);
  background:var(--panel); color:var(--text-soft); border-radius:100px; cursor:pointer}
.tab:hover{background:var(--panel-2)}
.tab[aria-selected="true"]{background:var(--frame); border-color:var(--frame);
  color:var(--frame-text-hi); font-weight:500}
.tab[aria-selected="true"]:hover{background:var(--frame)}

/* riga di ipotesi: nome, valore storico, anni */
.ass{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule)}
.ass .grow{flex:1; min-width:0}
.ass .name{font-size:13.5px}
.ass .from{font-size:11.5px; color:var(--faint)}
.ass .std{font-family:var(--font-num); font-size:12.5px; color:var(--muted); width:96px; text-align:right}
.asshead{display:flex; gap:14px; padding-bottom:8px; border-bottom:1px solid var(--rule-strong);
  font-family:var(--font-display); font-stretch:110%; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600}

.searchrow{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap}
.searchrow .inp{width:270px}

/* sezioni bilancio */
.split{display:grid; grid-template-columns:214px 1fr; gap:26px; align-items:start}
.seclist{border-left:2px solid var(--rule)}
.secb{display:block; width:100%; text-align:left; background:none; border:0; font:inherit; cursor:pointer;
  padding:8px 12px; margin-left:-2px; border-left:2px solid transparent; color:var(--text-soft); font-size:13px}
.secb:hover{background:var(--panel-2)}
.secb[aria-current="true"]{border-left-color:var(--accent); color:var(--text); font-weight:500;
  background:var(--panel-2)}
.secb span{display:block; font-size:11px; color:var(--faint)}

/* intervallo di valore */
.range{position:relative; height:38px; margin:20px 0 6px}
.range .line{position:absolute; top:18px; left:0; right:0; height:2px; background:var(--rule-strong)}
.range .band{position:absolute; top:12px; height:14px; background:var(--accent-soft);
  border-left:2px solid var(--accent-line); border-right:2px solid var(--accent-line)}
.range .dot{position:absolute; top:14px; width:9px; height:9px; border-radius:50%; background:var(--frame);
  transform:translateX(-50%)}
.range .lab{position:absolute; top:-2px; font-size:11px; color:var(--muted); transform:translateX(-50%)}

/* matrice permessi */
.matrix th{text-align:center; padding:0 8px 10px} .matrix th:first-child{text-align:left}
.matrix td{text-align:center; padding:8px} .matrix td:first-child{text-align:left; padding-left:0}
.matrix tr.head td{font-family:var(--font-display); font-stretch:110%; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:18px; border-bottom-color:var(--rule-strong)}
.yes{color:var(--pos); font-weight:600}
.no{color:var(--faint)}
.part{color:var(--accent-line); font-weight:600}
html[data-theme="notte"] .part{color:var(--accent)}

/* registro attività */
.log{border-top:1px solid var(--rule)}
.logrow{display:grid; grid-template-columns:132px 152px 1fr 96px; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--rule); font-size:12.5px; align-items:baseline}
.logrow .when{font-family:var(--font-num); font-size:11.5px; color:var(--muted)}
.logrow .who{color:var(--text); font-weight:500}
.logrow .what{color:var(--text-soft)}
.logrow .ip{font-family:var(--font-num); font-size:11px; color:var(--faint); text-align:right}


/* ripristino del valore storico su un campo scritto a mano */
.undo{position:absolute; right:-9px; top:-8px; width:17px; height:17px; border-radius:50%;
  border:1px solid var(--rule-strong); background:var(--panel); color:var(--muted); cursor:pointer;
  font:inherit; font-size:12px; line-height:1; display:grid; place-items:center; padding:0}
.undo:hover{background:var(--frame); color:var(--frame-text-hi); border-color:var(--frame)}

/* passi numerati */
.steps{display:flex; gap:0; margin-bottom:24px; border-bottom:1px solid var(--rule)}
.step{display:flex; align-items:center; gap:9px; padding:0 18px 12px; border-bottom:2px solid transparent;
  margin-bottom:-1px; color:var(--muted); font-size:13px}
.step:first-child{padding-left:0}
.step .n2{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px;
  font-family:var(--font-num); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--rule-strong)}
.step[aria-current="true"]{color:var(--text); font-weight:500; border-bottom-color:var(--accent)}
.step[aria-current="true"] .n2{background:var(--accent); color:var(--accent-ink); box-shadow:none; font-weight:600}
.step.done .n2{background:var(--frame); color:var(--frame-text-hi); box-shadow:none}

/* area di caricamento file */
.drop{border:1px dashed var(--rule-strong); border-radius:var(--r); background:var(--panel-2);
  padding:30px; text-align:center}
.drop b{display:block; font-size:14px; margin-bottom:4px}
.drop p{color:var(--muted); font-size:12.5px; margin:0 0 14px}

/* corrispondenza voci in importazione */
.mapr{display:grid; grid-template-columns:1fr 22px 1fr 96px; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:13px}
.mapr .arrow{color:var(--faint); text-align:center}
.mapr .src{font-family:var(--font-num); font-size:12.5px; color:var(--text-soft)}
.mapr select{font:inherit; font-size:12.5px; padding:3px 6px; border:1px solid var(--rule-strong);
  border-radius:3px; background:var(--panel); color:var(--text); width:100%}

/* coda di elaborazione */
.job{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule)}
.job .grow{flex:1; min-width:0}
.job b{font-weight:500; font-size:13.5px}
.job small{display:block; color:var(--muted); font-size:11.5px}

/* selettore tema */
.themes{display:flex; gap:10px; flex-wrap:wrap}
.theme{border:1px solid var(--rule-strong); border-radius:var(--r); padding:10px; background:var(--panel);
  cursor:pointer; text-align:left; font:inherit; width:150px}
.theme[aria-pressed="true"]{border-color:var(--frame); box-shadow:inset 0 0 0 1px var(--frame)}
.theme .sws{display:flex; gap:4px; margin-bottom:8px}
.theme .sw2{width:22px; height:22px; border-radius:3px; border:1px solid rgba(0,0,0,.12)}
.theme b{display:block; font-size:12.5px; font-weight:600}
.theme small{color:var(--muted); font-size:11px}

/* schermate di accesso */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.auth-side{background:var(--frame); color:var(--frame-text); padding:40px; display:flex;
  flex-direction:column; justify-content:space-between}
.auth-side .big{font-family:var(--font-display); font-stretch:92%; font-weight:700; font-size:34px;
  line-height:1.1; color:var(--frame-text-hi); letter-spacing:-.02em; max-width:14ch}
.auth-side .big em{font-style:normal; color:var(--accent)}
.auth-side p{max-width:38ch; font-size:13.5px; color:var(--frame-text-dim)}
.auth-form{display:flex; align-items:center; justify-content:center; padding:40px; background:var(--panel)}
.auth-box{width:100%; max-width:352px}
.auth-box h1{font-size:22px; margin-bottom:4px}
.auth-box .sub{margin-bottom:22px; font-size:13px}
.auth-sep{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--faint); font-size:11.5px}
.auth-sep::before,.auth-sep::after{content:""; height:1px; background:var(--rule); flex:1}
.code{display:flex; gap:8px}
.code input{width:44px; height:52px; text-align:center; font-family:var(--font-num); font-size:20px;
  border:1px solid var(--rule-strong); border-radius:var(--r); background:var(--panel); color:var(--text)}
.code input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.legal{font-size:11px; color:var(--faint); margin-top:24px; line-height:1.5}

/* stato vuoto */
.empty{text-align:center; padding:44px 20px; border:1px dashed var(--rule-strong); border-radius:var(--r)}
.empty b{display:block; font-family:var(--font-display); font-size:15px; margin-bottom:4px}
.empty p{color:var(--muted); font-size:13px; margin:0 auto 16px; max-width:44ch}

footer.legend{margin-top:28px; padding-top:16px; border-top:1px solid var(--rule); font-size:12px;
  color:var(--muted); max-width:80ch}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto}
  .side-foot{margin-top:8px}
  .grid2,.grid3,.grid4,.split,.auth{grid-template-columns:1fr}
  .auth-side{min-height:auto; padding:28px}
  .page{padding:22px 16px 60px}
  .top{padding:0 16px}
  .logrow{grid-template-columns:1fr 1fr; }
  .logrow .ip{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .page{animation:fade .18s ease-out}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}
@media print{.side,.top{display:none}}

/* ---------------------------------------------------------------------------
   Voci di menu come collegamenti (nei template Django la navigazione e' fatta
   di <a>, non di <button> come nel prototipo).
   --------------------------------------------------------------------------- */
a.navb{text-decoration:none}
.navb-spenta{color:var(--frame-text-faint); cursor:default}
.navb-spenta:hover{background:none; color:var(--frame-text-faint)}
a.btn, a.rowitem, a.secb{text-decoration:none}
a.rowitem{color:inherit}
/* ===========================================================================
   Correzioni da aggiungere in fondo a static/css/base.css
   =========================================================================== */

/* Il nome dello studio sta su una riga sola. "Studio Bianchi & Associati"
   andava a capo e spingeva in basso tutto il menu; i nomi degli studi sono
   lunghi quasi sempre, quindi il caso normale e' questo, non l'eccezione. */
.brand b{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Venti voci piu' quattro etichette di gruppo non entrano in 900 px di
   altezza. Due punti in meno per voce le fanno stare senza toccare il corpo
   del testo, che resta a 13.5 px. */
.navb{padding:6px 18px}
.navlab{padding:14px 18px 5px}
.brand{padding:16px 18px 14px}

/* La barra laterale scorre da sola quando serve, ma senza mostrare una
   scrollbar sempre visibile che taglia il nero in due. */
.side{scrollbar-width:thin; scrollbar-color:var(--frame-2) transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:var(--frame-2); border-radius:3px}

/* Dettaglio richiudibile senza JS: una casella nascosta e un'etichetta che
   sembra un pulsante. Le righe di dettaglio spariscono, quelle principali no. */
.interruttore-dettaglio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.interruttore-dettaglio ~ .con-dettaglio tr.dett{display:none}
.interruttore-dettaglio:checked ~ .con-dettaglio tr.dett{display:table-row}
.interruttore-dettaglio ~ .etichetta-dettaglio .quando-aperto{display:none}
.interruttore-dettaglio:checked ~ .etichetta-dettaglio .quando-chiuso{display:none}
.interruttore-dettaglio:checked ~ .etichetta-dettaglio .quando-aperto{display:inline}
.interruttore-dettaglio:focus-visible ~ .etichetta-dettaglio{outline:2px solid var(--accent); outline-offset:2px}
/* La riga di quadratura in fondo al patrimoniale: si legge prima del resto. */
.quadratura{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--rule)}
.quadratura .anno{font-family:var(--font-num); font-size:12px; color:var(--muted)}

/* La griglia dei bilanci in scrittura.

   Tre stati, e servono tutti e tre. Con il campo invisibile a riposo la
   schermata sembrava di sola lettura: nessuno prova a scrivere dove non
   sembra esserci un posto per scrivere. Il campo quindi si vede sempre —
   fondo appena diverso dalla riga, bordo sottile, angoli tondi — senza pero'
   diventare duecento rettangoli in colonna, che trasformerebbero un bilancio
   in un modulo da compilare. */
input.cella {
  width: 100%; padding: 5px 8px; text-align: right;
  font-family: var(--font-num); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

/* Il segnaposto dice dove si scrive e in che forma. E' grigio chiarissimo
   apposta: un campo vuoto deve continuare a leggersi come vuoto, perche' e'
   quello che significa — non inserito, che non e' zero. */
input.cella::placeholder { color: var(--faint); opacity: .45 }

/* Sotto il puntatore si accende la RIGA intera, non solo il campo: il
   puntatore sta quasi sempre sull'etichetta mentre l'occhio cerca dove
   scrivere, e un campo che si accende solo quando lo si centra si trova
   soltanto dopo averlo gia' trovato. */
.griglia tbody tr:hover td { background: var(--panel-2) }
.griglia tbody tr:hover input.cella {
  background: var(--panel); border-color: var(--rule-strong); cursor: text;
}

input.cella:focus {
  outline: none; background: var(--paper);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input.cella.htmx-request { border-color: var(--accent-line); }

/* I titoli intermedi dello schema CEE: non si compilano e non si calcolano.
   Le sottovoci rientrano sotto di loro. */
.griglia .titolo-voce td {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); padding-top: 14px;
  border-bottom: 1px solid var(--rule-strong);
}
.griglia .codice { color: var(--faint); font-size: 11.5px; font-family: var(--font-num) }
.griglia .liv-1 { padding-left: 16px }
.griglia .liv-2 { padding-left: 32px }
.griglia .liv-3 { padding-left: 48px }

.errore:not(:empty) {
  display: inline-block; margin-left: 8px; font-size: 12px; color: var(--neg);
}

/* La griglia delle ipotesi.
   Il campo con dentro un valore scritto a mano ha la crocetta appesa
   all'angolo, e il posizionamento assoluto vuole un contenitore relativo. */
/* Non ".ip": esiste gia' in .logrow per l'indirizzo di chi si e' collegato. */
.campo-ipotesi { position: relative; display: inline-block; width: 104px; text-align: right }
.campo-ipotesi .inp { width: 100% }
.campo-ipotesi .errore { display: block; margin: 3px 0 0; font-size: 11.5px; color: var(--neg) }

/* Il selettore di scenario nella barra alta.
   Un <details> e non un menu con il JavaScript: la barra alta sta su ogni
   pagina, e mettere del codice su ogni pagina per una tendina con tre voci
   e' il modo in cui un'applicazione comincia a caricare uno script che serve
   a un utente su venti. */
.menu-scenario { position: relative; display: inline-block }
.menu-scenario > summary { list-style: none; cursor: pointer; user-select: none }
.menu-scenario > summary::-webkit-details-marker { display: none }
.menu-scenario-voci {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 220px; padding: 5px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.menu-scenario-voci button,
.menu-scenario-voci a {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 5px;
  background: none; color: var(--text); font: inherit; font-size: 13px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu-scenario-voci button span:first-child { flex: 1 }
.menu-scenario-voci button:hover,
.menu-scenario-voci a:hover { background: var(--panel-2) }
.menu-scenario-voci button[aria-current="true"] { font-weight: 600; color: var(--accent) }
.menu-scenario-voci small { color: var(--muted); font-size: 11px }
.menu-scenario-voci a {
  margin-top: 4px; padding-top: 9px;
  border-top: 1px solid var(--rule); border-radius: 0; color: var(--text-soft);
}

/* Un indice che non esiste. Non e' un errore e non e' un valore: si scrive,
   in piccolo, con il motivo nel titolo. */
.assente { font-size: 11.5px; color: var(--muted); font-style: italic }