/* ===== Finanze — stile ===== */
:root {
  --sfondo: #f5f6fa;
  --carta: #ffffff;
  --carta-2: #eef0f6;
  --testo: #171a2b;
  --tenue: #666c85;
  --bordo: #e3e6ef;
  --accento: #16a34a;
  --accento-forte: #15803d;
  --accento-tenue: #dcfce7;
  --su-accento: #ffffff;
  --neg: #dc2626;
  --neg-tenue: #fee2e2;
  --pos: #16a34a;
  --avviso: #d97706;
  --avviso-tenue: #fef3c7;
  --ombra: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .06);
  --raggio: 14px;
  --raggio-p: 9px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  color-scheme: light;
}
[data-theme="scuro"] {
  --sfondo: #0b0d12;
  --carta: #14171f;
  --carta-2: #1d212b;
  --testo: #e9ebf3;
  --tenue: #98a0b5;
  --bordo: #262b36;
  --accento: #4ade80;
  --accento-forte: #86efac;
  --accento-tenue: #14351f;
  --su-accento: #0b0d12;
  --neg: #f87171;
  --neg-tenue: #3a1d1f;
  --pos: #4ade80;
  --avviso: #fbbf24;
  --avviso-tenue: #3a2d10;
  --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { font-family: var(--font); font-size: 14.5px; line-height: 1.45; color: var(--testo); background: var(--sfondo); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 21px; } h2 { font-size: 16px; } h3 { font-size: 14.5px; }
a { color: var(--accento-forte); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--carta-2); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100vh; color: var(--tenue); text-align: center; padding: 20px; }
.boot .dettaglio { max-width: 520px; font-size: 13px; }

/* ===== Struttura ===== */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.side { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; position: sticky; top: 0; height: 100vh;
  background: var(--carta); border-right: 1px solid var(--bordo); }
.marchio { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 700; font-size: 17px; }
.marchio .logo { width: 32px; height: 32px; flex: none; display: block; }
.side a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--tenue); font-weight: 500; }
.side a:hover { background: var(--carta-2); color: var(--testo); text-decoration: none; }
.side a.attivo { background: var(--accento-tenue); color: var(--accento-forte); }
.spazio { flex: 1; }
.stato-salvataggio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tenue); padding: 8px 12px; }
.stato-salvataggio.errore { color: var(--neg); }

