/* =====================================================================
   Mutuo variabile — foglio di stile
   Struttura (vedi anche docs/progetto-generale.md, sezione 13):
     1. Variabili e temi: un blocco per tema (chiaro, notte, carta, salvia, aurora, ardesia, contrasto alto); gli altri
        temi (oceano, tramonto, lavanda, bosco, brace, terminale, «Il tuo tema») li calcola temi.js dai colori di base
     2. Base: pagina, testi, titoli
     3. Componenti: pulsanti, campi, carte, note, pannelli richiudibili, tabelle, legende
     4. Testata e schede (in alto; in basso sui telefoni)
     5. Riepilogo del mese
     6. Pagine: piano, tassi (grafico e proiezione), calendario, festività, pannello
     7. Configurazione guidata
     8. Notifica, schermi piccoli, schermi bassi
     9. Struttura e temi: barra laterale sugli schermi larghi, selettore dei temi, ritocchi per tema
   ===================================================================== */

/* ---------- 1. Variabili e temi ----------
   Ogni tema è un blocco [data-tema="…"]: colori, caratteri, raggi, spessori. temi.js mette l'attributo su <html>
   (e sulle piccole anteprime del selettore, che così mostrano i colori veri). Senza attributo vale «chiaro»;
   «auto» segue il chiaro o lo scuro del sistema. Ogni tema dichiara tutti i colori (controllato dallo script che
   ha generato questa sezione); le voci di forma non dichiarate restano quelle del tema chiaro. */
:root {
  /* Misure comuni a tutti i temi */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-pillola: 999px;
  --alto-controllo: 40px;
  --alto-piccolo: 32px;
  --alto-riga: 60px;                 /* la riga della testata con il nome */
  --alto-sottomenu: 0px;             /* il sottomenu del prestito aperto, sotto i 1100 px */
  --alto-testata: calc(var(--alto-riga) + var(--alto-sottomenu));
  --alto-schede-basso: 0px;          /* barra delle schede in basso: solo sui telefoni */
  --larghezza-pagina: 1360px;
  --larghezza-lato: calc(272px + (var(--testo) - 1) * 150px);   /* barra laterale sugli schermi larghi: più larga con i testi grandi */
  --testo: 1;                        /* grandezza dei testi scelta nelle impostazioni (temi.js): moltiplica ogni font-size */
}
:root,
[data-tema="chiaro"],
[data-tema="auto"] {
  color-scheme: light;
  --pagina: #f4f6fb;
  --sfondo-pagina: #f4f6fb;
  --superficie: #ffffff;
  --superficie-2: #f6f8fc;
  --carta-sfondo: #ffffff;
  --inchiostro: #0f172a;
  --inchiostro-2: #475569;
  --tenue: #64748b;
  --linea: #e5e9f2;
  --linea-forte: #cdd5e1;
  --bordo: rgba(15, 23, 42, 0.08);
  --ombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  --ombra-alta: 0 18px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  --testata-tabella: #f1f4f9;
  --zebra: #f9fafc;
  --velo-banda: rgba(15, 23, 42, 0.025);
  --traccia: rgba(15, 23, 42, 0.12);
  --velo: rgba(15, 23, 42, 0.05);
  --accento: #2952e3;
  --accento-forte: #1f41bf;
  --accento-testo: #1f45c9;
  --accento-tenue: #eaf0ff;
  --su-accento: #ffffff;
  --serie: #2952e3;
  --parte-capitale: #2952e3;
  --parte-interessi: #f0682c;
  --parte-spese: #12a17a;
  --riga-pagata: #edf8f1;
  --riga-problema: #fdf0ef;
  --riga-corso: #fff5e2;
  --ok: #16a34a;
  --ko: #dc2626;
  --corso: #d97706;
  --corso-testo: #92400e;
  --ok-sfondo: #e5f6eb;
  --ok-testo: #166534;
  --ko-sfondo: #fde8e7;
  --ko-testo: #b91c1c;
  --avviso-sfondo: #fff4d6;
  --avviso-testo: #7c4a03;
  --previsione-sfondo: #f8f4e6;
  --corrente-sfondo: #eaf0ff;
  --testata: rgba(255, 255, 255, 0.86);
  --testata-solida: #ffffff;
  --nav-attiva-sfondo: #eaf0ff;
  --nav-attiva-testo: #1f45c9;
  --eroe: #2952e3;
  --su-eroe: #ffffff;
  --su-eroe-2: rgba(255, 255, 255, 0.84);
  --eroe-traccia: rgba(255, 255, 255, 0.25);
  --eroe-riempi: #ffffff;
  --logo: linear-gradient(135deg, #2952e3, #6d3fd0);
  --su-logo: #ffffff;
  --fuoco: #2952e3;
  --carattere: system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --carattere-titoli: "Segoe UI Variable Display", system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --carattere-numeri: "Segoe UI Variable Display", system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --peso-titoli: 700;
  --spaziatura-titoli: -0.015em;
  --corpo: 15px;
  --r1: 8px;
  --r2: 12px;
  --r3: 18px;
  --r-pulsante: 9px;
  --spessore: 1px;
}
/* Automatico: di sera, se il sistema è scuro, i colori di «Notte» */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]),
    [data-tema="auto"] {
    color-scheme: dark;
    --pagina: #0b1020;
    --sfondo-pagina: radial-gradient(1100px 620px at 85% -10%, rgba(91, 104, 255, 0.20), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(124, 58, 237, 0.14), transparent 60%) #0b1020;
    --superficie: #121a2e;
    --superficie-2: #18213a;
    --carta-sfondo: #121a2e;
    --inchiostro: #e8ecf6;
    --inchiostro-2: #b3bdd3;
    --tenue: #8892ab;
    --linea: #222c45;
    --linea-forte: #34405e;
    --bordo: rgba(255, 255, 255, 0.07);
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.22);
    --ombra-alta: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --testata-tabella: #19223a;
    --zebra: #141c31;
    --velo-banda: rgba(255, 255, 255, 0.025);
    --traccia: rgba(255, 255, 255, 0.16);
    --velo: rgba(255, 255, 255, 0.06);
    --accento: #4a5cf0;
    --accento-forte: #6474ff;
    --accento-testo: #a5b1ff;
    --accento-tenue: #1c2550;
    --su-accento: #ffffff;
    --serie: #7d8cff;
    --parte-capitale: #7d8cff;
    --parte-interessi: #ff8a5b;
    --parte-spese: #34d399;
    --riga-pagata: #10261c;
    --riga-problema: #2e1520;
    --riga-corso: #2e2410;
    --ok: #34d399;
    --ko: #f87171;
    --corso: #fbbf24;
    --corso-testo: #fcd37a;
    --ok-sfondo: #0f2a20;
    --ok-testo: #86efac;
    --ko-sfondo: #33171d;
    --ko-testo: #fca5a5;
    --avviso-sfondo: #33280f;
    --avviso-testo: #fcd37a;
    --previsione-sfondo: #241f15;
    --corrente-sfondo: #1c2550;
    --testata: rgba(14, 21, 40, 0.88);
    --testata-solida: #0e1528;
    --nav-attiva-sfondo: #1f2a5c;
    --nav-attiva-testo: #d0d6ff;
    --eroe: linear-gradient(135deg, #3b4fe0 0%, #6a3de8 60%, #9b3fd6 100%);
    --su-eroe: #ffffff;
    --su-eroe-2: rgba(255, 255, 255, 0.82);
    --eroe-traccia: rgba(255, 255, 255, 0.22);
    --eroe-riempi: #ffffff;
    --logo: linear-gradient(135deg, #4a5cf0, #9b3fd6);
    --su-logo: #ffffff;
    --fuoco: #8f9cff;
  }
}
/* Notte */
[data-tema="notte"] {
  color-scheme: dark;
  --pagina: #0b1020;
  --sfondo-pagina: radial-gradient(1100px 620px at 85% -10%, rgba(91, 104, 255, 0.20), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(124, 58, 237, 0.14), transparent 60%) #0b1020;
  --superficie: #121a2e;
  --superficie-2: #18213a;
  --carta-sfondo: #121a2e;
  --inchiostro: #e8ecf6;
  --inchiostro-2: #b3bdd3;
  --tenue: #8892ab;
  --linea: #222c45;
  --linea-forte: #34405e;
  --bordo: rgba(255, 255, 255, 0.07);
  --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.22);
  --ombra-alta: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --testata-tabella: #19223a;
  --zebra: #141c31;
  --velo-banda: rgba(255, 255, 255, 0.025);
  --traccia: rgba(255, 255, 255, 0.16);
  --velo: rgba(255, 255, 255, 0.06);
  --accento: #4a5cf0;
  --accento-forte: #6474ff;
  --accento-testo: #a5b1ff;
  --accento-tenue: #1c2550;
  --su-accento: #ffffff;
  --serie: #7d8cff;
  --parte-capitale: #7d8cff;
  --parte-interessi: #ff8a5b;
  --parte-spese: #34d399;
  --riga-pagata: #10261c;
  --riga-problema: #2e1520;
  --riga-corso: #2e2410;
  --ok: #34d399;
  --ko: #f87171;
  --corso: #fbbf24;
  --corso-testo: #fcd37a;
  --ok-sfondo: #0f2a20;
  --ok-testo: #86efac;
  --ko-sfondo: #33171d;
  --ko-testo: #fca5a5;
  --avviso-sfondo: #33280f;
  --avviso-testo: #fcd37a;
  --previsione-sfondo: #241f15;
  --corrente-sfondo: #1c2550;
  --testata: rgba(14, 21, 40, 0.88);
  --testata-solida: #0e1528;
  --nav-attiva-sfondo: #1f2a5c;
  --nav-attiva-testo: #d0d6ff;
  --eroe: linear-gradient(135deg, #3b4fe0 0%, #6a3de8 60%, #9b3fd6 100%);
  --su-eroe: #ffffff;
  --su-eroe-2: rgba(255, 255, 255, 0.82);
  --eroe-traccia: rgba(255, 255, 255, 0.22);
  --eroe-riempi: #ffffff;
  --logo: linear-gradient(135deg, #4a5cf0, #9b3fd6);
  --su-logo: #ffffff;
  --fuoco: #8f9cff;
}
/* Carta */
[data-tema="carta"] {
  color-scheme: light;
  --pagina: #f3ede2;
  --sfondo-pagina: #f3ede2;
  --superficie: #fffcf6;
  --superficie-2: #f8f2e7;
  --carta-sfondo: #fffcf6;
  --inchiostro: #2a2018;
  --inchiostro-2: #5a4a3c;
  --tenue: #76644f;
  --linea: #e6dccb;
  --linea-forte: #cdbda4;
  --bordo: rgba(42, 32, 24, 0.16);
  --ombra: 0 1px 0 rgba(42, 32, 24, 0.05);
  --ombra-alta: 0 16px 40px rgba(42, 32, 24, 0.20), 0 2px 6px rgba(42, 32, 24, 0.08);
  --testata-tabella: #f2eadc;
  --zebra: #fbf6ee;
  --velo-banda: rgba(42, 32, 24, 0.03);
  --traccia: rgba(42, 32, 24, 0.14);
  --velo: rgba(42, 32, 24, 0.05);
  --accento: #a8432a;
  --accento-forte: #8c3520;
  --accento-testo: #93391f;
  --accento-tenue: #f6e4da;
  --su-accento: #ffffff;
  --serie: #a8432a;
  --parte-capitale: #2f5d7c;
  --parte-interessi: #c2562f;
  --parte-spese: #6b8f3a;
  --riga-pagata: #eef3e3;
  --riga-problema: #f8e6df;
  --riga-corso: #f8edd2;
  --ok: #4d7c2f;
  --ko: #b4382a;
  --corso: #b7791f;
  --corso-testo: #7a4d0e;
  --ok-sfondo: #e7efd9;
  --ok-testo: #3f6424;
  --ko-sfondo: #f6e0d9;
  --ko-testo: #9a2e22;
  --avviso-sfondo: #f8ebc9;
  --avviso-testo: #6e4a0c;
  --previsione-sfondo: #f5ecd8;
  --corrente-sfondo: #f6e4da;
  --testata: #ebe3d3;
  --testata-solida: #ebe3d3;
  --nav-attiva-sfondo: #fffcf6;
  --nav-attiva-testo: #93391f;
  --eroe: #2a2018;
  --su-eroe: #fbf4e8;
  --su-eroe-2: rgba(251, 244, 232, 0.78);
  --eroe-traccia: rgba(251, 244, 232, 0.22);
  --eroe-riempi: #e9a585;
  --logo: #a8432a;
  --su-logo: #fffcf6;
  --fuoco: #a8432a;
  --carattere-titoli: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --carattere-numeri: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --peso-titoli: 600;
  --spaziatura-titoli: 0;
  --r1: 3px;
  --r2: 4px;
  --r3: 6px;
  --r-pulsante: 3px;
}
/* Salvia */
[data-tema="salvia"] {
  color-scheme: light;
  --pagina: #f2f5f1;
  --sfondo-pagina: linear-gradient(180deg, #e3ece5 0, #f2f5f1 420px) #f2f5f1;
  --superficie: #ffffff;
  --superficie-2: #f4f8f5;
  --carta-sfondo: #ffffff;
  --inchiostro: #14231c;
  --inchiostro-2: #435a4f;
  --tenue: #5c7166;
  --linea: #e0e8e2;
  --linea-forte: #c4d2c8;
  --bordo: rgba(20, 35, 28, 0.08);
  --ombra: 0 1px 2px rgba(20, 35, 28, 0.05), 0 8px 22px rgba(20, 35, 28, 0.06);
  --ombra-alta: 0 18px 40px rgba(20, 35, 28, 0.18), 0 2px 8px rgba(20, 35, 28, 0.08);
  --testata-tabella: #eef3ef;
  --zebra: #f8fbf8;
  --velo-banda: rgba(20, 35, 28, 0.025);
  --traccia: rgba(20, 35, 28, 0.12);
  --velo: rgba(20, 35, 28, 0.05);
  --accento: #1f7a6b;
  --accento-forte: #17604f;
  --accento-testo: #176b5d;
  --accento-tenue: #e3f2ee;
  --su-accento: #ffffff;
  --serie: #1f7a6b;
  --parte-capitale: #1f7a6b;
  --parte-interessi: #d9822b;
  --parte-spese: #7a6bd1;
  --riga-pagata: #eef7e8;
  --riga-problema: #fcefea;
  --riga-corso: #fdf3dc;
  --ok: #3f8f2f;
  --ko: #c8442f;
  --corso: #c98a12;
  --corso-testo: #7d5306;
  --ok-sfondo: #e8f4e1;
  --ok-testo: #2d6b20;
  --ko-sfondo: #fbe8e3;
  --ko-testo: #a33424;
  --avviso-sfondo: #fbf1d3;
  --avviso-testo: #6f4b06;
  --previsione-sfondo: #f5f1e1;
  --corrente-sfondo: #e3f2ee;
  --testata: rgba(251, 253, 251, 0.9);
  --testata-solida: #fbfdfb;
  --nav-attiva-sfondo: #e3f2ee;
  --nav-attiva-testo: #145c50;
  --eroe: linear-gradient(135deg, #1f7a6b 0%, #2f8f78 55%, #5c9e6e 100%);
  --su-eroe: #ffffff;
  --su-eroe-2: rgba(255, 255, 255, 0.86);
  --eroe-traccia: rgba(255, 255, 255, 0.25);
  --eroe-riempi: #ffffff;
  --logo: linear-gradient(135deg, #1f7a6b, #5c9e6e);
  --su-logo: #ffffff;
  --fuoco: #1f7a6b;
  --peso-titoli: 650;
  --r1: 10px;
  --r2: 16px;
  --r3: 22px;
  --r-pulsante: 999px;
}
/* Aurora */
[data-tema="aurora"] {
  color-scheme: light;
  --pagina: #f7f5fd;
  --sfondo-pagina: radial-gradient(900px 520px at 0% 0%, #ffe1f0 0, transparent 60%), radial-gradient(900px 620px at 100% 0%, #e0e4ff 0, transparent 55%), radial-gradient(900px 640px at 55% 105%, #ffeedd 0, transparent 60%) #f7f5fd;
  --superficie: #ffffff;
  --superficie-2: #f8f5fe;
  --carta-sfondo: rgba(255, 255, 255, 0.80);
  --inchiostro: #1e1537;
  --inchiostro-2: #4f4668;
  --tenue: #686080;
  --linea: #ebe6f5;
  --linea-forte: #d4cce6;
  --bordo: rgba(124, 58, 237, 0.12);
  --ombra: 0 1px 2px rgba(60, 20, 120, 0.05), 0 12px 32px rgba(60, 20, 120, 0.08);
  --ombra-alta: 0 22px 50px rgba(60, 20, 120, 0.22), 0 2px 8px rgba(60, 20, 120, 0.08);
  --testata-tabella: #f4f0fc;
  --zebra: #fbf9ff;
  --velo-banda: rgba(60, 20, 120, 0.025);
  --traccia: rgba(60, 20, 120, 0.12);
  --velo: rgba(124, 58, 237, 0.06);
  --accento: #7c3aed;
  --accento-forte: #6425d0;
  --accento-testo: #6d28d9;
  --accento-tenue: #f1eaff;
  --su-accento: #ffffff;
  --serie: #7c3aed;
  --parte-capitale: #7c3aed;
  --parte-interessi: #f97316;
  --parte-spese: #0ea5a4;
  --riga-pagata: #edf8f1;
  --riga-problema: #fdeff3;
  --riga-corso: #fff4e3;
  --ok: #16a34a;
  --ko: #e11d48;
  --corso: #ea8a0c;
  --corso-testo: #8a4b04;
  --ok-sfondo: #e5f6eb;
  --ok-testo: #166534;
  --ko-sfondo: #fde7ee;
  --ko-testo: #be123c;
  --avviso-sfondo: #fff2d9;
  --avviso-testo: #7a4706;
  --previsione-sfondo: #faf3e8;
  --corrente-sfondo: #f1eaff;
  --testata: rgba(255, 255, 255, 0.72);
  --testata-solida: #fbf9ff;
  --nav-attiva-sfondo: linear-gradient(135deg, #efe5ff, #ffe4f1);
  --nav-attiva-testo: #5b21b6;
  --eroe: linear-gradient(120deg, #7c3aed 0%, #c026d3 50%, #f97316 100%);
  --su-eroe: #ffffff;
  --su-eroe-2: rgba(255, 255, 255, 0.88);
  --eroe-traccia: rgba(255, 255, 255, 0.28);
  --eroe-riempi: #ffffff;
  --logo: linear-gradient(135deg, #7c3aed, #f97316);
  --su-logo: #ffffff;
  --fuoco: #7c3aed;
  --peso-titoli: 750;
  --spaziatura-titoli: -0.02em;
  --r1: 10px;
  --r2: 16px;
  --r3: 24px;
  --r-pulsante: 999px;
}
/* Ardesia */
[data-tema="ardesia"] {
  color-scheme: dark;
  --pagina: #111214;
  --sfondo-pagina: #111214;
  --superficie: #1a1b1e;
  --superficie-2: #222328;
  --carta-sfondo: #1a1b1e;
  --inchiostro: #f2f0ea;
  --inchiostro-2: #c2bfb6;
  --tenue: #97948b;
  --linea: #2a2b30;
  --linea-forte: #3d3e45;
  --bordo: rgba(255, 255, 255, 0.07);
  --ombra: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ombra-alta: 0 20px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  --testata-tabella: #202126;
  --zebra: #1d1e22;
  --velo-banda: rgba(255, 255, 255, 0.025);
  --traccia: rgba(255, 255, 255, 0.16);
  --velo: rgba(255, 255, 255, 0.06);
  --accento: #f2a516;
  --accento-forte: #ffb938;
  --accento-testo: #ffc14d;
  --accento-tenue: #2e2510;
  --su-accento: #1b1400;
  --serie: #f2a516;
  --parte-capitale: #f2a516;
  --parte-interessi: #ef6b4a;
  --parte-spese: #4cc38a;
  --riga-pagata: #142219;
  --riga-problema: #2b1818;
  --riga-corso: #16263a;
  --ok: #4cc38a;
  --ko: #ef5b5b;
  --corso: #6cb4ff;
  --corso-testo: #a9d2ff;
  --ok-sfondo: #13281f;
  --ok-testo: #8de0b5;
  --ko-sfondo: #331a1a;
  --ko-testo: #ff9b9b;
  --avviso-sfondo: #33290f;
  --avviso-testo: #ffd27a;
  --previsione-sfondo: #24211a;
  --corrente-sfondo: #2e2510;
  --testata: #16171a;
  --testata-solida: #16171a;
  --nav-attiva-sfondo: #2e2510;
  --nav-attiva-testo: #ffc14d;
  --eroe: linear-gradient(135deg, #f2a516 0%, #f08a2c 60%, #ec6b4a 100%);
  --su-eroe: #1b1400;
  --su-eroe-2: rgba(27, 20, 0, 0.78);
  --eroe-traccia: rgba(27, 20, 0, 0.2);
  --eroe-riempi: #1b1400;
  --logo: #f2a516;
  --su-logo: #1b1400;
  --fuoco: #ffc14d;
  --carattere-numeri: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;
  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --r-pulsante: 6px;
}
/* Contrasto alto */
[data-tema="contrasto"] {
  color-scheme: light;
  --pagina: #ffffff;
  --sfondo-pagina: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f2f2f2;
  --carta-sfondo: #ffffff;
  --inchiostro: #000000;
  --inchiostro-2: #1a1a1a;
  --tenue: #3d3d3d;
  --linea: #7a7a7a;
  --linea-forte: #000000;
  --bordo: #000000;
  --ombra: none;
  --ombra-alta: 0 0 0 3px #000000;
  --testata-tabella: #e8e8e8;
  --zebra: #f5f5f5;
  --velo-banda: rgba(0, 0, 0, 0.04);
  --traccia: rgba(0, 0, 0, 0.25);
  --velo: rgba(0, 0, 0, 0.08);
  --accento: #0033cc;
  --accento-forte: #002299;
  --accento-testo: #0033cc;
  --accento-tenue: #dfe7ff;
  --su-accento: #ffffff;
  --serie: #0033cc;
  --parte-capitale: #0033cc;
  --parte-interessi: #b34700;
  --parte-spese: #006b3c;
  --riga-pagata: #e3f4e7;
  --riga-problema: #ffe6e6;
  --riga-corso: #fff0c2;
  --ok: #006b2e;
  --ko: #c00000;
  --corso: #8a5a00;
  --corso-testo: #5c3c00;
  --ok-sfondo: #dcf2e2;
  --ok-testo: #004d1f;
  --ko-sfondo: #ffe0e0;
  --ko-testo: #9a0000;
  --avviso-sfondo: #fff0b3;
  --avviso-testo: #3d2a00;
  --previsione-sfondo: #f2f2f2;
  --corrente-sfondo: #dfe7ff;
  --testata: #ffffff;
  --testata-solida: #ffffff;
  --nav-attiva-sfondo: #000000;
  --nav-attiva-testo: #ffffff;
  --eroe: #000000;
  --su-eroe: #ffffff;
  --su-eroe-2: #e6e6e6;
  --eroe-traccia: rgba(255, 255, 255, 0.35);
  --eroe-riempi: #ffd400;
  --logo: #000000;
  --su-logo: #ffffff;
  --fuoco: #ff8c00;
  --peso-titoli: 800;
  --spaziatura-titoli: 0;
  --corpo: 16.5px;
  --r1: 2px;
  --r2: 4px;
  --r3: 6px;
  --r-pulsante: 4px;
  --spessore: 2px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Versione semplice (predefinita) e avanzata, scelta nelle impostazioni (temi.js mette data-versione su <html>) */
[data-versione="semplice"] .solo-avanzata, :root:not([data-versione="semplice"]) .solo-semplice { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-testata) + var(--s3)); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  padding-bottom: calc(var(--alto-schede-basso) + env(safe-area-inset-bottom, 0px));
  background: var(--sfondo-pagina); background-attachment: fixed; color: var(--inchiostro);
  font: calc(var(--corpo) * var(--testo))/1.5 var(--carattere);
  overflow-x: clip;                   /* rete di sicurezza: mai scorrimento orizzontale della pagina */
}
h1 { margin: 0; font-family: var(--carattere-titoli); font-size: calc(17px * var(--testo)); font-weight: var(--peso-titoli); letter-spacing: var(--spaziatura-titoli); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2 { margin: 0 0 var(--s1); font-family: var(--carattere-titoli); font-size: calc(19px * var(--testo)); font-weight: var(--peso-titoli); letter-spacing: var(--spaziatura-titoli); line-height: 1.3; }
h3 { margin: 0 0 var(--s1); font-family: var(--carattere-titoli); font-size: calc(16px * var(--testo)); font-weight: var(--peso-titoli); letter-spacing: var(--spaziatura-titoli); line-height: 1.35; }
p { margin: 0 0 var(--s3); }
b, strong { font-weight: 650; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3. Componenti ---------- */

/* Pulsanti: una sola famiglia. Primario (predefinito), .secondario, .piccolo, .pericoloso */
input, textarea, button, select { font: inherit; color: inherit; }
button, .carica-file {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--alto-controllo); padding: 0 var(--s4);
  background: var(--accento); color: var(--su-accento);
  border: var(--spessore) solid transparent; border-radius: var(--r-pulsante);
  font-size: calc(14.5px * var(--testo)); font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
button:hover { background-color: var(--accento-forte); }
button:active { transform: translateY(0.5px); }
button:disabled { opacity: 0.55; cursor: progress; }
button.secondario, .carica-file { background: var(--superficie); color: var(--inchiostro); border-color: var(--linea-forte); }
button.secondario:hover, .carica-file:hover { background: var(--superficie-2); border-color: var(--tenue); }
button.piccolo { min-height: var(--alto-piccolo); padding: 0 var(--s3); font-size: calc(13.5px * var(--testo)); font-weight: 550; }
button.pericoloso { background: var(--superficie); color: var(--ko-testo); border-color: color-mix(in srgb, var(--ko) 45%, var(--linea-forte)); }
button.pericoloso:hover { background: var(--ko-sfondo); border-color: var(--ko); }
.carica-file:focus-within { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.icona { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* Campi */
input, textarea, select {
  background: var(--superficie); border: 1px solid var(--linea-forte); border-radius: var(--r1);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input { min-height: var(--alto-controllo); padding: 6px 10px; }
select { min-height: var(--alto-controllo); padding: 0 32px 0 10px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro-2) 50%), linear-gradient(135deg, var(--inchiostro-2) 50%, transparent 50%);
  background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { display: block; width: 100%; margin-bottom: var(--s3); padding: 8px 10px; resize: vertical; font-variant-numeric: tabular-nums; }
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus { border-color: var(--accento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); outline: none; }
input:disabled { opacity: 0.55; }
input::placeholder, textarea::placeholder { color: var(--tenue); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; padding: 0; accent-color: var(--accento); box-shadow: none; }
button:focus-visible, svg:focus-visible, summary:focus-visible, a:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

.campi { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.campi.in-linea { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0; }
.campi.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3) var(--s4); align-items: end; }
.campi.tre-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); align-items: end; }
.campi label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: calc(14px * var(--testo)); font-weight: 600; color: var(--inchiostro); }
.campi label small { font-weight: 400; color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); }
.campi label input, .campi label select { width: 100%; font-weight: 400; }
.campi.in-linea label input { width: auto; min-width: 160px; }
.spunta { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--s3); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie-2); font-size: calc(14px * var(--testo)); font-weight: 400; cursor: pointer; }
.campi label.spunta { flex-direction: row; font-weight: 400; }
.spunta input { flex: none; margin: 1px 0 0; }

/* Carte e blocchi */
.carta {
  background: var(--carta-sfondo); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r2);
  padding: var(--s5); min-width: 0;
}
.intestazione-carta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s3); }
.intestazione-carta .nota { margin-bottom: 0; }
.blocco { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--linea); }
.blocco:empty { display: none; }
.blocco .nota:last-child { margin-bottom: 0; }

/* Note e avvisi */
.nota { margin: 0 0 var(--s3); color: var(--inchiostro-2); font-size: calc(14px * var(--testo)); line-height: 1.55; }
.nota.piccola { font-size: calc(13px * var(--testo)); color: var(--tenue); }
.nota.evidenza { background: var(--avviso-sfondo); color: var(--avviso-testo); padding: 9px var(--s3); border-radius: var(--r1); }
.nota.conferma { background: var(--ok-sfondo); color: var(--ok-testo); padding: 9px var(--s3); border-radius: var(--r1); }
.nota.piede { margin: var(--s2) 0 0; font-size: calc(13px * var(--testo)); color: var(--tenue); text-align: center; }
.nota.piede a { color: var(--accento-testo); }
.nota.sotto { margin-top: var(--s3); }
/* I pulsanti per aggiungere la stima delle spese che mancano al TAEG dell'offerta (offerte.js, propostaSpese) */
.azioni-stima { margin: 0 0 var(--s3); }
.info { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r2); font-size: calc(14px * var(--testo)); }
.info:empty { display: none; }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--s4); margin: var(--s2) 0 0; }
.info dt { color: var(--inchiostro-2); }
.info dd { margin: 0; font-variant-numeric: tabular-nums; }
.elenco-date { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }

