/*
Cosa fa: lo stile delle schermate di Amministrazione MR (cornice, menu, tabelle, chip, interruttori, pannello).
Come funziona: solo variabili di static/tokens.css; niente colori o misure scritti a mano nei modelli.
  Cornice: rotaia scura con le sezioni a sinistra, menu della sezione, area di lavoro, pannello laterale a destra.
Connesso a: templates/*.html, static/tokens.css.
*/
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--carattere); font-size: var(--t-m); color: var(--testo); background: var(--sfondo); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }
.nascosto-schermo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* cornice */
.cornice { display: grid; grid-template-columns: var(--larghezza-rotaia) var(--larghezza-menu) 1fr; min-height: 100vh; }
.rotaia { background: var(--rotaia); color: var(--rotaia-testo); display: flex; flex-direction: column; align-items: center;
  padding: var(--s3) 0; gap: var(--s1); position: sticky; top: 0; height: 100vh; }
.marchio { width: 36px; height: 36px; border-radius: var(--raggio); background: var(--arancio); color: var(--bianco);
  display: grid; place-items: center; font-weight: var(--peso-forte); margin-bottom: var(--s4); }
.rotaia a { width: 56px; padding: var(--s2) 0; border-radius: var(--raggio); display: flex; flex-direction: column;
  align-items: center; gap: 2px; font-size: 10px; }
.rotaia a:hover { color: var(--bianco); background: var(--z800); }
.rotaia a.attiva { color: var(--bianco); background: var(--z800); box-shadow: inset 2px 0 0 var(--arancio); }
.rotaia svg { width: 20px; height: 20px; }
.rotaia .fondo { margin-top: auto; }
.menu { background: var(--menu); border-right: 1px solid var(--bordo); padding: var(--s4) var(--s3); position: sticky;
  top: 0; height: 100vh; overflow: auto; }
.menu h2 { font-size: var(--t-l); margin: 0 var(--s2) var(--s5); }
.menu h3 { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-2); margin: var(--s4) var(--s2) var(--s2); }
.menu a { display: block; padding: 7px var(--s2); border-radius: var(--raggio-s); color: var(--z700); }
.menu a:hover { background: var(--z100); }
.menu a.attiva { background: var(--z200); color: var(--testo); font-weight: var(--peso-medio); }
.menu .utente { margin-top: var(--s6); padding: var(--s2); font-size: var(--t-s); color: var(--testo-2); }
.menu .utente button { background: none; border: 0; padding: 0; color: var(--testo-2); text-decoration: underline; cursor: pointer; }
.lavoro { padding: var(--s5) var(--s6) var(--s7); min-width: 0; }

