/* css/area-minori.css · Le aree minori della PR 13 del nuovo design (design-13a … 13f): bottone del bug,
   investitori, agenzie, mappa, statistiche, confronto, gantt, stato operazioni, messaggi, firma dei PDF, avvisi.
   Regole del file (tests/area-minori.test.js le difende):
   - una sezione per area, ognuna col suo commento di testa; le parti successive inseriscono le loro sezioni
     SOPRA la riga marcatore in fondo (inserisci13.py), che precede l'eventuale @media print del file (l'ultimo);
   - solo token (--fc-*, --sp-*, --r, --rs, --r-pill, --st-*): niente hex, niente rgba scritti, niente nomi
     vecchi (gli alias di tokens.css, tolti nella PR 15);
   - niente !important (l'unico ammesso è [hidden] di base.css), niente font-family (lo mette base.css su body);
   - misure in px (la radice da telefono è 19 px fino alla PR 15), testo mai sotto 11 px;
   - telefono con `@media screen and (max-width:768px)` (senza `screen and` la regola vale anche in stampa);
     :hover solo dentro `@media (hover:hover)`;
   - niente transition né animation (il blocco del movimento ridotto sta in coda ad area-shell.css);
   - ogni coppia testo/fondo scritta in una regola è una coppia di tests/tokens-contrasto.test.js;
   - caricato dopo area-task.css e prima di area-shell.css, che resta l'ultimo foglio. */

/* ── Bottone e finestra "Segnala un bug" (design-13a) ──
   Erano 12 stili inline in index.html e 3 in toggleBugReport (tools.js), più il blocco 4 D che stava in mobile.css con
   !important contro l'inline. In basso a destra, 40 px da computer e 44 da telefono, sopra la safe-area (in PWA
   su iPhone il bottone stava dentro la zona dell'indicatore home: decisione 9): i toast di base.css
   (safe + 24 + 44 + 12) e il banner PWA (72 + safe) restano sopra. La finestra si apre e si chiude con
   l'attributo hidden ([hidden] di base.css): qui nessun display. Rosso chiaro invece del rosso pieno al 70%
   (decisione 8), testata chiara come le card, "Invia" è il bottone verde della app. Col compose di Gmail
   aperto li nasconde area-gmail.css (era style.css, sezione Gmail, PR 12), con una chat di Messaggi aperta la
   sezione della chat più sotto (voce nuovo-design-021); in stampa il blocco @media print di css/stampa.css (PR 13b). */
#bugReportBtn{position:fixed;right:24px;bottom:calc(24px + var(--fc-safe-bottom));z-index:9998;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--fc-sep);border-radius:50%;background:var(--fc-danger-soft);color:var(--fc-danger);font-size:17px;line-height:1;box-shadow:var(--fc-shadow);cursor:pointer}
@media (hover:hover){#bugReportBtn:hover{border-color:var(--fc-danger)}}
#bugReportModal{position:fixed;right:24px;bottom:calc(76px + var(--fc-safe-bottom));z-index:9999;width:360px;max-width:calc(100vw - 48px);overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)}
.bug-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:0 0 0 var(--sp-4);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg);color:var(--fc-label)}
.bug-titolo{margin:0;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bug-corpo{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.bug-lbl{display:block;margin-bottom:var(--sp-1);font-size:13px;font-weight:600;color:var(--fc-label2)}
.bug-testo{display:block;width:100%;min-height:120px;padding:var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px;line-height:20px;resize:vertical}
.bug-testo:focus{border-color:var(--fc-accent);outline:none;box-shadow:0 0 0 3px var(--fc-accent-soft)}
.bug-azioni{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-3)}
.bug-azioni .btn-green{width:auto}
@media screen and (max-width:768px){
  #bugReportBtn{width:44px;height:44px}
  .bug-testo{font-size:16px}
}

/* ── Richieste di eliminazione nella Home (design-13h, js/modules/op-delete-request.js) ──
   La carta che vede chi può confermare l'eliminazione di un'operazione: .card di base.css col
   bordo sinistro nel colore "pericolo". Da telefono le righe vanno a capo e i bottoni salgono
   a 44 px (.btn-sm è 28). Fondo e testo scritti qui: .card di style.css aveva il bianco fisso, che
   nel tema scuro lasciava il testo chiaro su bianco (lo sposta in base.css la 13a). .btn-sm (base.css, era in style.css) è .62rem (9,9 px da computer): qui 12 px, come
   #opModalBody .btn-sm di area-opmodal.css. */
.home-elim{margin-bottom:16px;padding:13px 16px;border-left:4px solid var(--fc-danger);background:var(--fc-card);color:var(--fc-label)}
.home-elim-titolo{margin-bottom:6px;font-size:14px;font-weight:700}
.home-elim-riga{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--fc-sep)}
.home-elim-meta{color:var(--fc-label2);font-size:12px}
.home-elim-nota{font-size:12px;font-style:italic}
.home-elim-azioni{display:flex;gap:6px;margin-left:auto}
.home-elim-azioni .btn-sm{font-size:12px;letter-spacing:.04em}
@media screen and (max-width:768px){
  .home-elim-azioni .btn{min-height:44px}
}

/* ── Raccolte (design-13h, js/modules/raccolte.js) ──
   Lista delle raccolte fondi e dettaglio con inviti e invio. I bollini di stato sono .fr-badge
   con una variante per colore (ok, neutro, pericolo, info, attenzione), sempre con la parola
   dentro; prima avevano colori fissi chiari anche nel tema scuro. Il codice dell'operazione è
   un bottone (.fr-apri): la riga si apre anche da tastiera. Le tabelle scorrono di lato nel
   loro contenitore (.fr-scorre, data-scorre). */