/* Pannelli richiudibili (details): riga di riepilogo + pulsante «Apri / Cambia» a destra */
details.pieghevole > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  list-style: none; cursor: pointer; border-radius: var(--r2);
}
details.pieghevole > summary::-webkit-details-marker { display: none; }
.testo-sommario { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.titolo-sommario { font-size: calc(15.5px * var(--testo)); font-weight: 650; color: var(--inchiostro); }
.riassunto-proiezione { font-size: calc(14px * var(--testo)); color: var(--inchiostro-2); }
.apri-sommario {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--alto-piccolo); padding: 0 var(--s3);
  border: 1px solid var(--linea-forte); border-radius: var(--r-pillola); background: var(--superficie);
  font-size: calc(13.5px * var(--testo)); font-weight: 600; color: var(--inchiostro);
}
.apri-sommario::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
details[open] > summary .apri-sommario::after { transform: translateY(1px) rotate(225deg); }
details.pieghevole > summary:hover .apri-sommario { border-color: var(--tenue); background: var(--superficie-2); }
.se-aperto { display: none; }
details[open] > summary .se-aperto { display: inline; }
details[open] > summary .se-chiuso { display: none; }
.corpo-pieghevole { padding-top: var(--s4); }
.carta-pieghevole { padding: var(--s4) var(--s5); }
details.avanzate { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border: 1px dashed var(--linea-forte); border-radius: var(--r2); }
details.avanzate summary { cursor: pointer; font-size: calc(14px * var(--testo)); font-weight: 600; color: var(--inchiostro-2); }
details.avanzate[open] summary { margin-bottom: var(--s3); }
details.avanzate .campi { margin-bottom: var(--s1); }
details:not(.pieghevole):not(.avanzate) > summary { cursor: pointer; font-size: calc(14px * var(--testo)); font-weight: 600; color: var(--accento-testo); padding: var(--s1) 0; }

/* Tabelle */
.contenitore-tabella {
  min-height: 0; overflow: auto; background: var(--superficie);
  border: var(--spessore) solid var(--bordo); border-radius: var(--r2); box-shadow: var(--ombra);
  overscroll-behavior-x: contain;
}
.contenitore-tabella.semplice { box-shadow: none; }
.tabella-alta { max-height: 520px; }
.tabella-media { max-height: 440px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: calc(14px * var(--testo)); font-variant-numeric: tabular-nums; }
thead { position: sticky; top: 0; z-index: 3; }
th, td { padding: 8px var(--s3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--linea); }
th {
  background: var(--superficie); color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); font-weight: 600;
  white-space: normal; vertical-align: bottom; line-height: 1.3; border-bottom: 1px solid var(--linea-forte);
}
td { background: var(--superficie); }
tbody tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child, th.testo { text-align: left; }
tbody tr:hover td { background-image: linear-gradient(var(--velo), var(--velo)); }
td.manuale { position: relative; }
td.modificabile { cursor: text; }
tr:hover td.modificabile { outline: 1px dashed var(--tenue); outline-offset: -3px; }
tr td.modificabile:hover { outline: 1.5px solid var(--accento); }
td.in-modifica { padding: 2px 4px; outline: none !important; }
td input.editor { width: 100%; min-width: 96px; min-height: 30px; height: 30px; text-align: right; padding: 2px 8px; }
td input.editor[type="date"] { min-width: 140px; text-align: left; }
td.testo { text-align: left; color: var(--inchiostro-2); }
td.azione { width: 1%; }
td.minore { color: var(--inchiostro-2); }
tr.in-evidenza td { background-color: var(--accento-tenue); }

/* Legende */
.legenda { display: flex; flex-wrap: wrap; gap: 6px var(--s4); margin: 0; padding: 0; list-style: none; font-size: calc(13px * var(--testo)); color: var(--inchiostro-2); }
.legenda li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.campione {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 16px; border-radius: 4px; border: 1px solid var(--bordo); font-size: calc(10.5px * var(--testo)); line-height: 1;
}
.campione.manuale::after, td.manuale::after {
  content: ""; position: absolute; top: 0; right: 0;
  border: 4px solid transparent; border-top-color: var(--accento); border-right-color: var(--accento);
}
.campione.previsione { width: auto; border: 0; font-size: calc(13px * var(--testo)); font-style: italic; color: var(--inchiostro-2); }
.campione.riga-pagata { background: var(--riga-pagata); color: var(--ok-testo); font-weight: 700; box-shadow: inset 3px 0 0 var(--ok); }
.campione.riga-problema { background: var(--riga-problema); color: var(--ko-testo); font-weight: 700; box-shadow: inset 3px 0 0 var(--ko); }
.campione.riga-corso { background: var(--riga-corso); color: var(--corso-testo); box-shadow: inset 3px 0 0 var(--corso); }
.campione.copiata { border-radius: var(--r-pillola); background: var(--superficie); color: var(--inchiostro-2); font-weight: 700; }
.voce-stato {
  min-height: 28px; gap: 6px; padding: 0 var(--s2) 0 3px; background: none; border: 0; border-radius: var(--r1);
  color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); font-weight: 400;
}
.voce-stato:hover { background: var(--velo); color: var(--inchiostro); }
.voce-stato b { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.chiave-linea { width: 20px; height: 0; border-top: 2.5px solid var(--serie); }
.chiave-linea.tendenza { border-top: 2px dashed var(--tenue); }
.chiave-linea.media { border-top: 2px dotted var(--tenue); }
.chiave-linea.proiezione { border-top: 2.5px dashed var(--accento); }
.chiave-punto { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--serie); background: var(--superficie); }
.chiave-banda { width: 20px; height: 11px; border-radius: 3px; background: color-mix(in srgb, var(--serie) 28%, transparent); }

/* Frecce di andamento: il colore accompagna sempre un simbolo e un segno */
.freccia { display: inline-block; min-width: 14px; margin-right: 5px; font-size: calc(11px * var(--testo)); text-align: center; font-style: normal; }
.freccia.su { color: var(--ko-testo); }
.freccia.giu { color: var(--ok-testo); }
.freccia.medio { color: var(--corso-testo); }
.freccia.pari { color: var(--tenue); }
.freccia.grande { font-size: calc(17px * var(--testo)); font-weight: 900; line-height: 0.8; vertical-align: -1px; }
.legenda .freccia { margin-right: 0; }
.tetto { margin-right: 6px; padding: 0 6px; border: 1px solid var(--linea-forte); border-radius: var(--r-pillola); font-size: calc(11px * var(--testo)); font-style: normal; color: var(--tenue); }

/* Segmenti (scelta del periodo) e filtri */
.segmenti { display: flex; padding: 3px; gap: 2px; background: var(--superficie); border: 1px solid var(--linea-forte); border-radius: var(--r2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmenti::-webkit-scrollbar { display: none; }
.segmenti button { min-height: 32px; padding: 0 var(--s3); background: none; color: var(--inchiostro-2); border: 0; border-radius: 7px; font-weight: 550; font-size: calc(14px * var(--testo)); flex: none; }
.segmenti button:hover { background: var(--velo); color: var(--inchiostro); }
.segmenti button[aria-pressed="true"] { background: var(--accento); color: var(--su-accento); }
.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.filtri label { display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--testo)); color: var(--inchiostro-2); }
.filtri .nota { margin: 0 0 0 auto; font-size: calc(13.5px * var(--testo)); }

/* Riquadri con un numero (riepilogo del mese, statistiche dei tassi) */
.dato {
  display: flex; flex-direction: column; min-width: 0; padding: var(--s3) var(--s4);
  background: var(--carta-sfondo); border: var(--spessore) solid var(--bordo); border-radius: var(--r2); box-shadow: var(--ombra);
}
.dato .etichetta { font-size: calc(13px * var(--testo)); color: var(--inchiostro-2); font-weight: 500; }
.dato .valore { font-size: min(calc(20px * var(--testo)), max(20px, var(--largo-cifra, 999px))); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dato .dettaglio { font-size: calc(13px * var(--testo)); color: var(--inchiostro-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avanzamento { height: 5px; margin-top: var(--s2); border-radius: 3px; background: var(--accento-tenue); overflow: hidden; }
.avanzamento span { display: block; height: 100%; border-radius: 3px; background: var(--accento); }

/* ---------- 4. Testata e schede ---------- */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--testata);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--spessore) solid var(--linea);
}
.testata-interno {
  display: flex; align-items: center; gap: var(--s5); min-height: var(--alto-riga);
  max-width: var(--larghezza-pagina); margin: 0 auto; padding: 0 var(--s5);
}
.marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--logo); color: var(--su-logo);
  font-weight: 800; font-size: calc(16px * var(--testo)); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.schede { display: flex; align-self: stretch; gap: 2px; min-width: 0; }