.main { padding: 22px 26px 60px; max-width: 1500px; width: 100%; margin: 0 auto; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.topbar-mese { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.topbar-mese h1 { min-width: 200px; text-align: center; }

/* ===== Schede ===== */
.card { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px 18px; margin-bottom: 16px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.griglia-2.allinea-alto { align-items: start; }
.griglia-2 > * { min-width: 0; }
@media (max-width: 1100px) { .griglia-2 { grid-template-columns: 1fr; } }

/* ===== Numeri grandi ===== */
.griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.griglia-kpi.piccoli { margin-bottom: 4px; }
.kpi { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-p); padding: 11px 13px; box-shadow: var(--ombra); min-width: 0; }
.card .kpi { box-shadow: none; background: var(--carta-2); }
.kpi-et { font-size: 12px; color: var(--tenue); margin-bottom: 3px; }
.kpi-val { font-size: 21px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.kpi-sotto { font-size: 11.5px; color: var(--tenue); margin-top: 2px; }
.kpi.pos .kpi-val { color: var(--pos); }
.kpi.neg .kpi-val { color: var(--neg); }
.nota-kpi { margin: -6px 0 16px; }
.nota { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; }

/* ===== Tabelle ===== */
.tabella-scroll { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { padding: 7px 9px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: middle; }
.tabella th { font-size: 12px; font-weight: 600; color: var(--tenue); text-transform: none; white-space: nowrap; }
.tabella td.n, .tabella th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella td.centro, .tabella th.centro { text-align: center; }
.tabella tfoot td { font-weight: 650; border-top: 2px solid var(--bordo); border-bottom: none; }
.tabella.compatta th, .tabella.compatta td { padding: 5px 8px; }
.tabella tbody tr:hover { background: var(--carta-2); }
.tabella .sezione td { background: var(--carta-2); font-weight: 650; font-size: 12.5px; color: var(--tenue); }
.tabella .riga-totale td { font-weight: 650; }
.tabella .riga-forte td { font-weight: 700; background: var(--accento-tenue); }
.tabella .evidenziata > td { background: var(--accento-tenue); }
.tabella tr.stima td, .tabella tr.tenue td { opacity: .62; font-style: italic; }
.tabella .nome { min-width: 170px; }
.tabella .somma { font-weight: 650; border-left: 1px solid var(--bordo); }
.tabella.riepilogo { font-size: 13px; }
.tabella.riepilogo td.n { min-width: 74px; }
.tabella.registro td { padding: 3px 6px; }
.tabella .totale-voce { font-weight: 600; }
.azioni-riga { display: flex; gap: 4px; justify-content: flex-end; }

.muted, .tabella .muted { color: var(--tenue); }
.small, .piccolo { font-size: 12px; }
.soldi.neg, .perc.neg, td.neg { color: var(--neg); }
.soldi.pos, .perc.pos, td.pos { color: var(--pos); }
.centro { text-align: center; }
.vuoto { padding: 18px; text-align: center; color: var(--tenue); }

/* ===== Campi ===== */
.txt, .sel, .num {
  width: 100%; padding: 6px 9px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta);
  color: var(--testo); min-width: 0;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.txt:focus, .sel:focus, .num:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento); }
.cella-input { padding: 2px 4px !important; }
.cella-input .num, .cella-input .txt, .cella-input .sel { border-color: transparent; background: transparent; }
.cella-input .num:hover, .cella-input .txt:hover, .cella-input .sel:hover { border-color: var(--bordo); background: var(--carta); }
.cella-input .num:focus, .cella-input .txt:focus, .cella-input .sel:focus { background: var(--carta); }
.cella-input.stretta .num, .stretta { max-width: 92px; }
.num.previsto { color: var(--tenue); }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtri .sel, .filtri .txt { width: auto; min-width: 150px; }
.filtri .cerca { min-width: 220px; }
.sel.anno { width: auto; min-width: 92px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accento); }
input[type="date"] { min-width: 132px; }

/* ===== Bottoni ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); font-weight: 550; font-size: 13.5px; white-space: nowrap; }
.btn:hover { background: var(--carta-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn.primario:hover { background: var(--accento-forte); border-color: var(--accento-forte); }
.btn.piccolo { padding: 4px 9px; font-size: 12.5px; }
.btn.grande { padding: 12px 18px; font-size: 15px; }
.btn.tondo { padding: 7px; border-radius: 50%; }
.btn.tondo.piccolo { padding: 4px; }
.riga-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.riga-form .txt, .riga-form .sel { width: auto; min-width: 160px; }
.riga-form label { font-size: 12.5px; color: var(--tenue); }

/* ===== Tag ===== */
.tag { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--avviso-tenue); color: var(--avviso); font-size: 11px; font-weight: 600; }
.tag.tenue { background: var(--carta-2); color: var(--tenue); }

/* ===== Grafici ===== */
.grafico { width: 100%; height: auto; display: block; }
.grafico-tondo { width: 190px; height: 190px; flex: none; }
.g-griglia { stroke: var(--bordo); stroke-width: 1; }
.g-asse { fill: var(--tenue); font-size: 11px; }
.g-centro { fill: var(--testo); font-size: 17px; font-weight: 650; }
.ciambella { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; font-size: 12.5px; }
.legenda li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.legenda .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda .valore { font-variant-numeric: tabular-nums; }
.pallino { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.legenda-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; color: var(--tenue); margin-top: 6px; }
.voce-legenda { display: inline-flex; align-items: center; gap: 5px; }
.avanzamento { position: relative; height: 24px; border-radius: 7px; background: var(--carta-2); overflow: hidden; margin: 6px 0; }
.avanzamento .riempimento { position: absolute; inset: 0 auto 0 0; background: var(--accento); }
.avanzamento span { position: relative; display: block; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 24px; }