/* intestazione della pagina */
.testa { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.testa .spazio { flex: 1; }
.segmenti { display: inline-flex; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.segmenti a { padding: var(--s2) var(--s4); border-right: 1px solid var(--bordo); color: var(--z700); }
.segmenti a:last-child { border-right: 0; }
.segmenti a.attiva { background: var(--z900); color: var(--bianco); }
.bottone { height: var(--altezza-campo); padding: 0 var(--s3); border-radius: var(--raggio-s); border: 1px solid var(--bordo);
  background: var(--bianco); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.bottone:hover { background: var(--z50); }
.bottone.pieno { background: var(--z900); border-color: var(--z900); color: var(--bianco); }
.bottone.pieno:hover { background: var(--z700); }
.bottone.accento { background: var(--arancio); border-color: var(--arancio); color: var(--bianco); }
.bottone.piccolo { height: 28px; font-size: var(--t-s); }
.bottone[disabled] { opacity: .5; cursor: default; }
.bottone svg { width: 16px; height: 16px; }

/* schede */
.schede { display: flex; gap: var(--s5); border-bottom: 1px solid var(--bordo); margin-bottom: var(--s4); }
.schede a { padding: var(--s3) 0; color: var(--testo-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.schede a.attiva { color: var(--testo); border-bottom-color: var(--testo); font-weight: var(--peso-medio); }
.schede .conta, .bottone .conta { font-size: var(--t-xs); background: var(--z100); color: var(--z600); border-radius: var(--raggio-pillola);
  padding: 1px 6px; margin-left: 4px; }

/* filtri */
.filtri { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.campo { height: var(--altezza-campo); border: 1px solid var(--bordo); border-radius: var(--raggio-s); padding: 0 var(--s3);
  background: var(--bianco); min-width: 0; }
.campo.cerca { width: 260px; }
select.campo { padding-right: var(--s2); max-width: 220px; }
.togli-filtri { color: var(--rosso); font-size: var(--t-s); }

/* tabella movimenti */
.riepilogo { display: flex; align-items: center; gap: var(--s5); background: var(--blu-tenue); padding: var(--s2) var(--s3);
  border-radius: var(--raggio-s) var(--raggio-s) 0 0; font-weight: var(--peso-medio); }
.riepilogo .spazio { flex: 1; }
.riepilogo .uscite { color: var(--rosso); } .riepilogo .entrate { color: var(--verde); }
table.elenco { width: 100%; border-collapse: collapse; }
.elenco th { text-align: left; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-2);
  text-transform: uppercase; letter-spacing: .03em; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--bordo); }
.elenco td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--z100); height: var(--altezza-riga); vertical-align: middle; }
.elenco tr.riga { cursor: pointer; }
.elenco tr.riga:hover td { background: var(--z50); }
.elenco tr.riga.aperta td { background: var(--arancio-tenue); }
.elenco .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.elenco .positivo { color: var(--verde); }
.elenco .data { white-space: nowrap; }
.sotto { display: block; font-size: var(--t-s); color: var(--testo-2); margin-top: 2px; }
.descr { max-width: 420px; }
.descr .titolo, .descr .sotto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.descr .titolo { font-weight: var(--peso-medio); }
.avatar { width: 28px; height: 28px; border-radius: var(--raggio-pillola); background: var(--z100); color: var(--z600);
  display: inline-grid; place-items: center; font-size: var(--t-xs); font-weight: var(--peso-forte); flex: none; }
.con-avatar { display: flex; align-items: center; gap: var(--s3); }
.attesa { font-size: var(--t-xs); color: var(--ambra); background: var(--ambra-tenue); border-radius: var(--raggio-pillola); padding: 1px 6px; }
.altre { text-align: center; padding: var(--s4); }
.vuoto { text-align: center; color: var(--testo-2); padding: var(--s7) var(--s4); }

/* chip categoria */
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; height: 24px; padding: 0 var(--s2);
  border-radius: var(--raggio-pillola); background: var(--colore-chip, var(--z800)); color: var(--testo-chip, var(--bianco));
  font-size: var(--t-s); }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip button { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; line-height: 1; opacity: .8; }
.chip.vuota { background: var(--bianco); color: var(--testo-2); border: 1px dashed var(--z300); }
.chip.da-regola { outline: 1px dashed var(--z400); outline-offset: 1px; }

/* interruttore verificato */
.interruttore { width: 36px; height: 20px; border-radius: var(--raggio-pillola); border: 0; background: var(--z300);
  position: relative; cursor: pointer; padding: 0; flex: none; }
.interruttore::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bianco); box-shadow: var(--ombra); transition: left .12s; }
.interruttore[aria-checked="true"] { background: var(--verde); }
.interruttore[aria-checked="true"]::after { left: 18px; }

/* pannello laterale */
#pannello:empty { display: none; }
#pannello { position: fixed; top: 0; right: 0; bottom: 0; width: var(--larghezza-pannello); background: var(--bianco);
  box-shadow: var(--ombra-pannello); overflow: auto; z-index: 10; }
