/* Stile degli strumenti (obiettivo, rata, rivalutazione).
   Una modifica qui vale per tutte le pagine che caricano questo file; lo stile proprio di una pagina
   resta nel suo <style>, che viene dopo e quindi prevale. I link hanno ?v=versione: il browser tiene
   il file per un anno e scarica quello nuovo a ogni versione (lo controlla pubblica.sh). */
/* Stessa identità della homepage: blu notte e oro su avorio, schede bianche arrotondate.
   Computer: ipotesi a sinistra (ferme), risultati a destra. Telefono: una colonna e barra della rata in basso. */
:root {
  --avorio: #f5f3ee;
  --bianco: #ffffff;
  --bordo: #e6e2d8;
  --riga: #f0ede6;
  --inchiostro: #2b2d31;
  --testo: #4a5260;
  --tenue: #8a8f98;
  --blu: #173a5e;
  --blu-scuro: #0d2440;
  --blu-tinta: #eaeff5;
  --blu-icona: #dfe7f0;
  --oro: #c9a14a;
  --oro-scuro: #8a6a1f;
  --oro-chiaro: #e2c27e;
  --verde-testo: #0a7a0a;
  --rosso-testo: #c43534;
  /* colori dei dati (gli stessi dell'anteprima in homepage) */
  --dati-versato: #2a78d6;
  --dati-interessi: #0ca30c;
  --dati-perdite: #e34948;
  --dati-linea: #0d2440;
  --griglia: #efebe2;
  --asse: #c9c3b4;
  --raggio-grande: 28px;
  --raggio: 20px;
  --larghezza: 1200px;
  --titoli: "Poppins", system-ui, sans-serif;
}
body {
  margin: 0; background: var(--avorio); color: var(--testo);
  font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--titoli); color: var(--inchiostro); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