/* ===== Finestre ===== */
.velo { position: fixed; inset: 0; background: rgba(9, 11, 18, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modale { background: var(--carta); border-radius: var(--raggio); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); width: min(560px, 100%); max-height: 90vh; overflow: auto; }
.modale.csv { width: min(980px, 100%); }
.modale header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bordo); position: sticky; top: 0; background: var(--carta); }
.form { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tenue); }
.form label.btn { flex-direction: row; color: inherit; font-size: 13.5px; }
.form-azioni { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }
.form-azioni .muted { margin-right: auto; font-size: 12.5px; }
.tabella-csv { max-height: 50vh; overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio-p); }
.descr-csv { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonna-scelta { text-transform: capitalize; }

/* ===== Messaggi ===== */
.messaggi { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.messaggio { padding: 10px 14px; border-radius: 10px; background: var(--carta); border: 1px solid var(--bordo); box-shadow: var(--ombra); font-size: 13.5px; }
.messaggio.ok { border-color: var(--accento); }
.messaggio.errore { border-color: var(--neg); color: var(--neg); }
.avviso-errore { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--raggio-p);
  background: var(--neg-tenue); color: var(--neg); margin-bottom: 14px; font-size: 13.5px; }

/* ===== Pezzi comuni a telefono e tablet ===== */
.row { display: flex; align-items: center; }
.gap { gap: 8px; }
.card-titolo { min-width: 0; }
.card-azioni { display: flex; align-items: center; gap: 8px; flex: none; }
.card.pieghevole .card-head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; align-items: center; }
.card.chiusa .card-head { margin-bottom: 0; }
.riassunto { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.freccia { display: inline-flex; color: var(--tenue); transition: transform .15s; }
.card.chiusa .freccia { transform: rotate(-90deg); }
.barra-basso { display: none; }
.fab { display: none; position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 18px; border: none; z-index: 45;
  background: var(--accento); color: var(--su-accento); box-shadow: 0 8px 22px rgba(22, 163, 74, .35); align-items: center; justify-content: center; }
.fab:active { transform: scale(.96); }
.pillola-salvataggio { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--carta-2); color: var(--tenue); white-space: nowrap; }
.pillola-salvataggio.errore { background: var(--neg-tenue); color: var(--neg); }
.btn.largo { width: 100%; margin-top: 8px; }
.btn.pericolo { color: var(--neg); border-color: var(--neg-tenue); }
.btn.acceso { background: var(--accento-tenue); color: var(--accento-forte); border-color: var(--accento-tenue); }
.riga-info { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 2px 10px; }

/* colonna delle voci ferma nelle tabelle larghe: i mesi scorrono, i nomi restano */
.tabella.riepilogo th:first-child, .tabella.riepilogo td:first-child,
.tabella.prima-ferma th:first-child, .tabella.prima-ferma td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--carta); box-shadow: 1px 0 0 var(--bordo);
}
.tabella .sezione td:first-child { background: var(--carta-2); }
.tabella .riga-forte td:first-child, .tabella .evidenziata > td:first-child { background: var(--accento-tenue); }

/* sugli schermi a tocco i campi modificabili si vedono sempre */
@media (pointer: coarse) {
  .cella-input .num, .cella-input .txt, .cella-input .sel { border-color: var(--bordo); background: var(--carta); min-height: 36px; }
}