.schede button {
  position: relative; align-self: stretch; min-height: 0; gap: 7px; padding: 0 var(--s3);
  background: none; color: var(--inchiostro-2); border: 0; border-radius: 0; font-size: calc(14.5px * var(--testo)); font-weight: 600;
}
.schede button .icona { display: none; width: 18px; height: 18px; }
.schede button:hover { background: none; color: var(--inchiostro); }
.schede button::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
}
.schede button:hover::after { background: var(--linea-forte); }
.schede button[aria-selected="true"] { color: var(--accento-testo); }
.schede button[aria-selected="true"]::after { background: var(--accento); }
.schede button:focus-visible { outline-offset: -4px; border-radius: var(--r1); }
/* Pulsanti a destra della testata: Aspetto (temi.js) e Configurazione */
.azioni-testata { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex: none; }
.impostazione-attuale { display: none; }
.spiega-scheda { display: none; }   /* la riga sotto il nome della scheda: solo nella barra laterale */
.ramo-prestito { display: none; }   /* il prestito aperto con le sue pagine: solo nella barra laterale (sotto, il sottomenu) */
.stella { color: #e5a800; font-size: calc(13px * var(--testo)); line-height: 1; }

/* Sottomenu del prestito aperto, sotto i 1100 px: il nome del prestito e le sue pagine, in una riga che scorre */
.sottomenu {
  display: flex; align-items: stretch; gap: var(--s1); height: var(--alto-sottomenu); padding: 0 var(--s3);
  background: var(--testata-solida); border-top: 1px solid var(--linea);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.sottomenu::-webkit-scrollbar { display: none; }
.sottomenu .pagine-prestito { display: flex; align-items: stretch; gap: 2px; }
.sottomenu button {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 0; padding: 0 var(--s2);
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--inchiostro-2); font-size: calc(14px * var(--testo)); font-weight: 600; white-space: nowrap;
}
.sottomenu button:hover { background: none; color: var(--inchiostro); }
.sottomenu .icona { width: 17px; height: 17px; }
.sottomenu .nome-prestito { max-width: 42vw; padding-right: var(--s3); border-right: 1px solid var(--linea); color: var(--inchiostro); font-weight: 700; }
.sottomenu .nome-prestito .nome { overflow: hidden; text-overflow: ellipsis; }
.sottomenu button[aria-selected="true"] { color: var(--accento-testo); }
.sottomenu button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accento); }
.sottomenu .chiudi-prestito { margin-left: auto; padding: 0 var(--s2); font-size: calc(20px * var(--testo)); color: var(--tenue); }
@media (max-width: 1099px) { :root:has(#sottomenu:not([hidden])) { --alto-sottomenu: 46px; } }
@media (max-width: 760px) { .sottomenu { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 32px; } }   /* sfuma a destra: si capisce che scorre */
@media (min-width: 1100px) { .sottomenu { display: none !important; } }
.pulsante-icona .icona { width: 18px; height: 18px; }
#segnala-testata .icona { color: var(--avviso-testo); }   /* il triangolo di avviso, nel colore degli avvisi del tema */

/* ---------- 5. Riepilogo del mese ----------
   Due file, ognuna un pannello: le celle (.dato) stanno a 1 px l'una dall'altra su un fondo del colore dei riquadri,
   con un contorno (outline) del colore delle linee, così fra le celle ci sono righe sottili anche quando vanno a capo,
   e tutte le celle di una fila sono alte uguali (align-items: stretch). «Il mese»: la rata del mese in evidenza, con lo
   sfondo «eroe» del tema, e accanto prossima rata, debito e tasso (--tessere dice quanti sono: 3 nella versione
   semplice, 4 nell'avanzata). Schermi larghissimi: una riga sola. Larghi e medi: la rata su tutta la riga, poi gli
   altri. Telefoni: la rata, poi due per riga (sezione 8). Sotto, le statistiche, solo nella pagina del piano: tre
   colonne nell'avanzata (sei celle, due righe piene; con cinque l'ultima si allarga su due colonne, con quattro su tutta
   la riga), quattro nella semplice (quattro statistiche senza dettagli, una riga sola); sotto i 1100 px due colonne.
   Era il tema di prova «Nuovo stile» del 28 ottobre 2026, dal 29 ottobre vale per tutti i temi (docs, sezioni 51 e 55). */
.riepilogo {
  display: flex; flex-direction: column; gap: var(--s3);
  max-width: var(--larghezza-pagina); margin: 0 auto; padding: var(--s4) var(--s5) 0;
}
.riepilogo:empty { display: none; }

/* Prova con degli esempi (esempi.js): la striscia in cima, sopra il riepilogo e la guida. Con gli esempi (data-esempi
   su <html>) si nasconde quello che vale per i dati veri (backup, caricamento, «Cancella tutto») e l'invito a provarli;
   senza, quello che serve solo agli esempi. */
.striscia-esempi { max-width: var(--larghezza-pagina); margin: 0 auto; padding: var(--s4) var(--s5) 0; }
.striscia-esempi[hidden] { display: none; }
.striscia-esempi-interno {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--accento); border-radius: var(--r2); background: var(--accento-tenue);
  font-size: calc(14px * var(--testo));
}
.striscia-esempi-interno p { margin: 0; flex: 1 1 320px; }
html:not([data-esempi="si"]) .solo-esempi { display: none; }
[data-esempi="si"] .fuori-esempi, [data-esempi="si"] #salva-file, [data-esempi="si"] #carica-file, [data-esempi="si"] #cancella-tutto,
[data-esempi="si"] #guida-carica, [data-esempi="si"] #ultimo-backup { display: none; }
.riepilogo-mese, .riepilogo-statistiche {
  display: grid; gap: 1px; align-items: stretch;
  background: var(--superficie); border: 1px solid var(--linea-forte); border-radius: var(--r2); overflow: hidden;
}
.riepilogo-mese { grid-template-columns: minmax(280px, 1.7fr) repeat(var(--tessere, 4), minmax(0, 1fr)); }
.riepilogo-statistiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-versione="semplice"] .riepilogo-statistiche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1100px) {   /* avanzata, tre colonne: l'ultima cella allarga la riga se resta sola o in due */
  :root:not([data-versione="semplice"]) .riepilogo-statistiche .dato:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
  :root:not([data-versione="semplice"]) .riepilogo-statistiche .dato:nth-child(3n + 2):last-child { grid-column: span 2; }
}
@media (max-width: 1099px) {
  .riepilogo-statistiche, [data-versione="semplice"] .riepilogo-statistiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riepilogo-statistiche .dato:nth-child(odd):last-child { grid-column: 1 / -1; }
}
body:has(#scheda-piano[hidden]) .riepilogo-statistiche { display: none; }
/* I riquadri con una cifra misurano sé stessi (container): con i testi grandi la cifra non esce dal riquadro */
.riepilogo .dato, .statistiche .dato { container-type: inline-size; }
.riepilogo .dato .valore, .statistiche .dato .valore { --largo-cifra: 11cqi; }
.riepilogo .dato.principale .valore { --largo-cifra: 16cqi; }
.riepilogo .riepilogo-statistiche .dato .valore { font-size: min(calc(22px * var(--testo)), max(22px, var(--largo-cifra, 999px))); }
.riepilogo .composizione { margin: var(--s3) 0 0; height: 6px; }
.riepilogo .avanzamento { height: 4px; }
.voci-dato { margin: var(--s3) 0 0; }
.voci-dato div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s3); row-gap: 0; padding: 5px 0; border-top: 1px dashed var(--linea-forte); font-size: calc(13px * var(--testo)); }
.voci-dato dt { color: var(--tenue); font-weight: 500; white-space: nowrap; }
.voci-dato dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.voci-dato dd small { margin-left: 6px; font-size: calc(12px * var(--testo)); font-weight: 400; color: var(--tenue); }
/* Le celle del pannello: senza bordo, raggio né ombra propri; il contorno fa le righe fra una cella e l'altra */
.riepilogo .dato { padding: 14px 18px 16px; background: var(--superficie); border: 0; border-radius: 0; box-shadow: none; outline: 1px solid var(--linea-forte); }
.riepilogo .dato .etichetta { font-size: calc(13px * var(--testo)); font-weight: 600; color: var(--inchiostro-2); }
.riepilogo .dato .valore { margin-top: 4px; font-size: min(calc(24px * var(--testo)), max(24px, var(--largo-cifra, 999px))); letter-spacing: -0.02em; }
.riepilogo .dato .dettaglio { white-space: normal; line-height: 1.4; color: var(--tenue); }
.riepilogo .dato.principale { order: -1; justify-content: center; padding: 14px 20px; background: var(--eroe); color: var(--su-eroe); }
.riepilogo .dato.principale .etichetta { color: var(--su-eroe-2); }
.riepilogo .dato.principale .valore { margin: 2px 0; font-size: min(calc(36px * var(--testo)), max(36px, var(--largo-cifra, 999px))); line-height: 1.1; letter-spacing: -0.03em; }
.riepilogo .dato.principale .dettaglio { color: var(--su-eroe-2); }
.riepilogo .dato.principale .avanzamento { background: var(--eroe-traccia); }
.riepilogo .dato.principale .avanzamento span { background: var(--eroe-riempi); }
/* Le cifre grandi usano il carattere «numeri» del tema (con le grazie in Carta, da cruscotto in Ardesia) */
.dato .valore, .navigazione-anno strong { font-family: var(--carattere-numeri); }
@media (max-width: 1399px) and (min-width: 761px) {
  .riepilogo-mese { grid-template-columns: repeat(var(--tessere, 4), minmax(0, 1fr)); }
  .riepilogo .dato.principale {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "etichetta etichetta" "valore dettaglio"; align-items: baseline; column-gap: var(--s5);
  }
  .riepilogo .dato.principale .etichetta { grid-area: etichetta; }
  .riepilogo .dato.principale .valore { grid-area: valore; }
  .riepilogo .dato.principale .dettaglio { grid-area: dettaglio; }
}

/* ---------- 6. Pagine ---------- */
main { display: block; padding-bottom: 64px; }   /* in fondo, spazio per la testa dell'assistente che segue la pagina */
.scheda { min-width: 0; max-width: var(--larghezza-pagina); margin: 0 auto; padding: var(--s4) var(--s5) var(--s6); }
.scheda[hidden] { display: none; }
.colonna { display: flex; flex-direction: column; gap: var(--s4); width: 100%; margin: 0 auto; }
.pila { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
/* Carte affiancate: sempre alte uguali (chiesto dall'autore il 28 ottobre 2026: "non affiancare blocchi di altezze diverse").
   Nella versione semplice la seconda carta non c'è: una colonna sola. */
.due-carte { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s4); align-items: stretch; }
[data-versione="semplice"] .due-carte { grid-template-columns: minmax(0, 1fr); }
#tabella-anni th, #tabella-anni td { padding-inline: 10px; }

/* --- Piano --- */
.scheda-piano { display: flex; flex-direction: column; gap: var(--s3); }
.barra-piano { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.azioni-piano { margin-left: auto; }
.esito-conti {
  display: inline-flex; align-items: center; gap: var(--s2); flex: 0 1 auto; min-width: 0; cursor: default;
  padding: 4px 12px 4px 5px; border-radius: var(--r-pillola); border: 1px solid transparent; background: var(--superficie-2);
}
.esito-conti:empty { display: none; }
.simbolo-esito {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-weight: 800; font-size: calc(13px * var(--testo)); background: var(--velo); color: var(--inchiostro-2);
}
.testo-esito { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; line-height: 1.35; }
.testo-esito strong { font-size: calc(14.5px * var(--testo)); }
.testo-esito span { font-size: calc(13px * var(--testo)); color: var(--inchiostro-2); }
button.collegamento-esito {
  flex: none; min-height: 0; margin-left: 4px; padding: 2px 4px; background: none; border: 0; box-shadow: none;
  color: var(--accento-testo); font-size: calc(13.5px * var(--testo)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
button.collegamento-esito:hover { background: none; color: var(--accento-forte); }
.esito-conti.ko { background: var(--ko-sfondo); }
.esito-conti.ko .simbolo-esito { background: var(--ko); color: #fff; }
.esito-conti.ko strong { color: var(--ko-testo); }
.esito-conti.ok { background: var(--ok-sfondo); }
.esito-conti.ok .simbolo-esito { background: var(--ok); color: #fff; }
.esito-conti.ok strong { color: var(--ok-testo); }
.esito-conti.neutro .simbolo-esito { background: var(--accento-tenue); color: var(--accento-testo); }

.comandi-tabella { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); }
/* Scelta delle colonne di approfondimento: un interruttore per gruppo */
.colonne-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(13px * var(--testo)); color: var(--inchiostro-2); }
.colonne-extra > span { margin-right: 2px; font-weight: 550; }
.colonne-extra button {
  min-height: 30px; padding: 0 var(--s3); background: var(--superficie-2); color: var(--inchiostro-2);
  border: 1px solid transparent; border-radius: var(--r-pillola); font-size: calc(13px * var(--testo)); font-weight: 550; flex: none;
}
.colonne-extra button:hover { background: var(--velo); border-color: var(--linea-forte); color: var(--inchiostro); }
.colonne-extra button[aria-pressed="true"] { background: var(--accento-tenue); color: var(--accento-testo); font-weight: 650; }

/* La tabella del piano scorre dentro il suo riquadro (alto quanto lo schermo), con intestazione e prima colonna fisse */
.tabella-piano {
  max-height: calc(100vh - var(--alto-testata) - var(--alto-schede-basso) - var(--s5));
  max-height: calc(100dvh - var(--alto-testata) - var(--alto-schede-basso) - var(--s5));
  min-height: 320px; scroll-margin-top: calc(var(--alto-testata) + var(--s2));
}
#tabella-piano th { max-width: 116px; }
#tabella-piano tr.gruppi th {
  max-width: none; text-align: center; font-size: calc(11.5px * var(--testo)); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tenue); padding: 6px var(--s3) 4px; border-bottom: 1px solid var(--linea); font-weight: 650;
}
#tabella-piano tr.colonne th { padding-top: 6px; padding-bottom: 8px; }
#tabella-piano tr.gruppi th.apribile { cursor: pointer; }
#tabella-piano tr.gruppi th.apribile:hover { color: var(--inchiostro); background-image: linear-gradient(var(--velo), var(--velo)); }
#tabella-piano tr.gruppi .apri {
  display: inline-block; min-width: 20px; margin-left: 7px; padding: 0 6px; border: 1px solid var(--linea-forte); border-radius: var(--r-pillola);
  font-size: calc(10.5px * var(--testo)); letter-spacing: 0; color: var(--inchiostro-2); background: var(--superficie);
}
#tabella-piano .inizio-gruppo { border-left: 1px solid var(--linea-forte); }
#tabella-piano tr.colonne th:first-child, #tabella-piano td:first-child { position: sticky; left: 0; border-right: 1px solid var(--linea-forte); }
#tabella-piano td:first-child { z-index: 1; font-weight: 600; }
#tabella-piano td { padding-block: 8px; }
/* Righe zebra leggere (solo i mesi senza stato) */
#tabella-piano tbody tr:nth-child(even):not([class*="stato-"]) td { background-color: var(--zebra); }
/* Colore della riga secondo lo stato: pagata, da controllare, in corso (i mesi futuri restano neutri) */
#tabella-piano tr.stato-pagata td { background-color: var(--riga-pagata); }
#tabella-piano tr.stato-problema td { background-color: var(--riga-problema); }
#tabella-piano tr.stato-corso td { background-color: var(--riga-corso); }
#tabella-piano tr.stato-pagata td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
#tabella-piano tr.stato-problema td:first-child { box-shadow: inset 3px 0 0 var(--ko); }
#tabella-piano tr.stato-corso td:first-child { box-shadow: inset 3px 0 0 var(--corso); }
#tabella-piano .segno { display: inline-block; width: 14px; font-size: calc(12px * var(--testo)); font-weight: 800; text-align: center; }
#tabella-piano tr.stato-pagata .segno { color: var(--ok-testo); }
#tabella-piano tr.stato-problema .segno { color: var(--ko-testo); }
#tabella-piano tr.stato-corso .segno { color: var(--corso-testo); }
#tabella-piano th.banda { background-image: linear-gradient(var(--velo-banda), var(--velo-banda)); }
#tabella-piano tbody tr:hover td { background-image: linear-gradient(var(--velo), var(--velo)); }
#tabella-piano tr.gennaio td { border-top: 1px solid var(--linea-forte); }
/* Numeri: unità di misura attenuate, colonne di contorno più chiare, colonne chiave più marcate */
#tabella-piano .unita { color: var(--tenue); }
#tabella-piano .numero { display: inline-block; min-width: 26px; margin-right: 8px; color: var(--tenue); font-size: calc(12px * var(--testo)); font-weight: 400; text-align: right; }
#tabella-piano td.minore { color: var(--inchiostro-2); }
#tabella-piano td.forte { font-weight: 650; }
/* Mesi futuri in grigio; i valori stimati anche in corsivo */
#tabella-piano tr.futura td { color: var(--inchiostro-2); }
#tabella-piano tr.futura td.minore { color: var(--tenue); }
#tabella-piano td.previsione { font-style: italic; }
#tabella-piano td .freccia { font-size: calc(12px * var(--testo)); font-weight: 700; }
#tabella-piano td .freccia.grande { font-size: calc(17px * var(--testo)); font-weight: 900; }
/* Mese corrente: barra d'accento a sinistra e grassetto, qualunque sia il suo stato */
#tabella-piano tr.corrente td { color: var(--inchiostro); font-weight: 650; border-top: 1px solid color-mix(in srgb, var(--corso) 45%, transparent); border-bottom-color: color-mix(in srgb, var(--corso) 45%, transparent); }
#tabella-piano tr.corrente td:first-child { box-shadow: inset 5px 0 0 var(--corso); }
/* Esito del confronto con la banca: etichetta chiara con bordo, leggibile su qualunque colore di riga */
.esito { display: inline-block; padding: 1px 9px; margin: -2px -8px -2px 0; border: 1px solid; border-radius: var(--r-pillola); background: var(--superficie); font-weight: 650; }
.esito .unita { color: inherit !important; opacity: 0.75; }
td.ok .esito { color: var(--ok-testo); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
td.ko .esito { color: var(--ko-testo); border-color: color-mix(in srgb, var(--ko) 55%, transparent); }
td.copiata .esito { color: var(--inchiostro-2); border-color: color-mix(in srgb, var(--inchiostro-2) 40%, transparent); font-weight: 450; }
td.avviso .esito { color: var(--avviso-testo); border-color: color-mix(in srgb, var(--avviso-testo) 45%, transparent); }
/* Barretta del debito rimanente */
.barretta { display: inline-block; width: 36px; height: 5px; margin-right: 8px; border-radius: 3px; background: var(--traccia); vertical-align: middle; overflow: hidden; }
.barretta i { display: block; height: 100%; border-radius: 3px; background: var(--accento); }

/* Composizione del versato (riepilogo, «Pagato finora»): tre parti separate da uno spazio */
.composizione { display: flex; gap: 2px; height: 10px; margin: 0 0 var(--s2); }
.composizione span { flex: 0 1 0; min-width: 3px; border-radius: 3px; }
.capitale { background: var(--parte-capitale); }
.interessi { background: var(--parte-interessi); }
.spese { background: var(--parte-spese); }
.pallino { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 3px; }

/* --- Tassi --- */
.filtri-tassi { justify-content: flex-start; }
.date-filtro { display: flex; gap: var(--s3); flex-wrap: wrap; }
.date-filtro input { min-height: 36px; }
.carta-grafico { padding: var(--s5) var(--s5) 0; }
.carta-grafico > .intestazione-carta { align-items: center; }
.carta-grafico h2 { font-size: calc(20px * var(--testo)); }
.legenda-grafico { font-size: calc(13px * var(--testo)); }
.grafico { position: relative; margin: 0 calc(-1 * var(--s2)); }
.grafico svg { display: block; width: 100%; border-radius: var(--r1); touch-action: pan-y; }
.grafico > .nota { margin: var(--s4) var(--s2); }
.grafico .griglia { stroke: var(--linea); stroke-width: 1; }
.grafico .asse { stroke: var(--linea-forte); stroke-width: 1; }
.grafico text { fill: var(--tenue); font-size: calc(12px * var(--testo)); font-variant-numeric: tabular-nums; }
.grafico text.finale { fill: var(--inchiostro); font-size: calc(13px * var(--testo)); font-weight: 700; }
.grafico .linea { fill: none; stroke: var(--serie); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .tendenza { stroke: var(--tenue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico .media { stroke: var(--tenue); stroke-width: 1.2; stroke-dasharray: 1 4; stroke-linecap: round; }
.grafico .punto { fill: var(--serie); stroke: var(--superficie); stroke-width: 2; }
.grafico .usato { fill: var(--superficie); stroke: var(--serie); stroke-width: 1.5; }
.grafico .usato.fitto { fill: var(--serie); stroke: none; }
.grafico text.estremo { fill: var(--inchiostro-2); }
/* Le cifre dentro il disegno (minimo, massimo, ultimo valore, fine della proiezione) hanno intorno un bordo del colore
   della carta: restano leggibili anche quando ci passa sotto una linea o una fascia. */
.grafico text.estremo, .grafico text.finale { paint-order: stroke; stroke: var(--carta-sfondo); stroke-width: 4px; stroke-linejoin: round; }
.grafico .mirino { stroke: var(--linea-forte); stroke-width: 1; }
/* Proiezione: fasce di confidenza e linea tratteggiata */
.grafico .banda95 { fill: var(--serie); opacity: 0.1; }
.grafico .banda80 { fill: var(--serie); opacity: 0.2; }
.grafico .proiezione { fill: none; stroke: var(--accento); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.grafico .separatore { stroke: var(--linea-forte); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico .scenario { fill: none; stroke: var(--accento); stroke-width: 1.6; stroke-dasharray: 2 3; }
.grafico text.proiezione-testo { fill: var(--accento-testo); }
.fumetto {
  position: absolute; z-index: 4; pointer-events: none; background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r2); box-shadow: var(--ombra-alta); padding: var(--s2) var(--s3); font-size: calc(13px * var(--testo)); white-space: nowrap;
}
.fumetto strong { display: block; font-size: calc(15px * var(--testo)); }
.fumetto span { display: block; color: var(--inchiostro-2); }
.fumetto .in-evidenza { color: var(--accento-testo); font-weight: 650; }

/* Proiezione: una riga di riepilogo sotto il grafico, il modulo si apre con «Cambia» */
.pannello-proiezione { margin: var(--s3) calc(-1 * var(--s5)) 0; border-top: 1px solid var(--linea); }
.pannello-proiezione > details > summary { padding: var(--s3) var(--s5); border-radius: 0 0 var(--r3) var(--r3); }
.pannello-proiezione > details[open] > summary { border-radius: 0; border-bottom: 1px solid var(--linea); background: var(--superficie-2); }
.pannello-proiezione > details > summary:hover { background: var(--superficie-2); }
.pannello-proiezione .titolo-sommario { font-size: calc(12px * var(--testo)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.riassunto-proiezione .voce-riassunto { display: inline; }
.riassunto-proiezione .voce-riassunto + .voce-riassunto::before { content: "·"; margin: 0 var(--s2); color: var(--tenue); }
.riassunto-proiezione b { color: var(--inchiostro); font-weight: 650; }
.corpo-proiezione {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "comandi futuro" "esito esito";
  gap: var(--s4) var(--s5); padding: var(--s5);
}
.comandi-proiezione { grid-area: comandi; min-width: 0; }
.comandi-proiezione .campi { margin-bottom: var(--s3); }
.descrizione-modello { padding: var(--s2) var(--s3); border-left: 3px solid var(--accento); background: var(--superficie-2); border-radius: 0 var(--r1) var(--r1) 0; }
.descrizione-modello:empty { display: none; }
.rate-future { grid-area: futuro; min-width: 0; margin: 0; padding: var(--s4); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie-2); }
.rate-future h3 { margin: 0 0 var(--s2); }
.rate-future .campi { margin-bottom: var(--s3); }
.rate-future .azioni { margin-top: var(--s1); }
.esito-previsione { grid-area: esito; min-width: 0; }
.esito-previsione:empty { display: none; }
#parametri-previsione:empty { display: none; }
#parametri-previsione label.spunta { grid-column: 1 / -1; }
#esito-previsione h3 { margin: var(--s4) 0 var(--s2); font-size: calc(16px * var(--testo)); }
#esito-previsione > h3:first-child { margin-top: 0; }
.frasi { margin: var(--s2) 0 var(--s3); padding-left: 20px; font-size: calc(14px * var(--testo)); color: var(--inchiostro-2); }
.frasi li { margin: 5px 0; }
.frasi li::marker { color: var(--accento); }
.tabella-previsione td, .tabella-previsione th { font-variant-numeric: tabular-nums; }
.tabella-previsione tr.migliore td { font-weight: 650; background: var(--riga-pagata); }
.tabella-previsione td.testo { color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); white-space: normal; }
#esito-confronto .tabella-previsione { margin: 0; width: 100%; }
#esito-confronto .contenitore-tabella, #esito-confronto > table { margin: var(--s3) 0; }
.tabella-previsione.scenari th:first-child { text-align: left; font-weight: 500; color: var(--inchiostro-2); background: var(--superficie); position: sticky; left: 0; z-index: 1; min-width: 150px; border-right: 1px solid var(--linea); }
.tabella-previsione.scenari thead th:first-child { background: var(--testata-tabella); }
.tabella-previsione.scenari td { text-align: right; white-space: nowrap; }
.tabella-previsione.scenari thead th { text-align: right; }
.tabella-previsione.scenari thead th:nth-child(3), .tabella-previsione.scenari td:nth-child(3) { font-weight: 650; color: var(--inchiostro); }
#esito-previsione details { margin: var(--s2) 0; }
#esito-previsione details .contenitore-tabella { margin-top: var(--s2); max-height: 360px; }
#esito-confronto { overflow-x: auto; }

/* Statistiche del periodo: sotto il grafico, compatte */
.statistiche {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; align-items: stretch;
  background: var(--superficie); border: 1px solid var(--linea-forte); border-radius: var(--r2); overflow: hidden;
}
.statistiche > .nota { grid-column: 1 / -1; margin: 0; padding: var(--s2) var(--s3); }
.statistiche .dato { padding: 10px var(--s3); background: var(--superficie); border: 0; border-radius: 0; box-shadow: none; outline: 1px solid var(--linea-forte); }
.statistiche .dato .valore { font-size: min(calc(17px * var(--testo)), max(17px, var(--largo-cifra, 999px))); }
.statistiche .dato .etichetta, .statistiche .dato .dettaglio { font-size: calc(12.5px * var(--testo)); }
.statistiche .dato .dettaglio { white-space: normal; line-height: 1.4; }

/* Valori dell'indice: internet, a mano, incollati */
.carta-valori > h2 { margin-bottom: var(--s3); }
.sezione-valori { padding: var(--s4) 0; border-top: 1px solid var(--linea); }
.sezione-valori:last-child { padding-bottom: 0; }
.sezione-valori h3 { margin-bottom: var(--s2); }
details.sezione-valori > summary { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)); padding: var(--s2); }
details.sezione-valori > summary:hover { background: var(--superficie-2); }
.riga-comandi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.campo-in-linea { display: flex; flex-direction: column; gap: 6px; font-size: calc(14px * var(--testo)); font-weight: 600; }
.blocco-avviso:empty { display: none; }
.blocco-avviso { margin-bottom: var(--s3); padding: var(--s3) var(--s4); background: var(--accento-tenue); border-radius: var(--r2); }
.blocco-avviso .nota { color: var(--inchiostro); margin-bottom: var(--s2); }
#form-internet .blocco .elenco-date { display: block; }
#form-internet .blocco .elenco-date li { margin: 2px 0; font-size: calc(13.5px * var(--testo)); color: var(--inchiostro-2); }
.scaricati:not(:empty) { margin-top: var(--s3); }
.scaricati .contenitore-tabella { box-shadow: none; margin-bottom: var(--s3); max-height: 330px; }
#tabella-tassi { width: 100%; }
#tabella-tassi th, #tabella-tassi td { padding-right: var(--s3); }
#tabella-tassi td.azione, #tabella-tassi th:last-child { padding-right: var(--s3); }

/* --- Calendario --- */
.colonna.larga { max-width: none; }
.filtri-calendario { gap: var(--s3) var(--s5); }
.navigazione-anno { display: flex; align-items: center; gap: var(--s2); }
.navigazione-anno strong { min-width: 60px; text-align: center; font-size: calc(20px * var(--testo)); font-variant-numeric: tabular-nums; }
.pulsante-quadrato { width: var(--alto-controllo); padding: 0; font-size: calc(12px * var(--testo)); }
.legenda-calendario { flex: 1 1 400px; }
.calendario { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.mesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s3); }
.mese { background: var(--carta-sfondo); border: var(--spessore) solid var(--bordo); border-radius: var(--r2); padding: var(--s3) var(--s3) var(--s3); box-shadow: var(--ombra); }
.mese.corrente { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento), var(--ombra); }
.mese h3 { margin: 0 0 var(--s2) 4px; font-size: calc(14px * var(--testo)); font-weight: 700; text-transform: capitalize; }
.griglia-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.griglia-giorni .intestazione { font-size: calc(11px * var(--testo)); font-weight: 600; color: var(--tenue); text-align: center; padding-bottom: 3px; }
.giorno {
  display: grid; place-items: center; min-height: 0; height: 30px; padding: 0; background: none; color: var(--inchiostro);
  border: 1px solid transparent; border-radius: 7px; font-size: calc(13px * var(--testo)); font-weight: 450; font-variant-numeric: tabular-nums;
}
button.giorno:hover { border-color: var(--tenue); }
.giorno.fine-settimana { background: var(--testata-tabella); color: var(--tenue); }
.giorno.contato { background-image: linear-gradient(var(--accento), var(--accento)); background-size: 12px 2px; background-position: center bottom 3px; background-repeat: no-repeat; }
.giorno.festa { background-color: var(--ko-sfondo); color: var(--ko-testo); font-weight: 700; }
.giorno.sostituita { border: 1px dashed var(--accento); }
.giorno.riferimento { font-weight: 750; }
.giorno.riferimento.presente { background: var(--accento); color: var(--su-accento); }
.giorno.riferimento.mancante { background: var(--avviso-sfondo); color: var(--avviso-testo); border-color: currentColor; }
.giorno.riferimento.futuro { background: var(--accento-tenue); color: var(--accento-testo); border-color: var(--accento); }
.giorno.oggi { outline: 2px solid var(--inchiostro); outline-offset: -2px; }
.giorno.scelto { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--accento); }
.campione-giorno { width: 26px; height: 22px; font-size: calc(11.5px * var(--testo)); flex: none; }
.lato-calendario { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: calc(var(--alto-testata) + var(--s4)); }
.lato-calendario h2 { font-size: calc(16px * var(--testo)); }
.lato-calendario h3 { margin: 0 0 6px; font-size: calc(16px * var(--testo)); font-weight: 700; }
.lato-calendario h3::first-letter { text-transform: uppercase; }
.lato-calendario .carta { padding: var(--s4); }
.dettaglio-giorno { border-color: color-mix(in srgb, var(--accento) 25%, var(--bordo)); }
.righe-dettaglio { margin: 0 0 var(--s3); padding-left: 18px; font-size: calc(14px * var(--testo)); }
.righe-dettaglio li + li { margin-top: 4px; }
.elenco-calendario { font-size: calc(13.5px * var(--testo)); }
.elenco-calendario td { padding: 6px; cursor: pointer; }
.elenco-calendario tr.scelta td { background-color: var(--accento-tenue); }