.pannello-testa { background: var(--z50); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--bordo); }
.pannello-testa .riga-alta { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.pannello-testa h2 { font-size: var(--t-xl); margin: var(--s1) 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pannello-testa .sotto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pannello-testa .riga-importo { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.pannello-testa .riga-importo .importo { margin-right: auto; }
.accesso .marchio { margin: 0 auto; }
.titolo-sezione { margin-top: var(--s6); font-size: var(--t-l); }
.spazio { flex: 1; }
.pannello-testa .importo { font-size: var(--t-xl); font-weight: var(--peso-forte); }
.chiudi { margin-left: auto; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--testo-2); }
.blocco { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--z100); }
.blocco h3 { font-size: var(--t-m); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2); }
.blocco .riga-azioni { display: flex; gap: var(--s2); flex-wrap: wrap; }
.blocco label { display: block; font-size: var(--t-s); color: var(--testo-2); margin-bottom: var(--s1); }
.blocco select, .blocco textarea { width: 100%; }
.blocco textarea { min-height: 72px; padding: var(--s2); border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.dati { display: grid; grid-template-columns: 120px 1fr; gap: var(--s2) var(--s3); font-size: var(--t-s); }
.dati dt { color: var(--testo-2); } .dati dd { margin: 0; word-break: break-word; }
.etichetta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); border-radius: var(--raggio-pillola);
  padding: 2px 8px; background: var(--z100); color: var(--z700); }
.etichetta.ok { background: var(--verde-tenue); color: var(--verde); }

/* conti */
.saldo-grande { font-size: var(--t-xxl); font-weight: var(--peso-forte); margin: var(--s5) 0 var(--s1); font-variant-numeric: tabular-nums; }
.valute { display: flex; gap: var(--s3); margin-left: auto; }
.carta { border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); background: var(--bianco); }
.carta.valuta { padding: var(--s3) var(--s4); min-width: 140px; }
.carta.valuta strong { display: block; font-size: var(--t-xl); margin-top: var(--s1); }
.banca { margin-top: var(--s5); padding: var(--s4) var(--s5); }
.banca-testa { display: flex; align-items: center; gap: var(--s3); }
.banca-testa h3 { margin: 0; font-size: var(--t-l); }
.stato-ok { color: var(--verde); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .04em; }
.stato-attenzione { color: var(--ambra); font-size: var(--t-xs); font-weight: var(--peso-forte); }
.conto-riga { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--z100); }
.conto-riga:first-of-type { border-top: 0; }
.conto-riga .spazio { flex: 1; }
.iban { font-size: var(--t-s); color: var(--testo-2); background: var(--z100); border-radius: var(--raggio-s); padding: 2px 6px;
  font-variant-numeric: tabular-nums; }
.avviso { padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--blu-tenue); margin-bottom: var(--s4); }
.avviso.errore { background: var(--rosso-tenue); color: var(--rosso); }
.segnaposto { max-width: 560px; margin: var(--s7) auto; text-align: center; color: var(--testo-2); }
.segnaposto h1 { color: var(--testo); font-size: var(--t-xl); }

/* accesso */
.accesso { min-height: 100vh; display: grid; place-items: center; background: var(--z50); }
.accesso .carta { padding: var(--s6); width: 360px; text-align: center; }
.accesso h1 { font-size: var(--t-xl); margin: var(--s4) 0 var(--s2); }
.accesso p { color: var(--testo-2); margin: 0 0 var(--s5); }