/* ----- inserimento rapido con tastierino ----- */
.modale.con-tastierino { width: min(460px, 100%); }
.rapido { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.rapido-importo { text-align: center; font-size: 44px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding: 4px 0 0; line-height: 1.1; }
.rapido-importo .valuta { font-size: 26px; color: var(--tenue); margin-right: 6px; vertical-align: 8px; }
.rapido-importo.vuoto .cifra { color: var(--tenue); }
.rapido-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--carta); font-size: 14px; font-weight: 550; min-height: 38px; }
.chip.scelto { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.chip.tenue { color: var(--tenue); border-style: dashed; }
.rapido-tutte { display: flex; flex-direction: column; gap: 10px; max-height: 34vh; overflow: auto; padding: 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-p); }
.gruppo-nome { font-size: 12px; color: var(--tenue); margin-bottom: 5px; font-weight: 600; }
.rapido-aiuto { margin-top: -4px; }
.rapido-riga { display: flex; gap: 8px; align-items: center; }
.rapido-riga .data { flex: 1; min-width: 0; }
.rapido .txt { min-height: 40px; font-size: 16px; }
.rapido-stima { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.tastierino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tasto { height: 54px; border-radius: 12px; border: 1px solid var(--bordo); background: var(--carta-2); font-size: 23px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.tasto:active { background: var(--accento-tenue); }
.rapido-azioni { display: flex; gap: 10px; }
.rapido-azioni .salva { flex: 1; }

/* ----- elenco dei movimenti per giorno ----- */
.lista-mov { display: flex; flex-direction: column; gap: 12px; }
.giorno header { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tenue); font-weight: 600; padding: 0 4px 5px; }
.giorno header span:first-child::first-letter { text-transform: uppercase; }
.voce-mov { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  padding: 11px 13px; background: var(--carta); border: 1px solid var(--bordo); border-bottom-width: 0; color: var(--testo); }
.giorno .voce-mov:first-of-type { border-radius: 12px 12px 0 0; }
.giorno .voce-mov:last-of-type { border-radius: 0 0 12px 12px; border-bottom-width: 1px; }
.giorno .voce-mov:only-of-type { border-radius: 12px; }
.voce-mov:active { background: var(--carta-2); }
.voce-sx { min-width: 0; }
.voce-cat { font-weight: 600; }
.voce-descr { font-size: 12.5px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-imp { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voce-imp.pos { color: var(--pos); }
.voce-mov.stima { font-style: italic; opacity: .72; }
.card .voce-mov { background: var(--carta-2); }

/* ----- menu "Altro" ----- */
.menu-altro { padding: 8px 8px 12px; display: flex; flex-direction: column; }
.voce-menu { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border: none; background: none; text-align: left; border-radius: 12px; color: var(--testo); }
.voce-menu:active, .voce-menu:hover { background: var(--carta-2); }
.voce-menu-titolo { font-weight: 600; font-size: 15.5px; }

/* ===== Tablet (700-1099 px): menu laterale stretto con le icone ===== */
@media (max-width: 1099px) {
  .app { grid-template-columns: 78px 1fr; }
  .side { padding: 14px 8px; }
  .side a { flex-direction: column; gap: 3px; padding: 9px 2px; font-size: 10.5px; text-align: center; }
  .marchio span, .stato-salvataggio span { display: none; }
  .marchio { justify-content: center; padding: 2px 0 14px; }
  .stato-salvataggio { justify-content: center; padding: 8px 0; }
  .main { padding: 18px 18px 96px; }
  .fab { display: flex; }
  .tabella.riepilogo { font-size: 12px; }
  .tabella.riepilogo td.n { min-width: 62px; }
  .tabella .nome { min-width: 140px; }
}

/* ===== Telefono (fino a 699 px) ===== */
@media (max-width: 699px) {
  body { font-size: 15px; }
  .app { display: block; }
  .side { display: none; }
  .main { padding: calc(10px + env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 12px; gap: 8px; }
  .topbar h1 { font-size: 20px; }
  .topbar-mese { gap: 6px; margin-bottom: 12px; }
  .topbar-mese h1 { min-width: 0; font-size: 18px; flex: 1; text-align: center; }
  .topbar-mese .spazio { display: none; }
  .card { padding: 13px; margin-bottom: 12px; border-radius: 12px; }
  .card-head { margin-bottom: 10px; }
  .card-head h2 { font-size: 15.5px; }
  .griglia-2 { gap: 0; }
  .griglia-kpi { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .kpi { padding: 9px 11px; }
  .kpi-val { font-size: 18px; }
  .kpi-sotto { font-size: 11px; }
  .nota-kpi, .nota { margin: -2px 0 12px; }
  .tabella { font-size: 13.5px; }
  .tabella.riepilogo, .tabella.prima-ferma { font-size: 12.5px; }
  .tabella.riepilogo td.n { min-width: 52px; }
  .tabella .nome, .tabella.riepilogo .nome { min-width: 108px; max-width: 128px; white-space: normal; line-height: 1.2; }
  .tabella.voci .nome { min-width: 0; max-width: none; }
  .tabella.voci td:nth-child(2) { width: 106px; }
  .tabella.voci td:nth-child(3) { width: 86px; }
  .nascondi-telefono { display: none; }
  .ciambella { justify-content: center; }
  .grafico-tondo { width: 170px; height: 170px; }
  .legenda { min-width: 100%; }
  .riga-form .txt, .riga-form .sel { min-width: 0; width: 100%; }
  .filtri.telefono { flex-wrap: nowrap; margin-bottom: 8px; }
  .filtri.telefono > .sel { width: 42%; min-width: 0; flex: none; }
  .filtri.telefono .cerca { min-width: 0; flex: 1; }
  .filtri.telefono.altri { flex-wrap: wrap; }
  .filtri.telefono.altri .sel { width: 100%; }

  /* barra in basso e tasto + */
  .barra-basso { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--carta); border-top: 1px solid var(--bordo); }
  .barra-basso a, .barra-basso button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--tenue); font-size: 10.5px; font-weight: 550; background: none; border: none; text-decoration: none; padding: 0; }
  .barra-basso .attivo { color: var(--accento-forte); }
  .barra-basso a:hover { text-decoration: none; }
  .fab { bottom: calc(74px + env(safe-area-inset-bottom)); right: 16px; }
  .messaggi { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: center; }

  /* finestre che salgono dal basso; il tastierino occupa tutto lo schermo */
  .velo { padding: 0; align-items: flex-end; }
  .modale { width: 100%; max-height: 100%; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modale.con-tastierino, .modale.csv { width: 100%; height: 100%; border-radius: 0; }
  .form-azioni { flex-wrap: wrap; }

  /* tabelle che diventano schede: una riga = una scheda con le etichette a sinistra */
  .tabella.impila thead { display: none; }
  .tabella.impila, .tabella.impila tbody, .tabella.impila tfoot, .tabella.impila tr, .tabella.impila td { display: block; width: 100%; }
  .tabella.impila tr { border: 1px solid var(--bordo); border-radius: 11px; padding: 6px 10px; margin-bottom: 8px; background: var(--carta); }
  .tabella.impila tbody tr:hover { background: var(--carta); }
  .tabella.impila td { border: none; display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 3px 0 !important; text-align: right; min-height: 32px; }
  .tabella.impila td::before { content: attr(data-label); color: var(--tenue); font-size: 12.5px; text-align: left; flex: none; max-width: 55%; }
  .tabella.impila td.titolo-riga { font-weight: 650; font-size: 15px; text-align: left; }
  .tabella.impila td.titolo-riga::before, .tabella.impila td:not([data-label])::before { content: none; }
  .tabella.impila td:empty { display: none; }
  .tabella.impila td[data-label=""] { justify-content: flex-end; }
  .tabella.impila td .num, .tabella.impila td .sel { max-width: 58%; }
  .tabella.impila td.titolo-riga .txt { font-weight: 650; }
  .tabella.impila tfoot tr { background: var(--carta-2); }
  .tabella.impila tfoot td { border-top: none; }
  .tabella.impila .descr-csv { max-width: none; white-space: normal; }
  .tabella-csv { max-height: none; border: none; }
}
.separatore-futuro { font-size: 12px; font-weight: 650; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; margin: 6px 4px -4px; }
/* scheda del mese: colonne allineate tra un blocco e l'altro */
.tabella.voci { table-layout: fixed; }
.tabella.voci td:nth-child(2) { width: 124px; }
.tabella.voci td:nth-child(3) { width: 104px; }
@media (max-width: 699px) {
  .tabella.voci td:nth-child(2) { width: 106px; }
  .tabella.voci td:nth-child(3) { width: 86px; }
}

/* ---------- Accesso e primo avvio ---------- */
.accesso { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--sfondo); }
.accesso-box { width: 100%; max-width: 420px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.accesso-box.largo { max-width: 540px; }
.accesso-box h1 { margin: 0; font-size: 22px; }
.accesso-box p { margin: 0; line-height: 1.5; }
.accesso-logo { width: 64px; height: 64px; border-radius: 16px; }
.accesso-box .btn.largo { margin-top: 6px; }
.btn-testo { background: none; border: 0; color: var(--tenue); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }
.btn-testo:hover { color: var(--testo); }
.scelte { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.scelta { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--carta); color: var(--testo); font: inherit; cursor: pointer; text-align: left; }
.scelta:hover { border-color: var(--accento); background: var(--accento-tenue); }
.scelta > svg { flex: none; color: var(--accento); }
.scelta span { display: flex; flex-direction: column; gap: 3px; }
.scelta small { color: var(--tenue); font-size: 12.5px; line-height: 1.4; }
a.stato-salvataggio, a.pillola-salvataggio { text-decoration: none; }
.copie-online { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.riga-copia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bordo); }

/* ---------- Tornata 24/09: tastierino con somme, spese veloci, budget, Questo mese, barra del mese ---------- */
.nascosto { display: none !important; }
.centro { text-align: center; }
.tastierino { grid-template-columns: repeat(4, 1fr); }
.tasto.op { background: var(--accento-tenue); color: var(--accento-forte); }
.tasto.largo { grid-column: span 2; }
.rapido-somma { font-size: 15px; font-weight: 500; color: var(--tenue); letter-spacing: 0; }
.rapido-veloci, .veloci-dash { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rapido-veloci::-webkit-scrollbar, .veloci-dash::-webkit-scrollbar { display: none; }
.chip.veloce { flex: none; display: inline-flex; align-items: center; gap: 5px; border-color: var(--accento-tenue); background: var(--accento-tenue); color: var(--accento-forte); white-space: nowrap; }
.rapido-budget { font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--carta-2); display: flex; flex-direction: column; gap: 5px; }
.rapido-budget.pos { color: var(--testo); }
.rapido-budget.attenzione { color: var(--avviso); }
.rapido-budget.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); }
.barretta { display: block; height: 5px; border-radius: 3px; background: var(--bordo); overflow: hidden; }
.barretta > span { display: block; height: 100%; background: currentColor; border-radius: 3px; }
.rapido-budget.pos .barretta > span { background: var(--pos); }