/* --- Festività --- */
#tabella-festivita td, #tabella-festivita th { padding-block: 7px; }
#tabella-festivita th:first-child, #tabella-festivita td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--linea); font-weight: 650; }
#tabella-festivita tbody tr:nth-child(even) td { background-color: var(--zebra); }
#tabella-festivita tr.corrente td { background-color: var(--corrente-sfondo); font-weight: 650; }
.tabella-festivita { max-height: calc(100dvh - var(--alto-testata) - var(--alto-schede-basso) - 200px); min-height: 300px; }
.festa { display: inline-flex; align-items: center; gap: 2px; margin-right: var(--s2); color: var(--inchiostro); }
.festa button { min-height: 0; height: 22px; width: 22px; padding: 0; background: none; color: var(--tenue); border: 0; border-radius: 50%; font-size: calc(15px * var(--testo)); line-height: 1; visibility: hidden; }
tr:hover .festa button, .festa button:focus-visible { visibility: visible; }
.festa button:hover { color: var(--ko-testo); background: var(--ko-sfondo); }

/* --- Pannello di controllo --- */
.pannello { max-width: 1120px; gap: var(--s5); }
.carta-dati { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); }
.carta-dati .testo-dati { flex: 1 1 360px; min-width: 0; }
.carta-dati .nota { margin: 0; }
.carta-dati .nota + .nota { margin-top: var(--s2); }
.gruppo-pannello { display: flex; flex-direction: column; gap: var(--s4); }
.gruppo-pannello > .nota { margin: calc(-1 * var(--s3)) 0 0; }
.titolo-gruppo { margin: 0; font-size: calc(13px * var(--testo)); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tenue); }
.griglia-pannello { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }   /* affiancate, alte uguali */
#gruppo-ritocchi .griglia-pannello { grid-template-columns: minmax(0, 1fr); }   /* «Valori a mano» è lungo e «Rata ideale» corto: una sotto l'altra */
.pannello .carta h3 { font-size: calc(17px * var(--testo)); margin-bottom: var(--s2); }
/* Regole del contratto: i campi a gruppi, come i passi della guida (configura.js, GRUPPI_REGOLE). Titolo e spiegazione
   a sinistra, i campi a destra su due colonne; sotto i 900 px tutto in colonna. Ogni gruppo è separato da una riga. */
.gruppi-regole { display: flex; flex-direction: column; margin: var(--s2) 0 var(--s4); }
.gruppo-regole { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: var(--s3) var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--linea); }
.gruppo-regole[hidden] { display: none; }
.gruppo-regole h4 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); font-family: var(--carattere-titoli); font-size: calc(15.5px * var(--testo)); font-weight: var(--peso-titoli); letter-spacing: var(--spaziatura-titoli); }
.gruppo-regole h4 .icona-titolo { width: 1.1em; height: 1.1em; flex: none; color: var(--accento); }
.gruppo-regole .testa-gruppo-regole .nota { margin: 0; font-size: calc(13.5px * var(--testo)); }
.gruppo-regole .campi { margin: 0; align-items: start; }   /* in alto, non in fondo: con le spiegazioni lunghe i campi sarebbero sfalsati */
@media (max-width: 900px) {
  .gruppo-regole { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; }
}
#campi-regole { align-items: start; gap: var(--s4) var(--s5); }
.tabella-taratura td { white-space: normal; vertical-align: top; padding-block: 10px; }
.tabella-taratura td:nth-child(2) { white-space: nowrap; }
.tabella-taratura small { color: var(--inchiostro-2); }

/* ---------- 7. Configurazione guidata ---------- */
.configurazione { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s6) var(--s5) var(--s7); }
.guida { width: 100%; max-width: 780px; padding: var(--s5) var(--s6) var(--s6); }
.guida h2 { font-size: calc(24px * var(--testo)); margin-bottom: var(--s2); letter-spacing: -0.015em; }
.guida h3 { margin: var(--s5) 0 var(--s2); font-size: calc(15.5px * var(--testo)); }
/* Passi: pallini numerati, il titolo solo per quello attivo */
.passi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s5); padding: 0 0 var(--s4); list-style: none; counter-reset: passo; border-bottom: 1px solid var(--linea); font-size: calc(14px * var(--testo)); color: var(--tenue); }
.passi li { display: flex; align-items: center; gap: var(--s2); counter-increment: passo; cursor: default; }
.passi li::before {
  content: counter(passo); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--linea-forte); background: var(--superficie); font-size: calc(12.5px * var(--testo)); font-weight: 700;
}
.passi li span { display: none; }
.passi li.attivo span { display: inline; margin-right: var(--s2); }
.passi li.attivo { color: var(--inchiostro); font-weight: 700; }
.passi li.attivo::before { background: var(--accento); border-color: var(--accento); color: var(--su-accento); box-shadow: 0 0 0 4px var(--accento-tenue); }
.passi li.fatto::before { content: "✓"; background: var(--accento-tenue); border-color: var(--accento); color: var(--accento-testo); }
.passi li.raggiunto:not(.attivo) { cursor: pointer; }
.passi li.raggiunto:not(.attivo):hover::before { border-color: var(--accento); }
.conta-passi { margin: 0 0 var(--s1); font-size: calc(12.5px * var(--testo)); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accento-testo); }
#testo-passo { font-size: calc(15px * var(--testo)); margin-bottom: var(--s5); }
#campi-passo > p { font-size: calc(15px * var(--testo)); margin: 0 0 var(--s2); }
/* Una domanda per volta, con la spiegazione sotto */
.domanda { margin-bottom: var(--s5); }
.domanda[hidden] + .domanda { margin-top: 0; }
.titolo-domanda { display: block; margin-bottom: var(--s2); font-size: calc(16px * var(--testo)); font-weight: 700; }
.domanda > input { width: 100%; max-width: 360px; min-height: 44px; font-size: calc(16px * var(--testo)); }
.domanda .scelte { display: flex; flex-direction: column; gap: var(--s2); }
.domanda label.scelta, .campi label.scelta {
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--linea-forte); border-radius: var(--r2); background: var(--superficie); font-size: calc(14px * var(--testo)); font-weight: 400; cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.domanda label.scelta:hover, .campi label.scelta:hover { border-color: var(--tenue); }
.domanda label.scelta:has(input:checked), .campi label.scelta:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); box-shadow: inset 0 0 0 1px var(--accento); }
.scelta input[type="radio"] { flex: none; margin: 2px 0 0; }
.scelta span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scelta strong { font-weight: 650; font-size: calc(15px * var(--testo)); }
.domanda .scelta small, .campi .scelta small { font-size: calc(13.5px * var(--testo)); color: var(--inchiostro-2); }
.domanda .scelta input[type="text"] { margin-top: var(--s2); width: 100%; max-width: 320px; }
fieldset.scelte { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
fieldset.scelte legend { padding: 0; margin-bottom: var(--s2); font-size: calc(14px * var(--testo)); font-weight: 600; }
.campo small { font-weight: 400; color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); }
.guida .campi > label.campo input { max-width: 360px; }
/* Spiegazione: riquadro calmo con una barra d'accento */
.spiegazione {
  margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--superficie-2);
  border: 1px solid var(--linea); border-left: 3px solid color-mix(in srgb, var(--accento) 55%, var(--linea-forte));
  border-radius: 0 var(--r2) var(--r2) 0; font-size: calc(14px * var(--testo)); line-height: 1.55; color: var(--inchiostro-2);
}
.spiegazione p { margin: 0; }
.spiegazione p + p { margin-top: 6px; }
.spiegazione b { color: var(--inchiostro); font-weight: 650; }
.spiegazione:empty { display: none; }
.spiegazione p + p:has(> button) { margin-top: var(--s3); }
.spiegazione .evidenza-ok { color: var(--ok-testo); font-weight: 650; }
.documenti { margin: 0 0 var(--s2); padding-left: 22px; font-size: calc(15px * var(--testo)); }
.documenti li + li { margin-top: var(--s2); }
.documenti li::marker { color: var(--accento); }
details.avanzate .domanda:last-child { margin-bottom: 6px; }
.domanda + .spunta, .scelte + .spunta { margin-top: var(--s3); }
.riepilogo-guida { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0; padding: var(--s4); background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r2); font-size: calc(14px * var(--testo)); }
.riepilogo-guida dt { color: var(--inchiostro-2); }
.riepilogo-guida dd { margin: 0; font-weight: 600; }
.riepilogo-guida + .nota { margin-top: var(--s3); }
.dopo { margin: 0 0 var(--s4); padding-left: 22px; font-size: calc(14.5px * var(--testo)); color: var(--inchiostro-2); }
.dopo li + li { margin-top: 6px; }
.consiglio { margin: 0 0 var(--s3); padding: var(--s4); border: 1px solid var(--accento); border-radius: var(--r2); background: var(--accento-tenue); }
.consiglio p { margin: 0 0 var(--s2); font-size: calc(14px * var(--testo)); }
.consiglio .riepilogo-guida { margin-bottom: var(--s3); background: var(--superficie); }
/* Rate già pagate nella guida */
.tabella-rate { max-height: 400px; margin-bottom: var(--s3); }
.tabella-rate + .spiegazione, #altre-rate + .spiegazione { margin-top: var(--s3); }
.tabella-rate td { padding-block: 4px; }
.tabella-rate td input { width: 100%; min-width: 120px; min-height: 34px; text-align: right; }
.tabella-rate + .spunta, #altre-rate + .tabella-rate { margin-top: var(--s3); }
/* Percorso breve: data della prima rata, durata in anni, passaggio al percorso completo */
.domanda > input + .spunta, .domanda > input + .nota { margin-top: var(--s2); }
#durata-anni:empty { display: none; }
button.collegamento {
  display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--accento); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: normal; text-align: left;
}
button.collegamento:hover { background: none; color: var(--accento-forte); }
/* «Ci penso io»: attesa con la barra di avanzamento, esito con l'icona, domande e correzioni */
.attesa { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie-2); }
.attesa > div { flex: 1; min-width: 0; }
.attesa p { margin: 0 0 var(--s3); font-size: calc(15px * var(--testo)); }
.attesa progress { width: 100%; height: 8px; accent-color: var(--accento); }
.rotella { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 3px solid var(--accento); border-right-color: transparent; }
.guida h3.esito-analisi { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: calc(18px * var(--testo)); }
.esito-analisi .icona { width: 24px; height: 24px; }
.esito-analisi.riuscito .icona { color: var(--ok-testo); }
.esito-analisi.quasi .icona { color: var(--avviso-testo); }
#campi-passo > p { max-width: 68ch; }
#campi-passo > details { margin-top: var(--s4); }
#campi-passo > .contenitore-tabella { margin-bottom: var(--s3); }
#campi-passo > details > summary { cursor: pointer; font-size: calc(14.5px * var(--testo)); font-weight: 600; color: var(--accento); }
#campi-passo > details[open] > summary { margin-bottom: var(--s3); }
.correggi-analisi .campi { margin: var(--s3) 0; max-width: 520px; }
.domanda > .campi { margin-bottom: var(--s3); max-width: 520px; }
/* Pulsanti della guida: Avanti a destra, sempre a portata */
.azioni-guida { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linea); }
.azioni-guida #guida-indietro { order: 1; }
.azioni-guida #guida-annulla { order: 2; }
.azioni-guida #guida-carica { order: 3; }
.azioni-guida #guida-avanti { order: 4; margin-left: auto; min-width: 140px; }
.configurazione > .piede { max-width: 640px; }

/* Variante "in un unico file" (archiviata): schermata di apertura e pulsante di salvataggio */
#salva-dati { margin-left: auto; }
#salva-dati + #apri-configurazione { margin-left: 0; }
.file-trovato { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--velo); font-size: calc(14px * var(--testo)); }
.file-trovato strong { font-size: calc(16px * var(--testo)); }
.file-trovato span { color: var(--inchiostro-2); }
#apertura .azioni { margin-top: 16px; }