/* regole e categorie */
.riga.spenta td { color: var(--testo-2); }
.riga.spenta .chip { opacity: .5; }
.spaziato { margin-top: var(--s3); }
.pieno-largo, select.campo.pieno-largo { width: 100%; max-width: none; }
.spunta { display: flex !important; align-items: center; gap: var(--s2); margin-top: var(--s3); color: var(--testo) !important;
  font-size: var(--t-m) !important; cursor: pointer; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.azioni-riga summary::-webkit-details-marker { display: none; }
.azioni-riga summary.bottone { display: inline-flex; align-items: center; }
.campo.colore { width: 44px; padding: 2px; }
.gruppo-categorie { margin-top: var(--s3); padding: var(--s3) var(--s4); }
.gruppo-testa { display: flex; align-items: center; gap: var(--s3); }
.sottocategoria { display: flex; align-items: center; gap: var(--s3); padding: var(--s1) 0 var(--s1) var(--s5);
  border-top: 1px solid var(--z100); font-size: var(--t-m); }
.sottocategoria:first-of-type { margin-top: var(--s2); }
.sottocategoria .bottone.piccolo { visibility: hidden; }
.sottocategoria:hover .bottone.piccolo, .sottocategoria:focus-within .bottone.piccolo, .sottocategoria details[open] .bottone.piccolo { visibility: visible; }
.azioni-riga { position: relative; }
.azioni-riga summary { list-style: none; cursor: pointer; }
.menu-azioni { position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 6; width: 280px; display: grid; gap: var(--s1);
  padding: var(--s3); background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.menu-azioni label { font-size: var(--t-s); color: var(--testo-2); margin-top: var(--s1); }
.menu-azioni .riga-azioni { display: flex; gap: var(--s2); margin-top: var(--s2); }

/* scadenze e fatture */
.etichetta.allarme { background: var(--rosso-tenue); color: var(--rosso); }
.conta.allarme { background: var(--rosso-tenue) !important; color: var(--rosso) !important; }
.scaduta, .elenco .scaduta { color: var(--rosso); }
.elenco .negativo, .negativo { color: var(--rosso); }
.riga.chiusa td { color: var(--testo-2); }
.campo.stretto { height: 28px; font-size: var(--t-s); max-width: 130px; }
.campo.stato-chiusa { background: var(--verde-tenue); color: var(--verde); border-color: transparent; }
.campo.stato-parziale { background: var(--ambra-tenue); color: var(--ambra); border-color: transparent; }
.spunta.in-linea { margin-top: 0; display: inline-flex !important; }
.avatar.vuoto-conto { background: var(--bianco); border: 1px dashed var(--z300); }
.icona-abbinata { color: var(--verde); font-weight: var(--peso-forte); margin-left: var(--s1); }
.etichetta-campo { font-size: var(--t-s); color: var(--testo-2); }
.collegamento { background: none; border: 0; padding: 0; color: var(--arancio-scuro); text-decoration: underline; cursor: pointer; }
.riga-collegata { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; text-align: left;
  padding: var(--s2) var(--s3); margin-bottom: var(--s2); background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); cursor: pointer; }
.riga-collegata:hover { background: var(--z50); }
.riga-collegata .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.riga-collegata.figlia { margin-left: var(--s4); width: calc(100% - var(--s4)); }
.rata { display: block; padding: var(--s2) 0; border-top: 1px solid var(--z100); }
.rata:first-of-type { border-top: 0; }
.schede-pannello { display: flex; gap: var(--s4); padding: 0 var(--s5); border-bottom: 1px solid var(--bordo); }
.schede-pannello a, .schede-pannello button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--s3) 0;
  color: var(--testo-2); cursor: pointer; margin-bottom: -1px; }
.schede-pannello .attiva { color: var(--testo); border-bottom-color: var(--testo); font-weight: var(--peso-medio); }
.testo-lungo { white-space: pre-wrap; word-break: break-word; font-size: var(--t-s); }
.dati.larghi { grid-template-columns: 150px 1fr; }
table.righe-doc { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.righe-doc th { text-align: left; font-weight: var(--peso-medio); color: var(--testo-2); padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--bordo); }
.righe-doc td { padding: var(--s2); border-bottom: 1px solid var(--z100); vertical-align: top; }
.righe-doc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pillola-codice { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-s); background: var(--z100);
  border-radius: var(--raggio-pillola); padding: var(--s1) var(--s3); }