.fr-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fr-testa--dett{justify-content:flex-start}
.fr-titolo{margin:0;font-size:16px}
.fr-nota{color:var(--fc-label2);font-size:11px}
.fr-nota--blocco{display:block;margin-bottom:6px}
.fr-target{color:var(--fc-label2);font-size:12px}
.fr-vuoto{padding:32px;text-align:center;color:var(--fc-label2)}
.fr-vuoto-icona{font-size:26px}
.fr-vuoto-titolo{margin:6px 0;color:var(--fc-label);font-weight:700}
.fr-vuoto-nota{font-size:12px}
.fr-errore{padding:32px;text-align:center;color:var(--fc-danger)}
.fr-scorre{overflow-x:auto}
.fr-scorre .btn-sm{font-size:12px;letter-spacing:.04em}
.fr-riga{cursor:pointer}
.fr-apri{padding:0;border:0;background:none;color:var(--fc-label);font:inherit;font-weight:700;cursor:pointer}
.fr-apri:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.fr-sotto{color:var(--fc-label2);font-size:11px}
.fr-conto{color:var(--fc-label2);font-size:11px}
.fr-conto b{color:var(--fc-label)}
.fr-num{text-align:right;white-space:nowrap}
.fr-centro{text-align:center}
.fr-data{font-size:11px;white-space:nowrap}
.fr-tenue{color:var(--fc-label2)}
.fr-piccolo{font-size:11px}
.fr-score{text-align:center;font-weight:800}
.fr-nota-cella{max-width:180px;font-size:11px}
.fr-badge{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.fr-match{font-weight:600}
.fr-badge--neutro{background:var(--fc-fill);color:var(--fc-label)}
.fr-badge--ok{background:var(--fc-accent-soft);color:var(--fc-ok)}
.fr-badge--pericolo{background:var(--fc-danger-soft);color:var(--fc-danger)}
.fr-badge--info{background:var(--fc-info-soft);color:var(--fc-info)}
.fr-badge--attenzione{background:var(--fc-warn-soft);color:var(--fc-warn)}
.fr-scaduto{color:var(--fc-warn);font-size:11px;font-weight:700}
.fr-h3{margin:13px 0 5px;font-size:13px}
.fr-h3--invia{margin-top:16px}
.fr-riga-vuota{padding:8px 0;color:var(--fc-label2);font-size:12px}
.fr-invia{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.fr-invia .btn-green{width:auto} /* .btn-green (base.css, era in style.css) ha width:100%, come in area-opmodal.css */

/* ── Utenti (design-13h, js/modules/utenti.js, pannello dell'Admin) ──
   Le regole che stavano in style.css, con gli stessi colori (gli alias vecchi del grigio, dei bordi,
   del verde chiaro e del giallo chiaro puntavano a questi token) e le misure in px.
   La colonna Email sparisce sotto i 640 px: è la larghezza della tabella, non il telefono. */
#utentiContent{max-width:960px;padding:16px 20px;overflow-x:auto} /* la tabella scorre da sola da telefono, la pagina no (PR 15) */
.ut-testa h2{margin:0 0 6px}
.ut-testa p{margin:3px 0 13px;color:var(--fc-label2);font-size:14px;line-height:1.45}
.ut-testa .ut-avviso{color:var(--fc-warn);font-weight:600}
.ut-tabella{width:100%;border-collapse:collapse;font-size:14px}
.ut-tabella th,.ut-tabella td{padding:8px 10px;border-bottom:1px solid var(--fc-sep);text-align:left}
.ut-tabella select{background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--rs)} /* in scuro era il grigio del browser; col fondo dichiarato Chrome toglie il bordo nativo: bordo della app (PR 15, review #575) */
.ut-stato{padding:2px 7px;border-radius:var(--r-pill);font-size:13px}
.ut-attivo{background:var(--fc-accent-soft);color:var(--fc-ok)}
.ut-attesa{background:var(--fc-warn-soft);color:var(--fc-warn)}
.ut-errore{color:var(--fc-danger)}
.ut-muto{color:var(--fc-label2)}
@media screen and (max-width:640px){
  .ut-tabella th:nth-child(2),.ut-tabella td:nth-child(2){display:none}
}

/* ── Learning (design-13b) ─────────────────────────────────────────────────────
   Lezioni, quiz e glossario (js/modules/learning.js), sui token. Era il blocco
   LEARNING che stava in style.css (lo spinner è in base.css dalla 13a). La card della
   lezione è un <button>: si apre anche da tastiera. Le due barre di avanzamento
   leggono --w dal markup. La stampa della lezione è una finestra sua
   (lnPrintLesson), col suo <style>: non passa di qui. */
.ln-stato{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:48px var(--sp-4);font-size:14px;color:var(--fc-label2)}
.ln-stato.is-errore{color:var(--fc-danger)}
.ln-header{margin-bottom:var(--sp-5)}
.ln-title{margin:0;font-size:20px;line-height:26px;font-weight:700;color:var(--fc-label)}
.ln-subtitle{margin:var(--sp-1) 0 0;font-size:13px;line-height:18px;color:var(--fc-label2)}
.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.ln-card{display:flex;width:100%;padding:0;overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label);font:inherit;text-align:left;cursor:pointer}
.ln-card:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.ln-card-icon{display:flex;flex:none;align-items:center;justify-content:center;width:64px;background:var(--fc-accent-soft);font-size:24px}
.ln-card-body{display:flex;flex:1;flex-direction:column;min-width:0;padding:var(--sp-3) var(--sp-4)}
.ln-card-num{margin-bottom:2px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-accent)}
.ln-card-title{margin-bottom:2px;font-size:15px;line-height:20px;font-weight:700;color:var(--fc-label)}
.ln-card-sub{display:-webkit-box;margin-bottom:var(--sp-2);overflow:hidden;font-size:13px;line-height:18px;color:var(--fc-label2);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ln-card-meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:12px;line-height:16px;color:var(--fc-label2)}
.ln-diff{padding:1px var(--sp-2);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;line-height:16px;font-weight:600}
.ln-diff-base{background:var(--fc-accent-soft);color:var(--fc-accent)}
.ln-diff-intermedio{background:var(--fc-warn-soft);color:var(--fc-warn)}
.ln-diff-avanzato{background:var(--fc-danger-soft);color:var(--fc-danger)}
.ln-progress-bar{display:block;height:4px;margin-top:auto;overflow:hidden;border-radius:var(--r-pill);background:var(--fc-rail)}
.ln-progress-fill{display:block;width:var(--w,0%);height:100%;border-radius:var(--r-pill);background:var(--fc-accent-fill)}
.ln-lesson-header{margin-bottom:var(--sp-4)}
.ln-lesson-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.ln-back{min-height:36px;padding:0;border:0;background:none;color:var(--fc-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ln-print-btn{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ln-lesson-title-row{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ln-lesson-icon{font-size:28px}
.ln-lesson-title{margin:0;font-size:20px;line-height:26px;font-weight:700;color:var(--fc-label)}
.ln-lesson-sub{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--fc-label2)}
.ln-section-nav{margin-bottom:var(--sp-1)}
.ln-section-progress{height:4px;margin-bottom:var(--sp-1);overflow:hidden;border-radius:var(--r-pill);background:var(--fc-rail)}
.ln-section-progress-fill{width:var(--w,0%);height:100%;border-radius:var(--r-pill);background:var(--fc-accent-fill)}
.ln-section-label{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.ln-section-content{margin-bottom:var(--sp-3);padding:var(--sp-5);border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card)}
.ln-section-title{display:inline-block;margin:0 0 var(--sp-3);padding-bottom:var(--sp-1);border-bottom:2px solid var(--fc-accent);font-size:17px;line-height:22px;font-weight:700;color:var(--fc-label)}
.ln-p{margin-bottom:var(--sp-3);font-size:15px;line-height:22px;color:var(--fc-label)}
.ln-def{margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--fc-accent);border-radius:0 var(--rs) var(--rs) 0;background:var(--fc-bg)}
.ln-def-term{margin-bottom:2px;font-size:14px;line-height:20px;font-weight:700;color:var(--fc-accent)}
.ln-def-text{font-size:14px;line-height:20px;color:var(--fc-label)}
.ln-formula{margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px dashed var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);text-align:center}
.ln-formula-name{margin-bottom:var(--sp-1);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.ln-formula-eq{margin-bottom:var(--sp-1);font-size:16px;line-height:22px;font-weight:700;color:var(--fc-label)}
.ln-formula-ex{font-size:13px;line-height:18px;font-style:italic;color:var(--fc-label2)}
.ln-table-wrap{margin-bottom:var(--sp-3);overflow-x:auto;border:1px solid var(--fc-sep);border-radius:var(--rs)}
.ln-table{width:100%;border-collapse:collapse;font-size:13px}
.ln-table th{padding:var(--sp-2) var(--sp-3);background:var(--fc-bg);color:var(--fc-label2);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:left;white-space:nowrap}
.ln-table td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);color:var(--fc-label)}
.ln-table tr:last-child td{border-bottom:none}
.ln-highlight{margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--fc-accent);border-radius:var(--rs);background:var(--fc-accent-soft);font-size:14px;line-height:20px;font-weight:500;color:var(--fc-label)}
.ln-case{margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card)}
.ln-case-title{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2);font-size:14px;line-height:20px;font-weight:700;color:var(--fc-label)}
.ln-case-title::before{content:'📌';font-size:13px}
.ln-case-desc{margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--rs);background:var(--fc-bg);font-size:13px;line-height:18px;color:var(--fc-label2)}
.ln-case-analysis{margin-bottom:var(--sp-2);font-size:14px;line-height:20px;color:var(--fc-label)}
.ln-case-conclusion{padding:var(--sp-2) var(--sp-3);border-radius:var(--rs);background:var(--fc-accent-soft);font-size:14px;line-height:20px;color:var(--fc-accent)}
.ln-quiz{display:flex;flex-direction:column;gap:var(--sp-3)}
.ln-q{padding:var(--sp-3) var(--sp-4);border-radius:var(--rs);background:var(--fc-bg)}
.ln-q-num{margin-bottom:var(--sp-1);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-accent)}
.ln-q-text{margin-bottom:var(--sp-2);font-size:15px;line-height:21px;font-weight:600;color:var(--fc-label)}
.ln-q-opts{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.ln-opt{min-height:36px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}
.ln-opt:disabled{cursor:default}
.ln-opt-selected{border-color:var(--fc-accent);font-weight:600}
.ln-opt.ln-opt-correct{border-color:var(--fc-ok);background:var(--fc-accent-soft);color:var(--fc-accent)}
.ln-opt.ln-opt-wrong.ln-opt-selected{border-color:var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-danger)}
.ln-q-explain{margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-radius:var(--rs);font-size:14px;line-height:20px}
.ln-q-correct{border-left:3px solid var(--fc-ok);background:var(--fc-accent-soft);color:var(--fc-label)}
.ln-q-wrong{border-left:3px solid var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-label)}
.btn.ln-show-answer{margin-top:var(--sp-1);font-size:13px}
.ln-nav-buttons{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.btn.ln-nav-btn{width:auto;padding:var(--sp-2) var(--sp-4);font-size:13px}
.ln-glossary{margin-top:var(--sp-1);padding:var(--sp-4);border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card)}
.ln-glossary-title{margin:0 0 var(--sp-3);font-size:15px;line-height:20px;font-weight:700;color:var(--fc-label)}
.ln-glossary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-2)}
.ln-glossary-item{display:flex;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--rs);background:var(--fc-bg);font-size:13px;line-height:18px}
.ln-glossary-item strong{color:var(--fc-accent);white-space:nowrap}
.ln-glossary-item span{color:var(--fc-label2)}
@media (hover:hover){
  .ln-card:hover{border-color:var(--fc-accent)}
  .ln-back:hover{text-decoration:underline}
  .ln-opt:hover:not(:disabled){border-color:var(--fc-accent)}
}
@media (hover:none){
  .ln-back,.ln-print-btn,.ln-opt{min-height:44px}
}
@media screen and (max-width:768px){
  .ln-grid{grid-template-columns:minmax(0,1fr)}
  .ln-card-icon{width:48px}
  .ln-section-content{padding:var(--sp-3)}
  .ln-glossary-grid{grid-template-columns:minmax(0,1fr)}
  .ln-glossary-item{flex-wrap:wrap}
}

/* ── Anagrafiche: pezzi comuni di Investitori e Agenzie (design-13c) ──
   Testata e filtri dei pannelli, campi, bottoni, griglia di card, iniziali, chip, stato vuoto,
   tabella in card, scheda nel modale #genModal (la cornice è della PR 5), campi dei moduli,
   note, bottone ✕. Il markup lo scrivono index.html (#pan-investitori, #pan-agenzie),
   js/modules/investitori.js, investitori-modal.js e agenzie.js.
   Colori fissi come data-tono (accent, info, warn, danger: le coppie morbide dei token), mai
   scritti nel JavaScript. Card e voci si aprono col clic come prima (onclick sulla card); da
   tastiera ci si arriva dal nome, un <button> senza handler (.an-nome): Invio lo clicca e il
   clic risale all'onclick della card. Niente animazioni: le card non si alzano più al passaggio. */
