/* Casa — foglio di stile unico, mobile first, senza dipendenze esterne */
:root {
  --sfondo: #f3f6f5;
  --carta: #ffffff;
  --inchiostro: #1f2a2c;
  --tenue: #5b6a6c;
  --bordo: #d8e1e0;
  --accento: #2f5d62;
  --accento-chiaro: #e1eeee;
  --ambra: #9a5f08;
  --ambra-chiaro: #fbefd9;
  --pos: #2e7d4f;
  --neg: #b23a2e;
  --neg-chiaro: #f9e2de;
  --raggio: 12px;
  --ombra: 0 1px 2px rgb(20 40 45 / 0.07);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #121819;
    --carta: #1b2324;
    --inchiostro: #e6eeee;
    --tenue: #9aaaab;
    --bordo: #2c3839;
    --accento: #7cc4c4;
    --accento-chiaro: #1e3436;
    --ambra: #e3b04f;
    --ambra-chiaro: #3a2f17;
    --pos: #7fcf9a;
    --neg: #ef8a78;
    --neg-chiaro: #3b201b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accento); }
h1 { font-size: 1.5rem; margin: 0; line-height: 1.2; }
h2 { font-size: 1rem; margin: 0 0 .6rem; color: var(--tenue); font-weight: 600; letter-spacing: .01em; }
small, .piccolo { font-size: .82rem; }
.tenue { color: var(--tenue); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- navigazione: menu laterale (computer), barra in basso + menu a scomparsa (telefono) ---------- */
button.link { background: none; border: 0; color: var(--tenue); font: inherit; font-size: .85rem; cursor: pointer; padding: .3rem; }
.ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; }
.marchio { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: var(--inchiostro); text-decoration: none; }
.salta { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--carta); padding: .5rem 1rem; border-radius: 8px; }
.salta:focus { left: .5rem; }

.laterale { background: var(--carta); display: flex; flex-direction: column; gap: .9rem; padding: 1rem .75rem;
            border-right: 3px solid var(--accento); overflow-y: auto; }
.laterale-testa { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem; }
.btn-nuovo { display: flex; align-items: center; justify-content: center; gap: .4rem; background: var(--accento); color: #fff;
             font-weight: 600; text-decoration: none; padding: .6rem .9rem; border-radius: 10px; }
.btn-nuovo:hover { filter: brightness(1.08); }
.aree { display: grid; gap: .9rem; }
.gruppo { display: grid; gap: .1rem; }
.gruppo-titolo { margin: 0 0 .2rem; padding: 0 .65rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--tenue); }
.voce { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 8px; color: var(--inchiostro);
        text-decoration: none; font: inherit; font-size: .97rem; background: none; border: 0; width: 100%; text-align: left;
        cursor: pointer; min-height: 2.5rem; }
.voce .ico { color: var(--tenue); }
.voce:hover { background: var(--sfondo); }
.voce[aria-current="page"] { background: var(--accento-chiaro); color: var(--accento); font-weight: 600; }
.voce[aria-current="page"] .ico { color: var(--accento); }
.conta { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--ambra-chiaro);
         color: var(--ambra); font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.5rem; }
.laterale-piede { margin-top: auto; border-top: 1px solid var(--bordo); padding-top: .6rem; display: grid; gap: .1rem; }
.laterale-piede form { margin: 0; }
.laterale-piede button.voce { color: var(--tenue); min-height: 2.5rem; padding: .5rem .65rem; }
.chiudi-menu { display: none; color: var(--tenue); padding: .3rem; }

.barra-tel { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; background: var(--carta);
             border-bottom: 3px solid var(--accento); position: sticky; top: 0; z-index: 20; }
.link-account { text-decoration: none; }
.iniziale { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
            background: var(--accento); color: #fff; font-weight: 700; font-size: .95rem; }
.link-account[aria-current] .iniziale { outline: 2px solid var(--accento); outline-offset: 2px; }

.barra-basso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column;
               grid-auto-columns: 1fr; background: var(--carta); border-top: 1px solid var(--bordo);
               padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgb(40 35 20 / .06); }
.barra-basso a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem 0;
                 color: var(--tenue); text-decoration: none; font-size: .72rem; font-weight: 600; border-radius: 10px; }