.pillola-codice strong { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.stato-sdi { display: inline-block; font-size: var(--t-xs); border-radius: var(--raggio-pillola); padding: 2px 8px;
  background: var(--z100); color: var(--z700); white-space: nowrap; }
.sdi-consegnato, .sdi-ricevuto, .sdi-accettato, .sdi-decorrenza_termini { background: var(--verde-tenue); color: var(--verde); }
.sdi-non_consegnato, .sdi-in_coda, .sdi-inviato { background: var(--ambra-tenue); color: var(--ambra); }
.sdi-scartato, .sdi-rifiutato { background: var(--rosso-tenue); color: var(--rosso); }
.spunta-ok { color: var(--verde); font-weight: var(--peso-forte); }

/* carte della situazione */
.griglia-carte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.carta-scadenze, .carta-grafico, .carta-classifica { padding: var(--s4) var(--s5); display: flex; flex-direction: column; }
.carta-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.carta-testa h2 { font-size: var(--t-l); margin: 0; }
.carta-classifica h3 { font-size: var(--t-l); margin: 0 0 var(--s3); }
.cifra { font-size: var(--t-xl); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.cifra.uscita { color: var(--rosso); } .cifra.entrata { color: var(--verde); }
.titolo-carta { font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo-2); }
.elenco-breve { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.elenco-breve li { border-top: 1px solid var(--z100); }
.elenco-breve button { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%;
  padding: var(--s2) 0; background: none; border: 0; text-align: left; cursor: pointer; }
.elenco-breve button:hover { background: var(--z50); }
.elenco-breve .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-breve .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.carta-piede { margin-top: auto; padding-top: var(--s4); display: flex; justify-content: flex-end; }

/* grafici a colonne */
svg.grafico { width: 100%; height: auto; display: block; margin: var(--s3) 0; overflow: visible; }
.grafico .griglia { stroke: var(--z200); stroke-width: 1; }
.grafico .asse-zero { stroke: var(--z400); stroke-width: 1; }
.grafico .asse { fill: var(--testo-2); font-size: var(--t-xs); font-family: var(--carattere); }
.grafico .fascia rect { fill: transparent; }
.grafico .fascia:hover rect, .grafico .fascia:focus rect { fill: var(--fascia-grafico); }
.grafico .fascia:focus { outline: none; }
.grafico .colonna { pointer-events: none; }
.serie-1 { fill: var(--serie-1); background: var(--serie-1); }
.serie-2 { fill: var(--serie-2); background: var(--serie-2); }
.legenda { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: var(--s1) var(--s2); font-size: var(--t-s); color: var(--testo-2); }
.legenda .punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda .punto + .punto, .legenda .punto:not(:first-child) { margin-left: var(--s2); }
.cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); border-top: 1px solid var(--z100);
  padding-top: var(--s3); }
.cifre strong { font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.tabella-numeri { margin-top: var(--s3); font-size: var(--t-s); }
.tabella-numeri summary { cursor: pointer; color: var(--testo-2); }
.tabella-numeri table { margin-top: var(--s2); }

/* proposte di categorizzazione */
.titolo-pagina { font-size: var(--t-l); margin: 0 0 var(--s2); }
.proposte .scelta-categoria { width: 100%; max-width: 320px; }
.proposte .azioni-riga { display: flex; gap: var(--s2); justify-content: flex-end; align-items: center; }
.riga-esito td { background: var(--verde-tenue); color: var(--testo); }
.riga-esito.chiusa td { background: var(--z50); color: var(--testo-2); }
.riga-esito.errore td { background: var(--rosso-tenue); color: var(--rosso); }
.elenco-scartate { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.elenco-scartate li { display: inline-flex; align-items: center; gap: var(--s2); }

/* telefono */
@media (max-width: 900px) {
  .cornice { grid-template-columns: 1fr; }
  .rotaia { position: fixed; bottom: 0; top: auto; height: auto; width: 100%; flex-direction: row; justify-content: space-around;
    padding: var(--s1); z-index: 5; }
  .rotaia .marchio, .rotaia .fondo { display: none; }
  .menu { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--bordo); display: flex;
    flex-wrap: wrap; gap: var(--s1); padding: var(--s2); }
  .menu h2, .menu h3, .menu .utente { display: none; }
  .lavoro { padding: var(--s4) var(--s4) 96px; }
  .elenco .col-categoria, .elenco .col-check, .elenco .col-avatar { display: none; }
  .descr { max-width: 46vw; }
  .campo.cerca { width: 100%; }
  #pannello { width: 100%; }
  .valute { margin-left: 0; flex-wrap: wrap; }
  .due-colonne { grid-template-columns: 1fr; }
  .sottocategoria { padding-left: var(--s3); }
  .griglia-carte { grid-template-columns: minmax(0, 1fr); }
  .cifre { grid-template-columns: 1fr 1fr; }
  .dati.larghi { grid-template-columns: 1fr; }
  .filtri select.campo { max-width: 100%; }
  .proposte .col-esempio { display: none; }
  .proposte .azioni-riga { flex-direction: column; align-items: stretch; }
}

/* schermi senza mouse: le azioni delle sottocategorie restano sempre visibili */
@media (hover: none) { .sottocategoria .bottone.piccolo { visibility: visible; } }

/* abbinamenti (S08) e abbinamento a mano nel pannello */
.carte-abbinamento { display: flex; flex-direction: column; gap: var(--s3); }
.carta-abbinamento { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto; gap: var(--s4);
  align-items: start; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s4); background: var(--bianco); }