.an-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.an-titolo{margin:0;font-size:20px;line-height:24px;font-weight:700;color:var(--fc-label)}
.an-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.an-testa>.an-filtri{margin-bottom:0}
.an-campo{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;outline:none}
.an-campo:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
.an-cerca{width:200px}
.an-cresce{flex:1 1 200px;min-width:0}
.an-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.an-btn-primary{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.an-btn-danger{border-color:var(--fc-danger);background:var(--fc-card);color:var(--fc-danger)}
.an-btn:focus-visible,.an-nome:focus-visible,.an-x:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.an-conta{margin-bottom:var(--sp-2);font-size:12px;color:var(--fc-label2)}
/* min(300px,100%): sotto i 300 px la colonna scende col contenitore (era in style.css: la colonna singola forzata di #agenzieGrid sotto i 480 px) */
.an-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--sp-2)}
.an-griglia>.an-vuoto{grid-column:1/-1}
.an-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--fc-card);color:var(--fc-label);cursor:pointer}
.an-card-testa{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.an-card-main{flex:1;min-width:0}
.an-card-riga{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.an-card-riga>.an-chip{flex:none}
.an-nome{flex:0 1 auto;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--fc-label);font:inherit;font-size:14px;line-height:20px;font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.an-card-sub{font-size:12px;line-height:16px;color:var(--fc-label2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-card-num{flex:none;text-align:right}
.an-card-val{font-size:14px;font-weight:700;color:var(--fc-label);white-space:nowrap;font-variant-numeric:tabular-nums}
.an-card-val-l{font-size:11px;color:var(--fc-label2)}
.an-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:13px;font-weight:700}
.an-avatar.is-piccolo{width:28px;height:28px;font-size:11px}
.an-avatar.is-grande{width:48px;height:48px;font-size:20px}
.an-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.an-chip{display:inline-flex;align-items:center;min-height:20px;max-width:100%;padding:0 6px;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:11px;line-height:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-chip-link{text-decoration:none;cursor:pointer}
.an-avatar[data-tono="accent"],.an-chip[data-tono="accent"]{background:var(--fc-accent-soft);color:var(--fc-accent)}
.an-avatar[data-tono="info"],.an-chip[data-tono="info"]{background:var(--fc-info-soft);color:var(--fc-info)}
.an-avatar[data-tono="warn"],.an-chip[data-tono="warn"]{background:var(--fc-warn-soft);color:var(--fc-warn)}
.an-avatar[data-tono="danger"],.an-chip[data-tono="danger"]{background:var(--fc-danger-soft);color:var(--fc-danger)}
.an-pallino{display:inline-block;width:8px;height:8px;margin-right:var(--sp-1);border-radius:50%;background:var(--fc-rail);vertical-align:1px}
.an-pallino[data-tono="accent"]{background:var(--fc-accent)}
.an-pallino[data-tono="info"]{background:var(--fc-info)}
.an-pallino[data-tono="warn"]{background:var(--fc-warn-fill)}
.an-vuoto{padding:var(--sp-6) var(--sp-3);color:var(--fc-label2);font-size:13px;text-align:center}
.an-vuoto.is-piccolo{padding:var(--sp-3)}
.an-vuoto.is-errore{color:var(--fc-danger)}
.an-vuoto-ico{margin-bottom:var(--sp-2);font-size:28px}
.an-vuoto-t{margin-bottom:var(--sp-1);font-weight:600;color:var(--fc-label)}
.an-tab-card{overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label)}
.an-scroll{overflow-x:auto}
.an-scheda{max-width:720px;margin:0 auto}
.an-scheda.is-stretta{max-width:500px}
.an-sez{margin:var(--sp-4) 0 var(--sp-2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)}
.an-sez.is-sep{padding-top:var(--sp-3);border-top:1px solid var(--fc-sep)}
/* Campi dei moduli: .fg di style.css (FORMS) aveva un fondo chiaro scritto a mano (in scuro testo
   chiaro su fondo chiaro), l'etichetta maiuscola e margini suoi: qui si ridichiarano fondo, testo e misure. */
.an-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.an-form>.an-sez,.an-form>.fg.is-pieno{grid-column:1/-1}
.an-form>.an-sez{margin:var(--sp-2) 0 0}
.an-form .fg{margin-bottom:0}
.an-form .fg label{display:block;margin-bottom:var(--sp-1);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fc-label2)}
.an-form .fg input,.an-form .fg select,.an-form .fg textarea{width:100%;min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:13px}
.an-form .fg textarea{padding:var(--sp-2) var(--sp-3);resize:vertical}
.an-form .fg input:focus,.an-form .fg select:focus,.an-form .fg textarea:focus{border-color:var(--fc-accent);background:var(--fc-card);box-shadow:0 0 0 3px var(--fc-accent-soft)}
.an-azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
.an-azioni.is-sep{padding-top:var(--sp-3);border-top:1px solid var(--fc-sep)}
.an-nota-nuova{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.an-note{display:flex;flex-direction:column;gap:var(--sp-2)}
/* Il filetto ha il colore del tipo (data-tipo, investitori-modal.js); la nota agenzia non ha tipo: verde */
.an-nota{position:relative;padding:var(--sp-2) calc(var(--sp-3) + 32px) var(--sp-2) var(--sp-3);border-left:3px solid var(--fc-accent-fill);border-radius:0 var(--rs) var(--rs) 0;background:var(--fc-bg);color:var(--fc-label)}
.an-nota[data-tipo="chiamata"]{border-left-color:var(--fc-info)}
.an-nota[data-tipo="meeting"]{border-left-color:var(--fc-warn-fill)}
.an-nota[data-tipo="email"]{border-left-color:var(--st-due_diligence)}
.an-nota[data-tipo="documento"]{border-left-color:var(--fc-label2)}
.an-nota-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);margin-bottom:2px}
.an-nota-tipo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.an-nota-data{font-size:11px;color:var(--fc-label2)}
.an-nota-testo{font-size:13px;line-height:18px;color:var(--fc-label);overflow-wrap:anywhere}
.an-nota-fonte{margin-top:var(--sp-2);font-size:11px;color:var(--fc-label2)}
.an-x{position:absolute;top:var(--sp-1);right:var(--sp-1);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font-size:13px;cursor:pointer}
@media (hover:hover){
  .an-card:hover{border-color:var(--fc-accent)}
  .an-btn:hover{background:var(--fc-fill)}
  .an-btn-primary:hover{background:var(--fc-accent-fill)}
  .an-btn-danger:hover{background:var(--fc-danger-soft)}
  .an-nome:hover,.an-chip-link:hover{text-decoration:underline}
  .an-x:hover{background:var(--fc-fill);color:var(--fc-label)}
}
@media (hover:none){
  .an-campo,.an-btn{min-height:44px}
  .an-x{width:44px;height:44px}
  .an-nota{padding-right:calc(var(--sp-3) + 44px)}
  .an-chip-link{min-height:44px;padding:0 var(--sp-3)}
}
@media screen and (max-width:768px){
  .an-campo,.an-form .fg input,.an-form .fg select,.an-form .fg textarea{min-height:44px;font-size:16px}
  .an-testa>.an-filtri{flex:1 1 100%}
  .an-filtri>.an-campo{flex:1 1 140px;min-width:0}
  .an-filtri>.an-cerca{flex-basis:100%}
  .an-form{grid-template-columns:minmax(0,1fr)}
}

/* ── Investitori: filtri, viste, capitale (design-13c) ──
   #pan-investitori: KPI (.kpi-* di area-pipeline.css), grafici del capitale (#invCapitale, .inv-cap* di
   base.css), filtri .an-filtri, capitale da/a, tre viste (card .an-griglia, lavagna .pipeline di
   area-pipeline.css, tabella .inv-tabella). La vista scelta è .is-active con aria-pressed. Il capitale
   libero è un livello (.inv-libero, data-level ok, warn, danger, none) e la parola c'è sempre: Libero,
   Tutto investito, Over, Senza budget. */
.inv-range{display:flex;align-items:center;gap:var(--sp-1)}
.inv-range-l{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--fc-label2);white-space:nowrap}
.inv-range .an-campo{width:96px}
.inv-range-sep{color:var(--fc-label2)}
.inv-viste{display:inline-flex;margin-left:auto;overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--rs)}
.inv-vista{min-width:36px;min-height:36px;padding:0 var(--sp-2);border:0;background:var(--fc-card);color:var(--fc-label2);font:inherit;font-size:15px;cursor:pointer}
.inv-vista.is-active{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.inv-vista:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.inv-libero[data-level="ok"]{background:var(--fc-accent-soft);color:var(--fc-ok)}
.inv-libero[data-level="warn"]{background:var(--fc-warn-soft);color:var(--fc-warn)}
.inv-libero[data-level="danger"]{background:var(--fc-danger-soft);color:var(--fc-danger)}
.inv-libero[data-level="none"]{background:var(--fc-fill);color:var(--fc-label)}
@media (hover:hover){.inv-vista:not(.is-active):hover{background:var(--fc-fill);color:var(--fc-label)}}
@media (hover:none){.inv-vista{min-width:44px;min-height:44px}}
@media screen and (max-width:768px){
  .inv-range{flex:1 1 100%;min-width:0}
  .inv-range .an-campo{flex:1 1 0;width:0;min-width:0}
  .inv-viste{margin-left:0}
}

/* ── Investitori: lavagna e tabella (design-13c) ──
   Lavagna: .pipeline/.pipe-col/.op-card di area-pipeline.css (nessuna regola lì legge
   data-status="inv-…"); il fantasma del trascinamento è .dnd-ghost di area-pipeline.css; la card
   ha tabindex e role come quella della Pipeline; il tag del capitale è .op-tag.inv-libero (i
   livelli sopra, sezione del capitale). Tabella in una card che scorre di lato
   (.an-tab-card .an-scroll), numeri a destra, capitale libero nel colore del suo livello. */
.inv-tabella{width:100%;border-collapse:collapse}
.inv-tabella thead{background:var(--fc-card)}
.inv-tabella th{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-rail);background:var(--fc-card);color:var(--fc-label2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:nowrap}
.inv-tabella td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);color:var(--fc-label);font-size:13px;vertical-align:middle}
.inv-tabella tbody tr{cursor:pointer}
.inv-tabella th.num,.inv-tabella td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-tabella td.is-sub{color:var(--fc-label2)}
.inv-tabella td.num[data-level="ok"]{font-weight:700;color:var(--fc-ok)}
.inv-tabella td.num[data-level="warn"]{font-weight:700;color:var(--fc-warn)}
.inv-tabella td.num[data-level="danger"]{font-weight:700;color:var(--fc-danger)}
.inv-chi{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.inv-chi .an-nome{font-size:13px;font-weight:600}
@media (hover:hover){.inv-tabella tbody tr:hover{background:var(--fc-bg)}}

/* ── Investitori: la scheda (design-13c) ──
   Nel modale #genModal (cornice e foglio a tutto schermo da telefono: PR 5, area-opmodal.css).
   Quattro schede come bottoni (.inv-scheda-btn: l'attiva ha .is-active e aria-current); Anagrafica
   in .an-form; Investimenti: riepilogo coi .kpi-* della testata del pannello, voci .inv-io (titolo
   come <button> quando c'è un'operazione da aprire). Ogni voce sta nel guscio .inv-op-voce con la
   riga del rimborso sotto: #invOpsContainer ha un figlio per investimento, niente contenitore delle
   voci, lo spazio fra una e l'altra è il margine della voce. "Collega operazione" e il rimborso
   (.inv-op-*) restano in base.css, corretti sul posto (strada (b), adattamenti §A3). Il titolo
   della voce va a capo come prima (.an-nome lo taglierebbe con i puntini). */
.inv-schede{display:flex;margin-bottom:var(--sp-4);border-bottom:1px solid var(--fc-sep)}
.inv-scheda-btn{flex:1 1 0;min-width:0;min-height:40px;margin-bottom:-1px;padding:var(--sp-1);border:0;border-bottom:2px solid transparent;background:var(--fc-card);color:var(--fc-label2);font:inherit;font-size:13px;line-height:16px;font-weight:600;cursor:pointer}
.inv-scheda-btn.is-active{border-bottom-color:var(--fc-accent);color:var(--fc-accent)}
.inv-scheda-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
@media screen and (max-width:380px){.inv-scheda-btn{padding:var(--sp-1) 2px;font-size:12px;letter-spacing:-0.2px}}
.inv-io{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-2);padding:var(--sp-2) calc(var(--sp-3) + 32px) var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.inv-io.is-link{cursor:pointer}
.inv-io-main{flex:1;min-width:0}
.inv-io-t{display:block;margin-bottom:var(--sp-1);font-size:13px;font-weight:700;color:var(--fc-label);white-space:normal;overflow-wrap:anywhere}
.inv-io-nota{margin-top:var(--sp-1);font-size:12px;font-style:italic;color:var(--fc-label2)}
.inv-io-imp{flex:none;font-size:14px;font-weight:700;color:var(--fc-label);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (hover:hover){
  .inv-scheda-btn:not(.is-active):hover{color:var(--fc-label)}
  .inv-io.is-link:hover{border-color:var(--fc-accent)}
}
@media (hover:none){
  .inv-scheda-btn{min-height:44px}
  .inv-io{padding-right:calc(var(--sp-3) + 44px)}
}

/* ── Investitori: storico (design-13c) ──
   Titolo come quello degli Investimenti (.inv-op-titolo, base.css). Timeline: filo verticale --fc-sep
   e un pallino per nota, del colore del filetto del suo tipo (le regole .an-nota[data-tipo] dei pezzi
   comuni). Il pallino sta nel margine della timeline: left = -(--sp-5) dal bordo interno della nota,
   dopo i 3 px del filetto, quindi centro a 8 px come il filo (7 + 2/2). Nello storico non c'è la ✕:
   la nota non le tiene il posto. */
.inv-sez-t{margin-bottom:var(--sp-2);font-size:15px;font-weight:600;color:var(--fc-label)}
.inv-timeline{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding-left:var(--sp-5)}
.inv-timeline::before{content:"";position:absolute;top:0;bottom:0;left:7px;width:2px;background:var(--fc-sep)}
.inv-timeline .an-nota{padding-right:var(--sp-3)}
.inv-tl-dot{position:absolute;top:var(--sp-3);left:calc(-1 * var(--sp-5));width:10px;height:10px;border-radius:50%;background:var(--fc-accent-fill);box-shadow:0 0 0 2px var(--fc-card)}
.an-nota[data-tipo="chiamata"]>.inv-tl-dot{background:var(--fc-info)}
.an-nota[data-tipo="meeting"]>.inv-tl-dot{background:var(--fc-warn-fill)}
.an-nota[data-tipo="email"]>.inv-tl-dot{background:var(--st-due_diligence)}
.an-nota[data-tipo="documento"]>.inv-tl-dot{background:var(--fc-label2)}

/* ── Agenzie (design-13c) ──
   #pan-agenzie: testata col titolo, filtri .an-filtri, griglia .an-griglia di card .an-card (il
   gradino a 480 px che stava in style.css, la colonna singola forzata di #agenzieGrid, non serve più:
   la colonna scende col contenitore). Scheda nel modale #genModal: testata con la categoria, campi
   .an-form, note, operazioni collegate con lo stato come pallino più parola (era bianco sul colore
   dello stato, fino a 1,7:1). */
.ag-testa{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.ag-testa-main{flex:1;min-width:0}
.ag-nome{margin:0;font-size:20px;line-height:24px;font-weight:700;color:var(--fc-label);overflow-wrap:anywhere}
.ag-testa>.an-campo{flex:none}
.ag-note{max-height:240px;overflow-y:auto;margin-bottom:var(--sp-3)}
.ag-ops{display:flex;flex-direction:column;gap:var(--sp-1);max-height:220px;overflow-y:auto}
.ag-op{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);cursor:pointer}
.ag-op-st{display:inline-flex;align-items:center;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.ag-op .ag-op-addr{flex:1 1 auto;font-size:13px;font-weight:600}
.ag-op-prezzo{flex:none;font-size:13px;font-weight:700;color:var(--fc-label);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (hover:hover){.ag-op:hover{border-color:var(--fc-accent)}}
@media screen and (max-width:768px){
  .ag-testa{flex-wrap:wrap}
  .ag-testa>.an-campo{flex:1 1 100%}
}

/* ══ Viste e numeri (design-13d): mappa del portafoglio, statistiche, confronto, gantt, stato operazioni ══
   Solo token. Valori dai dati come variabile (--w larghezza, --x posizione, --c colore di stato dal
   token --st-<id>), livelli come data-level (ok, warn, danger, neutro, na, vuoto): il colore non è mai
   l'unico segnale (segno nel numero, parola, forma del pallino). Testo mai sotto 11 px; da telefono
   bersagli di 44 px. Cancellate da style.css: CHART, MAP, COMPARE VIEW (morta: nessun file la usava),
   PORTFOLIO MAP, .so-avviso-lettura, GANTT (.gantt-row: il mini-Gantt delle Scadenze del Calendario,
   lista.js, ha la sua sotto .gantt-wrap in area-calendar.css); cancellato da mobile.css il blocco 10 (l'ultima
   regola, #statoOpContent). gantt.js ha classi sue (.gt-*). */

/* ── Pezzi comuni alle cinque viste ── */
.vn-vuoto{padding:var(--sp-5) var(--sp-3);text-align:center;font-size:13px;line-height:18px;color:var(--fc-label2)}
.vn-vuoto.is-breve{padding:var(--sp-2) 0;text-align:left}
.vn-barra{flex:none;display:block;width:96px;height:6px;border-radius:3px;background:var(--fc-fill);overflow:hidden}
.vn-barra>i{display:block;width:var(--w,0%);height:100%;border-radius:inherit;background:var(--fc-accent-fill)}
.vn-barra[data-level="ok"]>i{background:var(--fc-ok)}
.vn-barra[data-level="warn"]>i{background:var(--fc-warn-fill)}
.vn-barra[data-level="danger"]>i{background:var(--fc-danger)}
.stat-val[data-level="ok"]{color:var(--fc-ok)}
.stat-val[data-level="warn"]{color:var(--fc-warn)}
.stat-val[data-level="danger"]{color:var(--fc-danger)}
.stat-val[data-level="neutro"]{color:var(--fc-label2)}

/* ── Mappa del portafoglio (#pan-mappa, mappa.js) e popup Leaflet ──
   Il CSS di Leaflet arriva DOPO il nostro (loadLeaflet in index.html lo appende a runtime) e ha regole
   a una classe: qui ogni regola ha un gradino in più (.leaflet-container davanti, o body) invece dei
   cinque !important che erano in style.css. La cornice del popup vale per tutte le mappe Leaflet della app, come
   prima (portafoglio, deck, Zornade nella scheda); le classi .popup-* sono del portafoglio e del deck.
   Leaflet scrive la larghezza del contenuto in linea (_updateLayout): min-width e max-width la tengono
   a 220 px senza !important. .map-container è anche la mappa del cruscotto del deck (deck.js). */
body .leaflet-container{font:inherit}
.leaflet-container .leaflet-popup-content-wrapper{padding:0;overflow:hidden;border-radius:var(--r);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)}
.leaflet-container .leaflet-popup-content{margin:0;min-width:220px;max-width:220px;font-size:13px;line-height:18px}
.leaflet-container .leaflet-popup-tip-container{display:none}
.map-container{position:relative;border:1px solid var(--fc-sep);border-radius:var(--r);overflow:hidden}
#portfolioMap{height:550px;margin-top:var(--sp-1)}
.map-stats{margin-top:var(--sp-3)}
.map-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);padding:var(--sp-2) 0}
.map-legend-item{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-label);font-size:12px;font-weight:600;cursor:pointer;user-select:none}
.map-legend-item[aria-pressed="false"]{color:var(--fc-label2);text-decoration:line-through}
.map-legend-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,var(--fc-rail))}
.map-legend-item[aria-pressed="false"] .map-legend-dot{background:none;box-shadow:inset 0 0 0 2px var(--c,var(--fc-rail))}
.map-geo-btn{display:inline-flex;align-items:center;min-height:32px;margin-top:var(--sp-2);padding:0 var(--sp-3);border:1px solid var(--fc-accent);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.map-geo-btn:disabled{opacity:.5;cursor:default}
.leaflet-container .leaflet-bar a.map-omi{width:auto;padding:0 var(--sp-2);font-size:11px;font-weight:700}
.leaflet-container .leaflet-bar a.map-omi[aria-pressed="true"]{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.leaflet-container .leaflet-bar a.map-omi[aria-busy="true"]{opacity:.5}
.popup-h{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg)}
.popup-city{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.popup-addr{margin-top:2px;font-size:13px;line-height:18px;font-weight:600;color:var(--fc-label)}
.popup-b{padding:var(--sp-2) var(--sp-3)}
.popup-r{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.popup-l{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.popup-v{font-size:13px;font-weight:700;color:var(--fc-label)}
.popup-v[data-level="ok"]{color:var(--fc-ok)}
.popup-v[data-level="danger"]{color:var(--fc-danger)}
.popup-p{font-size:15px;font-weight:800;color:var(--fc-accent);font-variant-numeric:tabular-nums}
.popup-azioni{margin-top:var(--sp-2);text-align:center}
.leaflet-container a.popup-link{display:inline-flex;align-items:center;min-height:32px;font-size:12px;font-weight:700;color:var(--fc-accent);text-decoration:none}
@media (hover:hover){.map-legend-item:hover{background:var(--fc-bg)}.map-geo-btn:not(:disabled):hover{background:var(--fc-accent-soft)}}
@media screen and (max-width:768px){#portfolioMap{height:420px}.map-legend-item,.map-geo-btn{min-height:44px}}

/* ── Statistiche (#pan-analytics, analytics.js) ──
   I grafici Chart.js prendono colori e font da fcChartTema() (utils.js); qui solo contenitori, titoli,
   righe e numeri. Le griglie a due colonne scendono a una sotto i 768 px (a 375 la pagina scorreva di
   lato: il canvas non scende sotto i suoi 300 px se la colonna non ha minmax(0,…)). */
.chart-wrap{position:relative;width:100%;min-width:0;height:280px}
.chart-wrap.is-220{height:220px}
.chart-wrap.is-250{height:250px}
.chart-wrap.is-300{height:300px}
.chart-wrap>canvas{max-width:100%}
canvas.is-cliccabile{cursor:pointer}
.sta-sezione{margin-bottom:var(--sp-4)}
.sta-sotto{margin-top:var(--sp-3);margin-bottom:0}
.sta-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.sta-riquadro{min-width:0;padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label)}
.sta-h3{margin:0 0 var(--sp-2);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.sta-periodo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.sta-periodo-l{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.sta-mese{margin-left:var(--sp-2);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fc-label2)}
.sta-mese-btn{min-width:32px;min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.sta-mese-btn:disabled{opacity:.4;cursor:default}
.sta-riga{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;font-size:13px;color:var(--fc-label)}
.sta-riga.is-agenzia{padding:var(--sp-2);border-radius:var(--rs)}
.sta-riga.is-roi{border-bottom:1px solid var(--fc-sep)}
.sta-riga-nome{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sta-riga-n{flex:none;min-width:44px;text-align:right;font-size:12px;color:var(--fc-label2)}
.sta-riga-val{flex:none;min-width:64px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sta-riga-val[data-level="ok"]{color:var(--fc-ok)}
.sta-riga-val[data-level="warn"]{color:var(--fc-warn)}
.sta-riga-val[data-level="danger"]{color:var(--fc-danger)}
.sta-riga.is-profitto .sta-riga-nome{flex:0 0 110px;font-weight:400;color:var(--fc-label2)}
.sta-riga.is-profitto .vn-barra{flex:1 1 auto;width:auto;height:12px}
.sta-profitti{max-height:220px;overflow-y:auto}
.sta-delta{margin-top:var(--sp-1);font-size:11px;font-weight:700;color:var(--fc-label2)}
.sta-delta[data-level="ok"]{color:var(--fc-ok)}
.sta-delta[data-level="danger"]{color:var(--fc-danger)}
.sta-tempo{display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-1) 0}
.sta-tempo-n{font-size:28px;line-height:32px;font-weight:800;color:var(--fc-label);font-variant-numeric:tabular-nums}
.sta-tempo-n[data-level="ok"]{color:var(--fc-ok)}
.sta-tempo-n[data-level="warn"]{color:var(--fc-warn)}
.sta-tempo-u{font-size:12px;color:var(--fc-label2)}
.sta-nota{margin-top:var(--sp-2);font-size:11px;line-height:14px;color:var(--fc-label2)}
.sta-nota.is-riga{grid-column:1/-1;margin-top:0}
@media (hover:hover){.sta-riga.is-agenzia:hover{background:var(--fc-bg)}.sta-mese-btn:not(:disabled):hover{background:var(--fc-bg)}}
@media screen and (max-width:768px){.sta-griglia{grid-template-columns:minmax(0,1fr)}.sta-mese-btn{min-width:44px;min-height:44px}}
@media screen and (max-width:480px){.sta-riga.is-agenzia .vn-barra{display:none}.sta-riga.is-profitto .sta-riga-nome{flex-basis:88px}}

/* ── Confronto operazioni (#pan-compare, compare.js) ──
   Le regole .cmp-grid/.cmp-card/.cmp-row* che erano in style.css non le usava nessuno: cancellate. */
.cmp-selezione{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.cmp-scelta{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-label);font-size:12px;font-weight:600;cursor:pointer}
.cmp-scelta.is-scelta{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)}
.cmp-scelta input{margin:0;accent-color:var(--fc-accent-fill)}
.cmp-scelta-citta{font-size:11px;font-weight:400;color:var(--fc-label2)}
.cmp-scelta.is-scelta .cmp-scelta-citta{color:inherit}
.cmp-tab-wrap{overflow-x:auto}
.cmp-tab{width:100%;font-size:13px}
.cmp-tab thead{background:none}
.cmp-tab th{padding:var(--sp-2);border-bottom:1px solid var(--fc-sep);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2);text-align:center;vertical-align:bottom;white-space:normal;position:relative}
.cmp-tab th.cmp-kpi-h{width:120px;text-align:left}
.cmp-tab td{padding:var(--sp-2)}
.cmp-op{display:inline-flex;flex-direction:column;align-items:center;min-height:32px;padding:var(--sp-1) var(--sp-2);border:0;border-radius:var(--rs);background:none;color:var(--fc-accent);font:inherit;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer;width:100%}
/* Tutta la testata apre l'operazione, come l'onclick di prima sul <th>: il ::after del bottone copre la cella */
.cmp-op::after{content:'';position:absolute;inset:0}
.cmp-op-citta{font-size:11px;font-weight:400;color:var(--fc-label2)}
.cmp-kpi{font-size:12px;font-weight:600;color:var(--fc-label2)}
.cmp-v{text-align:center;font-weight:700;color:var(--fc-label);font-variant-numeric:tabular-nums}
.cmp-v.is-best{background:var(--fc-accent-soft);color:var(--fc-accent);font-weight:800}
.cmp-v small{display:block;font-weight:600;color:var(--fc-label2)}
/* Su --fc-accent-soft il grigio secondario in scuro sta a 4,39:1: nella cella migliore il colore della cella */
.cmp-v.is-best small{color:inherit}
@media (hover:hover){.cmp-scelta:not(.is-scelta):hover{background:var(--fc-bg)}.cmp-op:hover{background:var(--fc-accent-soft)}.cmp-op:hover .cmp-op-citta{color:var(--fc-label)}}
@media screen and (max-width:768px){.cmp-scelta,.cmp-op{min-height:44px}}

/* ── Gantt (#pan-gantt, gantt.js) ──
   Fasi e legenda col colore dello stato (--c = var(--st-<id>)), posizione e larghezza da --x e --w.
   Scadenze: ambra, rosse se scadute; "oggi": linea sottile. Il segno sta sempre dentro l'area:
   left:var(--x) è un percento dell'area, translateX(-var(--x)) un percento del segno (gantt.js, _posSegno).
   Medie per fase con fondo e numero dal livello. */
.gt-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.gt-gruppo{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.gt-gruppo+.gt-gruppo{padding-left:var(--sp-2);border-left:1px solid var(--fc-sep)}
.gt-btn{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.gt-btn.is-attivo{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.gt-sommario{margin-left:auto;font-size:12px;color:var(--fc-label2)}
.gt-legenda{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-4)}
.gt-leg{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:11px;font-weight:600;color:var(--fc-label2)}
.gt-leg>i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--c,var(--fc-rail))}
.gt-righe{display:flex;flex-direction:column;gap:2px}
.gt-riga{display:flex;align-items:center;min-height:32px;border-bottom:1px solid var(--fc-sep);cursor:pointer}
.gt-op{flex:0 0 180px;min-width:0;padding:var(--sp-1) var(--sp-2);border:0;background:none;color:var(--fc-label);font:inherit;font-size:12px;font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.gt-op-citta{font-weight:400;color:var(--fc-label2)}
.gt-traccia{position:relative;flex:1 1 auto;min-width:0;height:22px;border-radius:3px;background:var(--fc-fill);overflow:hidden}
.gt-fase{position:absolute;top:0;left:var(--x,0);width:var(--w,0);height:100%;background:var(--c,var(--fc-rail));opacity:.7}
.gt-fase.is-corrente{opacity:1;box-shadow:inset 0 0 0 1px var(--fc-sep)}
.gt-scad,.gt-oggi{position:absolute;top:0;bottom:0;left:var(--x,0%);transform:translateX(calc(var(--x,0%) * -1))}
.gt-scad{z-index:2;width:2px;background:var(--fc-warn-fill)}
.gt-scad.is-scaduta{background:var(--fc-danger)}
.gt-oggi{z-index:3;width:1px;background:var(--fc-label2)}
.gt-durata{flex:0 0 56px;padding:0 var(--sp-2);text-align:right;font-size:11px;font-weight:600;color:var(--fc-label2);font-variant-numeric:tabular-nums}
.gt-medie{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--fc-sep)}
.gt-medie-t{margin-bottom:var(--sp-2);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.gt-medie-lista{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.gt-media{min-width:80px;padding:var(--sp-2) var(--sp-3);border-radius:var(--rs);text-align:center;background:var(--fc-accent-soft)}
.gt-media-n{font-size:18px;line-height:22px;font-weight:800;color:var(--fc-ok);font-variant-numeric:tabular-nums}
.gt-media[data-level="warn"]{background:var(--fc-warn-soft)}
.gt-media[data-level="warn"] .gt-media-n{color:var(--fc-warn)}
.gt-media[data-level="danger"]{background:var(--fc-danger-soft)}
.gt-media[data-level="danger"] .gt-media-n{color:var(--fc-danger)}
.gt-media-l,.gt-media-c{font-size:11px;line-height:14px;color:var(--fc-label)}
.gt-media-l{margin-top:2px;font-weight:600}
@media (hover:hover){.gt-btn:not(.is-attivo):hover,.gt-riga:hover{background:var(--fc-bg)}}
@media screen and (max-width:768px){.gt-btn,.gt-riga{min-height:44px}.gt-op{flex-basis:120px}}

/* ── Stato operazioni (#pan-statoOp, stato-operazioni.js) ──
   Pallino con colore E forma dal livello: pieno = fatto, mezzo = in corso, anello = da fare, trattino =
   non serve, anello punteggiato = non impostato (la legenda sotto la tabella li ripete con la parola).
   Le quattro statistiche: quattro colonne, due da telefono (era il blocco 10 di mobile.css con !important).
   Riga al passaggio: il "—" grigio delle utenze N/A prende --fc-label, perché --fc-label2 su
   --fc-accent-soft in scuro sta a 4,39:1. */
.so-caricamento{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-3);font-size:13px;color:var(--fc-label2)}
.so-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.so-titolo{margin:0;font-size:20px;line-height:24px;font-weight:800;color:var(--fc-label)}
.so-sotto{margin:2px 0 0;font-size:12px;color:var(--fc-label2)}
.so-filtro{display:flex;align-items:center;gap:var(--sp-2)}
.so-citta{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.so-avviso-lettura{margin-bottom:var(--sp-4);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-warn);font-size:13px;line-height:18px}
.so-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.so-tab-wrap{overflow-x:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card)}
.so-tab{width:100%;min-width:950px;border-collapse:collapse;font-size:12px;color:var(--fc-label)}
.so-tab thead{background:var(--fc-bg)}
.so-tab th{padding:var(--sp-2);border-bottom:1px solid var(--fc-sep);text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2);white-space:nowrap}
.so-tab td{padding:var(--sp-1) var(--sp-2);white-space:nowrap}
.so-tab tbody tr{border-bottom:1px solid var(--fc-sep)}
.so-tab tbody tr:nth-child(even){background:var(--fc-bg)}
.so-riga{cursor:pointer}
.so-tab td.so-c{text-align:center}
.so-c-ind{max-width:140px}
.so-id,.so-ind{display:inline-flex;align-items:center;min-height:32px;max-width:100%;padding:0;border:0;background:none;color:var(--fc-label);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.so-id{font-weight:700;text-decoration:underline dotted}
.so-ind{display:block;line-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-frazione{font-weight:700;color:var(--fc-label2)}
.so-frazione[data-level="ok"]{color:var(--fc-ok)}
.so-frazione[data-level="warn"]{color:var(--fc-warn)}
.so-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;box-shadow:inset 0 0 0 2px var(--fc-rail)}
.so-dot[data-level="ok"]{background:var(--fc-ok);box-shadow:inset 0 0 0 2px var(--fc-ok)}
.so-dot[data-level="warn"]{background:linear-gradient(90deg,var(--fc-warn-fill) 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--fc-warn-fill)}
.so-dot[data-level="danger"]{box-shadow:inset 0 0 0 2px var(--fc-danger)}
.so-dot[data-level="na"]{height:3px;border-radius:2px;box-shadow:none;background:var(--fc-label2)}
.so-dot[data-level="vuoto"]{box-shadow:none;border:2px dotted var(--fc-label2)}
.so-legenda{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--rs);background:var(--fc-bg);font-size:12px;color:var(--fc-label)}
.so-leg{display:inline-flex;align-items:center;gap:var(--sp-1)}
@media (hover:hover){.so-tab tbody tr.so-riga:hover{background:var(--fc-accent-soft)}.so-tab tbody tr.so-riga:hover .so-frazione[data-level="na"]{color:var(--fc-label)}}
@media screen and (max-width:768px){.so-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.so-citta,.so-id,.so-ind{min-height:44px}.so-ind{line-height:44px}}

/* ── Testata: pannello Alert (tools.js updateSmartAlerts) · design-13e ──
   Stessa carta del pannello Scadenze (area-task.css, .scad-*): neutra, il livello (data-level) colora
   solo la barra di 3 px a sinistra; icona e titolo dicono di che si tratta, il colore non è l'unico
   segnale. Una carta = un <button>: si apre l'operazione anche da tastiera. I due pannelli si aprono e
   si chiudono con hidden ([hidden] di base.css); nav.js li guarda con getComputedStyle. Prima: bordo e
   fondo colorati scritti nel JavaScript, titolo arancio su crema a 3,5:1, dettaglio a 8 px. */
.al-vuoto{padding:var(--sp-5) var(--sp-3);text-align:center;font-size:13px;color:var(--fc-label2)}
.al-item{position:relative;display:block;width:100%;margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);background:var(--fc-card);color:var(--fc-label);border:1px solid var(--fc-sep);border-radius:var(--rs);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.al-item::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--fc-label2)}
.al-item[data-level="danger"]::before{background:var(--fc-danger)}
.al-item[data-level="warn"]::before{background:var(--fc-warn-fill)}
.al-item[data-level="info"]::before{background:var(--fc-info)}
.al-item:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.al-testa{display:flex;align-items:center;gap:var(--sp-2)}
.al-ico{flex:none;font-size:15px;line-height:20px}
.al-titolo{flex:1;min-width:0;font-size:13px;line-height:18px;font-weight:600}
.al-desc,.al-sub{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--fc-label2)}
@media (hover:hover){.al-item:hover{background:var(--fc-bg)}}
/* I bottoni del filtro nella testata dei due pannelli ("Solo le mie" / "Tutte") sono .btn-sm (base.css, era in style.css) a 9,9 px. */
.hdr-panel-head .btn-sm{font-size:12px}

/* ── Fogli e bottoni della 13e: registro modifiche, dialoghi della firma dei PDF · design-13e ──
   Stessa forma del foglio di conferma di base.css (.fc-confirm-box): da telefono foglio dal basso sopra
   la safe-area, da 769 px scheda al centro. .cm-velo è il velo dei dialoghi della firma (z 100001: sopra
   la finestra di firma, come prima); il registro modifiche usa il velo del confirm (.fc-confirm-overlay).
   .cm-btn è il bottone di questi fogli: 36 px, 44 da touch; il primario sul verde pieno dei token. */
.cm-velo{position:fixed;inset:0;z-index:100001;display:flex;align-items:flex-end;justify-content:center;background:var(--fc-scrim)}
.cm-foglio{width:100%;max-width:420px;max-height:85vh;max-height:85dvh;overflow-y:auto;padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + var(--fc-safe-bottom));border-radius:20px 20px 0 0;background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)}
.cm-foglio.is-largo{max-width:540px}
.cm-foglio-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cm-titolo{flex:1;min-width:0;margin:0;font-size:17px;line-height:22px;font-weight:600;color:var(--fc-label)}
.cm-nota{margin-bottom:var(--sp-3);font-size:13px;line-height:18px;color:var(--fc-label2);overflow-wrap:anywhere}
.cm-nota strong{color:var(--fc-label)}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:36px;padding:0 var(--sp-4);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.cm-btn.is-primario{background:var(--fc-accent-fill);border-color:var(--fc-accent-fill);color:var(--fc-on-accent)}
.cm-btn.is-pericolo{border-color:var(--fc-danger);color:var(--fc-danger)}
.cm-btn:disabled{opacity:.5;cursor:default}
.cm-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:1px}
@media screen and (min-width:769px){
  .cm-velo{align-items:center}
  .cm-foglio{width:92vw;padding:var(--sp-5);border-radius:20px}
}
@media (hover:hover){.cm-btn:not(:disabled):not(.is-primario):hover{background:var(--fc-bg)}}
@media (hover:none){.cm-btn{min-height:44px}}