/* Scheda «Prestiti» (prestiti.js): una carta per prestito, i totali in testa */
.intestazione-prestiti { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); }
.intestazione-prestiti > div { flex: 1 1 360px; }
.intestazione-prestiti h2 { margin: 0 0 var(--s1); }
.intestazione-prestiti .nota { margin: 0; }
.blocco-prestiti { display: flex; flex-direction: column; gap: var(--s4); }
.elenco-prestiti { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); }
.carta-prestito { display: flex; flex-direction: column; gap: var(--s3); }
.carta-prestito.aperto { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento), var(--ombra); }
.carta-prestito header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.carta-prestito h3 { margin: 0; font-size: calc(18px * var(--testo)); }
.carta-prestito header .nota { margin: 2px 0 0; }
.etichetta-aperto { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--accento-tenue); color: var(--accento); font-size: calc(12.5px * var(--testo)); font-weight: 650; }
.numeri-prestito { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); }
.numeri-prestito .dato { padding: 0; background: none; border: 0; box-shadow: none; min-width: 0; }
.numeri-prestito .dato .valore { font-size: calc(19px * var(--testo)); }
.carta-prestito .avanzamento { margin-top: 0; }
.carta-prestito .azioni { margin-top: auto; }
.carta-prestito .azioni .pericoloso { margin-left: auto; }
.totali-prestiti h2 { margin: 0 0 var(--s3); font-size: calc(17px * var(--testo)); }
@media (max-width: 760px) {
  .elenco-prestiti { grid-template-columns: minmax(0, 1fr); }
  #aggiungi-prestito { width: 100%; }
}

/* Confronto di offerte (offerte.js): tabella con una colonna per offerta, poi una carta per offerta */
.scorri-offerte { overflow-x: auto; margin: 0 calc(-1 * var(--s2)); }
.tabella-offerte { border-collapse: collapse; font-size: calc(14.5px * var(--testo)); min-width: 100%; }
.tabella-offerte th, .tabella-offerte td { padding: 9px var(--s3); border-bottom: 1px solid var(--linea); vertical-align: top; text-align: right; }
.tabella-offerte tbody th { text-align: left; font-weight: 500; min-width: 170px; position: sticky; left: 0; background: var(--carta-sfondo); }
.tabella-offerte th small, .tabella-offerte td small { display: block; color: var(--tenue); font-weight: 400; font-size: calc(12.5px * var(--testo)); }
/* Le note sotto le cifre vanno a capo (quelle del tasso misto sono lunghe): le cifre restano su una riga. */
.tabella-offerte td small { white-space: normal; }
.tabella-offerte thead th { font-size: calc(15px * var(--testo)); font-weight: 700; white-space: nowrap; }
.tabella-offerte thead .etichetta-aperto { display: block; width: max-content; margin: 4px 0 0 auto; }
.tabella-offerte td { min-width: 150px; font-variant-numeric: tabular-nums; }
.tabella-offerte .migliore { background: var(--accento-tenue); }
.tabella-offerte td.manca { color: var(--tenue); }
/* Le offerte a famiglie (offerte.js, FAMIGLIE): titolo con il conteggio e una riga di spiegazione, la carta del confronto
   (in cima la scelta di quali offerte confrontare, con i pulsanti delle colonne del piano), poi le carte. */
.gruppo-offerte { display: flex; flex-direction: column; gap: var(--s4); }
.gruppo-offerte + .gruppo-offerte { margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--linea); }
.testa-gruppo-offerte h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); font-size: calc(18px * var(--testo)); }
.testa-gruppo-offerte h3 .icona-titolo { width: 1.1em; height: 1.1em; flex: none; color: var(--accento); }
.testa-gruppo-offerte .conta-offerte { font-size: calc(13.5px * var(--testo)); font-weight: 500; color: var(--tenue); }
.testa-gruppo-offerte .nota { margin: 0; max-width: 820px; }
.scelta-confronto { padding-bottom: var(--s3); border-bottom: 1px solid var(--linea); }
.scelta-confronto .tutte-confronto { border-style: dashed; }
.carta-offerta.fuori-confronto { border-style: dashed; }
.carta-offerta.fuori-confronto .numeri-prestito, .carta-offerta.fuori-confronto .riga-offerta { opacity: 0.6; }
.carta-offerta .azioni button[data-confronta][aria-pressed="true"] { background: var(--accento-tenue); border-color: var(--accento); color: var(--accento-testo); }
.confronto-offerte { display: flex; flex-direction: column; gap: var(--s3); }
.confronto-offerte .nota { margin: 0; }
.confronto-offerte .campo-in-linea { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: calc(14px * var(--testo)); font-weight: 600; }
.modello-offerte { width: auto; max-width: 100%; }
.carta-offerta { display: flex; flex-direction: column; gap: var(--s3); }
.carta-offerta h3 { margin: 0; }
.carta-offerta .campi { margin: 0; }
.carta-offerta .azioni .pericoloso { margin-left: auto; }
/* Le offerte come i prestiti: un riassunto per carta; il modulo di quella che si sta cambiando prende tutta la riga. */
.carta-offerta .riga-offerta { margin: 0; font-size: calc(13.5px * var(--testo)); }
.carta-offerta.in-modifica { grid-column: 1 / -1; scroll-margin-top: calc(var(--alto-testata) + var(--s2)); }
.carta-offerta.in-modifica > .nota { margin: 0; }

/* La maxirata nel piano: l'ultima riga di un finanziamento con maxirata finale */
.etichetta-maxirata { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--accento-tenue); color: var(--accento); font-size: calc(11.5px * var(--testo)); font-weight: 650; vertical-align: 1px; }

/* Quanto costa il prestito (costi.js), nel pannello di controllo */
.carta-costo { display: flex; flex-direction: column; gap: var(--s3); }
.carta-costo h3 { margin: 0; }
.carta-costo .nota { margin: 0; }
.tabella-costi { width: 100%; max-width: 720px; border-collapse: collapse; font-size: calc(14.5px * var(--testo)); }
.tabella-costi th, .tabella-costi td { padding: 8px var(--s2); border-bottom: 1px solid var(--linea); vertical-align: top; background: none; }
.tabella-costi th { text-align: left; font-weight: 500; color: var(--inchiostro); }
.tabella-costi th small { display: block; color: var(--tenue); font-weight: 400; font-size: calc(12.5px * var(--testo)); }
.tabella-costi td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--carattere-numeri); }
.tabella-costi tr.totale th, .tabella-costi tr.totale td { font-weight: 700; }
#form-estinzione { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3) var(--s4); align-items: start; max-width: 960px; }
.scelte-in-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0; padding: 0; border: 0; min-width: 0; }
.scelte-in-linea legend { width: 100%; padding: 0; margin-bottom: var(--s1); font-size: calc(14px * var(--testo)); font-weight: 600; }
.scelte-in-linea input[type="text"] { width: 100%; }
.scelte-in-linea label.spunta { flex-direction: row; align-items: center; padding: 8px var(--s3); }
.scelte-in-linea label.spunta input { width: 18px; margin: 0; }

/* ---------- 9. Struttura e temi: barra laterale, selettore dei temi, ritocchi per tema ---------- */

/* Schermi larghi: la navigazione diventa una barra laterale fissa (solo con il mutuo configurato: durante la guida
   resta la testata in alto). Le misure che dipendono dall'altezza della testata la trovano a zero. */
@media (min-width: 1100px) {
  :root:has(.schede:not([hidden])) { --alto-testata: 0px; }
  body:has(.schede:not([hidden])) { padding-left: var(--larghezza-lato); }
  body:has(.schede:not([hidden])) .testata {
    position: fixed; inset: 0 auto 0 0; width: var(--larghezza-lato); z-index: 25;
    border-bottom: 0; border-right: var(--spessore) solid var(--linea);
    background: var(--testata); overflow-y: auto; overflow-x: hidden;
  }
  body:has(.schede:not([hidden])) .testata-interno {
    flex-direction: column; align-items: stretch; gap: var(--s5); height: 100%; min-height: 0; max-width: none; margin: 0;
    padding: var(--s5) var(--s4) var(--s4);
  }
  body:has(.schede:not([hidden])) .marchio { padding: 0 var(--s2); gap: 12px; }
  body:has(.schede:not([hidden])) .marchio .logo { width: 40px; height: 40px; border-radius: var(--r2); font-size: calc(19px * var(--testo)); }
  body:has(.schede:not([hidden])) h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: calc(16.5px * var(--testo)); line-height: 1.25; }
  body:has(.schede:not([hidden])) .schede { flex-direction: column; align-self: stretch; gap: 4px; }
  body:has(.schede:not([hidden])) .schede button {
    justify-content: flex-start; min-height: 46px; padding: 0 var(--s3); gap: 12px;
    border-radius: var(--r2); font-size: calc(15px * var(--testo)); font-weight: 600; color: var(--inchiostro-2);
  }
  body:has(.schede:not([hidden])) .schede button .icona { display: block; width: 21px; height: 21px; }
  body:has(.schede:not([hidden])) .schede button {
    display: grid; grid-template-columns: 21px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-content: center; padding-top: 7px; padding-bottom: 7px; text-align: left;
  }
  body:has(.schede:not([hidden])) .schede button .icona { grid-row: 1 / span 2; align-self: center; }
  /* Tre livelli, rientrati, con le linee guida: «Prestiti» → il prestito aperto (in un riquadro, con la × per chiuderlo
     e «Prestito aperto» sotto il nome) → le sue pagine */
  body:has(.schede:not([hidden])) .ramo-prestito:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px; margin: 2px 0 var(--s2) 18px; padding-left: 8px; border-left: 2px solid var(--linea);
  }
  body:has(.schede:not([hidden])) .ramo-prestito button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px var(--s2); text-align: left;
    font-size: calc(14px * var(--testo)); font-weight: 600; color: var(--inchiostro-2); border-radius: var(--r2);
  }
  body:has(.schede:not([hidden])) .ramo-prestito button .icona { width: 18px; height: 18px; }
  .ramo-prestito .testa-ramo { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--velo); border: 1px solid var(--linea); border-radius: var(--r2); }
  body:has(.schede:not([hidden])) .ramo-prestito .nome-prestito {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-content: center;
    flex: 1; min-width: 0; min-height: 44px; color: var(--inchiostro); font-weight: 750;
  }
  body:has(.schede:not([hidden])) .ramo-prestito .nome-prestito .icona { grid-row: 1 / span 2; }
  .ramo-prestito .nome-prestito .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ramo-prestito .nome-prestito .stella { grid-column: 3; grid-row: 1; }
  .ramo-prestito .etichetta-ramo { grid-column: 2 / span 2; font-size: calc(11px * var(--testo)); font-weight: 600; color: var(--tenue); }
  body:has(.schede:not([hidden])) .ramo-prestito .chiudi-prestito { flex: none; justify-content: center; width: 30px; min-height: 30px; padding: 0; font-size: calc(18px * var(--testo)); font-weight: 400; color: var(--tenue); }
  .ramo-prestito .pagine-prestito { display: flex; flex-direction: column; gap: 2px; margin-left: 16px; padding-left: 6px; border-left: 2px solid var(--linea); }
  body:has(.schede:not([hidden])) .ramo-prestito .pagine-prestito button {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-content: center; min-height: 40px;
  }
  body:has(.schede:not([hidden])) .ramo-prestito .pagine-prestito button .icona { grid-row: 1 / span 2; }
  body:has(.schede:not([hidden])) .ramo-prestito .pagine-prestito .spiega-scheda { font-size: calc(11.5px * var(--testo)); }
  body:has(.schede:not([hidden])) .ramo-prestito .pagine-prestito button[aria-selected="true"] { background: var(--nav-attiva-sfondo); color: var(--nav-attiva-testo); box-shadow: inset 3px 0 0 var(--accento); }
  body:has(.schede:not([hidden])) .schede button .spiega-scheda {
    display: block; grid-column: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: calc(12px * var(--testo)); font-weight: 450; line-height: 1.3; color: inherit; opacity: 0.68;
  }
  body:has(.schede:not([hidden])) .schede button::after { display: none; }
  body:has(.schede:not([hidden])) .schede button:hover { background: var(--velo); color: var(--inchiostro); }
  body:has(.schede:not([hidden])) .schede button[aria-selected="true"] { background: var(--nav-attiva-sfondo); color: var(--nav-attiva-testo); box-shadow: inset 3px 0 0 var(--accento); }
  body:has(.schede:not([hidden])) .azioni-testata {
    flex-direction: column; align-items: stretch; margin: auto 0 0; padding-top: var(--s4);
    border-top: var(--spessore) solid var(--linea);
  }
  body:has(.schede:not([hidden])) .azioni-testata button { justify-content: flex-start; width: 100%; background: transparent; border-color: transparent; box-shadow: none; color: var(--inchiostro-2); }
  body:has(.schede:not([hidden])) .azioni-testata button:hover { background: var(--velo); color: var(--inchiostro); }
  body:has(.schede:not([hidden])) .impostazione-attuale { display: inline; margin-left: auto; font-size: calc(13px * var(--testo)); font-weight: 450; color: var(--tenue); }
  body:has(.schede:not([hidden])) .riepilogo,
  body:has(.schede:not([hidden])) .scheda { padding-left: var(--s6); padding-right: var(--s6); }
  body:has(.schede:not([hidden])) .riepilogo { padding-top: var(--s5); }
  body:has(.schede:not([hidden])) .notifica { margin-left: calc(var(--larghezza-lato) / 2); }
}

/* Selettore dei temi (temi.js): riquadro vicino al pulsante «Aspetto», dal basso sui telefoni */
.menu-temi {
  position: fixed; z-index: 60; top: 72px; right: 16px; width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: var(--s4) var(--s5); background: var(--superficie); color: var(--inchiostro);
  border: var(--spessore) solid var(--bordo); border-radius: var(--r3); box-shadow: var(--ombra-alta);
}
.testa-menu { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.testa-menu h2 { margin: 0; font-size: calc(18px * var(--testo)); }
.menu-temi > .nota { margin: var(--s3) 0 0; }
/* «Fallo conoscere» (condividi.js): lo stesso riquadro, più stretto */
.menu-condividi { width: min(460px, calc(100vw - 24px)); }
.menu-condividi > .nota { margin: 0; }
.menu-condividi .azioni { margin: var(--s4) 0 0; }
.griglia-temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--s3); }
button.tessera-tema, button.tessera-versione {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0; padding: 8px 8px 10px;
  background: var(--superficie); color: var(--inchiostro); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r2);
  text-align: left; white-space: normal; font-weight: 400; line-height: 1.3;
}
button.tessera-tema:hover, button.tessera-versione:hover { background: var(--superficie-2); border-color: var(--tenue); }
button.tessera-tema[aria-pressed="true"], button.tessera-versione[aria-pressed="true"] { border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento); }
.nome-tema { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; font-size: calc(14px * var(--testo)); font-weight: 700; }
:is(button.tessera-tema, button.tessera-versione)[aria-pressed="true"] .nome-tema::after { content: "✓"; color: var(--accento-testo); font-weight: 800; }
.descrizione-tema { padding: 0 2px; font-size: calc(12.5px * var(--testo)); color: var(--inchiostro-2); }
/* Anteprima: una pagina in miniatura con i colori veri del tema (ogni .mini porta il suo data-tema) */
.anteprima-tema { display: flex; height: 78px; overflow: hidden; border: 1px solid var(--linea); border-radius: max(2px, calc(var(--r2) - 4px)); }
.mini {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 24% minmax(0, 1fr); grid-template-rows: 22px 9px 9px 1fr; gap: 5px 6px; padding: 6px;
  background: var(--sfondo-pagina);
}
.mini-lato { grid-row: 1 / -1; background: var(--testata-solida); border: 1px solid var(--linea); border-radius: 3px; }
.mini-eroe { background: var(--eroe); border-radius: 4px; }
.mini-riga { background: var(--carta-sfondo); border: 1px solid var(--linea); border-radius: 3px; }
.mini-riga.corta { width: 65%; }
.mini-pillola { align-self: end; width: 46%; height: 10px; border-radius: 6px; background: var(--accento); }
.gruppo-pannello .griglia-temi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gruppo-pannello .anteprima-tema { height: 100px; }
/* L'aspetto del robottino (assistente.js): le anteprime, che galleggiano e sbattono gli occhi */
.opzioni-assistente + .nota { margin-top: var(--s3); }
.griglia-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); margin-bottom: var(--s2); }
button.tessera-avatar {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 8px 6px;
  background: var(--superficie); color: var(--inchiostro); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r2);
  font-size: calc(13.5px * var(--testo)); font-weight: 650; white-space: normal; box-shadow: none;
}
button.tessera-avatar:hover { background: var(--superficie-2); border-color: var(--tenue); }
button.tessera-avatar[aria-pressed="true"] { border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento); }
.tessera-avatar .robot { display: block; width: 58px; height: 58px; overflow: visible; }
.tessera-avatar:hover .occhi { display: none; }   /* passandoci sopra, il robottino sorride */
.tessera-avatar:hover .occhi-felici { display: inline; }
/* Le impostazioni (temi.js): versione, assistente, colori; nel riquadro della testata e nel pannello */
.scelte-impostazioni > h3 { margin: var(--s5) 0 var(--s2); font-size: calc(12.5px * var(--testo)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.scelte-impostazioni > h3:first-child { margin-top: var(--s1); }
.scelte-impostazioni > .nota { margin: 0 0 var(--s3); }
.scelta-versione { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
button.tessera-versione { padding: 12px 14px; gap: 4px; }
button.tessera-versione .nome-tema { font-size: calc(15.5px * var(--testo)); }
.opzioni-assistente { display: flex; flex-direction: column; gap: var(--s2); }
label.opzione-assistente { display: flex; align-items: flex-start; gap: 10px; font-size: calc(14.5px * var(--testo)); line-height: 1.4; cursor: pointer; }
label.opzione-assistente input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accento); }
/* «Il tuo tema» (temi.js): compare sotto i temi quando è scelto */
.editor-tema { margin-top: var(--s3); padding: var(--s3) var(--s4) var(--s4); background: var(--superficie-2); border: var(--spessore) solid var(--linea); border-radius: var(--r2); }
.editor-tema > .nota { margin: 0 0 var(--s3); }
.campi-tema { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.campo-tema { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--testo)); }
.campo-tema.campo-largo { grid-column: 1 / -1; }
.campo-tema select { width: 100%; }
.campo-colore { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.campo-colore input[type="color"] {
  flex: none; width: 46px; height: 36px; min-height: 0; padding: 3px; cursor: pointer;
  background: var(--superficie); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r1);
}
.nome-campo-tema { font-weight: 600; line-height: 1.3; }
.nome-campo-tema small { display: block; font-weight: 400; color: var(--tenue); font-size: calc(12.5px * var(--testo)); }
.avviso-contrasto { padding: var(--s2) var(--s3); background: var(--avviso-sfondo); color: var(--avviso-testo); border-radius: var(--r1); }
/* Grandezza dei testi: quattro pulsanti con una «A» sempre più grande (temi.js) */
.scelta-grandezza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
button.tessera-grandezza {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 64px; padding: 6px 4px 8px;
  background: var(--superficie); color: var(--inchiostro); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r2);
  font-weight: 500; white-space: normal; line-height: 1.2; text-align: center;
}
button.tessera-grandezza:hover { background: var(--superficie-2); border-color: var(--tenue); }
button.tessera-grandezza[aria-pressed="true"] { border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento); font-weight: 650; }
.lettera-grandezza { font-family: var(--carattere-titoli); font-weight: 700; line-height: 1; color: var(--accento-testo); }
@media (max-width: 420px) { .scelta-grandezza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* I caratteri: tendina, nome scritto a mano, esempio */
.scelta-caratteri { display: grid; gap: var(--s3); }
.riga-carattere { display: grid; grid-template-columns: minmax(180px, 230px) 1fr; gap: 6px var(--s3); align-items: end; }
.riga-carattere input[type="text"] { grid-column: 1; width: 100%; }
.riga-carattere .esempio-carattere {
  grid-column: 2; grid-row: 1; align-self: end; min-height: var(--alto-controllo); display: flex; align-items: center;
  padding: 0 var(--s3); background: var(--superficie-2); border: var(--spessore) dashed var(--linea-forte); border-radius: var(--r1);
  font-size: calc(16px * var(--testo)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.riga-carattere .nota { grid-column: 1 / -1; margin: 0; color: var(--avviso-testo); }
@media (max-width: 560px) {
  .riga-carattere { grid-template-columns: 1fr; }
  .riga-carattere .esempio-carattere { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) { .scelta-versione { grid-template-columns: minmax(0, 1fr); } }

/* Guida: «Scelgo io il metodo e fin dove», due tendine sotto la voce */
.stima-scelgo { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.stima-scelgo select { flex: 1 1 220px; min-width: 0; }

/* Dati del prestito: i dati in parole, poi il modulo per cambiarli */
.carta-dati-prestito h2 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.carta-dati-prestito .riepilogo-guida { margin: var(--s4) 0; }
.carta-dati-prestito .azioni { flex-wrap: wrap; }

/* Cambi del contratto (cambi.js) e storia del prestito nella pagina «Prestiti» (surroga) */
.carta-cambi h2 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.carta-cambi .azioni { flex-wrap: wrap; }
.elenco-cambi { list-style: none; margin: var(--s3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.elenco-cambi li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s3); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie-2); }
.elenco-cambi li > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: calc(14px * var(--testo)); }
.elenco-cambi li small { color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); }
.elenco-cambi .azioni { margin: 0; }
#form-cambio h3 { margin: 0 0 var(--s3); font-size: calc(16px * var(--testo)); }
#form-cambio .spunta span small { display: block; color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); }
.carta-prestito .storia-prestito { margin: 0; font-size: calc(13.5px * var(--testo)); }
.carta-prestito .surroga { margin-top: 0; display: flex; flex-direction: column; gap: var(--s2); }
.carta-prestito .surroga h4 { margin: 0; font-size: calc(15px * var(--testo)); }
.carta-prestito .surroga label { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--testo)); font-weight: 600; }
.carta-prestito .surroga select { width: 100%; font-weight: 400; }
.carta-prestito .surroga .nota { margin: 0; }

