/* I colori stanno tutti qui: il tema scuro ridefinisce le stesse variabili,
   quindi ogni regola scritta con var() lo segue senza essere riscritta.
   `data-theme` sull'<html> vince sulla preferenza di sistema; senza attributo
   (tema "automatico") comanda prefers-color-scheme. */
:root{
  color-scheme:light;
  /* CARTA CON UNA PUNTA DI MENTA e inchiostro blu-petrolio (ottobre 2026, con
     lo spunto di un sito di software chiaro e arioso): il fondo richiama il
     verde acqua dell'accento senza diventare colore, e il testo non e' piu'
     nero ma un blu-petrolio molto scuro. Il verde dei guadagni e il rosso delle
     perdite restano sopra il 4,5:1 anche sulla superficie piu' scura. */
  --bg:#f2f7f5; --card:#fff; --ink:#0f2f35; --muted:#536b71; --line:#dbe7e3;
  /* superfici: 2 = tenue (intestazioni tabella, riquadri info), 3 = pillole.
     Questi erano i colori scritti a mano nelle regole prima del tema; vanno
     tenuti come valori veri, non come var() di se' stessi (una variabile che
     rimanda a se' stessa e' invalida e la regola che la usa sparisce). */
  --surface-2:#eef5f2; --surface-3:#e5efeb; --chip:#e3f2ee; --ink-2:#33505a;
  --card-border:#e1ebe7; --card-bg:rgba(255,255,255,.97);
  --hover:#eaf3f0; --sel:#def1ec; --sel-ink:#2d6359; --sel-line:#b5dbd2;
  /* la linea teorica dei grafici (il portafoglio di oggi ai prezzi di allora):
     un blu, perche' non sia confusa con la linea vera verde acqua */
  --teorica:#2d74c4;
  --ok-bg:#e8f5ec; --ok-ink:#147939; --warn-bg:#fdf3e0; --warn-ink:#7a5200;
  --info-bg:#e3f3ef; --info-ink:#2d6359; --danger-bg:#fdecec; --danger-ink:#b42318;
  --grid:#e5efeb; --backdrop:rgba(15,47,53,.55);
  /* il fumetto e' scuro in tutti e due i temi: e' un foglietto che sta sopra
     la pagina, e cambiare anche lui rende il testo illeggibile a ogni giro */
  --tip-bg:#101828; --tip-ink:#f2f4f7;
  /* la testata resta in alto mentre il resto scorre: il fondo e' quasi
     opaco perche' sotto ci passano schede e grafici */
  --head-bg:rgba(242,247,245,.96);
  /* la cornice dell'applicazione (barra laterale). Era bianca scritta a mano,
     senza versione scura: di notte restava una lastra bianca a fianco */
  --chrome:rgba(255,255,255,.78);
  --alone:radial-gradient(circle at 88% 0,#d9efe8 0,transparent 30%),
          radial-gradient(circle at 0 8%,#f5ece5 0,transparent 24%);
  /* UN SOLO ACCENTO: il verde acqua della Control Tower (#54b1a0, 169 gradi).

     Un accento verde sta vicino al verde dei guadagni, ed e' il rischio da
     tenere d'occhio: per questo il verde dei guadagni nel tema chiaro e' stato
     spostato su un verde piu' "vero" (142 gradi, come nel tema scuro). Prima
     erano a 16 gradi l'uno dall'altro, ora a 27; e i guadagni hanno sempre il
     segno davanti, quindi il colore non e' mai l'unico indizio.

     Tonalita' e saturazione sono quelle del riferimento; cambia solo la
     luminosita', dove serve a reggere il testo. Nel tema scuro l'accento e'
     il riferimento esatto.

     L'ambra resta, con un mestiere stretto: "stimato, da controllare".

     IL SECONDO COLORE: terracotta (20 gradi), il complementare caldo del
     verde acqua. E' la coppia classica della grafica: il verde acqua fa le
     azioni e la struttura, la terracotta da' risalto a quello che va guardato
     per primo (le letture dell'AI, i riassunti «in breve», l'avanzamento, la
     scheda aperta) e sta bene sulla carta calda del fondo. Non porta mai un
     significato di soldi: sta fra il rosso delle perdite (5 gradi) e l'ambra
     delle stime (38), piu' spenta di tutti e due, e non colora mai importi o
     rendimenti (solo contatori e numeri d'ordine).
     Testo 4,7:1 sulla superficie piu' scura e 5,0:1 sul suo fondo; di notte
     9,0:1 sulla carta e 7,7:1 sul fondo.

     Rapporti verificati sulla superficie chiara PIU' SCURA (--surface-3):
     accento 4.7 · verde 4.8 · rosso 4.7 · ambra 4.6. Pulsante: bianco 4.6. */
  --blue:#347267; --green:#137638;
  /* il pulsante primario ha un colore suo: l'accento come TESTO deve reggere
     sulle superfici chiare, come FONDO deve reggere il testo bianco, e nel
     tema scuro le due cose chiedono valori diversi */
  --primary:#3b8074; --primary-hover:#347267; --red:#c5281b; --amber:#8a5a08;
  /* Borsa oggi e la scheda del titolo: la linea che sale o scende, e le pillole con il testo bianco (5,4:1 e 5,7:1) */
  --borsa-su:#137638; --borsa-giu:#c5281b; --borsa-pill-su:#157a3d; --borsa-pill-giu:#c4291c;
  --accento-2:#a4502a; --accento-2-bg:#fbefe8; --accento-2-line:#efcdbd;
  /* le medaglie dei badge (badge-simboli.js): anello teal scuro, filo di rame, simbolo avorio,
     il disco del colore della famiglia. Niente viola: la scala va dal verde all'oro passando per il blu */
  --med-anello:#173b57; --med-rame:#c98a5a; --med-avorio:#fbf3e4;
  --med-smeraldo:#1f8a5b; --med-teal:#1f7a80; --med-blu:#2b5e9e; --med-oro:#b0832a; --med-pietra:#6e6a62;
  --med-zaffiro:#2c5a96; --med-argento:#738290; --med-navy:#27466e; --med-cobalto:#2f58a8; --med-oceano:#1f6a92;
  --med-verde:#2f7a58; --med-terra:#9a5530; --med-ardesia:#4a5f78;
  /* i mondi delle aree (Andrea, 7/10/2026): reddito blu notte e oro, FIRE brace e tramonto, risparmio muschio, debiti acciaio */
  --med-energia:#1b3168; --med-cosmo:#131f48; --med-luce:#f3cf6e; --med-brace:#ad4b2a; --med-tramonto:#c0652f;
  --med-muschio:#4e7634; --med-acciaio:#4b5a69;
  /* il codice QR del report: nero su bianco in ogni tema, se no il telefono non lo legge */
  --qr-carta:#fff;
  --shadow:0 10px 30px rgba(15,47,53,.06);
  /* scala z-index: un solo posto dove leggere l'ordine di sovrapposizione.
     Valori piccoli e distanziati, così restano confrontabili a mente. */
  --z-sticky:1;    /* intestazioni di tabella */
  --z-head:20;     /* testata appiccicata in alto */
  --z-menu:30;     /* menu a tendina */
  --z-combo:40;    /* suggerimenti strumenti */
  --z-overlay:50;  /* velo del drawer mobile */
  --z-sidebar:60;  /* sidebar sopra il velo */
  --z-toast:80;
  --z-tooltip:90;  /* sopra tutto: è sempre una risposta a un gesto dell'utente */
}
*{box-sizing:border-box}
html,body{margin:0}
/* Le superfici che disegna il browser, non l'applicazione: selezione del testo,
   cursore di scrittura, barre di scorrimento. Lasciate ai valori predefiniti
   sono l'unico punto della pagina che non appartiene a nessun tema, e in quello
   scuro stonano parecchio. */
::selection{background:var(--sel);color:var(--sel-ink)}
input,textarea,select{caret-color:var(--blue)}
html{scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
body{
  background:var(--alone),var(--bg);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); min-height:100vh;
}
button,input,select{font:inherit}
/* i campi hanno colori propri del browser: senza dirglielo, nel tema scuro
   restano bianchi con testo scuro (o grigi di sistema) dentro una pagina scura */
input,select,textarea{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* il campo data: con la tastiera il fuoco passa anche sull'icona del calendario, e il bordo deve restare */
input[type=date]:focus,input[type=date]:focus-within{outline:2px solid var(--blue);outline-offset:1px}
/* i link nel testo: il verde del tema, non il blu del browser (che di notte
   diventa viola). Specificita' bassa e regola in alto: i link con uno stile
   loro (notizie, voci della Panoramica, accesso) restano come sono */
:where(#view) a:not([class]){color:var(--sel-ink);text-underline-offset:2px}
:where(#view) a:not([class]):hover{color:var(--ink)}
:where(#view) a:not([class]):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox]{padding:0}
/* il quadratino nativo è 13px: piccolo da centrare. L'area cliccabile resta la
   <label> che lo avvolge, ma il bersaglio visivo diventa più onesto. */
input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);margin:0}
.hidden{display:none!important}
.muted{color:var(--muted)}
.pos{color:var(--green)} .neg{color:var(--red)}
h1{font-size:38px;letter-spacing:-.045em;margin:5px 0}
h2{font-size:18px;margin:0}
/* I titoli delle pagine e delle sezioni nel secondo colore, la terracotta: da
   qui comincia una parte. Restano nel colore del testo i titoli che sono loro
   stessi un risultato (il modello piu' simile, il profilo, il verdetto del
   piano): li' conta cosa dicono, non che sono un titolo. */
#view h2{color:var(--accento-2)}
#view .modhero-testo h2,#view .prof-testa h2,#view .firehero h2{color:var(--ink)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:38px;
  width:min(420px,100%);display:flex;flex-direction:column;gap:12px;border:1px solid var(--card-border)}
.login-card h1{font-size:30px;margin:0}
/* il marchio della barra laterale, in grande sull'accesso e in piccolo sulla
   richiesta di account, dove il titolo e' un altro */
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.login-brand .brand-mark{width:52px;height:52px;border-radius:16px}
.login-brand .brand-mark svg{width:32px;height:32px}
.login-sub{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-top:3px}
.login-brand.compatto{gap:11px;margin-bottom:6px}
.login-brand.compatto .brand-mark{width:36px;height:36px;border-radius:11px}
.login-brand.compatto .brand-mark svg{width:22px;height:22px}
.login-card input{border:1px solid var(--line);border-radius:12px;padding:12px}
/* i consensi della richiesta di account: la casella accanto al testo, tutta
   la riga cliccabile, i link che aprono l'informativa in un'altra scheda */
.reg-consensi{border:0;margin:4px 0 0;padding:0;display:grid;gap:8px}
.reg-consensi legend{padding:0;margin-bottom:6px}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;line-height:1.5;
  color:var(--ink-2);cursor:pointer;padding:8px 10px;border-radius:12px;background:var(--surface-2)}
.login-card .consenso input{width:18px;height:18px;margin-top:2px;padding:0}
.consenso small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.consenso a,.login-legale a,.note a,.reg-aiuto a,.accordo-dlg a,.accordo-testo a{color:var(--sel-ink)}
.login-legale{margin:0;font-size:12px;text-align:center}
.error{color:var(--red);font-size:13px;font-weight:700}
/* la label avvolge la casella: il bersaglio cliccabile e' tutta la riga */
.stayin{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);
  font-weight:700;cursor:pointer;padding:6px 0;min-height:24px}
/* separatore "oppure" fra password e SSO */
.sso-sep{display:flex;align-items:center;gap:10px;margin:4px 0;
  color:var(--muted);font-size:12px}
.sso-sep::before,.sso-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sso-btn{display:block;text-align:center;text-decoration:none}

/* ---------- shell: sidebar + contenuto ---------- */
.shell{--sbw:250px;display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100vh}
.shell.collapsed{--sbw:76px}
.content{--pad:24px;min-width:0;padding:0 var(--pad) 0}

/* Resta in alto mentre scorri: il valore e i comandi sono le due cose che
   servono in qualunque punto della pagina. Il fondo sfuocato e il filo sotto
   compaiono solo quando qualcosa le e' passato sotto. */
.head{position:sticky;top:0;z-index:var(--z-head);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);
  align-items:center;gap:14px;
  padding:14px var(--pad) 12px;margin:0 calc(var(--pad) * -1) 6px;
  background:var(--head-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .15s}
body.scrollata .head{border-bottom-color:var(--line);box-shadow:0 8px 20px #1018280d;
  padding-top:10px;padding-bottom:9px}
/* scorrendo, la cifra si ritira quel tanto che basta a non rubare schermo */
body.scrollata .valore-cifra{font-size:28px}
body.scrollata .head-title h1{font-size:20px}
body.scrollata .head-title .muted{display:none}
.head-title{min-width:0}
/* il sottotitolo va a capo, al massimo su due righe: tagliato a meta' con i
   puntini non si capiva di cosa parlasse la pagina */
@media (min-width:761px){
  .head-title .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    line-height:1.35}
}
.head-title h1{font-size:23px;margin:0;letter-spacing:-.01em}
.head-title .muted{font-size:13px;margin-top:4px}
.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.head>.head-actions{justify-self:end;flex-wrap:nowrap}
/* «Tutti gli account» su due righe dentro il pulsante fa ballare l'altezza
   della testata a ogni scorrimento */
.head .head-actions .btn{white-space:nowrap}
.iconbtn{display:none;padding:9px;line-height:0}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* pulsanti solo-icona sempre visibili (es. riservatezza importi) */
.btn.ico{display:grid;place-items:center;padding:9px;line-height:0}
.btn.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.btn.ico[aria-pressed="true"]{background:var(--sel);border-color:var(--sel-line);color:var(--sel-ink)}
.ico-eye-off{display:none}
.btn.ico[aria-pressed="true"] .ico-eye{display:none}
.btn.ico[aria-pressed="true"] .ico-eye-off{display:block}
.btn{border:1px solid var(--line);border-radius:13px;padding:10px 14px;background:var(--card);
  color:var(--ink);font-weight:750;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s}
.btn:hover:not(:disabled){border-color:var(--muted);box-shadow:0 3px 10px #10182814}
/* un link vestito da pulsante non si sottolinea: e' un pulsante */
a.btn{text-decoration:none}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}
.pick:focus-within{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.accsel{position:relative}
.accmenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:230px;z-index:var(--z-menu);
  display:flex;flex-direction:column;gap:6px}
.accmenu label{display:flex;gap:8px;align-items:center;font-size:13px;padding:4px 6px;border-radius:8px;cursor:pointer}
.accmenu label:hover{background:var(--chip)}

/* ---------- menu utente ---------- */
.usrbtn{padding:5px;border-radius:50%}
.avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#3b8074,#2d6359);color:#fff;
  font-size:11px;font-weight:850;letter-spacing:.02em}
.usrmenu{min-width:214px;padding:6px}
/* Il badge cambia posto quando la barra va a capo: il menu non puo' essere
   ancorato sempre allo stesso lato, ci pensa clampaMenu() in app.js. Qui basta
   che non sia mai piu' largo dello schermo. */
.usrmenu{max-width:calc(100vw - 24px)}
.usrhead{padding:9px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:5px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.usrhead b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usrhead small{font-size:11px}
.usritem{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.usritem:hover{background:var(--chip)}
.usritem.danger{color:var(--red)}
.usritem:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* chi è in sola lettura deve saperlo prima di provare a modificare qualcosa */
.rolechip{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:99px;
  background:var(--warn-bg);color:var(--warn-ink);font-size:10px;font-weight:800;letter-spacing:.02em}

/* caselle dei dossier assegnati a un utente: in tabella e nel modulo di creazione */
.dosslist{display:flex;flex-wrap:wrap;gap:4px 12px;max-width:320px}
.dosslist label{display:flex;gap:6px;align-items:center;font-size:12px;white-space:nowrap;
  padding:2px 0}
.dossfield{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin-top:8px}
.dossfield legend{font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);padding:0 4px}
.dossfield .dosslist{max-width:none}

/* verifica in due passaggi */
/* il QR resta su fondo bianco anche col tema scuro: e' una cosa da
   inquadrare con la fotocamera, e invertito molti lettori non lo prendono */
.qrbox{display:flex;justify-content:center;padding:12px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.qrbox svg{width:190px;height:190px;display:block}
.qrmanual{margin-top:10px;font-size:12px}
.qrmanual summary{cursor:pointer;font-weight:750;color:var(--blue)}
.qrmanual summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.secret{display:inline-block;padding:7px 10px;background:var(--chip);border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  letter-spacing:.08em;user-select:all;word-break:break-all}
.tag.ok2fa{background:var(--ok-bg);color:var(--ok-ink)}
.backupcodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:6px 10px;margin:10px 0 12px;padding-left:22px}
.backupcodes code{font-size:13px;letter-spacing:.06em;user-select:all}

/* ---------- lombard ---------- */
.lomgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:4px}
.lomcell{border:1px solid var(--line);border-radius:14px;padding:12px 13px;background:var(--surface-2)}
.lomcell span{display:block;font-size:11px;color:var(--muted);font-weight:850;letter-spacing:.05em}
.lomcell b{display:block;font-size:19px;margin-top:5px;font-variant-numeric:tabular-nums}
.lomcell.debt b{color:var(--red)}
.lomcell.good b{color:var(--green)}

/* ---------- sidebar ---------- */
.sidebar{position:sticky;top:0;align-self:start;height:100vh;z-index:var(--z-sidebar);
  display:flex;flex-direction:column;gap:6px;padding:20px 14px 16px;
  background:var(--chrome);backdrop-filter:blur(12px);
  border-right:1px solid var(--line);overflow:hidden;
  transition:width .2s ease,transform .2s ease}

.brand{display:flex;align-items:center;gap:11px;padding:2px 4px 18px;min-height:52px}
.brand-mark{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,#62bdac,#468f82);
  box-shadow:0 4px 12px rgba(84,177,160,.34)}