/* ── Registro modifiche della scheda (tools.js showAuditLog, bottone "📋 Storico") · design-13e ──
   Valore vecchio barrato in rosso, nuovo in verde e in grassetto: la barra e la freccia dicono qual è
   quale anche senza colore. Prima: scheda bianca scritta nel JavaScript (in scuro testo bianco su bianco). */
.aud-lista{font-size:13px;line-height:18px;color:var(--fc-label)}
.aud-vuoto{padding:var(--sp-4);text-align:center;color:var(--fc-label2)}
.aud-errore{padding:var(--sp-2) 0;color:var(--fc-danger)}
.aud-voce{padding:var(--sp-2) 0;border-bottom:1px solid var(--fc-sep)}
.aud-voce:last-child{border-bottom:0}
.aud-riga{display:flex;justify-content:space-between;gap:var(--sp-2);margin-bottom:2px}
.aud-chi{min-width:0;font-weight:600;overflow-wrap:anywhere}
.aud-quando{flex:none;font-size:12px;color:var(--fc-label2)}
.aud-campo{padding:2px 0 2px var(--sp-3);overflow-wrap:anywhere}
.aud-da{color:var(--fc-danger);text-decoration:line-through}
.aud-a{color:var(--fc-ok);font-weight:600}

/* ── Preferenze push della sidebar (index.html #pushPrefsPanel, notifications.js fcTogglePushUI) · design-13e ──
   Pannello e righe si aprono e si chiudono con hidden (prima style.display, letto con ==='none'). I due
   bottoni "Attiva Push" / "Disattiva Push" sono .btn-sm (base.css, era in style.css) a 9,9 px: qui a 12. */