/* Prestiti: la stella del principale, l'elenco vuoto */
button.scelta-principale[aria-pressed="true"] { color: #8a6100; border-color: #e5a800; background: color-mix(in srgb, #f5b301 14%, var(--superficie)); }
[data-tema="notte"] button.scelta-principale[aria-pressed="true"], [data-tema="ardesia"] button.scelta-principale[aria-pressed="true"] { color: #f5c542; }
.guida-principale { margin: 0 0 var(--s3); }
.prestiti-vuoto h2 { display: flex; align-items: center; gap: var(--s2); margin-top: 0; }

/* Pannello, versione semplice: che cosa c'è in più nell'avanzata */
.carta-versione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); }
.carta-versione > div:first-child { flex: 1 1 380px; }
.carta-versione h2 { margin-top: 0; }
.carta-versione .azioni { margin: 0; }

/* Ritocchi per tema: quello che le variabili da sole non bastano a dire */
[data-tema="carta"] .riepilogo .dato.principale { border-top: 4px solid var(--accento); }
[data-tema="carta"] .riepilogo .dato .etichetta { font-family: var(--carattere-titoli); }
[data-tema="carta"] .titolo-gruppo { font-family: var(--carattere-titoli); letter-spacing: 0.08em; }
[data-tema="carta"] th { font-family: var(--carattere-titoli); font-weight: 600; }
[data-tema="aurora"] .carta { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-tema="ardesia"] .dato .valore { letter-spacing: -0.03em; }
[data-tema="contrasto"] :is(input, select, textarea, button.secondario, .carica-file) { border-width: 2px; border-color: #000000; }
[data-tema="contrasto"] :focus-visible { outline: 3px solid var(--fuoco) !important; outline-offset: 2px !important; }
[data-tema="contrasto"] .nota, [data-tema="contrasto"] .dato .dettaglio, [data-tema="contrasto"] .riepilogo .dato:not(.principale) .dettaglio, [data-tema="contrasto"] .voci-dato dt { color: var(--inchiostro-2); }
[data-tema="contrasto"] #tabella-piano tr.futura td { color: var(--inchiostro); }

/* ---------- 8. Notifica e adattamenti ---------- */
.notifica {
  position: fixed; left: 50%; bottom: calc(var(--alto-schede-basso) + env(safe-area-inset-bottom, 0px) + var(--s5)); transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); z-index: 40;
  background: var(--inchiostro); color: var(--superficie); padding: 11px var(--s4); border-radius: var(--r2);
  font-size: calc(14px * var(--testo)); font-weight: 500; box-shadow: var(--ombra-alta);
}
.notifica.errore { background: #b42318; color: #ffffff; }

/* Schermi medi: testata più compatta */
/* Testata in alto (sotto i 1100 px): pulsanti della testata solo con l'icona */
@media (max-width: 1099px) {
  .solo-largo { display: none; }
  .testata-interno { gap: var(--s3); }
  .azioni-testata .testo-pulsante { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .azioni-testata button { width: var(--alto-controllo); padding: 0; }
  /* Sette schede (con Prestiti e Offerte): un po' più strette, così ci stanno anche a 800 px */
  .schede button { padding: 0 8px; font-size: calc(14px * var(--testo)); }
}
@media (max-width: 1180px) {
  .statistiche { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .calendario { grid-template-columns: minmax(0, 1fr); }
  .lato-calendario { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 980px) {
  .due-carte, .griglia-pannello { grid-template-columns: minmax(0, 1fr); }
  .corpo-proiezione { grid-template-columns: minmax(0, 1fr); grid-template-areas: "comandi" "futuro" "esito"; }
}

/* Bersagli tocco più grandi (dita) */
@media (pointer: coarse) {
  :root { --alto-controllo: 44px; --alto-piccolo: 40px; }
  .segmenti button { min-height: 40px; }
  .colonne-extra button, .voce-stato { min-height: 40px; }
  .festa button { visibility: visible; width: 32px; height: 32px; }
  input, select, textarea { font-size: calc(16px * var(--testo)); }
  .giorno { height: 40px; }
}

/* Telefoni: schede in basso, una colonna, meno contorno */
@media (max-width: 760px) {
  :root { --alto-riga: 56px; --alto-schede-basso: 64px; }
  body { font-size: calc(15px * var(--testo)); }
  /* Niente sfocatura sulla testata: creerebbe un contenitore per la barra fissa delle schede, che finirebbe in alto */
  .testata { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--testata-solida); }
  .testata-interno { padding: 0 var(--s4); gap: var(--s2); }
  h1 { font-size: calc(17px * var(--testo)); }
  /* Accanto ai tre pulsanti il nome non sempre ci sta (320 px, testi grandi): va su due righe invece di tagliarsi */
  .marchio h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
  .schede {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;   /* tante colonne quante schede visibili */
    height: calc(var(--alto-schede-basso) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--s1) env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--testata-solida) 96%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: var(--spessore) solid var(--linea); box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
  }
  .schede button { flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px; font-size: calc(12px * var(--testo)); font-weight: 600; border-radius: var(--r2); }
  .schede button .icona { display: block; width: 22px; height: 22px; }
  .schede button::after { left: 28%; right: 28%; top: 0; bottom: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .schede button:hover::after { background: transparent; }
  .schede button[aria-selected="true"]::after { background: var(--accento); }
  .schede button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .riepilogo { gap: var(--s2); padding: var(--s3) var(--s4) 0; }
  .riepilogo-mese, .riepilogo-statistiche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
  .riepilogo .dato, .riepilogo .riepilogo-statistiche .dato { grid-column: auto; padding: 10px 12px 12px; }
  .riepilogo .dato.principale { grid-column: 1 / -1; padding: 12px 14px; }
  .riepilogo .dato.principale .valore { font-size: min(calc(32px * var(--testo)), max(32px, var(--largo-cifra, 999px))); }
  /* Selettore dei temi: sale dal basso, due anteprime per riga */
  .menu-temi { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 86dvh; border-radius: var(--r3) var(--r3) 0 0; padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .griglia-temi, .gruppo-pannello .griglia-temi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .anteprima-tema, .gruppo-pannello .anteprima-tema { height: 64px; }
  .descrizione-tema { font-size: calc(12px * var(--testo)); }
  .riepilogo-statistiche .dato:last-child:nth-child(odd), .riepilogo-mese > .dato:last-child:nth-child(even) { grid-column: 1 / -1; }
  .voci-dato div { font-size: calc(12.5px * var(--testo)); }
  .dato .valore { font-size: min(calc(18px * var(--testo)), max(18px, var(--largo-cifra, 999px))); }
  .dato .dettaglio { white-space: normal; overflow: visible; font-size: calc(12.5px * var(--testo)); line-height: 1.35; }
  /* Sulle altre pagine il riepilogo del mese lascerebbe poco spazio: resta solo nel piano */
  body:has(#scheda-piano[hidden]) .riepilogo { display: none; }

  .scheda { padding: var(--s3) var(--s4) var(--s5); }
  .striscia-esempi { padding: var(--s3) var(--s4) 0; }
  .colonna { gap: var(--s3); }
  .carta { padding: var(--s4); border-radius: var(--r2); }
  .carta-pieghevole { padding: var(--s3) var(--s4); }
  h2 { font-size: calc(17px * var(--testo)); }

  /* Piano */
  .barra-piano { gap: var(--s2); }
  .esito-conti { flex-basis: 100%; padding: 10px var(--s3); }
  .esito-conti .piccolo { display: none; }
  .azioni-piano { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .azioni-piano button { padding: 0 var(--s2); font-size: calc(14px * var(--testo)); white-space: normal; text-align: center; }
  .azioni-piano #compila-rate { grid-column: 1 / -1; }
  .comandi-tabella { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--s2); }
  .comandi-tabella > * { min-width: 0; }
  .colonne-extra, .legenda#legenda-piano { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  .colonne-extra::-webkit-scrollbar, .legenda#legenda-piano::-webkit-scrollbar { display: none; }
  .legenda#legenda-piano li { flex: none; }
  /* Le righe che scorrono in orizzontale sfumano a destra: così si capisce che continuano. */
  .colonne-extra, .legenda#legenda-piano { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  /* La tabella scorre con la pagina, non nel suo riquadro: un solo scorrimento verticale. L'intestazione resta
     in cima allo schermo grazie ad app.js (fissaTestaPiano), perché il riquadro scorre ancora di lato. */
  .tabella-piano { margin: 0 calc(-1 * var(--s4)); border-radius: 0; border-left: 0; border-right: 0; max-height: none; min-height: 0; }
  #tabella-piano { font-size: calc(14px * var(--testo)); }
  #tabella-piano th { max-width: 96px; font-size: calc(12.5px * var(--testo)); }
  #tabella-piano td { padding: 9px 10px; }
  #tabella-piano .numero { min-width: 0; margin-right: 6px; font-size: calc(11.5px * var(--testo)); }

  /* Tassi */
  .filtri-tassi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  /* I sei periodi non stanno su una riga: vanno a capo invece di finire tagliati fuori dallo schermo. */
  .filtri-tassi .segmenti { justify-self: stretch; flex-wrap: wrap; overflow: visible; }
  .filtri-tassi .segmenti button { flex: 1 1 auto; }
  .date-filtro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .date-filtro label { flex-direction: column; align-items: stretch; gap: 2px; font-size: calc(13px * var(--testo)); }
  .date-filtro input { width: 100%; min-width: 0; }
  .filtri .nota { margin: 0; }
  .carta-grafico { padding: var(--s4) var(--s4) 0; }
  .carta-grafico h2 { font-size: calc(18px * var(--testo)); }
  .carta-grafico > .intestazione-carta { align-items: flex-start; gap: var(--s2); }
  .legenda-grafico { gap: 4px var(--s3); font-size: calc(12.5px * var(--testo)); }
  .grafico { margin: 0 calc(-1 * var(--s3)); }
  .pannello-proiezione { margin: var(--s2) calc(-1 * var(--s4)) 0; }
  .pannello-proiezione > details > summary { padding: var(--s3) var(--s4); align-items: flex-start; }
  .corpo-proiezione { padding: var(--s4); }
  .riassunto-proiezione .voce-riassunto { display: block; }
  .riassunto-proiezione .voce-riassunto + .voce-riassunto::before { content: none; }
  .statistiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistiche .dato .dettaglio { display: none; }
  .riga-comandi { display: grid; grid-template-columns: minmax(0, 1fr); }
  .riga-comandi select, .riga-comandi button { width: 100%; }
  .campi.in-linea { flex-direction: column; align-items: stretch; }
  .campi.in-linea label input { width: 100%; }
  .campi.in-linea button { width: 100%; }
  /* Tassi inseriti: sei colonne non stanno nello schermo. Ogni valore diventa un blocco di due righe (giorno e valore,
     poi giorno della settimana e variazione; sotto, se c'è, la rata che lo usa) con il cestino a destra. */
  .contenitore-tabella:has(> #tabella-tassi) { max-height: min(520px, 60vh); max-height: min(520px, 60dvh); }
  #tabella-tassi, #tabella-tassi tbody { display: block; }
  #tabella-tassi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #tabella-tassi tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s3); align-items: baseline;
    padding: 9px var(--s3); background: var(--superficie); border-bottom: 1px solid var(--linea);
  }
  #tabella-tassi tbody tr:last-child { border-bottom: 0; }
  #tabella-tassi tbody tr:nth-child(even) { background: var(--zebra); }
  #tabella-tassi td { padding: 0; border: 0; background: none; white-space: nowrap; }
  #tabella-tassi td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; }
  #tabella-tassi td:nth-child(2) { grid-area: 2 / 1; color: var(--inchiostro-2); font-size: calc(13px * var(--testo)); }
  #tabella-tassi td:nth-child(3) { grid-area: 1 / 2; text-align: right; font-weight: 650; font-size: calc(15px * var(--testo)); }
  #tabella-tassi td:nth-child(4) { grid-area: 2 / 2; text-align: right; font-size: calc(13px * var(--testo)); }
  #tabella-tassi td:nth-child(5) { grid-area: 3 / 1 / 4 / 3; margin-top: 2px; color: var(--accento-testo); font-size: calc(13px * var(--testo)); font-weight: 600; }
  #tabella-tassi td:nth-child(5):empty { display: none; }
  #tabella-tassi td.azione { grid-area: 1 / 3 / 4 / 4; align-self: center; padding: 0; }
  #tabella-tassi td.azione button { min-width: 40px; padding: 0 var(--s2); }
  #tabella-tassi .testo-elimina { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #tabella-tassi td.in-modifica { padding: 0; }
  #tabella-tassi td.in-modifica input { width: 8em; }
  /* Riepilogo per anno: scorre di lato, l'anno resta fermo a sinistra */
  #tabella-anni th:first-child, #tabella-anni td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--linea); font-weight: 650; }

  /* Calendario: il dettaglio del giorno subito sopra i mesi */
  .calendario { display: flex; flex-direction: column; align-items: stretch; }
  .calendario > * { width: 100%; }
  .lato-calendario { display: contents; }
  .dettaglio-giorno { order: -1; }
  .mesi { grid-template-columns: minmax(0, 1fr); }
  .navigazione-anno { width: 100%; }
  .navigazione-anno #anno-oggi { margin-left: auto; }
  .legenda-calendario { flex-basis: 100%; gap: 6px var(--s3); font-size: calc(12.5px * var(--testo)); }

  /* Festività */
  .intestazione-carta { flex-direction: column; align-items: stretch; }
  #form-festivita { width: 100%; }

  /* Pannello */
  .carta-dati .azioni { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .carta-dati .azioni #cancella-tutto { grid-column: 1 / -1; }
  #form-regole .intestazione-carta button { width: 100%; }

  /* Guida: passi come barra di avanzamento, pulsanti fissi in basso */
  .configurazione { padding: var(--s3) var(--s3) var(--s6); }
  .guida { padding: var(--s4) var(--s4) 0; border-radius: var(--r2); }
  .guida h2 { font-size: calc(22px * var(--testo)); }
  .passi { flex-wrap: nowrap; gap: 4px; margin-bottom: var(--s4); padding-bottom: 0; border: 0; }
  .passi li { flex: 1; height: 6px; border-radius: 3px; background: var(--linea); }
  .passi li::before, .passi li.attivo span { display: none; }
  .passi li.fatto, .passi li.attivo { background: var(--accento); }
  .passi li.attivo { box-shadow: 0 0 0 2px var(--accento-tenue); }
  .domanda > input { max-width: none; }
  .guida .campi > label.campo input { max-width: none; }
  .azioni-guida {
    position: sticky; bottom: 0; z-index: 5; margin: var(--s4) calc(-1 * var(--s4)) 0; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--superficie) 96%, transparent); border-top: 1px solid var(--linea); border-radius: 0 0 var(--r2) var(--r2);
  }
  .azioni-guida #guida-avanti { flex: 1; }
  .azioni-guida #guida-carica { order: 5; width: 100%; }
  .riepilogo-guida { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .riepilogo-guida dd { margin-bottom: var(--s2); }
}

/* Schermi bassi (portatili): meno contorno, più righe di tabella */
@media (max-height: 820px) and (min-width: 761px) {
  :root { --alto-riga: 54px; }
  .riepilogo { padding-top: var(--s3); gap: var(--s2); }
  .dato { padding: 8px var(--s3); }
  .riepilogo .dato.principale .valore { font-size: min(calc(30px * var(--testo)), max(30px, var(--largo-cifra, 999px))); }
  .scheda { padding-top: var(--s3); }
  .scheda-piano { gap: var(--s2); }
  #tabella-piano td { padding-block: 6px; }
}

/* Sui dispositivi touch il pulsante × delle festività ha un bersaglio di almeno 40 px. */
@media (pointer: coarse) {
  button[data-giorno][title="Elimina"] { min-width: 40px; min-height: 40px; }
}


/* ---------- 10. Icone e movimento ---------- */
/* Icone (icone.js): nei titoli prendono il colore d'accento del tema, nei pulsanti quello del testo. */
h2 > .icona-aggiunta, h3 > .icona-aggiunta, h2 > .icona-titolo, h3 > .icona-titolo {
  width: 1.15em; height: 1.15em; margin-right: 0.45em; vertical-align: -0.2em; color: var(--accento);
}
button > .icona-aggiunta, .carica-file > .icona-aggiunta { width: 18px; height: 18px; margin-left: -3px; }
button.piccolo > .icona-aggiunta { width: 16px; height: 16px; }
.icona-dato { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--tenue); }
.riepilogo .dato.principale .icona-dato { color: var(--su-eroe-2); }
.icona-mini { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
/* Icona in un riquadro morbido: tipo di prestito, passi della guida, stati vuoti */
.distintivo-icona {
  display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: var(--accento-tenue); color: var(--accento);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accento) 14%, transparent);
}
.distintivo-icona .icona { width: 22px; height: 22px; }
.distintivo-icona.piccolo { width: 36px; height: 36px; border-radius: 11px; margin-right: 12px; }
.distintivo-icona.piccolo .icona { width: 19px; height: 19px; }
.distintivo-icona.grande { width: 64px; height: 64px; border-radius: 20px; margin-bottom: var(--s3); }
.distintivo-icona.grande .icona { width: 32px; height: 32px; stroke-width: 1.6; }
#titolo-passo { display: flex; align-items: center; }
/* Scelte con un'icona (il tipo di prestito nella guida) */
.scelta.con-icona { align-items: center; }
.scelta.con-icona .distintivo-icona.piccolo { display: inline-grid; margin-right: 2px; }
.scelta.con-icona:has(input:checked) .distintivo-icona { background: var(--accento); color: var(--su-accento); }
.carta-prestito header { align-items: center; }
.carta-prestito .testa-prestito { flex: 1; min-width: 0; }
.carta-offerta h3 { display: flex; align-items: center; gap: 12px; }
.tabella-offerte thead .etichetta-aperto { display: inline-flex; align-items: center; }
/* Il marchio: una casa con il segno di percentuale */
.logo { cursor: pointer; }
/* Nella prima pagina della guida: il logo grande con il nome */
/* La prima apertura (intro.js): la scritta OCCHIO ALLA RATA, nel carattere dei titoli, una lettera per span, con un
   alone leggero dietro e il motto sotto. Senza animazioni si vede tutto fermo. */
.intro-scritta {
  --durata: 1.6s;
  position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 0 var(--s4); padding: clamp(18px, 5cqw, 36px) clamp(10px, 3cqw, 24px) clamp(14px, 4cqw, 28px); cursor: pointer;
}
.intro-scritta::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(86%, 560px); height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accento-tenue), transparent); opacity: 0.9; pointer-events: none;
}
.scritta-testo { position: relative; text-align: center; max-width: 100%; }
.scritta-testo p { margin: 0; }
.scritta-titolo { font-family: var(--carattere-titoli); font-weight: 800; font-size: calc(clamp(30px, 8cqw, 60px) * var(--testo)); line-height: 1.04; letter-spacing: 0.03em; text-transform: uppercase; color: var(--inchiostro); }
/* Il simbolo accanto alla scritta, alto quanto le sue due righe; se accanto non c'è posto (telefono, testi grandi) va sopra */
.scritta-marchio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 2.5cqw, 18px) clamp(14px, 3.2cqw, 26px); }
.intro-scritta .logo { --lato: calc(clamp(30px, 8cqw, 60px) * var(--testo) * 2.1); width: var(--lato); height: var(--lato); border-radius: 27%; box-shadow: var(--ombra-alta); }
.scritta-parola { display: inline-block; vertical-align: bottom; white-space: nowrap; }
.scritta-lettera { display: inline-block; }
.scritta-rata { color: var(--accento); }
p.scritta-motto { margin-top: 12px; font-size: calc(clamp(13.5px, 2.5cqw, 17px) * var(--testo)); line-height: 1.4; color: var(--tenue); }
/* La pagina di benvenuto: i titoli delle sezioni, i sei riquadri «Che cosa fa», i tre passi «Come funziona», le due
   carte «Tieni a portata di mano» */