.carta-abbinamento.esito { display: block; background: var(--verde-tenue); border-color: var(--verde-tenue); }
.carta-abbinamento.esito.chiusa { background: var(--z50); border-color: var(--z100); color: var(--testo-2); }
.carta-abbinamento.esito.errore { background: var(--rosso-tenue); border-color: var(--rosso-tenue); color: var(--rosso); }
.carta-abbinamento .lato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carta-abbinamento .titolo, .carta-abbinamento .descr-lunga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-abbinamento .importo { font-size: var(--t-l); font-variant-numeric: tabular-nums; margin-top: var(--s1); }
.carta-abbinamento .importo.positivo { color: var(--verde); }
.carta-abbinamento .freccia { color: var(--testo-2); font-size: var(--t-l); padding-top: var(--s4); }
.etichetta-lato { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }
.scadenza-proposta { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0;
  border-bottom: 1px solid var(--z100); }
.scadenza-proposta:last-of-type { border-bottom: 0; }
.scadenza-proposta .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.motivi { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.motivo { display: inline-block; font-size: var(--t-xs); background: var(--z100); color: var(--z700);
  border-radius: var(--raggio-pillola); padding: 1px var(--s2); }
.motivo.attenzione { background: var(--ambra-tenue); color: var(--ambra); }
.azioni-carta { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; }
.filtri-origine { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.registro-abbinamenti .descr { max-width: 32ch; }
.registro-abbinamenti td.num .bottone + .bottone { margin-left: var(--s1); }
.riga-abbinata { display: flex; align-items: center; gap: var(--s2); }
.riga-abbinata .riga-collegata { flex: 1; min-width: 0; }
.abbina-a-mano { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.abbina-a-mano .campo { width: 100%; }
.candidati { display: flex; flex-direction: column; gap: var(--s1); }
.candidata .motivi { margin-top: var(--s1); }
@media (max-width: 900px) {
  .carta-abbinamento { grid-template-columns: 1fr; gap: var(--s2); }
  .carta-abbinamento .freccia { display: none; }
  .azioni-carta { flex-direction: row; flex-wrap: wrap; }
  .registro-abbinamenti .col-origine { display: none; }
  .registro-abbinamenti .descr { max-width: 40vw; }
}

/* rateizzi e debiti */
.riquadri-rateizzi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s4); }
.riquadro { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.barra-rate { display: block; height: var(--s2); border-radius: var(--raggio-pillola); background: var(--z100); overflow: hidden; }
.barra-rate > span { display: block; height: 100%; background: var(--verde); border-radius: var(--raggio-pillola); }
.barra-rate.larga { margin-bottom: var(--s3); }
.col-avanzamento { width: var(--larghezza-avanzamento); }
.tabella-rateizzi .data.scaduta { color: var(--rosso); }
.tabella-rateizzi .data.scaduta .sotto { color: var(--rosso); }
details.chiusi { margin-top: var(--s6); }
details.chiusi summary { cursor: pointer; color: var(--testo-2); font-weight: var(--peso-medio); margin-bottom: var(--s3); }
.elenco-rate { list-style: none; margin: 0; padding: 0; }
.elenco-rate .riga-collegata .num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.riga-collegata.chiusa { color: var(--testo-2); background: var(--z50); }
.stato-rata { font-size: var(--t-xs); border-radius: var(--raggio-pillola); padding: 1px var(--s2); background: var(--z100); color: var(--z700); }
.stato-rata.pagata { background: var(--verde-tenue); color: var(--verde); }
.stato-rata.scaduta { background: var(--rosso-tenue); color: var(--rosso); }
.stato-rata.annullata { background: var(--z100); color: var(--testo-2); text-decoration: line-through; }

/* cassa libera */
.cassa-libera { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s1); max-width: var(--larghezza-conto);
  margin: var(--s4) 0; }
.cifra-grande { font-size: var(--t-xxl); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: 1.1; }
.conto-cassa { max-width: var(--larghezza-conto); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco); }
.conto-cassa details { border-bottom: 1px solid var(--z100); }
.conto-cassa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); cursor: pointer;
  padding: var(--s3) var(--s4); font-weight: var(--peso-medio); list-style: none; }