.messaggio { display: flex; align-items: center; gap: 12px; }
.messaggio-azione { background: none; border: 0; color: var(--accento); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 2px; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; }
.btn-info { background: none; border: 0; color: var(--tenue); padding: 3px; border-radius: 50%; cursor: pointer; display: inline-flex; }
.btn-info:hover { color: var(--testo); background: var(--carta-2); }

.questo-mese .al-giorno { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 8px; }
.questo-mese .al-giorno b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.al-giorno.pos b { color: var(--pos); }
.al-giorno.attenzione b { color: var(--avviso); }
.al-giorno.neg b { color: var(--neg); }
.barra-tetto { height: 8px; border-radius: 4px; background: var(--carta-2); overflow: hidden; }
.barra-tetto > span { display: block; height: 100%; border-radius: 4px; background: var(--pos); }
.barra-tetto.attenzione > span { background: var(--avviso); }
.barra-tetto.neg > span { background: var(--neg); }
.riga-tetto { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--tenue); margin: 5px 0 10px; }
.link-cifra { background: none; border: 0; padding: 2px 0; font: inherit; color: var(--accento-forte); text-decoration: underline dotted; cursor: pointer; }
.riga-oggi { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--bordo); font-size: 14px; }
.riga-oggi b { font-size: 17px; }
.veloci-dash { margin: 4px 0 8px; }
.ultime { display: flex; flex-direction: column; border-top: 1px solid var(--bordo); }
.ultima { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--bordo); color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.ultima:last-child { border-bottom: 0; }
.ultima-nome { display: flex; flex-direction: column; min-width: 0; }
.ultima-nome small { color: var(--tenue); font-size: 12px; }

.anelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 6px; }
.anello-voce { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 4px 2px; color: var(--testo); font: inherit; cursor: pointer; border-radius: 10px; }
.anello-voce:hover { background: var(--carta-2); }
.anello { position: relative; }
.anello circle { fill: none; stroke-width: 7; }
.anello-fondo { stroke: var(--carta-2); }
.anello-pieno { stroke: var(--pos); stroke-linecap: round; transition: stroke-dasharray .4s; }
.anello.attenzione .anello-pieno { stroke: var(--avviso); }
.anello.neg .anello-pieno { stroke: var(--neg); }
.anello-centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.anello-nome { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.anello-cifre { font-size: 11.5px; color: var(--tenue); }
.senza-budget { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.senza-budget .chip { font-size: 12.5px; min-height: 32px; padding: 5px 10px; }

.barra-mese { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.barra-mese-testa { display: flex; justify-content: space-between; font-size: 13.5px; }
.barra-mese-testa b { font-size: 16px; }
.barra-mese-barra { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--carta-2); }
.barra-mese-barra > span { height: 100%; }
.barra-mese .spese { background: var(--neg); }
.barra-mese .accantonamenti { background: var(--avviso); }
.barra-mese .risparmi { background: #0891b2; }
.barra-mese .rimanente { background: var(--pos); }
.barra-mese-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--tenue); }
.barra-mese-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.barra-mese-legenda b { color: var(--testo); font-weight: 600; }
.barra-card { padding-bottom: 12px; }

.voci-lista { display: flex; flex-direction: column; }
.riga-voce { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; background: none; border: 0; border-bottom: 1px solid var(--bordo); color: var(--testo); font: inherit; text-align: left; cursor: pointer; min-height: 46px; }
button.riga-voce:active { background: var(--carta-2); }
.riga-voce-nome { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; }
.riga-voce-nome small { color: var(--tenue); font-size: 12px; }
.riga-voce-cifra { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.riga-voce-cifra.vuota { color: var(--tenue); font-weight: 400; }
.riga-voce.totale { border-bottom: 0; cursor: default; font-weight: 700; padding-top: 12px; }

.veloci-gestione { display: flex; flex-direction: column; }
.veloci-gestione .riga-copia b { font-weight: 600; }

/* Pulizia sul telefono: intestazione che si rimpicciolisce, cifre più grandi, niente riquadri dentro riquadri */
@media (max-width: 699px) {
  .topbar { position: sticky; top: 0; z-index: 25; background: var(--sfondo); margin: -8px -12px 10px; padding: 8px 12px; transition: padding .2s, box-shadow .2s; }
  .topbar h1 { transition: font-size .2s; }
  body.scorsa .topbar { padding-top: 5px; padding-bottom: 5px; box-shadow: 0 1px 0 var(--bordo); }
  body.scorsa .topbar h1 { font-size: 16px; }
  .topbar .sel.anno.solo-grande { display: none; }
  .card .griglia-kpi.piccoli { gap: 2px 12px; }
  .card .griglia-kpi.piccoli .kpi { background: none; border: 0; box-shadow: none; padding: 6px 0; border-bottom: 1px solid var(--bordo); border-radius: 0; }
  .card .kpi-val { font-size: 19px; }
  .questo-mese .al-giorno b { font-size: 36px; }
  .anelli { grid-template-columns: repeat(3, 1fr); }
  .card-azioni .btn-info { padding: 5px; }
}

/* ----- spese fisse e abbonamenti ----- */
.avvisi-ricorrenti { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.avviso-box { background: var(--avviso-tenue); border: 1px solid var(--avviso); border-radius: var(--raggio-p); padding: 11px 13px; }
.avviso-box.piccolo { padding: 8px 12px; font-size: 13.5px; }
.avviso-riga { display: flex; align-items: center; gap: 10px; }
.avviso-riga > svg { color: var(--avviso); flex: none; }
.avviso-testo { flex: 1; min-width: 0; }
.conferma-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.conferma-voce { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bordo); }
.conferma-voce.tenue { opacity: .55; }
.conferma-nome { flex: 1; min-width: 0; }
.conferma-imp { width: 110px; flex: none; }
.riga-numeri { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 10px; }
.numero-grande { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero-grande.neg { color: var(--neg); } .numero-grande.pos { color: var(--pos); } .numero-grande.muted { color: var(--tenue); }
.titoletto { font-weight: 600; margin: 4px 0 4px; }
.elenco-semplice { list-style: none; margin: 0 0 8px; padding: 0; }
.elenco-semplice li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bordo); }
.elenco-semplice li:last-child { border-bottom: none; }
.elenco-semplice li.tenue { opacity: .6; }
.modulo-ricorrente { padding: 4px 0 14px; }
.modulo-ricorrente .riga-form label { flex: 1; min-width: 110px; }
.modulo-ricorrente .riga-form .txt, .modulo-ricorrente .riga-form .sel { width: 100%; min-width: 0; }

/* ----- blocco con PIN ----- */
.pin-punti { display: flex; gap: 14px; justify-content: center; margin: 4px 0 8px; }
.pin-punti span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tenue); }
.pin-punti span.pieno { background: var(--accento); border-color: var(--accento); }
.pin-punti.errore span { border-color: var(--neg); }
.tastierino.pin { width: 100%; max-width: 300px; }
.tastierino.pin > span { display: block; }
.pin-campo { max-width: 190px; }
.riga-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; }
.riga-check input { flex: none; margin-top: 2px; }
.messaggio.avviso { border-color: var(--avviso); }