.sidebar-sub-row .btn-sm{font-size:12px}

/* ── Messaggi: cornice, lista delle conversazioni, badge, nuova chat (js/modules/messaggi.js) · design-13e ──
   Due pannelli dentro una card: lista a sinistra (300 px, 240 fra 769 e 1023), chat a destra che si
   stringe (min-width:0: prima a 800 px la chat usciva dalla card e il ▶ restava tagliato fuori).
   Riga attiva su --fc-accent-soft con i testi in --fc-label (--fc-label2 su quel verde in scuro fa
   4,39:1); righe con messaggi non letti in grassetto col numero su verde pieno. Una riga = un <button>.
   #msgBadge: il badge della sidebar è display:none in area-shell.css (.nav-badge); qui si mostra, e
   hidden (base.css, !important) lo nasconde quando non ci sono non lette. */
#msgBadge{display:inline-flex}
.msg-caricamento{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-6) var(--sp-4);font-size:13px;color:var(--fc-label2)}
.msg-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.msg-titolo{margin:0;font-size:22px;line-height:28px;font-weight:700;color:var(--fc-label)}
.msg-sotto{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--fc-label2)}
.msg-container{display:flex;height:calc(100vh - 200px);height:calc(100dvh - 200px);min-height:400px;overflow:hidden;background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r)}
.msg-list-pane{flex:none;display:flex;flex-direction:column;width:300px;border-right:1px solid var(--fc-sep);background:var(--fc-card)}
.msg-cerca-box{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep)}
.msg-cerca{width:100%;min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label);font:inherit;font-size:13px}
.msg-cerca:focus{outline:none;border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
.msg-filtro{display:flex;align-items:center;gap:var(--sp-2);min-height:28px;margin-top:var(--sp-1);font-size:12px;color:var(--fc-label2);cursor:pointer;user-select:none}
.msg-filtro input{margin:0;accent-color:var(--fc-accent-fill)}
.msg-conv-list{flex:1;overflow-y:auto}
.msg-lista-vuota{padding:var(--sp-5) var(--sp-4);text-align:center;font-size:13px;line-height:18px;color:var(--fc-label2)}
.msg-conv-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:56px;padding:var(--sp-2) var(--sp-3);border:0;border-bottom:1px solid var(--fc-sep);background:none;color:var(--fc-label);font:inherit;text-align:left;cursor:pointer}
.msg-conv-item.is-active{background:var(--fc-accent-soft)}
.msg-conv-item:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.msg-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--fc-fill);color:var(--fc-label);font-size:12px;font-weight:700}
.msg-avatar.is-piccolo{width:32px;height:32px}
.msg-conv-item.is-active .msg-avatar,.msg-avatar.is-attivo{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.msg-conv-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-conv-riga{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-width:0}
.msg-conv-nome{min-width:0;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-conv-ora{flex:none;font-size:12px;color:var(--fc-label2)}
.msg-conv-ultimo{min-width:0;font-size:13px;line-height:18px;color:var(--fc-label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-conv-item.is-nuova .msg-conv-nome{font-weight:800}
.msg-conv-item.is-nuova .msg-conv-ultimo{color:var(--fc-label);font-weight:600}
.msg-conv-item.is-active .msg-conv-ora,.msg-conv-item.is-active .msg-conv-ultimo{color:var(--fc-label)}
.msg-conv-conto{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:11px;font-weight:700}
.msg-chat-pane{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--fc-card)}
.msg-vuoto{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-5);text-align:center;color:var(--fc-label2)}
.msg-vuoto-ico{margin-bottom:var(--sp-2);font-size:40px;line-height:1;opacity:.3}
.msg-vuoto-t{font-size:15px;font-weight:600}
.msg-vuoto-s{font-size:13px}
.msg-nuova-lista{max-height:400px;overflow-y:auto}
.msg-nuova-voce{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:56px;padding:var(--sp-2) var(--sp-3);border:0;border-bottom:1px solid var(--fc-sep);background:none;color:var(--fc-label);font:inherit;text-align:left;cursor:pointer}
.msg-nuova-voce:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.msg-nuova-info{display:flex;flex-direction:column;min-width:0}
.msg-nuova-nome{font-size:15px;line-height:20px;font-weight:600}
.msg-nuova-mail{font-size:13px;line-height:18px;color:var(--fc-label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media screen and (min-width:769px) and (max-width:1023px){
  .msg-list-pane{width:240px}
}
@media (hover:hover){
  .msg-conv-item:not(.is-active):hover,.msg-nuova-voce:hover{background:var(--fc-bg)}
}

/* ── Messaggi: la chat (js/modules/messaggi.js msgOpenConv, _buildBubble) · design-13e ──
   Testata su --fc-bg, bolle: le altrui su --fc-bg col filetto, le mie su --fc-accent-soft con ora e
   spunte in --fc-accent (--fc-label2 su quel verde in scuro fa 4,39:1). Spunte: ✓ inviato, ✓✓ letto,
   con la parola in aria-label (prima grigio o verde, stesso segno). La casella cresce fino a 100 px da
   --mh (messaggi.js _msgAutoGrow). Da telefono un pannello per volta: la lista, o la chat quando il
   contenitore ha is-chat (msgOpenConv; ← la toglie); prima style.display scritto da tre funzioni e un
   ascoltatore del resize, e con zero conversazioni a 390 px la chat vuota usciva dallo schermo. */
.msg-chat-testa{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg)}
.msg-indietro{display:none;font-size:20px;color:var(--fc-label)}
.msg-chat-chi{flex:1;min-width:0}
.msg-chat-nome{font-size:15px;line-height:20px;font-weight:600;color:var(--fc-label)}
.msg-chat-mail{font-size:12px;line-height:16px;color:var(--fc-label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-messaggi{flex:1;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);overflow-y:auto}
.msg-nessuno{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);text-align:center;font-size:13px;color:var(--fc-label2)}
.msg-giorno{align-self:center;margin:var(--sp-2) 0;padding:2px var(--sp-3);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:12px;line-height:16px;font-weight:600}
.msg-riga{display:flex;justify-content:flex-start;padding:2px 0}
.msg-riga.is-mio{justify-content:flex-end}
.msg-bolla{max-width:70%;min-width:0;padding:var(--sp-2) var(--sp-3) var(--sp-1);border:1px solid var(--fc-sep);border-radius:14px 14px 14px 4px;background:var(--fc-bg);color:var(--fc-label)}
.msg-riga.is-mio .msg-bolla{border-color:transparent;border-radius:14px 14px 4px 14px;background:var(--fc-accent-soft)}
.msg-mittente{margin-bottom:2px;font-size:12px;font-weight:700;color:var(--fc-accent)}
.msg-testo{font-size:15px;line-height:20px;overflow-wrap:anywhere}
.msg-meta{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-1);margin-top:2px}
.msg-ora,.msg-spunte{font-size:11px;line-height:14px;color:var(--fc-label2)}
.msg-spunte{font-weight:700}
.msg-riga.is-mio .msg-ora,.msg-riga.is-mio .msg-spunte{color:var(--fc-accent)}
.msg-att-ko{margin:var(--sp-1) 0;font-size:12px;color:var(--fc-label2)}
.msg-att-img{display:block;margin:var(--sp-1) 0;padding:0;border:0;background:none;cursor:pointer}
.msg-att-img img{display:block;max-width:min(250px,100%);max-height:200px;border-radius:var(--rs)}
.msg-att-img:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.msg-att-file{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-1) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);text-decoration:none}
.msg-att-ico{flex:none;font-size:20px;line-height:1}
.msg-att-info{display:flex;flex-direction:column;min-width:0}
.msg-att-nome{font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-att-apri{font-size:12px;color:var(--fc-label2)}
.msg-allegato{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--fc-sep);background:var(--fc-bg)}
.msg-allegato-img{flex:none;width:40px;height:40px;object-fit:cover;border-radius:4px}
.msg-allegato-ico{flex:none;font-size:22px;line-height:1}
.msg-allegato-info{flex:1;min-width:0}
.msg-allegato-nome{font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-allegato-peso{font-size:12px;color:var(--fc-label2)}
.msg-allegato-x{color:var(--fc-danger)}
.msg-scrivi{display:flex;align-items:flex-end;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--fc-sep);background:var(--fc-bg)}
.msg-clip{font-size:20px}
.msg-input{flex:1;min-width:0;height:var(--mh,auto);min-height:44px;max-height:100px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:22px;background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:15px;line-height:20px;resize:none;outline:none}
.msg-input:focus{border-color:var(--fc-accent)}
.msg-invia{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:17px;cursor:pointer}
.msg-invia:disabled{opacity:.5;cursor:default}
.msg-invia:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.msg-invia-attesa{font-size:13px}
.msg-trascina{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;border:2px dashed var(--fc-accent);border-radius:var(--rs);background:var(--fc-accent-soft);pointer-events:none}
.msg-trascina-t{font-size:15px;font-weight:700;color:var(--fc-accent)}
@media screen and (max-width:768px){
  .msg-list-pane{flex:1;width:auto;border-right:0}
  .msg-chat-pane{display:none}
  .msg-container.is-chat .msg-list-pane{display:none}
  .msg-container.is-chat .msg-chat-pane{display:flex}
  .msg-indietro{display:inline-flex}
  .msg-bolla{max-width:85%}
}
@media (hover:hover){
  .msg-att-file:hover{border-color:var(--fc-accent)}
}
/* Con una chat aperta il bottone "Segnala un bug" (sezione in cima al file) e la sua finestra si tolgono:
   stanno nell'angolo in basso a destra, lo stesso di ▶. A 375 px il bottone stava sopra ▶ e il tocco
   apriva la segnalazione invece di mandare il messaggio (voce nuovo-design-021); a 800x1280 (tablet in
   verticale: testata più alta, chat più in basso) il bottone stava sopra il centro di ▶, con lo stesso
   tocco sbagliato; da computer ▶ resta 13 px sopra il bottone, 1 px in una finestra bassa. Per questo
   a ogni larghezza, come col compose di Gmail (area-gmail.css). Solo col pannello Messaggi attivo:
   is-chat resta sul contenitore anche quando si passa a un'altra pagina, e lì il bottone deve esserci;
   tornando alla lista (← da telefono) ricompare. E solo senza una finestra della app aperta
   (.modal-overlay.open: scheda operazione, finestra comune, conferma DD): la scheda aperta da Messaggi
   (ricerca, ⌘K, campanella, scadenze) lascia sotto Messaggi con la chat, ma sulla scheda il bottone c'è.
   Peso (2,5,1): batte #bugReportBtn{display:flex} (1,0,0) senza !important.
   Prova: e2e/prove/bottone-bug-chat.spec.js. */