.barra-basso a[aria-current="page"] { color: var(--accento); }
.barra-basso .ico { width: 1.45rem; height: 1.45rem; }
.barra-basso .nuovo-tondo { color: var(--accento); }
.barra-basso .nuovo-tondo .ico { width: 2.6rem; height: 2.6rem; padding: .55rem; margin-top: -1.2rem; border-radius: 50%;
                                 background: var(--accento); color: #fff; stroke-width: 2.4; box-shadow: 0 2px 8px rgb(40 35 20 / .25); }
.puntino { position: absolute; top: .3rem; right: calc(50% - 1rem); width: .55rem; height: .55rem; border-radius: 50%; background: var(--ambra); }
.velo { display: none; }

.schede { display: flex; gap: .2rem; overflow-x: auto; border-bottom: 1px solid var(--bordo); margin: -.25rem 0 1rem;
          scrollbar-width: none; }
.schede::-webkit-scrollbar { display: none; }
.schede a { padding: .55rem .9rem; color: var(--tenue); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .93rem;
            border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.schede a:hover { color: var(--inchiostro); }
.schede a[aria-current="page"] { color: var(--accento); border-bottom-color: var(--accento); }

/* telefono e tablet: menu a scomparsa */
@media (max-width: 899px) {
  body[data-menu] .contenuto { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .laterale { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(84vw, 300px);
              transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 24px rgb(0 0 0 / .18); visibility: hidden; }
  .laterale:target, .menu-aperto .laterale { transform: none; visibility: visible; }
  .laterale:target ~ .velo, .menu-aperto .velo { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(20 18 10 / .35); }
  .chiudi-menu { display: inline-flex; }
  .laterale .btn-nuovo { display: none; }
}
@media (max-width: 380px) { .barra-tel .marchio span { display: none; } }
/* computer: menu sempre visibile a sinistra */
@media (min-width: 900px) {
  body[data-menu] { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
  .laterale { position: sticky; top: 0; height: 100vh; grid-row: 1 / span 3; }
  .barra-tel, .barra-basso, .velo { display: none !important; }
  body[data-menu] .contenuto { grid-column: 2; width: 100%; padding-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .laterale { transition: none; } }
@media (prefers-color-scheme: dark) { .btn-nuovo, .iniziale { color: #121819; }
  .barra-basso .nuovo-tondo .ico { color: #121819; } }

.contenuto { max-width: 1080px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; }

/* --- schede home --------------------------------------------------------- */
.griglia { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .griglia { grid-template-columns: repeat(3, 1fr); } .larga { grid-column: 1 / -1; } }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; box-shadow: var(--ombra); min-width: 0; }
.evidenza { background: linear-gradient(var(--carta), var(--carta)) padding-box; border-top: 4px solid var(--ambra); }
.numero { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.voci { list-style: none; margin: .75rem 0 0; padding: 0; }
.voci li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-top: 1px solid var(--bordo); font-variant-numeric: tabular-nums; }
.riga-link { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--bordo); text-decoration: none; color: var(--inchiostro); }
.riga-link:first-of-type { border-top: 0; }
.tutti { display: inline-block; margin-top: .75rem; }

.tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { padding: .4rem .3rem; border-top: 1px solid var(--bordo); text-align: right; }
.tabella th:first-child, .tabella td:first-child { text-align: left; }
.tabella th { font-size: .8rem; color: var(--tenue); font-weight: 600; border-top: 0; }

/* --- elenco movimenti ---------------------------------------------------- */
.elenco { display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.scheda .elenco { border: 0; border-radius: 0; margin: 0 -1rem; }
.mov { display: flex; align-items: center; border-top: 1px solid var(--bordo); }
.mov:first-child { border-top: 0; }
.mov-data { font-size: .85rem; font-weight: 600; line-height: 1.1; color: var(--tenue); }
.mov-data small { display: block; font-weight: 400; font-size: .72rem; }
.mov-testo { min-width: 0; }
.mov-testo strong, .mov-testo small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-testo strong { font-weight: 600; }
.mov-testo small { color: var(--tenue); }
.mov-importo { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov.vendita .mov-importo { color: var(--pos); }
.mov.acquisto .mov-importo { color: var(--neg); }
.mov.annullato .mov-importo { text-decoration: line-through; color: var(--tenue); }
.badge { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-style: normal; font-weight: 600; vertical-align: middle; text-decoration: none; }
.badge.bozza, .badge.segnalato { background: var(--ambra-chiaro); color: var(--ambra); }
.badge.annullato { background: var(--neg-chiaro); color: var(--neg); }
.badge.confermato { background: var(--accento-chiaro); color: var(--accento); }
.badge.grande { font-size: .85rem; padding: .25rem .7rem; }
.altri { width: 100%; padding: .9rem; border: 0; border-top: 1px solid var(--bordo); background: var(--carta); color: var(--accento); font: inherit; font-weight: 600; cursor: pointer; }
.vuoto { padding: 1.5rem 1rem; color: var(--tenue); margin: 0; }

/* --- filtri ------------------------------------------------------------- */
.box-filtri { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .6rem .9rem; margin-bottom: .75rem; }
.box-filtri summary { cursor: pointer; font-weight: 600; color: var(--accento); }
.box-filtri[open] summary { margin-bottom: .75rem; }
.filtri { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .5rem; }
.filtri .cerca { grid-column: 1 / -1; }
.filtri button { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .filtri { grid-template-columns: repeat(5, 1fr) 2fr auto; align-items: end; }
  .filtri .cerca, .filtri button { grid-column: auto; }
}

/* --- moduli ------------------------------------------------------------- */
label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--tenue); font-weight: 600; min-width: 0; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 8px; padding: .55rem .6rem; min-height: 2.6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: transparent; }
label.spunta { flex-direction: row; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 400; color: var(--inchiostro); }
label.spunta input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: var(--accento); flex-shrink: 0; }
button {
  font: inherit; font-weight: 600; padding: .6rem 1rem; min-height: 2.6rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--inchiostro);
}
button.primario { background: var(--accento); border-color: var(--accento); color: #fff; }
@media (prefers-color-scheme: dark) { button.primario { color: #121819; } }
button.pericolo { color: var(--neg); border-color: var(--neg-chiaro); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.accesso { max-width: 380px; margin: 8vh auto 0; text-align: center; }
.accesso h1 { margin-top: .75rem; }
.modulo { display: flex; flex-direction: column; gap: .9rem; text-align: left; margin-top: 1.25rem; }

.avviso { padding: .65rem .85rem; border-radius: 8px; margin: 0 0 1rem; }
.avviso.errore { background: var(--neg-chiaro); color: var(--neg); }
.avviso.ok { background: var(--accento-chiaro); color: var(--accento); }
.avviso.attenzione { background: var(--ambra-chiaro); color: var(--ambra); }

/* --- documento ---------------------------------------------------------- */
.indietro { display: inline-block; margin-bottom: .5rem; text-decoration: none; }
.documento h1 { font-size: 2rem; font-variant-numeric: tabular-nums; }
.occhiello { margin: 0; color: var(--tenue); font-size: .9rem; }
.nota { background: var(--ambra-chiaro); border-radius: var(--raggio); padding: .75rem 1rem; margin-bottom: 1rem; }
.nota h2 { color: var(--ambra); margin-bottom: .3rem; }
.nota pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: .9rem; }
.modulo.documento { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; margin-top: 0; }
.campi { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 720px) { .campi { grid-template-columns: repeat(3, 1fr); } }
.modulo.documento h2 { margin: 1.25rem 0 .5rem; }
.righe { display: flex; flex-direction: column; gap: .75rem; }
.riga { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .75rem; border: 1px solid var(--bordo); border-radius: 8px; }
.riga .descr { grid-column: 1 / -1; }
.riga .prodotto { grid-column: 1 / -1; margin: 0; }
.riga .elimina { flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; }
.riga .elimina input { width: auto; min-height: 0; }
@media (min-width: 720px) {
  .riga { grid-template-columns: 1.2fr 2fr .7fr .8fr auto; align-items: end; }
  .riga .descr { grid-column: auto; }
}
details.riga summary { grid-column: 1 / -1; cursor: pointer; color: var(--accento); font-weight: 600; }
details.riga:not([open]) { display: block; }
.totale-righe { text-align: right; margin: .75rem 0; font-variant-numeric: tabular-nums; }
.note { margin-top: 1rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.azioni .pericolo { margin-left: auto; }
.origine { margin-top: 1rem; }

/* --- nuovo movimento ----------------------------------------------------- */
.segmenti { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-bottom: 1rem; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--carta); }
.segmenti a { text-align: center; padding: .75rem .5rem; text-decoration: none; color: var(--tenue); font-weight: 600; border-left: 1px solid var(--bordo); }
.segmenti a:first-child { border-left: 0; }
.segmenti a[aria-current="page"] { background: var(--accento-chiaro); color: var(--accento); }
.segmenti a.entrata[aria-current="page"] { color: var(--pos); }
.segmenti a.uscita[aria-current="page"] { background: var(--neg-chiaro); color: var(--neg); }
select.suggerita { outline: 2px solid var(--ambra); outline-offset: 1px; }
.sotto-righe { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.sotto-righe .link { color: var(--accento); font-size: .95rem; padding-left: 0; }
.riga .rimuovi { grid-column: 1 / -1; justify-self: end; color: var(--neg); font-size: .85rem; }
details.note summary { cursor: pointer; color: var(--tenue); font-weight: 600; font-size: .9rem; }
details.note textarea { margin-top: .4rem; }
.nuovo .azioni { position: sticky; bottom: 0; background: var(--carta); padding: .75rem 0 .25rem; margin-top: .75rem; flex-wrap: nowrap; }
.nuovo .azioni button { flex: 1; }
.nuovo .azioni button.primario { flex: 1.6; }
@media (min-width: 720px) {
  .nuovo .azioni button, .nuovo .azioni button.primario { flex: 0 0 auto; min-width: 9rem; }
  .nuovo .riga { grid-template-columns: 1.3fr 1fr 2fr 1.3fr 1fr; }
  .nuovo .riga .descr { grid-column: auto; }
}
.avviso ul { margin: .4rem 0; padding-left: 1.2rem; }
.avviso p { margin: .2rem 0; }

/* --- foto scontrino ------------------------------------------------------- */
.foto-box { background: var(--carta); border: 2px dashed var(--bordo); border-radius: var(--raggio); padding: 1rem; text-align: center; margin-bottom: .5rem; }
.btn-foto { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: .6rem; width: 100%; max-width: 22rem;
  background: var(--accento); color: #fff; font-size: 1.1rem; font-weight: 600; padding: .9rem 1rem; border-radius: var(--raggio); cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn-foto { color: #121819; } }
.scegli-foto { display: inline-block; margin-top: .6rem; color: var(--accento); font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: underline; }
.foto-box .piccolo { margin: .6rem 0 0; }
.foto-box .attesa { margin: .8rem 0 0; color: var(--ambra); font-weight: 600; }
.foto-box.in-attesa label { opacity: .5; pointer-events: none; }
.foto-box.in-attesa .attesa::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .foto-box.in-attesa .attesa::before { animation: none; } }
.separatore { display: flex; align-items: center; gap: .75rem; color: var(--tenue); font-size: .85rem; margin: 1rem 0; }
.separatore::before, .separatore::after { content: ""; flex: 1; border-top: 1px solid var(--bordo); }

.con-foto { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.foto-scontrino { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .5rem; }
.foto-scontrino img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 6px; background: #fff; }
.foto-scontrino p { margin: .4rem .25rem 0; }
.colonna-modulo { min-width: 0; }
@media (min-width: 900px) {
  .con-foto { grid-template-columns: minmax(280px, 2fr) 3fr; align-items: start; }
  .foto-scontrino { position: sticky; top: 4.5rem; }
  .foto-scontrino img { max-height: calc(100vh - 8rem); }
  .contenuto:has(.con-foto) { max-width: 1280px; }
}
.lettura { background: var(--accento-chiaro); border-radius: var(--raggio); padding: .75rem 1rem; margin-bottom: 1rem; }
.lettura h2 { color: var(--accento); margin-bottom: .3rem; }
.lettura ul { margin: 0; padding-left: 1.1rem; }
.lettura li { margin: .25rem 0; }

/* --- totali: entrate, uscite, netto ------------------------------------------ */
.totali { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 1rem; text-decoration: none; color: inherit; }
.totale { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .55rem .7rem; min-width: 0; }
.totale span { display: block; font-size: .78rem; color: var(--tenue); font-weight: 600; }
.totale strong { display: block; font-size: clamp(.95rem, 3.6vw, 1.45rem); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.totale.entrate strong { color: var(--pos); }
.totale.uscite strong { color: var(--neg); }
.totale.netto { border-width: 2px; }
.totale.netto.pos { border-color: var(--pos); }
.totale.netto.neg { border-color: var(--neg); }
.totale.netto.pos strong { color: var(--pos); }
.totale.netto.neg strong { color: var(--neg); }
.nota-totali { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--tenue); }
a.totali.home:hover .totale { border-color: var(--accento); }

/* --- riga dell'elenco con i comandi modifica / rimuovi ----------------------- */
.mov-link { flex: 1; min-width: 0; display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .75rem; align-items: center;
  padding: .65rem .5rem .65rem 1rem; color: var(--inchiostro); text-decoration: none; }
.mov-link:hover, .mov-link:focus-visible { background: var(--accento-chiaro); }
.mov-azioni { display: flex; align-items: center; gap: .15rem; padding-right: .4rem; }
.mov-azioni form { margin: 0; }
.icona { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--tenue); cursor: pointer; }
.icona:hover, .icona:focus-visible { border-color: var(--bordo); color: var(--accento); background: var(--carta); }
.icona.pericolo:hover, .icona.pericolo:focus-visible { color: var(--neg); border-color: var(--neg-chiaro); }
.mov.rimosso { justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: var(--neg-chiaro); color: var(--neg); font-size: .9rem; }
.mov.rimosso form { margin: 0; }
.annulla-rimozione { color: var(--neg); font-weight: 700; text-decoration: underline; font-size: .9rem; }
.mov.htmx-request { opacity: .5; }
@media (max-width: 420px) {
  .mov-link { grid-template-columns: 2.6rem 1fr auto; gap: .5rem; padding-left: .75rem; }
  .icona { width: 2rem; height: 2rem; }
}

/* rifiniture per il telefono: importo con il badge sotto, date su una riga, totali che non si tagliano */
.mov-importo { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.mov-importo .badge { margin-left: 0; }
.mov-data { white-space: nowrap; }
.icona.pericolo { border-color: transparent; color: var(--neg); }
@media (max-width: 420px) {
  .mov-link { grid-template-columns: 2.9rem 1fr auto; }
  .totali { gap: .35rem; }
  .totale { padding: .45rem .5rem; }
  .totale strong { font-size: clamp(.8rem, 3.4vw, 1.1rem); }
}

/* --- moduli: scelte a segmenti e campi a due colonne ----------------------------- */
.piccolo { font-size: .85rem; }
.segmenti.scelta label { flex-direction: row; justify-content: center; align-items: center; text-align: center; padding: .7rem .4rem;
  font-size: .9rem; color: var(--tenue); border-left: 1px solid var(--bordo); cursor: pointer; }
.segmenti.scelta label:first-child { border-left: 0; }
.segmenti.scelta label { position: relative; }
.segmenti.scelta input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; min-height: 0; cursor: pointer; }
.segmenti.scelta label:has(input:checked) { background: var(--accento-chiaro); color: var(--accento); }
.segmenti.scelta label:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: -2px; }
.segmenti.scelta { margin-bottom: 0; }
.campi.due { grid-template-columns: 1fr 1fr; }
.campi.due .largo { grid-column: 1 / -1; }
@media (min-width: 720px) { .campi.due { grid-template-columns: repeat(4, 1fr); } }
/* --- pulsanti nell'intestazione -------------------------------------------------- */
.btn-scarica { display: inline-flex; align-items: center; gap: .5rem; background: var(--accento); color: #fff; font-weight: 600;
  text-decoration: none; padding: .6rem 1.1rem; border-radius: 8px; }
.btn-scarica::before { content: "↓"; font-weight: 700; }
.btn-scarica.senza-freccia::before { content: none; }
@media (prefers-color-scheme: dark) { .btn-scarica { color: #121819; } }

.btn-piu::before { content: "+"; }
.lista-schede { display: flex; flex-direction: column; }

/* --- diario (auto e moto) -------------------------------------------------------- */
.capi-grande { margin: 0; font-size: 1.1rem; }
.capi-grande strong { font-size: 1.6rem; }
.diario { list-style: none; margin: 0; padding: 0; }
.diario li { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .75rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--bordo); }
.diario li:first-child { border-top: 0; }
.diario li.vuoto { display: block; }
.diario-testo strong, .diario-testo small { display: block; }
.diario-testo small { color: var(--tenue); }
.diario-azioni { display: flex; align-items: center; gap: .2rem; }
.diario-azioni form { margin: 0; }
.campi.due label small { font-weight: 400; }
a.chip-bozze { display: block; text-decoration: none; }

/* --- varie ----------------------------------------------------------------------- */
.campi.tre { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.campi.tre label:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .campi.tre { grid-template-columns: 1fr 1fr 2fr; } .campi.tre label:last-child { grid-column: auto; } }
.link.pericolo { color: var(--neg); border: 0; padding: 0; min-height: 0; background: none; font-size: .85rem; }
.blocco { display: block; }
.voci.saldi li span:last-child { text-align: right; }

.scheda + .scheda { margin-top: 1rem; }
.griglia > .scheda + .scheda { margin-top: 0; }
.risultati-ricerca { align-items: start; }

/* --- account e utenti --------------------------------------------------------- */
.modulo-stretto { max-width: 32rem; }
.voce-utente { display: grid; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--bordo); }
.voce-utente:first-child { border-top: 0; }
.voce-utente.spento > div { opacity: .55; }
.voce-utente form { margin: 0; }
.riga-utente { display: flex; flex-wrap: wrap; gap: .5rem; }
.riga-utente select { width: auto; flex: 1 1 10rem; }
@media (min-width: 720px) { .voce-utente { grid-template-columns: 1fr auto auto; align-items: center; } }
.password-temp .pw { font-size: 1.5rem; letter-spacing: .05em; margin: .3rem 0; }
.password-temp code { background: var(--carta); padding: .2rem .5rem; border-radius: 6px; user-select: all; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scheda + .voci { margin-top: 1rem; }

/* --- filtri e scelte ------------------------------------------------------------- */
.maiuscolo { text-transform: uppercase; }
fieldset.ruoli { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
fieldset.ruoli legend { font-size: .8rem; color: var(--tenue); font-weight: 600; padding: 0; margin-bottom: .2rem; float: left; width: 100%; }
.azioni-link { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .75rem; }
.doppioni summary { cursor: pointer; font-weight: 600; color: var(--tenue); }
.doppioni form { margin-top: .75rem; }
.filtro-soggetto { display: inline-flex; gap: .5rem; align-items: center; background: var(--accento-chiaro); padding: .3rem .8rem;
                   border-radius: 999px; margin: 0 0 .75rem; }
.filtro-soggetto .togli { text-decoration: none; color: var(--tenue); }
.maiuscolo::placeholder { text-transform: none; }

/* --- scadenze ------------------------------------------------------------------ */
.lista-scadenze { list-style: none; margin: 0; padding: 0; display: grid; }
.scad { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .75rem; align-items: center; padding: .6rem 0;
        border-top: 1px solid var(--bordo); }
.scad:first-child { border-top: 0; }
.scad-data { display: grid; justify-items: center; line-height: 1.1; padding: .3rem 0; border-radius: 8px; background: var(--sfondo); }
.scad-data strong { font-size: 1.15rem; }
.scad-data small { font-size: .7rem; text-transform: uppercase; color: var(--tenue); text-align: center; }
.scad-testo { display: grid; gap: .1rem; min-width: 0; }
.scad-testo > a { color: var(--inchiostro); font-weight: 600; text-decoration: none; }
.scad-testo > a:hover { text-decoration: underline; }
.scad-note { color: var(--tenue); }
.scad-azioni { display: grid; justify-items: end; gap: .1rem; }
.scad-azioni form { margin: 0; }
.link-piccolo { font-size: .8rem; color: var(--tenue); }
.scadenze-gruppo.allarme { border-color: var(--neg); }
details.scheda > summary { cursor: pointer; }
details.scheda[open] > summary { margin-bottom: .75rem; }
@media (max-width: 480px) { .scad { grid-template-columns: 2.8rem 1fr; } .scad-azioni { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 1rem; } }

/* --- mesi avanti e indietro ------------------------------------------------------------ */
.mesi-nav { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
tr.vuota td { color: var(--tenue); }

/* --- archivio documenti ------------------------------------------------------------- */
.lista-archivio { display: grid; gap: .4rem; }
.voce-archivio { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .8rem; align-items: center; padding: .55rem .8rem;
                 background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; text-decoration: none; color: inherit; }
.voce-archivio:hover { border-color: var(--accento); }
.voce-archivio.spento { opacity: .55; }
.arch-anteprima { width: 3.4rem; height: 3.4rem; border-radius: 6px; overflow: hidden; background: var(--sfondo); display: grid; place-items: center; }
.arch-anteprima img { width: 100%; height: 100%; object-fit: cover; }
.arch-pdf { font-size: .75rem; font-weight: 700; color: var(--neg); }
.arch-pdf.grande { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.2rem; }
.arch-testo { display: grid; gap: .1rem; min-width: 0; }
.arch-testo strong { overflow-wrap: anywhere; }
.badge.scaduto { background: var(--neg-chiaro); color: var(--neg); }
.badge.presto { background: var(--ambra-chiaro); color: var(--ambra); }
.voce-archivio .badge { white-space: nowrap; font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; }
@media (max-width: 480px) { .voce-archivio { grid-template-columns: 3rem 1fr; } .voce-archivio .badge { grid-column: 2; justify-self: start; } }
.galleria-archivio { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.galleria-archivio figure { margin: 0; display: grid; gap: .3rem; }
.galleria-archivio a { display: block; aspect-ratio: 3 / 4; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; background: var(--sfondo); }
.galleria-archivio img { width: 100%; height: 100%; object-fit: cover; }
.galleria-archivio figcaption { display: flex; justify-content: space-between; gap: .3rem; align-items: center; overflow-wrap: anywhere; }
.galleria-archivio form { margin: 0; }
.carica-archivio { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .75rem; }
.btn-secondario { display: inline-flex; align-items: center; padding: .5rem .9rem; border: 1px solid var(--accento); color: var(--accento);
                  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .95rem; }
.scelte-foto { display: flex; flex-wrap: wrap; gap: .6rem; }
.scelte-foto .btn-foto { flex: 1 1 12rem; width: auto; }
.btn-foto.secondario { background: var(--carta); color: var(--accento); border: 2px solid var(--accento); }
.file-scelti { font-weight: 600; color: var(--accento); min-height: 1.2em; margin: .5rem 0 0; }
.letto { background: var(--accento-chiaro); }
.copiabile { user-select: all; font-family: ui-monospace, monospace; }
form.in-invio button[type="submit"] { opacity: .5; pointer-events: none; }
.attesa-invio { color: var(--ambra); font-weight: 600; }

/* --- home: azioni rapide ------------------------------------------------------------- */
.azioni-rapide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; }
@media (min-width: 900px) { .azioni-rapide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.azione { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; background: var(--carta); border: 1px solid var(--bordo);
          border-radius: 12px; text-decoration: none; color: var(--inchiostro); font-weight: 700; font-size: 1.02rem; min-height: 4.2rem;
          box-shadow: var(--ombra); margin: 0; }
a.azione:hover { border-color: var(--accento); }
.azione small { display: block; font-weight: 400; font-size: .76rem; color: var(--tenue); }
.azione-ico { flex-shrink: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
              background: var(--accento-chiaro); font-size: 1.25rem; color: var(--accento); font-weight: 700; }
.azione-ico.vendita { background: var(--accento); color: #fff; font-size: 1.6rem; }
.azione-ico.spesa { background: var(--neg-chiaro); color: var(--neg); font-size: 1.6rem; }
.azione-ico.lista, .azione-ico.auto { background: var(--accento-chiaro); color: var(--accento); }
@media (prefers-color-scheme: dark) { .azione-ico.vendita { color: #121819; } }
.piccolo-btn { padding: .35rem .7rem; min-height: 2.1rem; font-size: .88rem; }

/* Interruttore Completa | Operatore (amministratore e gestore) */
.scelta-vista { margin: .2rem 0 .6rem; }
.scelta-vista button { padding: .4rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--tenue);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; min-height: 2.4rem; }
.scelta-vista button.completa[aria-pressed="true"] { background: #2f5d62; color: #fff; }
.scelta-vista button.operatore[aria-pressed="true"] { background: #3f5a74; color: #fff; }
.scelta-vista button[aria-pressed="false"]:hover { color: var(--inchiostro); }
.avviso.vista-operatore { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem;
  background: #e3ebf3; color: #2c4359; }
.avviso.vista-operatore button { color: inherit; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .scelta-vista button.completa[aria-pressed="true"] { background: #7cc4c4; color: #121819; }
  .scelta-vista button.operatore[aria-pressed="true"] { background: #8fb0cf; color: #121819; }
  .avviso.vista-operatore { background: #24323f; color: #cfe0f0; }
}

/* --- A voce ------------------------------------------------------------------------------------ */
.voce-box { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .6rem; margin: 0 0 1rem;
  padding: .8rem; background: var(--carta, #fffdf7); border: 1px solid var(--bordo); border-radius: 12px; }
.voce-box .voce-campo { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; min-width: 0; }
.voce-box .voce-campo input { width: 100%; }
.voce-box > button[type=submit] { min-height: 2.75rem; }
.voce-box .voce-errore, .voce-box .attesa-invio { grid-column: 1 / -1; margin: 0; }
.voce-box .btn-voce[hidden] + .voce-campo { grid-column: 1 / 3; }
.btn-voce { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem .9rem;
  border: 0; border-radius: 999px; background: #2f5d62; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.btn-voce.ascolta { background: #b3412b; animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 65, 43, .45); } 50% { box-shadow: 0 0 0 8px rgba(179, 65, 43, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-voce.ascolta { animation: none; } }
@media (max-width: 520px) {
  .voce-box { grid-template-columns: 1fr auto; }
  .voce-box .btn-voce { grid-column: 1 / -1; justify-content: center; min-height: 3.2rem; font-size: 1.05rem; }
  .voce-box .btn-voce[hidden] + .voce-campo { grid-column: 1 / 2; }
}
.esempi-voce { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--tenue); }
.esempi-voce li { margin: .15rem 0; }
.voce-capita p { margin: .2rem 0; }
.spiegazione { margin: 0 0 .8rem; text-align: left; }
.spiegazione label { display: block; font-weight: 600; margin-bottom: .3rem; }
.spiegazione-riga { display: flex; gap: .5rem; align-items: flex-start; }
.spiegazione-riga textarea { flex: 1; min-width: 0; }
@media (prefers-color-scheme: dark) {
  .btn-voce { background: #7cc4c4; color: #121819; }
  .btn-voce.ascolta { background: #e07a62; color: #121819; }
}
.btn-voce[hidden] { display: none; }
.scheda .voce-box { border: 0; padding: 0; background: none; }
a.btn-voce { text-decoration: none; }
.intestazione a.btn-voce { min-height: 2.5rem; }
@media (max-width: 520px) {
  .spiegazione-riga { flex-direction: column; align-items: stretch; }
  .spiegazione-riga .btn-voce { justify-content: center; }
}
.azioni-intestazione { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
[data-scorri-qui] { scroll-margin-top: 5rem; }

/* --- mezzi ------------------------------------------------------------------------------------- */
.elenco.mezzi { margin-bottom: 1rem; }
a.mezzo { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; padding: .7rem 1rem;
  border-top: 1px solid var(--bordo); color: var(--inchiostro); text-decoration: none; }
a.mezzo:first-child { border-top: 0; }
a.mezzo:hover { background: var(--accento-chiaro); }
a.mezzo.uscito { opacity: .55; }
.mezzo-testo { min-width: 0; }
.mezzo-testo strong, .mezzo-testo small, .mezzo-num small { display: block; }
.mezzo-testo small { color: var(--tenue); }
.mezzo-testo small.neg { color: var(--neg); }
.mezzo-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.risposta-testo { font-size: 1.15rem; line-height: 1.5; margin: .3rem 0 .6rem; }

/* --- cerca ------------------------------------------------------------------------------------- */
.cerca-tutto { display: flex; gap: .5rem; margin: 0 0 1rem; }
.cerca-tutto input { flex: 1; min-width: 0; font-size: 1.05rem; }
.risultati-ricerca .voci li a { display: block; text-decoration: none; color: var(--inchiostro); }
.risultati-ricerca .voci li a:hover strong { text-decoration: underline; }

/* --- grafici (colori validati per il daltonismo) ------------------------------------ */
:root { --g-attuale: #00909a; --g-prec: #c4691c; }
@media (prefers-color-scheme: dark) { :root { --g-attuale: #1aa3a9; --g-prec: #cf7f30; } }
.grafico-anno { margin: 0; }
.grafico-anno figcaption { margin-bottom: .3rem; }
svg.grafico { width: 100%; height: auto; display: block; }
.grafico .g-attuale { fill: var(--g-attuale); }
.grafico .g-prec { fill: var(--g-prec); }
.grafico path:hover { opacity: .75; }
.grafico .g-griglia { stroke: var(--bordo); stroke-width: 1; }
.grafico .g-asse { stroke: var(--tenue); stroke-width: 1; }
.grafico .g-tacca, .grafico .g-mese { fill: var(--tenue); font-size: 12px; }
/* Il disegno si rimpicciolisce col telefono: le scritte crescono per restare leggibili */
@media (max-width: 600px) { .grafico .g-tacca, .grafico .g-mese { font-size: 18px; } }

/* Storia delle modifiche e cestino */
.storia { margin-top: 1rem; }
.storia summary { cursor: pointer; font-weight: 600; color: var(--tenue); }
.storia-voci { list-style: none; margin: .5rem 0 0; padding: 0; }
.storia-voci > li { padding: .55rem 0; border-top: 1px solid var(--bordo); }
.storia-voci > li:first-child { border-top: 0; }
.storia-voci p { margin: 0; }
.storia-chi time { font-size: .85rem; margin-left: .35rem; white-space: nowrap; }
.cambi { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .9rem; }
.cambi li { padding: .1rem 0; overflow-wrap: anywhere; }
.cambi .campo { color: var(--tenue); }
.cambi del { color: var(--neg); text-decoration: line-through; }
.cambi ins { color: var(--accento); text-decoration: none; font-weight: 600; }
.cestino-voci li { align-items: center; }
.cestino-voci form { flex: none; }
.riga-avviso { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.riga-avviso button { color: inherit; font-weight: 600; text-decoration: underline; }
.griglia + .scheda, .scheda + .griglia { margin-top: 1rem; }
.voci + .voci { margin-top: .9rem; }

/* Filtri della storia delle modifiche */
.filtri-modifiche { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: .75rem; }
.filtri-modifiche label:not(.spunta) { min-width: 10rem; }
.filtri-modifiche .spunta { flex-basis: 100%; order: 3; }
.filtri-modifiche button { order: 2; }
/* Passkey */
.passkey-accesso { text-align: center; margin-top: 1rem; }
.passkey-accesso p { margin: .3rem 0; }
.btn-impronta { width: 100%; }
/* Vista semplice: tutto più grande (le misure sono in rem), menu corto */
html:has(body.semplice) { font-size: 118%; }
.semplice .voce { padding-top: .7rem; padding-bottom: .7rem; }
.semplice button, .semplice .btn-scarica, .semplice .primario { min-height: 3rem; }
.gruppo.altro summary { cursor: pointer; list-style: none; }
.gruppo.altro summary::before { content: "▸ "; }
.gruppo.altro[open] summary::before { content: "▾ "; }
@media (max-width: 600px) { .semplice .totali { grid-template-columns: 1fr; } .semplice .totali .totale { display: flex; justify-content: space-between; align-items: baseline; } }

/* --- budget ---------------------------------------------------------------------------------- */
.barra { display: block; height: .55rem; border-radius: 999px; background: var(--accento-chiaro); overflow: hidden; margin: .35rem 0; }
.barra.grande { height: .8rem; }
.barra .pieno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accento); transition: width .3s; }
.barra .pieno.quasi { background: var(--ambra); }
.barra .pieno.oltre { background: var(--neg); }
.riepilogo-budget .numero { font-size: 1.6rem; margin-left: .4rem; }
.voci-budget { list-style: none; margin: 0; padding: 0; }
.voci-budget li { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; padding: .6rem 0; border-top: 1px solid var(--bordo); }
.voci-budget li:first-child { border-top: 0; }
.voci-budget .nome { font-weight: 600; color: var(--inchiostro); text-decoration: none; }
.voci-budget .nome:hover { text-decoration: underline; }
.voci-budget .cifre { text-align: right; font-variant-numeric: tabular-nums; }
.voci-budget .barra, .voci-budget li > small { grid-column: 1 / -1; }
.voci-budget li > small { margin-top: -.15rem; }
a.riga-budget { display: block; color: var(--inchiostro); text-decoration: none; }
a.riga-budget:hover { border-color: var(--accento); }
.campi-budget li { align-items: center; }
.campi-budget input { width: 7.5rem; text-align: right; }

/* --- lista della spesa ------------------------------------------------------------------------ */
.aggiungi-spesa { display: flex; gap: .5rem; margin: .5rem 0 .3rem; }
.aggiungi-spesa input { flex: 1; min-width: 0; font-size: 1.05rem; }
.lista-spesa { list-style: none; margin: 0; padding: 0; }
.lista-spesa li { border-top: 1px solid var(--bordo); }
.lista-spesa li:first-child { border-top: 0; }
.lista-spesa li > span, .lista-spesa li > s { display: block; padding: .6rem 0; }
.spunta-spesa { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3rem; padding: .4rem 0; border: 0; background: none;
  color: var(--inchiostro); font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; }
.spunta-spesa .casella { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--accento);
  border-radius: 6px; color: var(--carta); font-size: .9rem; font-weight: 700; }
.spunta-spesa.presa { color: var(--tenue); text-decoration: line-through; }
.spunta-spesa.presa .casella { background: var(--accento); }
.spunta-spesa.htmx-request { opacity: .5; }
.reparto h2 { margin-bottom: .2rem; }
.prese { opacity: .9; }

/* --- bollette ---------------------------------------------------------------------------------- */
.bolletta .voci { margin-bottom: .75rem; }
.bolletta details { margin-top: .5rem; }
.bolletta summary { cursor: pointer; color: var(--tenue); font-weight: 600; }
.file-allegato { padding: 1rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }

/* --- conti ------------------------------------------------------------------------------------- */
.lista-conti { list-style: none; margin: 0; padding: 0; }
.lista-conti > li { padding: .7rem 0; border-top: 1px solid var(--bordo); }
.lista-conti > li:first-child { border-top: 0; }
.lista-conti > li.spento { opacity: .6; }
.conto-testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.conto-testa .numero { font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.conto-testa .numero.neg { color: var(--neg); }
.allinea summary { cursor: pointer; color: var(--accento); font-size: .9rem; margin-top: .3rem; }
.riga-allinea { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; margin: .6rem 0 .3rem; }
.riga-allinea label { flex: 1 1 9rem; }
.totale-conti { display: flex; justify-content: space-between; margin: .6rem 0 0; padding-top: .6rem; border-top: 2px solid var(--bordo); }

/* --- spese fisse ----------------------------------------------------------------------------------- */
.lista-fisse { list-style: none; margin: 0; padding: 0; }
.lista-fisse li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .6rem 0; border-top: 1px solid var(--bordo); }
.lista-fisse li:first-child { border-top: 0; }
.fissa-testo { flex: 1 1 12rem; }
.fissa-testo strong, .fissa-testo small { display: block; }
.registra-fissa { display: flex; gap: .4rem; align-items: center; margin: 0; }
.registra-fissa input { width: 6.5rem; text-align: right; }
.lista-fisse form { margin: 0; }
.voci-fisse .cifre { text-align: right; font-variant-numeric: tabular-nums; }
.voci-fisse li.spento { opacity: .55; }
[data-per-tipo][hidden] { display: none; }

/* --- dispensa ------------------------------------------------------------------------------------- */
.lista-dispensa { list-style: none; margin: 0; padding: 0; }
.lista-dispensa li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem;
  padding: .55rem 0; border-top: 1px solid var(--bordo); }
.lista-dispensa li:first-child { border-top: 0; }
.disp-testo small { display: block; }
.disp-azioni { display: flex; align-items: center; gap: .4rem; }
.disp-azioni form { margin: 0; }
.disp-scaduto .disp-testo strong { color: var(--neg); }
.attenzione-testo { color: var(--ambra); }

/* --- 730 e andamento ------------------------------------------------------------------------------ */
.gruppo-730 .avviso { margin: .5rem 0; }
.gruppo-730 details { margin-top: .5rem; }
.gruppo-730 summary { cursor: pointer; color: var(--tenue); font-weight: 600; }
.figli-730 { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.figli-730 label { flex: 1 1 14rem; }
.figli-730 input { max-width: 5rem; }
.scorre { overflow-x: auto; }
.legenda { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-left: .3rem; }
.g-attuale-sw { background: var(--g-attuale); }
.g-prec-sw { background: var(--g-prec); }
.capi-grande small { font-size: .85rem; font-weight: 400; }
.gruppo-730 .voci strong, .gruppo-730 .voci li > span:last-child { white-space: nowrap; }
.figli-730 label { display: flex; flex-direction: column; gap: .3rem; }
@media (min-width: 720px) { .griglia.griglia-2 { grid-template-columns: repeat(2, 1fr); } }
.griglia + .griglia { margin-top: 1rem; }

/* --- agenda ---------------------------------------------------------------------------------------- */
.lista-agenda { list-style: none; margin: 0; padding: 0; }
.lista-agenda li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .75rem; align-items: baseline; padding: .5rem 0;
  border-top: 1px solid var(--bordo); }
.lista-agenda li:first-child { border-top: 0; }
.ag-ora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accento); }
.ag-ora small { display: block; font-weight: 600; color: var(--tenue); }
.ag-testo strong, .ag-testo small { display: block; }
.ag-testo a { color: var(--inchiostro); text-decoration: none; }
.ag-testo a:hover strong { text-decoration: underline; }
.lista-agenda li.compleanno strong { color: var(--ambra); }
.giorno-agenda.oggi { border-left: 4px solid var(--accento); }
.giorno-agenda h2::first-letter { text-transform: uppercase; }
.filtro-persone { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.filtro-persone a { padding: .3rem .8rem; border: 1px solid var(--bordo); border-radius: 999px; text-decoration: none;
  color: var(--tenue); font-weight: 600; font-size: .9rem; background: var(--carta); }
.filtro-persone a[aria-current] { background: var(--accento); border-color: var(--accento); color: #fff; }
@media (prefers-color-scheme: dark) { .filtro-persone a[aria-current] { color: #121819; } }

/* --- faccende -------------------------------------------------------------------------------------- */
.lista-faccende { list-style: none; margin: 0; padding: 0; }
.lista-faccende li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem;
  padding: .6rem 0; border-top: 1px solid var(--bordo); }
.lista-faccende li:first-child { border-top: 0; }
.lista-faccende li.mia .fac-testo strong::before { content: "● "; color: var(--accento); }
.lista-faccende form { margin: 0; display: flex; gap: .4rem; align-items: center; }
.fac-testo strong, .fac-testo small { display: block; }
.fac-azioni { display: flex; align-items: center; gap: .5rem; }
.fac-azioni select.chi { width: auto; min-height: 2.1rem; padding: .2rem .4rem; font-size: .88rem; }

/* --- menu e ricette -------------------------------------------------------------------------------- */
.menu-settimana fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
@media (min-width: 900px) { .menu-settimana fieldset { grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem; } }
.giorno-menu { padding: .5rem 0; border-top: 1px solid var(--bordo); }
.giorno-menu h2 { margin-bottom: .3rem; }
.giorno-menu.oggi h2 { color: var(--accento); }
.giorno-menu label { display: grid; grid-template-columns: 4rem 1fr auto; gap: .5rem; align-items: center; margin: .25rem 0; }
.ingredienti { margin: 0 0 1rem; padding-left: 1.2rem; }
.ingredienti li { padding: .15rem 0; }
.preparazione { white-space: pre-line; }

/* --- rubrica e famiglia ---------------------------------------------------------------------------- */
.lista-contatti { list-style: none; margin: 0; padding: 0; }
.lista-contatti li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .75rem;
  padding: .6rem 0; border-top: 1px solid var(--bordo); }
.lista-contatti li:first-child { border-top: 0; }
.contatto-testo strong, .contatto-testo small { display: block; }
.contatto-azioni { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.btn-chiama { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px;
  background: var(--accento-chiaro); color: var(--accento); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.btn-chiama::before { content: "☎"; }
.voci-famiglia li.spento { opacity: .55; }
.obiettivo.spento { opacity: .6; }
.obiettivo .numero { font-size: 1.5rem; }
.oggi-home .ag-ora { font-size: .85rem; }