.brand-mark svg{width:22px;height:22px;display:block}
.brand-text{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.brand-text b{font-size:14px;letter-spacing:-.02em}
.brand-text small{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.11em;text-transform:uppercase}

/* toggle di compressione, in alto accanto al brand */
.brand .collapse{margin-left:auto;flex:none;display:grid;place-items:center;
  width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background-color .15s,color .15s}
.brand .collapse:hover{background:var(--hover);color:var(--ink)}
.brand .collapse:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.brand .collapse svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* freccia a sinistra per chiudere, a destra per aprire */
.ico-close,.ico-arrow-right{display:none}
.shell.collapsed .brand .collapse{margin-left:0}
.shell.collapsed .brand .ico-arrow-left{display:none}
.shell.collapsed .brand .ico-arrow-right{display:block}

.nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
/* con le sezioni le voci superano l'altezza: il menu deve scorrere, non
   schiacciare le voci (un elemento flex si restringe, se lo si lascia fare) */
.nav>*,.nav-gruppo>*{flex:none}

.tab{display:flex;align-items:center;gap:11px;width:100%;
  border:1px solid transparent;background:transparent;color:var(--muted);
  font-weight:750;font-size:13.5px;text-align:left;white-space:nowrap;
  padding:11px 12px;border-radius:12px;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.tab svg{flex:none;width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.tab span{overflow:hidden;text-overflow:ellipsis}
.tab:hover{background:var(--hover);color:var(--ink)}
.tab.active{background:var(--sel);color:var(--sel-ink);border-color:var(--sel-line)}
.tab.active svg{color:var(--blue)}
/* stato compresso: solo icone, testo nascosto senza sparire per gli screen reader */
.shell.collapsed .sidebar{padding-left:10px;padding-right:10px}
.shell.collapsed .tab{justify-content:center;padding:11px 0}
.shell.collapsed .tab span,
.shell.collapsed .brand-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.shell.collapsed .brand{flex-direction:column;gap:9px;padding:2px 0 16px}

/* ---------- menu a sezioni ----------
   Dove sono oggi (Panoramica), cosa possiedo (Patrimonio), dove sto andando
   (Piano), dove sono investito (Investimenti). Le testate si
   richiudono e lo ricordano; i sottogruppi di Investimenti sono etichette,
   non voci. */
.nav-import{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0 0 12px;
  padding:11px 12px;border-radius:12px;font-size:13.5px;white-space:nowrap;flex:none}
.nav-import svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.nav-sez{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.nav-testa{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:1px solid transparent;
  border-radius:10px;background:transparent;color:var(--ink-2);font:inherit;font-weight:850;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;text-align:left;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s}
.nav-testa:hover{background:var(--hover);color:var(--ink)}
/* l'anello di fuoco come le voci: chi usa la tastiera deve vedere dove si trova */
.nav-testa:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-testa svg{flex:none;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.nav-testa .freccia{margin-left:auto;width:16px;height:16px;transition:transform .15s ease}
.nav-testa[aria-expanded="false"] .freccia{transform:rotate(-90deg)}
/* sezione chiusa con dentro la pagina aperta: la testata lo dice */
.nav-testa.con-attiva{color:var(--sel-ink)}
.nav-gruppo{display:flex;flex-direction:column;gap:3px}
/* le voci di una sezione rientrano sotto la testata, con un filo a sinistra:
   si vede a colpo d'occhio che ne dipendono (la Panoramica, voce di primo
   livello, resta a filo) */
.nav-sez .nav-gruppo{margin-left:20px;padding-left:8px;border-left:1px solid var(--line)}
.nav-gruppo[hidden]{display:none}
/* le voci del Patrimonio, sotto la sua voce: rientrate come quelle di una sezione */
.nav-figli{margin-left:20px;padding-left:8px;border-left:1px solid var(--line)}
.nav-figli .nav-sez{margin-top:0}
.nav-figli .nav-sez .nav-gruppo{margin-left:14px}
.tab.con-attiva:not(.active){color:var(--sel-ink)}
.nav-sotto{padding:8px 12px 3px 12px;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav-piede{display:flex;flex-direction:column;gap:3px;flex:none;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.nav-testa .freccia{transition:none}}
/* compresso a sole icone: le testate diventano un filo, e ogni voce resta a
   portata anche se la sua sezione era chiusa (senza testo non si riaprirebbe) */
.shell.collapsed .nav-import{padding:11px 0}
.shell.collapsed .nav-import span,.shell.collapsed .nav-sotto{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell.collapsed .nav-testa{display:none}
.shell.collapsed .nav-sez{border-top:1px solid var(--line);padding-top:8px}
.shell.collapsed .nav-gruppo[hidden]{display:flex}
.shell.collapsed .nav-sez .nav-gruppo,.shell.collapsed .nav-figli{margin-left:0;padding-left:0;border-left:0}

.overlay{position:fixed;inset:0;background:var(--backdrop);z-index:var(--z-overlay)}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;
  padding:18px;box-shadow:var(--shadow)}
.k{grid-column:span 2;min-height:118px}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}
.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.lab{font-size:11px;color:var(--muted);font-weight:850;letter-spacing:.06em}
/* due gruppi di pulsanti sopra il grafico: unità di misura e periodo.
   Vanno a capo insieme sui viewport stretti invece di stringersi. */
/* Niente flex:none: con tre gruppi di pulsanti l'insieme supera i 375px, e
   un elemento flex che non si restringe non manda a capo i propri figli -
   resterebbe larghezza piena spingendo la pagina. Cosi' invece si stringe
   e le barre vanno a capo intere, una sotto l'altra. */
.chartbars{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.rangebar{display:flex;gap:3px;background:var(--surface-3);border-radius:11px;padding:3px;flex:none}
.rangebtn{border:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:800;
  padding:6px 10px;border-radius:8px;cursor:pointer;transition:background-color .15s,color .15s}
.rangebtn:hover{color:var(--ink)}
.rangebtn.active{background:var(--card);color:var(--ink);box-shadow:0 2px 6px #1018281a}
.rangebtn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* le torte senza legenda si leggono anche da tastiera: il canvas prende il fuoco */
canvas[data-tastiera]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.big{font-size:27px;font-weight:850;letter-spacing:-.04em;margin-top:12px}
.sub{font-size:12px;margin-top:7px;color:var(--muted)}
/* flex-wrap: con due gruppi di pulsanti accanto al titolo la riga non ci sta
   piu' sui viewport stretti, e senza wrap spingeva la pagina in orizzontale. */
.title{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:12px;gap:10px;flex-wrap:wrap}
.title p{font-size:12px;color:var(--muted);margin:4px 0 0}
.chart{height:280px;position:relative}
.chart.tall{height:340px}
/* #7a5200 su var(--warn-bg) = 5.1:1; il precedente #9a6700 restava a 4.44 */
/* Il badge vive sia su fondo chiaro sia dentro il riquadro scuro degli import:
   l'ambra su ambra li' spariva. Fondo neutro semitrasparente che prende il
   colore di chi lo contiene, testo a contrasto pieno. */
.badge{display:inline-block;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:800;
  background:var(--info-bg);color:var(--info-ink)}
.upl .badge{background:#ffffff26;color:#fff}
.badge.ok{background:var(--ok-bg);color:var(--ok-ink)}
/* prosa esplicativa: 12px minimo, non è una micro-etichetta */
.info{font-size:12px;color:var(--muted);line-height:1.55;margin-top:10px;padding:11px 13px;
  border-radius:13px;background:var(--surface-2)}
.note{color:var(--muted);font-size:12px;margin:22px 2px 45px}

/* ---------- tabelle ---------- */
.table{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:15px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);text-align:left;padding:11px;z-index:var(--z-sticky);white-space:nowrap}
td{padding:11px;border-top:1px solid var(--line);white-space:nowrap}
td.name{font-weight:750;max-width:330px;overflow:hidden;text-overflow:ellipsis}

/* intestazioni ordinabili: un vero <button>, non un th con onclick, cosi'
   arriva il focus da tastiera e lo screen reader lo annuncia come attivabile.
   L'area cliccabile copre tutta la cella grazie al padding negativo. */
.sortbtn{all:unset;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font:inherit;color:inherit;padding:11px;margin:-11px;min-height:24px}
th.num .sortbtn{flex-direction:row-reverse}
.sortbtn:hover{color:var(--ink)}
.sortbtn.active{color:var(--ink);font-weight:800}
.sortbtn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.sortarrow{font-size:9px;line-height:1}
.ticker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.02em;padding:3px 6px;background:var(--chip);border-radius:6px}

/* nome dello strumento come comando: apre la scheda di dettaglio */
.instrbtn{all:unset;display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;
  color:inherit;min-height:24px;max-width:330px;min-width:0;text-align:left}
.instrbtn .name{font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0}
.instrbtn:hover .name{color:var(--blue);text-decoration:underline}
.instrbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
td.tickercell{cursor:pointer}
.dossiercell{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}
td.tickercell:hover .ticker{background:var(--sel);color:var(--blue)}

/* ---- registrazione e prova ---- */
.login-switch{font-size:12.5px;margin:6px 0 0;text-align:center}
.login-switch a{color:var(--ink);font-weight:700}
.notice{color:var(--info-ink);font-size:13px;font-weight:700}
/* testo scuro sull'arancio: il bianco stava a 2,3:1 */
.tab-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:99px;background:#f79009;color:#3d2200;
  font-size:10px;font-weight:800;text-align:center;margin-left:auto}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
tr.pending td{background:var(--warn-bg)}
.blocked h2{margin:0 0 8px;color:var(--red)}
.blocked p{margin:0;color:var(--muted);line-height:1.55}

/* ---- classifica ---- */
.rank-pos{color:var(--muted);font-weight:800;width:28px}
.rank-stato{font-size:12px;color:var(--muted);margin-top:8px}
.rank-spiega{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.rank-bar{height:6px;border-radius:99px;background:var(--grid);margin-top:6px;overflow:hidden;max-width:420px}
.rank-bar i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .4s}
.timing-tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.timing-now{background:var(--ok-bg);color:var(--ok-ink)}
.timing-wait{background:var(--danger-bg);color:var(--danger-ink)}
.timing-watch{background:var(--warn-bg);color:var(--warn-ink)}
.timing-none{background:var(--surface-3);color:var(--muted)}
tr.apribile{cursor:pointer}
.avatar-txt{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);
  color:var(--ink-2);font-weight:800;font-size:10px;letter-spacing:.02em}
.watch-id .avatar-txt{width:44px;height:44px;font-size:14px;border-radius:12px}
.wdlg .wdlg-grid{margin:0}
.wdlg .card{border-color:var(--line)}
tr.apribile:hover td,tr.apribile:focus-visible td{background:var(--hover)}
.namecell .ticker{font-size:11px;flex:none}
.btn.xs{padding:3px 9px;font-size:11px;border-radius:8px}

/* ---- finestra di conferma nel tema (al posto di confirm()) ---- */
.cdlg{width:min(440px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;
  background:var(--card);color:var(--ink);box-shadow:0 24px 70px rgba(16,24,40,.28)}
.cdlg::backdrop{background:rgba(16,24,40,.5)}
.cdlg-titolo{margin:0;padding:18px 20px 6px;font-size:16px}
.cdlg-testo{padding:0 20px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.cdlg-testo p{margin:0 0 10px}
.cdlg-azioni{display:flex;justify-content:flex-end;gap:8px;padding:8px 20px 18px}
@media (max-width:760px){.cdlg-azioni{flex-direction:column-reverse}.cdlg-azioni .btn{width:100%}}

/* ---- scheda di dettaglio dello strumento (dialog nativo) ---- */
body.noscroll{overflow:hidden}
.idlg{width:min(1020px,calc(100vw - 32px));max-height:min(90vh,900px);padding:0;border:0;
  border-radius:20px;background:var(--bg);color:var(--ink);overflow:auto;
  box-shadow:0 24px 70px rgba(16,24,40,.28)}
.idlg::backdrop{background:rgba(16,24,40,.55)}
.idlg-head{position:sticky;top:0;z-index:var(--z-sticky);display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;background:var(--card);border-bottom:1px solid var(--line)}
.idlg-head .idlg-id{flex:none}
.idlg-head .tkicon{width:34px;height:34px}
.idlg-title{margin:0;font-size:16px;line-height:1.25}
.idlg-sub{margin:5px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px}
.idlg-x{margin-left:auto;flex:none}
.idlg-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px}
.idlg-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.idlg-k{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.idlg-k .lab{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.idlg-k .big{font-size:20px;font-weight:800;margin:3px 0 2px}
.idlg-k .sub{font-size:11px;color:var(--muted)}
.idlg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.idlg-card h3{margin:0 0 2px;font-size:13px}
.idlg-card .title{margin-bottom:10px}
.idlg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;
  align-items:start}
.idlg-dl{margin:0;font-size:12px}
.idlg-r{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line)}
.idlg-r:first-child{border-top:0}
.idlg-r dt{color:var(--muted);display:flex;align-items:center;gap:4px}
.idlg-r dd{margin:0;text-align:right;font-weight:700}
.idlg-lt{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:12px 0 2px}
.idlg-nota{margin-top:8px}
/* pallini della legenda delle operazioni sul grafico del prezzo */
.dot{display:inline-block;width:8px;height:8px;border-radius:99px;vertical-align:-1px}
.dot.buy{background:#12b76a}
.dot.sell{background:#f79009}
.dot.div{background:#1f9bb3}

/* ---- monitoraggio ---- */
#watchBody tr[data-isin]{cursor:pointer}
#watchBody tr[data-isin]:hover td{background:var(--hover)}
#watchBody tr.selezionata td{background:var(--info-bg)}
#watchBody tr[data-isin]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
td.centro,th.centro{text-align:center}
th.centro .sortbtn{justify-content:center}
.scorepill{display:inline-block;min-width:34px;padding:3px 8px;border-radius:99px;font-weight:800;
  font-size:12px;color:#fff;background:var(--c);text-align:center}
/* bandiera del paese di quotazione: SVG nostri (flag-icons, MIT), non emoji,
   che su Windows escono come due lettere */
.flag{width:16px;height:12px;border-radius:2px;vertical-align:-1px;box-shadow:0 0 0 1px #10182822}
.borsa{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
/* spia della borsa: aperta, pre/post apertura, chiusa, cripto, ignota */
.mkt{display:inline-block;width:9px;height:9px;border-radius:99px;margin-left:8px;flex:none;
  vertical-align:middle;background:var(--muted);box-shadow:0 0 0 2px var(--card)}
.mkt-open{background:#12b76a;animation:mktpulse 2.4s ease-in-out infinite}
.mkt-pre,.mkt-post{background:#f79009}
.mkt-closed{background:#98a2b3}
.mkt-always{background:var(--blue)}
.mkt-unknown{background:transparent;box-shadow:inset 0 0 0 1.5px #c4cad3}
.namecell .mkt{margin:0 2px 0 0}      /* nell'elenco sta a sinistra del titolo */
/* la spia e' 9px: l'area sensibile al passaggio e al tocco e' piu' larga */
.mkt-hover{position:relative;cursor:help}
.mkt.mkt-hover::after{content:"";position:absolute;inset:-8px}
.mkt-hover:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.borsa.mkt-hover{cursor:help}
/* il fumetto della borsa: bandiera, nome, stato */
.mkttip{position:fixed;z-index:var(--z-tooltip);display:none;gap:9px;align-items:flex-start;
  max-width:300px;padding:9px 12px;border-radius:11px;background:var(--tip-bg);color:var(--tip-ink);
  font-size:12px;line-height:1.45;box-shadow:0 12px 30px #10182840;pointer-events:none}
.mkttip.open{display:flex}
.mkttip .flag{width:20px;height:15px;flex:none;margin-top:2px;box-shadow:0 0 0 1px #ffffff33}
.mkttip b{font-weight:800}
.mkttip small{display:block;margin-top:4px;font-size:10.5px;color:#c4cad3}
.mkt-txt{font-size:11px}
@keyframes mktpulse{0%,100%{box-shadow:0 0 0 2px var(--card),0 0 0 2px #12b76a55}50%{box-shadow:0 0 0 2px var(--card),0 0 0 6px #12b76a00}}
@media (prefers-reduced-motion: reduce){.mkt-open{animation:none}}
.watch-head .title{align-items:flex-start}
.watch-id{display:flex;gap:12px;align-items:flex-start;min-width:0}
.watch-id .tkicon{width:38px;height:38px;margin-top:2px}
.watch-id h2{margin:0}
.watch-id p{margin:4px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.watch-h3{margin:10px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.watch-h3:first-child{margin-top:0}
.watch-desc{margin-top:12px;font-size:12px}
.watch-desc summary{cursor:pointer;font-weight:750;color:var(--blue)}
.watch-desc p{margin:8px 0;line-height:1.5}

/* il quadrante del punteggio: semicerchio riempito fino al valore */
.gauge{text-align:center;margin:4px auto 6px;max-width:300px}
.gauge svg{width:100%;height:auto;display:block}
.gauge-num{font-size:34px;font-weight:800;fill:var(--ink)}
.gauge-sub{font-size:10px;fill:var(--muted)}
.gauge-band{font-weight:800;font-size:15px;margin-top:-4px}
.gauge-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  padding:2px 6px 0;text-transform:uppercase;letter-spacing:.04em}
.watch-timing{margin:10px 0 12px;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.45;
  background:var(--chip);border:1px solid var(--sel-line)}
.watch-timing.now{background:var(--ok-bg);border-color:var(--green)}
.watch-timing.wait{background:var(--warn-bg);border-color:#f79009}
.watch-timing.watch{background:var(--chip);border-color:var(--blue)}
.watch-timing.none{background:var(--surface-3);border-color:#98a2b3}

/* i fattori del punteggio, uno per riga con la sua barra */
.factors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.factors li.vuoto{opacity:.6}
.factor-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:750}
.factor-bar{height:6px;background:var(--grid);border-radius:99px;overflow:hidden;margin:4px 0 3px}
.factor-bar div{height:100%;background:var(--blue);border-radius:99px}
.factor-detail{font-size:11px;line-height:1.4}

.newslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.newslist li{padding-bottom:12px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
.newslist li:last-child{border-bottom:0}
.newslist a{font-weight:750;color:var(--ink);text-decoration:none}
.newslist a:hover{color:var(--blue);text-decoration:underline}
.newslist p{margin:4px 0 0;color:var(--ink-2);font-size:12px}
.watch-ai{font-size:13px;line-height:1.55}
.watch-ai p{margin:0 0 10px}
@media (max-width:760px){
  .idlg{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0}
  .idlg-body{padding:12px 12px 18px}
  .idlg-cols{grid-template-columns:1fr}
}
.tag{padding:4px 8px;background:var(--info-bg);color:var(--info-ink);border-radius:99px;font-weight:750;font-size:11px}
/* rosso per quello che e' andato male o e' alto; «stima» (per natura) sempre uguale */
.tag.danger{background:var(--danger-bg);color:var(--danger-ink)}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.badge.stima{background:var(--chip);color:var(--sel-ink)}
/* tipi di transazione, per colore */
.tag.tx-buy{background:var(--ok-bg);color:var(--ok-ink)}
.tag.tx-sell{background:var(--warn-bg);color:#b54708}
.tag.tx-dividend{background:var(--info-bg);color:var(--info-ink)}
.tag.tx-tax,.tag.tx-fee{background:var(--danger-bg);color:var(--danger-ink)}
.tag.tx-opening{background:var(--surface-3);color:var(--ink-2)}
/* logo/icona dello strumento accanto al nome */
.tkicon{width:22px;height:22px;border-radius:6px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);vertical-align:middle}
.namecell{display:flex;align-items:center;gap:9px;min-width:0;max-width:320px}
.namecell .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* ---------- risk / metric blocks ---------- */
.riskgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.riskgrid.four{grid-template-columns:repeat(4,1fr)}
.risk{border:1px solid var(--line);border-radius:15px;padding:14px;background:var(--surface-2)}
.risk span{font-size:11px;color:var(--muted);font-weight:800}
.risk b{display:block;font-size:22px;margin:7px 0}
.risk small{font-size:12px;color:var(--muted);line-height:1.5}
/* la pagina Rischio: le osservazioni e le tabelle delle classi e degli strumenti */
.rischio-note{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:13.5px;line-height:1.5;max-width:95ch}
.rischio-classi td{min-width:0}
.rischio-classi td:nth-child(2),.rischio-classi td:last-child{min-width:150px}
.rischio-strumenti th[scope=row]{white-space:normal;max-width:280px}
.rischio-strumenti select{min-width:220px;max-width:280px}
.rischio-strumenti td .tag{margin-left:6px}
@media (max-width:620px){
  /* sul telefono le tabelle del rischio stanno nello schermo: numeri senza barre, nomi a capo */
  .rischio-classi .ita-barra{display:none}
  .rischio-classi td,.rischio-classi th{min-width:0;padding-left:6px;padding-right:6px;font-size:12.5px;white-space:normal}
  .rischio-classi td:nth-child(2),.rischio-classi td:last-child{min-width:0}
  .rischio-classi .ita-cella b{min-width:0}
  /* rendimento e calo in crisi restano nella tabella delle ipotesi, in fondo alla pagina */
  .rischio-classi tr>:nth-child(3),.rischio-classi tr>:nth-child(5){display:none}
  .rischio-strumenti thead,.rischio-strumenti td:nth-child(3){display:none}
  .rischio-strumenti tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-top:1px solid var(--line)}
  .rischio-strumenti th[scope=row]{grid-column:1/-1;max-width:none;background:none;padding:0 8px}
  .rischio-strumenti td{border:0;padding:0 8px;white-space:normal}
  .rischio-strumenti td:nth-child(2){grid-column:1/-1}
  .rischio-strumenti select{min-width:0;width:100%;max-width:none}
}
.heat{display:grid;gap:4px;font-size:11px;overflow-x:auto}
.heat div{text-align:center;padding:8px 3px;border-radius:7px;min-width:52px}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
/* hidden deve vincere sul display della classe: senza, un modulo «chiuso» restava aperto */
.form[hidden]{display:none}
.field label{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;background:var(--card)}
/* nei moduli a griglia i campi di una fila finiscono alla stessa altezza: se
   un'etichetta va a capo (o ha la sua (i)), i campi restano sulla stessa linea.
   Dove sotto il campo c'e' una spiegazione vale l'ordine normale */
.form>.field:not(:has(.vaiuto)){display:flex;flex-direction:column;justify-content:flex-end}
.form>.field:not(:has(.vaiuto))>.btn{align-self:flex-start}
/* caselle e tendine della stessa altezza: in fila, la stessa linea sopra e sotto */
.field input:not([type=checkbox]):not([type=radio]):not([type=range]),.field select{height:44px;box-sizing:border-box}
/* una casella da spuntare nel modulo: accanto al suo testo, tutta la riga e' il bersaglio */
.field label.segno{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:13px;font-weight:750;
  color:var(--ink);cursor:pointer}
.field:has(> label.segno){padding-top:17px}
.field label.segno input{width:20px;height:20px;margin:0;padding:0;flex:none;accent-color:var(--primary)}
/* ---------- icona informativa con spiegazione ---------- */
.infoi{position:relative;display:inline-grid;place-items:center;vertical-align:middle;
  width:16px;height:16px;margin-left:5px;padding:0;flex:none;
  border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--muted);
  font-size:10px;font-weight:850;font-family:Georgia,serif;cursor:help;
  transition:background-color .15s,color .15s,border-color .15s}
/* Il cerchio resta 16px per non spingere via le etichette, ma l'area
   cliccabile arriva a 24x24 (WCAG 2.2 AA 2.5.8, Target Size Minimum). */
.infoi::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.infoi:hover,.infoi.open,.infoi.active,.infoi:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
/* Il fumetto è un nodo unico agganciato a <body> (portal), non un figlio
   dell'icona: dentro un `th` sticky lo stacking context locale lo farebbe
   coprire dalla colonna successiva, e .table{overflow:auto} lo taglierebbe.
   left/top arrivano da placeTip(); display:none (non visibility) per non
   allargare la pagina quando è chiuso. */
.infotip{display:none;position:fixed;left:0;top:0;
  width:min(300px,72vw);z-index:var(--z-tooltip);padding:12px 14px;border-radius:13px;
  background:var(--tip-bg);color:var(--tip-ink);font-family:inherit;font-size:12.5px;font-weight:500;
  line-height:1.55;letter-spacing:0;text-align:left;text-transform:none;white-space:normal;
  box-shadow:0 16px 40px #10182859;cursor:default}
/* Solo il titolo va a capo. I <b> dentro il testo restano in linea: con
   display:block su tutti, una definizione come "<b>Value at Risk</b>: la
   perdita…" spezzava la riga e lasciava i due punti orfani a capo. */
.infotip b{color:#fff;font-weight:800}
.infotip > b.tiptitle{display:block;margin-bottom:4px;font-size:12px}
.infotip i{color:#c6ebe2;font-style:italic}
.infotip.open{display:block}

/* ---------- combobox strumenti ---------- */
.combo{position:relative}
.combo-list{position:absolute;top:100%;left:0;right:0;z-index:var(--z-combo);margin:4px 0 0;padding:6px;
  list-style:none;max-height:290px;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px #10182826}
.combo-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:9px 11px;border-radius:10px;cursor:pointer;font-size:12.5px}
.combo-list li:hover,.combo-list li.active{background:var(--info-bg)}
.combo-name{font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-meta{grid-column:1;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.combo-held{grid-row:1/3;align-self:center;font-size:11px;font-weight:800;color:var(--ok-ink);
  background:var(--ok-bg);padding:4px 8px;border-radius:99px;white-space:nowrap}
.combo-empty{padding:12px;font-size:12px;color:var(--muted);cursor:default}
/* risultati che arrivano da Yahoo: sceglierli aggiunge uno strumento in
   archivio, quindi si distinguono da quelli che ci sono già */
.combo-sep{grid-template-columns:1fr!important;padding:8px 11px 4px!important;cursor:default!important;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.combo-sep:hover{background:transparent!important}
.combo-remote .combo-name{font-weight:700}
.combo-new{grid-row:1/3;align-self:center;font-size:10px;font-weight:800;color:var(--sel-ink);
  background:var(--sel);padding:4px 8px;border-radius:99px;white-space:nowrap}
.combo-hint{display:block;margin-top:5px;font-size:11px;color:var(--muted);min-height:14px}
.combo-hint.warn{color:var(--red);font-weight:700}

/* ---------- benchmark tags ---------- */
.benchlist{display:flex;flex-wrap:wrap;gap:8px}
.benchtag{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:12.5px;font-weight:700}
.benchtag.primary{background:var(--sel);border-color:var(--sel-line);color:var(--sel-ink)}
.benchtag em{font-style:normal;font-size:10px;color:var(--amber);font-weight:800}
.benchx{position:relative;border:0;background:var(--surface-3);color:var(--muted);width:20px;height:20px;
  border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:grid;place-items:center}
/* pastiglia 20px, ma area cliccabile 24x24 (WCAG 2.2 AA Target Size) */
.benchx::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.benchx:hover,.benchx:focus-visible{background:var(--danger-bg);color:var(--danger-ink)}

/* ---------- azioni di riga / modalità modifica ---------- */
.btn.mini{padding:6px 10px;font-size:11.5px;border-radius:9px}
.rowactions{display:flex;gap:6px;justify-content:flex-end}
.card.editing{border-color:var(--sel-line);box-shadow:0 0 0 3px rgba(59,128,116,.18),var(--shadow)}

.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.metric{padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--card)}
.metric span{font-size:11px;color:var(--muted)}
.metric b{display:block;font-size:20px;margin-top:7px}
.pac-card{background:linear-gradient(135deg,var(--card),var(--sel))}
.pac-avanzate,.tx-dettagli{grid-column:1/-1}
.cu-come{margin-top:10px}
.cu-come summary{cursor:pointer;font-size:12.5px;font-weight:750;color:var(--ink);min-height:32px;display:list-item}
.tx-dettagli summary{cursor:pointer;font-size:12.5px;font-weight:750;color:var(--ink);min-height:32px;display:list-item}
.tx-dettagli .form{margin-top:10px}
.form>.field[hidden]{display:none}
.pac-avanzate summary{cursor:pointer;font-size:12.5px;font-weight:750;color:var(--ink);min-height:32px;
  display:list-item}
.pac-avanzate .form{margin-top:10px}

/* ---------- upload ---------- */
.upl{padding:21px;border-radius:22px;background:linear-gradient(135deg,#0d2622,#24524a);
  color:#fff;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.upl.alt{background:linear-gradient(135deg,#0f2b27,#2c6158)}
.upl small{color:#d0d5dd;display:block;margin-top:4px;max-width:520px;line-height:1.5}
.upl .status{font-size:12px;color:#c6ebe2;margin-top:9px}
/* Le <select> nel pannello scuro ereditano color:#fff, ma la tendina aperta è
   disegnata dal sistema su fondo chiaro: senza questo le voci sono bianche su
   bianco, cioè invisibili proprio mentre le stai scegliendo. */
.upl select option{color:var(--ink);background:var(--card)}
.pick{border:1px solid #ffffff55;border-radius:13px;padding:10px 14px;background:#ffffff14;
  color:#fff;font-weight:750;cursor:pointer;text-align:center}
.pick input{display:none}
/* il pulsante che conta: «Scatta una foto», pieno; gli altri restano chiari (una sola azione evidente) */
.pick.primaria{background:#fff;color:#0d2622;border-color:#fff}
.upl .uplactions .btn.primary:disabled{display:none}

/* ---------- report ---------- */
.report{display:grid;grid-template-columns:30px 1fr;gap:8px 12px}
/* #0f5bb5 su var(--chip) = 5.4:1; con var(--blue) il numeretto restava a 4.06 */
.report i{width:28px;height:28px;border-radius:9px;background:var(--chip);color:var(--sel-ink);
  display:grid;place-items:center;font-style:normal;font-weight:800}
.report div{font-size:13px;line-height:1.5;padding:4px 0}

/* ---------- toast / loading ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#101828;color:#fff;
  padding:12px 20px;border-radius:14px;font-size:13px;font-weight:700;z-index:var(--z-toast);box-shadow:0 10px 30px #10182866}
/* un rosso scuro fisso: nel tema scuro --red e' chiaro, e il bianco sopra stava a 2,8:1 */
.toast.err{background:#b42318}
.spinner{display:grid;place-items:center;padding:60px;color:var(--muted)}
.spinner::after{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--blue);animation:spin .8s linear infinite;margin-top:12px}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- responsive ---------- */
@media(max-width:1200px){.k{grid-column:span 4}}
@media(max-width:1050px){.k,.s4,.s5,.s6,.s7,.s8{grid-column:span 6}.form{grid-template-columns:repeat(3,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}.riskgrid,.riskgrid.four{grid-template-columns:repeat(2,1fr)}}

/* Sotto 760px i form a piu' colonne non ci stanno. Le viste dichiarano le
   colonne con uno stile inline - comodo per dosare le larghezze sul desktop -
   e un inline batte una regola normale: !important e' l'unico modo per
   riportarli a colonna singola. Vale anche per le griglie annidate dentro una
   card (i due riquadri affiancati della sezione Lombard). */
@media(max-width:760px){
  .form{grid-template-columns:1fr!important}
  .card .grid{grid-template-columns:1fr!important}
}

/* sotto 900px la sidebar diventa un drawer richiamato dall'hamburger */
@media(max-width:900px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:266px;transform:translateX(-100%);
    box-shadow:0 20px 60px #10182833;background:var(--card)}
  .sidebar.open{transform:none}
  /* nel drawer il menu è sempre esteso, anche se il desktop era compresso */
  .shell.collapsed .sidebar{padding:20px 14px 16px}
  .shell.collapsed .tab{justify-content:flex-start;padding:11px 12px}
  .shell.collapsed .tab span,.shell.collapsed .brand-text{position:static;width:auto;height:auto;
    clip-path:none;overflow:hidden}
  .shell.collapsed .brand{flex-direction:row;gap:11px;padding:2px 4px 18px}
  .shell.collapsed .brand .collapse{margin-left:auto}
  .shell.collapsed .nav-import{padding:11px 12px}
  .shell.collapsed .nav-import span,.shell.collapsed .nav-sotto{position:static;width:auto;height:auto;
    clip-path:none;overflow:visible}
  .shell.collapsed .nav-testa{display:flex}
  .shell.collapsed .nav-sez{border-top:0;padding-top:0}
  .shell.collapsed .nav-gruppo[hidden]{display:none}
  .shell.collapsed .nav-sez .nav-gruppo{margin-left:20px;padding-left:8px;border-left:1px solid var(--line)}
  /* nel drawer lo stesso pulsante chiude il pannello */
  .ico-arrow-left,.ico-arrow-right,
  .shell.collapsed .brand .ico-arrow-right{display:none}
  .ico-close{display:block}
  .iconbtn{display:grid}
  /* il pulsante del menu e' un pezzo in piu' della testata: i comandi finivano su una seconda
     riga stretta quanto il titolo e uscivano dallo schermo (8/10/2026). Ora la seconda riga e'
     larga quanto la testata, a destra, e se serve va a capo */
  .head{grid-template-columns:auto minmax(0,1fr) auto}
  .head>.head-actions{grid-column:1 / -1;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
}
@media(min-width:901px){.overlay{display:none}}
/* fra 901 e 1199 con il menu laterale aperto il titolo, la cifra e i comandi non stanno su una riga:
   i comandi uscivano dallo schermo fino a 190 pixel (8/10/2026). Vanno sotto, larghi quanto la testata */
@media(min-width:901px) and (max-width:1199px){
  .head{grid-template-columns:minmax(0,1fr) auto}
  .head>.head-actions{grid-column:1 / -1;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
}

@media(max-width:700px){.content{--pad:13px}
  .head-title h1{font-size:21px}
  .k,.s4,.s5,.s6,.s7,.s8,.s12{grid-column:span 12}
  .form{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr}
  .riskgrid,.riskgrid.four{grid-template-columns:1fr 1fr}.chart{height:250px}}


/* ---------- import: benvenuto e revisione ---------- */
.modibar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.modibtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--line);border-radius:16px;padding:13px 14px;background:var(--card);
  color:var(--ink);cursor:pointer;transition:border-color .15s,background-color .15s}
.modibtn:hover{border-color:var(--muted)}
.modibtn.active{border-color:var(--blue);background:var(--sel);box-shadow:0 0 0 1px var(--blue) inset}
.modibtn b{font-size:13.5px}
.modibtn small{color:var(--muted);font-size:11.5px}
.modiico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:var(--surface-3);margin-bottom:4px}
.modibtn.active .modiico{background:var(--card)}
.modiico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--blue)}
.modibtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:760px){.modibar{grid-template-columns:repeat(2,1fr)}}
/* Importazioni: sotto la foto, solo i due altri modi */
.modisel .modibar{grid-template-columns:repeat(2,minmax(0,360px))}
/* «patrimonio mediano 56.300 €»: la cifra resta intera, l'euro non va a capo da solo */
.sim-cifra{white-space:nowrap}
/* il piano: dal Nucleo, l'universita' dei figli da aggiungere con un clic */
.fire-eventi-proposte{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.fire-eventi-proposte span{font-size:13px;color:var(--ink-2);font-weight:700}
/* le foto e i documenti di una voce del Patrimonio */
.vallegati{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:10px 0;display:grid;gap:8px}
.vallegati legend{font-weight:800;padding:0 4px;color:var(--ink)}
.vallegati-lista{display:flex;flex-wrap:wrap;gap:10px}
.vallegati-azioni{display:flex;flex-wrap:wrap;gap:8px}
.vallegati-scegli{cursor:pointer;min-height:40px}
.vallegati-scegli:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.vallegato{position:relative;margin:0;width:96px;display:grid;gap:4px}
.vallegato-apri{width:96px;height:96px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--surface-2);cursor:pointer;display:grid;place-items:center}
.vallegato-apri img{width:100%;height:100%;object-fit:cover}
.vallegato-apri:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.vallegato-pdf{font-weight:850;color:var(--ink-2);letter-spacing:.06em}
.vallegato figcaption{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vallegato-togli{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.vallegato-togli:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.benvenuto h2{font-size:22px;letter-spacing:-.02em}
.benvenuto>p{color:var(--ink-2);font-size:13.5px;line-height:1.6;margin:8px 0 0}
.benvsteps{margin:14px 0 0;padding-left:20px;display:grid;gap:9px;font-size:13px;color:var(--ink-2);line-height:1.55}
.benvsteps b{color:var(--ink)}
.uplactions{display:flex;flex-direction:column;gap:8px;min-width:210px}
.uplab{font-size:11px;color:#c6ebe2}
.revtab{max-height:none}
.revtab td{vertical-align:top;white-space:normal}
.revtab input:not([type=checkbox]),.revtab select{width:100%;min-width:74px;padding:7px 9px;font-size:12px}
.revtab select{min-width:190px;max-width:320px}
/* le tendine delle tabelle di controllo stanno su una card: stile dei campi,
   non quello della pastiglia bianca del riquadro scuro (.pick), che di giorno
   le lasciava bianche su bianco */
.revtab select{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.revtab td.num input{text-align:right}
.revtab input.valuta{min-width:56px;text-transform:uppercase}
.revtab input.stimato{border-color:var(--amber)}
.revtab .manuale{margin-top:6px}
.revtab tr.rigaerr td{background:var(--danger-bg)}
.rev-carica:empty{display:none}
.rev-carica{margin-top:12px}
/* al telefono la tabella delle righe lette diventa una scheda per riga (riunione del 13/10/2026: «la tabella non
   e' per niente leggibile da smartphone») */
@media (max-width:760px){
  .revtab{border:0;overflow:visible;max-height:none}
  .revtab table,.revtab tbody,.revtab td{display:block;width:100%}
  .revtab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .revtab tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;position:relative;margin:0 0 10px;
    padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  .revtab tr.rigaerr{border-color:var(--red)}
  .revtab td{padding:0;border:0;white-space:normal;background:transparent!important}
  .revtab td[hidden]{display:none}
  .revtab td[data-etichetta]::before{content:attr(data-etichetta);display:block;margin-bottom:3px;font-size:11.5px;
    font-weight:750;color:var(--ink-2)}
  .revtab td.num{text-align:left}
  .revtab td.rev-nome,.revtab td.rev-strumento{grid-column:1/-1}
  .revtab td.rev-nome{padding-right:40px}
  .revtab td.rev-tieni{position:absolute;top:10px;right:10px;width:auto}
  .revtab td.rev-tieni input{width:24px;height:24px}
  .revtab select{min-width:0;max-width:none}
  .revtab input:not([type=checkbox]),.revtab select{min-height:40px;font-size:14px}
}
.piccolo{font-size:11px}
.revactions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;align-items:center}
/* dove vanno le righe lette: dossier, nome del nuovo, data. Va a capo da sola:
   il nome del nuovo dossier compare e sparisce, e su una griglia a colonne
   fisse lascerebbe un buco */
.revdest{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.revdest .field{flex:1 1 240px;min-width:0}
.revdest .field.data{flex:0 1 190px}
.revdest .field[hidden]{display:none}
/* i titoli del dossier che la fotografia non mostra */
.revsub{font-size:13.5px;margin:16px 0 4px}
.revmancanti{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.revmancanti label{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border-radius:10px;
  cursor:pointer;font-size:13px}
.revmancanti label:hover{background:var(--hover)}
.revmancanti input{flex:none;width:18px;height:18px}
/* #7a5200 su #fdf3e0 = 5,1:1; di notte #f5c26b su #382a12 */
.info.attenzione{background:var(--warn-bg);color:var(--warn-ink)}
.info.attenzione b{color:inherit}
.revactions>span:first-child{margin-right:auto}

/* striscia dei dividendi in Panoramica */
.divstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--ok-bg),var(--card) 70%);border-color:var(--ok-ink)}
.divstrip-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--ok-ink);color:var(--card);font-weight:850;font-size:18px;flex:none}
.divstrip b{display:block;font-size:14.5px}
.divstrip small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.divstrip .btn{margin-left:auto}

/* ---------- dividendi ---------- */
.divbanner{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--sel),var(--card) 62%);border-color:var(--sel-line)}
.divb-main{min-width:260px;flex:1 1 320px}
.divb-lab{font-size:11px;font-weight:850;letter-spacing:.09em;color:var(--sel-ink);display:flex;
  align-items:center;gap:4px}
.divb-big{font-size:40px;font-weight:850;letter-spacing:-.045em;margin:6px 0 4px;line-height:1.05}
.divb-sub{font-size:13px;color:var(--ink-2);line-height:1.6;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* il flex qui sopra serve alle pastiglie del prossimo incasso; quando la riga
   e' una frase intesa, il grassetto diventerebbe un elemento a se' e spezzerebbe
   il testo a meta' */
.divb-sub.prosa{display:block}
.divb-side{display:flex;gap:12px;flex-wrap:wrap}
.divb-side>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 15px;
  min-width:150px}
.divb-side span{display:block;font-size:10.5px;font-weight:850;letter-spacing:.05em;color:var(--muted)}
.divb-side b{display:block;font-size:20px;font-weight:850;letter-spacing:-.03em;margin:3px 0 2px}
.divb-side small{color:var(--muted);font-size:11px}
.divyears{display:flex;gap:10px;flex-wrap:wrap}
.divyear{background:var(--surface-2);border-radius:13px;padding:9px 13px;min-width:92px}
.divyear span{display:block;font-size:11px;color:var(--muted);font-weight:800}
.divyear b{font-size:16px;font-weight:850}
.lomcell small{display:block;font-size:11.5px;margin-top:3px}
/* il calendario: un riquadro per mese, i vuoti restano ma si fanno da parte */
.divcal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.divmese{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--surface-2)}
.divmese.vuoto{background:transparent}
.divmese-testa{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;font-weight:850;color:var(--ink-2);text-transform:capitalize}
.divmese-testa b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none}
.divmese.vuoto .divmese-testa b{color:var(--muted);font-weight:700}
.divmese ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.divmese li{display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:baseline;font-size:12.5px}
.divmese-giorno{color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums}
.divmese-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.divmese-nome .tag{font-size:10px;padding:1px 6px}
.divmese li b{font-variant-numeric:tabular-nums}

/* ---------- notizie ---------- */
.newslist2{display:grid;gap:12px}
.newsitem{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--card)}
.newsitem.rilevante{border-color:var(--sel-line);background:linear-gradient(180deg,var(--sel) 0,var(--card) 34%)}
.newshead a,.newshead b{font-size:14.5px;font-weight:800;line-height:1.35;color:var(--ink);
  text-decoration:none;display:inline-block}
.newshead a:hover{text-decoration:underline;color:var(--blue)}
.newsmeta{font-size:11.5px;color:var(--muted);margin-top:5px}
.newsitem p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:8px 0 0}
.newstags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.newstag{font-size:11px;font-weight:750;padding:3px 9px;border-radius:99px;background:var(--chip);
  color:var(--ink-2)}
.newstag.muted{background:var(--surface-3);color:var(--muted);font-weight:700}

/* ---------- torre di controllo (in testa alle notizie) ----------
   Quattro riquadri su una griglia a sei: meteo stretto e campo di battaglia
   largo sopra, bilancio e bussola a meta' sotto. La pista del campo ha bisogno
   di larghezza piu' di tutto il resto. */
.torre[aria-busy]{min-height:320px}
.torre-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.t-meteo{grid-column:span 2}.t-campo{grid-column:span 4}
.t-gex,.t-bussola{grid-column:span 3}
.torre-tile{background:var(--surface-2);border-radius:16px;padding:14px 16px;min-width:0}
.torre-tile h3{margin:0 0 12px;font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:2px}
.torre-tile p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:10px 0 0}
.torre-tile .torre-sub{font-size:12px;color:var(--muted);margin:4px 0 12px}

.meteo-riga{display:flex;align-items:center;gap:12px}
.meteo-icona{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;flex:none;
  background:var(--surface-3);color:var(--ink-2)}
.meteo-icona.su{background:var(--ok-bg);color:var(--ok-ink)}
.meteo-icona.mezzo{background:var(--warn-bg);color:var(--warn-ink)}
.meteo-icona.giu{background:var(--danger-bg);color:var(--danger-ink)}
.meteo-titolo{font-size:22px;font-weight:850;letter-spacing:-.01em}

/* la pista: rossa sotto lo zero gamma, verde sopra. Il colore e' solo
   rinforzo: sotto la pista le due zone sono scritte, e la frase ripete tutto */
.campo{position:relative;padding-top:26px;font-variant-numeric:tabular-nums}
.campo-pista{position:relative;height:12px;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--red) 24%,transparent) 0 var(--z),
    color-mix(in srgb,var(--green) 24%,transparent) var(--z) 100%)}
.campo-pista[data-senza-zero]{background:var(--surface-3)}
.tacca{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--ink-2);
  transform:translateX(-50%)}
.tacca.m-zero{background:repeating-linear-gradient(180deg,var(--warn-ink) 0 3px,transparent 3px 5px);width:2px}
.campo-pin{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--primary);
  border:3px solid var(--surface-2);box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.campo-spot{position:absolute;top:0;transform:translateX(-50%);font-size:12.5px;font-weight:800;white-space:nowrap}
.campo-spot b{color:var(--muted);font-weight:750;margin-right:5px}
.campo-sotto{position:relative;height:50px}
.campo.due-file .campo-sotto{height:96px}
.campo-et{position:absolute;top:10px;transform:translateX(-50%);text-align:center;white-space:nowrap;
  font-size:12px;font-weight:800;line-height:1.3}
.campo-et.fila1{top:56px}
.campo-et b{display:block;font-size:11px;font-weight:750;color:var(--muted)}
.campo-et small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.campo-et.m-zero b{color:var(--warn-ink)}
.campo-spot.sx,.campo-et.sx{transform:none;text-align:left}
.campo-spot.dx,.campo-et.dx{transform:translateX(-100%);text-align:right}
.campo-zone{display:flex;justify-content:space-between;font-size:11px;font-weight:750;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line)}
.campo-zone span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;background:currentColor;opacity:.55}
.campo-zone .giu{color:var(--danger-ink)}.campo-zone .su{color:var(--ok-ink)}

.gex-netto{font-size:26px;font-weight:850;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gex-riga{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;
  margin-top:8px;font-size:12.5px}
.gex-riga>span:first-child{color:var(--muted);font-weight:750}
.gex-barra{display:block;height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.gex-barra i{display:block;height:100%;border-radius:99px}
.gex-barra i.su{background:var(--green)}.gex-barra i.giu{background:var(--red)}
.gex-riga b{min-width:86px;font-weight:800}
.torre-dati{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12px;color:var(--muted)}
.torre-dati b{color:var(--ink);font-weight:800}

.bussola-testa{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.bussola-vix{font-size:13px;color:var(--muted);font-weight:750}
.bussola-vix b{font-size:26px;font-weight:850;color:var(--ink);letter-spacing:-.01em;margin-left:3px}
.bussola-scala{position:relative;display:flex;gap:3px;height:26px;margin:14px 0 16px}
.fascia{display:grid;place-items:center;min-width:0;overflow:hidden;white-space:nowrap;border-radius:7px;
  font-size:11px;font-weight:750;background:var(--surface-3);color:var(--ink-2)}
.fascia.f-calma{background:var(--ok-bg);color:var(--ok-ink)}
.fascia.f-tesa{background:var(--warn-bg);color:var(--warn-ink)}
.fascia.f-paura{background:var(--danger-bg);color:var(--danger-ink)}
.fascia.qui{box-shadow:inset 0 0 0 2px currentColor;font-weight:850}
.bussola-ago{position:absolute;top:calc(100% + 3px);width:0;height:0;transform:translateX(-50%);
  border:7px solid transparent;border-top:0;border-bottom:8px solid var(--ink)}

.torre-metodo{margin-top:12px;font-size:12px}
.torre-metodo summary{cursor:pointer;font-weight:750;color:var(--ink);width:max-content}
.torre-metodo summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.torre-metodo ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);line-height:1.55}
.torre-metodo li{margin:3px 0}

@media(max-width:760px){
  .torre-grid{grid-template-columns:minmax(0,1fr)}
  .t-meteo,.t-campo,.t-gex,.t-bussola{grid-column:auto}
}

/* ---------- tema scuro ----------
   Solo variabili: nessuna regola duplicata. Vale quando l'utente sceglie
   "scuro" (data-theme=dark) oppure quando è su "automatico" (nessun attributo)
   e il sistema chiede scuro. Fondo non nero ma blu molto scuro: su OLED il nero
   pieno fa "smear" durante lo scorrimento, e i bordi spariscono. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    /* NOTTE, non nero assoluto. Col nero pieno il testo chiaro sfrangia
       (halation) nelle sessioni lunghe e la scala di elevazione sparisce: qui
       ci sono quattro livelli veri, composti a mano e non ricavati invertendo
       il tema chiaro. Gli accenti sono piu' luminosi dei loro omologhi diurni
       perche' su fondo scuro serve piu' luce per superare il 4,5:1. */
    --bg:#091316; --card:#101c1f; --ink:#e7f0ee; --muted:#8fa5a7; --line:#24373b;
    --head-bg:rgba(9,19,22,.96);
    --chrome:rgba(13,24,27,.94);
    --surface-2:#152427; --surface-3:#1c2e32; --chip:#10302b; --ink-2:#b4c7c5;
    --card-border:#1f3236; --card-bg:rgba(16,28,31,.95);
    --hover:#182a2d; --sel:#0f2e29; --sel-ink:#79c2b4; --sel-line:#1f5a50;
    --teorica:#6ea8ec;
    --ok-bg:#0e2b1f; --ok-ink:#6ee7a8; --warn-bg:#382a12; --warn-ink:#f5c26b;
    --info-bg:#0f2e29; --info-ink:#79c2b4; --danger-bg:#3a1a1a; --danger-ink:#fca5a5;
    --grid:#24373b; --backdrop:rgba(2,8,10,.74); --tip-bg:#1f3236; --tip-ink:#eef0f4;
    --blue:#54b1a0; --primary:#3b8074; --primary-hover:#347267; --green:#4ade80; --red:#f87171; --amber:#e0a94a;
    --borsa-su:#4ade80; --borsa-giu:#f87171;
    --accento-2:#f0a882; --accento-2-bg:#33221a; --accento-2-line:#6a3f2c;
    --med-anello:#245a80; --med-rame:#d89a6a;
    --shadow:0 14px 38px rgba(0,0,0,.5);
    --alone:radial-gradient(circle at 88% 0,#0f2a26 0,transparent 30%),
            radial-gradient(circle at 0 8%,#241f14 0,transparent 26%);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#091316; --card:#101c1f; --ink:#e7f0ee; --muted:#8fa5a7; --line:#24373b;
  --head-bg:rgba(9,19,22,.96);
  --chrome:rgba(13,24,27,.94);
  --surface-2:#152427; --surface-3:#1c2e32; --chip:#10302b; --ink-2:#b4c7c5;
  --card-border:#1f3236; --card-bg:rgba(16,28,31,.95);
  --hover:#182a2d; --sel:#0f2e29; --sel-ink:#79c2b4; --sel-line:#1f5a50;
  --teorica:#6ea8ec;
  --ok-bg:#0e2b1f; --ok-ink:#6ee7a8; --warn-bg:#382a12; --warn-ink:#f5c26b;
  --info-bg:#0f2e29; --info-ink:#79c2b4; --danger-bg:#3a1a1a; --danger-ink:#fca5a5;
  --grid:#24373b; --backdrop:rgba(2,8,10,.74); --tip-bg:#1f3236; --tip-ink:#eef0f4;
  --blue:#54b1a0; --primary:#3b8074; --primary-hover:#347267; --green:#4ade80; --red:#f87171; --amber:#e0a94a;
  --borsa-su:#4ade80; --borsa-giu:#f87171;
  --accento-2:#f0a882; --accento-2-bg:#33221a; --accento-2-line:#6a3f2c;
  --med-anello:#245a80; --med-rame:#d89a6a;
  --shadow:0 14px 38px rgba(0,0,0,.5);
  --alone:radial-gradient(circle at 88% 0,#0f2a26 0,transparent 30%),
          radial-gradient(circle at 0 8%,#241f14 0,transparent 26%);
}

/* i pochi punti in cui il bianco era scritto a mano e nel tema scuro stonerebbe */
/* Il selettore ":root:not([data-theme=light])" e' giusto SOLO dentro la media
   query scura: fuori vale anche con «Auto» e il sistema chiaro, e questi
   riquadri diventavano scuri di giorno. */
[data-theme="dark"] .upl{background:linear-gradient(135deg,#12272a,#173a37)}
[data-theme="dark"] .upl.alt{background:linear-gradient(135deg,#132a2e,#1b4541)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .upl{background:linear-gradient(135deg,#12272a,#173a37)}
  :root:not([data-theme="light"]) .upl.alt{background:linear-gradient(135deg,#132a2e,#1b4541)}
}

/* selettore del tema nel menu utente */
.temabar{display:flex;gap:4px;margin:10px 12px 4px;background:var(--surface-3);
  border-radius:11px;padding:3px}
.temabtn{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;
  font-weight:800;padding:7px 4px;border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.temabtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.temabtn:hover{color:var(--ink)}
.temabtn[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 6px #00000022}
.temabtn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.temalab{font-size:10px;font-weight:850;letter-spacing:.06em;color:var(--muted);margin:12px 12px 0}

/* ---------- telefono ----------
   Tre problemi veri sul piccolo schermo: le tabelle larghe, i tocchi troppo
   piccoli e i grafici che diventano francobolli. Qui si affrontano quelli. */
@media (max-width:760px){
  /* Una tabella con otto colonne non entra in 375px e non deve nemmeno
     provarci: scorre dentro il suo riquadro, con la prima colonna ferma a
     sinistra per non perdere di vista di che riga si tratta, e un'ombra sul
     bordo destro che dice che c'e' altro oltre il margine. */
  .table{max-height:none;-webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,var(--card) 30%,transparent),
               linear-gradient(90deg,transparent,var(--card) 70%) 100% 0,
               radial-gradient(farthest-side at 0 50%,#00000022,transparent),
               radial-gradient(farthest-side at 100% 50%,#00000022,transparent) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
  table{font-size:12.5px}
  th,td{padding:10px 9px}
  /* il nome dello strumento e' la colonna piu' lunga: si tronca, il titolo
     completo resta nel tooltip e nella scheda che si apre cliccando */
  td.name,td .namecell{max-width:168px}
  td .namecell .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* la prima colonna resta: e' quella che dice "di chi" e' la riga */
  .table.sticky1 td:first-child,.table.sticky1 th:first-child{position:sticky;left:0;
    background:var(--card);box-shadow:1px 0 0 var(--line)}
  .table.sticky1 th:first-child{background:var(--surface-2);z-index:calc(var(--z-sticky) + 1)}

  /* bersagli: 40px e' il minimo comodo con il pollice */
  .btn,.rangebtn,.temabtn{min-height:40px}
  .btn.ico{min-width:40px}
  .tab{padding:13px 12px}
  .usritem{padding:12px 10px}
  /* i gruppi di pulsanti sopra i grafici occupano la riga intera invece di
     stringersi fino a diventare illeggibili */
  .chartbars{width:100%;justify-content:flex-start}
  .rangebar{flex:1;justify-content:space-between}
  .rangebtn{flex:1;padding:6px 4px}

  .chart{height:230px}.chart.tall{height:265px}
  h1{font-size:24px}
  .head-title h1{font-size:20px}
  .big{font-size:23px}
  .divb-big{font-size:30px}
  .divb-side{width:100%}
  .divb-side>div{flex:1 1 140px}
  .card{padding:15px;border-radius:18px}
  .grid{gap:11px}
  /* il riquadro dell'import: testo sopra, comandi sotto a piena larghezza */
  .upl{flex-direction:column;align-items:stretch}
  .uplactions{min-width:0}
  .revactions{flex-direction:column-reverse;align-items:stretch}
  .revactions .btn{width:100%}
  .revactions>span:first-child{margin:6px 0 0;text-align:center}
}

/* i KPI restano a due per riga anche sul telefono: uno per riga costringerebbe
   a scorrere mezza pagina per vedere valore e rendimento */
@media (max-width:700px){
  .k{grid-column:span 6;min-height:96px}
  .k .big{font-size:20px}
}
/* sotto 340px due colonne non ci stanno piu' nemmeno con i numeri corti */
@media (max-width:340px){
  .k{grid-column:span 12}
}

/* Le carte in cima all'Andamento stanno in una riga sola, quante che siano:
   con sei o sette carte la seconda riga restava a meta', sbilanciata. */
.kpi-riga{display:grid;gap:14px;grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.kpi-riga>.k{grid-column:auto;min-width:0}
@media (max-width:1200px){.kpi-riga{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (max-width:700px){.kpi-riga{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.kpi-riga{grid-template-columns:minmax(0,1fr)}}

/* La valutazione AI in cima all'Andamento, nel secondo colore: e' la cosa da
   fare quando si vuole un parere sulla composizione. */
.ai-banner{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;
  background:var(--accento-2-bg);border:1px solid var(--accento-2-line)}
.ai-banner-testo{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 320px}
.ai-banner-testo>.aiico{flex:none;width:26px;height:26px;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linejoin:round}
.ai-banner h2{color:var(--accento-2);font-size:16px}
.ai-banner p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ai-banner .btn{min-height:44px}
/* Rischio: «In pratica» e «Cosa emerge» in una carta, uno sotto l'altro */
.rischio-capitoli>.title+ul+.title{margin-top:18px}
/* il pulsante di MiradorAI si vede (Andrea, 12/10/2026: «rendiamo il tasto MiradorAI più visibile») */
.ai-banner .ai-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding-inline:20px;
  box-shadow:0 6px 16px #1d4f4733}
.ai-banner .ai-btn .aiico{width:18px;height:18px;fill:currentColor;stroke:none}

/* iPhone con la tacca: la barra di casa copre l'ultima riga */
@supports(padding:max(0px)){
  @media (max-width:900px){
    /* --pad come il margine vero: la testata si allarga di --pad per lato, e con 24 contro 13
       usciva dallo schermo di 11 pixel fra 701 e 900 (8/10/2026) */
    .content{--pad:13px;padding-left:max(13px,env(safe-area-inset-left));
             padding-right:max(13px,env(safe-area-inset-right))}
    .note{margin-bottom:max(45px,calc(env(safe-area-inset-bottom) + 30px))}
  }
}

/* ---------- barra in alto sul telefono ----------
   Il badge del nome finiva a capo, da solo, a sinistra: una riga sprecata e
   il comando piu' personale nel posto meno naturale per il pollice. Ora la
   fila sta su una riga sola, il badge e' spinto a destra e le parole che si
   capiscono dall'icona si tolgono. */
@media (max-width:760px){
  .head{gap:10px}
  .head .head-actions{width:100%;flex-wrap:nowrap;gap:8px;padding-top:2px}
  .head .head-actions>.accsel:first-child{min-width:0;flex:0 1 auto}
  #accountBtn{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #accountBtn .lbl-lungo{display:none}
  .head .usrsel{margin-left:auto;flex:none}
  /* i filtri dentro le schede vanno a capo e non spingono la pagina */
  .card .head-actions{flex-wrap:wrap;max-width:100%}
  .card .head-actions>*{min-width:0;max-width:100%}
  /* bersagli da toccare: l'icona (i), la X dei benchmark e il nome cliccabile
     nelle tabelle erano sotto i 32px */
  .infoi::after{inset:-12px}
  .benchx{width:28px;height:28px}
  .benchx::after{content:"";position:absolute;inset:-6px}
  /* il test del 30/09/2026: tutto quello che si tocca arriva ad almeno 40px */
  .instrbtn{min-height:40px}
  .brand .collapse{width:40px;height:40px}
  .nav-testa{min-height:42px}
  .cu-come summary,.tx-dettagli summary,.pac-avanzate summary,.vquota summary{min-height:40px}
  .btn.xs,.modconfronta{min-height:40px}
  tr.apribile td{padding-top:12px;padding-bottom:12px}
  .torre-metodo summary{display:flex;align-items:center;min-height:40px}
  #view td input,#view td select{min-height:40px}
  /* il link dentro una frase: la riga non cambia, l'area da toccare si allarga */
  button.link{position:relative}
  button.link::after{content:"";position:absolute;inset:-13px -4px}
}

/* Nessun menu piu' largo dello schermo: il resto lo fa clampaMenu() in app.js. */
.accmenu{max-width:calc(100vw - 24px)}
@media (max-width:760px){
  #accountMenu{max-height:min(60vh,420px);overflow-y:auto}
}

/* Il pulsante della scheda di mercato sta nell'intestazione della finestra,
   accanto alla X: e' l'altra meta' della stessa domanda. */
.idlg-mercato{white-space:nowrap}
@media (max-width:760px){
  .idlg-mercato{font-size:12px;padding:8px 10px}
}
/* sul telefono, accanto a nome e X, va su due righe invece di essere tagliato */
@media (max-width:480px){
  .idlg-mercato{white-space:normal;max-width:6.5em;line-height:1.2;text-align:center}
}

/* Il bottoncino della condivisione vive nell'intestazione delle schede: si
   vede quando serve e non ruba spazio al grafico. */
.card .title .condividi{flex:none;align-self:flex-start;color:var(--muted)}
.card .title .condividi:hover{color:var(--blue);border-color:var(--blue)}

/* La valutazione AI: testo lungo, quindi respira. */
.airev{font-size:14px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.benvsteps.ok li::marker{color:var(--green)}
.benvsteps.warn li::marker{color:var(--amber)}
#aiCard .idlg-cols{gap:14px}

/* Pulsanti e finestra dell'AI: la stellina ha la stessa misura ovunque. */
.btn .aiico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linejoin:round;vertical-align:-3px;margin-right:5px}
.aidlg .idlg-head{align-items:flex-start}
.aidlg .idlg-body{padding:18px 20px 22px}

/* I dettagli opzionali del piano FIRE: chiusi di default, aperti da soli se
   hanno gia' una risposta dentro. */
.firextra{border:1px solid var(--line);border-radius:14px;padding:0 14px;margin:10px 0;
  background:var(--surface-2)}
.firextra>summary{cursor:pointer;padding:13px 0;font-weight:800;font-size:13.5px;
  display:flex;flex-direction:column;gap:2px;list-style:none}
.firextra>summary::-webkit-details-marker{display:none}
.firextra>summary::before{content:"+ ";color:var(--blue);font-weight:900}
.firextra[open]>summary::before{content:"− "}
.firextra>summary small{font-weight:600;color:var(--muted);font-size:12px}
.firextra[open]{padding-bottom:14px}

/* il primo Tab: salta menu e testata e porta alla pagina */
.salta{position:fixed;left:12px;top:-80px;z-index:1000;padding:10px 16px;min-height:44px;border-radius:12px;
  border:2px solid var(--primary);background:var(--card);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.salta:focus{top:calc(12px + env(safe-area-inset-top, 0px))}
#view:focus{outline:none}

/* ---------- Piano (FIRE) ---------- */
.firintro .title p{font-size:13px;line-height:1.6}
.firehero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--sel),var(--card));border-color:var(--sel-line)}
.firehero.no{background:linear-gradient(135deg,var(--danger-bg),var(--card))}
.firehero.forse{background:linear-gradient(135deg,var(--warn-bg),var(--card))}
.firehero.vuoto{background:var(--card)}
.firehero-testo{flex:1 1 320px;min-width:0}
.firehero-tag{display:inline-block;font-size:11.5px;font-weight:850;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accento-2);margin-bottom:6px}
.firehero h2{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.firehero p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.firedati{display:flex;gap:12px;flex-wrap:wrap}
.firedato{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px 16px;min-width:150px;flex:1 1 150px}
.firedato span{display:block;font-size:10.5px;font-weight:850;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.firedato b{display:block;font-size:20px;margin-top:3px;letter-spacing:-.01em}
.firedato small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.firegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
/* quello che il piano legge da solo: sopra le domande, in sola lettura */
.fire-dal{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px;
  margin-bottom:16px}
.fire-dal h3{margin:0 0 10px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.fire-dal h3 small{font-size:11.5px;font-weight:600;color:var(--muted)}
.fire-dal .firedato{flex:1 1 170px;padding:10px 13px}
.fire-dal .firedato b{font-size:17px}
.fire-diprima{margin-top:12px}
/* dal lavoro alla pensione: il ponte di liquidita' e il fondo pensione */
.fire-fondo-corpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px 24px;margin-top:18px}
.fire-fondo-corpo h3{margin:0 0 6px;font-size:14px;color:var(--ink)}
.fire-fondo-corpo section>h3:not(:first-child){margin-top:16px}
.fire-fondo-nota{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:68ch}
.fire-ordine{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:8px;counter-reset:ordine}
.fire-ordine li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:start;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);counter-increment:ordine}
.fire-ordine li::before{content:counter(ordine);font-weight:850;color:var(--muted);font-variant-numeric:tabular-nums}
.fire-ordine li b{display:block;font-size:13.5px;color:var(--ink)}
.fire-ordine li small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px}
.fire-ordine li small.perche{color:var(--ink-2)}
.fire-ordine li .tag{white-space:nowrap}
.fire-ordine li.usata{border-color:var(--sel-line);background:var(--sel)}
.fire-ordine li.fuori b{font-weight:700;color:var(--ink-2)}
.fire-fondo-tasse{margin-top:8px}
/* il perche' di un'uscita dal fondo, e i dati che mancano: chiusi, si aprono se interessano */
.fire-perche{margin-top:4px}
.fire-perche>summary,.fire-note>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:32px;
  font-size:12.5px;font-weight:750;color:var(--sel-ink);text-decoration:underline;text-underline-offset:2px}
.fire-perche>summary:focus-visible,.fire-note>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.fire-perche p{margin:2px 0 4px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.fire-note{margin-top:14px;padding:4px 13px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.fire-note ul{margin:4px 0 10px;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--ink-2);display:grid;gap:4px}
.fire-verifica{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted);max-width:90ch}
.fire-verifica b{color:var(--ink-2)}
/* la (i) resta una «i» anche dentro un'etichetta in maiuscolo (le etichette delle caselle sono span) */
.infoi,.firedato .infoi span{text-transform:none;letter-spacing:0}
.firedato .infoi span{display:inline;font-size:inherit;color:inherit}
.firedato>span:has(.infoi){display:flex;align-items:center;gap:4px}
@media (max-width:620px){
  .fire-perche>summary,.fire-note>summary{min-height:40px}
  /* sul telefono le caselle dei numeri due per riga: la pagina si accorcia */
  .fire-arrivo .fire-arrivo-numeri,.fire-fondo .fire-arrivo-numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fire-dal .firedato,.fire-fondo .firedati .firedato,.firehero .firedato{flex:1 1 calc(50% - 6px);min-width:0}
  .firedato{padding:10px 12px}
}
/* un'etichetta con la sua (i) accanto, nella stessa riga */
.field-riga{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.field-riga label{margin-bottom:0}

/* Le risposte del piano: ogni campo e' etichetta, campo e spiegazione su tre
   righe comuni a tutta la fila (subgrid). Se un'etichetta va a capo, si alza la
   riga delle etichette per tutti: i campi restano sulla stessa linea. */
.fcampi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:0}
/* niente spazi della griglia dentro il campo: li danno le sue tre parti, sempre presenti */
.fcampo{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;min-width:0}
.fcampo.largo{grid-column:1/-1}
.fcampo-etichetta{display:flex;align-items:flex-end;align-self:end;gap:6px;min-width:0;padding-bottom:6px}
.fcampo-etichetta label{font-size:12.5px;font-weight:750;color:var(--ink-2);line-height:1.3}
.fcampo-etichetta .infoi{width:24px;height:24px;font-size:12px;flex:none}
.fcampo-etichetta .infoi::after{inset:0}
.fcampo input,.fcampo select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--card);font:inherit;font-size:14.5px;color:var(--ink);align-self:start}
.fcampo input:focus-visible,.fcampo select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.fcampo .vaiuto{margin:0;padding:6px 0 16px;font-size:12px;line-height:1.45;color:var(--muted)}
.fcampo.spunta{grid-column:1/-1;grid-row:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.fcampo.spunta .segno{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;font-weight:750;
  color:var(--ink);cursor:pointer}
.fcampo.spunta .segno input{width:20px;height:20px;min-height:0;margin:0;padding:0;flex:none;align-self:center;
  accent-color:var(--primary)}
/* le tre domande che contano: il primo posto della pagina, un po' piu' grandi */
.fire-essenziali{border:1px solid var(--sel-line);background:var(--sel);border-radius:16px;padding:14px 16px 4px;margin:0 0 14px}
.fire-essenziali h3{margin:0 0 10px;font-size:15px;color:var(--ink)}
.fire-essenziali .fcampo-etichetta label{font-size:13.5px;color:var(--ink)}
.fire-essenziali .fcampo input{font-size:16px;font-weight:700}
.fire-ess-nota{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:80ch}
/* i gruppi: un'intestazione in una riga, con quante risposte ha e la freccia */
.fire-gruppi{display:grid;gap:10px}
.fire-gruppo{border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.fire-gruppo>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:4px 12px;
  align-items:center;padding:13px 16px;min-height:56px;cursor:pointer;border-radius:14px}
.fire-gruppo>summary::-webkit-details-marker{display:none}
.fire-gruppo>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fire-gruppo[open]>summary{border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}
.gruppo-titolo b{display:block;font-size:15px;color:var(--ink)}
.gruppo-titolo small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.gruppo-stato{font-size:11.5px;font-weight:750;padding:3px 10px;border-radius:99px;white-space:nowrap;
  background:var(--card);color:var(--muted);border:1px solid var(--line)}
.gruppo-stato.pieno{background:var(--sel);color:var(--sel-ink);border-color:var(--sel-line)}
.gruppo-freccia{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .15s ease}
.fire-gruppo[open] .gruppo-freccia{transform:rotate(180deg)}
.fire-gruppo .fcampi{padding:14px 16px 2px}
.fire-azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.fire-azioni .btn{min-height:44px}
@media (prefers-reduced-motion:reduce){.gruppo-freccia{transition:none}}
@media (max-width:1050px){.fcampi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .fcampi{grid-template-columns:1fr}
  .fire-gruppo>summary{grid-template-columns:minmax(0,1fr) 18px}
  .gruppo-stato{grid-row:2;grid-column:1;justify-self:start}
  .fcampo-etichetta .infoi::after{inset:-8px}
  .fcampo-etichetta{padding-bottom:8px}
}
/* accanto al campo la (i) e' grande davvero: l'area allargata toccherebbe il campo sotto */
.field-riga .infoi{width:24px;height:24px;font-size:12px}
.field-riga .infoi::after{inset:0}
/* sul telefono l'area da toccare arriva a 40px e si ferma dove comincia il campo */
@media (max-width:760px){.field-riga{margin-bottom:8px}.field-riga .infoi::after{inset:-8px}}
/* MiradorAI compila il piano: il riquadro terracotta di MiradorAI, la chat sotto */
.piano-ai{margin:0 0 16px;padding:14px 16px;border-radius:16px;background:var(--accento-2-bg);border:1px solid var(--accento-2-line)}
.piano-ai-testa{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.piano-ai-testa>div{flex:1 1 280px;min-width:0}
.piano-ai-testa h3{margin:0 0 4px;font-size:15px;color:var(--accento-2)}
.piano-ai-testa p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.piano-ai-testa .aiico{width:24px;height:24px;flex:none;margin-top:2px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linejoin:round}
.piano-ai-testa .btn{min-height:44px;align-self:center}
.piano-ai .imp-scrivi{margin-top:6px}
.piano-ai #pianoAiRestano:empty{display:none}
/* il campo che MiradorAI ha appena scritto, o quello in cui scrivere l'importo */
.field .da-ai{outline:2px solid var(--accento-2);outline-offset:2px;transition:outline-color .6s ease}
@media (prefers-reduced-motion:reduce){.field .da-ai{transition:none}}
@media (max-width:520px){
  .fire-ordine li{grid-template-columns:auto minmax(0,1fr)}
  .fire-ordine li .tag{grid-column:2;justify-self:start}
}
/* un pulsante che si legge come un link, dentro una frase */
button.link{background:none;border:0;padding:0;font:inherit;color:var(--sel-ink);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
button.link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
@media (max-width:760px){
  .firehero{gap:16px}
  .firehero h2{font-size:21px}
  .firedato b{font-size:18px}
}

/* ---------- Patrimonio: una pagina, un gruppo per categoria ---------- */
.patr-testa{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:12px}
.patr-testa h2{margin:0;display:flex;align-items:center;gap:8px;font-size:16px}
.patr-testa p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5;max-width:70ch}
.patr-tot{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.patr-tot.neg,.patr-valore.neg{color:var(--red)}
.patr-barra{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;margin:14px 0 8px;
  background:var(--surface-2)}
.patr-barra i{background:var(--c);min-width:4px}
.patr-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;
  color:var(--ink-2)}
.patr-legenda li{display:flex;align-items:center;gap:6px}
.patr-manca{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:700}
/* i pulsanti per aggiungere: con l'icona della categoria, come nella finestra «Aggiungi» */
.patr-manca-voce,.patr-aggiungi{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;
  border:1px solid var(--sel-line);background:var(--card);color:var(--sel-ink);font-size:13px;font-weight:750;border-radius:12px}
.patr-manca-voce:hover,.patr-aggiungi:hover{border-color:var(--primary)}
/* nella finestra del Lombard: quanto costa, a interesse semplice */
.vl-costo{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink-2)}
.patr-icona{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.patr-voci{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.patr-voce{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.patr-voce.sistema{background:var(--surface-2)}
.patr-nome{min-width:0}
.patr-nome b{font-size:14px;margin-right:6px}
.patr-nome .tag{font-size:10.5px;padding:2px 7px;vertical-align:1px;margin-right:4px}
.patr-nome small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.45}
.patr-auto{color:var(--sel-ink);font-weight:700}
.patr-casa{margin-top:4px;font-size:12px;color:var(--ink-2)}
.patr-valore{font-size:15px;font-weight:850;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.patr-azioni{display:flex;gap:6px;justify-content:flex-end}
.patr-aggiungi{margin-top:10px}
.patr-gruppo{scroll-margin-top:84px}
/* la pagina Patrimonio: una carta per voce, che porta al dettaglio */
.patr-carta{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.patr-carta:hover{border-color:var(--sel-line)}
.patr-carta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.patr-carta-testa{display:flex;align-items:center;gap:9px;font-size:15px}
.patr-carta-testa b{color:var(--ink)}
.patr-carta-freccia{width:18px;height:18px;margin-left:auto;stroke:var(--muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.patr-carta-tot{font-size:24px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.patr-carta-tot.neg{color:var(--red)}
.patr-carta-netto{color:var(--muted);font-size:12px;margin-top:-4px}
.patr-carta-voci{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:5px;font-size:12.5px}
.patr-carta-voci li{display:flex;justify-content:space-between;gap:10px}
.patr-carta-voci li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.patr-carta-voci li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.patr-carta-n{color:var(--muted);font-size:12px;margin-top:auto}
/* il dettaglio di una voce */
.patr-briciole{font-size:12.5px;margin:0 0 10px;color:var(--muted)}
.patr-briciole a{color:var(--sel-ink);font-weight:700}
.patr-icona.grande{width:22px;height:22px}
.patr-tot small{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;text-align:right}
.patr-sotto{margin:18px 0 8px;font-size:14px;font-weight:800}
.patr-tipi{list-style:none;margin:12px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.patr-tipi li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.patr-tipi span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.patr-tipi b{font-size:16px;font-variant-numeric:tabular-nums}
.patr-tipi small{color:var(--muted);font-size:12px}
.patr-aggiungi-fila{display:flex;flex-wrap:wrap;gap:8px}
.patr-strade h3,.patr-pensione h3{margin:0 0 8px;font-size:15px}
.patr-strade-fila{display:flex;flex-wrap:wrap;gap:8px}
.patr-pensione p{max-width:75ch}
.patr-pensione .btn{margin-top:10px}
@media (max-width:620px){.patr-carta-tot{font-size:21px}}
@media(prefers-reduced-motion:reduce){.patr-carta{transition:none}}
.patr-gruppo:focus{outline:none}
.patr-gruppo.evidenza{border-color:var(--sel-line);box-shadow:0 0 0 3px rgba(59,128,116,.22),var(--shadow);
  transition:box-shadow .3s}
@media (max-width:760px){
  .patr-voce{grid-template-columns:minmax(0,1fr) auto}
  .patr-azioni{grid-column:1/-1;justify-content:flex-start}
  .patr-azioni .btn{min-height:40px}
}

/* la Panoramica vuota: tre strade, secondo dove si e' */
.strade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.strada{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;
  background:var(--card)}
.strada b{font-size:15px}
.strada p{margin:0 0 6px;color:var(--ink-2);font-size:13px;line-height:1.5;flex:1}
.strada .btn{align-self:flex-start;min-height:44px}

/* ---------- il benvenuto del primo accesso e i primi passi ---------- */
@media (min-width:761px){.bdlg{width:min(620px,calc(100vw - 32px))}}
.bdlg .idlg-body{padding:24px 24px 20px;gap:14px}
.bdlg h2{margin:0;font-size:22px;letter-spacing:-.02em}
.bdlg-intro{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.bdlg-passi{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bdlg-passi li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--card)}
.bdlg-passi b{display:block;font-size:14px}
.bdlg-passi small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.bdlg-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:850;
  background:var(--sel);color:var(--sel-ink)}
.bdlg-impara{background:var(--sel);border:1px solid var(--sel-line);border-radius:14px;padding:12px 14px;
  font-size:13.5px;line-height:1.55}
.bdlg-azioni{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.bdlg-azioni .btn{min-height:44px}
/* Primi passi: una riga sola, con quanti ne mancano e solo quelli da fare */
.primi-passi{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 16px}
.pp-testa{display:flex;align-items:center;gap:10px;flex:none}
.pp-testa h2{font-size:15px}
.pp-conta{font-size:12.5px;font-weight:750;color:var(--muted);white-space:nowrap}
.pp-barra{width:64px;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pp-barra i{display:block;height:100%;border-radius:99px;background:var(--accento-2)}
.pp-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.pp-lista li{display:flex;align-items:center;gap:8px;padding:3px 3px 3px 12px;border:1px solid var(--line);
  border-radius:999px;font-size:13px;font-weight:700;min-height:40px}
.pp-nascondi{margin-left:auto}

/* ---------- Impara: lezioni e assistente ---------- */
.imp-testa{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.imp-testa h2{margin:0;font-size:18px}
.imp-testa p{margin:6px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55;max-width:72ch}
.imp-progresso{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;
  padding:10px 14px;border-radius:16px;background:var(--accento-2-bg);border:1px solid var(--accento-2-line);
  color:var(--accento-2)}
.imp-progresso b{font-size:24px;line-height:1}
.imp-progresso span{font-size:11.5px;font-weight:750}
.imp-scegli,.imp-scegli-lab{display:none}
.imp-lista{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.imp-voce{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;width:100%;text-align:left;
  padding:8px 10px;border-radius:12px;border:1px solid transparent;background:none;color:var(--ink);
  font:inherit;cursor:pointer;min-height:44px}
.imp-voce:hover{background:var(--hover)}
.imp-voce:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.imp-voce.attiva{background:var(--sel);border-color:var(--sel-line)}
.imp-voce b{display:block;font-size:13.5px}
.imp-voce small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.imp-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:850;
  background:var(--surface-2);color:var(--ink-2)}
.imp-num.letta{background:var(--sel-ink);color:var(--card)}
.imp-lezione h2{margin:4px 0 12px;font-size:22px;letter-spacing:-.02em}
.imp-lezione h2:focus{outline:none}
.imp-lezione>p{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0 0 12px;max-width:70ch}
.imp-passo{font-size:12px;font-weight:800;color:var(--accento-2);margin:0}
.imp-breve{background:var(--accento-2-bg);border:1px solid var(--accento-2-line);border-radius:14px;
  padding:12px 14px;margin:0 0 16px}
.imp-breve b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accento-2)}
.imp-breve ul{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.55}
.imp-prova{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 4px;font-size:12.5px;
  font-weight:750;color:var(--muted)}
.imp-naviga{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line)}
.imp-chat{margin-top:22px;padding:16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.imp-chat h3{margin:0 0 4px;font-size:15px;color:var(--accento-2)}
.imp-suggerite{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.imp-suggerite .btn{white-space:normal;text-align:left;min-height:32px}
.imp-messaggi{display:grid;gap:8px;margin:10px 0}
.imp-messaggi:empty{display:none}
.imp-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55}
.imp-msg p{margin:0 0 8px}
.imp-msg p:last-child{margin:0}
.imp-msg.tu{justify-self:end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.imp-msg.ai{justify-self:start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.imp-msg.attesa{color:var(--muted);font-style:italic}
.imp-scrivi{display:flex;gap:8px;align-items:flex-end}
.imp-scrivi textarea{flex:1;min-height:44px;resize:vertical;padding:10px 12px;border-radius:12px;font:inherit}
.imp-scrivi .btn{min-height:44px}
.imp-restano{margin:6px 0 0}
@media (max-width:760px){
  .imp-lista{display:none}
  .imp-scegli-lab{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}
  .imp-scegli{display:block;width:100%;min-height:44px}
  .imp-msg{max-width:100%}
}

.imp-letta.fatta{background:var(--sel);border-color:var(--sel-line);color:var(--sel-ink)}
/* le raccolte nell'elenco delle lezioni, ognuna con la sua testatina */
.imp-gruppo{margin:16px 10px 6px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:850;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accento-2)}
.imp-gruppo small{display:block;margin-top:2px;font-size:11.5px;font-weight:650;letter-spacing:0;
  text-transform:none;color:var(--muted)}
/* una raccolta chiusa e' una riga sola: titolo, a cosa serve, quante lette */
.imp-raccolta>summary{list-style:none;cursor:pointer;position:relative;padding-right:26px;border-radius:10px}
.imp-raccolta>summary::-webkit-details-marker{display:none}
.imp-raccolta>summary::after{content:"";position:absolute;right:8px;top:calc(50% + 2px);width:7px;height:7px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-50%) rotate(45deg);
  transition:transform .15s}
.imp-raccolta[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.imp-raccolta>summary:hover{background:var(--hover)}
.imp-raccolta>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.imp-percorso .imp-raccolta:first-of-type>.imp-gruppo{margin-top:4px;padding-top:0;border-top:0}
@media(prefers-reduced-motion:reduce){.imp-raccolta>summary::after{transition:none}}
@media (max-width:760px){.imp-raccolta{display:none}}

/* ---------- il vademecum: perche' investo, scritto a mente fredda ---------- */
.vad-testa .title{margin-bottom:6px}
.vad-testa p{max-width:76ch}
.vad-voce{display:flex;flex-direction:column;gap:6px}
.vad-dom{display:flex;gap:10px;align-items:center;font-weight:800;font-size:14.5px;line-height:1.35}
.vad-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:850;background:var(--accento-2-bg);color:var(--accento-2);border:1px solid var(--accento-2-line)}
.vad-voce p{margin:0;line-height:1.45}
.vad-voce textarea{width:100%;min-height:104px;resize:vertical;font:inherit;font-size:14px;line-height:1.55}
.vad-voce [data-usa]{align-self:flex-start;white-space:normal;text-align:left;min-height:40px;max-width:100%}
.vad-carta{display:none}

/* ---------- la lettura dell'AI di una sezione (Notizie, Torre) ---------- */
.ai-azione{display:flex;justify-content:flex-end;margin-top:12px}
.ai-azione .btn{display:inline-flex;align-items:center;gap:8px;min-height:40px}
.ai-azione .btn .aiico{margin-right:0}
.ai-lettura-titolo .aiico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round}
.ai-lettura{margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--accento-2-bg);
  border:1px solid var(--accento-2-line)}
.ai-lettura-titolo{display:flex;align-items:center;gap:7px;color:var(--accento-2);font-size:13px}
/* la stellina dell'AI ha il secondo colore ovunque compaia */
.aiico{color:var(--accento-2)}
.ai-lettura p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.ai-lettura ul{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink)}
.ai-lettura small{display:block;margin-top:10px;font-size:12px;line-height:1.45;color:var(--ink-2)}

/* ---------- Il mio profilo: domande in forma di chat, poi il risultato ---------- */
.prof-avviso{margin-top:12px!important}
/* le domande: quello che Mirador sa gia' in risalto, poi la conversazione a coppie */
.prof-domande{display:grid;gap:20px}
.prof-sa{background:var(--accento-2-bg);border:1px solid var(--accento-2-line);border-radius:16px;padding:16px 18px;
  display:grid;gap:12px}
.prof-sa h3{margin:0;font-size:15px;color:var(--accento-2)}
.prof-sa > p{margin:-6px 0 0}
.prof-fatti{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0}
.prof-fatti div{background:var(--card);border:1px solid var(--accento-2-line);border-radius:12px;padding:10px 13px;
  display:grid;gap:3px;align-content:start}
.prof-fatti dt{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.prof-fatti dd{margin:0;font-weight:800;font-size:15.5px;color:var(--ink)}
.prof-fatti dd.da{font-weight:600;font-size:12.5px;color:var(--muted)}
.prof-quindi{display:grid;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--accento-2-line)}
.prof-quindi span{font-size:11.5px;font-weight:750;color:var(--ink-2)}
.prof-quindi select{min-height:40px;width:100%;font-size:14px}
.prof-avanza{display:grid;gap:7px;max-width:420px}
.prof-avanza span{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accento-2)}
.prof-avanza-barra{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.prof-avanza-barra i{display:block;height:100%;border-radius:99px;background:var(--accento-2);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.prof-avanza-barra i{transition:none}}
.prof-chat{display:grid;gap:22px}
.prof-chat .imp-msg p{margin:0}
.prof-coppia{display:grid;gap:10px}
.prof-coppia.corrente .imp-msg.ai{font-size:15.5px;font-weight:650;border-color:var(--accento-2-line)}
.prof-coppia.corrente #profDomanda:focus{outline:none}
/* tutta la riga: cosi' «Altro…» sta di fianco alle risposte pronte */
.prof-scelte{display:flex;flex-wrap:wrap;gap:10px;justify-self:end;justify-content:flex-end;max-width:100%}
.prof-scelte .btn{min-height:44px;white-space:normal;text-align:left;padding-inline:16px}
/* «Altro…»: una risposta come le altre, col bordo tratteggiato perche' la
   scrivi tu; aperta, prende il bordo pieno dell'accento */
.prof-altro{border-style:dashed}
.prof-altro.attiva{border-style:solid;border-color:var(--primary);color:var(--primary)}
.prof-cambia{margin-left:10px;font-size:12px}
.imp-msg.tu .prof-cambia{color:#fff}
.prof-libera{display:grid;gap:8px;justify-self:end;width:min(100%,560px)}
.prof-libera label{font-size:13px;font-weight:750;color:var(--ink-2)}
.prof-libera input{min-height:44px;font:inherit}
.prof-libera p{margin:0}
.prof-libera-azioni{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.prof-libera-azioni .btn{min-height:44px}
.prof-invio{display:grid;gap:10px;justify-self:stretch}
.prof-invio textarea{width:100%;min-height:60px;resize:vertical;font:inherit}
.prof-invio .btn{justify-self:end;min-height:44px}
.prof-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap}
.prof-occhiello{font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--accento-2)}
.prof-testa h2{font-size:30px;letter-spacing:-.02em;margin:2px 0 0}
.prof-testa h2:focus{outline:none}
.prof-quota{margin:2px 0 0;font-size:14px;font-weight:750;color:var(--ink-2)}
.prof-scala{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.prof-scala li{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:750;color:var(--muted);
  background:var(--surface-2);border:1px solid transparent}
.prof-scala li.qui{background:var(--accento-2-bg);border-color:var(--accento-2-line);color:var(--accento-2)}
.prof-sintesi{font-size:14.5px;line-height:1.6;margin:14px 0 4px;max-width:78ch}
.prof-esito h3{font-size:14px;margin:20px 0 8px}
.prof-colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.prof-lista{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px;line-height:1.5}
.prof-barra{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.prof-barra i{display:block;height:100%}
.prof-legenda{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;
  color:var(--ink-2)}
.prof-legenda li{display:flex;align-items:center;gap:6px}
.prof-legenda span,.prof-punto{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.prof-punto{margin-right:8px}
.prof-tabella th[scope=row]{font-weight:750;text-align:left;white-space:nowrap}
.prof-modelli{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.prof-modelli>li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;display:grid;gap:8px}
.prof-modelli a{color:var(--ink);text-decoration:none}
.prof-modelli a:hover b{text-decoration:underline}
.prof-modelli small{display:block;font-size:12px;color:var(--muted)}
.prof-azioni{display:flex;justify-content:flex-end;margin-top:12px}
.mod-profilo{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.mod-profilo p{margin:0;font-size:14px;line-height:1.5;max-width:78ch}
@media (max-width:760px){
  .prof-colonne{grid-template-columns:minmax(0,1fr)}
  .prof-scelte{max-width:100%;justify-self:stretch}
  .prof-scelte .btn{flex:1 1 100%}
  .prof-sa{padding:14px}
  .prof-fatti{grid-template-columns:1fr}
  .prof-libera-azioni .btn{flex:1 1 100%}
  .prof-testa h2{font-size:26px}
}

/* ---------- schede: piu' pagine vicine in una (Piano, Impara) ----------
   Come la barra dei periodi, ma piu' grande: e' la scelta della pagina, non
   di un filtro. Sul telefono scorrono nel loro riquadro. */
.schede{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 0 16px;padding:4px;border-radius:14px;
  background:var(--surface-3);overflow-x:auto}
/* le schede si vedono come pulsanti (Andrea, 12/10/2026: «rendiamo questi tasti più visibili») */
.scheda{flex:none;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:14px;
  font-weight:800;padding:9px 16px;min-height:42px;border-radius:11px;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s}
.scheda:hover{color:var(--ink);border-color:var(--sel-line);background:var(--hover)}
.scheda.attiva{background:var(--card);color:var(--accento-2);border-color:var(--accento-2-line);box-shadow:0 2px 8px #1018281f}
.scheda:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pannello-scheda:focus{outline:none}
/* sul telefono le schede si dividono la riga e le etichette lunghe vanno a
   capo: una scheda tagliata a meta' non si capisce che c'e' */
@media (max-width:760px){.schede{width:100%;flex-wrap:wrap}
  /* con molte schede (il Piano ne ha sei) vanno a capo intere, invece di spezzare le parole */
  .scheda{flex:1 1 auto;min-width:0;padding:8px 10px;white-space:nowrap;line-height:1.25;text-align:center}}

/* ---------- per chi vuole andare a fondo: chiuso, si apre su richiesta ----------
   Le metriche sotto l'Andamento, i saldi dei dossier in fondo al Patrimonio.
   La testata e' una carta; aperta, sotto ci sono le carte della pagina di
   prima, senza una cornice in piu'. */
details.esperti{margin-top:14px}
.grid>details.esperti{margin-top:0}
details.esperti>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:3px 14px;align-items:center;padding:16px 18px;min-height:44px;border-radius:22px;
  background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow);
  transition:background-color .15s}
details.esperti>summary::-webkit-details-marker{display:none}
details.esperti>summary::after{content:"";grid-column:2;grid-row:1/span 2;width:9px;height:9px;margin:0 4px 4px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);
  transition:transform .15s}
details.esperti[open]>summary{margin-bottom:14px}
details.esperti[open]>summary::after{transform:rotate(-135deg);margin:4px 4px 0}
details.esperti>summary b{font-size:15px}
details.esperti>summary small{grid-column:1;font-size:12.5px;color:var(--muted);line-height:1.45}
details.esperti>summary:hover{background:var(--hover)}
details.esperti>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){details.esperti>summary::after,.scheda{transition:none}}

/* Modelli: i quattro in vista, gli altri a richiesta */
.modaltri{margin-top:14px}
.modaltri>summary{cursor:pointer;font-weight:750;color:var(--sel-ink);min-height:40px;padding:10px 0;
  width:max-content;max-width:100%}
.modaltri>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.modaltri[open]>.modgriglia{margin-top:6px}

/* ---------- la finestra per aggiungere o modificare una voce ---------- */
/* sul telefono resta a tutto schermo come le altre finestre (.idlg sotto i 760px) */
@media (min-width:761px){.vdlg{width:min(700px,calc(100vw - 32px))}}
.vcat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.vcat-voce{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;width:100%;height:100%;
  text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);
  color:var(--ink);cursor:pointer;font:inherit}
.vcat-voce:hover{border-color:var(--sel-line);background:var(--sel)}
.vcat-voce:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.vcat-voce svg{width:24px;height:24px;stroke:var(--sel-ink);fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.vcat-voce b{display:block;font-size:13.5px}
.vcat-voce small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4}
.vmodulo{display:flex;flex-direction:column;gap:14px}
.vform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vform[hidden]{display:none}
.vform .largo{grid-column:1/-1}
.vform input,.vform select{width:100%}
.vaiuto{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.4}
.vgruppo{border-top:1px solid var(--line);padding-top:12px}
.vgruppo h3{margin:0 0 2px;font-size:13px}
.vgruppo>p{margin:0 0 10px}
.vmutuo{border:1px solid var(--line);border-radius:14px;padding:10px 14px 14px;margin:12px 0 0}
.vmutuo legend{padding:0 6px}
.vmutuo legend label{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-weight:750;
  font-size:13px;cursor:pointer}
.vmutuo legend input{width:18px;height:18px}
.vquota summary{cursor:pointer;font-size:12.5px;font-weight:750;color:var(--ink);min-height:32px;
  display:list-item;padding-top:6px}
.vquota .vform{margin-top:8px}
.vazioni{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:14px}
.vazioni #vIndietro{margin-right:auto}
@media (max-width:560px){
  .vform{grid-template-columns:1fr}
  .vazioni .btn{flex:1 1 auto;min-height:44px}
}

/* Dentro le intestazioni di tabella l'area estesa dell'icona (i) non vale:
   il riquadro scorre e quello che sporge dal bordo viene tagliato, quindi il
   tocco cade sulla cella accanto. Li' l'icona si ingrandisce davvero, fino ai
   24px che lo standard chiede come minimo (WCAG 2.5.8 AA). */
.table .infoi{z-index:3}
.table .infoi::after{z-index:3}
@media (max-width:760px){
  .table th{padding-top:12px;padding-bottom:12px}
  .table .infoi{width:24px;height:24px;font-size:12px;margin-left:6px}
}

/* ---------- accessibilità: contrasto e bersagli ----------
   Trovati con axe-core su tutte le viste, nei due temi. */

/* Il pulsante primario ha testo bianco in tutti e due i temi, su un fondo
   calcolato apposta per reggerlo (--primary). Prima qui c'era un testo scuro
   per il tema scuro, scritto con un selettore FUORI dalla media query: valeva
   anche in modalita' «Auto» con il sistema chiaro, e di giorno il pulsante
   aveva testo quasi nero su indaco scuro. */

/* Il numero del report riassuntivo aveva un blu da tema chiaro anche al buio. */
.report i{color:var(--sel-ink)}

/* Il testo tenue dentro una pastiglia selezionata stava a 4,34:1. */
.benchtag.primary small,.btn.ico[aria-pressed="true"] small,.tab.active small{color:var(--sel-ink)}

/* Una tabella che scorre in orizzontale deve poter scorrere anche da tastiera:
   il tabindex glielo permette, e l'anello di fuoco dice dove si e'. */
.table[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Testo solo per chi legge con lo schermo spento: riempie le intestazioni di
   colonna che graficamente restano vuote (quelle dei pulsanti). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buono a sapersi ---------- */
.spunto-titolo{margin:6px 0 -4px}
.spunto-titolo h2{font-size:20px;letter-spacing:-.02em;margin:0}
.spunto-titolo p{margin:3px 0 0;font-size:12.5px}
.spunti-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;
  padding:0;background:none;border:0;box-shadow:none}
.spunto{display:flex;flex-direction:column;gap:8px}
.spunto h2,.spunto h3{margin:0;letter-spacing:-.01em}
.spunto h3{font-size:15.5px}
.spunto-top{display:flex;gap:7px;flex-wrap:wrap}
.spunto-testo{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.spunto-perche{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);
  border-left:1px solid var(--sel-line);padding-left:12px}
.spunto-oggi{background:linear-gradient(135deg,var(--sel),var(--card));border-color:var(--sel-line)}
.spunto-oggi .spunto-testo{font-size:14.5px}
/* le categorie non sono guadagni, perdite o stime: tutte con l'etichetta neutra */
.tag.cat-fisco,.tag.cat-costi,.tag.cat-metodo,.tag.cat-previdenza,.tag.cat-rischio{background:var(--info-bg);color:var(--info-ink)}
@media (max-width:760px){
  .spunti-griglia{grid-template-columns:1fr}
}

/* ---------- il valore in alto ----------
   E' il numero che si cerca per primo, quindi e' il piu' grande della pagina
   dopo il titolo, sta al centro esatto della testata e ha una cornice che lo
   stacca da titolo e comandi. Sotto, il guadagno detto nei due modi che
   servono insieme: la percentuale dice se e' andata bene, gli euro quanto.
   Il centro e' vero, non approssimato: i due gruppi laterali hanno la stessa
   base flessibile, cosi' lo spazio avanzato si divide in parti uguali. */
.valore{flex:0 0 auto;align-self:center;margin:0 auto;
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;
  padding:2px 6px;border:0;background:none;box-shadow:none;color:inherit;text-decoration:none;
  text-align:center;white-space:nowrap;transition:opacity .15s}
.valore:hover .valore-cifra{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;text-decoration-color:var(--line)}
.valore:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:10px}
/* il numero grande dice cos'e': in Panoramica sta accanto al patrimonio netto,
   e senza etichetta sembravano due cifre in disaccordo */
.valore-lab{font-size:10.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  align-self:center}
@media (max-width:520px){.valore-lab{display:none}}
/* tabellari: quando i prezzi si aggiornano la cifra non cambia larghezza */
.valore-cifra{font-size:35px;font-weight:850;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums}
/* Dall'inizio e ultima seduta, una sotto l'altra, come due righe di una
   tabella: ogni riga passa le sue tre parti alla griglia (display:contents),
   cosi' etichette, percentuali ed euro stanno in colonna qualunque sia la
   larghezza delle cifre, e il filo che li separa resta dritto. */
.valore-righe{display:grid;grid-template-columns:auto auto auto;column-gap:8px;row-gap:1px;align-items:baseline;
  align-self:center;line-height:1.2;font-variant-numeric:tabular-nums}
.valore-guadagno{display:contents}
.valore-guadagno[hidden]{display:none}
.valore-quando{font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:right}
.valore-righe:has(#valoreOggi:not([hidden])) .valore-var{font-size:15px}
.valore-righe:has(#valoreOggi:not([hidden])) .valore-eur{font-size:14px}
.valore-var{font-size:17px;font-weight:850;text-align:right}
/* Percentuale ed euro sono la stessa notizia detta in due modi, quindi
   stesso colore; per non leggerli come un numero solo li separa un filo
   verticale e li distingue il peso: la percentuale piu' grossa, gli euro
   un gradino sotto. */
.valore-eur{font-size:15.5px;font-weight:750;text-align:right;padding-left:12px;border-left:1px solid var(--line)}
.valore-eur:empty{padding:0;border:0}
@media (max-width:1280px){
  .valore{gap:10px;padding:2px}
  .valore-cifra{font-size:27px}
  .valore-var{font-size:15px}
  .valore-eur{font-size:13.5px}
}
@media (max-width:760px){
  .head{display:flex;align-items:flex-start;flex-wrap:wrap}
  .head-title{flex:1;min-width:150px}
  /* Su uno schermo alto 844px una testata da 180 e' un quinto della pagina:
     appena si scorre resta il valore e la riga dei comandi, e il nome della
     sezione se ne va perche' lo dice gia' la voce accesa nel menu. */
  body.scrollata .head{padding-top:6px;padding-bottom:7px;gap:9px}
  body.scrollata .head-title{display:none}
  body.scrollata .head .head-actions{width:auto;flex:1}
  body.scrollata .valore{padding:0 0 2px}
  body.scrollata .valore-cifra{font-size:26px}
  .valore{order:-1;width:100%;margin:0;padding:2px 0 6px;gap:11px}
  .valore-cifra{font-size:31px}
  .valore-var{font-size:16px}
  .valore-eur{font-size:14.5px}
}
@media (max-width:400px){
  .valore{gap:9px}
  .valore-cifra{font-size:26px}
  .valore-var{font-size:14px}
  .valore-eur{font-size:13px;padding-left:7px}
  .valore-righe{column-gap:6px}
}

/* Il sottotitolo della fonte scelta in Import stava a 4,1:1 sul fondo blu
   chiaro della scheda attiva. */
.modibtn.active small{color:var(--ink-2)}

/* Ultimi due rilievi di axe: la matrice di correlazione scorre in orizzontale
   come le tabelle, quindi vuole lo stesso accesso da tastiera; e l'etichetta
   arancione del registro stava a 4,3:1 sul suo fondo. */
.heat:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tag.tx-sell{color:var(--warn-ink)}

/* ---------- Report: la situazione in una pagina ----------
   La pagina e' il documento. A schermo e' un foglio largo quanto un A4 al
   netto dei margini, cosi' quello che si vede e' quello che esce dalla
   stampante; sotto i 760px si adatta allo schermo. */
.repbar{grid-column:span 12;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.reptesto{flex:1 1 320px;min-width:0}
.repbar h2{margin:0 0 4px}
.repbar p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.repazioni{display:flex;gap:10px;flex-wrap:wrap}
.repopzioni{display:flex;gap:6px 18px;flex-wrap:wrap;width:100%}
.repopz{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;
  padding:6px 0;min-height:24px}
.repopz input:disabled+*,.repopz:has(input:disabled){opacity:.55;cursor:default}

.foglio{--fg-pad:34px;width:min(100%,186mm);margin:8px auto 40px;background:var(--card);color:var(--ink);
  border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);padding:var(--fg-pad);
  display:flex;flex-direction:column;gap:26px;font-variant-numeric:tabular-nums}
.fg-testa{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:14px;
  border-bottom:2px solid var(--ink)}
.fg-marchio{color:var(--blue);font-weight:850;letter-spacing:.14em;font-size:12px;display:flex;align-items:center;gap:8px}
.fg-segno{width:22px;height:22px;flex:none}
.fg-sotto{font-size:24px;font-weight:850;letter-spacing:-.02em;margin-top:2px}
.fg-meta{text-align:right;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px;min-width:0}
.fg-meta b{color:var(--ink);font-size:14px}
.fg-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 28px;align-items:start}
.fg-lab{font-size:11px;font-weight:850;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.fg-cifra{font-size:46px;font-weight:850;letter-spacing:-.035em;line-height:1.05;margin:8px 0 10px}
.fg-guadagno{font-size:17px;font-weight:850}
.fg-guadagno small{display:block;color:var(--muted);font-weight:600;font-size:12.5px;margin-top:5px;letter-spacing:0}
.fg-kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:0}
.fg-kpi>div{border-left:2px solid var(--line);padding-left:10px;min-width:0}
.fg-kpi dt{font-size:10.5px;font-weight:850;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.fg-kpi dd{margin:2px 0 0;font-size:17px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-kpi dd small{display:block;font-size:11px;color:var(--muted);font-weight:600;white-space:normal}
.foglio h3{font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.fg-grafici{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fg-grafici figure{margin:0;border:1px solid var(--line);border-radius:12px;padding:10px 6px 4px;min-width:0}
.fg-grafici figcaption{font-size:12px;font-weight:850;text-align:center;margin-bottom:2px}
.fg-chart{height:236px;position:relative}
.fg-linea{height:250px;position:relative}
.fg-nota{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.fg-scroll{overflow-x:auto}
.fg-tab{width:100%;border-collapse:collapse;font-size:12px}
.fg-tab th{position:static;background:none;text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:6px 7px;border-bottom:1px solid var(--ink);white-space:nowrap}
.fg-tab td{padding:7px;border-top:0;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
.fg-tab td.nome{white-space:normal;font-weight:750;min-width:200px}
.fg-tab td small{display:block;font-weight:600;color:var(--muted);font-size:10.5px;margin-top:1px}
/* niente opacity per fare gerarchia su un colore: sbiadire il verde lo porta
   da 4,5:1 a 3,7:1 e la percentuale non si legge piu'. La differenza fra le
   due righe la fa il peso. */
.fg-tab td.num small{color:inherit;font-weight:700}
.fg-tab .num{text-align:right}
.fg-tab tfoot td{font-weight:850;border-bottom:0;border-top:2px solid var(--ink)}
.fg-salienti ol{margin:0;padding-left:22px;font-size:13px;line-height:1.6;columns:2;column-gap:28px}
.fg-salienti li{break-inside:avoid;margin-bottom:5px;padding-right:6px}
.fg-piede{font-size:11px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:760px){
  .foglio{--fg-pad:18px;gap:20px}
  .fg-hero{grid-template-columns:1fr}
  .fg-cifra{font-size:36px}
  .fg-grafici{grid-template-columns:1fr}
  .fg-chart{height:250px}
  .fg-salienti ol{columns:1}
  .fg-meta{text-align:right}
}

/* ---------- stampa ----------
   Resta solo il foglio. Su carta i colori sono quelli chiari qualunque sia
   il tema: un fondo scuro stampato e' un rettangolo nero. Le regole vengono
   dopo quelle dei temi e con la stessa specificita', quindi vincono. */
@media print{
  @page{size:A4;margin:12mm 12mm 14mm}
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    color-scheme:light;--bg:#fff;--card:#fff;--card-bg:#fff;--card-border:#fff;--ink:#152033;--muted:#5b6575;
    --ink-2:#3d4756;--line:#d9dee7;--grid:#e9edf3;--surface-2:#f4f2ee;--blue:#347267;--green:#137638;--red:#d92d20;
    --shadow:none;--alone:none;--accento-2:#a4502a;--accento-2-bg:#fbefe8;--accento-2-line:#efcdbd;}
  html,body{background:#fff!important}
  .sidebar,.head,.note,.toast,.overlay,.repbar,[data-noprint],dialog{display:none!important}
  .shell{display:block;min-height:0}
  .content{padding:0;max-width:none}
  #view{display:block}
  .foglio{width:auto;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0;gap:18px}
  .fg-grafici{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fg-chart{height:215px}
  .fg-linea{height:225px}
  .fg-hero,.fg-grafici,.fg-andamento,.fg-grafici figure,.fg-tab tr,.fg-salienti li{break-inside:avoid}
  .fg-tab thead{display:table-header-group}
  .fg-salienti ol{columns:2}
  .fg-scroll{overflow:visible}
  .fg-tab{font-size:10.5px}
  .fg-tab td.nome{white-space:normal}
  a{color:inherit;text-decoration:none}
  /* il vademecum stampato: le risposte come testo, senza campi ne' pulsanti */
  .schede,.stampa-vademecum .vad-voce textarea,.stampa-vademecum .vad-voce [data-usa],
  .stampa-vademecum #vadStampa,.stampa-vademecum .vad-voce .muted{display:none!important}
  .stampa-vademecum .vad-carta{display:block;white-space:pre-wrap;font-size:12pt;line-height:1.5;margin:4px 0 0}
  .stampa-vademecum .grid{display:block}
  .stampa-vademecum .card{border:0;padding:0 0 14px;break-inside:avoid}
}

/* ---------- bottoni: la tinta si apre dal punto in cui entra il cursore ----------
   Un cerchio di clip-path che si allarga da dove il dito (o il mouse) e'
   entrato, invece del solito cambio di fondo istantaneo. Il punto lo scrive
   radial.js in --rx/--ry; senza quel file l'effetto resta e parte dal centro.

   Due coppie di colori per ogni tipo di bottone: quella a riposo (il fondo
   vero del bottone) e quella di arrivo (--btn-fill e --btn-ink). Sono le
   stesse coppie gia' verificate a contrasto AA, non tinte nuove: l'effetto
   cambia il modo in cui il colore arriva, non quali colori sono leggibili.

   isolation:isolate + z-index:-1 tengono la tinta sopra il fondo del bottone
   ma sotto il testo, senza dover avvolgere le etichette in uno <span>. */
.btn,.tab,.temabtn,.modibtn,.rangebtn,.usritem{
  position:relative;isolation:isolate;overflow:hidden;
  --rx:50%;--ry:50%;
  --btn-fill:var(--sel);--btn-ink:var(--sel-ink)}
.btn::after,.tab::after,.temabtn::after,.modibtn::after,.rangebtn::after,.usritem::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-fill);
  clip-path:circle(0% at var(--rx) var(--ry));
  transition:clip-path .42s cubic-bezier(.22,.61,.36,1)}
.btn:hover:not(:disabled)::after,.tab:hover::after,.temabtn:hover::after,
.modibtn:hover::after,.rangebtn:hover::after,.usritem:hover::after{
  clip-path:circle(141% at var(--rx) var(--ry))}
.btn:hover:not(:disabled),.tab:hover,.temabtn:hover,.modibtn:hover,
.rangebtn:hover,.usritem:hover{color:var(--btn-ink)}
.btn{transition:color .3s ease,border-color .15s,box-shadow .15s}

/* Le tinte d'arrivo, una per famiglia. Il fondo a riposo resta quello di
   prima: e' la tinta che si apre sopra, non il bottone che cambia colore. */
.btn.primary{--btn-fill:var(--primary-hover);--btn-ink:#fff}
.btn.primary:hover:not(:disabled){background:var(--primary);border-color:var(--primary-hover)}
.btn.danger{--btn-fill:var(--danger-bg);--btn-ink:var(--danger-ink)}
.btn.xs.danger,.btn.mini.danger{--btn-fill:var(--danger-bg);--btn-ink:var(--danger-ink)}
.usritem.danger{--btn-fill:var(--danger-bg);--btn-ink:var(--danger-ink)}
.tab{--btn-fill:var(--hover);--btn-ink:var(--ink)}
.tab.active{--btn-fill:var(--sel);--btn-ink:var(--sel-ink)}
/* il pulsante dell'occhio quando gli importi sono nascosti e' gia' acceso:
   la tinta che si apre sopra sarebbe la stessa e non si vedrebbe muovere */
.btn.ico[aria-pressed="true"]{--btn-fill:var(--sel-line);--btn-ink:var(--sel-ink)}

/* Il bottone «Entra» del login sta su una scheda chiara, ma il fondo della
   pagina di accesso e' scuro: senza questo la tinta d'arrivo sarebbe invisibile */
.sso-btn{--btn-fill:var(--sel);--btn-ink:var(--sel-ink)}

/* Chi ha chiesto meno movimento vede il colore arrivare tutto insieme, che e'
   il comportamento di prima: l'informazione e' la stessa, senza l'onda. */
@media (prefers-reduced-motion: reduce){
  .btn::after,.tab::after,.temabtn::after,.modibtn::after,.rangebtn::after,.usritem::after{
    transition:opacity .12s linear;clip-path:none;opacity:0}
  .btn:hover:not(:disabled)::after,.tab:hover::after,.temabtn:hover::after,
  .modibtn:hover::after,.rangebtn:hover::after,.usritem:hover::after{clip-path:none;opacity:1}
  .btn{transition:border-color .15s,box-shadow .15s}
}

/* In stampa non esiste il passaggio del mouse, e un fondo pieno stampato e'
   inchiostro sprecato. */
@media print{
  .btn::after,.tab::after,.temabtn::after,.modibtn::after,.rangebtn::after,.usritem::after{display:none}
}

/* ---------- Modelli di portafoglio ----------
   Le torte sono quelle della Panoramica e le classi hanno lo stesso ordine in
   tutte, quindi lo stesso colore vuol dire la stessa cosa e il confronto si fa
   con l'occhio invece che leggendo sette legende. */
.modhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.1fr);gap:26px;align-items:center}
.modhero-testo h2{font-size:30px;letter-spacing:-.02em;margin:6px 0 2px}
.modhero-testo>.lab{font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--accento-2)}
.modhero-testo p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.modautore{color:var(--muted)!important;font-size:12.5px!important;margin-bottom:10px!important}
.modsovr{display:flex;align-items:baseline;gap:9px;margin:16px 0 8px}
.modsovr b{font-size:34px;font-weight:850;letter-spacing:-.03em;color:var(--accento-2);
  font-variant-numeric:tabular-nums}
.modsovr span{color:var(--muted);font-size:13px;font-weight:700}
.modhero-torte{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.modhero-torte figure{margin:0;min-width:0}
.modhero-torte figcaption{text-align:center;font-size:12px;font-weight:850;color:var(--ink-2);
  margin-bottom:2px}
.modhero-torte .chart{height:250px}

/* la barra: si legge prima del numero, e resta leggibile anche in stampa */
.modbar{display:block;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.modbar i{display:block;height:100%;border-radius:99px;background:var(--blue)}

.modgriglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.modcard{border:1px solid var(--line);border-radius:18px;padding:14px;min-width:0;
  background:var(--card);display:flex;flex-direction:column;gap:8px}
.modcard.vicino{border-color:var(--sel-line);background:linear-gradient(160deg,var(--sel),var(--card))}
.modcard header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.modcard h3{font-size:15px;margin:0;letter-spacing:-.01em}
.modpct{font-size:15px;font-weight:850;color:var(--blue);font-variant-numeric:tabular-nums}
.modcard .chart{height:210px}
.modidea{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

@media (max-width:900px){
  .modhero{grid-template-columns:1fr}
  .modhero-torte{grid-template-columns:1fr 1fr}
  .modhero-torte .chart{height:210px}
}
@media (max-width:560px){
  .modhero-torte{grid-template-columns:1fr}
  .modgriglia{grid-template-columns:1fr}
}

/* ---- il piano per arrivare a un modello ---- */
.modpari{margin:10px 0 0!important;font-size:12.5px!important;color:var(--muted)!important;line-height:1.5}
.modpari b{color:var(--ink-2)}
#modPiano select{min-width:230px}
.modriep{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.modriep>div{border-left:2px solid var(--line);padding-left:11px;min-width:0}
.modriep .lab{display:block;margin-bottom:3px}
.modriep b{font-size:15px;font-weight:850;line-height:1.35;display:block}
.modcosa{white-space:normal;min-width:220px;color:var(--ink-2);font-size:12px}
.fg-tab td small,.table td small{display:block;font-weight:600;color:var(--muted);font-size:10.5px}
@media (max-width:760px){
  #modPiano .head-actions{width:100%}
  #modPiano select{width:100%;min-width:0}
}

/* ---------- Panoramica: il patrimonio netto ---------- */
/* stretta: la cifra e le due variazioni stanno su una riga, affiancate */
.netto{padding:14px 18px}
.netto-testa{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.netto-titolo{display:flex;align-items:center;gap:2px}
.netto-valore{font-size:clamp(30px,3.6vw,40px);font-weight:850;letter-spacing:-.03em;line-height:1.05;
  margin:4px 0 3px;font-variant-numeric:tabular-nums}
.netto-valore.con-stima{color:var(--sel-ink)}
.netto-sotto{font-size:13px;color:var(--muted)}
.netto-sotto b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.netto-sotto b.neg{color:var(--red)}
.netto-var{display:flex;flex-wrap:wrap;gap:8px}
/* sotto il grafico del patrimonio netto: cosa dice il periodo, e la linea teorica quando c'e' */
.home-storico-nota{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:95ch}
.home-storico-nota:empty{display:none}
.var-riga{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1px 12px;padding:7px 12px;
  border-radius:12px;background:var(--surface-2);min-width:220px}
.var-riga>span{font-size:12px;font-weight:800;color:var(--muted)}
.var-riga>b{font-size:17px;font-weight:850;text-align:right;font-variant-numeric:tabular-nums}
.var-riga>small{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.var-dettaglio{grid-column:1/-1;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* casella con testo accanto (la usa la scheda privacy in Impostazioni) */
.netto-cu{display:inline-flex;align-items:center;gap:9px;min-height:40px;margin-top:12px;font-size:13px;
  font-weight:750;color:var(--ink-2);cursor:pointer}
.netto-cu input{width:18px;height:18px}
/* il capitale umano: una riga in fondo a «Da cosa è fatto», non un avviso sotto
   il numero grande. Acceso, accanto al netto resta solo un'etichetta */
.tag.stima{background:var(--chip);color:var(--sel-ink);margin-left:6px;vertical-align:1px}
.home-cu-voce{border-top:1px dashed var(--line);margin-top:4px;padding-top:4px}
.home-cu-voce>a,.home-cu-riga{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  min-height:42px;padding:6px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:13.5px;
  font-weight:700}
.home-cu-voce>a:hover{background:var(--hover)}
.home-cu-voce>a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.home-voci span small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:1px}
.home-cu-destra{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cu-somma{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:11.5px;font-weight:700;
  color:var(--muted);cursor:pointer}
.cu-somma input{width:16px;height:16px;margin:0}
.pallino.stima{background:var(--chip);border:2px solid var(--sel-ink)}
.home-voci small a{color:var(--sel-ink);font-weight:700}
.home-comp{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:18px;align-items:center}
.home-torta{height:210px}
.home-voci{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.home-voci>li>a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:42px;
  padding:6px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700}
.home-voci>li>a:hover{background:var(--hover)}
.home-voci>li>a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.home-voci b{font-variant-numeric:tabular-nums;font-weight:850;text-align:right}
.home-voci b small{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.home-debiti{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.pallino{width:10px;height:10px;border-radius:50%;background:var(--c)}
.pallino.meno{background:transparent;border:2px solid var(--red);width:10px;height:10px}
.fire-pct{font-size:40px;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--sel-ink)}
.fire-pct small{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--muted);margin-left:6px}
/* il verdetto del piano, in testa al riquadro della Panoramica */
.fire-verdetto{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.fire-verdetto.ok b{color:var(--green)}
.fire-verdetto.no b{color:var(--amber)}
.fire-barra{height:12px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:8px 0 12px}
.fire-barra i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.fire-testo,.home-cu{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.home-cu{padding-top:10px;border-top:1px solid var(--line);margin:4px 0 0}
@media(max-width:760px){
  .home-comp{grid-template-columns:minmax(0,1fr)}
  .netto-var{width:100%}
}

/* ---------- Capitale umano ---------- */
.cu-campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cu-largo{grid-column:1/-1}
.cu-formula{margin:14px 0 6px;padding:10px 14px;border-radius:12px;background:var(--surface-2);
  font-size:15px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.cu-valore span{display:block;font-size:13px;font-weight:800;color:var(--muted)}
.cu-valore b{display:block;font-size:clamp(32px,4.6vw,44px);font-weight:850;letter-spacing:-.03em;margin:4px 0;
  font-variant-numeric:tabular-nums}
.cu-valore small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:60ch}
.cu-fire{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:12px 0}
.cu-grafico{height:220px}
.cu-sub{font-size:15px;margin:22px 0 6px}
#cuEsito>p{font-size:13px;color:var(--ink-2);line-height:1.6;margin:6px 0}
.cu-pesi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 6px}
.cu-pesi>div{padding:10px 14px;border-radius:14px;background:var(--surface-2)}
.cu-pesi span{display:block;font-size:12px;font-weight:800;color:var(--muted)}
.cu-pesi b{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums}
.cu-perche{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2);line-height:1.7}
@media(max-width:760px){.cu-campi,.cu-pesi{grid-template-columns:minmax(0,1fr)}}

/* ---------- amministrazione del servizio ---------- */
.agg-azioni{display:flex;gap:8px;flex-wrap:wrap}
.agg-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 12px}
.agg-kpi.stretto{grid-template-columns:repeat(2,minmax(0,1fr))}
.agg-kpi>div{padding:10px 14px;border-radius:14px;background:var(--surface-2)}
.agg-kpi span{display:block;font-size:12px;font-weight:800;color:var(--muted)}
.agg-kpi b{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums}
.agg-barre{display:grid;gap:8px}
.agg-riga{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 4.2em;align-items:center;gap:10px;font-size:13px}
.agg-riga>span:first-child{color:var(--ink-2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agg-barra{display:block;height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.agg-barra i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.agg-riga b{text-align:right;font-variant-numeric:tabular-nums}
.agg-riga abbr{text-decoration:none;color:var(--muted);cursor:help}
/* il catalogo e' testo: va a capo invece di spingere l'ultima colonna fuori vista */
.agg-catalogo td{white-space:normal;vertical-align:top;line-height:1.45}
.agg-catalogo td:first-child{min-width:11em}
.ai-periodi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ai-periodo{padding:12px 14px;border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.ai-periodo span{font-size:12px;font-weight:800;color:var(--muted)}
.ai-periodo b{font-size:26px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.1}
.ai-periodo small{font-size:11.5px;color:var(--muted)}
.ai-periodo em{font-style:normal;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px}
.ai-credito span{display:block;font-size:13px;font-weight:800;color:var(--muted)}
.ai-credito b{display:block;font-size:clamp(30px,4.4vw,42px);font-weight:850;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--sel-ink);margin:2px 0}
.ai-credito small{display:block;font-size:12.5px;color:var(--muted)}
@media(max-width:1050px){.agg-kpi,.ai-periodi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Come investono gli italiani (Modelli): i numeri in evidenza, poi la tabella
   con le barre; grigio per le famiglie, l'accento per chi guarda */
.ita-numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:4px 0 14px}
.ita-numeri > div{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.ita-numeri .lab{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.ita-numeri b{font-size:24px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ita-numeri small{color:var(--muted);font-size:12.5px}
.ita-tabella th[scope=row]{font-weight:700;white-space:normal}
.ita-tabella td{min-width:170px}
.ita-cella{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.ita-cella b{min-width:52px;text-align:right}
.ita-tabella small{display:block;font-size:12px;margin-top:2px}
.ita-barra{flex:1 1 auto;height:8px;border-radius:99px;background:var(--line);overflow:hidden;min-width:60px;max-width:220px}
.ita-barra i{display:block;height:100%;border-radius:99px}
.ita-barra.loro i{background:var(--muted)}
.ita-barra.tuo i{background:var(--primary)}
.ita-fonte{font-size:12.5px;color:var(--ink-2);margin:10px 0 4px}
.ita-fonte b,.fonti-pagina b{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-right:6px}
.ita-fonti{margin:12px 0}
.ita-fonti summary{cursor:pointer;font-weight:750;min-height:40px;display:flex;align-items:center}
.ita-fonti ul{margin:6px 0 10px;padding-left:1.2em;display:grid;gap:8px;font-size:13.5px}
.ita-fonti p{font-size:13.5px}
.ita-stato{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* le famiglie italiane in tre schede: un'introduzione, i numeri, le tabelle */
.ita-intro{margin:0 0 12px;color:var(--ink-2);font-size:14px;line-height:1.5;max-width:78ch}
.ita-sotto{margin:20px 0 8px;font-size:15px;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.ita-nota{font-size:12.5px;line-height:1.5;margin:4px 0 0;max-width:90ch}
.ita-frase{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.ita-frase b{color:var(--sel-ink)}
/* la fila delle famiglie: un segno a meta', il tuo punto verde acqua */
.ita-fila{position:relative;height:10px;margin:18px 9px 6px;border-radius:99px;background:var(--line)}
.ita-fila-meta{position:absolute;top:-4px;width:2px;height:18px;border-radius:1px;background:var(--muted);transform:translateX(-1px)}
.ita-fila-tu{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--primary);
  border:3px solid var(--card);box-shadow:0 0 0 1px var(--primary);transform:translate(-50%,-50%)}
.ita-fila-capi{display:flex;justify-content:space-between;margin:0 0 12px;font-size:12px;color:var(--muted)}

.ita-soglie td,.ita-tabella td.num{min-width:0}
.ita-tabella td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ita-tabella th.num{text-align:right}
.ita-soglie tr.ita-tu th,.ita-soglie tr.ita-tu td{background:var(--sel);color:var(--sel-ink);font-weight:800}
.ita-debiti th,.ita-debiti td{border-top:2px solid var(--line)}
.ita-debiti td b{font-variant-numeric:tabular-nums}
.ita-filtro{max-width:360px;margin:0 0 14px}
.ita-filtro .vaiuto{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.table:has(> .ita-soglie){max-width:560px}
/* «Tu e le famiglie italiane»: la scala degli investimenti e gli strumenti, una accanto all'altra */
.ita-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.ita-due .table:has(> .ita-soglie){max-width:none}
.ita-possesso th[scope=row]{white-space:normal}
.ita-area{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.ita-area .ita-filtro{margin-bottom:6px}
.ita-area .ita-frase{margin:6px 0 0}
@media (max-width:620px){
  /* sul telefono i numeri due per riga (il dispari in fondo prende la riga intera)
     e la tabella delle voci senza barre: cinque colonne stanno nello schermo */
  .ita-numeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ita-numeri > div:last-child:nth-child(odd){grid-column:1/-1}
  .ita-numeri > div{padding:10px 12px}
  .ita-numeri b{font-size:20px}
  .ita-voci .ita-barra{display:none}
  .ita-voci td,.ita-voci th{min-width:0;padding-left:6px;padding-right:6px;font-size:12.5px;white-space:normal}
  .ita-voci th[scope=row]{hyphens:auto}
  .ita-voci .ita-cella b{min-width:0}
}
@media (max-width:760px){
  .ita-tabella th,.ita-tabella td{padding-left:8px;padding-right:8px}
  .ita-tabella th[scope=row]{font-size:13px}
  .ita-tabella td{min-width:0}
  .ita-cella{gap:6px}
  .ita-cella b{min-width:42px;font-size:13.5px}
  .ita-barra{min-width:28px;max-width:56px}
}

/* le fonti dei dati della pagina, nel piè di pagina sopra l'avvertenza */
.fonti-pagina{margin:0 0 8px}

/* le carte dei modelli portano alle differenze: si vede che si possono toccare,
   e quella scelta ha il filo dell'accento */
.modcard[data-carta]{cursor:pointer;transition:border-color .15s ease}
.modcard[data-carta]:hover{border-color:var(--primary)}
.modcard.scelta{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.modconfronta{justify-self:start;margin-top:4px;min-height:36px}
.modconfronta[aria-pressed="true"]{border-color:var(--primary);color:var(--primary)}
.modconfr{margin:0 0 10px;font-size:14px}
#modPiano h2:focus{outline:none}
/* arrivandoci con un clic su un modello, il titolo non finisce sotto la testata fissa */
#modPiano{scroll-margin-top:120px}
@media (prefers-reduced-motion:reduce){.modcard[data-carta]{transition:none}}

/* la spunta degli importi sta con le altre, ma separata da un filo: non sceglie
   cosa includere, sceglie come mostrarlo */
.repopz-importi{padding-left:12px;border-left:1px solid var(--line)}

/* «Ci arrivo?» nel piano FIRE: il numero in risalto, poi da dove vengono i
   numeri passati al simulatore, in carte uguali */
.fire-arrivo-esito{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
/* «Se le cose vanno storte»: una prova per riga, il titolo, come si prova, l'esito */
.fire-stress-prove{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fire-stress-prove li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.fire-stress-prove b{display:block;font-size:14.5px}
.fire-stress-prove small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.fire-stress-prove p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.fire-stress-prove .tag{margin-right:6px}
.fire-arrivo-pct{font-size:46px;font-weight:850;letter-spacing:-.03em;line-height:1;color:var(--accento-2)}
.fire-arrivo-esito span{max-width:62ch;font-size:14.5px;color:var(--ink-2)}
.fire-arrivo-esito span b{color:var(--ink)}
.fire-arrivo-numeri{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fire-arrivo-numeri li{display:grid;gap:2px;align-content:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.fire-arrivo-numeri span{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fire-arrivo-numeri b{font-size:15.5px;font-variant-numeric:tabular-nums}
.fire-arrivo-numeri small{font-size:12px;color:var(--muted)}
.fire-arrivo-azioni{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.fire-arrivo-azioni .btn{min-height:44px}
#pacDettaglio{scroll-margin-top:120px}
.pac-dal-piano{list-style:none;margin:6px 0 12px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;
  color:var(--ink-2);background:var(--accento-2-bg);border:1px solid var(--accento-2-line);border-radius:12px}
.pac-dal-piano b{color:var(--accento-2);margin-right:4px}
@media (max-width:760px){.fire-arrivo-pct{font-size:38px}.fire-arrivo-esito{align-items:flex-start}}

/* ----- piano FIRE v2 ----- */
/* gli eventi della vita: una scheda per evento dentro il loro gruppo */
.fire-eventi{display:grid;gap:12px;padding:14px 16px 0}
.fire-evento{margin:0;padding:12px 14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.fire-evento legend{padding:0 6px;font-weight:800;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.fire-evento .fcampi{padding:6px 0 0}
.fire-evento .btn{min-height:44px}
.fire-eventi-aggiungi{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px 16px}
.fire-eventi-aggiungi label{font-size:12.5px;font-weight:750;color:var(--ink-2)}
.fire-eventi-aggiungi select{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--card);color:var(--ink);font:inherit;max-width:100%}
.fire-eventi-aggiungi .btn{min-height:44px}
/* da controllare: i dati che non sembrano in euro di oggi */
.fire-avvisi{border-color:var(--warn-ink)}
.fire-avvisi ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
/* il calendario: le fasi in una striscia, poi la tabella anno per anno */
.fire-fasi{list-style:none;margin:4px 0 14px;padding:0;display:flex;gap:4px;min-width:0}
.fire-fasi li{flex-basis:0;min-width:58px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);overflow:hidden}
.fire-fasi b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fire-fasi small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap}
.fire-fasi .fase-lavoro{background:var(--surface-2)}
.fire-fasi .fase-ponte{background:var(--warn-bg);border-color:transparent}
.fire-fasi .fase-ponte b{color:var(--warn-ink)}
.fire-fasi .fase-pensione{background:var(--sel);border-color:var(--sel-line)}
.fire-fasi .fase-pensione b{color:var(--sel-ink)}
.fire-fasi .fase-vecchiaia{background:var(--surface-3)}
.fire-cal-tabella{max-height:440px}
.fire-cal-tabella table{font-size:12.5px}
.fire-cal-tabella td,.fire-cal-tabella th{white-space:nowrap}
.fire-cal-tabella small{color:var(--muted)}
.fire-cal-fase th{background:var(--surface-2);color:var(--ink-2);font-weight:800;text-align:left}
.fire-cal-tabella tr.scoperto td,.fire-cal-tabella tr.scoperto th{background:var(--danger-bg)}
/* la cascata e la longevita' */
.fire-cascata-frase,.fire-vita-frase{max-width:72ch;font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:4px 0 12px}
.fire-cascata-frase b,.fire-vita-frase b{color:var(--ink)}
.fire-cascata .table{margin-top:14px}
.fire-cascata tr.totale th,.fire-cascata tr.totale td{border-top:2px solid var(--line)}
.fire-sotto{margin:18px 0 8px;font-size:15px}
.fire-vita-barre{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:8px;max-width:640px}
.fire-vita-barre li{display:grid;grid-template-columns:72px minmax(0,1fr) 64px;align-items:center;gap:10px;font-size:13.5px}
.fire-vita-barre .barra{height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.fire-vita-barre .barra i{display:block;height:100%;border-radius:6px;background:var(--primary)}
.fire-vita-barre b{text-align:right;font-variant-numeric:tabular-nums}
/* i contenitori: quanto resta, e quanto vendere per una cifra netta */
.fire-netti{max-width:420px;margin:0 0 12px}
.fire-netti input{min-height:44px}
.fire-contenitori th[scope=row] small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;white-space:normal;max-width:38ch}
@media (max-width:700px){
  .fire-fasi{flex-wrap:wrap}
  .fire-fasi li{flex:1 1 40%}
  .fire-vita-barre li{grid-template-columns:62px minmax(0,1fr) 56px}
}
.pens-form{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-bottom:12px}
.fire-stress-prove p b{display:inline;font-size:inherit}
.fire-contenitori td:last-child{white-space:normal;min-width:18ch;max-width:34ch}
/* la qualita' dei dati del piano: il punteggio, la barra, che cosa fare */
.fire-qualita-testa{display:flex;align-items:center;gap:16px;margin:4px 0 12px}
.fire-qualita-punti{font-size:46px;font-weight:850;letter-spacing:-.03em;line-height:1;color:var(--accento-2)}
.fire-qualita-testa>div{flex:1;min-width:0;max-width:62ch}
.fire-qualita-testa .barra{display:block;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.fire-qualita-testa .barra i{display:block;height:100%;border-radius:5px;background:var(--primary)}
.fire-qualita-testa p{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.fire-qualita-voci{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fire-qualita-voci li{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.fire-qualita-voci small{color:var(--muted);margin-left:6px}
.fire-qualita-voci p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.fire-qualita-voci a{margin-left:4px;font-weight:700}
/* le strategie: quella del piano in evidenza */
.fire-strategie-lista li.scelta{border-color:var(--sel-line);background:var(--sel)}
/* le versioni del piano */
.fire-versione-nuova{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:12px}
.fire-versione-nuova .field{flex:1 1 280px;min-width:0}
.fire-versione-nuova .btn{min-height:44px;margin-bottom:22px}
.fire-versioni-lista{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.fire-versioni-lista li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.fire-versioni-lista small{display:block;color:var(--muted);font-size:12px}
.fire-versioni-azioni{display:flex;gap:8px;flex-wrap:wrap}
.fire-versioni-azioni .btn{min-height:44px}
/* l'eta' robusta: in quanti futuri regge, eta' per eta' */
.fire-robusta{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fire-robusta li{display:grid;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-width:96px}
.fire-robusta li.robusta{border-color:var(--sel-line);background:var(--sel)}
.fire-robusta b{font-size:13.5px}
.fire-robusta span{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fire-ottimizza tr.meglio th,.fire-ottimizza tr.meglio td{background:var(--sel)}
/* le leve, in ordine di effetto */
.fire-leve{margin:0;padding-left:22px;display:grid;gap:8px}
.fire-leve li{padding:2px 0}
.fire-leve li b{display:block;font-size:14px}
.fire-leve li span{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fire-leve li small{display:block;color:var(--muted);font-size:12px}
/* la spiegazione di MiradorAI */
.fire-spiega{margin-top:12px;display:grid;gap:10px}
.fire-spiega>.btn{justify-self:start;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.fire-spiega .aiico{width:18px;height:18px;fill:var(--accento-2)}
.piano-ai-risposta{padding:12px 14px;border:1px solid var(--accento-2-line);border-radius:14px;background:var(--accento-2-bg)}
.piano-ai-risposta p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
/* in Panoramica, accanto al patrimonio netto: il posto nella fila delle famiglie
   italiane, una carta come «In un mese», che porta al confronto nel Patrimonio */
.var-riga.var-fila{font:inherit;color:inherit;text-align:left;cursor:pointer;border:0}
.var-riga[hidden]{display:none}  /* finche' il posto nella fila non arriva */
/* arrivando dalla Panoramica, la sezione si ferma sotto la testata appiccicata */
#patrFamiglie{scroll-margin-top:110px}
.var-riga.var-fila:hover{border-color:var(--sel-line);background:var(--sel)}
.var-riga.var-fila:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.var-riga.var-fila>b{color:var(--ink)}
.var-riga.var-fila .patr-fila-barra{grid-column:1/-1}
.patr-fila-barra{position:relative;display:block;height:6px;margin:10px 6px 2px;border-radius:3px;background:var(--line)}
.patr-fila-barra i{position:absolute;top:50%;transform:translate(-50%,-50%)}
.patr-fila-barra i.meta{left:50%;width:2px;height:10px;background:var(--muted);opacity:.6}
.patr-fila-barra i.tu{width:13px;height:13px;border-radius:50%;background:var(--primary);border:2px solid var(--card);box-shadow:0 0 0 1px var(--primary)}
/* sotto il calendario del piano: quando finisce ogni debito, e il Lombard */
.fire-cal-debiti{margin:10px 0 0;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:90ch;display:grid;gap:4px}
/* la conferma forte (azzerare un account): due campi fra il testo e i pulsanti */
.cdlg-campi{display:grid;gap:12px;padding:4px 20px 8px}
.cdlg-campi .field label{font-size:12px;font-weight:700;color:var(--ink-2)}
.cdlg-campi .field label b{color:var(--ink)}
/* che cosa conta come investito: una barra delle tue attivita' finanziarie */
.inv-conta{margin:4px 0 16px;max-width:760px}
.inv-titolo{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.inv-titolo b{font-size:20px;color:var(--ink)}
.inv-titolo small{color:var(--muted)}
.inv-barra{display:flex;gap:2px;height:18px;border-radius:9px;overflow:hidden;background:var(--surface-3)}
.inv-barra .inv-seg{display:block;min-width:3px;height:100%}
.inv-seg.dentro-0{background:var(--primary)}
.inv-seg.dentro-1{background:color-mix(in srgb,var(--primary) 70%,var(--card))}
.inv-seg.dentro-2{background:color-mix(in srgb,var(--primary) 45%,var(--card))}
.inv-seg.fuori-0{background:repeating-linear-gradient(135deg,var(--surface-3) 0 5px,var(--line) 5px 7px)}
.inv-seg.fuori-1{background:repeating-linear-gradient(45deg,var(--surface-3) 0 5px,var(--line) 5px 7px)}
.inv-seg.fuori-2{background:var(--line)}
.inv-legenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:6px 20px;margin-top:10px}
.inv-legenda h4{margin:0 0 4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.inv-legenda ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.inv-legenda li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-legenda li .inv-seg{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid var(--line)}
.inv-legenda li small{color:var(--muted)}
/* la fila dell'investito: colonne per tratto, la tua linea */
.inv-fila{margin:0}
.inv-fila-grafico{height:180px;padding-top:22px;box-sizing:border-box;border-bottom:1px solid var(--line)}
.inv-fila-area{position:relative;display:flex;align-items:flex-end;gap:6px;height:100%;padding-right:78px}
.inv-fila-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.inv-fila-col i{display:block;width:100%;max-width:46px;border-radius:6px 6px 0 0;
  background:color-mix(in srgb,var(--primary) 40%,var(--card))}
.inv-fila-col.qui i{background:var(--primary)}
.inv-fila-val{font-size:10.5px;color:var(--muted);white-space:nowrap;margin-bottom:3px;font-variant-numeric:tabular-nums}
.inv-fila-tu{position:absolute;left:0;right:0;border-top:2px solid var(--accento-2);z-index:1;pointer-events:none}
.inv-fila-tu b{position:absolute;right:0;top:0;transform:translateY(-50%);font-size:11px;color:var(--accento-2);
  background:var(--card);padding:0 4px;border-radius:4px;white-space:nowrap}
.inv-fila-assi{display:flex;gap:6px;margin-top:4px;padding-right:78px}
.inv-fila-assi span{flex:1;text-align:center;font-size:10.5px;color:var(--muted);min-width:0}
.inv-fila figcaption{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.inv-numeri{margin-top:10px}
.inv-numeri summary{cursor:pointer;font-size:13px;font-weight:700;min-height:40px;display:flex;align-items:center}
@media (max-width:520px){.inv-fila-area{gap:3px;padding-right:70px}.inv-fila-assi{gap:3px;padding-right:70px}
  .inv-fila-assi span{font-size:9.5px}
  /* stretti, le cifre si accavallano: restano la tua colonna e l'ultima (le altre in «Vedi i numeri») */
  .inv-fila-col:not(.qui):not(:last-child) .inv-fila-val{visibility:hidden}}
/* il partner, solo nel Patrimonio: la vista tua o della coppia, e il nome */
.patr-coppia{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:10px 0 2px}
.patr-coppia small{color:var(--muted);font-size:12.5px}
.patr-coppia .link{font-size:13px}
.patr-partner{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:10px 0 2px;max-width:640px}
.patr-partner .field{flex:1 1 260px}
.patr-partner-azioni{display:flex;gap:8px;padding-bottom:22px}
.vchi{border:0;padding:0;margin:4px 0 8px;display:flex;gap:6px 18px;flex-wrap:wrap}
.vchi legend{font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px;padding:0}
.vchi label.segno{display:flex;align-items:center;gap:8px;min-height:40px;font-size:13px;font-weight:700}
.vchi input{width:18px;height:18px;margin:0;accent-color:var(--primary)}
/* il pulsante per salvare il piano accanto alla chat di MiradorAI */
.piano-ai-salva{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.piano-ai-salva small{color:var(--muted);font-size:12.5px}
/* il selettore «Personale / Coppia» in testata, solo con il partner */
.vistasel{flex:none}
.vistasel[hidden]{display:none}
.vistasel .rangebtn{min-height:40px}
.patr-aggiungi-partner{min-height:44px;font-weight:750}
@media (max-width:760px){.vistasel .rangebtn{padding:0 8px;font-size:12.5px}
  .head .head-actions>.btn,.head .head-actions>.usrsel{flex:none}
  .head .head-actions:has(#vistaSel:not([hidden])){gap:6px}}
/* la Panoramica: il numero grande, quattro numeri chiave, una sola cosa da fare */
/* il numero grande a sinistra, il resto a destra sulla stessa riga (Marco, 8/10/2026): il riquadro resta basso */
.home-hero{display:flex;align-items:center;justify-content:space-between;gap:10px 32px;flex-wrap:wrap}
.hero-sx{min-width:0}
.hero-sx .netto-valore{margin-bottom:0}
.hero-dx{display:grid;gap:5px;justify-items:end;text-align:right;min-width:0}
.hero-var{margin:0;font-size:14px;color:var(--ink-2)}
.hero-var b{font-weight:850;font-variant-numeric:tabular-nums}
.hero-fila{margin:0;font-size:14px;font-weight:750}
.hero-fila a{color:var(--sel-ink)}
.home-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;gap:5px;padding:14px 16px;color:var(--ink);text-decoration:none;min-width:0}
.kpi:hover{border-color:var(--sel-line)}
.kpi:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kpi-lab{font-size:12.5px;font-weight:800;color:var(--muted)}
.kpi b{font-size:26px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi small{font-size:12.5px;color:var(--muted);line-height:1.4}
.kpi-barra{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.kpi-barra i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.home-azione{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.home-azione p{margin:4px 0 0;color:var(--ink-2);max-width:70ch;line-height:1.5}
.home-azione-bottoni{display:flex;gap:8px;flex-wrap:wrap}
.home-insight{margin:12px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.home-insight:empty{display:none}
.home-insight b{font-variant-numeric:tabular-nums}
.home-cu-box{padding:4px 2px}
.home-periodo-altro{display:none;margin:0}
.home-periodo-altro select{min-height:40px}
@media(max-width:760px){
  /* sul telefono una colonna sola: il resto sotto il numero, allineato a sinistra */
  .home-hero{display:grid;gap:8px}
  .hero-dx{justify-items:start;text-align:left;gap:4px}
  .home-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px}
  .kpi b{font-size:21px}
  #homePeriodi .rangebtn:not([data-periodo="1A"]):not([data-periodo="3A"]):not([data-periodo="MAX"]){display:none}
  .home-periodo-altro{display:block}
  .home-azione .btn{width:100%;text-align:center}
  .home-azione-bottoni{width:100%;flex-direction:column-reverse}
}
/* il Patrimonio: il netto in grande, carte compatte da toccare, le due schermate delle famiglie */
.patr-netto{font-size:clamp(28px,3.4vw,36px);font-weight:850;letter-spacing:-.03em;line-height:1.1;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.patr-netto small{font-size:14px;font-weight:750;letter-spacing:0;color:var(--muted)}
.patr-netto.neg{color:var(--red)}
.patr-sotto{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.patr-carta{position:relative}
.patr-carta-link{color:inherit;text-decoration:none}
.patr-carta-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.patr-carta-link:focus-visible{outline:none}
.patr-carta:has(.patr-carta-link:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.patr-carta-info{color:var(--ink-2);font-size:12.5px;margin-top:-4px}
.patr-carta-stato{color:var(--muted);font-size:12px;margin-top:auto}
.patr-carta-stato:empty{display:none}
.patr-carta-azione{position:relative;z-index:1;align-self:flex-start}
.patr-accesso{position:relative;display:flex;flex-direction:column;gap:5px;color:var(--ink);text-decoration:none;
  padding-right:44px}
.patr-accesso b{font-size:16px;line-height:1.35}
.patr-accesso small{color:var(--muted);font-size:12.5px;line-height:1.45}
.patr-accesso .patr-carta-freccia{position:absolute;right:16px;top:50%;margin-top:-9px}
.patr-accesso:hover{border-color:var(--sel-line)}
.patr-accesso:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* una voce si apre toccandola: li' si cambia o si toglie */
.patr-voce.apribile{position:relative;cursor:pointer}
.patr-voce.apribile:hover{background:var(--hover)}
.patr-apri{background:transparent;border:0;padding:0 2px;color:var(--muted);cursor:pointer;line-height:0}
.patr-apri::after{content:"";position:absolute;inset:0;border-radius:inherit}
.patr-apri svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.patr-apri:focus-visible{outline:none}
.patr-voce.apribile:has(.patr-apri:focus-visible){outline:2px solid var(--blue);outline-offset:1px}
.patr-voce.apribile a,.patr-voce.apribile .infoi{position:relative;z-index:1}
.vazioni-elimina{margin-right:auto}
@media(max-width:760px){
  /* l'azione principale resta a portata di pollice */
  .patr-pagina{padding-bottom:70px}
  .patr-pagina #patrAggiungi{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    z-index:var(--z-menu);min-height:48px;box-shadow:0 10px 28px #10182840}
}

/* Posizione e Confronto */
.pos-frase{font-size:15.5px;line-height:1.55;color:var(--ink);margin:6px 0 0;max-width:70ch}
.pos-fila{margin:30px 4px 6px}
.pos-fila-barra{position:relative;height:14px;border-radius:99px;
  background:linear-gradient(90deg,var(--surface-3),color-mix(in srgb,var(--primary) 30%,var(--surface-3)))}
.pos-top{position:absolute;top:0;bottom:0;right:0;border-radius:0 99px 99px 0;
  background:color-mix(in srgb,var(--primary) 45%,transparent)}
.pos-segno{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-2)}
.pos-tu{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--primary);border:3px solid var(--card-bg);box-shadow:0 0 0 2px var(--primary)}
.pos-tu b{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:12px;font-weight:850;
  color:var(--sel-ink);white-space:nowrap}
.pos-fila-capi{position:relative;height:18px;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.pos-fila-capi span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pos-fila-capi span:first-child{transform:none}
.pos-fila-capi span:last-child{transform:translateX(-100%)}
.pos-riferimenti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.pos-riferimenti>div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.pos-riferimenti b{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums}
.pos-riferimenti small{color:var(--muted);font-size:12.5px;line-height:1.4}
.pos-confronti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pos-confronto{padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.pos-confronto h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;color:var(--ink)}
.pos-confronto p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pos-due{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 10px;font-size:12px;
  font-weight:750;color:var(--muted)}
.pos-due b{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.pos-mini{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pos-mini i{display:block;height:100%;border-radius:99px}
.pos-mini.tuo i{background:var(--primary)}
.pos-mini.loro i{background:var(--muted)}
.pos-metodo p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:80ch}
.pos-cosa{margin-top:12px}
.pos-cosa>summary{cursor:pointer;font-weight:750;color:var(--sel-ink);min-height:40px;display:flex;align-items:center}
.pos-cosa p{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:80ch}
.cf-barre{display:grid;gap:12px;margin-top:16px}
.cf-riga{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:12px}
.cf-chi{font-size:13px;font-weight:800;color:var(--ink-2)}
.cf-barra{display:flex;gap:2px;height:22px;border-radius:8px;overflow:hidden}
.cf-barra i{display:block;min-width:3px}
.cf-conti{background:#7c8598}
.cf-obbligazioni{background:color-mix(in srgb,#2d74c4 50%,var(--card-bg))}
.cf-crescita{background:#489e8e}
.cf-previdenza{background:#2d74c4}
.cf-altro{background:#5b6b8c}
.cf-pallino{display:inline-block;width:12px;height:12px;border-radius:4px;flex:none}
.cf-legenda{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:6px 16px;font-size:12.5px}
.cf-legenda li{display:flex;align-items:center;gap:8px}
.cf-legenda li span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.cf-legenda li span b{color:var(--ink)}
.cf-numeri{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .pos-riferimenti,.pos-confronti{grid-template-columns:minmax(0,1fr)}
  .cf-riga{grid-template-columns:minmax(0,1fr);gap:4px}
}
/* il Riepilogo degli investimenti */
.riep-emerge{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:80ch}
.riep-emerge b{color:var(--ink)}
.riep-conti{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.riep-conto{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:48px;
  padding:8px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.riep-conto:hover{background:var(--hover)}
.riep-conto:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.riep-conto small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.riep-conto-valore{font-variant-numeric:tabular-nums;font-weight:850}
.riep-conto svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* l'Andamento: lo stato dello storico, da dove viene la crescita */
.and-stato{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.and-contributi{list-style:none;margin:0;padding:0;display:grid}
.and-contributi li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px;font-weight:750}
.and-contributi li:last-child{border-bottom:0}
.and-contributi small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.and-contributi b{font-variant-numeric:tabular-nums;font-weight:850;white-space:nowrap}
@media(max-width:760px){
  #rangeBar .rangebtn:not([data-range="1M"]):not([data-range="1A"]):not([data-range="MAX"]){display:none}
  #modeBar{flex:1 1 100%}
  #modeBar .rangebtn{flex:1;white-space:nowrap}
}
/* il Rischio: il livello a parole in grande, peso e rischio di ogni classe */
.rischio-livello{margin:2px 0 0;font-size:clamp(24px,3vw,32px);font-weight:850;letter-spacing:-.02em;color:var(--ink)}
.rischio-pesi{display:grid;gap:10px}
.rischio-effetto li:last-child b{font-size:16px}
details.esperti>.grid{margin-top:4px}
/* Posizioni: la concentrazione in alto, ricerca e filtri, la qualita' del rendimento */
.pos-conc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 10px;font-size:13.5px;color:var(--muted)}
.pos-conc b{color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.pos-filtri{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 12px}
.pos-filtri .field{margin:0;flex:1 1 240px;max-width:420px}
.pos-filtri input[type=search]{width:100%;min-height:40px}
.pos-qualita{display:inline-block;margin-left:6px;font-size:10.5px;padding:1px 6px;vertical-align:1px}
.namecell .instrbtn .ticker{margin-left:6px}
/* Transazioni: la copertura dello storico, le importazioni, le righe per giorno */
.tx-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tx-import{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tx-import li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;
  border:1px solid var(--line);border-radius:12px;font-size:13.5px}
.tx-import li small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.tx-import li.annullata b{color:var(--muted)}
.tx-giorno th{background:var(--surface-2);text-align:left;font-size:12px;font-weight:850;color:var(--ink-2);
  padding:6px 10px;letter-spacing:.02em}
/* Modelli: affidabilita' del confronto e l'elenco di tutti i modelli */
.modAffidabile{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.modperche{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.mod-elenco{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.mod-riga{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 64px;align-items:center;gap:12px;width:100%;
  min-height:42px;padding:6px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);
  font:inherit;font-weight:750;text-align:left;cursor:pointer}
.mod-riga:hover{background:var(--hover)}
.mod-riga[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel)}
.mod-riga:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mod-riga b{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:760px){.mod-riga{grid-template-columns:minmax(0,1fr) 56px}.mod-riga .modbar{display:none}}
/* Liberta' finanziaria: la probabilita' in alto, quattro numeri, tre leve, le fasi */
.fire-prob{margin:6px 0 0;font-size:15px;color:var(--ink)}
.fire-prob b{font-size:18px}
.firedati.quattro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1 1 100%}
.firedati.quattro .firedato{min-width:0}
.fire-tre-leve{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fire-tre-leve li{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:14px}
.fire-tre-leve li b{font-size:14px}
.fire-tre-leve li span{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums}
.fire-tre-leve li small{color:var(--muted);font-size:12px}
.fire-fasi-carte{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.fire-fasi-carte li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  font-size:13px;color:var(--ink-2)}
.fire-fasi-carte li>b{font-size:15px;color:var(--ink)}
.fire-fasi-carte li>small{color:var(--muted);font-weight:750}
.fire-fasi-carte .fase-lavoro{background:var(--surface-2)}
.fire-fasi-carte .fase-ponte{background:var(--warn-bg);border-color:transparent}
.fire-fasi-carte .fase-pensione{background:var(--sel);border-color:var(--sel-line)}
.fire-fase-cap{margin-top:4px;font-variant-numeric:tabular-nums}
.fire-cal-dettaglio>summary{cursor:pointer;font-weight:750;color:var(--sel-ink);min-height:40px;display:flex;align-items:center}
/* la prima riga resta ferma mentre si scorre l'anno per anno */
.fire-cal-tabella thead th{position:sticky;top:0;z-index:1;background:var(--surface-2)}
@media(max-width:760px){
  .firedati.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fire-tre-leve{grid-template-columns:minmax(0,1fr)}
}
/* l'attesa mentre MiradorAI legge una foto o un file */
.attesa{display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:var(--sel);border:1px solid var(--sel-line);
  color:var(--ink);max-width:560px}
.attesa b{font-size:15px}
.attesa span{font-size:13px;color:var(--ink-2);line-height:1.5}
.attesa-barra{display:block;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;position:relative}
.attesa-barra i{position:absolute;top:0;bottom:0;width:35%;border-radius:99px;background:var(--primary);
  animation:attesa-scorre 1.6s ease-in-out infinite}
@keyframes attesa-scorre{0%{left:-35%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.attesa-barra i{animation:none;left:0;width:100%;opacity:.5}}
.attesa .attesa-frase{font-size:12.5px;font-weight:750;color:var(--sel-ink);margin:0}
/* il percorso del primo accesso, nella prossima cosa da fare */
.home-percorso{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:8px 0 4px;font-size:13px;color:var(--ink-2)}
.home-percorso ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.home-percorso li{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;
  font-weight:750;color:var(--ink)}
.home-percorso li small{font-weight:600;color:var(--muted)}
.home-percorso li.fatto{background:var(--sel);border-color:var(--sel-line)}
.home-percorso-segno{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);
  font-size:11px;font-weight:900;color:var(--sel-ink)}
.home-percorso li.fatto .home-percorso-segno{border-color:var(--sel-ink)}
/* il benvenuto: il motto, il profilo completato, cosa si scopre */
.bdlg-motto{margin:-6px 0 0;font-size:15px;font-weight:800;color:var(--accento-2)}
.bdlg-passi li.fatto{background:var(--sel);border-color:var(--sel-line)}
.bdlg-stato{font-weight:800}
.bdlg-profilo{display:flex;align-items:center;gap:12px;font-size:13.5px}
.bdlg-barra{flex:1;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bdlg-barra i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.bdlg-scopri{font-size:13px;color:var(--ink-2)}
.bdlg-scopri ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}
@media(max-width:560px){
  .bdlg-passi li{grid-template-columns:30px minmax(0,1fr);align-items:start}
  .bdlg-passi li .btn{grid-column:2;justify-self:start}
}
/* il report: la persona in cima, le 10 posizioni principali, come tornare su Mirador */
.fg-profilo{margin-bottom:4px}
.fg-tessere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fg-tessere>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:0}
.fg-tessere b{font-size:18px;font-weight:850;letter-spacing:-.01em}
.fg-tessere small{font-size:11px;color:var(--muted);line-height:1.4}
.fg-top ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:12.5px}
.fg-top li{display:grid;grid-template-columns:20px minmax(0,1fr) 60px 84px;gap:10px;align-items:baseline;padding:4px 0;
  border-bottom:1px solid var(--line);break-inside:avoid}
.fg-top-n{color:var(--muted);font-weight:800;text-align:right}
.fg-top-nome{font-weight:750;min-width:0}
.fg-top li small{color:var(--muted);font-weight:600;margin-left:6px}
.fg-top li b{text-align:right;font-variant-numeric:tabular-nums}
.fg-top-peso{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.fg-salienti ul{margin:0;padding-left:20px;font-size:13px;line-height:1.6;columns:2;column-gap:28px}
.fg-continua{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--sel);border:1px solid var(--sel-line);font-size:12.5px;color:var(--ink-2)}
.fg-continua>div:first-child{display:grid;gap:4px}
/* il codice QR resta nero su bianco anche nel tema scuro: e' cosi' che si legge col telefono */
.fg-qr{width:104px;line-height:0;background:var(--qr-carta);padding:6px;border-radius:8px}.fg-qr svg{width:100%;height:auto}
.fg-badge{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.fg-badge ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fg-badge li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0}
.fg-badge li b{font-size:12px;line-height:1.2}.fg-badge li small{font-size:10.5px;color:var(--muted);line-height:1.25}
.fg-badge p{margin:8px 0 0;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.fg-continua b{font-size:14px;color:var(--ink)}
.fg-continua a{font-weight:850;color:var(--sel-ink)}
@media(max-width:700px){.fg-badge ul{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-continua{grid-template-columns:1fr}.fg-tessere{grid-template-columns:1fr 1fr}.fg-salienti ul{columns:1}.fg-top li{grid-template-columns:18px minmax(0,1fr) auto}.fg-top-peso{display:none}}

/* ---- Profilo: badge e traguardi (views/badge.js) ---- */
.med{flex:none;display:block}
.med.bloccato{filter:grayscale(1);opacity:.42}
.bdg-hero .occhiello{margin:0;font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--accento-2)}
.bdg-hero h2{margin:4px 0 0}
.bdg-cima{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.bdg-cima li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.bdg-cima b{font-size:13.5px;line-height:1.25}
.bdg-cima span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.bdg-frase{font-size:15px;font-weight:650;color:var(--ink-2);margin:12px 0 0;max-width:none;padding-inline:clamp(8px,3vw,40px);text-align:center;text-wrap:balance}
.bdg-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted);margin-top:12px}
.bdg-meta b{color:var(--ink)}
.bdg-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bdg-lista{list-style:none;margin:10px 0;padding:0;display:grid;gap:12px}
#bdgDna .bdg-lista{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bdg-voce{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.bdg-voce-apri{width:100%;padding:6px 8px;margin:-6px -8px;border:0;border-radius:12px;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;box-sizing:content-box}
.bdg-voce-apri:hover{background:var(--hover)}
.bdg-voce-apri:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bdg-voce b{display:block;font-size:14px}
.bdg-dato{display:inline-block;font-size:12px;font-weight:750;color:var(--sel-ink);background:var(--sel);border-radius:999px;
  padding:1px 8px;margin-top:3px;font-variant-numeric:tabular-nums}
.bdg-voce small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:3px}
.bdg-nota{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.bdg-nota a,.bdg-prossimo a{color:var(--sel-ink);font-weight:700}
.bdg-avviso{font-size:13px;color:var(--warn-ink);background:var(--warn-bg);border-radius:10px;padding:8px 10px;margin:8px 0 0}
.bdg-prossimo{font-size:13px;margin:8px 0 0;line-height:1.45}
.bdg-barra{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.bdg-barra i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.bdg-fila{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--surface-3),var(--sel-line));margin:16px 8px 4px}
.bdg-fila-tu{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid var(--card);
  transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--blue)}
.bdg-bloccata{display:grid;gap:10px;justify-items:start}
.bdg-bloccata p{margin:6px 0 0;color:var(--ink-2)}
.bdg-raccolta h3{margin:18px 0 6px;font-size:15px}
.bdg-raccolta h4{margin:14px 0 8px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bdg-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdg-tessera{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:12px 8px;border-radius:12px;background:var(--surface-2)}
.bdg-tessera b{font-size:13px;line-height:1.25}
.bdg-tessera small{font-size:11.5px;color:var(--muted);line-height:1.35}
.bdg-tessera .btn{margin-top:auto}
.bdg-metodo p{max-width:75ch;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
/* la finestra del primo sblocco */
.bdg-nuovi-lista{list-style:none;margin:8px 0 10px;padding:0 20px;display:grid;gap:12px}
.bdg-nuovi-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.bdg-nuovi-lista b{display:block}
.bdg-nuovi-lista small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.4}
.bdg-nuovi .med{animation:bdg-entra .55s cubic-bezier(.2,.8,.3,1.2) both}
.bdg-nuovi li:nth-child(2) .med{animation-delay:.12s}
.bdg-nuovi li:nth-child(3) .med{animation-delay:.24s}
@keyframes bdg-entra{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bdg-nuovi .med{animation:none}}
/* il badge dopo un salvataggio: un avviso piccolo in basso, sopra la filigrana, che non ferma la pagina */
.bdg-flott{position:fixed;right:16px;bottom:calc(52px + env(safe-area-inset-bottom,0px));z-index:40;
  width:min(380px,calc(100vw - 32px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);
  box-shadow:0 12px 32px rgba(15,47,53,.18);animation:bdg-flott-entra .3s ease-out both}
.bdg-flott-testo{display:grid;gap:3px;min-width:0}
.bdg-flott-testo small{color:var(--muted);font-size:12.5px;line-height:1.4}
.bdg-flott-azioni{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.bdg-flott-azioni .btn{min-height:40px;padding:6px 12px;font-size:13px}
.bdg-flott-x{min-width:40px;min-height:40px;margin:-8px -6px 0 0;border:0;background:none;color:var(--muted);font-size:22px;
  line-height:1;cursor:pointer;border-radius:10px}
.bdg-flott-x:hover{color:var(--ink);background:var(--surface-2)}
@keyframes bdg-flott-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bdg-flott{animation:none}}
@media print{.bdg-flott{display:none}}
/* la scelta dei badge per la carta da condividere */
.bdg-scelta{border:0;margin:0;padding:0 20px;display:grid;gap:4px;max-height:min(50vh,420px);overflow:auto}
.bdg-scelta label{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center;min-height:44px;
  padding:4px 6px;border-radius:10px;cursor:pointer}
.bdg-scelta label:hover{background:var(--hover)}
.bdg-scelta small{display:block;color:var(--muted);font-size:12px}
.bdg-scelta input{width:18px;height:18px;accent-color:var(--primary)}
.bdg-scelta input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:760px){.bdg-cima{grid-template-columns:repeat(2,minmax(0,1fr))}.bdg-cima li:last-child:nth-child(odd){grid-column:1/-1}}

/* ---- Spese: il registro del bilancio di casa (views/spese.js) ---- */
.spe-testa{display:grid;gap:12px}
.spe-mese{display:flex;align-items:center;gap:10px}
.spe-mese h2{margin:0;min-width:11ch;text-align:center}
.spe-mese .btn.ico{font-size:20px;line-height:1;min-width:40px;min-height:40px}
.spe-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.spe-kpi .kpi{border:1px solid var(--line);border-radius:12px}
.spe-nota{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.spe-veloce{display:grid;grid-template-columns:minmax(110px,150px) auto minmax(150px,1fr) minmax(140px,170px) minmax(160px,1.4fr) auto;
  gap:10px;align-items:end;padding:12px;border-radius:12px;background:var(--surface-2)}
.spe-veloce .field{margin:0}
.spe-veloce .field label small{font-weight:600;color:var(--muted)}
.spe-veloce .rangebar{align-self:end}
.spe-annulla{grid-column:1/-1;margin:0;font-size:13px}
.spe-azioni{display:flex;flex-wrap:wrap;gap:8px}
.spe-cat{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.spe-cat button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:10px;align-items:center;width:100%;
  min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.spe-cat button[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel)}
.spe-cat button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.spe-cat b{font-variant-numeric:tabular-nums}
.spe-cat small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.spe-cat i{position:absolute;left:0;bottom:0;height:3px;background:var(--blue)}
.spe-budget{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:10px}
.spe-bud>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.spe-bud b{font-variant-numeric:tabular-nums}
.spe-bud small{font-size:12px;font-weight:700}
.spe-barra{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:4px}
.spe-barra i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.spe-bud.soglia-80 .spe-barra i{background:var(--amber)}.spe-bud.soglia-80 small{color:var(--warn-ink)}
.spe-bud.soglia-100 .spe-barra i{background:var(--red)}.spe-bud.soglia-100 small{color:var(--danger-ink)}
.spe-movimenti{list-style:none;margin:0;padding:0}
.spe-giorno{font-size:11.5px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:12px 4px 4px}
.spe-mov{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:44px;padding:8px 10px;
  border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left}
button.spe-mov{cursor:pointer}button.spe-mov:hover{background:var(--hover)}
button.spe-mov:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.spe-nome{min-width:0;overflow-wrap:anywhere}
.spe-nome small{display:block;font-size:12px;color:var(--muted)}
.spe-mov b{font-variant-numeric:tabular-nums;white-space:nowrap}
.spe-ric{padding:4px 2px;display:grid;gap:10px;justify-items:start}
.spe-ric ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.spe-ric li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.spe-ric li.ferma{opacity:.7}
.spe-ric li small{display:block;color:var(--muted);font-size:12px}
.spe-metodo p{max-width:75ch;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.spe-vuota{display:grid;gap:12px}
.spe-vuota p{margin:0;max-width:70ch;color:var(--ink-2);line-height:1.5}
.spe-dlg{width:min(640px,calc(100vw - 32px))}
.spe-dlg .cdlg-azioni .btn.danger{margin-right:auto}
.spe-anteprima{max-height:min(48vh,420px);overflow:auto;border:1px solid var(--line);border-radius:10px}
.spe-anteprima table{width:100%;font-size:12.5px}
.spe-anteprima tr.doppia td{color:var(--muted)}
.spe-anteprima small{color:var(--muted)}
.spe-anteprima input{width:18px;height:18px;accent-color:var(--primary)}
.spe-errore{margin:0 20px;color:var(--danger-ink);font-size:13px}
@media(max-width:1050px){.spe-veloce{grid-template-columns:repeat(2,minmax(0,1fr))}.spe-veloce .spe-descr{grid-column:1/-1}
  .spe-veloce button[type=submit]{grid-column:1/-1}}
@media(max-width:760px){.spe-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spe-kpi>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  .spe-veloce{grid-template-columns:1fr}.spe-veloce .rangebar{justify-self:start}}

/* ---- Il tuo anno (views/replay.js): una carta alla volta ---- */
.rpl-testa{display:flex;flex-wrap:wrap;align-items:end;gap:12px 20px}
.rpl-testa .field{margin:0;min-width:140px}
.rpl-nota{margin:0;font-size:12.5px;color:var(--muted);max-width:75ch;line-height:1.45}
.rpl-storia{display:grid;gap:18px;padding:28px}
.rpl-carta{min-height:300px;display:grid;align-content:center;gap:12px;padding:18px;border-radius:18px;
  background:var(--alone),var(--surface-2);text-align:center;justify-items:center}
.rpl-carta:focus{outline:none}.rpl-carta:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rpl-carta h2{margin:0;font-size:22px}
.rpl-carta p{margin:0;max-width:52ch;line-height:1.5;color:var(--ink-2)}
/* il verde e il rosso del guadagno e della perdita valgono anche dentro le carte */
.rpl-carta .pos{color:var(--green)}.rpl-carta .neg{color:var(--red)}
.rpl-grande{font-size:clamp(28px,5vw,46px)!important;font-weight:900;letter-spacing:-.02em;color:var(--ink)!important;text-wrap:balance}
.rpl-num{font-size:clamp(30px,5vw,48px)!important;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rpl-num small{display:block;font-size:15px;font-weight:700;color:var(--muted)}
.rpl-da-a{display:flex;gap:12px;align-items:baseline;font-size:18px;font-variant-numeric:tabular-nums}
.rpl-da-a b{font-size:22px}
.rpl-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:min(560px,100%);margin:0}
.rpl-due>div{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.rpl-due dt{font-size:12px;font-weight:800;color:var(--muted)}
.rpl-due dd{margin:4px 0 0;font-size:20px;font-weight:850;font-variant-numeric:tabular-nums}
.rpl-due dd small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.rpl-badge{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.rpl-badge li{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px}
.rpl-badge b{font-size:12px;line-height:1.2}
.rpl-tre{margin:0;padding:0;list-style:none;display:grid;gap:8px;width:min(480px,100%);counter-reset:r}
.rpl-tre li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);counter-increment:r}
.rpl-tre li span::before{content:counter(r) ". ";color:var(--accento-2);font-weight:850}
.rpl-tre b{font-variant-numeric:tabular-nums}
.rpl-prossimo{display:grid;gap:8px;justify-items:center}
.rpl-comandi{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rpl-puntini{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.rpl-puntini button{width:24px;height:40px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.rpl-puntini button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line)}
.rpl-puntini button[aria-current="step"]::before{background:var(--blue);width:22px;border-radius:99px}
.rpl-puntini button:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-radius:6px}
.rpl-fondo{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.rpl-fondo .field{margin:0;min-width:220px}
@media(max-width:760px){.rpl-storia{padding:16px}.rpl-carta{min-height:360px;padding:16px 12px}
  .rpl-puntini button{width:20px}}

/* ---- L'archivio di famiglia (views/archivio.js) ---- */
.arc-chiuso{display:grid;gap:10px;justify-items:start}
.arc-chiuso h2{margin:0}
.arc-chiuso p{margin:0;max-width:72ch;color:var(--ink-2);line-height:1.5}
.arc-apri{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:10px;align-items:end;width:100%}
.arc-apri .field{margin:0}
.arc-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.arc-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.arc-fase{margin:6px 0 0}.arc-fase b{display:block;font-size:16px}.arc-fase small{display:block;color:var(--ink-2);margin-top:2px}
.arc-fiducia{display:grid;gap:10px;margin-top:12px}
.arc-fiducia .field{margin:0}
.arc-lettera{display:grid;gap:6px;padding:16px;border:2px dashed var(--line);border-radius:14px}
.arc-lettera h3{margin:0}.arc-lettera p{margin:0;max-width:75ch;line-height:1.5}
.arc-sel{user-select:all;overflow-wrap:anywhere}
.arc-codice{font-family:ui-monospace,Consolas,monospace;font-size:18px;font-weight:800;letter-spacing:.08em}
.arc-avviso{margin:0;font-size:12.5px;color:var(--warn-ink);background:var(--warn-bg);border-radius:10px;padding:8px 10px}
.arc-voci{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.arc-voce{display:grid;gap:2px;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.arc-voce:hover{background:var(--hover)}.arc-voce:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.arc-voce small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.arc-verifica{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.arc-verifica>span{flex:1 1 260px}.arc-verifica small{display:block;color:var(--muted)}
.arc-sezione .title{align-items:center}
.arc-dlg textarea{width:100%;min-height:96px;resize:vertical;font:inherit;line-height:1.5}
.arc-riga{display:inline-block;width:16ch;max-width:60%;border-bottom:1.5px solid var(--ink);vertical-align:-2px}
@media print{
  body:has(#arcLettera) .sidebar,body:has(#arcLettera) .head,body:has(#arcLettera) .arc-pagina>*:not(:has(#arcLettera)){display:none!important}
  .arc-pagina>*:has(#arcLettera){grid-column:1/-1}
  .arc-lettera{border:0}.arc-lettera .arc-azioni{display:none}}

/* ---- Mirador Score (views/badge.js) ---- */
.scr-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:6px 0 12px}
.scr-numero{margin:0;display:flex;align-items:baseline;gap:4px}
.scr-numero b{font-size:52px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.scr-numero span{font-size:18px;font-weight:800;color:var(--muted)}
.scr-fascia{margin:0;font-size:17px;font-weight:850;color:var(--sel-ink)}
.scr-fascia small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}
.scr-voci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.scr-voce{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.scr-voce.manca{border-style:dashed}
.scr-voce{min-width:0}
.scr-dett{min-width:0}
.scr-dett-tab{overflow-x:auto;max-width:100%}
.scr-dett summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);min-height:40px;display:flex;align-items:center}
.scr-dett table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.scr-dett th,.scr-dett td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.scr-dett .num{text-align:right;white-space:nowrap}
.scr-dett th small{display:block;font-weight:500;color:var(--muted)}
.scr-dett th,.scr-dett th small{white-space:normal;overflow-wrap:anywhere}
.scr-dett tfoot th,.scr-dett tfoot td{font-weight:800;border-bottom:0}
.scr-dett p{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.4}
.scr-riga{display:flex;justify-content:space-between;gap:10px}
.scr-riga span{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.scr-barra{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.scr-barra i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.scr-voce small{font-size:12.5px;color:var(--muted);line-height:1.4}
.scr-voce a{font-size:12.5px;font-weight:700;color:var(--sel-ink)}

/* ---- il coach del profilo ---- */
.coach-spunti{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.coach-spunti li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:10px 12px;border-radius:12px;
  background:var(--surface-2);font-size:13.5px;line-height:1.45}
.coach-spunti a{font-weight:750;color:var(--sel-ink);white-space:nowrap}
.coach-chat{margin-top:12px}

/* ---- La timeline della vita (views/vita.js) ---- */
.vit-aggiungi{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,170px) minmax(140px,1fr) minmax(160px,1.4fr) auto;
  gap:10px;align-items:end;padding:12px;border-radius:12px;background:var(--surface-2)}
.vit-aggiungi .field{margin:0}
.vit-aggiungi .field label small{font-weight:600;color:var(--muted)}
.vit-linea{list-style:none;margin:0;padding:0 0 0 6px;position:relative}
.vit-linea::before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:var(--line)}
.vit-anno h3{margin:14px 0 6px 30px;font-size:13px;letter-spacing:.05em;color:var(--muted)}
.vit-momento{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0 10px 30px}
.vit-momento b{display:block;font-size:14.5px}
.vit-momento small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.vit-momento a{font-size:12.5px;font-weight:700;color:var(--sel-ink)}
.vit-quando{display:block;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.vit-punto{position:absolute;left:1px;top:12px;width:14px;height:14px;border-radius:50%;border:3px solid var(--card);
  background:var(--muted);box-shadow:0 0 0 1px var(--line)}
.vit-tuo .vit-punto{background:var(--accento-2)}
.vit-traguardo .vit-punto{background:var(--med-oro)}
.vit-piano .vit-punto,.vit-tappa .vit-punto{background:var(--blue)}
.vit-mirador .vit-punto{background:var(--green)}
.vit-momento.futuro .vit-punto{background:var(--card);box-shadow:0 0 0 2px var(--blue)}
.vit-oggi{position:relative;margin:10px 0;padding-left:30px}
.vit-oggi span{display:inline-block;font-size:11.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sel-ink);background:var(--sel);border:1px solid var(--sel-line);border-radius:999px;padding:2px 10px}
@media(max-width:1050px){.vit-aggiungi{grid-template-columns:repeat(2,minmax(0,1fr))}.vit-aggiungi .vit-nota,
  .vit-aggiungi button{grid-column:1/-1}}
@media(max-width:760px){.vit-aggiungi{grid-template-columns:1fr}}

/* ---- Esperti (views/esperti.js): un'anteprima ---- */
.nav-pill{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--accento-2);background:var(--accento-2-bg);
  border:1px solid var(--accento-2-line);border-radius:999px;padding:1px 7px;white-space:nowrap}
/* nel menu compresso a icone la scritta si nasconde come le voci */
.shell.collapsed .tab .nav-pill{display:none}
.esp-hero{display:grid;gap:10px;justify-items:start}
.esp-hero h2{margin:0;text-wrap:balance}
.esp-hero p{margin:0;max-width:72ch;color:var(--ink-2);line-height:1.5}
.esp-azioni{display:flex;flex-wrap:wrap;gap:8px}
.esp-filtri{flex-wrap:wrap;margin-bottom:12px}
.esp-schede{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.esp-scheda{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px}
.esp-sigla{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:850;color:var(--sel-ink);background:var(--sel)}
.esp-scheda b{display:block;margin-top:4px}
.esp-scheda small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.esp-scheda dl{margin:8px 0 0;display:grid;gap:4px;font-size:12.5px}
.esp-scheda dt{display:inline;font-weight:800;color:var(--ink-2)}.esp-scheda dt::after{content:": "}
.esp-scheda dd{display:inline;margin:0;color:var(--ink-2)}
.esp-punti{margin:0;padding-left:18px;display:grid;gap:8px;line-height:1.5;color:var(--ink-2)}

/* ---- Il simulatore di decisioni (views/decisioni.js) ---- */
.dec-scelte{flex-wrap:wrap;margin-bottom:12px}
/* le scelte e i filtri vanno a capo interi: sul telefono la regola generale li stringerebbe fino a tagliarli */
.dec-scelte .rangebtn,.esp-filtri .rangebtn{flex:1 1 auto;white-space:nowrap;padding:8px 10px;min-height:40px}
.dec-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end;padding:12px;
  border-radius:12px;background:var(--surface-2)}
.dec-campi .field{margin:0}
.dec-spunta{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px}
.dec-prove{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px;min-width:0}
.dec-prova{display:grid;gap:10px;align-content:start;min-width:0}
.dec-prova:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dec-testa{display:flex;justify-content:space-between;gap:10px;align-items:start}
.dec-prova table{width:100%;font-size:13px;border-collapse:collapse;table-layout:fixed}
.dec-prova th:first-child{width:38%}
.dec-prova th,.dec-prova td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dec-prova th[scope=row]{font-weight:700;color:var(--ink-2)}
.dec-prova td{font-variant-numeric:tabular-nums}
.dec-prova th,.dec-prova td{white-space:normal;overflow-wrap:break-word}
.dec-prova td small{display:block;font-weight:700}
.dec-prova>.btn{justify-self:start}

/* ---- Fra le famiglie come la tua (views/posizione.js) ---- */
.sim-righe{list-style:none;margin:4px 0 0;padding:0;display:grid}
.sim-riga{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr) 140px;gap:8px 18px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.sim-riga:first-child{border-top:0}
.sim-chi{display:grid;gap:4px;min-width:0}
.sim-chi select{width:100%;min-height:40px}
.sim-chi small{font-weight:600}
.sim-gruppo{font-size:14px;min-height:40px;display:flex;align-items:center}
.sim-fila{position:relative;height:10px;border-radius:99px;
  background:linear-gradient(90deg,var(--surface-3),color-mix(in srgb,var(--primary) 30%,var(--surface-3)))}
.sim-fila.vuota{background:var(--surface-2)}
.sim-meta{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-2)}
.sim-tu{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--primary);
  border:3px solid var(--card-bg);box-shadow:0 0 0 2px var(--primary)}
.sim-posto{display:grid;justify-items:end;text-align:right}
.sim-posto b{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums}
.sim-posto small{color:var(--muted);font-variant-numeric:tabular-nums}
.infotip p{margin:0}.infotip p+p{margin-top:6px}
@media (max-width:760px){
  .sim-riga{grid-template-columns:minmax(0,1fr) auto}
  .sim-chi{grid-column:1/-1}
}
/* la nomina degli amministratori del servizio, in «Account del servizio» */
.tenant-gestore{position:relative;display:flex;align-items:center;gap:6px;min-height:40px;font-size:12.5px;white-space:nowrap;cursor:pointer}
.tenant-gestore input{width:18px;height:18px;margin:0}

/* il riquadro di un import, centrato e compatto: la spiegazione lunga sta nella «i» */
.upl{flex-direction:column;align-items:center;text-align:center}
.upl .upltesto{max-width:68ch}
.upl small{max-width:none;margin-inline:auto}
.upl .uplactions{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;min-width:0}
.upl .infoi{color:#fff;border-color:#ffffff99;background:transparent}
.upl .infoi:hover,.upl .infoi.open,.upl .infoi.active,.upl .infoi:focus-visible{background:#fff;border-color:#fff;color:#0d2622}
.upl small a{color:#fff}
.imp-aggiorna{text-align:center}
.red-comune{max-width:420px;margin:0 0 6px}
.red-comune input{width:100%;min-height:40px}
.sim-scrivi{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sim-scrivi input{flex:1 1 140px;min-height:40px}
.sim-scrivi .btn{min-height:40px}
.vquota[hidden]{display:none}

/* ---- La beta privata: l'accordo, la filigrana, le ricevute (js/accordo.js) ---- */
.accordo-testo{max-height:260px;overflow:auto;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);color:var(--ink);font-size:13px;line-height:1.5;text-align:left}
.accordo-testo h2{font-size:15px;margin:4px 0}.accordo-testo h3{font-size:13.5px;margin:12px 0 4px}
.accordo-testo p{margin:0 0 6px}
.accordo-testo:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.accordo-dlg{width:min(720px,calc(100vw - 32px))}
.accordo-dlg .reg-consensi{margin:10px 0 0}
.filigrana{position:fixed;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;pointer-events:none;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:11.5px;font-weight:700;letter-spacing:.02em}
/* la filigrana non deve coprire i pulsanti in fondo alla pagina (riunione del 13/10: «copre Aggiungi»): la pagina
   finisce piu' in alto, cosi' l'ultimo pulsante si porta sopra di lei; al telefono e' piu' piccola e trasparente */
body:has(.filigrana:not(.hidden)) #view{padding-bottom:56px}
@media (max-width:760px){.filigrana{font-size:10px;padding:2px 8px;opacity:.85;max-width:calc(100vw - 24px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media print{.filigrana:not(.hidden){display:block!important;position:fixed;bottom:4mm;right:4mm}}
.ricevute{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.ricevute li{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.ricevute span{font-size:12.5px;color:var(--muted)}
.dati-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tx-filtri{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 12px}
.tx-filtri .field{margin:0}
.tx-solo-import{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.tx-solo-import[hidden]{display:none}
.tx-import-azioni{display:flex;gap:6px;flex-shrink:0}
.vit-proposte{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.vit-proposte h3{margin:0 0 8px;font-size:13px;letter-spacing:.02em}
.vit-proposte ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vit-proposte li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.vit-proposta-azioni{display:flex;gap:6px}
.home-storia-azioni{display:flex;flex-wrap:wrap;gap:8px}
.fg-progressi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.fg-progressi>div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:0}
.fg-progressi ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:12.5px;line-height:1.45}
.fg-progressi p{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.fg-progressi{grid-template-columns:1fr}}
.patr-barra-debiti{height:8px;margin-top:10px}
tr[hidden]{display:none}
.fire-costi{flex:1 1 100%;margin:0;font-size:13px;color:var(--ink-2)}
.vstime{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.vstime b{flex-basis:100%;font-size:12px}
.pannello-grafico{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);color:var(--ink);
  border-top:1px solid var(--line);box-shadow:0 -10px 28px rgba(0,0,0,.14);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
  max-height:45vh;overflow:auto;font-size:13.5px}
.pannello-grafico[hidden]{display:none}
.pg-testa{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pg-testa .btn{min-width:40px;min-height:40px;padding:0}
.pannello-grafico ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pannello-grafico li{display:flex;align-items:center;gap:8px}
.pannello-grafico p{margin:8px 0 0;color:var(--ink-2);font-size:12.5px}
.fonti-metodi,.fonti-elenco{margin:0;display:grid;gap:12px}
.fonti-metodi dt,.fonti-elenco dt{font-weight:800;margin-bottom:2px}
.fonti-metodi dd,.fonti-elenco dd{margin:0;color:var(--ink-2);line-height:1.5;max-width:90ch}
.fonti-pagina a{margin-left:6px;white-space:nowrap}

/* ---------- il tema di ottobre 2026 ----------
   Lo spunto: un software chiaro e arioso. Carattere Poppins (servito da Mirador,
   licenza OFL in vendor/poppins), pulsanti e selettori a pillola, schede piu'
   morbide con un bordo sottile, etichette maiuscole e spaziate sopra i numeri,
   titoli con meno stretta fra le lettere. Colori: gli stessi token, quindi i
   quattro modi del tema seguono da soli. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/vendor/poppins/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/vendor/poppins/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/vendor/poppins/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700 900;font-display:swap;
  src:url("/assets/vendor/poppins/poppins-700.woff2") format("woff2")}
h1,h2,h3,.big,.netto-valore,.patr-netto{letter-spacing:-.01em}
.btn{border-radius:999px;padding:10px 18px;font-weight:600}
.btn.xs,.btn.mini{padding-inline:12px}
.btn.primary{box-shadow:0 6px 16px rgba(59,128,116,.22)}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 20px rgba(59,128,116,.3)}
.card{border-radius:20px;border-color:var(--card-border)}
.rangebar{border-radius:999px}
.rangebtn{border-radius:999px;padding:6px 12px}
.tab{border-radius:999px;font-weight:600}
.lab,.kpi-lab,.fg-lab{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}
input,select,textarea{border-radius:14px}
.badge,.tag{font-weight:600}
/* sul telefono la testata ha cinque comandi in fila: con Poppins e le pillole serve meno aria */
@media (max-width:760px){.head .head-actions .btn{padding-inline:12px}.head .head-actions .btn.ico{padding-inline:0}}
/* le spese: l'import del conto e «Dove migliorare» */
.spe-import{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:stretch}
.spe-drop{position:relative;display:grid;place-items:center;align-content:center;gap:4px;min-height:132px;padding:18px;
  text-align:center;border:2px dashed var(--sel-line);border-radius:18px;background:var(--surface-2);cursor:pointer;
  transition:background-color .15s,border-color .15s}
.spe-drop:hover,.spe-drop.sopra{background:var(--sel);border-color:var(--blue)}
.spe-drop:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.spe-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.spe-drop b{font-size:15px;color:var(--ink)}
.spe-drop small{color:var(--muted)}
.spe-drop-nome{font-weight:600;color:var(--sel-ink);font-size:13px}
.spe-import-campi{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.spe-import-campi .field{margin:0}
.spe-var{font-style:normal;font-size:11px;font-weight:600;margin-left:8px;padding:1px 7px;border-radius:999px;white-space:nowrap}
.spe-var.su{background:var(--warn-bg);color:var(--warn-ink)}
.spe-var.giu{background:var(--ok-bg);color:var(--ok-ink)}
.spe-spunti{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spe-spunti li{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border-left:3px solid var(--blue)}
.spe-spunti.ai li{border-left-color:var(--accento-2);background:var(--accento-2-bg)}
.spe-spunti b{font-size:13.5px}
.spe-spunti span{font-size:13.5px;color:var(--ink-2)}
.spe-sotto{font-size:13px;margin:16px 0 8px;color:var(--ink-2)}
.spe-voci{margin:0;padding-left:20px;display:grid;gap:6px}
.spe-voci li{padding-left:2px}
.spe-voci li>span{display:inline-flex;flex-direction:column;max-width:70%}
.spe-voci li>b{float:right;font-variant-numeric:tabular-nums}
.spe-voci small{color:var(--muted);font-size:11.5px}
@media (max-width:760px){.spe-import{grid-template-columns:1fr}}
/* di chi e' il dossier: tuo, del partner, cointestato con la quota */
.dichi{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.dichi legend{font-weight:600;padding:0 4px}
.dichi-quota{display:inline-flex;align-items:center;gap:6px}
.dichi-quota input,.acc-quota input{width:70px;text-align:right}
.acc-dichi{white-space:nowrap}
.acc-quota{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.acc-quota[hidden],.dichi-quota[hidden]{display:none}
/* la posizione aperta nel Patrimonio: il passaggio alle due pagine che la spiegano */
.pos-avanti{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* La tabella anno per anno del piano (revisione di Andrea, 6/10): scorre nel suo riquadro anche sul
   telefono, con l'intestazione sempre visibile e, a sinistra, anno ed eta' della riga. */
.fire-cal-tabella{max-height:min(480px,70vh)}
.fire-cal-tabella thead tr.fire-cal-gruppi>*{height:30px;padding-top:4px;padding-bottom:4px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:center;background:var(--surface-2)}
.fire-cal-tabella thead tr.fire-cal-gruppi>:first-child{position:sticky;left:0;z-index:4;width:auto;min-width:0;max-width:none}
.fire-cal-tabella thead tr:nth-child(2) th{top:30px}
.fire-cal-tabella td.fire-cal-primo,.fire-cal-tabella th.fire-cal-primo{border-left:2px solid var(--line)}
.fire-cal-tabella td.fire-cal-cap{font-weight:700}
.fire-cal-tabella thead th{z-index:3}
.fire-cal-tabella tr>:first-child{position:sticky;left:0;width:64px;min-width:64px;max-width:64px;box-sizing:border-box}
.fire-cal-tabella tr>:nth-child(2){position:sticky;left:64px;box-shadow:1px 0 0 var(--line)}
.fire-cal-tabella tbody th,.fire-cal-tabella tbody td:nth-child(2){top:auto;z-index:1;background:var(--card)}
.fire-cal-tabella thead th:first-child,.fire-cal-tabella thead th:nth-child(2){z-index:4}
.fire-cal-tabella tr.scoperto th,.fire-cal-tabella tr.scoperto td{background:var(--danger-bg)}
/* le intestazioni di riga non si fermano in alto: coprirebbero quelle delle colonne */
tbody th{position:static;z-index:auto}
/* la voce del Patrimonio: il totale e, sotto, «+ Aggiungi» in alto a destra */
.patr-testa-fine{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media (max-width:760px){.patr-testa-fine{align-items:stretch;width:100%}.patr-testa-fine .patr-tot{text-align:left}}
.patr-dossier-altri{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.patr-dossier-altri .link{font-size:12.5px}
/* il fido del Lombard: una riserva, scritta in inchiostro tenue (non e' un saldo) */
.patr-riserva{color:var(--ink-2);display:flex;flex-direction:column;align-items:flex-end}
.patr-riserva small{font-size:11px;color:var(--muted);font-weight:600}
.saldo-dlg{width:min(620px,calc(100vw - 32px))}
.saldo-corpo{padding:4px 20px 8px;display:grid;gap:14px}
.saldo-corpo .cash-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.saldo-corpo .cash-form .field:nth-child(3){grid-column:1/-1}
.saldo-corpo .cash-form .field:last-child{grid-column:1/-1;justify-self:end}
.saldo-grafico{height:170px}
.saldo-storia{max-height:220px}
.saldo-storia td.muted{font-size:11px}
.riprova{margin-top:12px}
/* il periodo delle Spese: la scelta e, sotto, il periodo con le frecce o le due date */
.spe-periodo{display:grid;gap:10px;justify-items:start}
.spe-periodi{flex-wrap:wrap}
.spe-intervallo{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.spe-intervallo .field{margin:0}
.spe-periodo-nome{margin:0 0 6px;font-size:16px}
/* l'entrata si distingue dalla spesa: verde, il colore dei soldi che arrivano */
.btn.entrata{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-ink)}
.btn.entrata:hover{filter:brightness(.97)}
.rangebtn.verso-entrata.active{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-ink)}
@media (max-width:760px){.spe-periodi .rangebtn{flex:1 1 30%}}
/* l'invito ai benchmark: facoltativo, con le due scelte alla pari per dimensione */
.invito-benchmark{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  border-color:var(--sel-line);background:var(--sel)}
.invito-benchmark h2{margin:0 0 4px;font-size:16px}
.invito-benchmark p{margin:0;max-width:70ch;font-size:13px;line-height:1.5;color:var(--ink-2)}
.invito-azioni{display:flex;gap:8px;flex-wrap:wrap}
#invitoBenchmark:empty{display:none}
/* nell'Andamento la linea che guarda indietro si accende a richiesta */
.and-indietro{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12.5px;color:var(--ink-2);min-height:40px;cursor:pointer}
.and-indietro input{width:18px;height:18px;flex:none}
/* il menu della revisione di Andrea: le macro-aree hanno la testata come una voce (non
   un'etichetta maiuscola), e dentro le loro pagine, rientrate */
.nav-primo{margin-top:0}
.nav-primo>.nav-testa{font-weight:750;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);
  padding:11px 12px;border-radius:12px}
.nav-primo>.nav-testa svg:not(.freccia){width:19px;height:19px;stroke-width:1.85}
.nav-primo>.nav-testa:hover{color:var(--ink)}
.nav-primo>.nav-testa.con-attiva{color:var(--sel-ink)}
/* le posizioni dentro il Riepilogo: la sezione e i filtri dai grafici */
.pos-dentro{gap:0}
.riep-fetta{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:2px 8px;margin:-2px -8px;border:0;
  border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.riep-fetta:hover{background:var(--hover)}
.riep-fetta:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.pos-scelta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 10px;font-size:12.5px;color:var(--ink-2)}
/* il contratto del mutuo e la sua storia: surroghe e rinegoziazioni sullo stesso debito */
.vvariabile{margin-top:4px;padding-top:10px;border-top:1px dashed var(--line)}
.vcambio{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.vcambio>summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center}
.vcambio .btn{margin-top:8px}
.vstoria{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px;font-size:12.5px}
.vstoria small{display:block;color:var(--muted)}
/* le voci lunghe del menu («Libertà finanziaria (FIRE)») vanno a capo invece di troncarsi */
.nav .tab span,.nav-primo>.nav-testa span{white-space:normal;line-height:1.25}
/* Protezione Famiglia: quello che serve, quanto e' coperto, le scadenze */
.prot-bisogni{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.prot-bisogni li{display:grid;gap:4px}
.prot-bisogni small{color:var(--ink-2);font-size:12.5px;line-height:1.45}
.prot-riga{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prot-barra{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prot-barra i{display:block;height:100%;background:var(--green);border-radius:99px}
.tag.prot-vicina{background:var(--warn-bg);color:var(--warn-ink)}
.tag.prot-scaduta{background:var(--danger-bg);color:var(--danger-ink)}
.prot-anno{display:block;font-size:11px;color:var(--muted);font-weight:600;text-align:right}
.prot-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
.prot-lista li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:8px}
.prot-lista small{display:block;color:var(--muted)}
.prot-dlg{width:min(560px,calc(100vw - 32px))}
.prot-campi{grid-template-columns:repeat(2,minmax(0,1fr))}
.prot-campi .field[hidden]{display:none}
@media (max-width:760px){.prot-campi{grid-template-columns:minmax(0,1fr)}}
/* R6: le sei ipotesi del piano, e la tabella anno per anno estesa */
.fire-ipotesi-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fire-ipotesi-lista li{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:2px;align-content:start}
.fire-ipotesi-lista b{font-size:18px;font-variant-numeric:tabular-nums}
.fire-ipotesi-lista small{color:var(--muted);font-size:11.5px}
.fire-ipotesi-lista p{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2)}
.fire-cal-euro{margin:6px 0 10px}
/* il titolo di una fase attraversa la tabella: niente larghezza fissa della prima colonna */
.fire-cal-tabella tr.fire-cal-fase>th{width:auto;max-width:none;min-width:0}
/* R5: chi si confronta */
.pos-unita{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pos-unita li{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:2px}
.pos-unita li.attiva{border-color:var(--sel-line);background:var(--sel)}
.pos-unita b{font-size:18px;font-variant-numeric:tabular-nums}
.pos-unita small{color:var(--ink-2)}
/* R7: il report del patrimonio netto e la storia in Panoramica */
.rp-blocco{padding:14px 0;border-top:1px solid var(--line)}
.rp-blocco h3{margin:0 0 8px;font-size:14px}
.rp-blocco p{margin:0 0 6px;font-size:13px;line-height:1.5}
.rp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rp-kpi{border-left:2px solid var(--line);padding-left:10px;min-width:0}
.rp-num{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums}
.rp-sub{font-size:11px;color:var(--muted)}
.rp-due{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center}
.rp-righe{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.rp-righe li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
.rp-righe li b{font-variant-numeric:tabular-nums;text-align:right}
.rp-righe li small{grid-column:1/-1;color:var(--muted);font-size:11.5px}
.rp-figura{height:210px;position:relative}
.rp-figura.larga{height:230px}
.rp-eventi{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px}
.rp-eventi small{color:var(--muted)}
.rp-badge{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.rp-badge li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.rp-azioni{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px}
@media (max-width:760px){.rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.rp-due{grid-template-columns:minmax(0,1fr)}}
.home-tappe{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:12.5px}
.home-tappe li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.home-tappe li span{color:var(--muted);font-variant-numeric:tabular-nums;min-width:82px}
/* R8: la scheda di un badge, i badge come pulsanti, le due storie dell'anno */
.bdg-apri{display:grid;justify-items:center;gap:4px;width:100%;padding:6px;border:0;border-radius:14px;background:transparent;
  color:inherit;font:inherit;text-align:center;cursor:pointer}
.bdg-apri:hover{background:var(--hover)}
.bdg-apri:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bdg-cima .bdg-apri span{color:var(--ink-2);font-size:12px}
.bdg-scheda{width:min(520px,calc(100vw - 32px))}
.bdg-scheda-testa{display:flex;gap:14px;align-items:center;padding:18px 20px 4px}
.bdg-scheda-testa .cdlg-titolo{padding:0;margin:2px 0 6px}
.bdg-scheda-righe{margin:8px 20px;display:grid;gap:10px}
.bdg-scheda-righe dt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bdg-scheda-righe dd{margin:2px 0 0;font-size:13.5px;line-height:1.5}
.bdg-scheda>.muted{padding:0 20px}
.rpl-fonte{margin-bottom:8px;display:inline-block}
.rpl-fonte.scritta{background:var(--sel);color:var(--sel-ink)}
.rpl-scritti{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.rpl-scritti li{display:flex;gap:10px;flex-wrap:wrap}
.rpl-scritti span{color:var(--muted);font-variant-numeric:tabular-nums;min-width:82px}
.head-title h1.lungo{font-size:19px;line-height:1.2}
body.scrollata .head-title h1.lungo{font-size:17px}
/* R9: la stima della casa nella finestra, la provenienza delle importazioni */
.vstima>summary{cursor:pointer;display:grid;gap:2px;min-height:40px}
.vstima>summary h3{display:inline;margin:0}
.vstima>summary small{color:var(--muted);font-size:12px}
.vstima-parte{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;display:grid;gap:6px}
.vstima-parte h4{margin:0;font-size:13px}
.vstima-parte p{margin:0;font-size:13px;line-height:1.5}
.vstima-parte a{color:var(--sel-ink);font-weight:700}
.vstima-azioni{display:flex;flex-wrap:wrap;gap:8px}
.vstima-esito{min-height:1em}
.imp-prov{display:block;color:var(--muted);font-weight:500;font-size:11px;white-space:normal}
/* R9: la vita digitale nella voce dell'archivio */
.arc-digitale{border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:grid;gap:10px;margin:0}
.arc-digitale legend{font-weight:700;padding:0 4px}
.arc-digitale[hidden]{display:none}
/* di chi e' un dossier: cointestato con chi e le due quote, o di un familiare */
.dichi-insieme,.dichi-familiare{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.dichi-insieme[hidden],.dichi-familiare[hidden]{display:none}
.dichi-nota{grid-column:1/-1;margin:0}
.acc-nome{width:110px;margin-left:6px}
.acc-nome[hidden]{display:none}
.acc-quota-altro{margin-left:6px}
/* la prossima cosa da fare, in alto nella Panoramica: il risalto terracotta dell'avanzamento */
.home-azione-alto{border-left:5px solid var(--accento-2);padding-block:14px}
/* il fondo pensione dal piano e la stima dell'INPS in un PDF, in cima ai loro gruppi (Andrea, 7/10/2026) */
.fire-fondo-voci{display:grid;gap:12px;padding:14px 16px 0}
.fire-fondo-voce{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);min-width:0}
.fire-fondo-voce legend{padding:0 6px;font-weight:800;font-size:14px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.fire-fondo-voce legend small{font-size:11.5px;font-weight:600;color:var(--muted)}
.fire-fondo-voce .fcampi{padding:6px 0 0}
.fire-fondo-salva{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.fire-fondo-salva .btn,.fire-fondo-vuoto .btn,.fire-inps-pdf .btn{min-height:44px}
.fire-fondo-salva small{font-size:12.5px}
.fire-fondo-vuoto{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border:1px dashed var(--line);
  border-radius:14px;background:var(--card)}
.fire-fondo-vuoto p{margin:0;flex:1 1 260px;font-size:13px;color:var(--ink-2);line-height:1.5}
.fire-inps-pdf{margin:14px 16px 0;padding:12px 14px;border:1px solid var(--sel-line);border-radius:14px;background:var(--sel)}
.fire-inps-testa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fire-inps-testa>div{flex:1 1 260px;min-width:0}
.fire-inps-testa b{display:block;font-size:14px;color:var(--ink)}
.fire-inps-testa small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.fire-inps-stato{margin:0;font-size:13px;color:var(--ink-2)}
.fire-inps-stato:not(:empty){margin-top:10px}
.fire-inps-letto{margin-top:12px;padding-top:12px;border-top:1px solid var(--sel-line)}
.fire-inps-frase,.pens-frase{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink)}
.fire-inps-letto .fcampi{padding:4px 0 0}
.pens-altri{margin:2px 0 10px}
.pens-altri>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--sel-ink);padding:12px 0;display:list-item}
.pens-altri>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.fire-inps-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.fire-prima-dopo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin:0}
.fire-prima-dopo>div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.fire-prima-dopo dt{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fire-prima-dopo dd{margin:4px 0 0;font-size:13.5px;color:var(--ink);line-height:1.45}
.fire-prima-dopo dd b{font-size:16px}
.fire-prima-dopo dd small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.fire-inps-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-2)}
#pensioneCard,.fire-inps-letto{scroll-margin-top:110px}
/* al telefono la testata in alto e' alta 155px: la frase letta non ci finisce sotto */
@media (max-width:620px){#pensioneCard,.fire-inps-letto{scroll-margin-top:170px}}
/* il credit Lombard: i titoli in garanzia */
.vl-pegno{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.vl-pegno legend{font-weight:750;font-size:13px;padding:0 4px}
.vl-pegno legend small{font-weight:500;color:var(--muted)}
.vl-pegno-lista{display:grid;gap:4px;max-height:220px;overflow:auto}
.vl-pegno-lista label{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px}
.vl-pegno-lista label small{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.vl-pegno-tot{margin:6px 0 0;font-size:12.5px;color:var(--ink-2)}
/* il profilo di rischio in vista nel Profilo */
.bdg-rischio-riga{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.bdg-rischio-riga>div{flex:1 1 320px;min-width:0}
/* il profilo contro il portafoglio: quanto somigliano (Andrea, 12/10/2026) */
.bdg-coerenza:empty{display:none}
.bdg-coerenza{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.bdg-coerenza-numero{margin:10px 0 6px;color:var(--ink-2)}
.bdg-stile{margin:0 0 6px;display:grid;gap:2px}
.bdg-stile .occhiello{font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--accento-2)}
.bdg-stile b{font-size:18px;color:var(--ink)}
.bdg-coerenza-numero b{font-size:22px;font-weight:900;color:var(--sel-ink);font-variant-numeric:tabular-nums;margin-right:4px}
.bdg-coerenza ul{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--ink-2);font-size:13.5px;line-height:1.45}
/* il percorso: «Prossimo passo consigliato» e «Sblocca nuove analisi» (percorso.js) */
.percorso-carta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  border-left:5px solid var(--accento-2)}
.percorso-testo{flex:1 1 380px;min-width:0;display:grid;gap:6px}
.percorso-testo .occhiello{margin:0;font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--accento-2)}
.percorso-testo h2{margin:0;font-size:19px}
.percorso-testo p{margin:0;color:var(--ink-2);line-height:1.5;max-width:70ch}
.percorso-manca{font-size:13px;font-weight:600;color:var(--ink-2)}
.percorso-sblocca{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.percorso-sblocca li{padding:4px 10px;border-radius:99px;background:var(--chip);color:var(--sel-ink);font-size:12.5px;font-weight:700}
.percorso-sblocca li::before{content:"✦ ";font-size:11px}
.percorso-conto{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;color:var(--ink-2);font-size:13px}
.percorso-conto-num{font-size:14px;color:var(--ink-2);white-space:nowrap}
.percorso-conto-num b{font-size:22px;color:var(--primary)}
.percorso-conto-barra{grid-column:1/-1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.percorso-conto-barra i{display:block;height:100%;background:var(--primary);border-radius:99px}
/* nel Riepilogo degli investimenti: l'invito al rischio e alle altre analisi */
.riep-invito{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;border-left:5px solid var(--primary)}
.riep-invito h2{margin:0 0 4px}
.riep-invito p{margin:0;color:var(--ink-2)}
.riep-invito-azioni{display:flex;flex-wrap:wrap;gap:8px}
.riep-invito-azioni .btn{min-height:44px}
@media (max-width:760px){.riep-invito-azioni{width:100%}.riep-invito-azioni .btn{flex:1 1 45%;text-align:center}
  .riep-invito-azioni .btn.primary{flex-basis:100%}}
.toast-finestra{z-index:5}
/* «Che cosa vuoi aggiungere?» */
.agg-inv-lista{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.agg-inv-voce{width:100%;display:grid;gap:2px;text-align:left;padding:12px 14px;min-height:56px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);color:var(--ink);cursor:pointer}
.agg-inv-voce:hover{background:var(--hover)}
.agg-inv-voce:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.agg-inv-voce small{color:var(--ink-2);font-size:12.5px}
/* la libertà finanziaria: il pulsante che calcola, grande; il calendario anno per anno leggibile */
.fire-azioni .btn.fire-calcola{min-height:54px;font-size:16.5px;font-weight:750;padding-inline:28px}
@media (max-width:760px){.fire-azioni .btn.fire-calcola{width:100%}}
.fire-cal-dettaglio > summary{font-size:15px;font-weight:800}
.fire-cal-tabella table{font-size:13px}
.fire-cal-tabella{max-height:none}
.piano-ai-storia > summary{cursor:pointer;font-weight:750;font-size:13px;color:var(--ink-2);min-height:36px}
/* «Carica il KID o la scheda del fondo» */
.scheda-fondo .cdlg-testo select,.scheda-fondo .cdlg-testo input[type=file]{display:block;width:100%;margin:4px 0 12px;min-height:40px}
.scheda-fondo-esito p{margin:8px 0 0;color:var(--ink)}
.scheda-fondo-esito p.muted{color:var(--ink-2)}
.scheda-fondo-esito .err{color:var(--danger-ink);background:var(--danger-bg);padding:8px 10px;border-radius:10px}
.riep-kid{margin-top:6px}
/* «Aggiungi persone» negli Account del servizio, e la finestra della password provvisoria */
.invita{display:grid;gap:8px;margin:4px 0 14px}
.invita-riga{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.invita-riga textarea{flex:1 1 280px;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--card);color:var(--ink);font:inherit;resize:vertical}
.invita-esito{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--info-bg);color:var(--info-ink)}
.invita-esito p{margin:0 0 8px}
.invita-posta{margin:0}
.pwd-prov-campi{display:grid;gap:10px;margin:6px 0 4px}
.pwd-prov-campi label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--ink)}
.pwd-prov-campi label[hidden]{display:none}
/* dentro la finestra il campo ha lo sfondo della pagina: sullo sfondo della finestra, al buio, non si vedrebbe */
.pwd-prov-campi input{min-height:42px;border:1px solid var(--ink-2);border-radius:10px;padding:8px 10px;
  background:var(--bg);color:var(--ink);font:inherit}
.percorso-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.percorso-azioni .btn{min-height:44px}
.percorso-nonce{min-height:40px;padding:0 6px}
@media (max-width:760px){.percorso-azioni{width:100%;flex-direction:column;align-items:stretch}
  .percorso-azioni .btn{width:100%;text-align:center}}
.percorso-dlg{width:min(720px,calc(100vw - 32px))}
.percorso-dlg-carta{padding:0 20px}
.percorso-dlg-carta .percorso-carta{box-shadow:none;border:1px solid var(--line);border-left:5px solid var(--accento-2)}
.percorso-lista{list-style:none;margin:12px 0 0;padding:0 20px;display:grid;gap:6px}
.percorso-lista li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center}
.percorso-lista a{display:grid;gap:1px;padding:6px 10px;border-radius:10px;color:var(--ink);text-decoration:none;min-height:40px}
.percorso-lista a:hover{background:var(--hover)}
.percorso-lista small{color:var(--muted);font-size:12px}
.percorso-segno{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  font-size:12px;font-weight:900;color:var(--sel-ink)}
.percorso-lista li.completato .percorso-segno{background:var(--sel);border-color:var(--sel-line)}
.percorso-lista li.parziale .percorso-segno{border-color:var(--sel-line)}
.bdg-rischio-riga h2{margin:2px 0 4px}
.bdg-rischio-riga p{margin:0;color:var(--ink-2);line-height:1.5}
.bdg-rischio-riga .btn{min-height:44px}
/* la scala del rischio da 1 a 10 (Marco, 7/10/2026) */
.rischio-scala-box{margin:6px 0 10px;max-width:520px}
.rischio-scala{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.rischio-scala span{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;font-size:12.5px;
  font-weight:700;color:var(--muted);background:var(--surface-3);font-variant-numeric:tabular-nums}
.rischio-scala span.pieno{background:var(--sel);color:var(--sel-ink)}
.rischio-scala span.tu{background:var(--blue);color:var(--card);transform:scale(1.08);box-shadow:0 2px 8px #0000001f}
.rischio-scala-legenda{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;font-size:12px;color:var(--muted)}
.rischio-scala-legenda .centro{display:inline-flex;align-items:center;gap:4px}
.rischio-scala-legenda b{color:var(--ink);font-size:13px}
@media (prefers-reduced-motion:reduce){.rischio-scala span.tu{transform:none}}
/* Oggi: le cose del giorno in Panoramica, e l'avviso del mattino (Andrea, 8/10/2026) */
.oggi-testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:10px}
.oggi-testa h2{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oggi-testa h2 small{font-size:13px;font-weight:600;color:var(--muted)}
button.oggi-interruttore{font-size:12.5px;min-height:32px}
.oggi-tessere{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.oggi-tessera{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);min-width:0}
.oggi-occhiello{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.oggi-num{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.oggi-num small{font-size:13px;font-weight:700}
.oggi-num.pos{color:var(--green)}.oggi-num.neg{color:var(--red)}
.oggi-sotto{font-size:13px;color:var(--ink-2);line-height:1.45}
.oggi-titolo-voce{font-size:14.5px;color:var(--ink);line-height:1.35}
.oggi-barra{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:4px}
.oggi-barra i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.oggi-lista{margin:0;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.45;display:grid;gap:3px}
.oggi-vai{color:var(--sel-ink);margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;align-self:flex-start;min-height:28px;display:inline-flex;align-items:center}
.oggi-tessere + .oggi-tessere{margin-top:10px}
.oggi-fatto{font-size:13.5px;color:var(--ink);line-height:1.5}
.oggi-fonte{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.oggi-avviso{max-width:460px}
.pac-analisi{margin-top:12px}
.pac-analisi h3{margin:0 0 6px;font-size:14px}
.pac-analisi ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.pac-scelta{width:min(560px,calc(100vw - 32px))}
.pac-scelta-lista{list-style:none;margin:0;padding:0 20px;display:grid;gap:6px;max-height:min(50vh,440px);overflow:auto}
.pac-scelta-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.pac-scelta-nome{display:flex;align-items:center;gap:10px;min-height:40px;min-width:0;flex:1}
.pac-scelta-nome input{width:20px;height:20px;flex:none;accent-color:var(--primary)}
.pac-scelta-nome span{display:flex;flex-direction:column;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink)}
.pac-scelta-nome small{font-weight:500;color:var(--muted);font-size:12px}
.pac-scelta-pct{display:flex;align-items:center;gap:4px;flex:none;font-size:13px;color:var(--ink-2)}
.pac-scelta-pct input{width:76px;min-height:36px;text-align:right}
.pac-scelta-somma{padding:8px 20px 0;margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.pac-scelta-somma.neg{color:var(--red)}
.nuc-assicurato{color:var(--ok-ink);font-weight:700}
.oggi-notizia-titolo{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;overflow-wrap:anywhere}
a.oggi-notizia-titolo:hover{text-decoration-color:currentColor}
.oggi-ai{margin:4px 0 0;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink)}
.oggi-ai b{color:var(--accento-2);margin-right:4px}
.oggi-notizia-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:auto;padding-top:6px}
.oggi-notizia-azioni .oggi-vai{margin-top:0;padding-top:0}
.oggi-notizia-azioni button.link{font-size:13px;font-weight:700;min-height:28px}
.oggi-barre{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:14px 18px}
.oggi-ob{display:flex;flex-direction:column;gap:3px;min-width:0}
.oggi-ob-nome{font-size:13px;font-weight:750;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;align-self:flex-start;min-height:24px;display:inline-flex;align-items:center}
a.oggi-ob-nome:hover{text-decoration-color:currentColor}
button.oggi-traguardo,button.oggi-controlli-apri{align-self:flex-start;font-size:12.5px;font-weight:700;min-height:28px}
button.oggi-controlli-apri{margin-top:auto;padding-top:6px}
.oggi-dlg{max-width:520px}
.oggi-ctrl-lista{list-style:none;margin:0;padding:0 20px 8px;display:grid;gap:8px;max-height:min(60vh,520px);overflow:auto}
.oggi-ctrl{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.oggi-ctrl b{display:block;font-size:13.5px;color:var(--ink);line-height:1.35}
.oggi-ctrl small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.oggi-ctrl-stato{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--ok-bg);color:var(--ok-ink)}
.oggi-ctrl.da-fare .oggi-ctrl-stato{background:var(--warn-bg);color:var(--warn-ink)}
.oggi-ctrl-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px;font-size:13px}
.oggi-ctrl-azioni a{color:var(--sel-ink);font-weight:700}
.oggi-ctrl-azioni .btn{min-height:32px;padding:4px 14px;font-size:13px}
.oggi-avviso-fatto{margin:0 20px 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink)}
.oggi-avviso-fatto b{color:var(--sel-ink)}
.oggi-avviso-righe{margin:4px 20px 12px;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.5;color:var(--ink)}
.oggi-avviso-spegni{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:40px;padding:0 20px;font-size:13px;margin-bottom:6px}
.oggi-avviso-spegni input{width:20px;height:20px;margin:0;accent-color:var(--primary)}
.oggi-avviso-spegni small{flex-basis:100%;margin-left:28px}

/* ---------- Borsa oggi (Marco, 8/10/2026): come l'app Borsa del telefono ---------- */
.borsa-testa{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap}
/* due riquadri ben distinti (Marco, 8/10/2026: «i tuoi titoli e chi segui falli più evidenti»): una banda
   in alto, un'icona, il titolo grande e quanti sono */
.borsa-blocco{box-shadow:inset 0 4px 0 var(--borsa-banda),var(--shadow)}
.borsa-miei{--borsa-banda:var(--primary)}
.borsa-seguiti{--borsa-banda:#e3a21a}
.borsa-titolo{display:flex;gap:12px;align-items:center;min-width:0}
.borsa-titolo h2{font-size:22px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.borsa-titolo p{margin:3px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.45}
.borsa-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none}
.borsa-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.borsa-miei .borsa-ico{background:var(--sel);color:var(--sel-ink)}
.borsa-seguiti .borsa-ico{background:var(--warn-bg)}
.borsa-seguiti .borsa-ico svg{fill:#e3a21a;stroke:#b98112}
.borsa-conta{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 9px;border-radius:999px;
  background:var(--surface-3);color:var(--ink);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.borsa-conta:empty{display:none}
.borsa-vuoto{margin-top:12px}
.borsa-totale{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}
.borsa-totale:empty{display:none}
.borsa-totale b{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums}
.borsa-tab{overflow-x:auto;margin-top:6px}
.borsa-tab table{font-size:13.5px}
.borsa-tab th,.borsa-tab td{padding:9px 10px;vertical-align:middle;border-top:0;border-bottom:1px solid var(--line)}
.borsa-tab thead th{position:static;background:none;font-size:12px;font-weight:800;text-align:right}
.borsa-tab thead th:first-child{text-align:left}
.borsa-tab tbody th{position:static;background:none;color:var(--ink);font-weight:inherit}
.borsa-riga{cursor:pointer}
.borsa-riga:hover{background:var(--hover)}
.borsa-c-tit{text-align:left;max-width:300px}
.borsa-apri{all:unset;cursor:pointer;display:grid;gap:1px;min-width:0;max-width:100%}
.borsa-apri b{font-size:16px;font-weight:850;letter-spacing:-.01em;color:var(--ink)}
.borsa-apri small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.borsa-apri:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
/* il grafichino largo (Marco, 8/10/2026: «i grafici oggi puoi farli più larghi?») */
.borsa-c-graf{width:30%;min-width:180px;text-align:center}
.borsa-spark{display:block;width:100%;height:42px;overflow:visible}
.borsa-spark-rif{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.75;vector-effect:non-scaling-stroke}
.borsa-spark-linea{fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.borsa-spark-velo{opacity:.13}
.borsa-spark-vuoto{display:block;width:100%;height:42px}
.borsa-prezzo{font-size:15.5px;font-weight:750;font-variant-numeric:tabular-nums}
.borsa-c-prezzo small{display:block;font-size:11px}
.borsa-pill{display:inline-block;min-width:78px;padding:5px 9px;border-radius:7px;border:0;font:inherit;font-size:14.5px;
  font-weight:800;text-align:right;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.borsa-pill.su{background:var(--borsa-pill-su)} .borsa-pill.giu{background:var(--borsa-pill-giu)}
.borsa-pill.nd{background:var(--surface-3);color:var(--muted)}
button.borsa-pill{cursor:pointer}
button.borsa-pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.borsa-totale .borsa-pill{min-width:0;font-size:13px;padding:3px 8px}
.borsa-c-euro{font-weight:700}
/* la ricerca in cima: lente dentro il campo, i due pulsanti a destra (sotto, sul telefono) */
.borsa-cerca{padding-block:14px}
.borsa-cerca-form{position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 12px}
.borsa-cerca-form .combo input{padding-left:42px;min-height:48px;font-size:15.5px}
.borsa-lente{position:absolute;left:14px;top:calc(1.35em + 20px);pointer-events:none;color:var(--muted);z-index:1}
.borsa-lente svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.borsa-cerca-azioni{display:flex;gap:8px;align-items:center;padding-top:calc(1.35em + 6px)}
.borsa-cerca-azioni .btn{min-height:48px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.borsa-cerca-azioni svg{width:18px;height:18px;fill:currentColor;stroke:none}
@media(max-width:760px){
  .borsa-tab th,.borsa-tab td{padding:9px 5px}
  .borsa-c-euro{display:none}
  .borsa-c-graf{width:26%;min-width:76px}
  .borsa-spark,.borsa-spark-vuoto{width:100%;height:34px}
  .borsa-c-tit{max-width:118px}
  .borsa-apri b{font-size:15px}
  .borsa-apri small{font-size:12px}
  .borsa-prezzo{font-size:14px}
  .borsa-pill{min-width:64px;font-size:13.5px;padding:5px 7px}
  .borsa-cerca-form{grid-template-columns:1fr}
  .borsa-cerca-azioni{padding-top:0}
  .borsa-cerca-azioni .btn{flex:1;justify-content:center}
  .borsa-titolo h2{font-size:19px}
  .borsa-ico{width:40px;height:40px}
}

/* la scheda del titolo, come Google Finance: prezzo, quanto e' cambiato nel periodo, la stella */
.gf-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 16px;flex-wrap:wrap}
.gf-azioni{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gf-stella{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:750;cursor:pointer}
.gf-stella svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.gf-stella:hover{border-color:var(--sel-line)}
.gf-stella.on{border-color:var(--sel-line);background:var(--sel);color:var(--sel-ink)}
.gf-stella.on svg{fill:#e3a21a;stroke:#b98112}
.gf-stella:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gf-prezzo{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap;margin-top:14px}
.gf-num{font-size:clamp(28px,3.2vw,36px);font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gf-var{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
.gf-var.su{color:var(--green)} .gf-var.giu{color:var(--red)}
.gf-per{color:var(--muted);font-weight:600}
.gf-quando{margin:2px 0 6px;font-size:12.5px}
.gf-periodi{justify-content:flex-start;margin:4px 0 2px}
.gf-dati{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 28px;margin:14px 0 0}
.gf-dati>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gf-dati dt{color:var(--muted)}
.gf-dati dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
/* la tua posizione dentro la scheda del titolo: il pulsante in alto ci porta senza coprirne il titolo */
/* la tua posizione dentro la scheda: i numeri in testa, i riquadri sotto i dati del mercato */
.gf-tua-box{margin:12px 0 4px}
.gf-tua-tit{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.gf-tua .idlg-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
/* sul telefono due per riga: quattro riquadri uno sotto l'altro spingevano il grafico fuori dallo schermo */
@media (max-width:900px){
  .gf-tua .idlg-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gf-tua .idlg-k{padding:10px 12px}
  .gf-tua .idlg-k .big{font-size:17px}
}
.gf-dettagli{margin-top:16px}
.gf-contiene{margin-top:14px}
.gf-contiene-sub{margin:0 0 8px;font-size:12px}
.gf-dati code{font-size:12.5px}

/* «Da quando li hai?» (8/10/2026): la data d'acquisto delle posizioni caricate da una foto */
.dq-dlg{width:min(720px,calc(100vw - 32px))}
.dq-tutti{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:4px 20px 10px}
.dq-tutti .field{margin:0}
.dq-tutti .field label{font-size:12px;font-weight:700;color:var(--ink-2)}
.dq-tab{overflow:auto;max-height:min(50vh,420px);margin:0 20px;border:1px solid var(--line);border-radius:12px}
.dq-tab table{font-size:13px}
.dq-tab th,.dq-tab td{vertical-align:middle;white-space:normal}
.dq-tab tbody th{position:static;background:none;color:var(--ink);font-weight:inherit}
.dq-tab tbody th b{display:block}
.dq-tab tbody th small,.dq-tab td small{display:block;font-size:11.5px;color:var(--muted)}
.dq-tab input[type=date]{min-height:40px}
.home-daquando{font-weight:750}
@media(max-width:760px){.dq-tab td:nth-child(2),.dq-tab th:nth-child(2){display:none}}

/* Borsa oggi: l'ordine che si vede anche dove non e' attivo (8/10/2026; i filtri tolti lo stesso giorno) */
.borsa-tab .sortbtn{font-weight:800}
.sortarrow.spenta{opacity:.45;font-size:11px}

/* la scheda del titolo: la scelta Prezzo / Valore e investito accanto ai periodi */
.gf-modo{margin-right:4px}
@media(max-width:760px){.gf-modo{width:100%}.gf-modo .rangebtn{flex:1}}
/* il netto al mese sotto lo stipendio dell'anno (9/10/2026) */
.fire-cal-mese{display:block;font-size:11px;font-weight:600;color:var(--muted)}
/* il posto del reddito nel Riepilogo patrimoniale, sotto quello del patrimonio (9/10/2026) */
.pos-reddito{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.pos-reddito b{font-size:18px;font-variant-numeric:tabular-nums}
.pos-reddito small{color:var(--muted)}
/* sotto le colonne delle rate e del Lombard nella tabella del piano (12/10/2026) */
.fire-cal-nota{display:block;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
/* le domande che contano, chiudibili come gli altri blocchi */
.fire-essenziali.fire-gruppo>.fcampi{margin-top:12px}
/* il netto disponibile, sotto attivita' e debiti */
.netto-disp small{color:var(--muted);margin-left:4px}
.patr-disp b{font-variant-numeric:tabular-nums}
/* Spese ed Entrate: la torta accanto all'elenco delle categorie (12/10/2026) */
.spe-dove{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:16px;align-items:center}
.spe-torta{height:190px}
.spe-cat .pallino{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.spe-dafare{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media(max-width:760px){.spe-dove{grid-template-columns:1fr}.spe-torta{height:170px;max-width:220px;margin:0 auto}}
/* Le uscite a confronto (la versione di prova del piano, 12/10/2026) */
.usc-scelte{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-top:6px}
.usc-scelte .field{margin:0;min-width:0}
.usc-scelte .field input,.usc-scelte .field select{min-height:42px;width:140px}
.usc-scelte .field select{width:210px}
.usc-check{display:flex;align-items:center;gap:8px;min-height:42px;font-size:13.5px}
.usc-avviso{border-left:4px solid var(--amber,#c9832a)}
.usc-avviso p{margin:6px 0 0}
.usc-carte{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.usc-carta h3{margin:0 0 4px;font-size:16px}
.usc-carta>p.muted{margin:0 0 10px;font-size:12.5px}
.usc-carta.fuori{opacity:.75}
.usc-eta{display:flex;align-items:baseline;gap:6px;margin:4px 0 6px}
.usc-eta b{font-size:26px;font-variant-numeric:tabular-nums}
.usc-eta small{color:var(--muted);font-size:12px;margin-right:6px}
.usc-stato{margin:0 0 8px;font-weight:700;font-size:13px}
.usc-stato.ok{color:var(--green)}
.usc-stato.forse{color:var(--amber,#b7791f)}
.usc-stato.no{color:var(--red)}
.usc-dl{margin:0;display:grid;gap:0}
.usc-dl>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.usc-dl dt{color:var(--muted)}
.usc-dl dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.usc-dl dd small{display:block;font-weight:500;color:var(--muted)}
.usc-regole ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px}
@media(max-width:760px){.usc-scelte .field{flex:1 1 140px}.usc-scelte .field input,.usc-scelte .field select{width:100%}}
/* le famiglie come la tua e il reddito dove vivi anche nel Riepilogo patrimoniale (12/10/2026) */
.patr-confronti{display:contents}
/* il messaggio sotto un campo che manca (archivio di famiglia, 12/10/2026) */
.campo-errore{margin:4px 0 0;font-size:12.5px;font-weight:600;color:var(--red)}
.campo-errore:empty{display:none}
input[aria-invalid="true"]{border-color:var(--red)}
/* Il report del patrimonio sulla falsariga di quello degli investimenti (12/10/2026) */
.rp-com-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:center}
.rp-com-corpo figure{margin:0}
.rp-sotto{margin:10px 0 0;font-size:13px;line-height:1.5}
.fg-tab td.rp-perche{white-space:normal;font-size:11.5px;color:var(--ink-2)}
@media(max-width:760px){.rp-com-corpo{grid-template-columns:1fr}}
/* in stampa niente tabelle o sezioni tagliate (Marco, 12/10/2026): una sezione corta resta intera, un titolo non resta
   in fondo alla pagina senza il suo contenuto, le righe non si spezzano e le intestazioni si ripetono */
@media print{
  .foglio h3{break-after:avoid}
  .rp-blocco,.rp-com,.fg-top,.fg-salienti,.fg-continua,.fg-andamento,.fg-hero{break-inside:avoid}
  .fg-tab tr,.fg-tab td{break-inside:avoid}
  .fg-tab tfoot{display:table-footer-group}
  .rp-com-corpo{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
}