.conto-cassa summary::-webkit-details-marker { display: none; }
.conto-cassa summary::before { content: "›"; color: var(--testo-2); margin-right: var(--s2); transition: transform .12s; }
.conto-cassa details[open] summary::before { transform: rotate(90deg); }
.conto-cassa summary > span:first-child { flex: 1; }
.conto-cassa summary:hover { background: var(--z50); }
.conto-cassa .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.conto-cassa details > :not(summary) { margin-left: var(--s4); margin-right: var(--s4); }
.conto-cassa details > :last-child { margin-bottom: var(--s3); }
.conto-cassa .elenco-breve a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) 0; color: inherit; }
.conto-cassa .elenco-breve a:hover { background: var(--z50); }
.conto-cassa .elenco-breve .nome .sotto { white-space: normal; }
.dati.di-cui { margin-top: var(--s2); }
.totale-cassa { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4);
  font-weight: var(--peso-forte); font-size: var(--t-l); background: var(--z50); border-radius: 0 0 var(--raggio) var(--raggio); }
@media (max-width: 900px) {
  .riquadri-rateizzi { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .tabella-rateizzi .col-avanzamento { display: none; }
  .tabella-rateizzi th, .tabella-rateizzi td { padding-left: var(--s2); padding-right: var(--s2); }
  .tabella-rateizzi .descr { max-width: 36vw; }
  .testa { flex-wrap: wrap; }
  .cifra-grande { font-size: var(--t-xl); }
  .conto-cassa summary { padding: var(--s3); }
  .conto-cassa details > :not(summary) { margin-left: var(--s3); margin-right: var(--s3); }
}


/* cassa mese per mese (S01) e conto economico */
.filtri-cassa .tipi-cassa { display: inline-flex; flex-wrap: wrap; gap: var(--s3); border: 0; padding: 0 0 0 var(--s2); margin: 0; }
.kpi-cassa { margin-bottom: var(--s4); }
.titolo-carta .punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: var(--s2); vertical-align: -1px; }
.grafico-cassa { margin-bottom: var(--s5); }
.grafico-cassa .scorre { overflow-x: auto; }
.grafico-cassa svg.grafico { min-width: var(--larghezza-grafico-min); }
.grafico .colonna.prevista { fill-opacity: var(--opacita-prevista); }
.grafico .linea-saldo { fill: none; stroke: var(--testo); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.grafico .linea-saldo.prevista { stroke-dasharray: 5 4; }
.grafico .punto-saldo { fill: var(--testo); stroke: var(--sfondo); stroke-width: 2; pointer-events: none; }
.grafico .punto-saldo.previsto { fill: var(--sfondo); stroke: var(--testo); }
.grafico .asse-corrente { fill: var(--testo); font-weight: var(--peso-forte); }
.legenda .punto.prevista { background: var(--z400); opacity: .5; }
.legenda .tratto { display: inline-block; width: 18px; border-top: 2px solid var(--testo); margin-left: var(--s2); }
.legenda .tratto.previsto { border-top-style: dashed; }
.tabella-scorre { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo); }
table.tabella-cassa { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-s);
  font-variant-numeric: tabular-nums; }