body:has(#pan-messaggi.active .msg-container.is-chat):not(:has(.modal-overlay.open)) #bugReportBtn,
body:has(#pan-messaggi.active .msg-container.is-chat):not(:has(.modal-overlay.open)) #bugReportModal{display:none}

/* ── Firma dei PDF: la finestra di firma e il pad (js/modules/pdf-sign.js) · design-13e ──
   A tutto schermo sul fondo della app, testata e piede sulle card con la safe-area; la pagina del PDF
   (bianca, è carta) al centro. Il nome del file si tronca: frecce e ✕ restano sullo schermo (prima a
   390 px, con un nome lungo, uscivano oltre il bordo destro). Le frecce spente sono spente davvero
   (prima un secondo style="opacity:.3" che il browser scartava). La firma sulla pagina si posiziona
   con --x/--y/--w/--h (frazioni della pagina, fix 2026-06-11): sta sulla carta, quindi etichetta e
   cornice sul verde pieno col bianco, leggibili in tutti e due i temi. Il riquadro della pagina
   (.psg-pagina, dove pdf-sign.js misura il clic) è l'immagine e basta: la vista non lo stira
   (align-items:flex-start). Prima si stirava fino al fondo della vista (835 px contro 800 a 1280×1000)
   e nel PDF la firma finiva più in alto di dove la si vedeva. Il pad è bianco in tutti e due
   i temi (--fc-on-accent): il tratto è nero e finisce nel PNG. */
.psg-modale{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:var(--fc-bg);color:var(--fc-label)}
.psg-testa{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:calc(var(--sp-1) + var(--fc-safe-top)) var(--sp-2) var(--sp-1) var(--sp-4);background:var(--fc-card);border-bottom:1px solid var(--fc-sep)}
.psg-titolo{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--sp-2)}
.psg-titolo-ico{flex:none}
.psg-titolo-t{flex:none;font-size:15px;line-height:20px;font-weight:700}
.psg-file{min-width:0;font-size:13px;color:var(--fc-label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psg-nav{flex:none;display:flex;align-items:center;gap:var(--sp-1)}
.psg-pag{font-size:13px;color:var(--fc-label2);font-variant-numeric:tabular-nums;white-space:nowrap}
.psg-freccia:disabled{opacity:.35;cursor:default}
.psg-strumenti{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--fc-card);border-bottom:1px solid var(--fc-sep)}
.psg-libreria{max-width:180px;min-height:36px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.psg-stato{font-size:13px;line-height:18px;font-weight:600;color:var(--fc-label2)}
.psg-stato[data-level="ok"]{color:var(--fc-ok)}
.psg-stato[data-level="warn"]{color:var(--fc-warn)}
.psg-spazio{flex:1}
.psg-vista{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:var(--sp-4);overflow:auto}
.psg-pagina{position:relative;max-width:100%}
.psg-pagina.is-mira{cursor:crosshair}
.psg-pagina-img{display:block;max-width:100%;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);box-shadow:var(--fc-shadow)}
.psg-firma{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);outline:1px dashed var(--fc-accent-fill);pointer-events:none}
.psg-firma img{display:block;width:100%;height:100%;object-fit:contain}
.psg-firma-t{position:absolute;bottom:100%;left:0;margin-bottom:2px;padding:0 var(--sp-1);border-radius:4px;background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
.psg-piede{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--fc-safe-bottom));background:var(--fc-card);border-top:1px solid var(--fc-sep)}
.psg-nota{font-size:12px;color:var(--fc-label2)}
.psg-azioni{display:flex;gap:var(--sp-2)}
.psg-pad{display:block;width:100%;height:auto;aspect-ratio:380/140;border:2px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-on-accent);cursor:crosshair;touch-action:none}
.psg-pad-azioni{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3)}
@media screen and (max-width:768px){
  .psg-strumenti{padding:var(--sp-2) var(--sp-3)}
  .psg-vista{padding:var(--sp-2)}
  .psg-nota{display:none}
  .psg-azioni{flex:1;justify-content:flex-end}
}