.titolo-benvenuto { margin: var(--s5) 0 var(--s3); font-size: calc(12.5px * var(--testo)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); }
.intro-punti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.intro-punti li {
  padding: var(--s4); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.intro-punti li:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: var(--accento-tenue); }
.intro-punti .distintivo-icona { margin-bottom: var(--s3); }
.intro-punti strong { display: block; font-size: calc(15.5px * var(--testo)); color: var(--inchiostro); }
.intro-punti p { margin: 4px 0 0; font-size: calc(14px * var(--testo)); line-height: 1.45; color: var(--tenue); }
.passi-benvenuto { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.passi-benvenuto li { counter-increment: passo; position: relative; padding-top: 4px; }
.numero-passo {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: var(--s3); border-radius: 50%;
  background: var(--accento); color: #ffffff; font: 800 calc(17px * var(--testo))/1 var(--carattere-numeri); box-shadow: 0 0 0 6px var(--accento-tenue);
}
.numero-passo::before { content: counter(passo); }
.passi-benvenuto strong { display: block; font-size: calc(15.5px * var(--testo)); color: var(--inchiostro); }
.passi-benvenuto p { margin: 4px 0 0; font-size: calc(14px * var(--testo)); line-height: 1.5; color: var(--tenue); }
@media (min-width: 700px) {
  .passi-benvenuto li:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 54px; right: -4px; height: 2px; background: linear-gradient(90deg, var(--accento-tenue), var(--linea)); }
}
.carte-documenti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.carte-documenti li { display: flex; align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--superficie-2); border: 1px solid var(--linea); }
.carte-documenti strong { display: block; font-size: calc(15px * var(--testo)); color: var(--inchiostro); }
.carte-documenti p { margin: 2px 0 0; font-size: calc(14px * var(--testo)); line-height: 1.45; color: var(--tenue); }
.carte-documenti + .nota { margin-top: var(--s4); }
.logo.logo-grande { width: 76px; height: 76px; border-radius: 22px; box-shadow: var(--ombra-alta); }
/* I loghi (loghi.js): undici disegni, ognuno con le sue animazioni; quello scelto sta in ogni riquadro .logo.
   Lo sfondo è quello del riquadro, il colore principale il suo testo (currentColor), le monete d'oro. */
.logo .logo-disegno { display: block; width: 100%; height: 100%; }
.logo-disegno { overflow: visible; }
.logo-disegno .scintilla { opacity: 0; transform-box: fill-box; transform-origin: center; }
.logo-disegno .palpebra { transform-box: fill-box; transform-origin: center; }
.logo-disegno .sguardo { transition: transform 0.18s ease-out; }
.logo-occhio .iride, .logo-occhio .moneta-gira { transform-box: view-box; transform-origin: 32px 32px; }
.logo-salvadanaio .maialino { transform-box: view-box; transform-origin: 30px 53px; }
.logo-casa .fumo circle { opacity: 0.55; transform-box: fill-box; transform-origin: center; }
.logo-gufo .testa { transform-box: view-box; transform-origin: 32px 52px; }
.logo-lente .barra { opacity: 0.45; }
.logo-moneta .gira, .logo-moneta .fronte, .logo-moneta .retro, .logo-moneta .lampo { transform-box: view-box; transform-origin: 32px 32px; }
.logo-moneta .retro { transform: scaleX(0); }
.logo-moneta .lampo { transform: rotate(25deg); }
.logo-calendario .visto { stroke-dasharray: 1; }
.logo-calendario .ultima, .logo-grafico .cima { transform-box: fill-box; transform-origin: center; }
.logo-radar .raggio { transform-box: view-box; transform-origin: 32px 32px; }
.logo-radar .punto { opacity: 0.85; transform-box: fill-box; transform-origin: center; }
.logo-binocolo .binocolo { transform-box: view-box; transform-origin: 32px 42px; }
.logo-grafico .linea { stroke-dasharray: 1; }
.logo-grafico .pilastro { transform-box: fill-box; transform-origin: bottom; }
.logo-sveglia .sveglia { transform-box: view-box; transform-origin: 32px 37px; }
.logo-sveglia .ore, .logo-sveglia .minuti { transform-box: view-box; transform-origin: 32px 35px; }
.logo-sveglia .squillo { opacity: 0; }

/* La prima apertura: di base le lettere sorgono una dopo l'altra e il motto arriva alla fine (--durata, data dalla
   variante); i riquadri della presentazione seguono. Le varianti aggiungono le loro animazioni nel loro CSS. */