.tabella-cassa th, .tabella-cassa td { padding: var(--s2) var(--s1); border-bottom: 1px solid var(--z100); white-space: nowrap;
  text-align: right; vertical-align: top; }
.tabella-cassa thead th { font-weight: var(--peso-medio); color: var(--testo-2); background: var(--z50); position: sticky; top: 0; }
.tabella-cassa th[scope="row"], .tabella-cassa thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 1;
  background: var(--sfondo); min-width: var(--larghezza-voce-cassa); max-width: var(--larghezza-voce-cassa);
  overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-medio); border-right: 1px solid var(--z100); }
.tabella-cassa thead th:first-child { background: var(--z50); z-index: 2; }
.tabella-cassa td { min-width: var(--larghezza-cifra-cassa); }
.tabella-cassa th[scope="row"] { padding-left: var(--s3); }
.tabella-cassa .corrente { background: var(--arancio-tenue); }
.tabella-cassa thead th.corrente { color: var(--arancio-scuro); }
.tabella-cassa .totale { font-weight: var(--peso-forte); background: var(--z50); border-left: 1px solid var(--z100); }
.tabella-cassa .prevista, .tabella-cassa .prevista .cella { font-style: italic; color: var(--testo-2); }
.tabella-cassa .mista .cella { font-style: italic; }
.tabella-cassa .negativo { color: var(--rosso); }
.tabella-cassa .cella { all: unset; cursor: pointer; display: block; text-align: right; border-radius: var(--raggio-s); padding: 0 var(--s1);
  margin: 0 calc(-1 * var(--s1)); }
.tabella-cassa .cella:hover { background: var(--z100); }
.tabella-cassa .cella:focus-visible { outline: 2px solid var(--arancio); outline-offset: 1px; }
.tabella-cassa .obiettivo { display: block; font-size: var(--t-xs); color: var(--testo-2); font-style: normal; font-weight: 400; }
.tabella-cassa .riga-saldo th, .tabella-cassa .riga-saldo td { font-weight: var(--peso-forte); }
.tabella-cassa .riga-netto td, .tabella-cassa .riga-netto th { border-bottom: 1px solid var(--z300); }
.tabella-cassa .riga-sezione th, .tabella-cassa .riga-sezione td { font-weight: var(--peso-forte); background: var(--z50);
  border-top: 1px solid var(--z200); }
.tabella-cassa .riga-sezione td.corrente { background: var(--arancio-tenue); }
.tabella-cassa .riga-risultato th, .tabella-cassa .riga-risultato td { border-top: 2px solid var(--z300); font-size: var(--t-m); }
.apri-riga { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; }
.apri-riga::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: var(--s1); }
.apri-riga[aria-expanded="true"]::before { transform: rotate(45deg); }
.apri-riga.vuota { cursor: default; }
.apri-riga.vuota::before { visibility: hidden; }
.apri-riga:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; border-radius: var(--raggio-s); }
.pallino { width: var(--pallino); height: var(--pallino); border-radius: 50%; flex: none; background: var(--z300); }
.riga-figlia th .nome-figlia { padding-left: calc(var(--s5) + var(--s2)); font-weight: 400; color: var(--testo-2); }
.da-classificare .riga-sezione th { color: var(--ambra); }
details.doppi { margin-top: var(--s2); }
details.doppi summary { cursor: pointer; font-weight: var(--peso-medio); }
@media (max-width: 900px) {
  .kpi-cassa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .kpi-cassa .cifra { font-size: var(--t-l); }
  .filtri-cassa .tipi-cassa { padding-left: 0; }
  .tabella-cassa th[scope="row"], .tabella-cassa thead th:first-child { min-width: 140px; max-width: 140px; }
}