/* ── Firma dei PDF: azioni dopo la firma · design-13e ──
   Foglio della 13e (.cm-velo, .cm-foglio). Il velo resta a z 100000 come prima (.psg-azioni): la scelta
   di operazione e cartella di «Salva su Drive» (#genModal.is-sopra-tutto, 100001, drive-save.js) deve
   aprirsi sopra. Ogni azione è un bottone a tutta riga da 44 px; quella consigliata ha il filetto verde
   (e la nota in --fc-accent: --fc-label2 sul verde chiaro in scuro fa 4,39:1). Il fuoco della consigliata
   sta fuori dal filetto: dentro, dello stesso verde, ci cadrebbe sopra e non si vedrebbe. */
.cm-velo.psg-azioni{z-index:100000}
.psg-fatto{margin-bottom:var(--sp-2)}
.psg-azione{display:block;width:100%;min-height:44px;margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:15px;line-height:20px;text-align:left;cursor:pointer}
.psg-azione.is-consigliata{border:2px solid var(--fc-accent);background:var(--fc-accent-soft)}
.psg-azione-nota{font-size:13px;color:var(--fc-label2)}
.psg-azione.is-consigliata .psg-azione-nota{color:var(--fc-accent)}
.psg-chiudi{display:block;width:100%;min-height:44px;margin-top:var(--sp-1);border:0;background:none;color:var(--fc-label2);font:inherit;font-size:13px;cursor:pointer}
.psg-azione:focus-visible,.psg-chiudi:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.psg-azione.is-consigliata:focus-visible{outline-offset:2px}
@media (hover:hover){
  .psg-azione:not(.is-consigliata):hover{background:var(--fc-bg)}
  .psg-chiudi:hover{color:var(--fc-label)}
}
/* Toast con la firma aperta (review xhigh): i toast di base.css stanno a z 99999, da telefono in basso.
   Sotto la finestra di firma (100000, schermo intero), il pad (100001) e «PDF Firmato!» (100000, foglio
   dal basso) non si vedevano: «Salvato su Drive in …», «Nessuna operazione con cartella Drive»,
   «Risposta non aperta…». Come col confirm (base.css): in cima e sopra i veli e la scelta di Drive
   (#genModal.is-sopra-tutto, 100001), sotto il banner di aggiornamento (999999). Senza :has() (Safari
   sotto 15.4) la regola cade e si torna a prima. Le due finestre si tolgono dal DOM alla chiusura. */
body:has(.cm-velo) .fc-toast-container,body:has(.psg-modale) .fc-toast-container{top:calc(var(--fc-safe-top) + var(--sp-3));bottom:auto;z-index:100002}

/* ── fine delle sezioni (design-13): le parti successive inseriscono sopra questa riga ── */