/* fascia del titolo */
.apertura {
  background: var(--blu);
  color: #fff; padding: 36px 0 96px;
}
.briciole { font-size: 14px; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.apertura h1 { color: #fff; font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; line-height: 1.1; max-width: 22ch; }
.apertura .lead { margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, .85); max-width: 46em; }
/* strumento */
.strumento { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: -64px; padding-bottom: 72px; }
.colonna { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.colonna.ipotesi { position: sticky; top: 104px; }
.riquadro { background: #fff; border-radius: var(--raggio-grande); padding: 28px; box-shadow: 0 2px 4px rgba(20, 30, 40, .03), 0 12px 32px rgba(20, 30, 40, .07); min-width: 0; }
.riquadro h2 { font-size: 20px; font-weight: 700; }
.riquadro .sotto { margin-top: 4px; font-size: 14px; color: var(--tenue); }
/* premessa fissa sopra i campi: stessa frase in tutti gli strumenti */
.riquadro .premessa { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--oro); background: var(--avorio); font-size: 13.5px; line-height: 1.5; color: var(--testo); }
@media print { .riquadro .premessa { display: none; } }
.occhiello { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blu); }
/* ipotesi */
.parametro { margin-top: 22px; }
.parametro .riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.parametro .riga .campo { margin-left: auto; }
.parametro label { font-weight: 600; font-size: 15px; color: var(--inchiostro); }
.campo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1.5px solid var(--bordo); border-radius: 999px; padding: 5px 14px; background: var(--avorio);
}
.campo:focus-within { border-color: var(--blu); background: #fff; }
.campo input {
  font: inherit; font-size: 16px; font-weight: 600; color: var(--inchiostro);
  border: 0; background: transparent; outline: none; text-align: right; padding: 0;
  font-variant-numeric: tabular-nums;
}
.campo span { color: var(--tenue); font-size: 15px; }
#n-tasso { width: 52px; }
/* spazio per il mese scritto per intero ("settembre 2066") più l'icona del calendario */
#n-data { width: 168px; text-align: left; }
input[type=range] { width: 100%; margin: 12px 0 2px; accent-color: var(--blu); cursor: pointer; height: 22px; }
.estremi { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tenue); }
.estremi b { color: var(--blu); font-weight: 600; }
.separatore { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--bordo); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); }
.separatore + .parametro { margin-top: 14px; }
/* inflazione: interruttore, campo e nota con le fonti */
.interruttore { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interruttore input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: #cbc6b9; position: relative; cursor: pointer; transition: background .15s; }
.interruttore input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.interruttore input:checked { background: var(--blu); }
.interruttore input:checked::after { transform: translateX(16px); }
.interruttore input:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
#n-inflazione { width: 44px; }
.campo.spento { opacity: .45; }
.fonte-inflazione { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--tenue); }
/* quando arrivi all'obiettivo con la cifra che riesci a mettere da parte */
.tempo-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 12px; }
.tempo .valore { font-family: var(--titoli); font-size: 30px; font-weight: 800; color: var(--blu-scuro); line-height: 1.15; }
.tempo .quando { font-size: 17px; font-weight: 700; color: var(--oro-scuro); }
.tempo .nota-tempo { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.tempo .nota-tempo:empty { display: none; }
.nota-rif { margin-top: 12px; font-size: 13px; color: var(--tenue); line-height: 1.5; }
.scelta { display: flex; margin-top: 10px; background: var(--avorio); border-radius: 999px; padding: 4px; gap: 4px; }
.scelta label { flex: 1; text-align: center; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--testo); cursor: pointer; border-radius: 999px; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta label:has(input:checked) { background: var(--blu); color: #fff; }
.scelta label:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 1px; }
/* condivisione della simulazione */
.condividi { margin-top: 24px; }
.condividi button { width: 100%; font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: var(--blu); border: 1.5px solid var(--blu); border-radius: 999px; padding: 11px 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.condividi button:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }
.condividi button:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.esito-condividi { margin-top: 8px; font-size: 14px; color: var(--verde-testo); text-align: center; }
.esito-condividi:empty { display: none; }
.link-condividi { width: 100%; margin-top: 8px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1.5px solid var(--bordo); border-radius: 10px; background: var(--avorio); color: var(--inchiostro); }
.sostegno-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--tenue); text-align: center; }
/* "Segnala un errore": apre la posta di chi visita con un messaggio già pronto (segnala.js) */
.segnala-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--tenue); text-align: center; }
.segnala-nota a { color: var(--blu); font-weight: 600; }
.condividi + .ripristina { margin-top: 10px; }
.ripristina { margin-top: 24px; width: 100%; font: inherit; font-weight: 600; font-size: 15px; color: var(--blu); background: none; border: 1.5px solid var(--bordo); border-radius: 999px; padding: 11px 0; cursor: pointer; }
.ripristina:hover { border-color: var(--blu); }
/* risultati */
.tile-rata { background: var(--blu-scuro); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; }
.tile-rata .etichetta { grid-column: 1 / -1; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--oro-chiaro); }
.tile-rata .valore { font-family: var(--titoli); font-size: clamp(44px, 6vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.tile-rata .valore small { font-size: .42em; font-weight: 600; color: var(--oro-chiaro); margin-left: 6px; }
.tile-rata .dettaglio { font-size: 15px; color: rgba(255, 255, 255, .82); max-width: 30ch; line-height: 1.5; }
.kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi .riquadro { padding: 22px; border-radius: var(--raggio); display: flex; flex-direction: column; }
.tile .etichetta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); }
.tile .valore { font-family: var(--titoli); font-size: 26px; font-weight: 700; color: var(--inchiostro); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.tile .dettaglio { font-size: 14px; margin-top: auto; padding-top: 8px; line-height: 1.45; }
.positivo { color: var(--verde-testo) !important; }
.negativo { color: var(--rosso-testo) !important; }
.grafico .testata-grafico { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.legenda { display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.area-grafico { position: relative; height: clamp(260px, 32vw, 380px); margin-top: 16px; touch-action: pan-y; }
.area-grafico text { font-family: "Inter", system-ui, sans-serif; font-size: 12px; fill: var(--tenue); font-variant-numeric: tabular-nums; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--blu-scuro); color: #fff; font-size: 13px; line-height: 1.5;
  padding: 10px 14px; border-radius: 12px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .1s;
  font-variant-numeric: tabular-nums;
}
.tooltip .t-riga { display: flex; justify-content: space-between; gap: 18px; }
.tooltip .t-riga span:first-child { color: rgba(255, 255, 255, .7); }
.tabella { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: 12px; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; text-align: right; padding: 0 0 10px; border-bottom: 1px solid var(--bordo); }
th:first-child, td:first-child { text-align: left; }
td { padding: 11px 0; border-bottom: 1px solid var(--riga); text-align: right; font-size: 15px; white-space: nowrap; }
td:first-child { white-space: normal; padding-right: 12px; }
tr:last-child td { border-bottom: 0; }
.zero { color: var(--tenue); }
.note { margin: 12px 0 0; padding-left: 20px; font-size: 15px; }
.note li + li { margin-top: 6px; }
/* esempi già calcolati, scritti nella pagina: leggibili anche senza JavaScript (motori di ricerca e assistenti AI) */
.titolo-esempi { font-size: 17px; margin: 22px 0 8px; }
.esempi-calcolati { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.nota-esempi { font-size: 13px; color: var(--tenue); margin: 6px 0 0; }
.barra-rata .etichetta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--oro-chiaro); }
.barra-rata .valore { font-family: var(--titoli); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-rata .valore small { font-size: 14px; color: var(--oro-chiaro); font-weight: 600; }
footer .alto { padding-top: 48px; padding-bottom: 28px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
footer .motto { margin-top: 16px; font-size: 16px; }
footer h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .55); margin: 6px 0 14px; }
footer li + li { margin-top: 8px; }
footer .avviso { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px; padding-bottom: 22px; font-size: 14px; }
.nota-risultato { display: block; margin-top: 8px; font-size: 13px; color: var(--tenue); }
.tile-rata .nota-risultato { color: rgba(255, 255, 255, .72); }
/* data, ora, versione e link della simulazione: solo sul foglio stampato */
.stampa-info { display: none; }
@media print {
  .tile-rata .nota-risultato { font-size: 7pt; margin-top: .4mm; }
  .apertura .contenitore { position: relative; }
  .apertura .stampa-info { display: block; position: absolute; top: 0; right: 0; width: 47%; margin: 0; text-align: right; font-size: 7pt; line-height: 1.3; color: #333; overflow-wrap: anywhere; }
  .apertura h1 { max-width: 51% !important; font-size: 14pt !important; }
}
footer .basso { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; padding-bottom: 28px; font-size: 14px; color: rgba(255, 255, 255, .55); }
@media (max-width: 1080px) {
  .strumento { grid-template-columns: 340px minmax(0, 1fr); }
  .kpi { grid-template-columns: 1fr 1fr; }
  .kpi .riquadro:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .strumento { grid-template-columns: minmax(0, 1fr); margin-top: -64px; }
  .colonna.ipotesi { position: static; }
  .apertura { padding: 28px 0 88px; }
  footer .alto { grid-template-columns: 1fr; gap: 28px; }
  body { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .contenitore { padding: 0 16px; }
  .riquadro { padding: 22px 18px; border-radius: var(--raggio); }
  .tile-rata { grid-template-columns: minmax(0, 1fr); }
  .kpi { grid-template-columns: minmax(0, 1fr); }
  .kpi .riquadro:last-child { grid-column: auto; }
  .legenda { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tooltip { transition: none; } }
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  body { background: #fff; font-size: 9pt; padding: 0; }
  /* l'avvertenza resta sempre, anche sul foglio stampato */
  footer { background: none !important; color: #333 !important; }
  footer .contenitore.avviso { max-width: none; margin: 2mm 0 0; padding: 1.4mm 0 0; border-top: 1px solid #bbb; font-size: 7pt; line-height: 1.35; }
  .apertura { background: none; color: var(--inchiostro); padding: 0 0 3mm; }
  .apertura h1 { color: var(--blu-scuro); font-size: 16pt; max-width: none; }
  .contenitore { max-width: none; padding: 0; }
  .strumento { grid-template-columns: 74mm minmax(0, 1fr); gap: 3.5mm; margin: 0; padding: 0; }
  .colonna { gap: 2.8mm; }
  .colonna.ipotesi { position: static; }
  .riquadro { box-shadow: none; border: 1px solid var(--bordo); padding: 2.6mm 3.6mm; border-radius: 3mm; }
  .riquadro h2 { font-size: 10.5pt; }
  .riquadro .sotto, .estremi, .separatore { font-size: 7.5pt; }
  .fonte-inflazione { display: none; }
  .parametro .riga { flex-wrap: nowrap; }
  .interruttore { gap: 2mm; }
  .interruttore input { width: 7mm; height: 4mm; }
  .interruttore input::after { top: .5mm; left: .5mm; width: 3mm; height: 3mm; }
  .interruttore input:checked::after { transform: translateX(3mm); }
  .parametro { margin-top: 2.1mm; }
  .parametro label, .campo input, .campo span, .scelta label { font-size: 8.5pt; }
  .campo { padding: .5mm 2.5mm; }
  input[type=range] { margin: 1.2mm 0 0; height: 4mm; }
  .separatore { margin-top: 3mm; padding-top: 2mm; }
  .scelta { margin-top: 1.2mm; }
  .scelta label { padding: 1mm 0; }
  .tile-rata { padding: 2.6mm 4.5mm; gap: 1mm 6mm; }
  .tile-rata .valore { font-size: 22pt; }
  .tile-rata .dettaglio, .tile .dettaglio { font-size: 8pt; }
  .kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5mm; }
  .kpi .riquadro { padding: 2.4mm 3.6mm; }
  .kpi .riquadro:last-child { grid-column: auto; }
  .tile .valore { font-size: 13pt; margin-top: .6mm; }
  .tile .dettaglio { padding-top: 1mm; }
  .tile .etichetta, .tile-rata .etichetta { font-size: 7.5pt; }
  .tempo .tempo-riga { margin-top: .8mm; gap: 0 3mm; }
  .tempo .valore { font-size: 12pt; }
  .tempo .quando { font-size: 9pt; }
  .tempo .nota-tempo { margin-top: .6mm; font-size: 8pt; }
  .tempo .sotto, .riquadro .sotto#s-grafico { display: none; }
  .colonna.risultati { gap: 2.2mm; }
  .area-grafico text { font-size: 7.5pt; }
  .legenda { font-size: 7.5pt; }
  .apertura { padding-bottom: 2mm; }
  .area-grafico, .legenda, .scelta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* menu degli strumenti: sei voci non stanno su una riga sotto i 1200 px, quindi fino a lì si usa il menu
   a scomparsa del telefono (sotto i 900 px lo attiva già base.css) */
@media (min-width: 901px) and (max-width: 1199px) {
  .menu-pulsante { display: block; }
  .testata nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .testata nav.aperto { display: flex; }
  .testata nav a { padding: 12px 0; font-size: 17px; }
}