@media (prefers-reduced-motion: no-preference) {
  .intro-scritta.in-volo .logo { animation: scritta-logo 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.05s both; }
  .intro-scritta.in-volo .scritta-lettera { animation: scritta-sorge 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.2s + var(--i) * 0.045s) both; }
  .intro-scritta.in-volo .scritta-motto { animation: sale 0.5s calc(var(--durata) - 0.45s) both; }
  .intro-scritta.in-volo ~ .intro-punti > li { animation: sale 0.45s calc(var(--durata) + var(--i) * 0.08s) both; }
}
@keyframes scritta-sorge { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes scritta-logo { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes logo-apre { from { transform: scaleY(0.06); } to { transform: scaleY(1); } }
@keyframes logo-batte { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.08); } }
@keyframes logo-occhiolino { 0%, 100% { transform: scaleY(1); } 40%, 55% { transform: scaleY(0.08); } }
@keyframes logo-luccica { 0%, 74%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1.15) rotate(45deg); } 88% { opacity: 0; transform: scale(0.4) rotate(90deg); } }
@keyframes logo-sobbalzo { 0%, 100% { transform: none; } 35% { transform: scale(1.12) rotate(-4deg); } 65% { transform: scale(0.96) rotate(2deg); } }
@keyframes logo-ruota { to { transform: rotate(360deg); } }
/* occhio */
@keyframes logo-moneta { from { transform: scaleX(0.08) rotate(-25deg); } to { transform: none; } }
@keyframes logo-guarda { 0%, 38%, 100% { transform: translate(0, 0); } 46%, 56% { transform: translate(-4.5px, 0.6px); } 64%, 74% { transform: translate(4.5px, -0.6px); } 82% { transform: translate(0, 0); } }
/* salvadanaio: la moneta cade nella fessura, il maialino la ingoia */
@keyframes logo-cade { 0% { transform: translateY(-16px); opacity: 0; } 12% { opacity: 1; } 30%, 55% { transform: translateY(0); opacity: 1; } 68%, 100% { transform: translateY(13px); opacity: 1; } }
@keyframes logo-ingoia { 0%, 66%, 84%, 100% { transform: none; } 72% { transform: scale(1.04, 0.95); } 78% { transform: scale(0.98, 1.03); } }
/* casa: il fumo del camino */
@keyframes logo-fumo { 0% { transform: translateY(4px) scale(0.6); opacity: 0; } 30% { opacity: 0.75; } 100% { transform: translateY(-5px) scale(1.2); opacity: 0; } }
/* gufo: inclina la testa */
@keyframes logo-inclina { 0%, 70%, 100% { transform: none; } 76%, 84% { transform: rotate(-7deg); } 90% { transform: rotate(4deg); } }
/* lente: scorre sulle rate e le illumina */
@keyframes logo-scruta { 0%, 8% { transform: translate(0, 0); } 46%, 54% { transform: translate(27px, 2px); } 92%, 100% { transform: translate(0, 0); } }
@keyframes logo-barra { 0%, 20%, 100% { fill: currentColor; opacity: 0.45; } 4%, 14% { fill: #ffe680; opacity: 1; } }
/* moneta: gira, dall'euro alla spunta e ritorno, con un lampo */
@keyframes logo-fronte { 0%, 40% { transform: scaleX(1); } 45%, 90% { transform: scaleX(0); } 95%, 100% { transform: scaleX(1); } }
@keyframes logo-retro { 0%, 45% { transform: scaleX(0); } 50%, 85% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
@keyframes logo-lampo { 0%, 12% { transform: rotate(25deg) translateX(0); } 28%, 100% { transform: rotate(25deg) translateX(88px); } }
/* calendario: le spunte, una rata alla volta, poi la moneta */
@keyframes logo-spunta { 0%, 4% { stroke-dashoffset: 1; opacity: 1; } 12%, 80% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes logo-ultima { 0%, 30% { transform: scale(0); } 38% { transform: scale(1.3); } 44%, 82% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
/* radar: il raggio gira, le monete si accendono quando le tocca */
@keyframes logo-blip { 0% { opacity: 1; transform: scale(1.4); } 25% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0.35; transform: scale(1); } }
/* binocolo: scruta a destra e a sinistra */
@keyframes logo-scruta-binocolo { 0%, 10% { transform: none; } 30%, 42% { transform: translateX(-2.5px) rotate(-5deg); } 62%, 74% { transform: translateX(2.5px) rotate(5deg); } 92%, 100% { transform: none; } }
@keyframes logo-vista { 0%, 10% { transform: none; } 30%, 42% { transform: translateX(2.2px); } 62%, 74% { transform: translateX(-2.2px); } 92%, 100% { transform: none; } }
/* grafico: le colonne crescono, la linea si disegna e finisce in una moneta */
@keyframes logo-colonna { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes logo-linea { 0% { stroke-dashoffset: 1; opacity: 1; } 30%, 85% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes logo-cima { 0%, 28% { transform: scale(0); } 36% { transform: scale(1.3); } 42%, 85% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes logo-punte { 0%, 8% { opacity: 0; } 18%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
/* sveglia: le lancette girano, ogni tanto suona */
@keyframes logo-suona { 0%, 80%, 100% { transform: none; } 82% { transform: rotate(-9deg); } 84% { transform: rotate(9deg); } 86% { transform: rotate(-8deg); } 88% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } 92% { transform: rotate(4deg); } 94% { transform: none; } }
@keyframes logo-squillo { 0%, 80%, 96%, 100% { opacity: 0; } 82%, 94% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .logo-occhio .palpebra { animation: logo-apre 0.55s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both, logo-batte 6s 1.4s infinite; }
  .logo-occhio .moneta-gira { animation: logo-moneta 0.7s 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .logo-occhio .iride { animation: logo-guarda 9s 2.2s ease-in-out infinite; }
  .logo-occhio .scintilla { animation: logo-luccica 9s 2.2s infinite both; }
  .logo-occhio.segue-puntatore .iride { animation: none; }   /* mentre segue il mouse non si guarda intorno da solo */
  .logo-salvadanaio .cade { animation: logo-cade 6s 0.3s ease-in infinite both; }
  .logo-salvadanaio .maialino { animation: logo-ingoia 6s 0.3s infinite; }
  .logo-salvadanaio .palpebra { animation: logo-batte 5s 1s infinite; }
  .logo-casa .palpebra { animation: logo-apre 0.55s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both, logo-batte 6s 1.4s infinite; }
  .logo-casa .fumo circle { animation: logo-fumo 3s ease-out infinite both; }
  .logo-casa .fumo circle:nth-child(2) { animation-delay: 1s; }
  .logo-casa .fumo circle:nth-child(3) { animation-delay: 2s; }
  .logo-gufo .palpebra { animation: logo-batte 4.5s 0.8s infinite; }
  .logo-gufo .testa { animation: logo-inclina 8s 1.5s ease-in-out infinite; }
  .logo-lente .lente { animation: logo-scruta 8s ease-in-out infinite; }
  .logo-lente .barra { animation: logo-barra 8s infinite both; }
  .logo-lente .b1 { animation-delay: 0.2s; } .logo-lente .b2 { animation-delay: 0.9s; } .logo-lente .b3 { animation-delay: 1.6s; }
  .logo-lente .b4 { animation-delay: 2.3s; } .logo-lente .b5 { animation-delay: 3s; }
  .logo-moneta .fronte { animation: logo-fronte 7s 1s ease-in-out infinite; }
  .logo-moneta .retro { animation: logo-retro 7s 1s ease-in-out infinite; }
  .logo-moneta .lampo { animation: logo-lampo 7s 1s ease-in-out infinite; }
  .logo-moneta .scintilla { animation: logo-luccica 7s 1s infinite both; }
  .logo-moneta .scintilla:last-of-type { animation-delay: 4.5s; }
  .logo-calendario .visto { animation: logo-spunta 9s infinite both; }
  .logo-calendario .s1 { animation-delay: 0.3s; } .logo-calendario .s2 { animation-delay: 0.8s; } .logo-calendario .s3 { animation-delay: 1.3s; }
  .logo-calendario .s4 { animation-delay: 1.8s; } .logo-calendario .s5 { animation-delay: 2.3s; }
  .logo-calendario .ultima { animation: logo-ultima 9s infinite both; }
  .logo-radar .raggio { animation: logo-ruota 4s linear infinite; }
  .logo-radar .punto { animation: logo-blip 4s infinite both; }
  .logo-radar .p1 { animation-delay: 0.55s; } .logo-radar .p2 { animation-delay: 1.61s; } .logo-radar .p3 { animation-delay: 2.63s; }
  .logo-binocolo .binocolo { animation: logo-scruta-binocolo 8s 1s ease-in-out infinite; }
  .logo-binocolo .vista { animation: logo-vista 8s 1s ease-in-out infinite; }
  .logo-binocolo.segue-puntatore .binocolo, .logo-binocolo.segue-puntatore .vista { animation: none; }
  .logo-grafico .pilastro { animation: logo-colonna 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .logo-grafico .c2 { animation-delay: 0.1s; } .logo-grafico .c3 { animation-delay: 0.2s; } .logo-grafico .c4 { animation-delay: 0.3s; }
  .logo-grafico .linea { animation: logo-linea 6s 0.6s ease-out infinite both; }
  .logo-grafico .cima { animation: logo-cima 6s 0.6s infinite both; }
  .logo-grafico .punte { animation: logo-punte 6s 0.6s infinite both; }
  .logo-sveglia .minuti { animation: logo-ruota 6s linear infinite; }
  .logo-sveglia .ore { animation: logo-ruota 72s linear infinite; }
  .logo-sveglia .sveglia { animation: logo-suona 7s 1s infinite; }
  .logo-sveglia .squillo { animation: logo-squillo 7s 1s infinite; }
  /* Un clic sul logo: un sobbalzo, e chi ha gli occhi fa l'occhiolino */
  .logo-disegno.clic { animation: logo-sobbalzo 0.5s ease-out; }
  .logo-disegno.clic .palpebra { animation: logo-occhiolino 0.45s ease-in-out; }
}

/* Impostazioni: la scelta del logo, con le anteprime animate */
.griglia-loghi { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
button.tessera-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; padding: 10px 6px 8px;
  background: var(--superficie); color: var(--inchiostro); border: var(--spessore) solid var(--linea-forte); border-radius: var(--r2);
  font-size: calc(13.5px * var(--testo)); font-weight: 650; white-space: normal; box-shadow: none;
}
button.tessera-logo:hover { background: var(--superficie-2); border-color: var(--tenue); }
button.tessera-logo[aria-pressed="true"] { border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento); }
.tessera-logo .logo { width: 54px; height: 54px; border-radius: 15px; }
.notifica { display: flex; align-items: center; gap: 10px; }
.notifica .icona { width: 18px; height: 18px; flex: none; }
/* Un pulsante al lavoro (scarico, taratura, proiezione): una rotella accanto al testo */
button[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: 0.8;
}

@keyframes sale { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes da-destra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes da-sinistra { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes avviso-entra { from { opacity: 0; transform: translate(-50%, 16px) scale(0.97); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes menu-sale { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes respiro { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes alza-distintivo { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* Tutto il movimento sta qui dentro: con «riduci movimento» nelle impostazioni del sistema la pagina resta ferma. */
@media (prefers-reduced-motion: no-preference) {
  /* Una scheda nuova: i blocchi salgono uno dopo l'altro (la classe «entra» la mette app.js) */
  .scheda.entra > :not(.colonna), .scheda.entra > .colonna > * { animation: sale 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .scheda.entra > :nth-child(2), .scheda.entra > .colonna > :nth-child(2) { animation-delay: 0.05s; }
  .scheda.entra > :nth-child(3), .scheda.entra > .colonna > :nth-child(3) { animation-delay: 0.1s; }
  .scheda.entra > :nth-child(4), .scheda.entra > .colonna > :nth-child(4) { animation-delay: 0.15s; }
  .scheda.entra > :nth-child(5), .scheda.entra > .colonna > :nth-child(5) { animation-delay: 0.2s; }
  .scheda.entra > :nth-child(n+6), .scheda.entra > .colonna > :nth-child(n+6) { animation-delay: 0.25s; }
  .scheda.entra .elenco-prestiti > * { animation: sale 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .scheda.entra .elenco-prestiti > :nth-child(2) { animation-delay: 0.12s; }
  .scheda.entra .elenco-prestiti > :nth-child(3) { animation-delay: 0.18s; }
  .scheda.entra .elenco-prestiti > :nth-child(n+4) { animation-delay: 0.24s; }
  .scheda.entra .distintivo-icona { animation: alza-distintivo 0.5s 0.15s cubic-bezier(0.3, 1.4, 0.5, 1) both; }

  /* I numeri del mese: le tessere arrivano in fila, la barra del rimborsato cresce */
  .riepilogo.entra .dato { animation: sale 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .riepilogo.entra .riepilogo-mese > :nth-child(2) { animation-delay: 0.05s; }
  .riepilogo.entra .riepilogo-mese > :nth-child(3) { animation-delay: 0.1s; }
  .riepilogo.entra .riepilogo-mese > :nth-child(4) { animation-delay: 0.15s; }
  .riepilogo.entra .riepilogo-mese > :nth-child(5) { animation-delay: 0.2s; }
  .riepilogo.entra .riepilogo-statistiche .dato { animation-delay: 0.25s; }
  .entra .avanzamento span { transform-origin: left center; animation: cresce 0.9s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  /* Carte che si possono aprire: si sollevano un poco sotto il puntatore */
  .carta-prestito { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
  .carta-prestito:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }

  /* Pulsanti: rispondono al clic, i principali si illuminano */
  button { transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, transform 0.12s; }
  button:active:not(:disabled) { transform: scale(0.97); }
  .azioni > button:not(.secondario):not(.pericoloso):hover, #guida-avanti:hover, #aggiungi-prestito:hover, #aggiungi-offerta:hover {
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accento) 70%, transparent);
  }
  button > .icona-aggiunta { transition: transform 0.2s ease; }
  button:hover > .icona-aggiunta { transform: translateX(1px) scale(1.08); }
  button[aria-busy="true"]::after { animation: gira 0.8s linear infinite; }
  .rotella { animation: gira 0.9s linear infinite; }

  /* Avviso in basso, menu dei temi, pannelli che si aprono */
  .notifica.compare { animation: avviso-entra 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .menu-temi:not([hidden]) { animation: menu-entra 0.2s ease-out both; }
  .finestra-novita[open] { animation: menu-entra 0.25s ease-out both; }
  .finestra-novita[open]::backdrop { animation: appare 0.25s ease-out both; }
  details[open] > :not(summary) { animation: appare 0.25s ease-out both; }

  /* Guida: il passo nuovo arriva dal lato verso cui si va */
  .passo-avanti :is(#titolo-passo, #testo-passo, #campi-passo) { animation: da-destra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .passo-indietro :is(#titolo-passo, #testo-passo, #campi-passo) { animation: da-sinistra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .passo-avanti #campi-passo, .passo-indietro #campi-passo { animation-delay: 0.04s; }

  /* Il mese in corso nel piano respira piano */
  #tabella-piano tr.corrente .segno { animation: respiro 2.4s ease-in-out infinite; }

  /* Cambio di tema: i colori sfumano invece di saltare */
  body, .testata, .carta, .dato { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 0.3s, 0.3s, 0.3s, 0.2s, 0.2s; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .menu-temi:not([hidden]) { animation: menu-sale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}

/* ---------- 11. Percorso breve: una domanda per pagina, le rate una alla volta, l'assistente ---------- */

/* Una domanda per pagina: casella grande, spiegazione corta sotto, quella lunga a richiesta */
.una-domanda #titolo-passo { font-size: calc(26px * var(--testo)); }
.domanda-sola { margin-bottom: 0; }
.domanda-sola > input[type="text"], .domanda-sola > div > input[type="date"], .con-unita input { min-height: 52px; font-size: calc(20px * var(--testo)); padding: 0 var(--s3); }
.domanda-sola > input[type="text"] { width: 100%; max-width: 360px; }
.domanda-sola > div > input[type="date"] { width: 100%; max-width: 280px; }
.domanda-sola .spunta { margin-top: var(--s3); }
.con-unita { display: flex; align-items: center; gap: 10px; max-width: 360px; }
.con-unita input { flex: 1; min-width: 0; text-align: right; }
.con-unita span { font-size: calc(18px * var(--testo)); font-weight: 600; color: var(--inchiostro-2); min-width: 1.2em; }
.titolo-domanda.grande { font-size: calc(18px * var(--testo)); }
.spiegazione-corta { margin: var(--s3) 0 0; max-width: 62ch; font-size: calc(14.5px * var(--testo)); line-height: 1.5; color: var(--inchiostro-2); }
.piu-spiegazioni { margin-top: var(--s3); }
.piu-spiegazioni > summary { cursor: pointer; font-size: calc(14px * var(--testo)); font-weight: 600; color: var(--accento); }
.piu-spiegazioni[open] > summary { margin-bottom: var(--s2); }
.piu-spiegazioni .con-unita { margin-top: var(--s2); }
.domanda-sola .campi { margin-bottom: var(--s3); }

/* La durata: in anni o in rate, con le durate pronte */
.durata .segmenti { display: inline-flex; margin-bottom: var(--s3); }
.campi-durata { display: flex; flex-wrap: wrap; gap: var(--s3); }
.campi-durata .con-unita { max-width: 190px; }
.campi-durata .con-unita span { min-width: 3em; }
.anni-pronti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.durata + #durata-anni { margin-top: var(--s3); font-size: calc(16px * var(--testo)); font-weight: 650; color: var(--inchiostro); }
@media (max-width: 760px) {
  .campi-durata { flex-wrap: nowrap; }
  .campi-durata .con-unita { flex: 1 1 0; min-width: 0; }
  .campi-durata .con-unita span { min-width: 0; }
}

/* Le spese iniziali una per riga: che cos'è, quanto, la × per toglierla; sotto le voci pronte e il totale.
   Quando non c'è posto (telefono, carte delle offerte) la cifra va a capo sotto il nome, e ogni spesa sta in un
   riquadro, così si vede quale cifra va con quale nome. */
.voci-spese { display: flex; flex-direction: column; gap: var(--s3); max-width: 600px; container: spese / inline-size; }
.righe-spese { display: flex; flex-direction: column; gap: var(--s2); }
.voce-spesa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); }
@container spese (max-width: 400px) {
  .voce-spesa { padding: var(--s2); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie-2); }
}
.voce-spesa > input { flex: 1 1 200px; min-width: 0; }
.voce-spesa .con-unita { flex: 1 1 140px; max-width: 230px; }
.voce-spesa .togli-spesa { flex: none; width: var(--alto-piccolo); padding: 0; font-size: calc(20px * var(--testo)); line-height: 1; }
.spese-pronte { display: flex; flex-wrap: wrap; gap: 6px; }
.totale-spese { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: calc(14px * var(--testo)); line-height: 1.5; color: var(--inchiostro-2); }
.totale-spese strong { font-size: calc(17px * var(--testo)); color: var(--inchiostro); }
/* Nella guida le caselle sono grandi come le altre domande; nei moduli (dati, regole, offerte) restano normali */
#campi-passo .voce-spesa > input { min-height: 52px; font-size: calc(17px * var(--testo)); padding: 0 var(--s3); }
.campo-spese { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: calc(14px * var(--testo)); }
.campi .campo-spese { grid-column: 1 / -1; }
.campo-spese .etichetta-campo { font-weight: 600; color: var(--inchiostro); }
.campo-spese .con-unita input { min-height: var(--alto-controllo); font-size: calc(15px * var(--testo)); }
.campo-spese .con-unita span { font-size: calc(15px * var(--testo)); }
.campo-spese .voci-spese { gap: var(--s2); }
.campo-spese .totale-spese strong { font-size: calc(15px * var(--testo)); }

/* Le rate una alla volta: la data per esteso, i pulsanti, quelle già scritte */
.rata-sola .data-rata { display: inline-block; margin: 0 0 var(--s4); padding: 10px 14px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r2); font-size: calc(16px * var(--testo)); }
.azioni-rata { margin-top: var(--s4); }
.rate-scritte { margin-top: var(--s4); }
.rate-scritte > .nota { margin: 0; }
.chip-rate { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.chip-rate button.attuale { border-color: var(--accento); background: var(--accento-tenue); }
/* Le rate bastano: il programma dice in chiaro che non serve continuare */
.rate-bastano { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--ok-sfondo); color: var(--ok-testo); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: var(--r2); font-size: calc(15px * var(--testo)); }
.rate-bastano p { margin: 0; }
.rate-bastano p + p, .rate-bastano p + button { margin-top: var(--s2); }
.rate-bastano strong { font-size: calc(17px * var(--testo)); }

/* Mentre si scrivono le rate: quanto il programma è sicuro, e il robottino che racconta i conti */
.calcolo-rate { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r2); }
.testa-calcolo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: 6px; font-size: calc(14px * var(--testo)); color: var(--inchiostro-2); }
.testa-calcolo .percento { font-size: calc(16px * var(--testo)); color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.barra-sicurezza { height: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accento) 14%, var(--superficie)); }
.barra-sicurezza > span {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background-image: linear-gradient(90deg, var(--accento), color-mix(in srgb, var(--accento) 45%, var(--ok-testo)));
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.al-lavoro .barra-sicurezza > span {
  min-width: 18px;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 7px, transparent 7px 14px), linear-gradient(90deg, var(--accento), color-mix(in srgb, var(--accento) 45%, var(--ok-testo)));
  background-size: 20px 20px, 100% 100%;
}
.righe-robot { min-height: 4.8em; margin: var(--s3) 0 0; padding: 0; list-style: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: calc(12.5px * var(--testo)); line-height: 1.25; color: var(--inchiostro-2); }
.righe-robot li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.righe-robot li::before { content: "› "; color: var(--accento); }
.righe-robot li:not(:last-child) { opacity: 0.55; }
.righe-robot li.fatto { color: var(--ok-testo); font-weight: 650; }
.righe-robot li.quasi { color: var(--avviso-testo); font-weight: 650; }
.righe-robot li.fatto::before, .righe-robot li.quasi::before { content: ""; }

/* L'assistente: un robottino con le sue parole, nella guida sopra il titolo e in cima alle schede */
.assistente { display: flex; align-items: flex-start; gap: 12px; margin: var(--s1) 0 var(--s4); }
.assistente[hidden] { display: none; }
.assistente .avatar { flex: none; width: 58px; height: 58px; }
.assistente .robot { display: block; width: 100%; height: 100%; overflow: visible; }
.parole {
  position: relative; flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--linea-forte);
  border-radius: 4px var(--r2) var(--r2) var(--r2); color: var(--inchiostro); font-size: calc(14.5px * var(--testo)); line-height: 1.45;
}
.parole .scritto { margin: 0; }
.robot { --tratto: var(--inchiostro); }   /* occhi e bocca: scuri fissi dove il viso è sempre bianco */
.robot-sfera, .robot-gigante, .robot-gattobot { --tratto: #1e1b4b; }
.robot .testa { fill: var(--accento); }
.robot .viso { fill: var(--superficie); }
.robot .orecchio { fill: color-mix(in srgb, var(--accento) 70%, #000000); }
.robot .antenna { stroke: var(--accento); stroke-width: 2.5; stroke-linecap: round; }
.robot .antenna-luce { fill: #f5b301; }
.robot .occhi > * { fill: var(--tratto); }   /* gli occhi, di ogni forma (ellissi, quadretti…) */
.robot .occhi-felici, .robot .bocca { fill: none; stroke: var(--tratto); stroke-width: 2.2; stroke-linecap: round; }
.robot .occhi-felici, .robot .bocca-aperta { display: none; }
.robot .bocca-aperta { fill: var(--tratto); }
.robot .guancia { fill: #f28b8b; opacity: 0.5; }
.robot .nuvoletta circle { fill: var(--tenue); opacity: 0; }
.robot .occhi, .robot .corpo { transition: transform 0.3s ease; }
.assistente.felice .occhi { display: none; }
.assistente.felice .occhi-felici { display: inline; }
.assistente.pensa .occhi { transform: translate(1.5px, -2.5px); }
.assistente.pensa .nuvoletta circle { opacity: 0.85; }
.assistente.dubbio .corpo { transform: rotate(-7deg); transform-origin: 32px 44px; }
.assistente.scrive .bocca { display: none; }
.assistente.scrive .bocca-aperta { display: inline; }
/* In cima alle schede: più piccolo, si richiude lasciando solo la testa */
.assistente.nel-programma { max-width: var(--larghezza-pagina); margin: var(--s4) auto 0; padding: 0 var(--s5); }
.nel-programma .avatar { width: 46px; height: 46px; }
.nel-programma .parole { padding-right: 38px; font-size: calc(14px * var(--testo)); }
.chiudi-assistente {
  position: absolute; top: 4px; right: 4px; min-height: 0; width: 28px; height: 28px; padding: 0;
  background: none; border: 0; color: var(--tenue); font-size: calc(20px * var(--testo)); line-height: 1; box-shadow: none;
}
.chiudi-assistente:hover { background: var(--velo); color: var(--inchiostro); }
/* «Che cos'è?» (assistente.js): solo dove non c'è un mouse che passa sopra alle cose, cioè telefoni e tablet */
.parole .spiegami { display: none; margin-top: var(--s2); }
@media (hover: none) { .parole .spiegami:not([hidden]) { display: inline-flex; } }
/* La modalità ispezione («Che cos'è?» premuto): la cosa spiegata ha un bordo; mentre l'assistente segue la pagina,
   quando tace il fumetto resta piccolo con «Fine», così l'ispezione si spegne da qualunque punto della pagina */
html[data-spiegami] .ispezionato { outline: 3px solid var(--accento); outline-offset: 2px; }
.parole .ispezione-breve { display: none; }
.assistente.segue.zitto.ispeziona .parole { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding-right: 14px; }
.assistente.segue.zitto.ispeziona .scritto, .assistente.segue.zitto.ispeziona .chiudi-assistente { display: none; }
.assistente.segue.zitto.ispeziona .ispezione-breve { display: inline; }
.assistente.segue.zitto.ispeziona .spiegami { margin-top: 0; }
.nel-programma.richiuso .parole { display: none; }
.nel-programma.richiuso .avatar { width: 38px; height: 38px; cursor: pointer; }
.nel-programma.richiuso .avatar:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: 12px; }
/* Quando la pagina scorre oltre, l'assistente la segue nell'angolo in basso a destra: la testa sempre, il fumetto
   quando ha qualcosa da dire («zitto»: solo la testa). Il margine in basso lo calcola assistente.js (barre fisse). */
.assistente.segue {
  position: fixed; z-index: 35; right: var(--s4); bottom: calc(var(--sotto-assistente, 0px) + var(--s4));
  flex-direction: row-reverse; align-items: flex-end; max-width: min(420px, calc(100vw - 2 * var(--s4)));
  margin: 0 !important; padding: 0 !important; pointer-events: none;   /* i clic passano sotto, tranne su testa e fumetto */
}
.assistente.segue > * { pointer-events: auto; }
.assistente.segue .avatar, .nel-programma.segue .avatar {
  width: 58px; height: 58px; padding: 6px; border-radius: 50%; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--ombra-alta);
}
.assistente.segue .parole {
  flex: 0 1 auto; max-height: 45vh; overflow-y: auto; border-radius: 16px 16px 4px 16px;
  background: color-mix(in srgb, var(--accento) 9%, var(--superficie)); box-shadow: var(--ombra-alta);
}
.assistente.segue.zitto .parole { display: none; }
.assistente.spiega .parole { background: var(--accento-tenue); border-color: var(--accento); }
.posto-assistente { display: flow-root; position: relative; min-width: 0; }   /* flow-root: il margine dell'assistente resta dentro, così l'altezza tenuta è giusta */
/* Al suo posto, la spiegazione si apre sopra la pagina (il segnaposto tiene l'altezza): niente salti sotto il mouse */
.assistente.sovrapposto { position: absolute; z-index: 15; top: 0; left: 0; right: 0; }
.assistente.sovrapposto .parole { background: var(--accento-tenue); border-color: var(--accento); box-shadow: var(--ombra-alta); }
@media (min-width: 1100px) {
  body:has(.schede:not([hidden])) .assistente.nel-programma { padding: 0 var(--s6); margin-top: var(--s5); }
}
@media (max-width: 760px) {
  .una-domanda #titolo-passo { font-size: calc(22px * var(--testo)); }
  .assistente { gap: 10px; }
  .assistente .avatar { width: 44px; height: 44px; }
  .parole { font-size: calc(14px * var(--testo)); }
  .assistente.nel-programma { padding: 0 var(--s4); margin-top: var(--s3); }
  .nel-programma .avatar { width: 38px; height: 38px; }
  .assistente.segue { left: var(--s3); right: var(--s3); max-width: none; bottom: calc(var(--sotto-assistente, 0px) + var(--s2)); }
  .assistente.segue .avatar, .nel-programma.segue .avatar { width: 50px; height: 50px; padding: 5px; }
}

@keyframes palpebre { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes saltello { 0% { transform: translateY(0); } 35% { transform: translateY(-5px); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes parla { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes pensiero { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes luce { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes parole { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes strisce { to { background-position: 20px 0, 0 0; } }
@keyframes riga-robot { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes segue-entra { from { opacity: 0; transform: translateY(18px) scale(0.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .assistente.segue { animation: segue-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .robot .occhi > * { transform-box: fill-box; transform-origin: center; animation: palpebre 5s infinite; }
  .robot .corpo { animation: galleggia 3.4s ease-in-out infinite; }
  .assistente.felice .corpo { animation: saltello 0.6s ease-out, galleggia 3.4s ease-in-out 0.6s infinite; }
  .assistente.dubbio .corpo { animation: none; }
  .robot .antenna-luce { animation: luce 2.2s ease-in-out infinite; }
  .assistente.pensa .nuvoletta circle { animation: pensiero 1.1s ease-in-out infinite; }
  .assistente.pensa .nuvoletta circle:last-child { animation-delay: 0.25s; }
  .assistente.scrive .bocca-aperta { transform-box: fill-box; transform-origin: center; animation: parla 0.18s ease-in-out infinite alternate; }
  .parole.appena-detto { animation: parole 0.35s ease-out; }
  .al-lavoro .barra-sicurezza > span { animation: strisce 0.6s linear infinite; }
  .righe-robot li.nuova { animation: riga-robot 0.3s ease-out; }
  /* Gli aspetti «da intelligenza artificiale» (assistente.js): ognuno con il suo movimento */
  .robot-codice .pioggia path { animation: pioggia 1.6s linear infinite; }
  .robot-codice .pioggia path:nth-child(2n) { animation-duration: 2.1s; }
  .robot-codice .pioggia path:nth-child(3n) { animation-duration: 1.25s; }
  .robot-occhio-rosso .occhi > * { animation: none; }   /* l'occhio rosso non sbatte: respira */
  .robot-occhio-rosso .occhi { animation: respiro-occhio 3.2s ease-in-out infinite; }
  .robot-scanner .scorre, .robot-scanner .scia { animation: scorre 1.5s ease-in-out infinite alternate; }
  .robot-scanner .scia { animation-delay: 0.12s; }
  .robot-scanner .occhi > * { animation: none; }
  .robot-ologramma .luce-ologramma { animation: tremola 4.5s linear infinite; }
  .robot-onda .colori-onda { animation: gira 7s linear infinite; }
  .assistente.scrive .robot-onda .colori-onda, .assistente.pensa .robot-onda .colori-onda { animation-duration: 1.6s; }
  .robot-reattore .anello-fuori { animation: gira 14s linear infinite; }
  .robot-reattore .anello-mezzo { animation: gira 9s linear infinite reverse; }
  .assistente.pensa .robot-reattore .anello-mezzo { animation-duration: 2s; }
}
.robot-onda .colori-onda ellipse { mix-blend-mode: screen; }
.robot-onda .colori-onda, .robot-reattore .anello-fuori, .robot-reattore .anello-mezzo { transform-origin: 32px 32px; }
@keyframes pioggia { to { stroke-dashoffset: -18; } }
@keyframes respiro-occhio { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes scorre { from { transform: translateX(-15.5px); } to { transform: translateX(16.5px); } }
@keyframes tremola { 0%, 44%, 49%, 78%, 100% { opacity: 1; } 46% { opacity: 0.55; } 47.5% { opacity: 0.9; } 80% { opacity: 0.7; } }

/* ---------- 12. Schermata di caricamento ----------
   #caricamento (index.html) copre tutta la pagina, testata compresa, con lo sfondo del tema, finché app.js non ha
   disegnato la prima pagina (docs/progetto-generale.md, sezione 42). Il contenuto compare dopo un quarto di secondo:
   quando la pagina è pronta subito non lampeggia. La barra si muove con transform e il contenuto sfuma con opacity:
   il browser li anima a parte, quindi continuano anche mentre la pagina è occupata dai conti. */
.caricamento {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s5) var(--s4);
  background: var(--sfondo-pagina); color: var(--inchiostro); text-align: center;
}
.caricamento-interno { display: flex; flex-direction: column; align-items: center; gap: var(--s3); max-width: 340px; }
.caricamento p { margin: 0; }
.caricamento .logo { width: 76px; height: 76px; margin-bottom: var(--s2); border-radius: 22px; box-shadow: var(--ombra-alta); cursor: default; }
.caricamento .logo:empty { visibility: hidden; }   /* prima che loghi.js disegni il simbolo, niente riquadro vuoto */
.caricamento-nome { font-family: var(--carattere-titoli); font-weight: 800; font-size: calc(22px * var(--testo)); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.15; }
.caricamento-nome span { color: var(--accento); }
.caricamento-barra { display: none; width: 168px; height: 5px; border-radius: 3px; background: var(--accento-tenue); overflow: hidden; }
.caricamento-barra span { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--accento); }
.caricamento-testo { color: var(--tenue); font-size: calc(14.5px * var(--testo)); }
.caricamento-lento { color: var(--tenue); font-size: calc(13.5px * var(--testo)); visibility: hidden; animation: caricamento-lento 0s 12s both; }
.caricamento.finito { opacity: 0; pointer-events: none; }
@keyframes caricamento-lento { to { visibility: visible; } }
@keyframes caricamento-scorre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Con «riduci movimento» il contenuto c'è subito, la barra non c'è e la schermata se ne va senza sfumare. */
@media (prefers-reduced-motion: no-preference) {
  .caricamento-interno { animation: appare 0.3s ease-out 0.25s both; }
  .caricamento-barra { display: block; }
  .caricamento-barra span { animation: caricamento-scorre 1.1s ease-in-out infinite; }
  .caricamento.finito { transition: opacity 0.3s ease; }
}

/* ---------- 13. Le novità all'apertura ----------
   #novita (index.html) è un <dialog> che novita.js apre con showModal() quando il programma ha qualcosa di nuovo
   (docs/progetto-generale.md, sezione 46): sta sopra tutto, sullo sfondo scurito, finché non si chiude. Il riquadro
   interno porta il margine, così un clic sullo sfondo arriva al <dialog> e lo chiude. */
.finestra-novita {
  width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie); color: var(--inchiostro);
  border: var(--spessore) solid var(--bordo); border-radius: var(--r3); box-shadow: var(--ombra-alta);
}
.finestra-novita::backdrop { background: rgba(15, 23, 42, 0.5); }
.novita-interno { padding: var(--s5); }
.finestra-novita h2 { margin: 0; font-size: calc(20px * var(--testo)); }
.finestra-novita .nota { margin: var(--s2) 0 0; }
.elenco-novita { list-style: none; display: grid; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; }
.elenco-novita li { display: flex; align-items: flex-start; gap: var(--s3); }
.elenco-novita .distintivo-icona { margin: 0; }
.elenco-novita strong { display: block; font-size: calc(15.5px * var(--testo)); line-height: 1.35; }
.elenco-novita p { margin: 3px 0 0; color: var(--inchiostro-2); font-size: calc(14.5px * var(--testo)); line-height: 1.5; }
.finestra-novita .azioni { margin-top: var(--s5); }
.finestra-novita .nota.piccola { margin-top: var(--s4); }
@media (max-width: 760px) {
  .novita-interno { padding: var(--s4); }
  .finestra-novita .azioni button { flex: 1; }
}