/* ----- il tuo mese in breve ----- */
.mese-breve { border-color: var(--accento); background: linear-gradient(180deg, var(--accento-tenue), var(--carta) 70%); }
.breve-grande { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 10px; }
.breve-grande > div { display: flex; flex-direction: column; }
.breve-grande b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.breve-grande b.pos { color: var(--pos); } .breve-grande b.neg { color: var(--neg); }
.breve-righe { list-style: none; margin: 0 0 10px; padding: 0; }
.breve-righe li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.breve-righe li:last-child { border-bottom: none; }
.breve-righe li > span:first-child { color: var(--tenue); flex: none; }
.breve-righe li b { text-align: right; font-variant-numeric: tabular-nums; }
.breve-top > span:last-child { text-align: right; }

/* ----- grafici da toccare ----- */
.g-tocco { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-evidenza { fill: var(--carta-2); }
.g-guida { stroke: var(--tenue); stroke-width: 1; stroke-dasharray: 3 3; }
.g-asse.scelto { fill: var(--testo); font-weight: 700; }
.g-fumetto rect { fill: var(--carta); stroke: var(--bordo); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)); }
.g-fumetto-testo { fill: var(--testo); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-fumetto-testo.titolo { font-weight: 700; }
.legenda li.g-tocco { border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.legenda li.scelta { background: var(--carta-2); font-weight: 600; }
.legenda li.tenue { opacity: .5; }

/* ----- obiettivi di risparmio ----- */
.obiettivi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.obiettivo { border: 1px solid var(--bordo); border-radius: var(--raggio-p); padding: 11px 13px; }
.obiettivo-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.obiettivo-testa b { font-size: 15.5px; }
.obiettivo-riga { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.obiettivo-consiglio { margin-top: 6px; font-size: 14px; }
.obiettivo-consiglio.pos { color: var(--pos); font-weight: 650; } .obiettivo-consiglio.neg { color: var(--neg); }
.obiettivo-azioni { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* ----- etichette (#vacanza) ----- */
.etichette { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; scrollbar-width: none; }
.etichette::-webkit-scrollbar { display: none; }
.chip.etichetta { flex: none; white-space: nowrap; font-size: 13px; }
.chip.etichetta b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip.piccola { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.etichette-rapide { margin-top: -4px; }

/* ----- flusso dei soldi ----- */
.flusso .f-nome { fill: var(--testo); font-size: 12px; font-weight: 600; }
.flusso .f-cifra { fill: var(--tenue); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.flusso .f-centro { fill: var(--tenue); }