@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
.app *, .app *::before, .app *::after { box-sizing: border-box; }
/* IL TELEFONO IN MODO SCURO RIDIPINGE I CONTROLLI.
   Senza questa riga, iOS decide da solo i colori di button, input e
   select: il testo diventa bianco, lo sfondo che abbiamo dichiarato
   resta bianco, e i tre pulsanti Si/No/? della scheda sopralluogo
   spariscono. L'interfaccia e' chiara e va dichiarato. */
:root, html { color-scheme: light; }

/* E per sicurezza: un controllo che si dipinge lo sfondo da solo deve
   dire anche di che colore ha il testo. Ereditarlo funziona finche'
   qualcosa non cambia il colore piu' in alto, o finche' il sistema non
   ci mette mano. Questa e' la rete sotto, non la regola: le classi
   importanti dichiarano il proprio colore per conto loro. */
/* IL COLORE SI EREDITA, NON SI IMPONE.
   Forzando var(--ink) su ogni pulsante, chiunque stia dentro un
   contenitore scuro — la barra in alto, una scheda selezionata, il
   riquadro della produzione — spariva: blu su blu. Con "inherit" il
   pulsante prende il colore del posto in cui si trova, e i contenitori
   scuri lo dichiarano gia'. */
.app input, .app select, .app textarea { color:var(--ink) }
.app button, .app input, .app select, .app textarea { color:inherit; }

.app { --ink:#0F2E4D; --ink2:#123A63; --nero:#1C1C1C; --paper:#F3F5F8; --sup:#FFFFFF; --line:#DBE1E9;
  --verde:#1B7A5A; --ocra:#376DA3; --rosso:#A8322A; --muto:#646F7C;

  /* NOMI CHE SI SONO ACCUMULATI STRADA FACENDO.
     Tredici variabili erano usate senza essere mai definite: una
     var() che non esiste non e' un errore, la proprieta' viene
     semplicemente ignorata. Sul si/no del sopralluogo lo sfondo
     var(--navy) spariva e restava color:#fff: bianco su bianco,
     il pulsante scelto diventava invisibile. Qui non si rinominano
     le regole, si dichiara a cosa corrisponde ogni nome. */
  --navy:#0F2E4D;        /* = --ink   */
  --blu:#376DA3;         /* = --ocra  */
  --accento:#376DA3;
  --tinta:#C3D0DE;
  --sfondo:#F3F5F8;      /* = --paper */
  --surface:#FFFFFF;     /* = --sup   */
  --faint:#F3F5F8;
  --linea:#DBE1E9;       /* = --line  */
  --line-forte:#C3CBD6;
  --line-strong:#C3CBD6;
  --muted:#6B7683;       /* = --muto  */
  --inch:#123A63;        /* = --ink2  */
  --ink-strong:#0F2E4D;
  display:flex; flex-direction:column; min-height:100vh; background:var(--paper); color:var(--nero); font-family:'Archivo',system-ui,sans-serif; font-size:14px; line-height:1.45; }
.app .mono { font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.app .forte { font-weight:600; } .app .verde { color:var(--verde); } .app .ocra { color:var(--ocra); }
.app .rosso { color:var(--rosso); } .app .dx { text-align:right; }
.app h1 { font-size:30px; font-weight:700; letter-spacing:-0.03em; margin:2px 0 0; color:var(--nero); }
.app h2 { font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin:0; }

/* NON PIU' IN USO dalla 2.8: la navigazione e' passata a .cima (barra in alto).
   Le regole .side* restano solo per non rompere eventuali stili ereditati. */
.side { width:214px; flex:0 0 214px; background:var(--ink); color:#C3D3E4; display:flex; flex-direction:column; padding:22px 0; position:sticky; top:0; height:100vh; }
.side__brand { display:flex; align-items:center; gap:11px; padding:0 20px 26px; }
.side__mark { width:30px; height:30px; flex:0 0 30px; object-fit:contain; }
.side__nome { display:flex; flex-direction:column; line-height:1.05; }
.side__nome b { font-size:11px; font-weight:600; letter-spacing:0.13em; color:#8FA6BE; }
.side__nome i { font-style:normal; font-size:17px; font-weight:700; letter-spacing:0.02em; color:#fff; }
.side__nome b { font-size:9.5px; letter-spacing:0.12em; }
.side__nav { display:flex; flex-direction:column; gap:1px; }
.side__link { background:none; border:0; border-left:2px solid transparent; text-align:left; padding:9px 22px; color:#8FA6BE; font:inherit; font-size:13.5px; cursor:pointer; }
.side__link:hover { color:#fff; } .side__link.is-on { color:#fff; border-left-color:#4C8AC6; font-weight:500; }
.side__link--sec { margin-top:10px; padding-top:12px; border-top:1px solid #1E4670; color:#5C7793; font-size:12.5px; }
.side__link:focus-visible { outline:2px solid #4C8AC6; outline-offset:-2px; }
.side__utente { margin-top:auto; padding:16px 18px 12px; border-top:1px solid #1E4670; }
.side__ul { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:#5C7793; margin-bottom:6px; }
.side__utente select { width:100%; font:inherit; font-size:12.5px; padding:6px 8px; background:#123A63; color:#EAF1F8; border:1px solid #215389; border-radius:0; }
.side__bk { display:block; width:calc(100% - 36px); margin:0 18px 10px; padding:9px 11px; text-align:left; background:#2A1A12;
  border:1px solid #7A4A28; border-left:3px solid #E0952B; font:inherit; cursor:pointer; }
.side__bk:hover { background:#3A2416; }
.side__bk b { display:block; font-size:11.5px; color:#F2C078; font-weight:600; }
.side__bk span { display:block; font-size:10.5px; color:#9DB2C8; margin-top:2px; }
.bk-st { padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--verde); background:#F6F8FB; }
.bk-st--no { border-left-color:var(--rosso); background:#FBF0EE; }
.bk-st__t { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--nero); }
.bk-st p { font-size:12.5px; color:var(--muto); margin:6px 0 0; line-height:1.5; }
.side__salv { padding:0 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.salv { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; display:flex; align-items:center; gap:6px; }
.salv::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.salv--carico, .salv--salvo { color:#8FA6BE; } .salv--pronto { color:#5C7793; }
.salv--salvato { color:#57C79B; } .salv--errore { color:#F0B3AA; }
.azzera { background:none; border:0; padding:0; font:inherit; font-size:11px; color:#5C7793; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.azzera:hover { color:#F0B3AA; }
.side__pie { padding:0 18px; font-size:11px; color:#5C7793; font-family:'IBM Plex Mono',monospace; }

.main { flex:1; min-width:0; }
.wrap { max-width:1220px; padding:34px 40px 64px; margin:0 auto; }
.testa { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.testa__az { display:flex; gap:8px; align-items:center; }
.occhiello { font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muto); }
.testa__nota, .testa__sub { font-size:12.5px; color:var(--muto); } .testa__sub { margin-top:3px; }
.testa__dx { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.testa__tot { font-size:24px; font-weight:600; }
.torna { background:none; border:0; padding:0 0 4px; color:var(--muto); font:inherit; font-size:12.5px; cursor:pointer; }
.torna:hover { color:var(--nero); }
.cerca { max-width:250px; font-size:13px; }

.card { background:var(--sup); border:1px solid var(--line); padding:18px 20px 20px; margin-bottom:18px; }
.card__testa { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:13px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.legenda { font-size:11px; color:var(--muto); font-family:'IBM Plex Mono',monospace; }
.vuoto { color:var(--muto); font-size:13px; margin:6px 0; }
.attesa { text-align:center; padding:56px 24px; }
.attesa p { color:var(--muto); font-size:13.5px; margin:16px 0 0; }
.attesa__p { display:flex; gap:7px; justify-content:center; }
.attesa__p i { width:9px; height:9px; border-radius:50%; background:var(--ink2); opacity:.3; animation:puls 1.1s ease-in-out infinite; }
.attesa__p i:nth-child(2) { animation-delay:.16s; } .attesa__p i:nth-child(3) { animation-delay:.32s; }
@keyframes puls { 0%,100% { opacity:.25; transform:scale(.85); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .attesa__p i { animation:none; opacity:.5; } }
.vuoto-b { text-align:center; padding:44px 24px; }
.vuoto-b p { color:var(--muto); font-size:14px; max-width:440px; margin:0 auto 18px; line-height:1.6; }
.nota { font-size:12px; color:var(--muto); margin:12px 0 0; line-height:1.5; } .nota--c { text-align:center; }
.tar-avviso { margin-top:12px; font-size:12px; line-height:1.55; background:#EEF3F9; border:1px solid #AFC8E0; border-left:3px solid var(--ink2); padding:9px 11px; }
.ant-box { font-size:11.5px; color:#9DB2C8; border:1px solid #1E4670; padding:9px 11px; margin:10px 0; line-height:1.45; }
.due-col { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:start; }

.griglia-kpi { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:1px solid var(--line); background:var(--sup); margin-bottom:18px; }
.griglia-kpi--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.kpi { padding:16px 18px 18px; border-right:1px solid var(--line); }
.kpi:last-child { border-right:0; }
.kpi__label { font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muto); }
.kpi__val { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:22px; font-weight:600; letter-spacing:-0.035em; margin:7px 0 3px; }
.kpi__sotto { font-size:11.5px; color:var(--muto); }
.kpi--ok .kpi__val { color:var(--verde); } .kpi--prov .kpi__val { color:var(--ocra); }


.nastro { display:flex; flex-direction:column; gap:3px; }
.nastro__track { height:9px; background:#E4E9F0; overflow:hidden; }
.nastro__track--thin { height:3px; background:#EDF1F6; }
.nastro__fill { height:100%; transition:width .35s ease; }
.nastro__fill--ok { background:var(--verde); } .nastro__fill--late { background:var(--rosso); } .nastro__fill--prov { background:var(--ocra); }
.ric-cifre { display:flex; gap:34px; margin-top:16px; flex-wrap:wrap; }
.ric-cifre > div { display:flex; flex-direction:column; }
.ric-cifre__l { font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muto); margin-bottom:3px; }
.ric-cifre .mono { font-size:19px; font-weight:600; }
.card--nastro { padding-bottom:22px; }

.tab { width:100%; border-collapse:collapse; }
.tab th { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); font-weight:500; text-align:left; padding:0 10px 9px; border-bottom:1px solid var(--line); }
.tab th.dx { text-align:right; }
.tab td { padding:11px 10px; border-bottom:1px solid #E9EDF2; vertical-align:top; }
.tab tbody tr { cursor:pointer; }
.tab tbody tr:hover:not(.no-hover) { background:#F6F8FB; }
.tab tbody tr.no-hover { cursor:default; }
.tab tfoot td { padding:9px 10px; font-size:12.5px; text-align:right; color:var(--muto); border:0; }
.tab tfoot td:first-child { text-align:left; }
.tab tfoot tr.tot td { border-top:2px solid var(--ink2); color:var(--nero); font-weight:600; padding-top:11px; }
.sotto { display:block; font-size:11px; color:var(--muto); margin-top:3px; }
.num { font-size:12.5px; font-weight:500; }
.piccolo { font-size:12.5px; color:var(--muto); }

.cod { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; padding:2px 6px; border:1px solid; margin-right:4px; }
.cod--im { color:var(--ink2); border-color:var(--ink2); }
.cod--es { color:var(--ocra); border-color:var(--ocra); background:#EDF3FA; }
.cod--an { color:var(--muto); border-color:var(--line); background:#F6F8FB; }
.cod--uf { color:#3E5670; border-color:#A8B6C7; background:#EDF1F6; }
.cod--vuoto { color:#AFB8C4; border-color:var(--line); border-style:dashed; }
.codici { display:flex; flex-wrap:wrap; gap:2px; }
.flag { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ocra); margin-left:6px; }
.flag--g { color:var(--muto); }

.chip { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; padding:2px 7px; border:1px solid; white-space:nowrap; }
.chip--saldata { color:var(--verde); border-color:#B2D5C6; background:#EFF7F3; }
.chip--parziale { color:var(--ocra); border-color:#B9CFE6; background:#EDF3FA; }
.chip--emessa { color:var(--muto); border-color:var(--line); background:#F6F8FB; }
.chip--scaduta { color:var(--rosso); border-color:#E2BCB6; background:#FBF0EE; }
.tag { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.07em; padding:1px 6px; border:1px solid var(--line); color:var(--muto); }
.tag--saldo { color:var(--verde); border-color:#B2D5C6; }

.editor { display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:18px; align-items:start; }
.editor__corpo { min-width:0; }
.campi { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.campi--2 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.campi--edit { display:flex; gap:8px; margin-bottom:12px; }
.campo { display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo--largo { grid-column:span 2; } .campo--sc { margin:12px 0 0; }
.campo > span { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); }
.riepilogo .campo > span { color:#89A2BC; }
.app input, .app select, .app textarea { font:inherit; font-size:13.5px; padding:7px 9px; border:1px solid var(--line); background:#FCFDFE; color:var(--nero); border-radius:0; width:100%; }
.app input:focus, .app select:focus, .app textarea:focus { outline:2px solid var(--ink2); outline-offset:-1px; background:#fff; }
.app select:disabled, .app input:disabled { background:var(--paper); color:var(--muto); }
.app .mini { padding:6px 7px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
.fr { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 1.2fr 96px 76px 108px 96px; gap:10px; align-items:end; padding:11px 0; border-bottom:1px solid #E9EDF2; }
.fr__imp2 { display:flex; flex-direction:column; gap:2px; padding-bottom:6px; }
.fr__il { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muto); }
.fr__imp2 b { font-size:15px; }
.fr__imp2 em { font-style:normal; font-size:10.5px; color:var(--ocra); }
.min-att { color:var(--ocra) !important; }
.nota-card { background:#FBF0EE; border:1px solid #E2BCB6; border-left:3px solid var(--rosso); padding:14px 16px; margin-bottom:18px; }
.nota-card__t { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--rosso); }
.nota-card__m { font-size:13px; margin:8px 0 0; line-height:1.55; color:var(--nero); }
.nota-card__l { list-style:none; margin:9px 0 0; padding:0; }
.nota-card__l li { display:flex; gap:14px; align-items:baseline; padding:4px 0; font-size:12.5px; color:var(--muto); }
.nota-card__l b { margin-left:auto; color:var(--rosso); font-size:13.5px; }
.cond { display:flex; gap:9px; align-items:flex-start; padding:11px 12px; margin:12px 0; border:1px solid #2A5D93; cursor:pointer; }
.cond input { width:auto; margin-top:2px; flex:0 0 auto; }
.cond span { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:#9DB2C8; line-height:1.45; }
.cond b { font-size:12.5px; color:#EAF1F8; font-weight:600; }
.barrato { text-decoration:line-through; opacity:.55; }
.rimborso__riga.rosso span { color:var(--rosso); }
.nc-b { font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:0.08em; color:var(--rosso); border:1px solid #E2BCB6; background:#FBF0EE; padding:1px 5px; margin-left:5px; }
.chip--nota { color:var(--rosso); border-color:#E2BCB6; background:#FBF0EE; }
.stor { list-style:none; margin:0; padding:0; }
.stor > li { padding:10px 0; border-bottom:1px solid #E9EDF2; }
.stor > li:last-child { border-bottom:0; }
.stor__t { display:flex; gap:10px; align-items:baseline; }
.stor__t b { font-size:13px; } .stor__t span { font-size:11px; color:var(--muto); }
.stor__v { margin:5px 0 0; padding-left:16px; }
.stor__v li { font-size:12.5px; color:var(--muto); line-height:1.55; }
.agg-riga { width:100%; margin-top:12px; padding:11px; background:none; border:1px dashed var(--line); color:var(--muto); font:inherit; font-size:13px; cursor:pointer; }
.agg-riga:hover { border-color:var(--ink2); color:var(--ink2); background:#F6F8FB; }
.sconto { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.sconto__c { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.sconto__l { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); }
.sconto__f { display:flex; gap:8px; align-items:center; }
.sconto__i { width:96px; }
.scelta { display:flex; border:1px solid var(--line); }
.scelta__b { font:inherit; font-size:13px; padding:6px 13px; background:none; border:0; border-right:1px solid var(--line); color:var(--muto); cursor:pointer; }
.scelta__b:last-child { border-right:0; }
.scelta__b.is-on { background:var(--ink); color:#fff; }
.sconto__e { display:flex; justify-content:space-between; gap:16px; margin-top:10px; font-size:12.5px; color:var(--muto); flex-wrap:wrap; }
.sconto__e b { color:var(--nero); font-size:14px; }
.sconto__v { color:var(--ocra); font-family:'IBM Plex Mono',monospace; }
.cli-box__t { justify-content:flex-start; }
.cli-pr { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink2); border:1px solid #AFC8E0; background:#EEF3F9; padding:1px 5px; margin-left:6px; }
.cli-az { margin-left:auto; display:flex; gap:12px; }
.cli-box + .cli-box { margin-top:8px; }
.cli-x { margin-left:0; background:none; border:0; padding:0; font:inherit; font-size:11px; color:var(--muto); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.cli-x:hover { color:var(--rosso); }
.liq { margin-top:18px; border:1px solid var(--line); border-top:2px solid var(--ink2); padding:14px 16px; background:#F6F8FB; }
.liq__t { display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); }
.liq__s { color:var(--rosso); }
.liq__s--ok { color:var(--verde); }
.liq__l { list-style:none; margin:12px 0 0; padding:0; }
.liq__l li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #E1E6ED; }
.liq__r { display:flex; gap:26px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid #E1E6ED; font-size:12.5px; color:var(--muto); }
.liq__r b { margin-left:6px; font-size:15px; color:var(--nero); }
.liq__az { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.velo--st { align-items:flex-start; padding:24px 20px; }
.foglio { background:#fff; max-width:820px; width:100%; }
.foglio__az { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 16px; background:var(--paper); border:1px solid var(--line); border-bottom:0; }
.foglio__n { font-size:11.5px; color:var(--muto); }
.st { padding:34px 38px 30px; border:1px solid var(--line); font-size:12px; color:var(--nero); }
.foglio__n { font-size:11.5px; color:var(--muto); }
.st .h { display:flex; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:20px; }
.st .m1 { font-size:16px; font-weight:700; letter-spacing:0.08em; color:var(--ink); }
.st .m2, .st .pe, .st .em, .st .reg, .st .sub, .st .pie { color:var(--muto); }
/* i gruppi del foglio ISA: un titolo di sezione e la sua tabella,
   nella stessa forma degli altri documenti che l'agenzia consegna */
.st .grp { margin-top:18px; break-inside:avoid; }
.st .gh { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink); padding-bottom:5px; border-bottom:1px solid var(--ink); margin-bottom:6px; }
.st .grp table { width:100%; border-collapse:collapse; }
.st .grp td { padding:3px 0; border-bottom:1px solid #E8ECF1; vertical-align:top; }
.st .grp td:first-child { width:34px; color:var(--muto); }
.st .vuoto { color:#B9C2CC; }
.st .grp ul { margin:0; padding-left:18px; }
.st .grp li { padding:2px 0; line-height:1.5; }
.st .m2 { font-size:11px; } .st .ag { font-size:17px; font-weight:600; } .st .pe { font-size:12px; }
.st .em { font-family:'IBM Plex Mono',monospace; font-size:10px; }
.st .dx { text-align:right; }
.st .blk { margin-bottom:22px; }
.st .mt { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink2); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:9px; }
.st table { width:100%; border-collapse:collapse; margin-bottom:9px; }
.st th { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muto); font-weight:500; text-align:left; padding:0 7px 5px; border-bottom:1px solid var(--line); }
.st td { padding:6px 7px; border-bottom:1px solid #EEF1F5; vertical-align:top; font-size:11.5px; }
.st .sub { display:block; font-size:9.5px; }
.st .ri { display:flex; flex-wrap:wrap; gap:18px; padding:8px 7px; background:#F6F8FB; font-size:11px; color:var(--muto); }
.st .ri b { margin-left:5px; color:var(--nero); font-size:12.5px; }
.st .pg th, .st .pg td { background:#FAFCFE; }
.st .tot { margin-top:26px; border-top:2px solid var(--ink); padding-top:12px; }
.st .tt { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink); margin-bottom:8px; }
.st .tot td { font-size:12.5px; }
.st .b td { font-weight:700; border-top:1px solid var(--ink); }
.st .pie { margin-top:26px; font-size:10.5px; line-height:1.55; }
.st .fir { display:flex; justify-content:space-between; gap:40px; margin-top:38px; }
.st .fir span { flex:1; border-top:1px solid var(--nero); padding-top:5px; font-size:10.5px; }
.st__testa { display:flex; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:20px; }
.st__marchio { font-size:16px; font-weight:700; letter-spacing:0.08em; color:var(--ink); }
.st__sub { font-size:11px; color:var(--muto); margin-top:2px; }
.st__ag { font-size:17px; font-weight:600; }
.st__per { font-size:12px; color:var(--muto); }
.st__em { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muto); margin-top:3px; }
.st__m { margin-bottom:22px; page-break-inside:avoid; }
.st__mt { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink2); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:9px; }
.st__t { width:100%; border-collapse:collapse; margin-bottom:9px; }
.st__t th { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muto); font-weight:500; text-align:left; padding:0 7px 5px; border-bottom:1px solid var(--line); }
.st__t th.dx, .st__t td.dx { text-align:right; }
.st__t td { padding:6px 7px; border-bottom:1px solid #EEF1F5; vertical-align:top; font-size:11.5px; }
.st__t--p td, .st__t--p th { background:#FAFCFE; }
.st__d { display:block; font-size:9.5px; color:var(--muto); }
.st__r { color:var(--muto); font-size:11px; }
.st__ri { display:flex; flex-wrap:wrap; gap:18px; padding:8px 7px; background:#F6F8FB; font-size:11px; color:var(--muto); }
.st__ri b { margin-left:5px; color:var(--nero); font-size:12.5px; }
.st__ap b { color:var(--rosso); }
.st__tot { margin-top:26px; border-top:2px solid var(--ink); padding-top:12px; page-break-inside:avoid; }
.st__tt { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink); margin-bottom:8px; }
.st__tot .st__t td { font-size:12.5px; }
.st__b td { font-weight:700; border-top:1px solid var(--ink); }
.st__pie { margin-top:26px; font-size:10.5px; color:var(--muto); line-height:1.55; }
.st__firme { display:flex; justify-content:space-between; gap:40px; margin-top:38px; }
.st__firme span { flex:1; border-top:1px solid var(--nero); padding-top:5px; font-size:10.5px; }

@media print {
  .side, .no-print, .toast { display:none !important; }
  .app { display:block; background:#fff; }
  .app:has(.velo--st) .main { display:none; }
  .velo--st { position:static; background:none; padding:0; display:block; overflow:visible; }
  .foglio { max-width:none; box-shadow:none; }
  .st { border:0; padding:0; }
  @page { margin:16mm; }
}
.tab--voci { margin-top:12px; }
.tab--voci td, .tab--voci th { padding-left:0; }
.liq__p { flex:1; }
.liq__ph { display:flex; align-items:center; gap:10px; }
.liq__al { list-style:none; margin:5px 0 0; padding:0 0 0 12px; border-left:2px solid var(--line); }
.liq__al li { display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:var(--muto); padding:2px 0; }
.pr-b { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:#8A5A12; border:1px solid #F2C078; background:#FDF4E6; padding:1px 5px; margin-left:6px; }
.liq__az--pr { justify-content:flex-end; }
.liq__mod { flex:1; background:#fff; border:1px solid var(--line); padding:12px; }
.st__d2 { font-style:normal; color:var(--muto); font-size:10px; }
.liq__ft { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); margin-bottom:9px; }
.vr { display:grid; grid-template-columns:minmax(0, 1fr) auto 110px auto; gap:12px; align-items:center; padding:9px 10px; border:1px solid transparent; border-bottom:1px solid #E1E6ED; }
.vr.is-on { background:#fff; border-color:var(--line); }
.vr__c { display:flex; gap:9px; align-items:flex-start; cursor:pointer; }
.vr__c input { width:auto; margin-top:3px; flex:0 0 auto; }
.vr__c span { display:flex; flex-direction:column; gap:2px; }
.vr__c b { font-size:13px; } .vr__c i { font-style:normal; font-size:11.5px; color:var(--muto); }
.vr__d { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:11px; color:var(--muto); white-space:nowrap; }
.vr__d b { color:var(--nero); font-size:12.5px; margin-left:4px; }
.vr__i { width:100%; }
.vr__a { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ocra); }
.ant-riga { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid #E1E6ED; }
@media (max-width:760px) {
  /* Su schermo stretto queste regole rimpicciolivano proprio quello che
     va letto: cifre da 21 a 16, etichette a 9 e note a 10. Nate per far
     stare tutto senza scorrere, ma su un telefono in mano il problema
     non e' lo spazio, e' che non si legge. */ .ant-riga { grid-template-columns:minmax(0, 1fr); } }
.vr__tot { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:2px solid var(--ink2); font-size:13px; }
.vr__tot b { font-size:19px; }
.liq__f { margin-top:12px; padding-top:12px; border-top:1px solid #E1E6ED; }
.pag-e { background:none; border:0; padding:0 0 0 6px; font:inherit; font-size:11px; color:var(--muto); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.btn--pericolo { background:var(--rosso) !important; border-color:var(--rosso) !important; color:#fff !important; }
button.pag-e.btn--pericolo { background:none !important; border:0 !important; color:var(--rosso) !important; font-weight:600; }
.pag-e:hover { color:var(--ink2); }
.pag-mod { display:block !important; background:#F6F8FB; border:1px solid var(--line); padding:12px; margin-bottom:8px; }
.pag-mod__az { display:flex; gap:8px; margin-top:12px; }
.acc-box { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.rit { display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--rosso); margin-top:4px; white-space:nowrap; }
.rit--in { display:inline; margin:0 0 0 4px; font-weight:600; }
.err-c { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--rosso); margin-top:3px; }
.fr:last-child { border-bottom:0; }
.fr__fine { display:flex; align-items:center; gap:4px; padding-bottom:8px; flex-wrap:wrap; }
.tolgo { background:none; border:0; color:#AFB8C4; font-size:18px; cursor:pointer; padding:0 4px; }
.tolgo:hover { color:var(--rosso); }
.tab--edit td { padding:6px 6px; } .tab--edit tbody tr { cursor:default; } .tab--edit tbody tr:hover { background:none; }
.switch { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muto); cursor:pointer; }
.switch input { width:auto; }
.motivo { margin-top:14px; border-top:1px solid #B9CFE6; padding-top:13px; }
.motivo__n { font-size:11.5px; color:var(--muto); margin-top:6px; }
.sel-mese { width:auto; font-size:12.5px; padding:5px 8px; }

.riepilogo { background:var(--ink); color:#EAF1F8; padding:20px; position:sticky; top:22px; }
.riepilogo__testa { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.12em; color:#89A2BC; padding-bottom:13px; border-bottom:1px solid #1E4670; }
.conto { margin:0; padding:14px 0 0; }
.conto > div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12.5px; }
.conto dt { color:#9DB2C8; margin:0; } .conto dd { margin:0; color:#EAF1F8; }
.conto--meno dd { color:#F0B3AA; }
.conto--riga { border-top:1px solid #1E4670; margin-top:6px; padding-top:9px !important; }
.conto--tot { border-top:2px solid #2A5D93; margin-top:8px; padding-top:11px !important; }
.conto--tot dt { color:#fff; font-weight:600; }
.conto--tot dd { font-size:19px; font-weight:600; letter-spacing:-0.03em; }
.conto--largo { color:var(--nero); padding-top:0; }
.conto--largo dt { color:var(--muto); } .conto--largo dd { color:var(--nero); text-align:right; }
.conto--largo > div { font-size:13px; padding:6px 0; }
.conto--largo .conto--riga { border-color:var(--line); }
.prov-box { border:1px solid var(--ocra); padding:13px 14px; margin:12px 0 10px; }
.prov-box__testa { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:#7FB2E4; }
.prov-box__val { font-size:22px; font-weight:600; color:#BBD6F0; letter-spacing:-0.03em; margin:5px 0 8px; }
.prov-box__nota { font-size:11.5px; color:#9DB2C8; margin:0; line-height:1.45; }
.prov-box__lista { list-style:none; margin:0; padding:0; }
.prov-box__lista li { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:#9DB2C8; padding:3px 0; border-top:1px solid #1E4670; }
.marg-box { display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid #1E4670; font-size:12.5px; color:#9DB2C8; }
.marg-box .mono { color:#fff; font-size:15px; }

.btn { font:inherit; font-size:13px; font-weight:500; padding:9px 16px; border:1px solid var(--ink); background:none; color:var(--nero); cursor:pointer; border-radius:0; }
.btn--primo { background:var(--ink); color:#fff; }
.btn--primo:hover:not(:disabled) { background:var(--ink2); border-color:var(--ink2); }
.btn--fine { border-color:var(--line); color:var(--nero); background:#fff; }
.btn--fine:hover { border-color:var(--ink); }
.btn--pieno { width:100%; margin-top:8px; } .btn--mini { padding:4px 10px; font-size:11.5px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn:focus-visible { outline:2px solid var(--ocra); outline-offset:2px; }
.riepilogo .btn--primo { background:var(--ocra); border-color:var(--ocra); color:#fff; }
.riepilogo .btn--primo:hover:not(:disabled) { background:#4C8AC6; border-color:#4C8AC6; }

.quote { border:1px solid var(--ocra); padding:12px 14px; }
.quote__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ocra); margin-bottom:8px; }
.quote__r { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:7px 0; border-bottom:1px solid #E9EDF2; }
.quote__r:last-child { border-bottom:0; }
.quote__d { display:flex; flex-direction:column; gap:2px; }
.quote__d b { font-size:13px; } .quote__d i { font-style:normal; font-size:12px; color:var(--muto); }
.quote__d em { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muto); }
.diag { border:1px solid var(--line); border-left:2px solid var(--rosso); background:#FBF0EE; padding:12px 14px; }
.diag__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--rosso); margin-bottom:9px; }
.diag__p { margin-bottom:9px; font-size:12.5px; }
.diag__p ul { margin:4px 0 0; padding-left:16px; }
.diag__p li { color:var(--muto); line-height:1.5; }
.diag__p i { font-style:normal; color:var(--nero); }
.card--forz { border-color:#AFC8E0; border-left:3px solid var(--ink2); }
.forz-card { background:#EEF3F9; border:1px solid #AFC8E0; border-left:3px solid var(--ink2); padding:14px 16px; margin-bottom:18px; }
.forz-card__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink); }
.forz-card__m { font-size:13.5px; margin:8px 0 0; line-height:1.5; }

.cli-box { margin-top:14px; border:1px solid var(--line); background:#F6F8FB; padding:12px 14px; }
.cli-box__t { font-weight:600; font-size:15px; display:flex; align-items:center; gap:9px; }
.cli-tipo { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; padding:1px 6px; border:1px solid; }
.cli-tipo--p { color:var(--muto); border-color:var(--line); background:#fff; }
.cli-tipo--s { color:var(--ink2); border-color:var(--ink2); background:#fff; }
.cli-box__g { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 18px; margin-top:9px; }
.cli-box__g span { display:flex; flex-direction:column; font-size:12.5px; }
.cli-box__g i { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muto); font-style:normal; }

.pagamenti { list-style:none; margin:0 0 14px; padding:0; }
.pagamenti li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #E9EDF2; }
.pag__meta { flex:1; font-size:11.5px; color:var(--muto); font-family:'IBM Plex Mono',monospace; }
.pag-form { border-top:1px solid var(--line); padding-top:14px; }
.card--prov { border-color:#B9CFE6; }


.prog { height:12px; background:#E9EDF2; margin:4px 0 10px; }
.prog__fill { height:100%; background:var(--verde); transition:width .4s ease; }
.ob { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:14px 0 4px; }
.ob > div { display:flex; flex-direction:column; }
.ob__l { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); margin-bottom:3px; }
.ob b { font-size:18px; font-weight:600; letter-spacing:-0.03em; }
.rimborso { margin-top:18px; border-top:2px solid var(--ink2); padding-top:14px; }
.rimborso__riga { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px; }
.rimborso__riga--m { font-size:12px; color:var(--muto); }
.rimborso__riga--t { border-top:1px solid var(--line); margin-top:7px; padding-top:11px; font-weight:600; }
.rimborso__riga--t .mono { font-size:19px; }
.altrove { margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
.altrove__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muto); margin-bottom:9px; }
.altrove__l { display:flex; gap:8px; flex-wrap:wrap; }
.altrove__b { display:flex; flex-direction:column; gap:3px; align-items:flex-start; background:var(--sup); border:1px solid var(--line); padding:8px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.altrove__b:hover { border-color:var(--ink2); }
.altrove__b b { font-size:14px; color:var(--ocra); }

.cv { width:100%; height:auto; display:block; margin:4px 0 6px; }
.cv__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; fill:#6B7683; }
.cv__h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.cv__l { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); }
.cv__v { font-size:26px; font-weight:600; letter-spacing:-0.04em; }
.cv__d { font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
.cv__d.su { color:var(--verde); } .cv__d.giu { color:var(--rosso); }
.cia { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.cia__v { font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; fill:var(--nero); letter-spacing:-0.03em; }
.cia__l { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; fill:var(--muto); }
.cia__leg { list-style:none; margin:0; padding:0; flex:1; min-width:210px; }
.cia__leg li { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #E9EDF2; font-size:12.5px; }
.cia__leg li:last-child { border-bottom:0; }
.cia__leg i { width:10px; height:10px; flex:0 0 10px; }
.cia__leg span { flex:1; }
.cia__leg b { font-size:13px; }
.cia__leg em { font-style:normal; font-size:11px; color:var(--muto); min-width:44px; text-align:right; }
.cia__leg--2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 26px; }
.cia__leg--2 li { font-size:12px; }
.cia__leg--2 span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) { .cia__leg--2 { grid-template-columns:minmax(0, 1fr); } }
.cia-due { display:flex; gap:20px; flex-wrap:wrap; }
.cia-due .cia { flex:1; min-width:252px; gap:16px; }
.cia-due .cia__v { font-size:14px; } .cia-due .cia__l { font-size:8px; }
.cia-due .cia__leg { min-width:120px; }
.cia-due .cia__leg li { font-size:12px; }
.mstrip { display:flex; gap:10px; overflow-x:auto; padding:3px 3px 12px; scroll-snap-type:x proximity; }
.mstrip::-webkit-scrollbar { height:6px; }
.mstrip::-webkit-scrollbar-thumb { background:#C3D3E4; }
/* min-width:0 e' necessario quanto minmax(0,1fr) nelle griglie: senza,
   il minimo di una cella flex e' il suo contenuto, e una scheda con una
   cifra lunga diventava 154px invece dei 132 dichiarati. Nella striscia
   dei mesi si vedeva come schede di larghezza diversa. */
.ms { flex:0 0 132px; min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:14px 12px 13px; text-align:center; position:relative; cursor:pointer;
  background:var(--sup); border:1px solid var(--line); border-radius:13px;
  transition:transform .18s, box-shadow .18s, border-color .18s, background .18s; }
.ms:hover { border-color:#B4C7DB; transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(15,46,77,.24); }
.ms:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.ms.is-on { background:linear-gradient(158deg, #164070 0%, #10314F 60%, #0B2440 100%); border-color:transparent;
  box-shadow:0 1px 2px rgba(11,36,64,.18), 0 12px 26px -12px rgba(11,36,64,.42); }
.ms.is-on .ms__m, .ms.is-on .ms__d, .ms.is-on .ms__r { color:#9FBBD8; }
.ms.is-on .ms__v { color:#fff; }
.ms.is-on .ms__r.verde { color:#6EE0AE; } .ms.is-on .ms__r.rosso { color:#F2A9A0; }
.ms--vuoto { opacity:.5; }
.ms--vuoto:hover { opacity:.75; }
.ms--oggi { border-color:#B4C7DB; }
.ms--oggi .ms__m { color:var(--ink2); font-weight:600; }
.ms--oggi .ms__m::after { content:"·oggi"; margin-left:5px; color:#4C8AC6; }
.ms--anno { background:#EDF2F8; }
.ms--anno.is-on { background:linear-gradient(158deg, #164070 0%, #10314F 60%, #0B2440 100%); }
.ms__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ms__m { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muto); }
.ms__v { font-size:21px; font-weight:600; letter-spacing:-0.04em; white-space:nowrap; }
.ms__d { font-size:11px; color:var(--muto); height:15px; font-family:'IBM Plex Mono',monospace; }
.ms__d.su { color:var(--verde); } .ms__d.giu { color:var(--rosso); }
.ms__r { font-size:11.5px; color:var(--muto); line-height:1.35; }
.anello { flex:0 0 auto; }
/* Etichetta, cifra e nota erano tre righe attaccate senza respiro:
   "Provvigioni16.602,25 €2767,04 € sui 6 mesi" si leggeva come una
   parola sola. Ogni voce e' una colonna con il suo ritmo verticale. */
.msum { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px 24px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.msum > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.msum__l { display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--muto); line-height:1.3; }
.msum b { display:block; font-size:21px; line-height:1.15; letter-spacing:-0.035em; }
.msum i { display:block; font-style:normal; font-size:11px; line-height:1.5;
  color:var(--muto); margin-top:1px; }
@media (max-width:900px) { .msum { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width:520px) { .ms { flex-basis:138px; } }

.mesi { display:flex; gap:6px; align-items:flex-end; height:230px; }
.mese { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.mese__b { flex:1; width:100%; display:flex; align-items:flex-end; }
.mese__tot { width:100%; background:#3E77B0; min-height:2px; display:flex; flex-direction:column; justify-content:flex-start; }
.mese__cons { width:100%; background:#123A63; }
.mese__v { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muto); margin-bottom:5px; height:13px; white-space:nowrap; }
.mese__l { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muto); margin-top:7px; }
.mesi__r { display:flex; gap:28px; flex-wrap:wrap; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muto); }
.mesi__r b { margin-left:6px; color:var(--nero); font-size:14px; }
.pal { width:9px; height:9px; display:inline-block; margin-right:5px; }
@media (max-width:760px) { .mese__v { font-size:8.5px; } .mesi { gap:3px; } }

/* ─── schermata di accesso ─────────────────────────────────── */
.gate { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:32px 22px; overflow-y:auto;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Archivio", "Archivo", system-ui, sans-serif; }
.gate__bg { position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% -14%, #DFEAF7 0%, rgba(223,234,247,0) 62%),
    radial-gradient(700px 420px at 88% 104%, #E7EEF7 0%, rgba(231,238,247,0) 60%),
    linear-gradient(#FBFCFE, #F4F7FB); }
.gate__c { position:relative; width:100%; max-width:392px; text-align:center; }

/* il marchio: prima protagonista, poi filigrana enorme dietro al modulo */
.gate__logo { position:absolute; left:50%; top:50%; width:min(560px, 84vw); height:auto;
  transform:translate(-50%, -50%) scale(1.08); opacity:0; pointer-events:none; user-select:none;
  animation:gLogo 1s cubic-bezier(.16,1,.3,1) .05s forwards;
  transition:width 1.15s cubic-bezier(.16,1,.3,1), opacity 1s ease .12s, transform 1.15s cubic-bezier(.16,1,.3,1); }
@keyframes gLogo { to { transform:translate(-50%, -50%) scale(1); opacity:1; } }
.gate--modulo .gate__logo { animation:none; width:min(880px, 112vw); opacity:.075; transform:translate(-50%, -50%) scale(1); }

.gate__f { position:relative; opacity:0; transform:translateY(20px) scale(.985); pointer-events:none;
  transition:opacity .7s ease .34s, transform .7s cubic-bezier(.16,1,.3,1) .34s; }
.gate--modulo .gate__f { opacity:1; transform:none; pointer-events:auto; }

.gate__f { background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(255,255,255,.9); border-radius:22px; padding:30px 26px 26px;
  box-shadow:0 2px 8px rgba(16,42,70,.05), 0 24px 70px rgba(16,42,70,.13); }
.gate__h { font-size:25px; font-weight:600; letter-spacing:-0.028em; margin:0; color:#111417; }
.gate__p { font-size:15px; color:#7A8794; margin:5px 0 22px; letter-spacing:-0.01em; }

.gate__g { background:#fff; border-radius:14px; overflow:hidden; text-align:left;
  box-shadow:0 1px 2px rgba(16,42,70,.06), 0 6px 20px rgba(16,42,70,.06); }
.gate__row { display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; position:relative; }
.gate__row + .gate__row::before { content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:rgba(60,70,84,.11); }
.gate__row label { flex:0 0 84px; font-size:15px; color:#8A94A2; letter-spacing:-0.01em; }
.gate__row input { flex:1; border:0; background:none; padding:0; font:inherit; font-size:17px; letter-spacing:-0.015em; color:#111417; width:100%; }
.gate__row input::placeholder { color:#B7BFC9; }
.gate__row input:focus { outline:none; }
.gate__row:focus-within { background:#FAFBFD; }

.gate__e { margin-top:12px; font-size:14px; color:#C0392B; letter-spacing:-0.01em;
  animation:gScuoti .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes gScuoti { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }

/* IL TESTO DEL PULSANTE ERA NERO SU BLU.
   ".app button { color:inherit }" vale piu' di ".gate__btn" e vinceva:
   "Accedi" usciva quasi nero sul fondo blu scuro. Due classi bastano a
   far pesare di piu' questa regola, senza !important. */
.app .gate__btn, .gate__btn { width:100%; height:50px; margin-top:18px; border:0; border-radius:13px;
  background:#0F2E4D; color:#fff; font:inherit; font-size:17px; font-weight:500; letter-spacing:-0.015em;
  cursor:pointer; transition:transform .16s ease, background .16s ease, opacity .16s ease; }
.gate__btn:hover:not(:disabled) { background:#16436E; }
.gate__btn:active:not(:disabled) { transform:scale(.978); }
.gate__btn:disabled { opacity:.34; cursor:default; }

.gate__sw { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px;
  font-size:15px; color:#5B6673; letter-spacing:-0.01em; cursor:pointer; }
.gate__sw input { position:absolute; opacity:0; width:0; height:0; }
.gate__sw i { width:50px; height:30px; border-radius:15px; background:#E3E7EC; position:relative; flex:0 0 50px;
  transition:background .24s cubic-bezier(.16,1,.3,1); }
.gate__sw i::after { content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(16,42,70,.2); transition:transform .24s cubic-bezier(.16,1,.3,1); }
.gate__sw input:checked + i { background:#2E9E5B; }
.gate__sw input:checked + i::after { transform:translateX(20px); }

.gate__n { margin-top:22px; font-size:12.5px; color:#96A0AC; letter-spacing:-0.005em; line-height:1.5; }

@media (max-width:420px) { .gate { padding:20px 18px; align-items:flex-start; } .gate__h { font-size:23px; } }
@media (max-height:720px) { .gate { align-items:center; } .gate__f { padding:24px 22px 22px; } }
@media (max-width:420px) { .gate--modulo .gate__logo { width:132vw; opacity:.07; } .gate__f { padding:26px 20px 22px; } }
@media (prefers-reduced-motion: reduce) {
  .gate__logo, .gate__f, .gate__btn, .gate__sw i, .gate__sw i::after { animation:none !important; transition:none !important; }
  .gate__logo { opacity:.075 !important; width:min(880px, 112vw) !important; }
  .gate__f { opacity:1; transform:none; pointer-events:auto; }
  .gate__logo { opacity:1; transform:none; }
}

/* pannello di scelta delle aree */
/* ── UN CONTENITORE CHE SCORRE NON PUO' CENTRARE ──────────────────
   Marco, 23/09/2026: "il logo e' tagliato in testa alla pagina".
   E' la trappola classica di flex: con align-items:center, quando il
   contenuto e' piu' alto dello schermo, la parte che avanza esce da
   TUTTE E DUE le parti — e quella di sopra non si raggiunge scorrendo,
   perche' sopra il punto di partenza non c'e' scorrimento. Finche' le
   aree erano quattro non si vedeva; con le due in costruzione dentro
   la stessa griglia il contenuto e' cresciuto e il logo e' finito
   fuori.
   Si parte dall'alto, e a centrare ci pensa "margin:auto" sul figlio:
   centra quando c'e' spazio e non taglia quando non ce n'e'. ── */
.hub { position:fixed; inset:0; z-index:60; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; padding:40px 22px;
  background:radial-gradient(1100px 620px at 50% -12%, #FFFFFF 0%, #EEF2F7 46%, #E7ECF3 100%); }
/* UNA LARGHEZZA SOLA, O NIENTE E' ALLINEATO.
   Marco, 23/09/2026: "migliora notevolmente la grafica della HOME, deve
   essere tutto allineato".
   La causa era qui e si misura: l'intestazione stava dentro 820px e la
   griglia delle aree dentro 860px suoi. Quaranta pixel di scarto sono
   pochi da spiegare e tantissimi da guardare — il logo e il saluto
   risultavano rientrati rispetto alle carte sotto, e l'occhio lo vede
   anche quando la testa non sa perche'. Adesso la misura e' una sola e
   la impone il contenitore: nessun figlio se ne sceglie un'altra. */
.hub__c { width:100%; max-width:900px; margin:auto; }
.hub__logo { width:min(158px, 44vw); height:auto; display:block; }
/* Chi non ha nessuna area non deve trovare una schermata vuota: deve
   trovare una frase che dice cosa fare. */
.hub__vuoto { display:flex; flex-direction:column; gap:4px; margin:20px 0 0;
  padding:16px 18px; border-radius:12px; background:var(--sup);
  border:1px solid var(--line); border-left:3px solid var(--ink); }
.hub__vuoto b { font-size:14px; font-weight:600; color:var(--ink); }
.hub__vuoto span { font-size:12.5px; line-height:1.55; color:var(--muto); max-width:72ch; }

.hub__p { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muto); }
/* I tre tasti della soglia stanno insieme: un gruppo unico, diviso da
   una riga sottile, invece di tre tasti spinti in tre angoli diversi
   dallo spazio vuoto di una riga larga 900px. */
.hub__tasti { display:inline-flex; align-items:stretch; margin-left:auto;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.hub__tasti > .btn { border:0; border-radius:0; background:none; margin:0;
  padding:8px 15px; font-size:12.5px; color:var(--ink2); text-decoration:none;
  display:inline-flex; align-items:center; white-space:nowrap; }
.hub__tasti > .btn + .btn { border-left:1px solid var(--line); }
.hub__tasti > .btn:hover { background:#F4F7FB; color:var(--nero); }
.hub__esci { color:var(--muto) !important; }
.hub__esci:hover { color:var(--nero) !important; }
.hub__p select { width:auto; font-size:12.5px; padding:6px 9px; }
.side__esci { display:block; width:calc(100% - 36px); margin:0 18px 10px; padding:8px 0; text-align:left; background:none; border:0; color:#8FA6BE; font:inherit; font-size:12px; cursor:pointer; }
.side__esci:hover { color:#fff; }
@media (max-width:700px) { .hub__g { grid-template-columns:minmax(0, 1fr); } .hub { padding:24px 14px; align-items:flex-start; } }
@media (max-width:760px) { .side__esci { display:none; } }

.velo { position:fixed; inset:0; background:rgba(15,46,77,.42); display:flex; align-items:center; justify-content:center; padding:20px; z-index:60; overflow:auto; }
.modale { background:var(--sup); border:1px solid var(--line); padding:22px 24px 24px; max-width:560px; width:100%; box-shadow:0 18px 50px rgba(15,46,77,.22); max-height:92vh; overflow-y:auto; }
.modale__t { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muto); padding-bottom:12px; border-bottom:1px solid var(--line); }
.modale__p { font-size:13px; color:var(--muto); line-height:1.6; margin:14px 0 16px; }
.modale__az { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.modale__az--fine { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); justify-content:space-between; }
.bk { margin-top:16px; padding:14px; background:#F6F8FB; border:1px solid var(--line); }
.bk__t { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink2); }
.bk__p { font-size:12px; color:var(--muto); margin:6px 0 0; line-height:1.5; }
.bk__ta { margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muto); background:#fff; }
.bk__n { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muto); margin-top:7px; }
.cop { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.bk--nota { border-left:3px solid var(--verde); }
.allerta { position:sticky; top:0; z-index:55; }
.allerta__c { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; font-size:13px; line-height:1.5; }
.allerta--conflitto .allerta__c { background:#FDF4E6; border-bottom:1px solid #F2C078; }
.allerta--errore .allerta__c { background:#FBF0EE; border-bottom:1px solid #E2BCB6; }
/* Salvataggio sospeso: e' l'avviso piu' grave dei tre, perche' dice che
   il lavoro non viene registrato. Rosso pieno, non una sfumatura. */
.allerta--bloccato .allerta__c { background:#F8E3E0; border-bottom:2px solid #C0392B; color:#7B241C; }
.allerta--bloccato .allerta__c b { color:#922B21; }
.allerta--bloccato .allerta__c span { color:#7B241C; }
/* qualcun altro sta lavorando: informazione, non allarme — il tono è
   più tenue di quello del conflitto, che invece ha già fermato un
   salvataggio */
.allerta--altri .allerta__c { background:#EDF3F9; border-bottom:1px solid #C3D6E8; }
.allerta--novita .allerta__c { background:#EDF3FA; border-bottom:1px solid #B9CFE6; }
.tira { position:fixed; top:0; left:0; right:0; z-index:95; display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(#EDF3FA, rgba(237,243,250,0)); pointer-events:none; }
.tira__s { font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--muto); padding-bottom:8px; }
.tira__s.is-on { color:var(--ink2); font-weight:600; }
/* Aggiorna era fisso in alto a destra, sopra la barra ma fuori dal suo
   flusso: da qui il vuoto fra l'ultimo pulsante e il bordo. Adesso e' un
   pulsante come gli altri e la barra si distribuisce da sola. */
.agg { display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px;
  background:rgba(143,182,222,.12); border:1px solid #215389; border-radius:9px;
  color:#C3D3E4; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s; }
.agg svg { width:14px; height:14px; }
.agg:hover { background:rgba(143,182,222,.2); border-color:#4C8AC6; color:#fff; }
.agg:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.cima--verde .agg { border-color:#1A6A62; color:#A8CFC8; background:rgba(63,168,148,.12); }
.cima--verde .agg:hover { border-color:#3FA894; color:#fff; }
.cima--ambra .agg { border-color:#7A5A1E; color:#E0C79A; background:rgba(201,168,94,.12); }
.agg:hover { border-color:var(--ink2); }
.agg:active { transform:scale(.96); }
.agg svg { width:16px; height:16px; flex:0 0 16px; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.agg:active svg { transform:rotate(-180deg); }
.agg--gira svg { animation:aggGira 1s linear infinite; }
@keyframes aggGira { to { transform:rotate(360deg); } }
.agg__p { position:absolute; top:5px; right:6px; width:9px; height:9px; border-radius:50%;
  background:var(--ocra); border:2px solid #fff; }
@media (max-width:760px) {
  .agg { top:auto; bottom:74px; right:12px; padding:0; width:46px; height:46px; justify-content:center;
    box-shadow:0 3px 14px rgba(16,42,70,.18); }
  .agg__t { display:none; }
  .agg svg { width:19px; height:19px; flex:0 0 19px; }
}
@media (prefers-reduced-motion: reduce) { .agg svg, .agg--gira svg { animation:none !important; transition:none !important; } }
.allerta__c b { flex:0 0 auto; }
.allerta__c span { flex:1; min-width:200px; color:var(--muto); }
.allerta__c .btn { flex:0 0 auto; }
.salv--conflitto { color:#F2C078; }
.bk__file { position:relative; overflow:hidden; cursor:pointer; }
.bk__file input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 20px; font-size:13px; z-index:70; }

@media (prefers-reduced-motion: reduce) { .app * { transition-duration:.01ms !important; } }
@media (max-width:1080px) {
  .editor { grid-template-columns:minmax(0, 1fr); } .riepilogo { position:static; }
  .due-col { grid-template-columns:minmax(0, 1fr); }
  .griglia-kpi, .griglia-kpi--3 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .fr { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ob { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
/* ---------- telefono: barra in basso, liste a schede ---------- */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; background:var(--ink);
  border-top:1px solid #1E4670; padding-bottom:env(safe-area-inset-bottom, 0px); }
.tb { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px 8px;
  background:none; border:0; color:#7E96B2; font:inherit; font-size:11.5px; cursor:pointer; }
.tb svg { width:21px; height:21px; }
.tb.is-on { color:#fff; }
.tb.is-on svg { color:#7FB2E4; }

.lst { display:flex; flex-direction:column; gap:8px; }
.lc { display:flex; flex-direction:column; gap:5px; padding:13px 14px; background:var(--sup); border:1px solid var(--line);
  text-align:left; font:inherit; cursor:pointer; }
.lc:active { background:#F6F8FB; }
.lc__r1 { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.lc__tot { font-size:17px; font-weight:600; letter-spacing:-0.03em; }
.lc__r2 { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; }
.lc__r2 strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc__d { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muto); flex:0 0 auto; }
.lc__r3 { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2px; }
.lc__res { font-size:11.5px; color:var(--muto); }
.lst__tot { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 14px; background:#EEF3F9; border:1px solid var(--line); font-size:12.5px; color:var(--muto); }
.lst__tot b { font-size:17px; color:var(--nero); }
.lst__res { margin-left:auto; }

@media (max-width:760px) {
  /* ─── impianto ─── */
  .app { flex-direction:column; }
  .side { width:100%; flex:none; height:auto; position:static; padding:12px 0 0; }
  .side__brand { padding:0 16px 10px; }
  .side__nav, .side__salv, .side__pie, .side__bk, .side__ul { display:none; }
  .side__esci { display:none; }
  .side__esci--u { display:inline; }
  .side__utente { margin-top:0; padding:0 16px 11px; border-top:0; }
  .side__chi { flex-direction:row; align-items:baseline; gap:8px; }
  .side__chi span { font-size:11px; }
  .main { padding-bottom:74px; }
  /* La barra in basso e' fissa e alta una cinquantina di pixel: con soli
     20px di margine, l'ultima parte della pagina — di solito i pulsanti —
     finisce sotto la barra e sembra che non ci sia modo di scorrere oltre.
     Lo spazio in fondo c'era solo da 761px in su, cioe' su desktop, dove
     il problema non si pone nemmeno. */
  .wrap { padding:16px 13px calc(96px + env(safe-area-inset-bottom, 0px)); max-width:none; }
  h1 { font-size:22px; letter-spacing:-0.025em; }
  h2 { font-size:11.5px; }

  /* ─── intestazioni ─── */
  .testa { margin-bottom:14px; gap:10px; align-items:stretch; flex-direction:column; }
  .testa__dx { align-items:flex-start; text-align:left; }
  .testa__az { width:100%; display:flex; gap:6px; flex-wrap:wrap; }
  .testa__az .btn { flex:1 1 auto; text-align:center; }
  .cerca { max-width:none; width:100%; }
  .occhiello { font-size:11.5px; }

  /* ─── schede ─── */
  .card { padding:13px 12px 15px; margin-bottom:12px; }
  .card__testa { flex-wrap:wrap; gap:6px; padding-bottom:10px; margin-bottom:11px; }
  .legenda { font-size:11.5px; }

  /* ─── tabelle: la scheda scorre, la tabella resta una tabella ───
     (display:block sulla table rompeva l'allineamento delle colonne) */
  .card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab { min-width:520px; }
  .tab--voci, .tab--edit { min-width:440px; }
  .tab th { font-size:11.5px; padding:0 7px 7px; }
  .tab td { padding:9px 7px; font-size:12.5px; }
  .sotto { font-size:11.5px; }

  /* ─── numeri in griglia ─── */
  .griglia-kpi, .griglia-kpi--2, .griglia-kpi--3 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .kpi { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 12px 13px; }
  .kpi:nth-child(2n) { border-right:0; }
  .kpi:nth-last-child(-n+2) { border-bottom:0; }
  .kpi__val { font-size:19px; margin:5px 0 2px; }
  .kpi__label { font-size:11.5px; }
  .kpi__sotto { font-size:11.5px; }
  .msum { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:11px; }
  .msum b { font-size:19px; }
  .msum__l { font-size:11.5px; }
  .msum i { font-size:11.5px; }
  .ob { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:11px; }
  .ob b { font-size:19px; }
  .ric-cifre { gap:16px 22px; }
  .ric-cifre .mono { font-size:16px; }
  .ric-cifre__l { font-size:11.5px; }

  /* ─── moduli ─── */
  .campi, .campi--2, .campi--stretti { grid-template-columns:minmax(0, 1fr); gap:11px; }
  .campo--largo { grid-column:span 1; }
  .app input, .app select, .app textarea { font-size:16px; padding:9px 10px; }  /* 16px evita lo zoom su iOS */
  .campo > span { font-size:11.5px; }
  .fr { grid-template-columns:minmax(0, 1fr); gap:10px; padding:14px 0; border-bottom:1px solid #E1E6ED; }
  .fr__fine { padding-bottom:0; }
  .fr__imp2 { flex-direction:row; align-items:baseline; gap:8px; padding-bottom:0; }
  .editor { gap:12px; }
  .riepilogo { padding:15px; }
  .conto--tot dd { font-size:17px; }
  .agg-riga { padding:13px; font-size:14px; }
  .sconto__c { flex-direction:column; align-items:stretch; gap:9px; }
  .sconto__f { justify-content:space-between; }
  .sconto__i { width:120px; }

  /* ─── grafici ─── */
  .cia { flex-direction:column; gap:14px; }
  .cia__leg { min-width:0; width:100%; }
  .cia__leg li { padding:7px 0; }
  .cia-due { flex-direction:column; gap:16px; }
  .cia-due .cia { min-width:0; }
  .cv__v { font-size:21px; }
  .mstrip { gap:7px; margin:0 -13px; padding:2px 13px 10px; }
  .ms { flex-basis:132px; padding:11px 12px 12px; }
  .ms__v { font-size:18px; }
  .mesi { height:150px; gap:3px; }

  /* ─── pagamenti agenti ─── */
  .liq { padding:12px 12px 14px; margin-left:-12px; margin-right:-12px; border-left:0; border-right:0; }
  .liq__t { flex-direction:column; align-items:flex-start; gap:3px; }
  .liq__r { gap:14px; font-size:12px; }
  .liq__r b { font-size:14px; }
  .liq__az .btn { flex:1 1 auto; }
  .vr { grid-template-columns:minmax(0, 1fr) auto; gap:8px 10px; padding:11px 0; }
  .vr__i { grid-column:1 / -1; width:100%; }
  .vr__a { grid-column:1 / -1; }
  .rimborso__riga { font-size:12.5px; }
  .rimborso__riga--t .mono { font-size:17px; }

  /* ─── finestre ─── */
  .modale { padding:16px 14px 18px; max-height:90vh; border-radius:0; }
  .velo { padding:10px; align-items:flex-start; }
  .modale__az .btn { flex:1 1 auto; }
  .bk { padding:12px; }

  /* ─── varie ─── */
  .due-col { gap:12px; }
  .filtri { width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .filtro { white-space:nowrap; flex:0 0 auto; }
  .allerta__c { padding:10px 13px; gap:8px; font-size:12.5px; }
  .allerta__c b, .allerta__c span { flex:1 1 100%; }
  .allerta__c .btn { width:100%; }
  .foglio__az { position:sticky; top:0; z-index:2; }
  .st { padding:18px 14px; }
  .st__testa { flex-direction:column; gap:10px; }
  .st__testa .dx { text-align:left; }
  .toast { left:13px; right:13px; bottom:80px; transform:none; text-align:center; }
}

@media (max-width:400px) {
  .griglia-kpi, .griglia-kpi--2, .griglia-kpi--3, .msum, .ob { grid-template-columns:minmax(0, 1fr); }
  .kpi { border-right:0; }
  .ms { flex-basis:122px; }
  .tb span { font-size:9px; }
}

/* ─── stato di invio al cliente ─── */
.invio { border:1px solid #E6D2A6; background:#FDF9F0; border-left:3px solid #E0A81C; padding:12px 16px; margin-bottom:18px; }
.invio--si { border-color:#B2D5C6; background:#F0F7F4; border-left-color:var(--verde); }
.invio__c { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.invio__s { display:flex; flex-direction:column; gap:2px; }
.invio__s b { font-size:14px; }
.invio__s i { font-style:normal; font-size:12.5px; color:var(--muto); }
.ni-b { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:0.08em; color:#8A5A12; border:1px solid #E6D2A6; background:#FDF4E6; padding:1px 5px; margin-left:5px; }
@media (max-width:760px) {
  .invio { margin-left:-13px; margin-right:-13px; }
  .invio__c { flex-direction:column; align-items:stretch; }
  .invio__c .btn { width:100%; }
}

/* ─── numero di versione ─── */
.side__ver { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#4C6B8C; letter-spacing:0.04em; }
.hub__v { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink2); font-weight:600; margin-left:6px; }
.gate__v { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A94A2; margin-left:5px; }

/* ── avanzamento verso l'obiettivo ────────────────────────────── */
.prog--alta { height:22px; position:relative; }
.prog--alta .prog__fill { height:100%; }
.prog__q { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; color:var(--nero); }
.prog--mini { height:4px; margin-top:9px; }

/* ═══ barra di navigazione in alto ═══════════════════════════════
   Sostituisce la colonna laterale dalla 2.8: su schermo largo il
   menu sta in alto e la pagina prende tutta la larghezza, sul
   telefono resta la barra in basso (.tabbar). */
.cima { position:sticky; top:0; z-index:40; display:flex; align-items:stretch; gap:20px;
  background:var(--ink); color:#C3D3E4; border-bottom:1px solid #1E4670; padding:0 20px; min-height:56px; }
.cima__brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; padding:8px 0; }
.cima__mark { width:28px; height:28px; flex:0 0 28px; object-fit:contain; }
.cima__nome { display:flex; flex-direction:column; line-height:1.1; }
.cima__nome b { font-size:9.5px; font-weight:600; letter-spacing:0.12em; color:#8FA6BE; }
.cima__nome i { font-style:normal; font-size:15px; font-weight:700; letter-spacing:0.02em; color:#fff;
  display:flex; align-items:baseline; gap:8px; }
.cima__nome em { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  font-weight:400; letter-spacing:0.04em; color:#4C6B8C; }

.cima__nav { display:flex; align-items:stretch; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; }
.cima__nav::-webkit-scrollbar { height:0; }
.cima__link { background:none; border:0; border-bottom:2px solid transparent; padding:0 13px;
  color:#8FA6BE; font:inherit; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.cima__link:hover { color:#fff; }
.cima__link.is-on { color:#fff; border-bottom-color:#4C8AC6; font-weight:500; }
.cima__link:focus-visible { outline:2px solid #4C8AC6; outline-offset:-3px; }

.cima__dx { display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.cima__bk { background:#2A1A12; border:1px solid #6A4A2A; color:#F2C078; font:inherit; font-size:11px;
  padding:5px 10px; cursor:pointer; white-space:nowrap; }
.cima__bk:hover { background:#3A2416; }
.cima__stato { display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.2; }
.cima__mod { font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:300; color:#5C7793;
  max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cima__chi { display:flex; flex-direction:column; line-height:1.15; padding-left:15px; border-left:1px solid #1E4670; }
.cima__chi b { font-size:12.5px; font-weight:600; color:#EAF1F8; }
.cima__chi span { font-size:10px; color:#5C7793; }
.cima__az { display:flex; gap:5px; }
.cima__esci { background:none; border:1px solid #215389; color:#8FA6BE; font:inherit; font-size:11px;
  padding:5px 9px; cursor:pointer; }
.cima__esci:hover { color:#fff; border-color:#4C8AC6; }
.cima__esci:focus-visible { outline:2px solid #4C8AC6; outline-offset:1px; }

.main { flex:1 1 auto; min-width:0; }

@media (max-width:1080px) {
  .cima { gap:12px; padding:0 14px; }
  .cima__link { padding:0 9px; font-size:13px; }
  .cima__mod { max-width:130px; }
}
@media (max-width:760px) {
  /* sul telefono la navigazione e' la barra in basso: qui resta l'identita' e lo stato */
  .cima { flex-wrap:wrap; gap:10px; padding:0 14px; min-height:0; position:static; }
  .cima__nav { display:none; }
  .cima__brand { padding:10px 0 0; }
  .cima__dx { flex:1 1 auto; justify-content:flex-end; gap:10px; padding:0 0 10px; }
  .cima__chi { padding-left:10px; }
  .cima__chi span { display:none; }
  .cima__mod { max-width:120px; }
  .cima__esci--aree { display:none; }
}
@media print { .cima { display:none; } }

/* ═══ schermata di scelta area ═══════════════════════════════════
   E' la soglia, non l'app: qui gli angoli sono morbidi e la
   profondita' viene dall'ombra. Dentro, il gestionale resta
   squadrato com'e' sempre stato. La differenza e' voluta: si
   capisce di essere passati da una stanza all'altra. */
/* ── L'INTESTAZIONE ────────────────────────────────────────────────
   Marco: "il logo mi sembra un po' decontestualizzato".
   Aveva ragione: era grande come un manifesto (230px) e appoggiato
   sopra le carte senza niente che lo legasse a loro — sembrava
   un'immagine incollata sulla pagina, non l'inizio della pagina.
   Adesso e' una riga di intestazione: marchio a sinistra, piu' piccolo
   e allineato al bordo delle carte, saluto a destra, e un filo sotto
   che chiude la riga e apre la griglia. La stessa grammatica della
   barra in alto del gestionale, cosi' la soglia e l'interno si
   assomigliano. ── */
.hub__t { display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid rgba(15,46,77,.10); }
/* ── LO SLOGAN, ACCANTO AL MARCHIO ────────────────────────────────
   "Quello che non e' nel gestionale non esiste." Non e' un avviso e non
   e' un errore: e' il patto dell'agenzia, e un patto si dichiara invece
   di spiegarlo. Sta dove sta una firma — di fianco al logo, diviso da
   una riga sottile, nella misura di una didascalia — non nella misura
   di un titolo: se gridasse diventerebbe un cartello, e i cartelli si
   smette di vederli dopo tre giorni. ── */
.hub__marchio { display:flex; align-items:center; gap:16px; min-width:0; }
/* Su desktop lo slogan sta su UNA riga. Marco, 23/09/2026: "lo slogan
   mettiamolo tutto in orizzontale e non su due righe su desktop".
   Spezzato in due righe sembrava un paragrafo cominciato e non finito;
   in una riga sola e' una firma, che e' quello che deve essere. */
/* In corsivo, e di una misura sopra. Marco, 23/09/2026: "slogan in
   corsivo e forse un po' piu' grande". Il corsivo e' la forma delle
   citazioni e dei motti: dice da solo che quella riga non e' una
   didascalia del logo ma una frase dell'agenzia. */
.hub__slogan { padding-left:16px; border-left:1px solid rgba(15,46,77,.16);
  font-size:14.5px; line-height:1.4; font-weight:500; font-style:italic;
  letter-spacing:-.005em; color:var(--ink2); white-space:nowrap; }
.hub__ciao { margin:0; font-size:19px; font-weight:600; letter-spacing:-0.02em; color:var(--nero);
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.hub__ciao span { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:400;
  letter-spacing:0.02em; color:var(--muto); text-transform:lowercase; }

/* la porta aperta */
.porta { position:relative; overflow:hidden; display:grid; gap:0; width:100%; text-align:left;
  padding:30px 32px 26px; border:0; border-radius:20px; cursor:pointer; font:inherit; color:#EAF1F8;
  background:linear-gradient(158deg, #164070 0%, #10314F 52%, #0B2440 100%);
  box-shadow:0 1px 2px rgba(11,36,64,.20), 0 20px 44px -14px rgba(11,36,64,.45);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1);
  animation:sali .55s cubic-bezier(.2,.7,.2,1) both; }
.porta:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(11,36,64,.22), 0 30px 60px -16px rgba(11,36,64,.52); }
.porta:active { transform:translateY(-1px); }
.porta:focus-visible { outline:3px solid #7FB2E4; outline-offset:3px; }

/* il marchio dell'agenzia che sborda dal bordo: stesso gesto della schermata di accesso */
.porta__filigrana { position:absolute; right:-56px; top:50%; transform:translateY(-50%);
  width:340px; height:auto; opacity:.055; filter:brightness(0) invert(1); pointer-events:none; }

.porta__eti { display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:0.13em; color:#8FB6DE; margin-bottom:12px; }
.porta__eti i { width:6px; height:6px; border-radius:50%; background:#4ED8A0;
  box-shadow:0 0 0 3px rgba(78,216,160,.18); }
.porta__nome { font-size:34px; font-weight:700; letter-spacing:-0.035em; color:#fff; line-height:1; }
.porta__d { font-size:13.5px; color:#9FBBD8; line-height:1.55; margin-top:9px; max-width:44ch; }

/* ── TRE CIFRE IN FILA, SEMPRE SULLA STESSA RIGA ──────────────────
   Marco, 22/09/2026: "tutti i moduli delle aree devono essere larghi e
   alti uguali; se non ci stanno le informazioni in anteprima ne
   mettiamo meno; tutto proporzionato e in ordine".
   Il numero delle cifre e' fissato a tre nel codice; qui si garantisce
   che stiano in riga anche quando un'etichetta e' lunga: le tre colonne
   si dividono lo spazio in parti uguali e l'etichetta va a capo dentro
   la sua colonna invece di spingere la terza sotto. ── */
.porta__dati { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:14px; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(143,182,222,.20); }
.porta__dati > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.porta__dati b { font-size:23px; font-weight:600; letter-spacing:-0.03em; color:#fff; }
.porta__dati b.sc { color:#F2A9A0; }
.porta__dati i { font-style:normal; font-size:11px; color:#87A6C6; }

.porta__vai { display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:13.5px; font-weight:600; color:#9CC8F2; }
.porta__vai svg { width:17px; height:17px; transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.porta:hover .porta__vai svg { transform:translateX(5px); }

/* LE AREE DA COSTRUIRE NON HANNO PIU' UN BLOCCO LORO.
   Marco, 23/09/2026: "le metterei comunque allineate a tutto il resto,
   ma grigie e non selezionabili". Stavano in una griglia separata con
   carte di un'altra misura — proprio l'effetto scala che quel blocco
   voleva evitare. Adesso sono .porta--cantiere, nella griglia di tutti.
   Vecchio commento, tenuto perche' spiega perche' erano separate:
   con una riga che dice cosa sono. Senza, si leggeva come una coda
   irregolare delle altre. */

.hub__p { border-top-color:rgba(15,46,77,.10); }

@keyframes sali { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

@media (max-width:760px) {
  /* Su telefono comanda l'altezza: il marchio si stringe, i margini
     si accorciano e le tre cifre vanno su colonne uguali invece che
     spaziate dal loro contenuto. */
  .hub { padding:18px 15px max(18px, env(safe-area-inset-bottom, 0px)); align-items:flex-start; }
  .hub__t { align-items:flex-start; flex-direction:column; gap:7px; margin-bottom:14px; }
  /* sul telefono il marchio e lo slogan si impilano: affiancati, lo
     slogan resterebbe una colonna di due parole per riga */
  .hub__marchio { flex-direction:column; align-items:flex-start; gap:8px; }
  /* sul telefono una riga sola non ci sta: 42 caratteri a 12.5px sono
     circa 250px e lo schermo stretto ne ha 360 meno i margini, ma con
     il logo accanto no. Si impila e si lascia andare a capo. */
  .hub__slogan { padding:0; border-left:0; white-space:normal; font-size:13.5px; max-width:34ch; }
  .hub__logo { width:min(160px, 42vw); }
  .hub__ciao { align-items:flex-start; font-size:17px; }
  .porta { padding:20px 18px 18px; border-radius:16px; }
  .porta__eti { margin-bottom:9px; }
  .porta__nome { font-size:25px; }
  .porta__d { font-size:12.5px; margin-top:7px; }
  .porta__dati { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:16px; padding-top:13px; }
  .porta__dati b { font-size:20px; }
  .porta__dati i { font-size:10.5px; line-height:1.25; }
  .porta__vai { margin-top:16px; }
  .porta__filigrana { width:210px; right:-66px; opacity:.05; }
  /* la versione non deve andare a capo da sola */
  .hub__p { margin-top:16px; padding-top:13px; gap:10px; font-size:11.5px; line-height:1.45; }
  /* Su telefono il gruppo prende tutta la riga e si divide in tre parti
     uguali: restano insieme, e ognuno resta abbastanza largo da premere. */
  .hub__tasti { width:100%; margin-left:0; }
  .hub__tasti > .btn { flex:1 1 0; min-width:0; justify-content:center; padding:11px 8px; }
  .hub__v { display:inline-block; white-space:nowrap; }
}
@media (max-width:380px) {
  .porta__nome { font-size:22px; }
  .porta__dati b { font-size:17px; }
  .porta__dati i { font-size:9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .porta, .cantiere { animation:none; }
  .porta:hover { transform:none; }
  .porta:hover .porta__vai svg { transform:none; }
}

/* ═══ regole recuperate ══════════════════════════════════════════
   Queste mancavano: alcune non erano mai state scritte, altre le
   avevo perse in un append andato a vuoto. Senza, gli elementi
   cadevano sullo stile predefinito del browser. */

/* selettore di periodo: traccia incassata, linguetta attiva in rilievo */
.filtri { display:inline-flex; align-items:center; gap:2px; padding:3px; background:#E6EBF2;
  border-radius:10px; border:1px solid rgba(15,46,77,.07); }
.filtro { border:0; background:none; padding:6px 15px; border-radius:7px; font:inherit; font-size:12.5px;
  color:var(--muto); cursor:pointer; white-space:nowrap;
  transition:color .18s ease, background .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; }
.filtro:hover:not(.is-on) { color:var(--nero); }
.filtro.is-on { background:var(--sup); color:var(--nero); font-weight:600;
  box-shadow:0 1px 2px rgba(15,46,77,.13), 0 2px 6px -2px rgba(15,46,77,.10); }
.filtro:focus-visible { outline:2px solid #4C8AC6; outline-offset:1px; }
/* CON SEI LINGUETTE NON CI SI STA PIU' IN UNA RIGA.
   La barra delle sezioni era una riga sola che non andava a capo:
   aggiungendo "Persone e accessi" usciva dallo schermo su tablet e
   trascinava fuori tutta la pagina. Va a capo, e ogni linguetta resta
   intera. */
.filtri--min { flex-wrap:wrap; max-width:100%; }
.filtri--min .filtro { padding:5px 13px; font-size:12px; white-space:nowrap; }

/* le quattro cifre sotto la curva: schede vere, e quelle cliccabili si sollevano */
.msum > div, .msum__b { display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  text-align:left; padding:11px 13px; background:#F8FAFC; border:1px solid var(--line);
  border-radius:10px; font:inherit; color:inherit; }

.msum__b:hover:not(:disabled) { background:var(--sup); border-color:#B4C7DB; transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(15,46,77,.20); }
.msum__b:active:not(:disabled) { transform:none; }
.msum__b:disabled { cursor:default; opacity:.6; }
.msum__b:focus-visible { outline:2px solid #4C8AC6; outline-offset:1px; }
.msum__b .msum__l::after { content:" \203A"; color:#9BB0C6; font-size:12px; }

/* dettaglio di una cifra della dashboard */
.modale--largo { max-width:820px; }
.dv__cap { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:14px; }
.dv__cap b { font-size:27px; letter-spacing:-0.035em; }
.dv__cap span { font-size:12.5px; color:var(--muto); }

/* barrette di peso nella tabella delle medie */
.barra { height:6px; min-width:64px; background:#EAEFF5; border-radius:3px; overflow:hidden; }
.barra__fill { height:100%; background:var(--ink2); border-radius:3px; }
.barra__fill--med { background:#3E77B0; }
.barra__fill--ant { background:#D98324; }

.app .grande { font-size:16px; }
.app .spento { color:var(--muto); }

@media (max-width:760px) {
  .filtri { width:auto; overflow-x:auto; flex-wrap:nowrap; }
  .filtro { flex:0 0 auto; padding:5px 11px; }
  .msum > div, .msum__b { padding:9px 11px; border-radius:9px; }
}

/* titoletto delle due tabelle nella scheda del titolare */

/* etichette dell'asse destro del grafico: stesso colore della linea */
.cv__t--p { fill:#D98324; }

/* interruttore delle cifre nascoste */
.cima__occhio { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid #215389;
  color:#8FA6BE; font:inherit; font-size:11px; padding:5px 9px; cursor:pointer; }
.cima__occhio svg { width:15px; height:15px; }
.cima__occhio:hover { color:#fff; border-color:#4C8AC6; }
.cima__occhio.is-on { background:#3A2416; border-color:#6A4A2A; color:#F2C078; }
.cima__occhio:focus-visible { outline:2px solid #4C8AC6; outline-offset:1px; }
@media (max-width:1080px) { .cima__occhio span { display:none; } .cima__occhio { padding:5px 7px; } }

/* ── quadro di produzione: tre cifre e una barra a due segmenti ── */

/* ── schede di scelta agente ──────────────────────────────────────
   Stesso linguaggio della schermata di ingresso: angoli morbidi,
   profondita' dall'ombra, una gerarchia sola per scheda. */
.scheda-ag { display:flex; flex-direction:column; gap:0; align-items:stretch; text-align:left;
  padding:16px 17px 15px; background:var(--sup); border:1px solid var(--line); border-radius:14px;
  font:inherit; color:inherit; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1), border-color .18s; }
.scheda-ag:hover { transform:translateY(-2px); border-color:#B4C7DB;
  box-shadow:0 10px 26px -10px rgba(15,46,77,.26); }
.scheda-ag:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.scheda-ag.is-on { background:linear-gradient(158deg, #164070 0%, #10314F 60%, #0B2440 100%);
  border-color:transparent; color:#EAF1F8;
  box-shadow:0 1px 2px rgba(11,36,64,.18), 0 14px 30px -12px rgba(11,36,64,.42); }

.scheda-ag__t { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
.scheda-ag__n { font-size:15px; font-weight:650; letter-spacing:-0.01em; }
.scheda-ag__r { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--muto); }
.scheda-ag.is-on .scheda-ag__r { color:#7FA3C8; }
.scheda-ag__v { font-size:24px; font-weight:600; letter-spacing:-0.035em; line-height:1; }
.scheda-ag.is-on .scheda-ag__v { color:#fff; }
.scheda-ag__d { font-size:11px; color:var(--muto); margin-top:3px; }
.scheda-ag.is-on .scheda-ag__d { color:#9FBBD8; }
.scheda-ag__p { display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.scheda-ag__barra { display:block; height:4px; background:#E4EAF1; overflow:hidden; }
.scheda-ag.is-on .scheda-ag__barra { background:rgba(143,182,222,.22); }
.scheda-ag__barra i { display:block; height:100%; background:var(--verde);
  transition:width .35s cubic-bezier(.2,.7,.2,1); }
.scheda-ag.is-on .scheda-ag__barra i { background:#4ED8A0; }
.scheda-ag__q { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muto); }
.scheda-ag__q em { font-style:normal; letter-spacing:0.02em; }
.scheda-ag.is-on .scheda-ag__q { color:#9FBBD8; }
.scheda-ag__q--sola { padding-top:5px; }
@media (max-width:760px) { .scheda-ag { padding:13px 14px; border-radius:12px; } .scheda-ag__v { font-size:20px; } }
/* Le schede stanno su una riga sola finche' ci stanno davvero: erano
   fissate a tre per riga, cosi' il quarto agente andava a capo anche su
   uno schermo largo. Con auto-fit la riga si riempie da sola, e con
   quattro persone su desktop restano tutte in fila. */
.griglia-ag { display:grid; gap:11px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
/* Sotto i 900px due per riga: sotto i 200px di larghezza una scheda non
   si legge piu', e tre strette sono peggio di due leggibili. */
@media (max-width:900px) { .griglia-ag { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; } }
@media (max-width:520px) { .griglia-ag { grid-template-columns:minmax(0, 1fr); gap:9px; } }

/* ═══ riepilogo di produzione ════════════════════════════════════
   Stesso registro della soglia d'ingresso: una carta profonda che
   fa da ancora visiva, una cifra sola grande, e la ripartizione
   raccontata da una barra invece che da una griglia di linee. */
.prod { position:relative; overflow:hidden; border-radius:20px; padding:26px 28px 24px; margin-bottom:14px;
  color:#EAF1F8; background:linear-gradient(158deg, #164070 0%, #10314F 54%, #0B2440 100%);
  box-shadow:0 1px 2px rgba(11,36,64,.20), 0 18px 40px -16px rgba(11,36,64,.42); }
.prod__filigrana { position:absolute; right:-48px; top:50%; transform:translateY(-50%); width:300px;
  height:auto; opacity:.05; filter:brightness(0) invert(1); pointer-events:none; }
.prod__testa { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.prod__eti { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.14em; color:#8FB6DE; }
.prod__anno { font-size:11px; color:#5C7C9E; letter-spacing:0.06em; }

.prod__cifra { display:flex; flex-direction:column; gap:5px; margin-top:16px; }
/* stessa misura del fatturato in dashboard: una cifra grossa su fondo
   scuro si legge da lontano, e in ufficio passa gente */
.prod__cifra b { font-size:26px; font-weight:600; letter-spacing:-0.03em; line-height:1.1; color:#fff; }
.prod__cifra span { font-size:12.5px; color:#9FBBD8; }



/* ── classifiche: righe con barra, niente bordi di tabella ── */
.rank { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.rank__r { display:flex; align-items:flex-start; gap:12px; }
.rank__pos { flex:0 0 20px; font-size:11px; color:#A8B6C7; padding-top:2px; text-align:right; }
.rank__c { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.rank__t { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rank__n { font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.rank__v { font-size:14.5px; font-weight:600; letter-spacing:-0.02em; }
.rank__b { display:block; height:5px; background:#EDF1F6; border-radius:3px; overflow:hidden; }
.rank__b i { display:block; height:100%; border-radius:3px; background:var(--ink2);
  transition:width .4s cubic-bezier(.2,.7,.2,1); }
.rank__d { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muto); }
.rank__d em { font-style:normal; font-family:'IBM Plex Mono',monospace; }
.rank__r--no .rank__n { font-weight:400; color:var(--muto); }
.rank__r--no .rank__b i { background:#C3D0DE; }
.nota--largo { margin-top:2px; }

@media (max-width:760px) {
  .prod { padding:20px 18px 18px; border-radius:16px; }
  .prod__cifra b { font-size:31px; }
  .prod__gambe { gap:14px; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .prod__g--ob { padding-left:0; border-left:0; grid-column:1 / -1;
    padding-top:12px; border-top:1px solid rgba(143,182,222,.20); }
  .prod__filigrana { width:210px; right:-64px; }
}

/* ── i due flussi: chi apre e chi chiude, stessi colori ── */
.flusso { margin-top:22px; }
.flusso__t { display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:0.13em; color:#7FA3C8; margin-bottom:9px; }
.flusso__b { display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px;
  background:rgba(143,182,222,.13); }
.flusso__b i { display:block; height:100%; border-radius:2px;
  transition:width .5s cubic-bezier(.2,.7,.2,1), filter .18s; cursor:default; }
.flusso__b i:hover { filter:brightness(1.18); }
.flusso__b i:first-child { border-radius:7px 2px 2px 7px; }
.flusso__b i:last-child { border-radius:2px 7px 7px 2px; }
.flusso__no { background:repeating-linear-gradient(45deg, #44607E 0 4px, #35506C 4px 8px); }

.flusso__l { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:11px; }
/* Le voci erano pastiglie a contenuto libero: "Elisabetta 66,4%" e
   "Marco 26,9%" mettevano le due percentuali in punti diversi, e per
   confrontarle bisognava leggerle una per una invece di scorrere la
   colonna. Con una griglia a colonne fisse si incolonnano. */
.flusso__v { display:grid; grid-template-columns:9px minmax(0, 84px) 52px auto auto;
  align-items:baseline; gap:7px; }
.flusso__v i { width:9px; height:9px; border-radius:3px; flex:0 0 9px; align-self:center; }
.flusso__v--no i { background:#44607E; }
.flusso__v b { font-size:12.5px; font-weight:600; color:#EAF1F8; }
.flusso__v--no b { font-weight:400; color:#8FA6BE; }
.flusso__v em { font-style:normal; font-size:13px; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.flusso__v u { text-decoration:none; font-size:11px; color:#7794B4; }

.prod__ob { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:8px 12px;
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(143,182,222,.18); }
.prod__ob__t { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
  letter-spacing:0.13em; color:#7FA3C8; }
.prod__ob__b { grid-column:1 / -1; grid-row:2; display:block; height:6px; border-radius:3px;
  background:rgba(143,182,222,.16); overflow:hidden; }
.prod__ob__b i { display:block; height:100%; border-radius:3px; transition:width .5s cubic-bezier(.2,.7,.2,1); }
.prod__ob__v { font-size:15px; font-weight:600; color:#fff; justify-self:end; }
.prod__ob__n { grid-column:1 / -1; grid-row:3; font-size:11px; color:#7794B4; }

@media (max-width:760px) {
  .flusso { margin-top:18px; }
  .flusso__l { gap:5px 16px; }
  .flusso__v u { display:none; }
}
/* filo di colore in cima alla scheda: identifica la persona a colpo d'occhio */
.scheda-ag__filo { position:absolute; left:0; right:0; top:0; height:3px; }
.scheda-ag__pal { width:9px; height:9px; border-radius:3px; flex:0 0 9px; align-self:center; }
.scheda-ag__t { align-items:center; }
/* segnala che il conteggio degli affari e' dedotto e non certo */
.prod__stima { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9px;
  text-transform:uppercase; letter-spacing:0.1em; color:#F2C078; border:1px solid rgba(242,192,120,.4);
  padding:1px 5px; margin-left:8px; border-radius:3px; cursor:help; }
/* suggerimento sotto il campo del codice pratica */
/* I suggerimenti sotto il campo: erano un blocco senza larghezza
   propria, e una pastiglia dentro si allargava oltre la colonna della
   griglia. Qui il contenitore ha la larghezza del campo e quello che
   c'e' dentro va a capo invece di sbordare. */
.campo__sug { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;
  min-height:15px; margin-top:3px; width:100%; min-width:0; max-width:100%; }
.campo__sug > * { max-width:100%; min-width:0; }
/* Il pulsante di suggerimento: senza una larghezza propria si
   allargava oltre la colonna e finiva sopra il resto della pagina.
   Sta dentro il campo, e se il testo e' lungo va a capo. */
/* UN PULSANTE A BLOCCO IN UNA COLONNA STRETTA ESCE DAL RIQUADRO.
   width:100% si riferisce al contenitore, ma se un antenato non ha una
   larghezza propria il 100% diventa quello della pagina, e il pulsante
   finisce a tutta larghezza in fondo allo schermo. Ci ho provato tre
   volte con il foglio di stile: la regola che regge e' non lasciargli
   scegliere la larghezza. */
button.sug { display:inline-block; width:auto; max-width:100%; min-width:0;
  background:none; border:0; padding:0; margin:0; font:inherit; font-size:10.5px;
  color:#2E6DA8; cursor:pointer; text-align:left; text-decoration:underline;
  text-underline-offset:2px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:top; line-height:1.45; }
div.sug { display:block; max-width:100%; min-width:0; }
.sug:hover { color:var(--ink); }

/* ── affari da collegare ── */
.pratica { border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-top:10px; background:#FBFCFD; }
.pratica--dubbia { border-color:#E0B15F; background:#FFFCF5; }
.pratica__t { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pratica__i { font-size:13.5px; font-weight:600; }
.pratica__m { font-size:10.5px; color:var(--muto); }
.pratica__d { display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 10px; }
.pratica__f { font-size:11.5px; color:var(--muto); }
.pratica__f b { color:var(--nero); font-size:11.5px; }
.pratica__f em { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10px;
  background:#E7F0E9; color:#1B7A5A; padding:1px 5px; margin-left:5px; border-radius:3px; }
.pratica__avv { font-size:11.5px; line-height:1.5; color:#8A6417; margin:0 0 10px; }

/* ═══ elenco a righe ═════════════════════════════════════════════
   Sostituisce la tabella a nove colonne. Stessa densita' di
   informazione, ma la gerarchia la fa la tipografia e non i bordi:
   una fascia di colore a sinistra dice lo stato prima di leggere. */
.elenco { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.riga { position:relative; display:grid; align-items:center; gap:18px; width:100%; text-align:left;
  grid-template-columns:118px minmax(150px,1.5fr) minmax(96px,.7fr) 132px 138px 118px;
  padding:13px 16px 13px 21px; background:var(--sup); border:1px solid var(--line);
  border-radius:12px; font:inherit; color:inherit; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s; }
.riga::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:12px 0 0 12px; background:#C3D0DE; }
.riga:hover { transform:translateY(-1px); border-color:#B4C7DB; box-shadow:0 8px 22px -10px rgba(15,46,77,.26); }
.riga:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.riga--saldata::before  { background:var(--verde); }
.riga--parziale::before { background:#3E77B0; }
.riga--emessa::before   { background:#C3D0DE; }
.riga--scaduta::before  { background:var(--rosso); }
.riga--nota::before     { background:#8B6BB1; }

.riga > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.riga i { font-style:normal; font-size:11px; color:var(--muto); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.riga__id b { font-size:13px; letter-spacing:0.01em; }
.riga__chi b { font-size:14.5px; font-weight:600; letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.riga__cod { gap:5px; }
.riga__cod .codici { display:flex; flex-wrap:wrap; gap:3px; }
.riga__sol { gap:5px; }
.riga__barra { display:block; height:5px; background:#EAEFF5; border-radius:3px; overflow:hidden; }
.riga__barra i { display:block; height:100%; background:var(--verde); border-radius:3px;
  transition:width .35s cubic-bezier(.2,.7,.2,1); }
.riga--scaduta .riga__barra i { background:#D98324; }
.riga__eur { align-items:flex-end; text-align:right; }
.riga__eur b { font-size:16px; font-weight:600; letter-spacing:-0.025em; }
.riga__st { gap:4px; align-items:flex-start; }
.riga__az { position:absolute; right:14px; top:50%; transform:translateY(-50%);
  padding:5px 11px; border:1px solid var(--line); border-radius:7px; background:var(--sup);
  font-size:11px; color:var(--muto); opacity:0; transition:opacity .15s; }
.riga:hover .riga__az { opacity:1; }
.riga__az:hover { color:var(--nero); border-color:#B4C7DB; }

.elenco__pie { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 21px; margin-top:4px; border-top:2px solid var(--ink); font-size:12.5px; color:var(--muto); }
.elenco__p2 { display:flex; align-items:baseline; gap:12px; }
.elenco__p2 b { font-size:17px; font-weight:600; letter-spacing:-0.025em; color:var(--nero); }
.elenco__p2 i { font-style:normal; }

@media (max-width:1180px) {
  .riga { grid-template-columns:104px minmax(120px,1.4fr) 120px 130px; gap:14px; }
  .riga__cod, .riga__st { display:none; }
}

/* ── elenco clienti: stessa grammatica delle fatture ── */
.riga--k { grid-template-columns:42px minmax(150px,1.6fr) minmax(120px,1fr) minmax(120px,1fr) 74px 150px;
  padding-left:16px; }
.riga--k::before { background:transparent; }
.riga--k.riga--aperto::before { background:#D98324; }
.riga__av { display:flex !important; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:#EDF2F7; color:var(--ink2); font-size:12px; font-weight:600;
  letter-spacing:0.02em; flex:0 0 34px; }
.riga__av svg { width:17px; height:17px; }
.riga--aperto .riga__av { background:#FBEEDC; color:#8A5A1E; }
.riga__doc b { font-size:12px; font-weight:500; letter-spacing:0.01em; }
.riga__mail { justify-content:center; }
.riga__mail i { font-size:11.5px; }
.riga__n { align-items:center; text-align:center; }
.riga__n b { font-size:15px; font-weight:600; }
.riga__az--sempre { position:static; transform:none; opacity:1; cursor:pointer;
  font:inherit; font-size:11px; justify-self:end; }
@media (max-width:1180px) {
  .riga--k { grid-template-columns:42px minmax(130px,1.6fr) minmax(110px,1fr) 140px; }
  .riga__mail, .riga__n { display:none; }
}

/* avviso di indirizzo simile gia' in archivio */
.avviso-ind { grid-column:1 / -1; display:flex; flex-direction:column; gap:5px;
  padding:12px 14px; background:#FDF6E8; border:1px solid #E8D2A0; border-radius:10px; margin-top:-4px; }
.avviso-ind b { font-size:12.5px; font-weight:600; color:#7A5518; }
.avviso-ind span { font-size:11.5px; color:#8A6A32; }
.avviso-ind__l { display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.avviso-ind__b { display:inline-flex; align-items:baseline; gap:7px; padding:5px 10px;
  background:var(--sup); border:1px solid #E0CFA8; border-radius:7px; font:inherit; font-size:12px;
  color:var(--nero); cursor:pointer; }
.avviso-ind__b:hover { border-color:#C9A85E; }
.avviso-ind__b i { font-style:normal; font-size:10.5px; color:var(--muto); }

/* ═══ passata di rifinitura ══════════════════════════════════════
   La regola: le SUPERFICI restano squadrate, i CONTROLLI hanno il
   raggio. Serve a distinguere a colpo d'occhio cosa si puo' premere
   da cosa si legge e basta. */

.btn { border-radius:9px; transition:background .16s ease, border-color .16s ease,
  transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease; }
.btn--primo { box-shadow:0 1px 2px rgba(15,46,77,.16), 0 4px 12px -4px rgba(15,46,77,.30); }
.btn--primo:hover:not(:disabled) { transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,46,77,.18), 0 8px 20px -6px rgba(15,46,77,.36); }
.btn--primo:active:not(:disabled) { transform:none; box-shadow:0 1px 2px rgba(15,46,77,.20); }
.btn--fine:hover { background:#F7F9FC; }
.btn--mini { border-radius:7px; }
.btn:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }

/* intestazione di pagina: il titolo pesa, l'occhiello lo colloca */
.testa { align-items:flex-end; margin-bottom:22px; }
.testa h1 { letter-spacing:-0.035em; }
.occhiello { margin-bottom:3px; }

/* campo di ricerca con la lente dentro */
.cerca { max-width:270px; padding:9px 13px 9px 33px; border:1px solid var(--line); border-radius:9px;
  background:var(--sup) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7683' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat 10px center / 14px 14px;
  transition:border-color .16s, box-shadow .16s; }
.cerca:focus { outline:none; border-color:#7FB2E4; box-shadow:0 0 0 3px rgba(76,138,198,.16); }

/* le schede respirano di piu' e si staccano dal fondo */
.card { border-radius:14px; box-shadow:0 1px 2px rgba(15,46,77,.04); padding:19px 22px 21px; }
.card__testa h2 { letter-spacing:-0.015em; }

/* i campi dei moduli seguono i pulsanti */
.campo input, .campo select, .campo textarea { border-radius:8px; transition:border-color .16s, box-shadow .16s; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline:none; border-color:#7FB2E4; box-shadow:0 0 0 3px rgba(76,138,198,.16); }

/* ═══ scheda "da chi arriva il ricavo" ═══════════════════════════
   Al posto della ciambella: tre cifre che inquadrano, poi la
   classifica. Le barre si confrontano a occhio, la ciambella no. */
.kcard { background:var(--sup); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px 18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,46,77,.04); }
.kcard__t { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.kcard__e { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--muto); }
.kcard__n { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#A8B6C7; }
.kcard__k { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin:14px 0 4px;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.kcard__k > div { display:flex; flex-direction:column; gap:2px; }
.kcard__k b { font-size:24px; font-weight:600; letter-spacing:-0.035em; color:var(--nero); }
.kcard__k i { font-style:normal; font-size:11.5px; color:var(--muto); }

.kbar { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.kbar__r { display:flex; align-items:flex-start; gap:12px; }
.kbar__p { flex:0 0 18px; text-align:right; font-size:11px; color:#A8B6C7; padding-top:2px; }
.kbar__c { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.kbar__t { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.kbar__n { font-size:14px; font-weight:600; letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kbar__v { font-size:14px; font-weight:600; letter-spacing:-0.02em; }
.kbar__b { display:block; height:8px; background:#EDF1F6; border-radius:4px; overflow:hidden; }
.kbar__b i { display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, #1D5B8F 0%, #4C8AC6 100%);
  transition:width .45s cubic-bezier(.2,.7,.2,1); }
.kbar__d { display:flex; align-items:baseline; gap:10px; font-size:11px; color:var(--muto); }
.kbar__d em { font-style:normal; font-family:'IBM Plex Mono',monospace; margin-left:auto; }
.kbar__d em.rosso { margin-left:0; }
.kbar__r--coda .kbar__n { font-weight:400; color:var(--muto); }
.kbar__r--coda .kbar__b i { background:#C3D0DE; }
@media (max-width:640px) {
  .kcard { padding:16px 16px 14px; }
  .kcard__k { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .kcard__k b { font-size:20px; }
}

/* ── menu dei suggerimenti sotto il campo Immobile ── */
.campo--sug { position:relative; }
.sug { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:5px;
  background:var(--sup); border:1px solid var(--line); border-radius:11px; overflow:hidden;
  box-shadow:0 4px 10px -4px rgba(15,46,77,.14), 0 18px 40px -14px rgba(15,46,77,.30); }
.sug__g + .sug__g { border-top:1px solid var(--line); }
.sug__t { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:0.11em; color:var(--muto); padding:9px 13px 5px; }
.sug__v { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%;
  text-align:left; padding:8px 13px; background:none; border:0; font:inherit; font-size:13px;
  color:inherit; cursor:pointer; }
.sug__v:hover { background:#F2F6FA; }
.sug__v i { font-style:normal; font-size:10.5px; color:var(--muto); white-space:nowrap; }
.sug__err { grid-column:1 / -1; font-size:11px; color:#A8752A; margin-top:4px; }

/* ═══ pannello di apertura della dashboard ═══════════════════════
   La cifra che conta sta da sola, in grande, sul fondo profondo.
   Le tre voci di contorno e la barra dicono a che punto e' l'incasso
   senza costringere a leggere il grafico. */
/* UNA RIGA SOLA, NON UN MANIFESTO.
   Il riquadro occupava mezza schermata: occhiello, cifra enorme, tre
   voci sotto, barra, nota. Le stesse informazioni stanno su una riga:
   a sinistra il periodo e il totale, a destra le voci in fila, e sotto
   la barra dell'incasso. Resta scuro — e' il cappello della schermata e
   si deve distinguere dalle carte bianche — ma smette di gridare. */
.hero { position:relative; overflow:hidden; border-radius:16px; padding:18px 24px 16px; margin-bottom:14px;
  color:#EAF1F8; background:linear-gradient(158deg, #164070 0%, #10314F 54%, #0B2440 100%);
  box-shadow:0 1px 2px rgba(11,36,64,.20), 0 16px 36px -16px rgba(11,36,64,.40);
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:2px 28px; align-items:end; }
.hero__filigrana { position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:250px;
  height:auto; opacity:.05; filter:brightness(0) invert(1); pointer-events:none; }
.hero__t { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero__e { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.14em; color:#8FB6DE; }
.hero__d { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:20px;
  font-size:11.5px; font-weight:600; background:rgba(78,216,160,.14); color:#6EE0AE; }
.hero__d.giu { background:rgba(242,169,160,.14); color:#F2A9A0; }
.hero__d svg { width:13px; height:13px; }
.hero__d em { font-style:normal; font-weight:400; opacity:.7; }
/* IL FATTURATO NON E' UN CARTELLONE.
   Stava a 42px, bianco su blu scuro: si leggeva dall'altra parte della
   stanza, e in ufficio passa gente. Sceso a 26px resta la prima cosa
   che si vede — è comunque il numero più grande della schermata — ma
   bisogna guardarlo per leggerlo. Il tasto "Nascondi" continua a
   coprirlo del tutto quando serve. */
.hero__t { grid-column:1; grid-row:1; }
.hero__v { display:block; grid-column:1; grid-row:2; font-size:27px; font-weight:600;
  letter-spacing:-0.03em; line-height:1.15; color:#fff; margin-top:2px; }
.hero__k { grid-column:2; grid-row:1 / span 2; display:flex; gap:26px; flex-wrap:wrap;
  justify-content:flex-end; align-items:flex-end; margin:0; }
.hero__k span { display:flex; flex-direction:column; gap:1px; text-align:right; }
.hero__k i { font-style:normal; font-size:10.5px; color:#87A6C6; }
.hero__k b { font-size:15px; font-weight:600; letter-spacing:-0.02em; color:#fff; }
.hero__k b.amb { color:#F2C078; }
.hero__bar { display:block; grid-column:1 / -1; height:4px; border-radius:3px; margin-top:14px;
  overflow:hidden; background:rgba(143,182,222,.18); }
.hero__bar i { display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, #4ED8A0 0%, #7FE8C0 100%);
  transition:width .5s cubic-bezier(.2,.7,.2,1); }
.hero__n { display:block; grid-column:1 / -1; margin-top:6px; font-size:11px; color:#7794B4; }
@media (max-width:760px) {
  /* sul telefono la riga unica non ci sta: si torna in colonna */
  .hero { padding:16px 16px 14px; border-radius:15px; grid-template-columns:1fr; }
  .hero__v { font-size:22px; }
  .hero__k { grid-column:1; grid-row:auto; justify-content:flex-start; margin-top:14px; gap:20px; }
  .hero__k span { text-align:left; }
  .hero__k { gap:18px; margin-top:14px; }
  .hero__k b { font-size:15px; }
  .hero__filigrana { width:180px; right:-56px; }
}

/* il registro locazioni occupa tutto lo spazio sotto la barra */
.main--pieno { display:flex; flex-direction:column; min-height:0; }
.incasso { flex:1 1 auto; width:100%; min-height:calc(100vh - 56px); border:0; display:block; background:var(--paper); }
@media (max-width:760px) { .incasso { min-height:calc(100vh - 150px); } }

/* scorciatoia dentro il pannello di apertura */
.hero__x { background:rgba(143,182,222,.14); border:0; border-radius:20px; padding:4px 11px;
  font:inherit; font-size:11.5px; color:#9FBBD8; cursor:pointer; transition:background .16s, color .16s; }
.hero__x:hover { background:rgba(143,182,222,.24); color:#fff; }
.hero__x:focus-visible { outline:2px solid #7FB2E4; outline-offset:2px; }

/* ═══ passata finale: coerenza su tutte le schermate ═════════════
   Nessuna regola nuova per una singola pagina. Solo il sistema:
   scala tipografica, ritmo verticale, stati vuoti, movimento
   d'ingresso. E' quello che fa sembrare disegnate anche le
   schermate a cui non ho messo mano. */

/* titoli piu' larghi e piu' stretti di tracciatura: la gerarchia si
   legge dalla dimensione, non dal maiuscoletto */
.app h1 { font-size:34px; letter-spacing:-0.04em; line-height:1.05; }
.app h2 { font-size:14.5px; font-weight:650; letter-spacing:-0.012em; text-transform:none; }
.card__testa { border-bottom:0; padding-bottom:2px; margin-bottom:13px; align-items:baseline; }

/* le pastiglie di stato prendono il raggio come gli altri controlli */
.chip { border-radius:20px; padding:2.5px 9px; font-weight:500; }

/* le tabelle rimaste perdono i bordi e guadagnano respiro */
.tab th { padding:0 12px 10px; border-bottom:1px solid var(--line); font-size:9.5px; letter-spacing:0.11em; }
.tab td { padding:13px 12px; border-bottom:1px solid #EFF3F7; }
.tab tr:last-child td { border-bottom:0; }
.tab tr.tot td { border-top:2px solid var(--ink); border-bottom:0; padding-top:14px; font-weight:600; }

/* stati vuoti: non un paragrafo grigio in mezzo al nulla */
.vuoto-b { padding:56px 24px; border-radius:14px; }
.vuoto-b p { font-size:14.5px; line-height:1.65; color:var(--muto); max-width:420px; }
.vuoto { padding:26px 0; text-align:center; font-size:13.5px; }

/* movimento d'ingresso: le schede salgono in sequenza. Poco, ma da'
   l'impressione che la pagina si componga invece di comparire. */
@keyframes entra { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.wrap > .hero, .wrap > .card, .wrap > .kcard, .wrap > .prod, .wrap > .elenco,
.wrap > .due-col, .wrap > .griglia-ag, .wrap > section {
  animation:entra .42s cubic-bezier(.2,.7,.2,1) both; }
.wrap > *:nth-child(2) { animation-delay:.03s; }
.wrap > *:nth-child(3) { animation-delay:.06s; }
.wrap > *:nth-child(4) { animation-delay:.09s; }
.wrap > *:nth-child(n+5) { animation-delay:.12s; }
@media (prefers-reduced-motion: reduce) { .wrap > * { animation:none !important; } }

/* il fuoco si vede sempre, ovunque */
a:focus-visible, [role="button"]:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }

@media (max-width:760px) {
  .app h1 { font-size:25px; }
  .vuoto-b { padding:38px 18px; }
}

/* ═══ composizioni: quattro schede identiche, quindi allineate ═══
   La ciambella aveva due difetti: le fette piccole non si leggono e
   tre schede di contenuto diverso non si allineano mai. Una barra a
   segmenti risolve entrambi. */
.tre-col { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:18px; align-items:stretch; }
@media (min-width:1240px) { .tre-col { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:700px) { .tre-col { grid-template-columns:minmax(0, 1fr); } }

.comp { display:flex; flex-direction:column; background:var(--sup); border:1px solid var(--line);
  border-radius:14px; padding:17px 18px 15px; box-shadow:0 1px 2px rgba(15,46,77,.04);
  transition:border-color .18s, box-shadow .18s, transform .18s cubic-bezier(.2,.7,.2,1); }
.comp--apri { cursor:pointer; }
.comp--apri:hover { border-color:#B4C7DB; transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(15,46,77,.22); }
.comp--apri:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.comp__t { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.comp__t h2 { font-size:13px; font-weight:650; letter-spacing:-0.008em; }
.comp__lente { font-size:10.5px; color:var(--muto); opacity:0; transition:opacity .16s; white-space:nowrap; }
.comp--apri:hover .comp__lente, .comp--apri:focus-visible .comp__lente { opacity:1; color:#3E77B0; }
.comp__v { font-size:25px; font-weight:600; letter-spacing:-0.035em; margin-top:9px; }
.comp__s { font-size:11px; color:var(--muto); margin-top:1px; }

.comp__bar { display:flex; height:10px; border-radius:5px; overflow:hidden; margin-top:13px;
  background:#EDF1F6; gap:1.5px; }
.comp__bar i { display:block; height:100%; transition:width .45s cubic-bezier(.2,.7,.2,1); }
.comp__bar i:first-child { border-radius:5px 0 0 5px; }
.comp__bar i:last-child { border-radius:0 5px 5px 0; }

.comp__leg { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.comp__leg li { display:flex; align-items:baseline; gap:8px; font-size:12px; }
.comp__leg .pal { width:8px; height:8px; border-radius:2px; flex:0 0 8px; align-self:center; }
.comp__n { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nero); }
.comp__leg b { font-size:12.5px; font-weight:600; letter-spacing:-0.015em; }
.comp__leg em { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  color:var(--muto); min-width:42px; text-align:right; }
.comp .nota { margin:11px 0 0; font-size:10.5px; line-height:1.45; }

/* ═══ tinte per area ═════════════════════════════════════════════
   La fatturazione resta sul navy del marchio. Le locazioni prendono
   il verde petrolio, che era l'identita' originale di quel registro:
   entrando si vede subito di essere in un'altra stanza, senza dover
   leggere il titolo. Contrasto del bianco verificato: 10,1 sul tono
   chiaro e 17,1 sullo scuro. */
.porta--verde { background:linear-gradient(158deg, #0D4A46 0%, #093734 52%, #04201F 100%);
  box-shadow:0 1px 2px rgba(4,32,31,.22), 0 20px 44px -14px rgba(4,32,31,.48); }
.porta--verde:hover { box-shadow:0 2px 4px rgba(4,32,31,.24), 0 30px 60px -16px rgba(4,32,31,.54); }
.porta--verde .porta__eti { color:#7FCDC0; }
/* la lucina "area attiva" non prende mai la tinta dell'area: resta
   sempre verde, per la stessa regola con cui un semaforo resta verde
   qualunque sia il colore dell'auto. Vale la regola base qui sopra. */
.porta--verde .porta__d { color:#93BDB6; }
.porta--verde .porta__dati { border-top-color:rgba(127,205,192,.22); }
.porta--verde .porta__dati i { color:#7FA9A2; }
.porta--verde .porta__vai { color:#8FDCCB; }

.cima--verde { background:#0B403C; border-bottom-color:#12554E; }
.cima--verde .cima__nome b { color:#7FCDC0; }
.cima--verde .cima__nome em { color:#4C7F78; }
.cima--verde .cima__link { color:#8FBDB6; }
.cima--verde .cima__link.is-on { border-bottom-color:#3FA894; }
.cima--verde .cima__chi { border-left-color:#12554E; }
.cima--verde .cima__chi span { color:#5C8F88; }
.cima--verde .cima__mod { color:#5C8F88; }
.cima--verde .cima__esci { border-color:#1A6A62; color:#8FBDB6; }
.cima--verde .cima__esci:hover { border-color:#3FA894; color:#fff; }
.cima--verde .cima__occhio { border-color:#1A6A62; color:#8FBDB6; }
.cima--verde .cima__occhio:hover { border-color:#3FA894; color:#fff; }

/* GESTIONE CHIAMATE: la barra in alto cambiava per tutte le aree tranne
   questa, perche' avevo aggiunto la tinta senza completarne la tabella.
   Qui l'oro resta scuro: e' una barra, non un riquadro - il giallo
   pieno sta bene su una scheda in home, non su una fascia che ti sta
   sopra tutto il giorno. */
.cima--oro { background:#4A3A05; border-bottom-color:#63500A; }
.cima--oro .cima__nome b { color:#F2CE62; }
.cima--oro .cima__nome em { color:#8A7526; }
.cima--oro .cima__link { color:#CDB86F; }
.cima--oro .cima__link.is-on { border-bottom-color:#E2C562; }
.cima--oro .cima__chi { border-left-color:#63500A; }
.cima--oro .cima__chi span { color:#9C8734; }
.cima--oro .cima__mod { color:#9C8734; }
.cima--oro .cima__esci { border-color:#7A6320; color:#CDB86F; }
.cima--oro .cima__esci:hover { border-color:#E2C562; color:#fff; }
.cima--oro .cima__occhio { border-color:#7A6320; color:#CDB86F; }
.cima--oro .cima__occhio:hover { border-color:#E2C562; color:#fff; }

/* ── il registro locazioni si stacca dalla barra ──────────────────
   Fascia chiara attorno alla pagina incastonata: senza, il verde
   scuro della barra e il contenuto si fondono in un blocco unico. */
.incasso__c { flex:1 1 auto; display:flex; padding:14px 16px 0;
  background:linear-gradient(#DCE9E6 0%, #EEF4F3 22px, #EEF4F3 100%); min-height:0; }
.incasso { flex:1 1 auto; width:100%; min-height:calc(100vh - 84px); border:0; display:block;
  background:#F2F6F5; border-radius:14px 14px 0 0;
  box-shadow:0 -1px 0 rgba(9,55,52,.06), 0 -8px 22px -12px rgba(9,55,52,.22); }
@media (max-width:760px) {
  .incasso__c { padding:9px 9px 0; }
  .incasso { min-height:calc(100vh - 168px); border-radius:11px 11px 0 0; }
}

/* la cifra doppia "acquisiti / chiusi" */
.msum__b2 { font-weight:400; color:var(--muto); }

/* scelta della misura sulle barre del flusso */
.flusso__sw { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:16px 0 4px; }
.flusso__sw > span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.11em; color:#8FB6DE; }
.prod .flusso__sw .filtri { background:rgba(143,182,222,.14); border-color:rgba(143,182,222,.18); }
.prod .flusso__sw .filtro { color:#9FBBD8; }
.prod .flusso__sw .filtro:hover:not(.is-on) { color:#fff; }
.prod .flusso__sw .filtro.is-on { background:rgba(255,255,255,.92); color:var(--ink); }
/* la misura non scelta resta scritta accanto, in tono minore */
.flusso__v s { text-decoration:none; font-size:10px; color:#7794B4; margin-left:6px; }

/* selettore di periodo dentro il quadro di produzione */
.prod__per { flex:0 0 auto; }
.prod .prod__per { background:rgba(143,182,222,.14); border-color:rgba(143,182,222,.18); }
.prod .prod__per .filtro { color:#9FBBD8; padding:4px 11px; font-size:11.5px; }
.prod .prod__per .filtro:hover:not(.is-on) { color:#fff; }
.prod .prod__per .filtro.is-on { background:rgba(255,255,255,.92); color:var(--ink); }
.prod__testa { align-items:center; }
@media (max-width:700px) { .prod__per .filtro { padding:4px 8px; font-size:11px; } }

/* ── traguardi intermedi dell'obiettivo ──────────────────────────
   Un traguardo annuale visto a gennaio non muove nessuno. Quattro
   tappe danno quattro occasioni di premio e rendono visibile il passo. */
.prog--alta { position:relative; overflow:hidden; }
.prog__tap { position:absolute; top:0; bottom:0; width:2px; background:rgba(15,46,77,.16);
  transform:translateX(-1px); }
.prog__tap.is-on { background:rgba(255,255,255,.55); }
.tappe { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:10px 0 2px; }
.tappa { display:flex; flex-direction:column; gap:1px; padding:9px 11px; border-radius:10px;
  background:#F5F8FB; border:1px solid var(--line); transition:background .2s, border-color .2s; }
.tappa b { font-size:13px; font-weight:600; letter-spacing:-0.02em; color:var(--muto); }
.tappa i { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muto); }
.tappa em { font-style:normal; font-size:10.5px; margin-top:2px; color:var(--muto); }
.tappa.is-on { background:#E7F3EE; border-color:#B9DECD; }
.tappa.is-on b { color:var(--verde); }
.tappa.is-on em { color:var(--verde); }
.tappa.is-next { border-color:#4C8AC6; background:var(--sup);
  box-shadow:0 0 0 3px rgba(76,138,198,.12); }
.tappa.is-next b { color:var(--ink); }
.tappa.is-next em { color:#3E77B0; }
@media (max-width:700px) { .tappe { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }

/* ═══ zona sicura di iOS ═════════════════════════════════════════
   Aggiunta alla schermata Home, l'app gira a tutto schermo: la pagina
   comincia sotto l'orologio e la batteria, non sotto la barra di stato.
   Con viewport-fit=cover il fondo arriva fino al bordo (giusto: niente
   fascia bianca) ma il CONTENUTO va spostato piu' in basso.
   Misurato sul video: la barra partiva da y=0 con 319 pixel di testo
   dentro i primi 150, cioe' sotto l'orologio. */
.cima { padding-top:env(safe-area-inset-top, 0px);
  padding-left:calc(20px + env(safe-area-inset-left, 0px));
  padding-right:calc(20px + env(safe-area-inset-right, 0px));
  min-height:calc(56px + env(safe-area-inset-top, 0px)); }

/* Le schermate a tutto schermo partono da y=0 per costruzione
   (position:fixed; inset:0), quindi sono quelle che soffrono di piu'.
   .soglia non esiste nel markup: la schermata d'ingresso e' .hub. */
.hub, .gate { padding-top:calc(40px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
  padding-right:calc(22px + env(safe-area-inset-right, 0px)); }
.main { padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }

/* il registro locazioni incastonato: la barra sopra ha gia' il suo
   margine, qui basta non finire sotto i bordi curvi in orizzontale */
.incasso__c { padding-left:calc(16px + env(safe-area-inset-left, 0px));
  padding-right:calc(16px + env(safe-area-inset-right, 0px)); }

/* fogli e finestre a tutto schermo sul telefono */
@media (max-width:760px) {
  .velo { padding-top:env(safe-area-inset-top, 0px); }
  .foglio, .modale { max-height:calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }
  .incasso { min-height:calc(100vh - 168px - env(safe-area-inset-top, 0px)); }
}

/* ── AREA ANCORA DA COSTRUIRE: stessa carta, spenta ───────────────
   Piu' chiara di quella "non autorizzata", perche' le due cose sono
   diverse e devono sembrarlo: una e' chiusa per te, l'altra non esiste
   ancora per nessuno. Niente ombra, niente sollevamento al passaggio:
   non e' una cosa su cui si puo' premere. ── */
.porta--cantiere { cursor:default;
  background:linear-gradient(158deg, #EFF2F6 0%, #E6EAF0 100%);
  box-shadow:none; }
.porta--cantiere:hover { transform:none; box-shadow:none; }
.porta--cantiere .porta__filigrana { opacity:.42; }
.porta--cantiere .porta__nome { color:#6B7A8C; }
.porta--cantiere .porta__d { color:#8A99AB; }
.porta--cantiere .porta__bloc { color:#93A2B4; border-top-color:rgba(15,46,77,.08); }

/* ── area costruita ma non autorizzata: la carta resta visibile,
   spenta, dentro la stessa griglia delle aree aperte ── */
.porta--bloccata { cursor:default; background:linear-gradient(158deg, #E7ECF2 0%, #DCE3EB 100%);
  filter:grayscale(.35); }
.porta--bloccata:hover { transform:none; box-shadow:none; }
.porta--bloccata .porta__filigrana { opacity:.5; }
.porta--bloccata .porta__nome { color:#5C6B7D; }
.porta--bloccata .porta__d { color:#7C8AA0; }
.porta__eti--rossa { color:#B3462E; }
.porta__eti--rossa i { background:#E2543A; box-shadow:0 0 0 3px rgba(226,84,58,.16); }
.porta__bloc { display:block; font-size:12px; line-height:1.55; color:#7C8AA0; margin-top:14px;
  padding-top:13px; border-top:1px solid rgba(15,46,77,.10); max-width:34ch; }

/* ── area che ancora non sappiamo se e' tua: spenta come quella
   bloccata, ma senza il rosso e senza la parola "non autorizzato".
   Sta li' un istante, il tempo che il server risponda; se dicesse
   "chiusa" per quell'istante, chi ci clicca non aprirebbe niente e
   penserebbe di non avere accesso. Il pallino respira per far capire
   che sta succedendo qualcosa, e non lampeggia. ── */
.porta--attesa { cursor:progress; background:linear-gradient(158deg, #E7ECF2 0%, #DCE3EB 100%);
  filter:grayscale(.35); }
.porta--attesa:hover { transform:none; box-shadow:none; }
.porta--attesa .porta__filigrana { opacity:.5; }
.porta--attesa .porta__nome { color:#5C6B7D; }
.porta--attesa .porta__d { color:#7C8AA0; }
.porta__eti--grigia { color:#6A7889; }
.porta__eti--grigia i { background:#8C9AAB; box-shadow:0 0 0 3px rgba(140,154,171,.18);
  animation:portaResp 1.4s ease-in-out infinite; }
@keyframes portaResp { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) {
  .porta__eti--grigia i { animation:none; }
}


/* ═══ acquisizioni ═══════════════════════════════════════════════ */
.hero--ambra { background:linear-gradient(158deg, #6E4A18 0%, #533512 54%, #38220B 100%);
  box-shadow:0 1px 2px rgba(56,34,11,.20), 0 16px 36px -16px rgba(56,34,11,.42); }
.hero--ambra .hero__e { color:#E8C089; }
.hero--ambra .hero__k i, .hero--ambra .hero__n { color:#BFA079; }
.hero--ambra .hero__bar i { background:linear-gradient(90deg,#F2C078 0%,#F7DAA8 100%); }

.porta--ambra { background:linear-gradient(158deg, #6E4A18 0%, #533512 52%, #38220B 100%);
  box-shadow:0 1px 2px rgba(56,34,11,.22), 0 20px 44px -14px rgba(56,34,11,.48); }
.porta--ambra .porta__eti { color:#E8C089; }
.porta--ambra .porta__d { color:#C0A47F; }

/* GESTIONE CHIAMATE, in oro. Serve che si riconosca al volo: e' l'area
   che si apre di corsa mentre un telefono squilla, e cercarla fra due
   riquadri verdi uguali e' tempo perso. L'oro resta nella stessa
   famiglia degli altri - fondi profondi, testo caldo sopra - senza
   diventare il giallo squillante che stonerebbe accanto al blu. */
/* GIALLO DAVVERO. Due tentativi prima erano marroni scuri: nella
   famiglia degli altri riquadri, ma indistinguibili dall'ambra di
   Acquisizioni a un metro di distanza. Qui serve il contrario - e'
   l'area che si apre di corsa mentre un telefono squilla.

   Un fondo chiaro fra tre fondi scuri e' la cosa piu' visibile che si
   possa fare senza uscire dalla tavolozza, e il testo diventa scuro:
   su un giallo luminoso il bianco non si legge, e "si legge" qui non
   e' un'opinione - il controllo delle pagine lo misura. */
.porta--oro { background:linear-gradient(158deg, #F5C518 0%, #EAB308 52%, #C98F05 100%);
  box-shadow:0 1px 2px rgba(122,88,4,.26), 0 20px 44px -14px rgba(122,88,4,.46); }
.porta--oro:hover { box-shadow:0 2px 4px rgba(122,88,4,.30), 0 30px 60px -16px rgba(122,88,4,.54); }
.porta--oro .porta__nome { color:#2B2103; }
.porta--oro .porta__eti { color:#5C4704; }
.porta--oro .porta__eti i { background:#1F7A4D; }
.porta--oro .porta__d { color:#463602; }
.porta--oro .porta__dati { border-top-color:rgba(43,33,3,.20); }
.porta--oro .porta__dati b { color:#2B2103; }
.porta--oro .porta__dati i { color:#5C4704; }
.porta--oro .porta__filigrana { opacity:.10; }
.porta--oro .porta__vai { color:#2B2103; }
.cima--oro .agg { border-color:#7A6320; color:#E8D296; background:rgba(226,197,98,.12); }
.cima--oro .agg:hover { border-color:#E2C562; color:#fff; }
.porta--ambra .porta__dati { border-top-color:rgba(232,192,137,.22); }
.porta--ambra .porta__dati i { color:#A88C68; }
.porta--ambra .porta__vai { color:#F2C078; }
.cima--ambra { background:#4A2F10; border-bottom-color:#6E4A18; }
.cima--ambra .cima__nome b { color:#E8C089; }
.cima--ambra .cima__nome em, .cima--ambra .cima__chi span, .cima--ambra .cima__mod { color:#9A7F5C; }
.cima--ambra .cima__chi { border-left-color:#6E4A18; }
.cima--ambra .cima__esci, .cima--ambra .cima__occhio { border-color:#7A5520; color:#D8B98C; }
.cima--ambra .cima__esci:hover, .cima--ambra .cima__occhio:hover { border-color:#F2C078; color:#fff; }

/* riga di un incarico: la fascia prende il colore dello stato */
.riga--inc { grid-template-columns:112px minmax(150px,1.6fr) 120px 118px 130px 104px; }
.riga--inc::before { background:var(--tinta, #C3D0DE); }
.riga__dt b, .riga__ag b { font-size:12.5px; font-weight:500; }
.riga__ag b { font-weight:600; }
@media (max-width:1180px) { .riga--inc { grid-template-columns:104px minmax(130px,1.5fr) 118px 110px; }
  .riga--inc .riga__ag, .riga--inc .riga__st { display:none; } }

/* proprietari come pastiglie */
.prop { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.prop__v { display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 11px;
  background:#EDF2F7; border-radius:20px; font-size:12.5px; }
.prop__v button { background:none; border:0; font:inherit; font-size:15px; line-height:1;
  color:var(--muto); cursor:pointer; padding:0 2px; }
.prop__v button:hover { color:var(--rosso); }
.prop select { border:1px dashed var(--line-forte); border-radius:20px; padding:5px 10px;
  font:inherit; font-size:12.5px; color:var(--muto); background:none; cursor:pointer; }

.campo__err { font-style:normal; font-size:11px; color:var(--rosso); margin-top:3px; }
.campo__nota { font-style:normal; font-size:11px; color:var(--muto); margin-top:3px; }
.campo--riga { flex-direction:row; align-items:center; gap:8px; }
.campo--riga input { width:auto; }

.inc-doc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px;
  padding:12px 14px; background:#F5F8FB; border-radius:10px; }
.inc-doc__t { font-size:11.5px; color:var(--muto); margin-right:4px; }
.inc-doc__v { display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px;
  background:var(--sup); border:1px solid var(--line); border-radius:7px; font-size:12px; }
.inc-doc__v i { font-style:normal; font-size:10.5px; color:var(--muto); }
.tar-avviso--male { background:#FBECEA; border-color:#EBC5BF; color:#8C2B22; }
.filtri--largo { margin-bottom:14px; }
.filtro em { font-style:normal; opacity:.6; margin-left:4px; font-size:10.5px; }
.modale__az2 { display:flex; gap:9px; }

/* campi catastali affiancati e avviso grave sull'immobile duplicato */
.campo--terzo { grid-column:span 1; }
@media (min-width:640px) { .campi { grid-auto-flow:row dense; } }
.avviso-ind--grave { background:#FBECEA; border-color:#E8B5AE; }
.avviso-ind--grave b { color:#8C2B22; }
.avviso-ind--grave span { color:#A0483E; }
.avviso-ind--grave .avviso-ind__b { border-color:#E0B0A8; }

/* ── premio al segnalatore ────────────────────────────────────────
   Tre stati con tre pesi diversi: in attesa e' informazione, maturato
   e' una cosa da fare, riconosciuto e' storia. */
.premio { grid-column:1 / -1; display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:13px 15px; border-radius:11px; background:#F5F8FB; border:1px solid var(--line); }
.premio b { font-size:13px; font-weight:600; letter-spacing:-0.01em; }
.premio span { font-size:11.5px; color:var(--muto); }
.premio .btn { margin-top:7px; }
.premio--ora { background:#FDF6E8; border-color:#E8D2A0; }
.premio--ora b { color:#7A5518; }
.premio--ora span { color:#8A6A32; }
.premio--fatto { background:#E7F3EE; border-color:#B9DECD; }
.premio--fatto b { color:#146C4E; }
.premio--fatto span { color:#2E7D5B; }
.campo__ok { font-size:10.5px; color:var(--verde); margin-top:3px; }
.campo__no { font-size:10.5px; color:var(--muto); margin-top:3px; }

/* origine automatica dello stato incarico */
.riga__auto { font-style:normal; font-size:10px; color:var(--muto); margin-top:3px; }

/* nota al posto di un campo, quando non c'e' niente da compilare */
.campo--nota p { margin:0; font-size:12px; line-height:1.5; color:var(--muto);
  padding:9px 11px; background:#F5F8FB; border:1px solid var(--line); border-radius:8px; }

/* la barra in basso segue la tinta dell'area: nello schermo era navy
   dentro un'area verde, e i due colori si davano contro */
.cima--verde ~ * .tabbar, .app:has(.cima--verde) .tabbar { background:#0B403C; border-top-color:#12554E; }
.app:has(.cima--verde) .tb { color:#8FBDB6; }
.app:has(.cima--verde) .tb.is-on { color:#fff; }
.app:has(.cima--verde) .tb.is-on::before { background:#3FA894; }

/* ripartizione per tipo di operazione, nella scheda dell'agente */
.tipi { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tipi li { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:"n c v" "b b e";
  align-items:baseline; gap:4px 10px; }
.tipi__n { grid-area:n; font-size:13.5px; font-weight:600; letter-spacing:-0.01em; }
.tipi li > b { grid-area:c; font-size:15px; font-weight:600; letter-spacing:-0.02em; }
.tipi__v { grid-area:v; font-size:13px; color:var(--muto); min-width:78px; text-align:right; }
.tipi__b { grid-area:b; display:block; height:5px; background:#EDF1F6; border-radius:3px; overflow:hidden; }
.tipi__b i { display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, #1D5B8F 0%, #4C8AC6 100%); transition:width .4s cubic-bezier(.2,.7,.2,1); }
.tipi li > em { grid-area:e; font-style:normal; font-size:10.5px; color:var(--muto); text-align:right; }

/* ── il caricamento e' fallito: dirlo, invece di mostrare il vuoto ──
   Un archivio vuoto e un archivio irraggiungibile devono avere due
   facce diverse, altrimenti la seconda si scambia per la prima e si
   ricomincia a inserire sopra dati che ci sono ancora. */
.guasto { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  max-width:520px; margin:40px auto; padding:36px 32px 30px; background:var(--sup);
  border:1px solid #E8B5AE; border-radius:18px;
  box-shadow:0 1px 2px rgba(140,43,34,.06), 0 18px 44px -20px rgba(140,43,34,.22); }
.guasto__i { display:flex; align-items:center; justify-content:center; width:50px; height:50px;
  border-radius:50%; background:#FBECEA; color:#8C2B22; margin-bottom:6px; }
.guasto__i svg { width:24px; height:24px; }
.guasto h2 { font-size:17px; font-weight:650; letter-spacing:-0.02em; color:#8C2B22; }
.guasto p { font-size:13.5px; line-height:1.6; color:var(--muto); margin:2px 0 0; }
.guasto__p { font-size:12.5px; }
.guasto__az { display:flex; gap:9px; margin-top:16px; }

/* ═══ soglia: aree affiancate e proporzionate ════════════════════
   Impilate a tutta larghezza spingevano il resto fuori schermo e
   sembravano tasti giganti. Su desktop stanno in riga, e la carta
   si rimpicciolisce invece di allargarsi. */
.hub__c { max-width:1040px; }
/* Le carte erano blocchi enormi appoggiati in cima allo schermo. Su
   desktop diventano riquadri proporzionati, affiancati e centrati
   verticalmente: la pagina respira invece di partire dal bordo. */
/* ═══ I MODULI DELLE AREE, TUTTI UGUALI ═══════════════════════════
   Marco, 22/09/2026: "tutti i moduli delle aree devono essere larghi e
   alti uguali. Se non ci stanno le informazioni in anteprima ne
   mettiamo meno. Tutto proporzionato e in ordine."

   Larghi uguali lo erano gia' (la griglia divide in parti uguali). Alti
   no, per tre motivi, e vanno tolti tutti e tre:
   1. le descrizioni sono lunghe diverse — una andava su tre righe e
      un'altra su una, e il riquadro cresceva con lei;
   2. Contatti portava quattro cifre invece di tre e la fila andava a
      capo (risolto nel codice: tre e basta);
   3. le aree spente hanno "Non autorizzato" al posto delle cifre, che
      e' alto diverso.

   Si mettono in colonna, si riserva alla descrizione l'altezza di due
   righe sempre — anche quando e' corta o vuota, come per chi non ha la
   fatturazione — e si spinge in fondo quello che chiude il riquadro.
   Cosi' le cifre stanno alla stessa altezza in tutti, che e' la cosa
   che si vede davvero guardandoli in fila. ═══ */
.porte { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px; align-items:stretch; }
.porte .porta { padding:18px 19px 16px; border-radius:14px;
  display:flex; flex-direction:column; height:100%; }
/* due righe esatte: piu' lunga si taglia con i puntini, piu' corta
   lascia lo spazio vuoto invece di far salire tutto il resto */
.porte .porta__d { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(1.45em * 2); max-width:none; }
/* quello che chiude il riquadro va in fondo, qualunque cosa sia */
.porte .porta__dati, .porte .porta__bloc { margin-top:auto; }
.porte .porta__vai { margin-top:14px; }
.porte .porta__nome { font-size:17px; }
.porte .porta__d { font-size:11.5px; line-height:1.45; }
.porte .porta__dati { margin-top:12px; padding-top:11px; gap:14px; }
.porte .porta__dati b { font-size:15px; }
/* DUE COLONNE, NON TRE. Con tre colonne e quattro aree — che e' il
   caso di tutti, Marco compreso — il quarto riquadro restava da solo su
   una riga sua: l'effetto scala che Marco aveva gia' fatto togliere dal
   blocco delle aree in cantiere. Con due colonne quattro fanno 2+2 e
   sei fanno 2+2+2: sempre in pari. E i riquadri vengono piu' larghi,
   quindi le descrizioni ci stanno su due righe invece di essere
   tagliate. */
@media (min-width:760px) {
  .porte { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* tutte le righe alte uguali, non solo le carte dentro la stessa riga:
   con due righe di altezza diversa il blocco sembra storto lo stesso */
.porte { grid-auto-rows:1fr; }
.porte .porta__d { font-size:12.5px; }
.porte .porta__dati { gap:16px; padding-top:12px; margin-top:12px; }
.porte .porta__dati b { font-size:17px; }
.porte .porta__filigrana { width:180px; right:-52px; }
@media (max-width:700px) {
  .porte { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .porte .porta { padding:18px 18px 16px; }
  .porte .porta__nome { font-size:19px; }
}

/* ── passaggio fra aree dalla barra in alto ── */
.cima__aree { display:flex; align-items:center; gap:3px; padding:3px; border-radius:11px;
  background:rgba(143,182,222,.10); border:1px solid #215389; }
.cima--verde .cima__aree { background:rgba(127,205,192,.10); border-color:#1A6A62; }
.cima__area svg { width:14px; height:14px; }
@media (max-width:1100px) { .cima__area span { display:none; } .cima__area { padding:6px 8px; } }


/* la colonna della soglia non deve essere piu' larga di quanto serve */
.hub__c { max-width:900px; }
@media (min-width:900px) { .hub { align-items:center; } }

/* ═══ collocazioni dentro l'incarico ═════════════════════════════
   Chi c'e' in quale stanza e da quando. I dati vivono nel registro
   locazioni, che li usa per i conguagli: qui si leggono, non si
   duplicano. Un dato in due posti diverge al primo che lo corregge. */
.colloc { grid-column:1 / -1; margin-top:6px; padding:15px 16px 13px;
  background:#F5F8FB; border:1px solid var(--line); border-radius:12px; }
.colloc__t { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.colloc__t b { font-size:12.5px; font-weight:650; letter-spacing:-0.01em; }
.colloc__t span { font-size:11px; color:var(--muto); }
.colloc__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.colloc__l li { display:grid; grid-template-columns:64px minmax(0, 1fr) auto auto; align-items:center; gap:10px;
  padding:9px 12px; background:var(--sup); font-size:12.5px; }
.colloc__l li.is-on { background:#F0F8F4; }
.colloc__s { font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--muto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.colloc__c { font-weight:600; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.colloc__d { font-size:11px; color:var(--muto); white-space:nowrap; }
.colloc__b { font-size:10px; padding:2px 8px; border-radius:20px; white-space:nowrap;
  background:#EDF1F6; color:var(--muto); }
.colloc__b.is-on { background:#E7F3EE; color:var(--verde); }
.colloc .nota { margin:9px 0 0; font-size:10.5px; }
@media (max-width:640px) {
  .colloc__l li { grid-template-columns:minmax(0, 1fr) auto; gap:4px 10px; }
  .colloc__s { grid-column:1 / -1; }
  .colloc__d { grid-column:1; }
}

/* ═══ barra di navigazione in basso anche su desktop ═════════════
   Su schermo largo la barra in alto conteneva marchio, cinque voci,
   stato, avvisi, tre aree, utente e pulsanti: restringendo la finestra
   non ci stava piu' niente. Le voci scendono in basso, come in un'app,
   e in alto restano solo identita' e stato. */
@media (min-width:761px) {
  .tabbar { display:flex; left:50%; right:auto; bottom:18px; transform:translateX(-50%);
    width:auto; border-radius:16px; border:1px solid rgba(143,182,222,.18);
    background:rgba(11,36,64,.94); backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 2px 6px rgba(11,36,64,.22), 0 20px 44px -16px rgba(11,36,64,.52);
    padding:5px; gap:2px; }
  .tabbar .tb { flex:0 0 auto; flex-direction:row; gap:8px; padding:9px 17px; border-radius:11px;
    font-size:13px; transition:background .16s, color .16s; }
  .tabbar .tb svg { width:16px; height:16px; }
  .tabbar .tb:hover:not(.is-on) { background:rgba(143,182,222,.12); color:#fff; }
  .tabbar .tb.is-on { background:rgba(255,255,255,.96); color:var(--ink); }
  .tabbar .tb.is-on::before { display:none; }
  /* la barra in alto perde le voci: le ha la barra in basso */
  .cima__nav { display:none; }
  /* spazio in fondo alla pagina per non finire sotto la barra */
  .wrap { padding-bottom:104px; }
  .incasso { min-height:calc(100vh - 56px - env(safe-area-inset-top, 0px)); }
}
.cima--verde ~ * .tabbar, .app:has(.cima--verde) .tabbar { background:rgba(11,64,60,.94); border-color:rgba(63,168,148,.20); }
.app:has(.cima--ambra) .tabbar { background:rgba(58,36,14,.94); border-color:rgba(217,189,138,.20); }

/* ═══ centro notifiche ═══════════════════════════════════════════
   Prima c'erano due pastiglie che dicevano un numero e non si
   potevano premere. Adesso una campanella sola raccoglie tutto,
   ordinato per gravita', e ogni voce porta dove si risolve.
   Se non c'e' niente da segnalare non compare: un contatore fisso
   a zero e' rumore che insegna a ignorare gli avvisi. */
.camp { position:relative; display:flex; align-items:center; }
.camp__b { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px;
  border:1px solid #215389; border-radius:20px; background:none; color:#8FA6BE;
  font:inherit; font-size:11px; cursor:pointer; transition:color .16s, border-color .16s, background .16s; }
.camp__b svg { width:15px; height:15px; }
.camp__b em { font-style:normal; font-weight:600; min-width:14px; text-align:center; }
.camp__b:hover { color:#fff; border-color:#4C8AC6; }
.camp__b.is-grave { background:rgba(168,50,42,.22); border-color:rgba(242,169,160,.35); color:#F2A9A0; }
.camp__b:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.cima--verde .camp__b { border-color:#1A6A62; color:#8FBDB6; }
.cima--ambra .camp__b { border-color:#7A5A1E; color:#D9BD8A; }

.camp__velo { position:fixed; inset:0; z-index:44; }
.camp__m { position:absolute; right:0; top:calc(100% + 9px); z-index:45; width:380px; max-width:88vw;
  background:var(--sup); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(15,46,77,.18), 0 24px 52px -16px rgba(15,46,77,.38); }
.camp__t { display:flex; flex-direction:column; gap:1px; padding:14px 16px 11px; border-bottom:1px solid var(--line); }
.camp__t b { font-size:13.5px; font-weight:650; letter-spacing:-0.015em; color:var(--nero); }
.camp__t span { font-size:11.5px; color:var(--muto); }
.camp__l { list-style:none; margin:0; padding:0; max-height:min(62vh, 460px); overflow-y:auto; }
.camp__l li + li { border-top:1px solid #EFF3F7; }
.camp__v { display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px 15px;
  background:none; border:0; font:inherit; text-align:left; cursor:pointer; transition:background .14s; }
.camp__v:hover { background:#F5F8FB; }
.camp__v > span { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.camp__v b { font-size:13px; font-weight:600; letter-spacing:-0.01em; color:var(--nero); }
.camp__v em { font-style:normal; font-size:11.5px; line-height:1.45; color:var(--muto); }
.camp__v u { text-decoration:none; font-size:13px; color:#C3D0DE; align-self:center; }
.camp__v:hover u { color:#3E77B0; }
.camp__p { width:7px; height:7px; border-radius:50%; flex:0 0 7px; margin-top:5px; }
.camp__v--grave .camp__p { background:var(--rosso); }
.camp__v--attenzione .camp__p { background:#D98324; }
.camp__v--nota .camp__p { background:#A8B6C7; }
@media (max-width:560px) { .camp__m { right:-8px; width:min(94vw, 380px); } }

/* ═══ selettore di area a tendina ════════════════════════════════
   Con tre aree una fila di pulsanti stava larga; con cinque non ci
   sarebbe stata. La tendina occupa lo spazio di una voce sola
   comunque vada, e mostra a colpo d'occhio dove sei. */
.cima__aree { position:relative; display:flex; align-items:center; }
.cima__sel { display:inline-flex; align-items:center; gap:8px; padding:6px 9px 6px 11px;
  border:1px solid #215389; border-radius:9px; background:none; color:#C3D3E4;
  font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s; }
.cima__sel svg { width:15px; height:15px; flex:0 0 15px; }
.cima__sel:hover, .cima__sel.is-on { background:rgba(143,182,222,.12); border-color:#4C8AC6; color:#fff; }
.cima__sel:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.cima__frecce { display:flex; opacity:.6; }
.cima__frecce svg { width:13px; height:13px; }
.cima--verde .cima__sel { border-color:#1A6A62; color:#A8CFC8; }
.cima--verde .cima__sel:hover, .cima--verde .cima__sel.is-on { border-color:#3FA894; background:rgba(63,168,148,.14); }
.cima--ambra .cima__sel { border-color:#7A5A1E; color:#E0C79A; }
.cima--ambra .cima__sel:hover, .cima--ambra .cima__sel.is-on { border-color:#C9A85E; background:rgba(201,168,94,.14); }

.cima__velo { position:fixed; inset:0; z-index:44; }
.cima__tend { position:absolute; left:0; top:calc(100% + 8px); z-index:45; min-width:296px;
  background:var(--sup); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(15,46,77,.18), 0 24px 52px -16px rgba(15,46,77,.36); }
.cima__voce { display:flex; align-items:flex-start; gap:11px; width:100%; padding:12px 15px;
  background:none; border:0; font:inherit; text-align:left; cursor:pointer; transition:background .14s; }
.cima__voce + .cima__voce { border-top:1px solid #EFF3F7; }
.cima__voce:hover { background:#F5F8FB; }
.cima__voce > span { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cima__voce b { font-size:13.5px; font-weight:600; letter-spacing:-0.012em; color:var(--nero); }
.cima__voce em { font-style:normal; font-size:11px; line-height:1.4; color:var(--muto); }
.cima__voce u { text-decoration:none; font-size:10px; color:var(--muto); align-self:center; white-space:nowrap; }
.cima__voce.is-on b { color:var(--ink2); }
.cima__pal { width:9px; height:9px; border-radius:3px; flex:0 0 9px; margin-top:5px; }
.cima__pal--navy { background:#164070; }
.cima__pal--verde { background:#0D4A46; }
.cima__pal--ambra { background:#8A5A1E; }
/* mancava, e nella tendina Gestione chiamate era l'unica senza pallino */
.cima__pal--oro { background:#C99A06; }
/* la voce "Guida" e il pulsante sulla soglia sono collegamenti, non
   pulsanti: aprono una scheda nuova. Vanno tolte le due cose che un
   browser aggiunge da solo ai collegamenti e che qui stonano. */
a.cima__voce { text-decoration:none; color:inherit; box-sizing:border-box; }
a.btn { text-decoration:none; display:inline-flex; align-items:center;
  justify-content:center; }
.cima__voce--tutte { border-top:1px solid var(--line); }
.cima__voce--tutte b { font-size:12.5px; font-weight:400; color:var(--muto); }
@media (max-width:900px) { .cima__sel span { display:none; } .cima__sel { padding:6px 8px; } }


/* ═══ distribuzione della barra in alto ══════════════════════════
   Prima era una fila piatta di elementi con lo stesso peso: marchio,
   stato, occhio, campanella, tre aree, utente, esci — piu' Aggiorna
   che galleggiava fuori. Adesso tre zone con ruoli diversi:
   identita' a sinistra, spazio elastico, strumenti a destra. */
.cima { gap:14px; }
.cima__brand { flex:0 0 auto; gap:11px; }
.cima__aree { flex:0 0 auto; margin-left:2px; }
.cima__dx { flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:8px; }
.cima__az { display:flex; align-items:center; gap:7px; padding-left:11px;
  margin-left:3px; border-left:1px solid #215389; }
.cima--verde .cima__az { border-left-color:#12554E; }
.cima--ambra .cima__az { border-left-color:#6A4A2A; }
.cima__chi { flex:0 0 auto; border-left:0; padding-left:0; }

/* lo stato: un pallino accanto al marchio, parole solo se serve */
.stato { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#8FA6BE; }
.stato i { width:7px; height:7px; border-radius:50%; background:#4ED8A0; flex:0 0 7px;
  transition:background .2s; }
.stato--carico i, .stato--salvo i { background:#F2C078; animation:pulsa 1.1s ease-in-out infinite; }
.stato--errore i, .stato--conflitto i { background:#F2A9A0; }
.stato--errore, .stato--conflitto { color:#F2A9A0; }
@keyframes pulsa { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .stato i { animation:none; } }

@media (max-width:1100px) {
  .agg__t { display:none; }
  .agg { padding:6px 8px; }
  .cima__chi { display:none; }
}
@media (max-width:760px) { .stato span { display:none; } }

/* ── correzioni trovate dal controllo visivo ─────────────────────
   Due difetti che il browser ha misurato da solo, sul telefono. */

/* La fila dei filtri di stato — In corso, Scaduti, Conclusi, Rinunciati,
   Tutti — misura 445px e lo schermo ne ha 390: usciva dal bordo senza
   possibilita' di raggiungere le ultime voci. Ora scorre. */
@media (max-width:640px) {
  .filtri { display:flex; max-width:100%; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .filtri::-webkit-scrollbar { display:none; }
  .filtri .filtro { flex:0 0 auto; }
}

/* Nella riga dell'incarico la colonna delle date arrivava a 415px su
   uno schermo di 390: due colonne fisse piu' il minimo del nome non ci
   stavano. Sotto i 640 le date scendono sotto il nome. */
@media (max-width:640px) {
  .riga--inc { grid-template-columns:minmax(0, 1fr) auto; gap:4px 10px; }
  .riga--inc .riga__dt { grid-column:1 / -1; }
  .riga--inc .riga__dt b { font-size:11.5px; }
}

/* ═══ storico del cliente sotto il dettaglio fattura ═════════════
   Quando sei su un documento, sapere con chi hai a che fare senza
   uscire dalla pagina: quanto vale, se paga, da quanto lo segui. */
.stor { margin-top:14px; }
.stor__k { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;
  padding-bottom:15px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.stor__k > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.stor__k b { font-size:19px; font-weight:600; letter-spacing:-0.03em; }
.stor__k i { font-style:normal; font-size:11px; color:var(--muto); }

.stor__a + .stor__a { margin-top:14px; }
.stor__y { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 2px 7px; }
.stor__y b { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em;
  color:var(--muto); }
.stor__y span { font-size:12.5px; font-weight:600; letter-spacing:-0.02em; color:var(--muto); }
.stor__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.stor__v { display:grid; grid-template-columns:88px 82px minmax(0, 1fr) auto auto; align-items:center;
  gap:12px; width:100%; padding:10px 13px; background:var(--sup); border:0; font:inherit;
  text-align:left; cursor:pointer; transition:background .14s; }
.stor__v:hover { background:#F5F8FB; }
.stor__n { font-size:12px; font-weight:500; }
.stor__d { font-size:11.5px; color:var(--muto); }
.stor__o { font-size:12px; color:var(--muto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stor__e { font-size:13px; font-weight:600; letter-spacing:-0.02em; }
@media (max-width:760px) {
  .stor__k { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; }
  .stor__v { grid-template-columns:minmax(0, 1fr) auto; gap:3px 10px; }
  .stor__d { grid-column:1; font-size:11px; }
  .stor__o { grid-column:1 / -1; }
}

/* ── acconto versato ─────────────────────────────────────────────
   Lo stato puo' dire una cosa sola, e "scaduta" copriva "parziale".
   Ma sono due informazioni diverse: quanto e' in ritardo e quanto ha
   gia' pagato. Questa etichetta le affianca invece di sostituirle. */
.acconto { font-style:normal; font-size:10px; padding:2px 7px; border-radius:20px;
  background:#E7F0F8; color:#2C5F8F; font-weight:500; white-space:nowrap; }
.riga--scaduta .acconto { background:#FBF0E4; color:#8A5A1E; }
.stor__st { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end; }

/* documenti in cui il cliente e' cointestatario: contano per lo storico
   ma l'importo sta sull'intestatario principale, per non sommarlo due volte */
.riga__co { font-style:normal; font-size:10px; padding:1px 6px; border-radius:20px;
  background:#EDF2F7; color:var(--muto); white-space:nowrap; margin-top:2px; }

/* ═══ spiegazione a richiesta ════════════════════════════════════
   Le regole di calcolo servono la prima volta e diventano rumore da
   li' in poi. Una "i" discreta accanto al dato le apre a chi le
   vuole, senza occupare spazio a chi le sa gia'. */
.sp { position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; }
.sp__b { display:flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; border:1px solid currentColor; background:none; color:inherit;
  font:inherit; font-size:9.5px; font-weight:600; font-style:normal; line-height:1;
  letter-spacing:0; cursor:pointer; opacity:.42; transition:opacity .16s, background .16s; }
.sp__b:hover, .sp__b[aria-expanded="true"] { opacity:1; }
.sp__b:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; opacity:1; }
.sp__velo { position:fixed; inset:0; z-index:64; }
.sp__m { position:absolute; left:-8px; top:calc(100% + 8px); z-index:65; width:340px; max-width:82vw;
  display:flex; flex-direction:column; gap:5px; padding:14px 16px; text-align:left;
  background:var(--sup); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 4px 12px -4px rgba(15,46,77,.18), 0 22px 48px -16px rgba(15,46,77,.34); }
/* Ancorato a sinistra il riquadro esce a destra quando la "i" sta a
   fine riga: succede su desktop quanto su telefono, e il testo si
   legge a meta'. La variante --dx serve a questo, ma va scelta guardando
   dove sta il pulsante — e chi la usa non lo sapeva. */
.sp__m--dx { left:auto; right:-8px; }
/* rete di sicurezza: qualunque sia l'ancoraggio, non esce dai bordi */
.sp__m { max-width:min(340px, calc(100vw - 24px)); }
.sp:has(.sp__m) { position:relative; }
/* Il riquadro sta dentro etichette che sono in maiuscoletto spaziato:
   ereditava text-transform e letter-spacing, e una spiegazione di tre
   righe tutta maiuscola sembra urlata. Qui si riparte da zero. */
.sp__m, .sp__m * { text-transform:none; letter-spacing:normal; font-style:normal;
  font-family:'Archivo',system-ui,sans-serif; }
.sp__m b { font-size:12.5px; font-weight:650; letter-spacing:-0.012em; color:var(--nero); }
.sp__m em { font-size:12.5px; line-height:1.6; color:var(--muto); font-weight:400; }
/* sui fondi scuri l'icona deve restare visibile */
.prod .sp__b, .hero .sp__b { opacity:.5; }
.prod .sp__b:hover, .hero .sp__b:hover { opacity:1; background:rgba(255,255,255,.14); }
@media (max-width:560px) { .sp__m { left:auto; right:-8px; width:min(88vw, 340px); } }

/* ── i riquadri della "i" non ereditano lo stile del titolo ──────
   Stanno dentro h2 e etichette in maiuscolo, e text-transform si
   eredita: il testo risultava tutto maiuscolo, come se urlasse.
   Qui dentro si scrive normale. */
.sp__m, .sp__m * { text-transform:none; letter-spacing:normal; font-weight:400; }
.sp__m b { font-weight:650; letter-spacing:-0.012em; }
.camp__m, .camp__m *, .cima__tend, .cima__tend * { text-transform:none; letter-spacing:normal; }
.camp__v b, .cima__voce b { font-weight:600; }

/* ── filtro per stato sopra l'elenco fatture ─────────────────────
   Ogni voce porta il conteggio: si sa cosa si trova prima di premere,
   e le voci vuote non compaiono affatto. */
.fstati { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.fstato { display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  background:var(--sup); border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:13px; color:var(--muto); cursor:pointer;
  transition:border-color .16s, color .16s, background .16s; }
.fstato i { font-style:normal; font-size:11.5px; padding:1px 6px; border-radius:20px;
  background:#EDF1F6; color:var(--muto); font-weight:500; }
.fstato:hover { border-color:#B9C6D6; color:var(--nero); }
.fstato.is-on { background:var(--ink); border-color:var(--ink); color:#fff; font-weight:500; }
.fstato.is-on i { background:rgba(255,255,255,.2); color:#fff; }
.fstato--scadute:not(.is-on) i { background:#FBE9E7; color:var(--rosso); }
.fstato--attesa:not(.is-on) i { background:#FBF2E4; color:#8A5A1E; }
.fstato--saldate:not(.is-on) i { background:#E7F3EE; color:var(--verde); }
.fstato--scadute.is-on { background:var(--rosso); border-color:var(--rosso); }
@media (max-width:560px) { .fstato { flex:1 1 auto; justify-content:center; padding:7px 10px; font-size:12.5px; } }

/* Il riquadro della "i" sta dentro titoli in maiuscolo e ne ereditava
   il text-transform: le spiegazioni sembravano urlate. Qui il testo
   torna a leggersi come una frase. */
.sp__m, .sp__m * { text-transform:none; letter-spacing:normal; }
.sp__m b { letter-spacing:-0.012em; }

/* ── mostra altre: l'elenco parte da venti ────────────────────────
   Con settanta documenti l'elenco e' gia' lungo, con settecento
   diventa inservibile. Chi cerca usa la ricerca, chi guarda vuole
   le ultime: le altre restano a un clic di distanza. */
.ancora { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%;
  padding:13px 16px; margin-top:8px; background:var(--sup); border:1px dashed var(--line);
  border-radius:11px; font:inherit; cursor:pointer;
  transition:border-color .16s, background .16s; }
.ancora:hover { border-color:#4C8AC6; background:#F5F9FD; border-style:solid; }
.ancora span { font-size:13px; font-weight:600; letter-spacing:-0.015em; color:var(--ink2); }
.ancora i { font-style:normal; font-size:11px; color:var(--muto); }
.ancora:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }

/* ricerca nell'elenco clienti, quando sono tanti */
.cli__cerca { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.cli__cerca .cerca { flex:1 1 auto; }
.cli__esito { font-size:11.5px; color:var(--muto); white-space:nowrap; }

/* ── pannello dei clienti, con la curva di concentrazione ────────
   La schermata partiva piatta, senza un punto dove posare l'occhio.
   La curva risponde alla domanda vera di questa pagina: da quanti
   clienti dipendo? Se sale piano sei distribuito, se schizza su
   dipendi da pochi. */
.hero--cli { position:relative; overflow:hidden; }
.hero--cli .hero__k { grid-template-columns:repeat(4, auto); }
.hero__curva { position:absolute; left:0; right:0; bottom:0; width:100%; height:96px;
  pointer-events:none; opacity:.85; }
@media (max-width:760px) {
  .hero--cli .hero__k { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .hero__curva { height:70px; }
}

/* stampa dell'elenco: porta con se' il filtro che vedi a schermo */
.stampa-el { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; }
.stampa-el svg { width:14px; height:14px; }
.stampa-el:disabled { opacity:.4; cursor:default; }
@media (max-width:640px) { .stampa-el { padding:8px 10px; } .stampa-el span { display:none; } }

/* legenda della striscia arancione: segnala chi ha ancora da pagare */
.cli__leg { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muto);
  white-space:nowrap; flex:0 0 auto; }
.cli__leg__b { width:4px; height:15px; border-radius:2px; background:#D98324; flex:0 0 4px; }
@media (max-width:640px) { .cli__leg { order:2; } }

/* ── la scheda del mese ruota attorno all'anello ─────────────────
   Prima l'anello era un pallino da 22px in un angolo e la cifra
   stava sotto: si vedeva che c'era un avanzamento ma non quanto
   valesse. Adesso l'anello e' grande, la cifra sta dentro, e il
   residuo compare al passaggio senza occupare spazio sempre. */
.ms__m { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--muto); }
.anello__t { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  letter-spacing:-0.02em; }
.ms .anello { margin:1px 0 2px; }
.ms__d { font-size:10.5px; min-height:13px; }
.ms__hov { display:block; font-size:10px; color:var(--muto); opacity:0; max-height:0;
  overflow:hidden; transition:opacity .18s, max-height .18s; white-space:nowrap; }
.ms:hover .ms__hov, .ms:focus-visible .ms__hov { opacity:1; max-height:16px; }
.ms:hover .ms__r, .ms:focus-visible .ms__r { opacity:0; max-height:0; }
.ms__r { transition:opacity .18s, max-height .18s; max-height:16px; overflow:hidden; }
.ms.is-on .ms__m { color:rgba(255,255,255,.72); }
.ms.is-on .anello__t { fill:#fff !important; }
.ms.is-on .ms__hov { color:rgba(255,255,255,.8); }
@media (max-width:640px) { .ms { flex:0 0 118px; } .ms__hov { display:none; } }

/* La cifra dentro l'anello sulla scheda selezionata: il fondo diventa
   navy e il testo restava navy. Il controllo visivo l'ha misurato:
   contrasto 1,6, illeggibile. */
.ms.is-on .anello__t, .ms--anno.is-on .anello__t { fill:#FFFFFF !important; }
.ms.is-on .anello circle:first-of-type { stroke:rgba(255,255,255,.18); }

/* ═══ menu globale: dati e backup, fuori dalle aree ══════════════
   Il backup riguarda tutte le aree, e stava dentro le impostazioni
   di una sola: per farlo dovevi entrare in Gestione anche se stavi
   lavorando in Locazioni. */
.glob { position:relative; display:flex; align-items:center; }
.glob__b { position:relative; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid #215389; border-radius:8px; background:none;
  color:#8FA6BE; cursor:pointer; transition:color .16s, border-color .16s, background .16s; }
.glob__b svg { width:15px; height:15px; }
.glob__b:hover, .glob__b.is-on { color:#fff; border-color:#4C8AC6; background:rgba(143,182,222,.12); }
.glob__b:focus-visible { outline:2px solid #4C8AC6; outline-offset:2px; }
.glob__b.is-avviso { color:#F2C078; border-color:rgba(242,192,120,.4); }
.glob__p { position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%;
  background:#F2C078; border:1.5px solid var(--ink); }
.cima--verde .glob__b { border-color:#1A6A62; color:#8FBDB6; }
.cima--verde .glob__b:hover, .cima--verde .glob__b.is-on { border-color:#3FA894; }
.cima--verde .glob__p { border-color:#0D4A46; }
.cima--ambra .glob__b { border-color:#7A5A1E; color:#D9BD8A; }

.glob__velo { position:fixed; inset:0; z-index:44; }
.glob__m { position:absolute; right:0; top:calc(100% + 9px); z-index:45; width:330px; max-width:88vw;
  background:var(--sup); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(15,46,77,.18), 0 24px 52px -16px rgba(15,46,77,.36); }
.glob__t { display:flex; flex-direction:column; gap:1px; padding:13px 15px 10px;
  border-bottom:1px solid var(--line); }
.glob__t b { font-size:13px; font-weight:650; letter-spacing:-0.015em; color:var(--nero); }
.glob__t span { font-size:11px; line-height:1.45; color:var(--muto); }
.glob__v { display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px 15px;
  background:none; border:0; font:inherit; text-align:left; cursor:pointer; transition:background .14s; }
.glob__v + .glob__v { border-top:1px solid #EFF3F7; }
.glob__v:hover { background:#F5F8FB; }
.glob__v > span { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.glob__v b { font-size:13px; font-weight:600; letter-spacing:-0.01em; color:var(--nero); }
.glob__v em { font-style:normal; font-size:11px; line-height:1.45; color:var(--muto); }
.glob__av { text-decoration:none; flex:0 0 auto; align-self:center; font-size:10px;
  padding:2px 8px; border-radius:20px; background:#FBF0E4; color:#8A5A1E; white-space:nowrap; }

/* ── il valore al passaggio sul grafico ──────────────────────────
   Il grafico mostrava l'andamento ma non i numeri. La zona sensibile
   e' l'intera colonna: centrare un pallino da due pixel col mouse e'
   un esercizio di mira, col dito e' impossibile. */
.cv__pop rect { filter:drop-shadow(0 4px 12px rgba(15,46,77,.28)); }
.cv__pop__t { font-family:'IBM Plex Mono',monospace; font-size:9px; fill:#8FB6DE;
  text-transform:uppercase; letter-spacing:.1em; }
.cv__pop__v { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; fill:#FFFFFF; }
.cv__pop__v--p { fill:#F2C078; }
.cv__pop__e { font-size:8.5px; fill:rgba(255,255,255,.55); }
.cv rect[fill="transparent"] { cursor:crosshair; }

/* lo stato dell'incasso sotto la cifra: informa, non sottrae */
.sotto--inc { color: var(--muto); font-style: italic; }

/* quanto manca all'obiettivo, sotto la percentuale: la percentuale dice
   dove sei, questo dice quanta strada resta — ed e' la domanda che ci si
   fa a meta' anno */
.scheda-ag__m { display:block; margin-top:3px; font-size:10.5px; color:var(--muto);
  font-family:'IBM Plex Mono',monospace; letter-spacing:-0.01em; }
.scheda-ag.is-on .scheda-ag__m { color:rgba(255,255,255,.72); }

/* ── perche' minmax(0, 1fr) e non 1fr ────────────────────────────
   "1fr" significa una frazione dello spazio libero, ma la dimensione
   MINIMA di una cella di griglia resta auto, cioe' il suo contenuto:
   una colonna con un testo lungo si allarga e ruba spazio alle altre.
   Nella Dashboard le quattro schede risultavano 286, 300, 256 e 298
   pixel invece che uguali, ed e' il disallineamento che si nota
   guardando la pagina. minmax(0, 1fr) toglie quel minimo. */

/* la legenda del flusso: nome e percentuale incolonnati */
.flusso__v b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flusso__v em { text-align:right; }
.flusso__v u, .flusso__v s { white-space:nowrap; }
@media (max-width:700px) { .flusso__v { grid-template-columns:9px minmax(0, 1fr) 48px auto; }
  .flusso__v s { display:none; } }

/* ── da dove nasce un versato in piu' ────────────────────────────
   Due origini che non vanno confuse: le quote pagate su fatture non
   ancora incassate sono un anticipo dell'agenzia e vanno valutate
   affare per affare; il minimo garantito si versa comunque. */
.antic { margin-top:18px; padding:16px 18px 14px; border-radius:14px;
  background:linear-gradient(160deg,#FDF6F4,#FBEFEB); border:1px solid #E8CDC4; }
.antic__t { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.antic__t b { font-size:13.5px; color:#8C3A2B; letter-spacing:-0.012em; }
.antic__t span { font-size:11.5px; line-height:1.55; color:#A85F4E; max-width:76ch; }
.tab--antic { background:rgba(255,255,255,.7); border-radius:11px; overflow:hidden; }
.antic__q { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;
  margin-top:14px; padding-top:12px; border-top:1px solid #E8CDC4; }
.antic__q > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.antic__q span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.09em; color:#A85F4E; line-height:1.35; }
.antic__q b { font-size:18px; line-height:1.15; letter-spacing:-0.03em; color:#8C3A2B; }
@media (max-width:700px) { .antic__q { grid-template-columns:1fr; gap:11px; } }

/* una riga che si apre: lo dice il cursore e il fondo al passaggio */
.cliccabile { cursor:pointer; transition:background .14s; }
.cliccabile:hover { background:rgba(15,46,77,.045); }

/* ── da quale affare nasce lo scarto ─────────────────────────────
   Quando il versato supera il dovuto, la domanda non e' "di quanto"
   ma "su quale affare": e' quella che serve per decidere se lasciar
   correre o chiedere indietro. */
.ecc { margin-top:12px; padding:13px 15px; border-radius:12px;
  background:linear-gradient(160deg,#FDF7EC,#FBF1E1); border:1px solid #E8D2AC; }
.ecc__t { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.ecc__t b { font-size:13px; color:#7A5A1E; letter-spacing:-.01em; }
.ecc__t span { font-size:11.5px; line-height:1.5; color:#9A7A3E; }
.ecc__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:#EADFC8; border:1px solid #EADFC8; border-radius:10px; overflow:hidden; }
.ecc__l li { display:grid; grid-template-columns:88px minmax(0, 1.3fr) minmax(0, 1fr) 118px 92px;
  align-items:center; gap:10px; padding:9px 12px; background:rgba(255,255,255,.86); font-size:12px; }
.ecc__f { padding:0; border:0; background:none; font:inherit; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; color:var(--blu); cursor:pointer; text-align:left; text-decoration:underline;
  text-decoration-color:rgba(76,138,198,.35); text-underline-offset:2px; }
.ecc__f:hover { text-decoration-color:var(--blu); }
.ecc__c { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ecc__i { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muto); font-size:11.5px; }
.ecc__s { font-size:11px; color:#8A5A1E; white-space:nowrap; }
.ecc__v { text-align:right; font-weight:600; color:#8A5A1E; }
.ecc__n { margin:9px 0 0; font-size:11px; line-height:1.5; color:#9A7A3E; }
@media (max-width:820px) {
  .ecc__l li { grid-template-columns:1fr auto; gap:3px 10px; }
  .ecc__i { grid-column:1 / -1; }
  .ecc__s { grid-column:1; }
}

/* la stampa accanto al riepilogo del mese, non solo in cima alla pagina */
.card__az { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card__az .btn--mini { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  padding:7px 12px; font-size:12px; white-space:nowrap; }
.card__az .btn--mini svg { width:14px; height:14px; }
@media (max-width:620px) { .card__az { width:100%; justify-content:space-between; } }

/* ── import dei contatti da Invoice ──────────────────────────────
   L'abbinamento per numero di fattura e' sicuro, quello per nome no:
   la differenza va vista prima di confermare, non dopo. */
.imp__t { display:flex; flex-direction:column; gap:2px; margin:16px 0 10px; }
.imp__t b { font-size:13px; letter-spacing:-.01em; }
.imp__t span { font-size:11.5px; color:var(--muto); line-height:1.5; }
.imp__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden;
  max-height:400px; overflow-y:auto; }
.imp__l li { display:grid; grid-template-columns:20px minmax(0,1fr) minmax(0,1.3fr) 132px;
  align-items:center; gap:10px; padding:9px 12px; background:var(--sup); font-size:12.5px; }
.imp__l li.is-off { opacity:.45; }
.imp__l input[type=checkbox] { width:15px; height:15px; accent-color:var(--verde); }
.imp__n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.imp__m { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imp__s { padding:5px 7px; font-size:11.5px; border-radius:7px; border:1px solid var(--line);
  background:var(--sup); font-family:'IBM Plex Mono',monospace; min-width:0; }
.imp__c { font-size:10px; padding:2px 8px; border-radius:20px; background:#F0F3F7;
  color:var(--muto); white-space:nowrap; text-align:center; }
.imp__c.is-forte { background:#E7F0EC; color:#14614A; }
.imp__az { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
@media (max-width:760px) {
  .imp__l li { grid-template-columns:20px minmax(0,1fr); gap:3px 10px; }
  .imp__m, .imp__s { grid-column:2; }
  .imp__c { grid-column:2; justify-self:start; }
}

/* "fatto": zittisce una scadenza per l'anno in corso, e torna il prossimo */
.camp__l li { position:relative; }
.camp__fatto { position:absolute; right:10px; bottom:9px; padding:2px 9px; border-radius:20px;
  border:1px solid var(--line); background:var(--sup); font:inherit; font-size:10px;
  color:var(--muto); cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.camp__fatto:hover { color:var(--verde); border-color:var(--verde); background:#F1F7F4; }

/* ── registro attività ───────────────────────────────────────────
   Una riga per cambiamento di sostanza, non per battuta di tastiera:
   il gestionale salva mentre si scrive, e una scheda produrrebbe
   cento righe illeggibili. */
.att__g { margin-top:16px; }
.att__gt { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--muto); margin-bottom:6px; }
.att__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.att__l li { display:grid; grid-template-columns:52px 96px minmax(0,1fr) 82px; gap:10px;
  align-items:baseline; padding:8px 12px; background:var(--sup); font-size:12.5px; }
.att__o { color:var(--muto); font-size:11.5px; }
.att__c { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* una riga per elemento toccato, col dettaglio di cosa e' cambiato */
.att__v { display:flex; flex-direction:column; gap:4px; min-width:0; }
.att__r { display:grid; grid-template-columns:14px 74px minmax(0,1fr); gap:7px;
  align-items:baseline; font-size:12px; }
.att__r i { font-style:normal; font-weight:700; text-align:center; font-size:13px; }
.att__r b { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muto);
  font-weight:600; }
.att__r em { font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att__r u { grid-column:3; text-decoration:none; font-size:11px; color:var(--muto);
  font-family:'IBM Plex Mono',monospace; line-height:1.5; }
.att__r--piu i { color:var(--verde); }
.att__r--meno i { color:var(--rosso); }
.att__r--mod i { color:var(--blu); }
.att__altre { font-size:11px; color:var(--muto); font-style:italic; }
.att__a { font-size:10.5px; color:var(--muto); text-align:right; }
@media (max-width:700px) {
  .att__l li { grid-template-columns:52px minmax(0,1fr); gap:3px 10px; }
  .att__v { grid-column:1 / -1; }
  .att__a { grid-column:2; text-align:left; }
}

/* L'unita' di misura accanto all'etichetta: "Canone per stanza · € al
   mese" toglie l'ambiguita' che un'etichetta sola non puo' togliere. */
.campo__u { font-style:normal; font-size:10px; font-weight:400; color:var(--muto);
  text-transform:none; letter-spacing:0; margin-left:6px; }
.campo__u::before { content:"· "; }

/* Il totale dei due lati: uno e' firmato, l'altro e' una stima, e
   tenerli distinti evita di trattare una speranza come un incasso. */
.pro__tot { display:flex; align-items:baseline; gap:9px; padding:9px 12px; border-radius:9px;
  background:#EEF3F8; border:1px solid #D2DFEC; }
.pro__tot > span { font-size:11px; color:var(--muto); text-transform:uppercase; letter-spacing:.07em; }
.pro__tot > b { font-size:16px; letter-spacing:-.02em; }
.pro__tot > i { font-style:normal; font-size:11px; color:var(--muto); margin-left:auto; }
.campo--full { grid-column:1 / -1; }

/* la media storica sotto il campo, con il pulsante per usarla */
.campo__st { background:#EEF3F8; border:1px solid #D2DFEC; border-radius:8px;
  padding:7px 9px; margin-top:5px; line-height:1.5; }
.campo__st b { color:var(--blu); }
.campo__usa { margin-left:7px; padding:1px 9px; border-radius:20px; border:1px solid var(--blu);
  background:var(--sup); font:inherit; font-size:10.5px; color:var(--blu); cursor:pointer; }
.campo__usa:hover { background:var(--blu); color:#fff; }

/* ── quanto rende un affare, per lato ────────────────────────────
   Sulle locazioni la controparte rende piu' del mandante: la barra a
   due colori lo dice a colpo d'occhio, meglio di due numeri in fila. */
.resa { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.resa li { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; }
.resa__t { display:flex; flex-direction:column; gap:1px; }
.resa__t b { font-size:13px; }
.resa__t i { font-style:normal; font-size:11px; color:var(--muto); }
.resa__b { display:flex; height:10px; border-radius:6px; overflow:hidden; background:#EEF2F6; }
.resa__m { background:#1D5B8F; }
.resa__c { background:#D98324; }
.resa__v { grid-column:2; display:flex; gap:16px; flex-wrap:wrap; margin-top:-4px; }
.resa__v em { font-style:normal; font-size:11.5px; color:var(--muto); display:flex; align-items:baseline; gap:5px; }
.resa__v em b { font-size:12.5px; color:var(--ink); }
.resa__v u { text-decoration:none; font-size:10px; padding:1px 7px; border-radius:20px;
  background:#FBF0E4; color:#8A5A1E; }
.resa__tot b { font-weight:650; }
.resa__sc { display:flex; gap:20px; flex-wrap:wrap; align-items:baseline; margin-top:16px;
  padding:11px 13px; border-radius:10px; background:#F5F8FA; border:1px solid var(--line);
  font-size:12px; color:var(--muto); }
.resa__sc b { color:var(--ink); }
@media (max-width:700px) { .resa li { grid-template-columns:1fr; gap:5px; } .resa__v { grid-column:1; } }

/* ── da dove arrivano gli incarichi ──────────────────────────────
   Il numero di segnalazioni da solo mette davanti chi ne manda tante
   che non chiudono: la barra e' sul RESO, non sul conteggio. */
.can { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.can li { display:grid; grid-template-columns:130px minmax(0,1fr) 96px 128px; gap:11px;
  align-items:center; font-size:12.5px; }
.can__n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.can__b { height:9px; border-radius:5px; background:#EEF2F6; overflow:hidden; }
.can__b i { display:block; height:100%; background:linear-gradient(90deg,#D98324,#E8A85C); }
.can__v { text-align:right; font-weight:600; }
.can__d { font-size:11px; color:var(--muto); }
@media (max-width:700px) {
  .can li { grid-template-columns:1fr auto; gap:3px 10px; }
  .can__b { grid-column:1 / -1; } .can__d { grid-column:1; }
}

/* le avvertenze lunghe stanno dietro la "i": vedi SPIEGAZIONI */

/* ── scheda di sopralluogo ───────────────────────────────────────
   Quarantanove campi non si mostrano tutti insieme: le sezioni sono
   quelle della scheda cartacea, e ognuna dice quanti campi ha pieni. */
.sop__t { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modale--largo { max-width:940px; }
.sop__testa { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  padding:14px; border-radius:12px; background:var(--sfondo); border:1px solid var(--line);
  margin-bottom:16px; }
.sop__nav { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.sop__s { padding:6px 11px; border-radius:20px; border:1px solid var(--line); background:var(--sup);
  font:inherit; font-size:11.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .15s, border-color .15s, color .15s; }
.sop__s i { font-style:normal; font-size:10px; color:var(--muto);
  font-family:'IBM Plex Mono',monospace; }
.sop__s:hover { border-color:var(--blu); }
/* Il selezionato si distingueva solo per il fondo navy col testo
   bianco: dove il fondo non veniva applicato restava bianco su bianco e
   spariva. Bordo spesso e testo scuro funzionano sempre. */
.sop__s.is-on { background:#E7EEF6; border-color:var(--navy); border-width:2px;
  padding:5px 10px; color:var(--navy); font-weight:600; }
.sop__s.is-on i { color:var(--navy); opacity:.7; }
.sop__tot { margin-left:auto; font-size:11px; color:var(--muto); }
.sop__campi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; }
.sop__campi textarea { width:100%; resize:vertical; font:inherit; font-size:13px;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--sup); }
.chip--sop { font-size:10.5px; padding:2px 9px; border-radius:20px; }
.chip--sop-fatto { background:#EEF3F8; color:#1D5B8F; }
.chip--sop-valutazione { background:#FBF0E4; color:#8A5A1E; }
.chip--sop-stima { background:#FBF4E8; color:#7A5A1E; }
.chip--sop-presentata { background:#F0EDF8; color:#5A4A8C; }
.chip--sop-incarico { background:#EAF4F0; color:#14614A; }
.chip--sop-perso { background:#F2F4F6; color:#6B7683; }
@media (max-width:640px) { .sop__campi { grid-template-columns:1fr; } }

/* si / no / non lo so: in sopralluogo il terzo e' una risposta vera,
   e senza di lui si finisce per scrivere "no" a quello che non si e'
   guardato */
.sop__si { display:inline-flex; gap:2px; margin-top:4px; }
.sop__sib { padding:5px 13px; border:1px solid var(--line); background:var(--sup);
  color:var(--ink); font:inherit; font-size:12px; cursor:pointer;
  transition:background .12s, color .12s; }
.sop__sib:first-child { border-radius:8px 0 0 8px; }
.sop__sib:last-child { border-radius:0 8px 8px 0; }
.sop__sib.is-on { background:var(--navy); border-color:var(--navy); color:#fff; }
.sop__sib:last-child.is-on { background:var(--muto); border-color:var(--muto); }

/* ── i tre momenti della scheda ──────────────────────────────────
   Meta' dei campi resta bianca in sopralluogo, e sono sempre gli
   stessi: visura, APE, conformita'. Non e' distrazione, e' che quei
   dati non ci sono ancora. */
.sop__mom { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:7px; margin-bottom:8px; }
.sop__m { display:flex; flex-direction:column; gap:3px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--sup); font:inherit; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s; }
.sop__m b { font-size:12px; }
.sop__m i { font-style:normal; font-size:10.5px; color:var(--muto);
  font-family:'IBM Plex Mono',monospace; }
.sop__m:hover { border-color:var(--blu); }
.sop__m.is-on { border-color:var(--navy); background:#EEF3F8; }
.sop__m--tutti { justify-content:center; align-items:center; font-size:12px; padding:9px 16px; }
.sop__bar { display:block; height:4px; border-radius:3px; background:#E3E9EF; overflow:hidden; }
.sop__bar u { display:block; height:100%; background:var(--verde); text-decoration:none; }
.sop__spiega { margin:0 0 14px; font-size:11.5px; color:var(--muto); }
@media (max-width:640px) { .sop__mom { grid-template-columns:1fr 1fr; } }

/* ── scelta multipla a pastiglie ─────────────────────────────────
   In sopralluogo si tocca, non si scrive: tre tocchi invece di
   ventidue lettere, e il proprietario continua a parlare. */
.sop__mu { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.sop__mub { padding:6px 12px; border-radius:20px; border:1px solid var(--line);
  background:var(--sup); color:var(--ink); font:inherit; font-size:12px; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s; }
.sop__mub:hover { border-color:var(--blu); }
.sop__mub.is-on { background:var(--navy); border-color:var(--navy); color:#fff; font-weight:500; }

/* ── sotto-schede di Acquisizioni ────────────────────────────────
   Sopralluoghi, incarichi e riepilogo sono tre cose diverse: una
   schermata sola le mescolava. */
.sub { display:flex; gap:3px; margin-bottom:18px; padding:4px; border-radius:12px;
  background:var(--sfondo); border:1px solid var(--line); }
.sub__b { flex:1; padding:9px 14px; border-radius:9px; border:0; background:transparent;
  font:inherit; font-size:13px; cursor:pointer; color:var(--muto);
  transition:background .15s, color .15s; }
.sub__b:hover { color:var(--ink); }
.sub__b.is-on { background:var(--sup); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgba(15,46,77,.1); }

/* quanto e' piena una scheda: sotto il 30% e' un promemoria */
.piena { display:inline-flex; align-items:center; gap:7px; position:relative;
  width:74px; height:16px; }
.piena::before { content:""; position:absolute; left:0; right:32px; top:6px; height:5px;
  border-radius:3px; background:#E8EDF2; }
.piena i { position:absolute; left:0; top:6px; height:5px; border-radius:3px; max-width:42px; }
.piena b { position:absolute; right:0; font-size:11px; font-family:'IBM Plex Mono',monospace; }
.piena--bassa i { background:#C0392B; } .piena--bassa b { color:#8C2B22; }
.piena--media i { background:#D98324; } .piena--media b { color:#8A5A1E; }
.piena--ok i { background:#3FA34D; } .piena--ok b { color:#14614A; }
.piena--alta i { background:#14614A; } .piena--alta b { color:#14614A; font-weight:600; }

/* ══ SOPRALLUOGO SUL TELEFONO ═════════════════════════════════════
   La scheda si compila in casa, in piedi, con una mano, mentre il
   proprietario parla. Su schermo stretto tutto quello che vale su
   desktop va rifatto: bersagli piu' grandi del dito, una colonna
   sola, e la tastiera che non copre il campo su cui stai scrivendo. */
@media (max-width: 640px) {
  /* A tutto schermo va SOLO la scheda di sopralluogo, che si compila in
     piedi. La regola valeva per ogni .modale--largo, e lo spazio
     riservato ai pulsanti fissi finiva per nascondere il "Chiudi" delle
     altre: sembrava che la pagina non scorresse. */
  .velo:has(.sop__t) { padding: 0; align-items: stretch; }
  .modale--largo:has(.sop__t) { max-width: 100%; width: 100%; border-radius: 0;
    max-height: 100vh; height: 100vh; padding: 14px 14px 90px;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

  /* tutte le altre restano riquadri che scorrono, con il fondo
     raggiungibile */
  .velo { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .modale { max-height: none; margin: 10px auto 24px; }

  .sop__t { position: sticky; top: -14px; z-index: 3; background: var(--sup);
    padding: 12px 0 10px; margin: -14px 0 0; }

  /* i tre momenti: due colonne, il testo non si spezza */
  .sop__mom { grid-template-columns: 1fr 1fr; gap: 6px; }
  .sop__m { padding: 10px; }
  .sop__m b { font-size: 12.5px; }
  .sop__m--tutti { grid-column: 1 / -1; }

  /* le sezioni scorrono in orizzontale invece di andare a capo per
     quattro righe e mangiare mezzo schermo */
  .sop__nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: 10px; margin: 0 -14px 12px;
    padding-left: 14px; padding-right: 14px; }
  .sop__nav::-webkit-scrollbar { display: none; }
  /* 44px e' il bersaglio che si centra col pollice senza guardare:
     39 sembrano abbastanza e non lo sono. */
  .sop__s { flex: 0 0 auto; scroll-snap-align: start; padding: 11px 15px;
    font-size: 13px; min-height: 44px; }
  .sop__s.is-on { padding: 10px 14px; }
  .sop__tot { display: none; }

  /* una colonna sola: due campi affiancati su 360px sono illeggibili */
  .sop__campi { grid-template-columns: 1fr; gap: 14px; }
  .sop__campi .campo span { font-size: 12.5px; }
  .sop__campi input, .sop__campi select, .sop__campi textarea {
    font-size: 16px;          /* sotto i 16px iOS ingrandisce la pagina da solo */
    padding: 12px 12px; min-height: 46px; }
  .sop__campi textarea { min-height: 84px; }

  /* bersagli grandi quanto un dito: 44px e' il minimo che si centra
     senza guardare */
  .sop__sib { padding: 11px 20px; font-size: 14px; min-height: 44px; flex: 1; }
  .sop__si { width: 100%; }
  .sop__mub { padding: 10px 15px; font-size: 13.5px; min-height: 42px; }
  .sop__mu { gap: 7px; }

  .sop__testa { grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; }
  .sop__testa .campo:nth-child(n+7) { grid-column: 1 / -1; }

  /* i pulsanti restano raggiungibili col pollice, sempre visibili */
  .modale--largo:has(.sop__t) .modale__az { position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--sup); border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0; z-index: 5; box-shadow: 0 -4px 16px rgba(15,46,77,.08); }
  .modale--largo:has(.sop__t) .modale__az2 { flex: 1; justify-content: flex-end; }
  .modale--largo:has(.sop__t) .modale__az .btn { min-height: 44px; }
  .modale__az .btn { min-height: 44px; }

  /* sotto-schede a tutta larghezza */
  .sub__b { padding: 11px 8px; font-size: 12.5px; }

  /* l'elenco dei sopralluoghi diventa una scheda per riga: una tabella
     a sei colonne su 360px non si legge, si indovina */
  .tab--sop thead { display: none; }
  .tab--sop, .tab--sop tbody, .tab--sop tr, .tab--sop td { display: block; width: 100%; }
  .tab--sop tr { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 9px; background: var(--sup); position: relative; }
  .tab--sop td { border: 0; padding: 0 0 5px; text-align: left !important; }
  .tab--sop td:first-child { position: absolute; right: 14px; top: 13px;
    font-size: 11px; color: var(--muto); padding: 0; }
  .tab--sop td:nth-child(2) strong { font-size: 15px; }
  .tab--sop td:last-child { padding-top: 8px; }
  .tab--sop .piena { width: 100%; }
  .tab--sop .piena::before { right: 40px; }
  .tab--sop .piena i { max-width: none; width: auto; }
}

/* ── la sequenza del sopralluogo ─────────────────────────────────
   Sette schede piccole non le colpiva nessuno: adesso sono passi
   grandi, e sotto ci sono avanti e indietro. Si puo' andare avanti
   anche a meta' \u2014 il proprietario non aspetta. */
.sop__passi { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:6px;
  margin-bottom:16px; }
.sop__p { display:flex; flex-direction:column; gap:2px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--sup); font:inherit; cursor:pointer;
  text-align:left; min-height:52px; transition:border-color .15s, background .15s; }
.sop__p b { font-size:12.5px; line-height:1.25; }
.sop__p i { font-style:normal; font-size:10.5px; color:var(--muto);
  font-family:'IBM Plex Mono',monospace; }
.sop__p:hover { border-color:var(--blu); }
.sop__p.is-on { border-color:var(--navy); border-width:2px; padding:10px 11px; background:#EEF3F8; }
.sop__p.is-on b { color:var(--navy); font-weight:650; }
.sop__p.is-fatto i { color:var(--verde); }
.sop__p.is-fatto.is-on i { color:var(--verde); }

.sop__vai { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line); }
.sop__vaiq { flex:1; text-align:center; font-size:11.5px; color:var(--muto); }
.sop__vai .btn { min-width:120px; }

/* ══ RESPONSIVE, DAVVERO ══════════════════════════════════════════
   Misurando le schermate a 390px venivano fuori sbordamenti da 1300
   pixel: tabelle a otto colonne e righe con colonne fisse che sommate
   fanno 750px minimo. Su desktop non si vede, sul telefono la pagina
   scorre di lato e ogni cosa sembra disallineata.

   Due regole generali invece di una toppa per componente:
     - le tabelle scorrono da sole in orizzontale, la pagina no
     - le righe a griglia diventano una colonna
   Piu' una: niente testo sotto gli 11px, che sul telefono non si legge
   nemmeno con gli occhiali. */

@media (max-width: 900px) {
  /* La tabella scorre dentro il suo riquadro. Meglio di comprimerla
     fino a renderla illeggibile, e meglio di nasconderne le colonne:
     il dato c'e', basta scorrere. */
  .card table.tab, table.tab { display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.tab thead, table.tab tbody { display: table; width: 100%; min-width: 640px; }
  table.tab tr { display: table-row; }
  table.tab th, table.tab td { display: table-cell; }
  /* quelle gia' rifatte a schede non devono tornare tabelle */
  table.tab--sop { display: table; overflow: visible; }

  /* le righe degli elenchi: una colonna, non sei */
  /* Le righe a sei colonne fisse sommano 750px: sotto quella soglia si
     impilano invece di stringersi fino a diventare illeggibili. */
  /* La seconda colonna ha una misura fissa, non "auto": ogni riga e'
     una griglia a se', e con auto la sua larghezza dipende dal proprio
     contenuto \u2014 gli importi finiscono a x diversi riga per riga, ed e'
     esattamente il disallineamento che si vede scorrendo l'elenco. */
  .riga, .riga--k, .riga--inc, .riga--emessa { grid-template-columns: minmax(0,1fr) 104px !important;
    gap: 4px 10px !important; padding: 12px 14px !important; }
  .riga > *, .riga--k > *, .riga--inc > * { text-align: left !important; min-width: 0; }

  /* i pannelli a colonne fisse */
  .tre-col, .griglia-ag, .stats { grid-template-columns: 1fr 1fr !important; }
  .sop__testa { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  .tre-col, .griglia-ag, .stats { grid-template-columns: 1fr !important; }
  table.tab thead, table.tab tbody { min-width: 560px; }

  /* NIENTE SOTTO GLI 11,5px.
     Misurando le schermate a 390px venivano fuori 123 pezzi di testo a
     9, 10 e 10,5 pixel: etichette, pastiglie di stato, numerini sui
     grafici. Nati per stare stretti su un monitor, dove pero' li leggi
     da mezzo metro. Sul telefono, in piedi, non si leggono.

     Avevo provato una regola sola su tutti gli elementi foglia, ma
     "max(11.5px, 1em)" sovrascrive anche chi e' gia' grande: le cifre da
     21px tornavano a 16 e la gerarchia spariva. In CSS non si puo' dire
     "alza solo chi e' sotto", quindi si elencano quelli bassi. */
  .chip, .cod, .sotto, .cap, .legenda, .piccolo, .occhiello, .campo__nota,
  .comp__s, .ms__m, .ms__r, .ms__d, .ms__hov, .msum__l, .mese__l, .sp__b, .ni-b,
  .att__a, .can__d, .piena b { font-size: 11.5px !important; }
  /* I tag senza classe \u2014 em, i, s dentro le righe \u2014 sono nati piccoli
     per stare in colonna. Ma alzarli con "inherit" appiattiva anche i
     numeri grandi: il 21px di una cifra tornava al 13 del testo intorno,
     e due righe distinte si leggevano come una frase sola.
     Quindi solo un minimo, senza toccare chi e' gia' grande. */
  .app .riga em, .app .riga i, .app .riga s, .app td em, .app td i, .app td s,
  .app li em, .app li i, .app li s { font-size: 11.5px; }
  .app th { font-size: 11.5px !important; }
  .app text { font-size: 11px; }
  .nota, .hint { font-size: 12.5px !important; line-height: 1.6 !important; }

  /* la barra in alto e le azioni non si accavallano */
  .testa { flex-direction: column; align-items: stretch; gap: 10px; }
  .testa__az { width: 100%; }
  .testa__az .btn { flex: 1 1 auto; }
  .card__testa { flex-direction: column; align-items: flex-start; gap: 6px; }
  .card__az { width: 100%; justify-content: space-between; }

  /* i filtri scorrono invece di andare a capo tre volte */
  .filtri { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; }
  .filtri::-webkit-scrollbar { display: none; }
  .filtri > * { flex: 0 0 auto; }
}

/* ── la "i" sul telefono ─────────────────────────────────────────
   Un riquadro da 340px ancorato a un'icona di 15 non ci sta su 390:
   finiva mezzo fuori schermo, tagliato a sinistra, e si leggeva
   "carico e chi lo chiude" invece di "chi prende l'incarico e chi lo
   chiude". Su schermo stretto va ancorato allo schermo, non all'icona. */
@media (max-width: 640px) {
  .sp__m, .sp__m--dx {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; max-height: 62vh; overflow-y: auto;
    border-radius: 14px; padding: 16px 17px;
    box-shadow: 0 -8px 40px -8px rgba(15,46,77,.35); }
  .sp__velo { background: rgba(15,46,77,.28); }
  .sp__b { width: 20px; height: 20px; font-size: 12px; }
}

/* ── la X in testa alle modali ───────────────────────────────────
   Il pulsante "Chiudi" c'era, ma in fondo: con un elenco lungo bisogna
   scorrere fino in basso per uscire, e sul telefono sembra che non ci
   sia modo di tornare indietro. L'intestazione resta ferma in cima. */
.modale__t--x { display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:-22px; z-index:4; background:var(--sup);
  margin:-22px -24px 0; padding:22px 24px 12px; }
.modale__x { flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line); background:var(--sup); font:inherit; font-size:15px;
  color:var(--muto); cursor:pointer; line-height:1;
  transition:background .15s, color .15s, border-color .15s; }
.modale__x:hover { background:#FBECEA; border-color:#E0B4A6; color:#8C2B22; }
@media (max-width:640px) {
  .modale__t--x { top:-18px; margin:-18px -18px 0; padding:16px 18px 10px; }
  .modale__x { width:40px; height:40px; font-size:17px; }
}

/* ── il sopralluogo su iPhone: spazio ai campi ───────────────────
   Con i momenti su due righe e i sette passi in griglia si arrivava a
   400 pixel di navigazione prima del primo campo, su uno schermo da
   844: si scorreva sempre, e la scheda sembrava fatta di pulsanti.
   Tutto quello che serve per orientarsi sta in due righe. */
@media (max-width: 640px) {
  /* i momenti: una riga sola, compatti */
  .sop__mom { display: flex; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -14px 8px; padding: 0 14px 4px; }
  .sop__mom::-webkit-scrollbar { display: none; }
  .sop__m { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px;
    padding: 9px 13px; min-height: 44px; }
  .sop__m b { font-size: 12.5px; white-space: nowrap; }
  .sop__m .sop__bar { display: none; }
  .sop__m--tutti { grid-column: auto; }
  .sop__spiega { display: none; }

  /* i passi: una riga che scorre, e quello aperto si porta in vista */
  .sop__passi { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; grid-template-columns: none;
    margin: 0 -14px 14px; padding: 0 14px 6px; }
  .sop__passi::-webkit-scrollbar { display: none; }
  .sop__p { flex: 0 0 auto; scroll-snap-align: start; min-width: 132px;
    padding: 10px 13px; min-height: 50px; }

  /* la barra avanti/indietro sta in fondo, fissa, sopra il salva */
  .sop__vai { position: fixed; left: 0; right: 0; bottom: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--sup); border-top: 1px solid var(--line); margin: 0;
    padding: 9px 14px; z-index: 4; }
  .sop__vai .btn { min-width: 0; flex: 0 0 auto; min-height: 44px; }
  .sop__vaiq { font-size: 12px; }
  /* spazio in fondo per non finire sotto le due barre */
  .modale--largo:has(.sop__t) { padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }
}

/* l'intestazione della scheda, richiudibile: il riassunto di una riga
   dice cosa c'e' dentro senza doverla aprire */
/* Su schermo largo l'intestazione si vede sempre: il pulsante per
   aprirla e chiuderla serve solo dove lo spazio manca. */
.sop__apri { display:none; }
@media (max-width: 640px) {
  .sop__apri { display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; min-height:46px; padding:11px 13px; margin-bottom:12px;
    border-radius:10px; border:1px solid var(--line); background:var(--sfondo);
    font:inherit; font-size:12.5px; cursor:pointer; text-align:left; }
  .sop__apri span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sop__testa--chiusa { display:none; }
  .sop__apri i { font-style:normal; font-size:15px; color:var(--muto); flex:0 0 auto; }
}

/* due numeri per riga: la mediazione in agenzia e la quota dell'agente.
   Una schermata intitolata a una persona deve mostrare la sua cifra,
   non solo il totale. */
.tipi--due .tipi__v { display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  line-height:1.25; }
.tipi--due .tipi__v em { font-style:normal; font-size:11.5px; color:var(--muto); font-weight:400; }

/* la parte che va all'agente, accanto alla sua cifra: dice quanto costa
   quel tipo di affare, e fra vendita e stanze cambia parecchio */
.tipi--due .tipi__v u { text-decoration:none; margin-left:6px; padding:1px 6px;
  border-radius:20px; background:#EEF3F8; color:var(--blu); font-size:11.5px; }

/* ── acquisiti e chiusi per tipo ─────────────────────────────────
   Cinque numeri per riga, di cui tre percentuali, non si leggono: per
   capire quale fosse quale bisognava andare alla nota in fondo.
   Adesso ogni riga ha un numero solo \u2014 la mediazione \u2014 e le colonne
   sono a larghezza fissa, cosi' scorrendo l'occhio scende dritto.
   Il dettaglio compare passando sopra: c'e' quando serve, non prima. */
.tp { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; }
.tp li { display:grid; grid-template-columns:118px 26px minmax(0,1fr) 96px;
  align-items:center; gap:12px; padding:11px 10px; border-radius:9px;
  position:relative; cursor:default; transition:background .15s; }
.tp li + li { box-shadow:inset 0 1px 0 var(--line); }
.tp li:hover, .tp li:focus-visible { background:#F5F8FA; outline:none; }

.tp__t { font-size:13.5px; font-weight:600; letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp__n { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muto);
  text-align:right; }
.tp__b { height:8px; border-radius:5px; background:#EDF1F5; overflow:hidden; }
.tp__b i { display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,#2E6DA4,#4C8AC6); }
.tp__v { font-size:14px; text-align:right; letter-spacing:-0.02em; }

/* il dettaglio: sotto la riga, solo quando ci passi sopra */
.tp__d { grid-column:1 / -1; display:flex; gap:18px; flex-wrap:wrap;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .18s ease, opacity .18s ease, margin-top .18s ease; }
.tp li:hover .tp__d, .tp li:focus-visible .tp__d { max-height:40px; opacity:1; margin-top:7px; }
.tp__d em { font-style:normal; font-size:11.5px; color:var(--muto);
  display:flex; align-items:baseline; gap:5px; }
.tp__d em b { font-size:12.5px; color:var(--ink); }
.tp__d u { text-decoration:none; padding:1px 7px; border-radius:20px;
  background:#EEF3F8; color:var(--blu); font-size:11px; }

/* sul telefono il mouse non c'e': il dettaglio resta sempre aperto */
/* IL SOPRALLUOGO SI FA IN PIEDI, COL TABLET IN MANO.
   Su iPad verticale (834px) nessuna soglia interveniva e i pulsanti
   restavano alti 29px: sotto i 44 raccomandati, si sbaglia bersaglio
   mentre il proprietario parla. */
@media (min-width:641px) and (max-width:1024px) and (pointer:coarse) {
  .sop__sib, .sop__mub { padding:10px 18px; font-size:14px; min-height:44px; }
  .sop__si { gap:3px; }
}

@media (max-width: 760px) {
  .tp li { grid-template-columns:minmax(0,1fr) 26px 96px; gap:8px 10px; padding:12px 8px; }
  .tp__b { grid-column:1 / -1; order:5; }
  .tp__d { max-height:none; opacity:1; margin-top:7px; order:6; }
}

/* i tre numeri di sintesi nella verifica: se questi tornano con la
   schermata Agenti, l'elenco sotto serve solo da prova */
.vf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.vf > div { display:flex; flex-direction:column; gap:2px; padding:11px 13px;
  border-radius:10px; background:#F5F8FA; border:1px solid var(--line); }
.vf span { font-size:11px; color:var(--muto); }
.vf b { font-size:17px; letter-spacing:-0.02em; }
@media (max-width:640px) { .vf { grid-template-columns:1fr; } }

/* la quadratura: due numeri che devono coincidere, e la riga che dice
   se coincidono. Un totale plausibile non e' un totale giusto. */
.qd { width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:12.5px; }
.qd th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muto); padding:5px 8px; border-bottom:1px solid var(--line); font-weight:600; }
.qd td { padding:8px; border-bottom:1px solid var(--line); }
.qd .dx { text-align:right; }
.qd tr.qd--no { background:#FDF2F0; }
.qd b.verde { color:var(--verde); font-size:11.5px; }
.qd b.rosso { color:var(--rosso); }

/* la media in fondo alla composizione: una sola, dove si legge come
   risultato invece che come colonna da sommare */
.med { text-align:right; }
.med b { font-size:16px; letter-spacing:-0.02em; display:block; }
.med span { font-size:11.5px; color:var(--muto); }

/* ── ricostruire gli incarichi dalle fatture ─────────────────────
   Trenta codici pratica e tre incarichi: i dati per scriverli stanno
   gia' sulle fatture, riscriverli a mano e' lavoro che la macchina
   puo' fare senza errori di battitura. */
.ric { margin-top:14px; }
.ric__t { display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding-bottom:12px; margin-bottom:2px; border-bottom:1px solid var(--line); }
.ric__tutti { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.ric__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-top:0;
  border-radius:0 0 11px 11px; overflow:hidden; }
.ric__l li { display:grid; grid-template-columns:112px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 92px;
  gap:12px; align-items:center; padding:10px 13px; background:var(--surface); font-size:12.5px; }
.ric__l li label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.ric__im { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ric__im em { font-style:italic; color:var(--faint); }
.ric__d, .ric__f { font-size:11.5px; color:var(--muto); }
.ric__r { text-align:right; font-size:13px; }
@media (max-width:860px){
  .ric__l li { grid-template-columns:1fr auto; }
  .ric__im, .ric__d, .ric__f { grid-column:1 / -1; }
}

/* ── sistemare in blocco quello che e' nato storto ───────────────
   Correggere ventinove incarichi a mano per un errore del gestionale
   non ha senso; correggerli di nascosto nemmeno. Si mostra cosa
   cambierebbe e si decide. */
.sist { margin:0 0 18px; padding:16px 18px; border-radius:12px;
  background:#FBF4E8; border:1px solid #E8D5B0; }
.sist__t { display:block; font-family:'Archivo',system-ui,sans-serif; font-size:13px;
  color:#7A5A1E; margin-bottom:10px; }
.sist__r { display:flex; align-items:center; gap:16px; padding:10px 0; font-size:12.5px;
  line-height:1.5; }
.sist__r + .sist__r { border-top:1px solid rgba(122,90,30,.16); }
.sist__r span { flex:1 1 auto; }
.sist__r .btn { flex:0 0 auto; white-space:nowrap; }
@media (max-width:640px){
  .sist__r { flex-direction:column; align-items:stretch; gap:9px; }
}

/* Una fattura annullata da nota di credito non e' un ritardo: il denaro
   non arrivera' mai perche' non e' piu' dovuto. Giallo, non rosso. */
.st--ann, .riga .ann { color:#8A6D1E; }
.pallino.ann, .dot.ann { background:#C9A227; }
.badge.ann { background:#FBF4E0; color:#8A6D1E; border-color:#E8D8A8; }
.chip--annullata { background:#FBF4E0; color:#8A6D1E; border-color:#E8D8A8; }
.chip__n { display:block; font-style:normal; font-size:9.5px; opacity:.8; margin-top:1px; }

/* ── il numero pratica suggerito dalle locazioni ─────────────────
   Chi fattura un conduttore ha gia' quel numero: sta sulla sua
   locazione. Farlo ricopiare a mano significa accettare che ogni tanto
   venga sbagliato, e un codice sbagliato scollega l'affare senza che
   nessuno se ne accorga. */
/* Il suggerimento dalle locazioni: .sug non ha bordo ne' riempimento,
   quindi uno sfondo senza contorno si allargava per tutta la riga e
   sembrava fuori dal riquadro. Qui diventa una pastiglia con misure
   proprie, che sta dentro il campo. */
button.sug--loc { display:inline-block; width:auto; max-width:100%; background:#EAF4F0;
  border:1px solid #BFDDD0; border-radius:7px; color:#1F6146;
  padding:4px 9px; margin:3px 3px 0 0; text-decoration:none; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top; }
.sug--loc:hover { background:#DCEEE4; color:#12452F; }
.sug__no { display:block; width:100%; max-width:100%; font-style:normal; font-size:11.5px;
  color:var(--muto); line-height:1.5; margin-top:2px; overflow-wrap:anywhere; }

/* ── le pratiche di un incarico ──────────────────────────────────
   Un mandato su tre stanze produce tre affari, e il campo numero
   pratica ne contiene uno solo: senza questo elenco non c'e' modo di
   accorgersi che gli altri due mancano o sono sbagliati. */
.prat { display:block; }
.prat__t { display:block; font-family:'Archivo',system-ui,sans-serif; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muto); margin-bottom:7px; }
.prat__t i { display:block; font-style:normal; text-transform:none; letter-spacing:0;
  font-size:11.5px; font-family:inherit; color:var(--muto); margin-top:2px; }
.prat__l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--linea); border:1px solid var(--linea); border-radius:10px; overflow:hidden; }
.prat__l li { display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:9px 12px; background:var(--sfondo); font-size:12.5px; }
.prat__l li.is-no { background:#FBF4E8; box-shadow:inset 3px 0 0 #C9A227; }
.prat__l li > span { min-width:0; display:flex; flex-direction:column; gap:1px; }
.prat__l li i { font-style:normal; font-size:11px; color:var(--muto); }
.prat__l li em { font-style:normal; font-size:11px; color:var(--muto); text-align:right; }
@media (max-width:640px){
  .prat__l li { grid-template-columns:80px 1fr; }
  .prat__l li em { grid-column:1 / -1; text-align:left; }
}
.campo__sug2 { display:block; font-style:normal; font-size:11.5px; color:var(--muto); margin-top:4px; }
.sug--mini { font-size:11.5px; padding:2px 8px; margin-left:2px; }

/* ── i dati del cliente si correggono dalla fattura ──────────────
   Accorgersi che manca un telefono mentre si compila e dover uscire,
   cercare il cliente e tornare significa che quel telefono non verrà
   mai scritto. */
.cli-box__g label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cli-box__g label input { width:100%; font:inherit; font-size:12.5px; padding:3px 7px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--inch); }
.cli-box__g label input:hover { border-color:var(--linea); background:var(--sfondo); }
.cli-box__g label input:focus { border-color:var(--accento); background:#fff; outline:none; }
.cli-box__g label input::placeholder { color:var(--muto); }
/* nome e cognome scrivibili nel titolo della scheda cliente */
.cli-nomi { display:inline-flex; gap:6px; min-width:0; }
.cli-nome { font:inherit; font-size:inherit; font-weight:inherit; color:inherit;
  padding:2px 6px; border:1px solid transparent; border-radius:6px;
  background:transparent; min-width:90px; max-width:180px; }
.cli-nome:hover { border-color:var(--linea); background:var(--sfondo); }
.cli-nome:focus { border-color:var(--accento); background:#fff; outline:none; }
/* un codice pratica che manca: si vede, senza gridare */
.manca { color:var(--muto); opacity:.55; }
/* un codice pratica che manca: si vede, senza gridare */
.manca { color:var(--muto); opacity:.55; }
/* il codice pratica nell'elenco: si legge scorrendo, non si apre */
.lc__prat { font-size:11px; color:var(--muto); margin-top:1px; }
.lc__prat .manca { opacity:.6; font-style:italic; }

/* elenco dei documenti di spesa nell'area del conduttore */
h3.sez{ font-family:'Archivo',system-ui,sans-serif; font-size:15px;
  margin:22px 0 6px; color:var(--ink-strong,#0A413C); font-weight:600 }
sup.gg{ color:#8A6A2F; font-weight:400 }

/* scomposizione del giro d'affari per origine */
.tab--scomp em.sotto{ display:block; font-style:normal; font-size:11.5px;
  color:var(--muted,#6B7683); margin-top:1px; font-weight:400 }
.tab--scomp tfoot td{ border-top:2px solid var(--line-strong,#C9CEC4) }


/* ── IL SOPRALLUOGO SI FA ANCHE DA IPAD ──────────────────────────
   I bersagli grandi stavano solo sotto i 640px. Su iPad, che e' il
   posto piu' probabile in cui compilare una scheda in casa altrui,
   i pulsanti restavano alti 29px: si sbaglia a toccarli tenendo il
   tablet con una mano. Si guarda il dispositivo, non la larghezza:
   pointer:coarse dice che si tocca con un dito. */
@media (pointer: coarse) and (min-width: 641px) {
  .sop__sib { padding:9px 18px; font-size:13.5px; min-height:44px; }
  .sop__mub { padding:9px 15px; font-size:13px; min-height:44px; }
  .sop__si { gap:3px; }
  .sop__mu { gap:7px; }
  .sop__campi input, .sop__campi select, .sop__campi textarea {
    font-size:16px; min-height:44px; }
  .sop__s { min-height:40px; }
}

/* IL PULSANTE PRIMARIO ERA INVISIBILE.
   ".app button" imposta color:var(--ink) e ha specificita' (0,1,1);
   ".btn--primo" ne ha (0,1,0), quindi perdeva: testo blu scuro su
   sfondo blu scuro. Si vedeva solo la forma del bottone.
   Qui si riportano i colori dei pulsanti sopra la regola generica,
   con la stessa .app davanti che alza la specificita' a (0,2,0). */
/* Solo i pulsanti con lo sfondo pieno: quelli normali restano come
   erano, con il colore che gli dava ".app button". Forzandoli tutti a
   var(--nero) avevo cambiato l'aspetto di ogni pulsante dell'app per
   correggere un difetto che ne riguardava uno. */
.app .btn--primo { color:#fff }

/* rilievo delle stanze in sopralluogo */
.mis{ display:flex; flex-direction:column; gap:6px }
.mis__t,.mis__r{ display:grid; gap:7px;
  grid-template-columns:1.5fr .8fr .8fr .7fr 2fr 40px; align-items:center }
.mis__t{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; padding:0 2px }
.mis__r input{ width:100%; min-width:0 }
.mis__a{ font-variant-numeric:tabular-nums; font-size:13px; text-align:right;
  color:var(--muted); padding-right:4px }
.mis__x{ padding:8px 0; min-width:0 }
.mis__b{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px }
.mis__tot{ font-size:12px; color:var(--muted) }
.mis__cad{ margin-top:8px; border:1px solid var(--linea,#DBE1E9); border-radius:9px;
  padding:10px 12px }
.mis__cad summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--verde) }
.mis__cad textarea{ width:100%; margin-top:9px; font-family:ui-monospace,monospace;
  font-size:12px; line-height:1.6 }
.mis__n{ margin:7px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5 }
/* sul telefono la griglia non sta: ogni riga diventa un blocco */
@media (max-width:640px){
  .mis__t{ display:none }
  .mis__r{ grid-template-columns:1fr 1fr; gap:6px;
    border:1px solid var(--linea,#DBE1E9); border-radius:9px; padding:9px; position:relative }
  .mis__r input:first-child{ grid-column:1 / -1 }
  .mis__r input:nth-child(5){ grid-column:1 / -1 }
  .mis__a{ text-align:left; grid-column:1 / -1; font-size:12px }
  .mis__x{ position:absolute; top:6px; right:6px; width:34px; padding:4px 0 }
}

/* I PULSANTI DELLE SEZIONI USCIVANO DALLO SCHERMO.
   In una griglia o in un flex ogni figlio ha min-width:auto: non si
   restringe sotto la larghezza del proprio contenuto, e "Composizione
   0 su 12" spingeva il pulsante fino a 157px fuori dal telefono. Fuori
   non si vede e non si preme: in sopralluogo significa non poter
   cambiare sezione. */
.sop__m, .sop__p { min-width:0; }
.sop__m b, .sop__m i, .sop__p b, .sop__p i { min-width:0; overflow-wrap:anywhere; }
@media (max-width:430px){
  .sop__mu { gap:5px; }
  .sop__m { flex:1 1 calc(50% - 3px); }
  .sop__m--tutti { flex:1 1 100%; }
  /* LA STRISCIA DEI PASSI SCORRE, MA NON SI VEDEVA CHE SCORRESSE.
     Sul telefono le sezioni stanno su una riga con overflow-x: chi non
     lo sa pensa che ce ne siano solo due e non trova le altre. Una
     sfumatura sul bordo destro dice che c'e' altro oltre. */
  .sop__wrap { position:relative; }
  .sop__wrap::after{ content:""; position:absolute; top:0; bottom:14px; right:0; width:26px;
    background:linear-gradient(to right, rgba(255,255,255,0), var(--sfondo,#F3F5F8));
    pointer-events:none; }
}

/* TESTO NUDO SOPRA UNO SFONDO SCURO.
   Dentro una scheda selezionata (.ms.is-on) i figli hanno colori propri
   e chiari, ma quello che sta nel pulsante senza un involucro eredita
   var(--ink): blu scuro su blu scuro, contrasto 1,32. Si vedeva la
   forma del riquadro e basta. */
/* Le sole cifre dentro un SVG non hanno un involucro con colore
   proprio: ereditano var(--ink) e restano blu sul fondo blu. Le avevo
   tolte credendole ridondanti, e il controllo le ha rivolute subito:
   "114k" e "500" tornavano invisibili. */
.app .ms.is-on { color:#fff; }
.app .ms.is-on svg, .app .ms.is-on text { fill:currentColor; color:#fff; }
.app .ms.is-on .sp__b { color:rgba(255,255,255,.86); border-color:rgba(255,255,255,.5); }

/* Etichette e codici che restavano appena sotto la soglia: schiarite o
   scurite del minimo, la tinta resta quella. */
.app .scheda-ag.is-on .scheda-ag__r { color:#8AAED3; }
.app .cod--es { color:#3972AB; border-color:#3972AB; }
/* il pallino informativo dentro una scheda selezionata: il bordo e la
   lettera prendevano var(--ink) sul fondo scuro */
.app .scheda-ag.is-on .sp__b, .app .ms.is-on .sp__b {
  color:rgba(255,255,255,.88); border-color:rgba(255,255,255,.55); }

/* Il riquadro della produzione ha il fondo scuro: i comandi al suo
   interno devono prendere il colore chiaro del riquadro, non quello
   che ".app button" darebbe loro per difetto. */
.app .prod .sp__b { color:rgba(255,255,255,.88); border-color:rgba(255,255,255,.55); }
/* Il filtro selezionato ha gia' il fondo bianco e il testo scuro: va
   bene com'e'. Quelli non selezionati stanno sul velo chiaro sopra il
   blu del riquadro, e il loro azzurro si fermava a 4,11. Si schiarisce
   solo quello, senza toccare il selezionato. */
.app .prod__testa .filtro:not(.is-on):not([aria-pressed="true"]),
.app .flusso__sw .filtro:not(.is-on):not([aria-pressed="true"]) { color:#AFCAE7; }

/* filtri dell'elenco sopralluoghi */
.fsop{ display:flex; gap:9px 16px; flex-wrap:wrap; align-items:center; margin:2px 0 12px }
.fsop__g{ display:flex; gap:5px; flex-wrap:wrap }
.fsop__n{ font-size:11.5px; color:var(--muto); margin-left:auto }
.fsop .filtro i{ font-style:normal; opacity:.62; margin-left:2px; font-size:10.5px }
/* la pastiglia del tipo di operazione */
.op{ display:inline-block; font-size:10.5px; font-weight:600; padding:2px 8px;
  border-radius:99px; white-space:nowrap; letter-spacing:.02em }
.op--v{ background:#EAF2FB; color:#2E5E93 }
.op--l{ background:#E9F3EE; color:#20654F }
.op--s{ background:#F5EFE3; color:#7A5A22 }
@media (max-width:640px){
  .fsop__n{ margin-left:0; width:100% }
}

/* il numero di versione nella barra si fermava a 2,5 di contrasto */
.app .cima__nome em { color:#7897B8; }

/* IL MENU IN BASSO HA IL FONDO SCURO COME LA BARRA IN ALTO.
   Non dichiarava un colore proprio: finita l'imposizione di var(--ink)
   sui pulsanti, ereditava il nero del testo normale e restava a 1,28 di
   contrasto. Prende la stessa tinta della barra in alto, che e' gia'
   provata su questo fondo. */
.app .tabbar { color:#C3D3E4; }
/* La voce selezionata NON va toccata: su schermo largo prende gia' un
   fondo bianco con testo scuro, e forzare il bianco la fa sparire.
   Bastava dare un colore alla barra: le voci normali lo ereditano. */

/* SCRITTE DENTRO I RIQUADRI SCURI.
   Etichette e percentuali sopra il fondo blu si fermavano fra 3,3 e
   4,2 di contrasto: leggibili con la luce giusta, non con il sole
   addosso. Schiarite del minimo, la tinta resta quella. */
.app .hero i, .app .hero__n { color:#90ADCD; }
/* lo stesso riquadro su fondo ocra vuole una tinta calda: l'azzurro
   chiaro su marrone si ferma a 3,41 */
.app .hero--ambra i, .app .hero--ocra i, .app .hero--ambra .hero__n,
.app .hero--ocra .hero__n { color:#EBD3B4; }
.app .flusso__t { color:#8FB6DE; }

/* Numeri di posizione su fondo bianco: il verde e il grigio chiari non
   arrivavano alla soglia. Scuriti quel tanto che basta. */
.app .rank__pos { color:#008760; }
.app .kbar__p { color:#6A7889; }

/* Percentuali e note su fondi appena tinti */
.app .flusso__q u, .app .antic__t span { color:#2F6499; }
.app .antic__t span { color:#8E4636; }

/* le coordinate bancarie nella scheda del proprietario */
.lo__iban{ grid-column:1 / -1; display:flex; gap:6px 14px; flex-wrap:wrap; align-items:baseline;
  margin-top:3px; font-size:11.5px }
.lo__iban b{ font-size:12px; letter-spacing:.02em; color:var(--ink) }
.lo__iban em{ font-style:normal; color:var(--muto) }



/* ─── LE TORTE DELLA PRODUZIONE ─────────────────────────────────────
   Il pannello blu con le due barre era alto mezza schermata e ripeteva
   la legenda due volte. Due torte dicono lo stesso in un terzo dello
   spazio, e il dettaglio si apre cliccando invece di stare sempre li'. */
.torte { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:6px; }
.torta { display:flex; flex-direction:column; gap:10px; }
.torta__t { font-size:12.5px; font-weight:600; color:#C3D3E4; letter-spacing:.01em; }
.torta__c { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.torta__g { width:132px; height:132px; flex:0 0 auto; }
.torta__f { cursor:pointer; transition:opacity .12s; }
.torta__f:hover { opacity:.82; }
.torta__v { text-anchor:middle; font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:700; fill:#fff; }
.torta__u { text-anchor:middle; font-size:8.5px; fill:#9FB6CE; letter-spacing:.06em; text-transform:uppercase; }
.torta__l { list-style:none; margin:0; padding:0; flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:5px; }
.torta__l li { display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:8px; align-items:baseline;
  font-size:12px; color:#DCE7F2; cursor:pointer; padding:2px 0; }
.torta__l li:hover { color:#fff; }
.torta__l i { width:10px; height:10px; border-radius:3px; }
.torta__l b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.torta__l em { font-style:normal; color:#9FB6CE; font-size:11px; }
.torta__l u { text-decoration:none; font-size:11.5px; }
.torta__vuoto { grid-template-columns:1fr !important; color:#9FB6CE; }
.torta__piu { align-self:flex-start; border:1px solid rgba(255,255,255,.22); background:none; color:#C3D3E4;
  border-radius:8px; padding:5px 11px; font:inherit; font-size:11.5px; cursor:pointer; }
.torta__piu:hover { border-color:rgba(255,255,255,.45); color:#fff; }
@media (max-width:520px){
  .torta__c { gap:12px; }
  .torta__g { width:110px; height:110px; }
}

/* il selettore dell'anno nella testata di Agenti */
.anno-sel { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muto); }
.anno-sel select { min-height:36px; padding:5px 10px; border-radius:9px; border:1px solid var(--line);
  background:var(--sup); font:inherit; font-size:13px; }

/* ─── LA COLONNA DI RIEPILOGO ──────────────────────────────────────────
   Su un monitor esterno le fasce laterali restavano vuote mentre la
   pagina al centro era piena di tabelle: qui ci sta il quadro di quello
   che stai guardando. Sotto i 1600px sparisce, perche' sul portatile
   stringerebbe le tabelle invece di aiutare. Stesse misure e stessi
   nomi del registro locazioni: e' la stessa cosa, e deve sembrarlo. */
.conCol { display:block; }
.conCol__c { min-width:0; }
.rip { display:none; }
@media (min-width:1400px){
  .conCol { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:10px;
    align-items:start; max-width:1660px; margin:0 auto; }
  .conCol__c .wrap { max-width:none; }
  /* ALLINEATA AL PRIMO RIQUADRO, NON AL BORDO DELLA PAGINA.
     Partiva a 34px come il contenuto, ma il contenuto sotto ha prima il
     titolo della schermata: la colonna sembrava scappata in alto, fuori
     contesto. Ora comincia dove comincia il primo riquadro.
     Alta quanto lo schermo e con il suo scorrimento: agganciata e basta,
     la sua fine si vedeva solo a fondo pagina. */
  .rip { display:block; position:sticky; top:14px; padding:96px 34px 0 0;
    max-height:100vh; overflow-y:auto; scrollbar-width:thin; }
}
.rip__c { background:var(--sup); border:1px solid var(--linea); border-radius:12px;
  padding:14px 16px; margin-bottom:12px; }
.rip__t { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muto);
  font-weight:600; margin-bottom:10px; }
.rip__t i { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muto); opacity:.75; }
.rip__x { appearance:none; background:transparent; border:0; cursor:pointer; color:var(--muto);
  font-size:13px; line-height:1; padding:2px 4px; border-radius:6px; }
.rip__x:hover { background:var(--linea); }
.rip__r { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:5px 0; font-size:12.5px; border-top:1px solid var(--linea); }
.rip__r:first-of-type { border-top:0; }
.rip__r b { font-family:'IBM Plex Mono',monospace; font-size:13px; white-space:nowrap; }
.rip__r span { color:var(--muto); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.rip__l { list-style:none; margin:0; padding:0; }
.rip__l li { padding:7px 0; border-top:1px solid var(--linea); font-size:12.5px; cursor:pointer; }
.rip__l li:first-child { border-top:0; }
.rip__l li b { display:block; font-size:12.5px; font-weight:600; }
.rip__l li em { display:block; font-style:normal; font-size:11px; color:var(--muto);
  line-height:1.4; margin-top:1px; }
.rip__vuoto { margin:0; font-size:12px; color:var(--muto); }
.rip__riapri { width:100%; }

/* ─── PERSONE E ACCESSI ────────────────────────────────────────────────
   Le due righe di campi (cambio password, impronta) e l'elenco dei
   passi per accendere gli accessi protetti. Niente di nuovo come
   linguaggio: gli stessi campi e la stessa carta del resto. */
.riga-campi { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:10px; }
.riga-campi .campo { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.riga-campi .campo span { font-size:11.5px; color:var(--muto); }
.riga-campi .campo input { width:100%; box-sizing:border-box; padding:9px 11px; font:inherit;
  font-size:13.5px; border:1px solid var(--linea); border-radius:9px; background:var(--sup);
  color:var(--ink); }
.riga-campi .campo input:focus { outline:2px solid rgba(55,109,163,.35); outline-offset:1px; }
.passi { margin:10px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; }
.passi li { margin-bottom:8px; }
.passi b { color:var(--ink); }
.spenta { opacity:.55; }
.spenta__e { display:block; font-style:normal; font-size:11px; color:var(--rosso); }

/* ─── AVVISO CHE FERMA IL LAVORO ───────────────────────────────────────
   Qualcun altro ha salvato: continuare su dati superati significa
   lavorare su numeri che non sono più quelli. Non è una notifica da
   leggere di sfuggita, è una decisione — quindi la finestra si vede da
   lontano e non si chiude cliccando fuori. */
.velo--avviso { background:rgba(11,36,64,.55); }
.modale--avviso { max-width:520px; border-top:6px solid #B0873F;
  box-shadow:0 30px 70px -30px rgba(11,36,64,.75); }
.avv__t { display:flex; align-items:center; gap:12px; padding:20px 24px 4px; }
.avv__t b { font-family:'Archivo',system-ui,sans-serif; font-size:17px; color:var(--ink); }
.avv__i { display:inline-flex; width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  align-items:center; justify-content:center; background:#FBF0E0; color:#B0873F; }
.avv__i svg { width:20px; height:20px; }
.avv__p { margin:6px 0 0; padding:0 24px; font-size:13.5px; line-height:1.6; color:var(--muto); }
.avv__az { display:flex; gap:9px; justify-content:flex-end; padding:18px 24px 20px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════
   GESTIONE CHIAMATE — stile iOS

   Marco l'ha chiesto esplicitamente, e c'e' una ragione pratica oltre
   al gusto: questa e' l'unica area del gestionale che si usa CON IL
   TELEFONO IN MANO, mentre un cliente parla dall'altra parte. Elenco
   raggruppato, righe alte, verde per procedere, rosso per rimandare:
   sono i gesti che le dita conoscono gia', e non c'e' tempo di
   impararne di nuovi mentre qualcuno aspetta.

   Le icone sono disegnate da noi in SVG. Il carattere e' quello di
   sistema del Mac, richiamato dalla catena -apple-system: non si
   distribuisce niente che non sia nostro.
   ═══════════════════════════════════════════════════════════════════ */

/* Sulla radice, non su .io: l'avviso di chiamata in arrivo compare
   ovunque nel gestionale, quindi vive FUORI da questo contenitore e
   le variabili non gli arriverebbero. */
:root { --io-verde:#34C759; --io-rosso:#FF3B30; --io-blu:#007AFF; --io-grigio:#8A8A8E; --io-verde-pieno:#177A33;
  --io-sfondo:#F2F2F7; --io-carta:#FFFFFF; --io-riga:#E5E5EA; }
.io { font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  background:var(--io-sfondo); min-height:100%; padding:8px 0 40px; }
.io .io__t { font-size:34px; font-weight:700; letter-spacing:-.4px; margin:14px 20px 10px; }
.io__g { width:20px; height:20px; flex:0 0 auto; }

/* il selettore a segmenti */
.io-seg { display:flex; gap:2px; margin:0 16px 18px; padding:2px;
  background:rgba(118,118,128,.12); border-radius:9px; }
.io-seg__b { flex:1 1 0; min-width:0; border:0; background:transparent; border-radius:7px;
  padding:6px 4px; font:inherit; font-size:13px; font-weight:500; color:#1C1C1E; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.io-seg__b--su { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600; }
.io-seg__b em { font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background:var(--io-rosso); border-radius:10px; padding:1px 6px; flex:0 0 auto; }
@media (max-width: 560px) {
  /* CINQUE SCELTE NON CI STANNO IN 375 PIXEL.
     Dividendo lo spazio in parti uguali, "Da gestire" veniva tagliato a
     meta' parola: peggio di doverlo cercare, perche' sembra un difetto.
     Qui la fila scorre di lato e ogni scelta tiene la sua larghezza -
     si vede subito che ce n'e' dell'altra, e niente e' mozzato. */
  .io-seg { margin:0 12px 16px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .io-seg::-webkit-scrollbar { display:none; }
  .io-seg__b { flex:0 0 auto; font-size:12.5px; padding:6px 11px; gap:4px; }
  .io-seg__b em { font-size:10px; padding:0 5px; }
}

/* gli elenchi raggruppati */
.io-gruppo { margin-bottom:22px; }
.io-gruppo__t { font-size:13px; font-weight:600; color:var(--io-grigio);
  text-transform:uppercase; letter-spacing:.4px; margin:0 20px 7px; }
.io-lista { background:var(--io-carta); border-radius:12px; margin:0 16px 18px;
  overflow:hidden; }
@media (min-width: 700px) {
  .io .io__t { font-size:30px; margin-left:0; margin-right:0; }
  .io-seg, .io-gruppo__t, .io-lista { margin-left:0; margin-right:0; }
  .io-gruppo__t { margin-left:4px; }
  .io { padding-left:24px; padding-right:24px; }
  .io-riga__apri { padding-top:13px; padding-bottom:13px; }
  .io .io-riga--conAz::after { left:70px; }
}
.io-riga { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 16px; border:0; border-bottom:.5px solid var(--io-riga);
  background:transparent; font:inherit; font-size:16px; color:#1C1C1E; }
.io-lista > *:last-child.io-riga, .io-lista > .io-riga:last-child { border-bottom:0; }
.io-riga--tocca { cursor:pointer; }
.io-riga--tocca:active { background:rgba(0,0,0,.05); }
.io-riga--alta { align-items:flex-start; flex-wrap:wrap; }
.io-riga__e { flex:0 0 auto; min-width:120px; color:var(--io-grigio); font-size:15px; }
.io-riga__c { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.io-riga__c b { font-weight:600; font-size:16px; letter-spacing:-.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* LA RIGA GRIGIA PUO' ANDARE A CAPO UNA VOLTA.
   Su un iPhone ci stanno cinque informazioni su una riga sola e la
   sesta sparisce: si tagliava su "Cerca in…" senza nemmeno i puntini,
   e il nome del portale — che Marco vuole vedere a colpo d'occhio —
   restava sempre fuori. Due righe bastano; oltre, i puntini. */
.io-riga__c em { font-style:normal; font-size:13px; color:var(--io-grigio);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; }
/* l'ora sta in alto a destra, e sopra di lei il badge "da gestire":
   e' l'unica informazione della riga che chiede di fare qualcosa, e in
   coda alla riga grigia era l'ultima a leggersi — spesso nemmeno
   quella, perche' finiva oltre il bordo dello schermo. */
/* ── L'ANGOLO CHE COMANDA LA RIGA ─────────────────────────────────
   Marco, 23/09/2026: "vorrei che fosse predominante e non si adattasse
   al testo o alla lunghezza della stringa: lei comanda, il resto si
   adatta".
   Quindi la colonna di destra ha una larghezza FISSA: il badge e' sempre
   lungo uguale in tutte le righe, e a restringersi e' il testo. Prima
   era il contrario — il badge si stringeva sul suo testo e ogni riga
   aveva l'angolo di una misura diversa, che e' il motivo per cui in
   mezzo alle altre non lo vedevi. ── */
.io-riga__ora { flex:0 0 auto; font-size:14px; color:var(--io-grigio); }

/* ── LA RIGA DA GESTIRE SI SEGNA DA SOLA ──────────────────────────
   Marco, 23/09/2026, in tre tempi: "da gestire lo voglio come badge",
   poi "troppo too much, sembra disegnato in paint", infine "troviamo
   un'altra soluzione: un contorno della riga evidenziato che lo fa
   intendere; il badge cosi' male male".

   Aveva ragione a fermarmi due volte. Qualunque badge fosse, era un
   oggetto in piu' dentro una riga che ne ha gia' cinque — e piu' lo
   rendevo visibile, piu' rubava spazio al nome e al portale.
   Segnare la riga INTERA non toglie niente a nessuno: una barra di tre
   pixel sul bordo sinistro e un velo di colore cosi' leggero da non
   disturbare la lettura. Si vede da un metro, e non c'e' niente da
   leggere — che e' il massimo che si possa chiedere a un segnale.
   Il velo e' al 3,5%: sopra, il testo grigio comincia a perdere
   contrasto e la riga sembra disabilitata invece che urgente. ── */
/* Il velo di colore l'ho tolto: dentro il filtro "Da gestire" sono
   tutte da gestire, e mezzo schermo rosa non segnala piu' niente — dice
   solo che si e' scelto quel filtro. Resta la barra, che nell'elenco
   "Tutte" e' l'unica cosa che distingue una riga aperta da una chiusa.
   Ed e' staccata sopra e sotto, con le punte arrotondate: attaccata ai
   bordi, quattro righe di fila diventavano una barra sola lunga tutto
   l'elenco, che non e' quattro segnali ma uno. */
.io-riga--dafare, .io-riga--urge { position:relative; }
.io-riga--dafare::before, .io-riga--urge::before {
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; }
/* ARANCIONE, NON ROSSO. Marco, 23/09/2026: "forse da gestire in
   arancione o un colore meno rosso, troppo forte... e' gia' utilizzato
   per le chiamate perse".
   Ha ragione due volte: il rosso in questo elenco vuol gia' dire
   un'altra cosa — il nome scritto in rosso e' una chiamata persa — e
   due rossi vicini che significano cose diverse si annullano. E "da
   gestire" non e' un allarme: e' lavoro che aspetta.
   L'arancione lo dice senza gridare, e non e' preso da nessun altro. */
   Il primo arancione che avevo scelto, #E58A0B, su bianco si fermava a
   2,6 di contrasto: sotto il minimo di 3 che serve a un segno grafico
   per essere visto da tutti. #C96A00 e' lo stesso arancione portato
   sopra la soglia, 3,8. Un segnale che qualcuno non vede non e' un
   segnale. */
.io-riga--dafare::before { background:#C96A00; }
.io-riga--urge::before { background:#5B3EA8; }
.io-riga input, .io-riga textarea { flex:1; min-width:0; border:0; background:transparent;
  font:inherit; font-size:16px; color:#1C1C1E; outline:none; resize:vertical; padding:0; }
.io-riga input::placeholder, .io-riga textarea::placeholder { color:#C3C3C7; }
.io-riga .io__g { color:#C3C3C7; }
.io-persa { color:var(--io-rosso); }

.io-tondino { flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#E9E9EE; color:#6E6E73; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:600; }
.io-tondino i { font-style:normal; }
.io-tondino--persa { background:#FFE5E3; color:var(--io-rosso); }

/* IL BOLLINO CHE DICE COME CI HA CERCATO. Sta appoggiato all'avatar,
   in basso a destra, come la spunta di un contatto verificato: si vede
   scorrendo l'elenco senza doverlo leggere. */
.io-tondino { position:relative; }
.io-bollo { position:absolute; right:-2px; bottom:-2px; width:17px; height:17px;
  border-radius:50%; border:2px solid var(--io-carta); display:flex;
  align-items:center; justify-content:center; }
.io-bollo .io__g { width:9px; height:9px; }
/* i tre colori sono gli stessi che l'app usa gia': il blu delle cose
   scritte, il verde della voce, l'ambra di quando sono tutte e due */
.io-bollo--tel { background:#177A33; color:#fff; }
.io-bollo--mail { background:#0B6BCB; color:#fff; }
.io-bollo--due { background:#B07A1E; color:#fff; }
/* chi porta un immobile, non chi ne cerca uno */
.io-bollo--valuta { background:#5B3EA8; color:#fff; }

/* LA LINGUA DEL CLIENTE, accanto al nome. Viola: non e' un allarme e
   non e' uno stato della pratica, e' un'informazione su chi deve
   rispondere. Due lettere, perche' in fondo a una riga stretta ci
   devono stare sempre. */
/* "FORSE" DAVANTI A UN NOME CHE NON ABBIAMO VERIFICATO.
   Piccolo e in maiuscoletto: deve togliere certezza al nome, non
   rubargli l'attenzione. Chi risponde legge il nome, vede il "forse" e
   decide da solo se usarlo. */
.io-forse { font-style:normal; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.55); display:block; margin-bottom:2px; }
/* cosa sappiamo gia' di questo numero, sotto al nome */
.io-call__gia { margin:10px 22px 0; padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,.1); font-size:13px; color:rgba(255,255,255,.82);
  line-height:1.4; }
.io-call__gia b { display:block; font-weight:600; color:#fff; margin-top:2px; }

.io-cerca { display:flex; align-items:center; gap:8px; margin:0 16px 14px;
  padding:8px 12px; background:rgba(118,118,128,.12); border-radius:10px; }
.io-cerca .io__g { width:16px; height:16px; color:var(--io-grigio); flex:0 0 auto; }
.app .io-cerca input, .io-cerca input { flex:1; min-width:0; border:0; background:transparent;
  font:inherit; font-size:16px; color:#1C1C1E; outline:none; }
.io-cerca input::placeholder { color:#8A8A8E; }
.io-cerca__x { border:0; background:rgba(118,118,128,.2); color:#3C3C43; width:20px;
  height:20px; border-radius:50%; font-size:11px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.io-cerca__n { margin:-6px 20px 14px; font-size:13px; color:var(--io-grigio); }

/* ─── LA LEGENDA DEI PALLINI, CHE FILTRA ────────────────────────────
   Spiega e serve: toccandone uno si vedono solo quelli come lui. Una
   legenda che si puo' solo leggere si legge una volta e poi occupa
   spazio per sempre. */
.io-leg { display:flex; flex-wrap:wrap; gap:6px; margin:0 16px 14px; }
.app .io-leg__b, .io-leg__b { display:inline-flex; align-items:center; gap:6px;
  border:.5px solid #D6D6DB; background:#fff; border-radius:15px; padding:4px 11px 4px 5px;
  font:inherit; font-size:12.5px; color:#3C3C43; cursor:pointer; }
.app .io-leg__b--su, .io-leg__b--su { border-color:var(--io-blu); color:var(--io-blu);
  background:rgba(0,122,255,.07); font-weight:600; }
.io-leg__b .io-bollo { position:static; width:19px; height:19px; border:0; flex:0 0 auto; }
.io-leg__b .io-bollo .io__g { width:10px; height:10px; }

/* il resto dello storico, che non si apre da solo */
.io-altro { margin:0 16px 18px; }
.app .io-altro button, .io-altro button { width:100%; border:0; background:var(--io-carta);
  border-radius:12px; padding:13px 16px; font:inherit; font-size:15px; color:var(--io-blu);
  cursor:pointer; text-align:center; }
.io-altro button i { display:block; font-style:normal; font-size:12.5px;
  color:var(--io-grigio); margin-top:2px; }

.io-lingua { font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  background:#EDE7F6; color:#5B3EA8; border-radius:4px; padding:1px 4px; margin-left:6px;
  vertical-align:1px; }

.io-vuoto { text-align:center; color:var(--io-grigio); padding:60px 30px;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.io-vuoto .io__g { width:34px; height:34px; opacity:.35; }
.io-vuoto b { font-size:17px; color:#1C1C1E; }
.io-vuoto span { font-size:14px; max-width:320px; }

/* il velo e l'avviso di chiamata */
.io-velo { position:fixed; inset:0; z-index:120; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%); }
.io-velo--foglio { align-items:flex-end; padding:0; }

.io-call { width:min(360px,100%); border-radius:26px; padding:34px 24px 26px;
  text-align:center; color:#fff;
  background:linear-gradient(170deg,rgba(60,60,67,.82),rgba(28,28,30,.92));
  border:.5px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  animation:ioSu .28s cubic-bezier(.2,.9,.3,1); }
@keyframes ioSu { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.io-call__tondo { width:84px; height:84px; margin:0 auto 16px; border-radius:50%;
  background:rgba(255,255,255,.16); display:flex; align-items:center;
  justify-content:center; font-size:30px; font-weight:600; }
.io-call__tondo .io__g { width:36px; height:36px; }
.io-call__chi { font-size:26px; font-weight:600; letter-spacing:-.4px; }
.io-call__sotto { font-size:15px; opacity:.72; margin-top:3px; }
.io-call__stato { font-size:13px; opacity:.6; margin-top:12px; letter-spacing:.3px; }
.io-call__az { display:flex; justify-content:center; gap:46px; margin-top:26px; }
.app .io-tondo, .io-tondo { width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  color:#fff; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; position:relative; }
.io-tondo .io__g { width:24px; height:24px; }
.io-tondo--verde { background:var(--io-verde-pieno); }
.io-tondo--rosso { background:var(--io-rosso); }
.io-tondo--grigio { background:#5A5A5F; }
.app .io-chiama, .io-chiama { display:inline-flex; align-items:center; gap:8px;
  background:var(--io-verde-pieno); color:#fff; border:0; border-radius:10px;
  padding:11px 16px; font-size:15px; font-weight:600; text-decoration:none;
  cursor:pointer; }
.app .io-chiama:hover, .io-chiama:hover { filter:brightness(1.07); }
.app .io-chiama:active { transform:scale(.98); }
.io-chiama .io__g { width:19px; height:19px; }
.io-chiama b { font-weight:600; font-variant-numeric:tabular-nums; }
.io-tondo:active { transform:scale(.94); }
.io-tondo__e { position:absolute; top:70px; font-size:12.5px; color:rgba(255,255,255,.85);
  white-space:nowrap; }

/* il foglio che sale dal basso */
.io-foglio { width:min(560px,100%); max-height:92vh; overflow:auto;
  background:#F2F2F7; border-radius:14px 14px 0 0;
  font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  animation:ioSale .3s cubic-bezier(.2,.9,.3,1); }
@keyframes ioSale { from{transform:translateY(40px);opacity:.6} to{transform:none;opacity:1} }
.io-foglio__presa { width:36px; height:5px; border-radius:3px; background:#C7C7CC;
  margin:8px auto 2px; }
.io-foglio__testa { display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:.5px solid var(--io-riga);
  position:sticky; top:0; background:rgba(242,242,247,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:2; }
.io-foglio__testa b { font-size:16px; font-weight:600; }
.io-foglio__c { padding:16px 0 30px; }
.io-testo { border:0; background:transparent; font:inherit; font-size:16px;
  color:#007AFF; cursor:pointer; padding:4px; }
.io-testo--forte { font-weight:600; }

/* l'intestazione grigia sopra ogni blocco, come negli elenchi di iOS:
   dice di cosa parla il gruppo senza che ogni riga debba ripeterlo */
.io-tit { font-size:13px; font-weight:400; color:var(--io-grigio);
  text-transform:uppercase; letter-spacing:.4px; margin:0 20px 6px; }
.io-bl + .io-bl { margin-top:2px; }
/* il titolo e il suo riquadro sono una cosa sola: su due colonne, senza
   un contenitore che li tenga insieme, finivano sei titoli a sinistra e
   sei riquadri a destra, senza piu' nessun rapporto fra loro */
.io-bl { min-width:0; }

/* le righe di un modulo si separano dopo l'etichetta, non da bordo a
   bordo: e' la stessa regola dell'elenco, ed e' quella che fa sembrare
   un foglio di iOS e non una tabella */
.io-foglio .io-lista .io-riga { position:relative; border-bottom:0; }
.io-foglio .io-lista .io-riga::after { content:""; position:absolute; left:16px; right:0;
  bottom:0; height:.5px; background:var(--io-riga); }
.io-foglio .io-lista > .io-riga:last-child::after { display:none; }

/* ═══ IL CAPPELLO DELLA SCHEDA CONTATTO ═══════════════════════════
   Marco, 22/09/2026: "credo che tu possa migliorare davvero tanto la
   grafica della schermata di gestione contatto".
   Non era questione di bello: era di gerarchia. In cima stava il numero
   di telefono in grande e il nome della persona sessanta righe piu'
   giu', dentro un campo da compilare. Chi apre questa scheda ha in
   testa una persona, non quindici cifre.
   Qui stanno le tre domande che ci si fa sempre — chi e', per quale
   immobile, cosa faccio adesso — e niente altro. Tutto il resto viene
   dopo, e si scorre. ═══ */
.io-cap { margin:0 16px 20px; padding:18px 18px 16px; border-radius:16px;
  background:var(--io-carta); border:.5px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px -14px rgba(0,0,0,.20);
  /* la striscia di colore in alto dice da dove arriva, prima di leggere */
  border-top:3px solid var(--io-grigio); }
.io-cap--tel { border-top-color:var(--io-verde-pieno); }
.io-cap--mail { border-top-color:#0B6BCB; }
.io-cap--due { border-top-color:#B07A1E; }
.io-cap--valuta { border-top-color:#5B3EA8; }

.io-cap__t { display:flex; align-items:center; gap:14px; }
.io-cap__tondo { width:54px; height:54px; border-radius:50%; flex:0 0 54px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:600; color:#fff; background:var(--io-grigio); }
.io-cap__tondo .io__g { width:25px; height:25px; color:#fff; }
.io-cap__tondo--tel { background:var(--io-verde-pieno); }
.io-cap__tondo--mail { background:#0B6BCB; }
.io-cap__tondo--due { background:#B07A1E; }
.io-cap__tondo--valuta { background:#5B3EA8; }

.io-cap__chi { min-width:0; flex:1; }
/* il nome puo' essere lungo: si spezza invece di spingere fuori la
   scheda, ed e' la ragione del min-width:0 qui sopra */
.io-cap__chi h2 { margin:0; font-size:21px; font-weight:600; letter-spacing:-.4px;
  line-height:1.2; color:#1C1C1E; overflow-wrap:anywhere; }
.io-cap__q { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:3px;
  font-size:13px; color:var(--io-grigio); }
.io-cap__q span + span::before { content:"·"; margin-right:10px; color:#C7C7CC; }

.io-cap__eti { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.io-eti { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:14px; background:#F2F2F7; color:#3C3C43;
  font-size:12px; font-weight:500; line-height:1.3; }
.io-eti .io__g { width:12px; height:12px; }
.io-eti--tel { background:rgba(23,122,51,.12); color:#0F5A24; }
.io-eti--mail { background:rgba(11,107,203,.12); color:#0A4E95; }
.io-eti--due { background:rgba(176,122,30,.14); color:#7D5512; }
.io-eti--valuta { background:rgba(91,62,168,.12); color:#432E7C; }
.io-eti--lingua { background:rgba(176,122,30,.14); color:#7D5512; font-weight:600; }

.io-cap__imm { display:flex; align-items:flex-start; gap:9px; margin-top:14px;
  padding-top:13px; border-top:.5px solid var(--io-riga); }
.io-cap__imm .io__g { width:17px; height:17px; flex:0 0 17px; margin-top:2px;
  color:var(--io-grigio); }
.io-cap__imm span { min-width:0; }
.io-cap__imm b { display:block; font-size:15px; font-weight:600; line-height:1.35;
  color:#1C1C1E; overflow-wrap:anywhere; }
.io-cap__imm i { display:block; font-style:normal; font-size:12.5px;
  color:var(--io-grigio); margin-top:1px; }

.io-cap__az { display:flex; gap:8px; margin-top:15px; }
/* i due gesti che si fanno davvero: richiamare, o rispondere */
.app .io-azb, .io-azb { flex:1 1 0; min-width:0; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; padding:10px 14px; border-radius:11px;
  border:.5px solid #D6D6DB; background:#fff; color:var(--io-blu);
  font:inherit; font-size:14.5px; font-weight:600; text-decoration:none; cursor:pointer; }
.app .io-azb:hover { background:#F5F8FB; border-color:var(--io-blu); }
.io-azb .io__g { width:16px; height:16px; }
.app .io-azb--verde, .io-azb--verde { background:var(--io-verde-pieno);
  border-color:var(--io-verde-pieno); color:#fff; }
.app .io-azb--verde:hover { background:#13692C; border-color:#13692C; }
.io-azb--verde .io__g { color:#fff; }

@media (min-width:700px) {
  /* su desktop i due tasti non devono diventare due strisce larghe
     mezza scheda: restano della misura del loro testo */
  .io-cap__az { justify-content:flex-start; }
  .app .io-azb, .io-azb { flex:0 0 auto; min-width:150px; }
}

.io-intesta { display:flex; align-items:center; gap:14px; margin:0 16px 18px; }
.io-intesta__tondo { width:56px; height:56px; border-radius:50%; background:#E9E9EE;
  color:#6E6E73; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; }
.io-intesta__n { font-size:21px; font-weight:600; letter-spacing:-.3px; }
.io-intesta__q { font-size:13.5px; color:#8A8A8E; margin-top:2px; }

.io-pillole { display:flex; flex-wrap:wrap; gap:7px; flex:1; min-width:0; }
.io-pillola { border:.5px solid #D6D6DB; background:#fff; border-radius:16px;
  padding:6px 12px; font:inherit; font-size:14px; color:#1C1C1E; cursor:pointer; }
/* LA STESSA TRAPPOLA DEL PULSANTE PRIMARIO, presa una seconda volta.
   ".app button" imposta color:inherit con specificita' (0,1,1) e batte
   una classe sola (0,1,0): il testo bianco di queste pastiglie tornava
   scuro, e su fondo blu o nero non si leggeva piu' niente. Con ".app"
   davanti si va a (0,2,0) e il colore torna quello scritto.
   E' documentata due volte in questo foglio, e ci sono cascato lo
   stesso: quando si scrive un colore su un pulsante, qui, va sempre
   messa la .app davanti. */
.app .io-pillola--su { background:#007AFF; border-color:#007AFF; color:#fff; font-weight:500; }

.io-scelta { display:flex; gap:2px; padding:2px; background:rgba(118,118,128,.12);
  border-radius:9px; flex:1; min-width:0; }
.io-scelta__b { flex:1; border:0; background:transparent; border-radius:7px;
  padding:6px 8px; font:inherit; font-size:14px; color:#1C1C1E; cursor:pointer; }
.io-scelta__b--su { background:#fff; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }

.io-int { flex:0 0 auto; width:51px; height:31px; border-radius:16px; background:#E9E9EB;
  position:relative; transition:background .2s; margin-left:auto; }
.io-int i { position:absolute; top:2px; left:2px; width:27px; height:27px;
  border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2);
  transition:transform .2s; }
.io-int--su { background:#34C759; }
.io-int--su i { transform:translateX(20px); }

@media (min-width: 900px) {
  .io-velo--foglio { align-items:center; padding:24px; }
  .io-foglio { width:min(1180px,100%); max-height:90vh; border-radius:16px; }
  .io-foglio__presa { display:none; }
  .io-foglio__testa { border-radius:16px 16px 0 0; }
  .io-foglio__c { display:grid; grid-template-columns:1fr 1fr;
    gap:14px 22px; align-items:start; padding:18px 8px 26px; }
  /* chi ha chiamato sta in cima e prende tutta la larghezza: e'
     l'intestazione, non un blocco fra gli altri */
  .io-foglio__c > .io-intesta { grid-column:1 / -1; }
  .io-tit { margin-left:12px; }
  .io-lista { margin-left:8px; margin-right:8px; }
}

@media (max-width:700px) {
  .io .io__t { font-size:30px; margin:10px 16px 8px; }
  .io-riga__e { min-width:96px; }
  .io-call__az { gap:36px; }
}

@media (max-width:560px) {
  /* SULLO SCHERMO STRETTO L'ETICHETTA VA SOPRA.
     Con etichetta e pastiglie sulla stessa riga restano novanta pixel
     per le scelte: le pastiglie si incolonnavano una per riga e un
     campo con quattro opzioni diventava alto mezzo schermo. iOS fa la
     stessa cosa - quando il valore non ci sta accanto all'etichetta,
     l'etichetta sale. */
  .io-riga--alta { flex-direction:column; align-items:stretch; gap:7px; }
  .io-riga--alta .io-riga__e { min-width:0; }
  .io-riga--alta textarea { width:100%; }
  .io-chiama { justify-content:center; }
  .io-riga--chiama .io-chiama { width:100%; }
  .io-riga--chiama .io-chiama { width:100%; }
}

/* i due gesti rapidi sulla chiamata persa: richiama, oppure recuperata */
.io-riga--conAz { padding:0; gap:0; }
.io-riga__apri { flex:1; min-width:0; display:flex; align-items:center; gap:12px;
  border:0; background:transparent; font:inherit; font-size:16px; color:#1C1C1E;
  text-align:left; padding:11px 8px 11px 16px; cursor:pointer; }
.io-riga__apri:active { background:rgba(0,0,0,.05); }
.io-riga__az { display:flex; align-items:center; gap:8px; padding-right:14px; }

/* ─── I DETTAGLI CHE FANNO "IPHONE" ────────────────────────────────
   Marco ha mandato la schermata Recenti del suo telefono e ha chiesto
   che ci somigli molto da vicino, dappertutto e non solo sul cellulare.
   Le fondamenta c'erano gia'; qui ci sono le tre cose che mancavano e
   che si notano tutte, perche' sono quelle che l'occhio riconosce. */

/* 1. La riga di separazione parte DOPO il tondino, non da bordo a
      bordo. E' il dettaglio piu' piccolo e il piu' riconoscibile: con
      la riga intera l'elenco sembra una tabella, con la riga rientrata
      sembra un telefono. */
.io .io-riga--conAz { position:relative; border-bottom:0; }
.io .io-riga--conAz::after { content:""; position:absolute; left:66px; right:0; bottom:0;
  height:.5px; background:var(--io-riga); }
.io .io-lista > .io-riga--conAz:last-child::after { display:none; }

/* 2. La "i" dentro il tondo azzurro chiaro: sull'iPhone e' quella che
      apre il dettaglio. Prima c'era una freccetta grigia, che sui
      Recenti non esiste e non dice cosa faccia. */
.io .io-riga__fine { flex:0 0 auto; display:flex; align-items:center; padding-right:14px; }
/* la freccetta di fine riga: grigia, sottile, e non chiede attenzione.
   Dice "si apre" e basta, che e' tutto quello che deve dire. */
/* la riga del tasto per richiamare non ha etichetta: niente colonna vuota */
.io-riga--chiama { justify-content:flex-start; }

/* ─── QUELLO CHE HA SCRITTO IL CLIENTE, che non si compila ──────────
   Sono righe da leggere, non campi da riempire, e devono sembrarlo: il
   valore e' in nero pieno, senza cornice e senza il grigio dei campi
   vuoti. Le parole sue stanno fra virgolette e in corsivo, perche'
   sono le sue e non nostre. */
.io-val { flex:1; min-width:0; color:#1C1C1E; font-size:15px; line-height:1.4; }
.io-val.forte { font-weight:600; }
.io-val--cit { font-style:italic; color:#3C3C43; }
.io-val a { color:var(--io-blu); text-decoration:none; }
.io-val__n { display:block; font-style:normal; font-size:12px; color:var(--io-grigio);
  margin-top:1px; }

/* ─── L'AVVISINO IN ALTO A DESTRA ───────────────────────────────────
   Per chi non e' al centralino: si guarda o si ignora, e ignorarlo non
   deve costare niente. Per questo sta in un angolo e non in mezzo, e
   per questo non oscura la pagina dietro. */
.io-toast { position:fixed; top:14px; right:14px; z-index:70; width:min(360px, calc(100vw - 28px));
  display:flex; align-items:flex-start; gap:11px; padding:12px 13px;
  background:rgba(28,28,30,.93); color:#fff; border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.34);
  font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  animation:ioScende .26s cubic-bezier(.2,.9,.3,1); }
@keyframes ioScende { from{transform:translateY(-14px);opacity:0} to{transform:none;opacity:1} }
.io-toast__t { flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--io-verde-pieno); display:flex; align-items:center; justify-content:center; }
.io-toast__t .io__g { width:16px; height:16px; }
.io-toast__c { flex:1; min-width:0; }
.io-toast__c b { display:block; font-size:15px; font-weight:600; line-height:1.25; }
.io-toast__c b em { font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-right:5px; }
.io-toast__c i { font-style:normal; display:block; font-size:12.5px;
  color:rgba(255,255,255,.72); margin-top:1px; }
.io-toast__c u { text-decoration:none; display:block; font-size:12px;
  color:rgba(255,255,255,.6); margin-top:4px; line-height:1.35; }
.io-toast__az { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.app .io-toast__b, .io-toast__b { border:0; background:var(--io-blu); color:#fff;
  border-radius:14px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; }
.app .io-toast__x, .io-toast__x { border:0; background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.75); width:22px; height:22px; border-radius:50%;
  font-size:11px; line-height:1; cursor:pointer; }
@media (max-width:560px) {
  /* sul telefono va largo quanto lo schermo, appoggiato in alto */
  .io-toast { left:14px; right:14px; width:auto; }
}

/* le altre richieste aperte della stessa persona, da chiudere insieme */
.io-anche { align-items:flex-start; gap:11px; cursor:pointer; }
.io-anche input { flex:0 0 auto; width:21px; height:21px; margin-top:2px; accent-color:var(--io-blu); }
.io-anche__c { min-width:0; flex:1; }
.io-anche__c b { display:block; font-size:14.5px; font-weight:600; line-height:1.3; }
.io-anche__c i { font-style:normal; display:block; font-size:12.5px; color:var(--io-grigio); }
.io-anche__c em { font-style:italic; display:block; font-size:12.5px; color:#3C3C43;
  margin-top:2px; }
.io-nota { margin:8px 20px 0; font-size:12.5px; color:var(--io-grigio); line-height:1.45; }

/* ── DUE COLONNE SUL DESKTOP A TUTTO SCHERMO ──────────────────────
   Marco, 22/09/2026: "nella visualizzazione desktop a tutto schermo si
   possono avere due colonne oltre quella extra di destra".
   A sinistra chi ha telefonato, a destra chi ha scritto: sono due
   lavori diversi — uno si richiama, all'altro si risponde.
   minmax(0,1fr) e non 1fr: una colonna flessibile senza minimo a zero
   non si restringe mai sotto il contenuto, e una riga con un indirizzo
   lungo spingerebbe fuori l'intera pagina. E' la stessa trappola gia'
   caduta su .stag, .occ e .pz. ── */
.io-due { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px; align-items:start; }
.io-due__c { min-width:0; }
/* l'intestazione di colonna resta in vista mentre si scorre: con due
   elenchi affiancati, a meta' pagina non si sa piu' quale e' quale */
.io-due__t { position:sticky; top:0; z-index:2; display:flex; align-items:center;
  gap:8px; margin:0 16px 10px; padding:9px 12px; border-radius:10px;
  background:var(--io-carta); font-size:13px; font-weight:600; color:#1C1C1E; }
.io-due__t .io__g { width:15px; height:15px; color:var(--io-grigio); }
.io-due__t em { margin-left:auto; font-style:normal; font-size:12px; font-weight:600;
  color:var(--io-grigio); font-variant-numeric:tabular-nums; }
/* una colonna vuota lo dice: lasciarla bianca sembrerebbe un guasto */
.io-due__v { margin:0 16px 18px; padding:16px; border-radius:12px;
  background:var(--io-carta); color:var(--io-grigio); font-size:13px; text-align:center; }

/* Il riassunto scritto dal portale: in corsivo e spento, perche' non
   e' una cosa che ha detto il cliente. Le parole sue restano nere. */
.io-val--loro { font-style:italic; color:#5E5E63; }

/* "Traduci": un collegamento sotto le parole del cliente, non un tasto
   che le sostituisce. L'originale resta l'originale. */
.io-trad { display:inline-block; margin-top:7px; font-size:12.5px; font-weight:600;
  font-style:normal; color:var(--io-blu); text-decoration:none; }
.io-trad::after { content:" ↗"; font-size:11px; }
.io-trad:hover { text-decoration:underline; }

/* l'elenco delle mail non capite: si legge, non si clicca — non porta
   da nessuna parte, perche' quelle mail nel gestionale non ci sono */
.rip__l--ferma li { cursor:default; }
.rip__l--ferma li:hover { background:none; }
.rip__nota { margin:8px 0 0; font-size:11px; line-height:1.45; color:var(--muto); }
.rip__porta { display:inline-block; margin-top:6px; padding:3px 9px; border-radius:8px;
  border:.5px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-size:11px; font-weight:500; cursor:pointer; }
.rip__porta:hover:not(:disabled) { border-color:var(--ink); background:#F4F7FA; }
.rip__porta:disabled { color:var(--muto); border-style:dashed; cursor:default; }

/* ── IL PORTALE, A COLPO D'OCCHIO ─────────────────────────────────
   Marco, 23/09/2026: "mi piacerebbe che la scritta idealista.it,
   immobiliare.it, immobiliaredst.it, casa.it fosse evidenziata nella
   stringa sotto il contatto, un colpo d'occhio al nome del portale".
   I colori sono quelli dei loro marchi portati sopra la soglia di
   leggibilita': il verde di idealista e il rosso di immobiliare.it,
   cosi' come sono, su bianco si fermano sotto il 3:1. Qui contano come
   testo e non come superficie, quindi valgono le stesse regole dei
   colori degli agenti. Sfondo appena accennato, testo scuro. ── */
/* I COLORI VERI DEI LORO MARCHI, non quelli che mi ricordavo.
   Marco, 23/09/2026: "non mi sembra che per immobiliare.it e idealista
   tu ti sia attenuto ai colori dei loro loghi, uno e' giallo e l'altro
   bianco blu". Aveva ragione: li avevo scelti a memoria. Andati a
   prendere dai loro siti, misurati sul posto:
     idealista       il lime del marchio      #EDFCA2
     immobiliare.it  il blu della testata     #0074C1
     casa.it         il verde acqua           #049999
   Il testo e' la stessa tinta portata sopra la soglia di leggibilita',
   come per i colori degli agenti: fra 6,3 e 11 di contrasto sul chip.
   Il lime di idealista e' chiarissimo e regge il testo scuro sopra,
   quindi li' si usa pieno — e' proprio quello che si vede sul loro
   logo. */
.io-por { text-decoration:none; font-weight:600; border-radius:5px;
  padding:1px 5px; white-space:nowrap; }
.io-por--idealista { color:#2E3A00; background:#EDFCA2; }
.io-por--immobiliare { color:#00548C; background:rgba(0,116,193,.13); }
.io-por--casa { color:#03605F; background:rgba(4,153,153,.14); }
/* IL NOSTRO SITO SI DISTINGUE DAGLI ALTRI PERCHE' E' NOSTRO.
   Marco, 23/09/2026: "forse immobiliare.it e immobiliaredst.it sono
   troppo simili, cambiamo immobiliaredst.it". Vero: due blu accanto, e
   i due nomi si somigliano gia' di loro.
   Invece di cercare un quinto colore che non somigli a nessuno degli
   altri quattro — e prima o poi si finiscono — questo e' l'unico chip
   PIENO, con il navy dell'agenzia e il testo bianco. Fra quattro chip
   chiari uno scuro non si confonde con niente, e dice quello che e':
   questo contatto e' arrivato da casa nostra, non l'abbiamo pagato. */
.io-por--nostro { color:#fff; background:#0F2E4D; }

/* ── LE VALUTAZIONI, IN TESTA A TUTTO ─────────────────────────────
   Marco, 23/09/2026: "tutte le richieste di valutazione dovrebbero
   avere una colonna autonoma, in testa a tutto, fissa, che sparisce
   solo se tutte sono state gestite. Cosi' se una richiesta e' di ieri
   ma ricevo 100 telefonate e mail non posso rischiare di perderla."
   Il riquadro ha il viola delle valutazioni sul bordo e un titolo che
   resta in vista mentre si scorre: sono poche righe, ma sono quelle
   che domani possono diventare un incarico. ── */
.io-val { margin:0 0 20px; }
.io-val__t { position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:8px; margin:0 16px 10px;
  padding:9px 13px; border-radius:10px;
  background:rgba(91,62,168,.10); color:#432E7C;
  font-size:13px; font-weight:700; letter-spacing:-.01em; }
.io-val__t .io__g { width:15px; height:15px; color:#5B3EA8; }
.io-val__t em { margin-left:auto; font-style:normal; font-size:11.5px;
  font-weight:500; color:#6B5AA0; }
/* dentro il riquadro le righe sono tutte urgenti: la barra lo dice gia',
   e il titolo del giorno non serve perche' qui il giorno non conta */
.io-val .io-gruppo__t { display:none; }
/* e la barra li' dentro e' sempre viola: sono valutazioni per
   definizione, che il campo "urgente" sia stato scritto o no */
.io-val .io-riga--dafare::before, .io-val .io-riga--urge::before { background:#5B3EA8; }

/* la storia di un numero: una riga per volta, con il suo pallino */
.io-storia { align-items:flex-start; gap:10px; }
.io-storia .io-bollo { position:static; width:20px; height:20px; border:0; flex:0 0 auto;
  margin-top:2px; }
.io-storia .io-bollo .io__g { width:11px; height:11px; }
.io-storia__c { min-width:0; flex:1; }
.io-storia__c b { display:block; font-size:14px; font-weight:600; }
.io-storia__c i { font-style:normal; display:block; font-size:12.5px;
  color:var(--io-grigio); line-height:1.35; }
.io-storia__c em { font-style:italic; display:block; font-size:12.5px; color:#3C3C43;
  margin-top:2px; }
/* la riga tecnica sotto un guasto: piccola, grigia, da leggere solo
   quando si sta cercando il perche' */
.guasto__tec { font-size:11.5px; color:var(--muto); opacity:.85; margin-top:6px; }
.io .io-apre { flex:0 0 auto; display:flex; color:#C7C7CC; }
.io .io-apre .io__g { width:16px; height:16px; }

/* 3. Le frecce di entrata e uscita davanti alla riga grigia. Sono
      piccole, e prendono il colore della riga: rosse quando la
      chiamata e' persa, perche' sull'iPhone una persa e' rossa tutta,
      non solo nel nome. */
.io .io-nome { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:block; }
/* ── LA RIGA GRIGIA VA A CAPO, NON SI TAGLIA ──────────────────────
   Era una riga di flex con white-space:nowrap: su un iPhone ci stanno
   cinque informazioni e la sesta spariva oltre il bordo, senza nemmeno i
   puntini. E quella che spariva per prima era il nome del portale —
   proprio quello che Marco voleva vedere "a colpo d'occhio".
   Non e' piu' una riga di flex ma testo normale, che va a capo da solo:
   le informazioni sono gia' separate dai puntini e il flex non serviva
   ad altro che a tenere in fila la freccetta del verso. Due righe di
   spazio; dalla terza in giu', i puntini. ── */
.io .io-sotto { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; }
/* la freccetta del verso resta in linea con il testo */
.io .io-sotto .io__g { width:13px; height:13px; opacity:.8;
  display:inline-block; vertical-align:-2px; margin-right:2px; }
.io .io-sotto.io-persa { color:var(--io-rosso); }
.app .io-az, .io-az { width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  text-decoration:none; flex:0 0 auto; }
.io-az .io__g { width:17px; height:17px; }
/* I DUE TONDINI SI DEVONO LEGGERE, E NON SI LEGGEVANO.
   Erano il verde di sistema (contrasto 2,22 col segno bianco) e un
   grigio chiarissimo (1,68: praticamente invisibile). Su un pulsante
   grande di iPhone passano; su un tondino da 34px con dentro un segno
   da 17px no, e Marco se n'e' accorto guardando, perche' nessun
   controllo li misurava. Adesso il banco li misura. */
.io-az--verde { background:#1E8E3E; }     /* bianco sopra: 4,21 */
.io-az--grigio { background:#5A5A5F; }    /* bianco sopra: 6,86 */
.io-az:active { transform:scale(.92); }


/* Aggiungere una persona: un modulo solo. Erano due, in due punti della
   pagina - uno creava la persona, l'altro l'accesso - e si finiva con
   una persona che non entra o un accesso che non e' nessuno. */
.nuovo { border:1px solid var(--linea); border-radius:10px; padding:14px 16px;
  margin-bottom:16px; background:#FBFCFD; }
.nuovo__t { font-size:13px; font-weight:600; margin-bottom:10px; }
.nuovo__aree { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:12px; }
.nuovo__e { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muto); }
/* l'etichetta non va a capo dentro la spunta: "Gestione e controllo"
   si spezzava in tre righe lasciando la casella staccata a sinistra.
   Va a capo semmai la riga intera, come elemento. */
.spunta { display:flex; align-items:center; gap:6px; font-size:13.5px;
  cursor:pointer; white-space:nowrap; }
.spunta input { margin:0; }
.nuovo__fondo { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.collega { border:0; background:none; padding:0; font:inherit; font-size:12.5px;
  color:var(--muto); text-decoration:underline; cursor:pointer; }
.collega:hover { color:var(--ink2); }
@media (max-width:700px) {
  .nuovo__aree { gap:10px; }
  .nuovo__fondo .btn { width:100%; }
}

/* la ricerca dell'immobile dentro la scheda della chiamata */
.io-riga--sug { background:rgba(0,122,255,.045); }
.io-riga--sug b { font-weight:500; font-size:15px; }
.io-x { border:0; background:none; font:inherit; font-size:15px; color:#8A8A8E;
  cursor:pointer; padding:0 2px; flex:0 0 auto; }
.io-riga input[type="datetime-local"] { font:inherit; font-size:15px; }
/* LO STATO DELLA STANZA SI DEVE LEGGERE DA UN METRO.
   E' la risposta che il cliente aspetta mentre sei al telefono, e
   leggerla sbagliata vuol dire promettere una stanza che non c'e'.
   Verde libera, ambra "libera dal" (c'e' una disdetta: non adesso, ma
   si sa quando), grigio occupata - che non deve gridare, perche' e'
   quella che non interessa. */
.io-st { font-weight:600; }
.io-st--libera { color:#1E8E3E; }
.io-st--presto { color:#9A6B00; }
.io-st--occupata { color:#8A8A8E; font-weight:400; }

/* di chi sono i compiti che sto guardando */
.io-chi { display:flex; flex-wrap:wrap; gap:7px; margin:0 16px 16px; }
.io-chi__b { border:.5px solid #D6D6DB; background:#fff; border-radius:16px;
  padding:5px 12px; font:inherit; font-size:13.5px; color:#1C1C1E; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; }
.app .io-chi__b--su { background:#1C1C1E; border-color:#1C1C1E; color:#fff; font-weight:500; }
.io-chi__b em { font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background:var(--io-rosso); border-radius:9px; padding:1px 6px; }
.io-chi__b--su em { background:rgba(255,255,255,.28); }

/* ── LA BARRA "SALVA" DELLA TABELLA DI CHI ENTRA ──────────────────
   Marco, 22/09/2026: "in impostazioni quando cambio le impostazioni
   delle utenze serve un tasto salva".
   Sta attaccata al fondo dello schermo finche' la tabella e' a video:
   spuntando la riga in fondo a un elenco lungo, un tasto messo sopra la
   tabella sarebbe gia' fuori vista. z-index basso: deve stare sotto le
   finestre e sotto la barra in basso, non sopra. ── */
.salvaut { position:sticky; bottom:12px; z-index:3; display:flex; align-items:center;
  gap:14px; flex-wrap:wrap; margin:14px 0 0; padding:11px 15px; border-radius:11px;
  background:var(--ink); color:#fff;
  box-shadow:0 4px 12px -4px rgba(15,46,77,.28), 0 18px 40px -14px rgba(15,46,77,.45); }
.salvaut__t { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.salvaut__t b { font-size:13.5px; font-weight:600; color:#fff; }
/* i nomi di chi cambia: una riga sola, e se sono tanti si taglia invece
   di far crescere la barra fino a coprire la tabella */
.salvaut__t i { font-style:normal; font-size:11.5px; color:#A9C0D6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.salvaut__az { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.salvaut__az .btn--fine { background:none; border-color:#3E6A96; color:#C3D3E4; }
.salvaut__az .btn--fine:hover { border-color:#8FB4D6; color:#fff; }
.salvaut__az .btn--primo { background:#fff; border-color:#fff; color:var(--ink); font-weight:600; }
.salvaut__az .btn--primo:hover:not(:disabled) { background:#E7EEF5; border-color:#E7EEF5; }
/* salvato: la stessa barra, verde, e se ne va da sola dopo quattro secondi */
.salvaut--fatto { background:var(--verde); box-shadow:0 4px 12px -4px rgba(27,122,90,.30); }
@media (max-width:560px) {
  .salvaut { flex-direction:column; align-items:stretch; gap:9px; }
  .salvaut__az { justify-content:flex-end; }
}

/* ── LE TENDINE DELLA BARRA, SUL TELEFONO ─────────────────────────
   Marco, 22/09/2026: "su mobile tanti menu si aprono sfalsati."

   Erano tutte agganciate al loro pulsantino: la campanella e la lente
   con right:0, il selettore di area con left:0 e min-width:296px. Su
   desktop funziona perche' quei pulsanti stanno ai bordi della barra.
   Sul telefono no: la barra va a capo, i pulsanti finiscono in mezzo,
   e una tendina larga 296px ancorata a un pulsante largo 30 esce dallo
   schermo da un lato e lascia un vuoto dall'altro.

   Invece di rincorrere gli scostamenti uno per uno, si cambia il punto
   di riferimento: non piu' il pulsante ma la barra intera, che e' larga
   quanto lo schermo. Cosi' ogni tendina si apre sotto la barra con lo
   stesso margine a destra e a sinistra, dovunque stia il pulsante che
   l'ha aperta.

   z-index:auto e' obbligatorio: "position:relative" con uno z-index
   numerico creerebbe un contesto di impilamento e chiuderebbe le
   tendine dentro la barra, sotto la barra in basso e sotto le finestre.
   Cosi' invece si sovrappongono esattamente come prima. ── */
@media (max-width:760px) {
  .cima { position:relative; z-index:auto; }
  .cima__aree, .camp, .glob { position:static; }
  .cima__tend, .camp__m, .glob__m {
    left:14px; right:14px; width:auto; min-width:0; max-width:none;
    top:calc(100% + 8px); }
}

/* ═══════════════════════════════════════════════════════════════════
   ADEMPIMENTI · ISA
   ═══════════════════════════════════════════════════════════════════
   Il viola e' il colore che restava, ed e' anche quello giusto: e'
   l'area che non condivide niente con le altre — non ci sono clienti,
   non ci sono immobili, c'e' un modulo che va all'Agenzia delle
   Entrate. Deve sembrare un altro posto. */
.porta--viola { background:linear-gradient(158deg, #4A3568 0%, #382851 52%, #241933 100%);
  box-shadow:0 1px 2px rgba(36,25,51,.22), 0 20px 44px -14px rgba(36,25,51,.48); }
.porta--viola .porta__eti { color:#C7B3E4; }
.porta--viola .porta__d { color:#A796C2; }
.cima--viola { background:#2F2246; border-bottom-color:#4A3568; }
.cima--viola .cima__nome b { color:#C7B3E4; }
.cima--viola .cima__nome em, .cima--viola .cima__chi span, .cima--viola .cima__mod { color:#8E7CAC; }
.cima--viola .cima__chi { border-left-color:#4A3568; }
.cima--viola .cima__esci, .cima--viola .cima__occhio { border-color:#584077; color:#C2AEE0; }
.cima--viola .cima__esci:hover, .cima--viola .cima__occhio:hover { border-color:#B79BE4; color:#fff; }
.cima--viola .agg { border-color:#584077; color:#C2AEE0; background:rgba(167,138,216,.12); }
.cima--viola .agg:hover { border-color:#B79BE4; color:#fff; }
.cima--viola .camp__b { border-color:#584077; color:#BFAADD; }
.cima--viola .cima__sel { border-color:#584077; color:#C2AEE0; }
.cima__pal--viola { background:#4A3568; }
.app:has(.cima--viola) .tabbar { background:rgba(36,25,51,.94); border-color:rgba(199,179,228,.20); }

.isa { max-width:1000px; margin:0 auto; }
.isa__t { display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
.isa__t h2 { margin:0 0 4px; font-size:20px; letter-spacing:-.02em; }
.isa__t p { margin:0; font-size:12.5px; line-height:1.5; color:var(--muto); max-width:62ch; }
.isa__az { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.isa__az select { width:auto; font-size:12.5px; padding:7px 10px; }
.isa__stato { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:14px 0 0; padding:12px 16px; border-radius:11px; background:var(--sup);
  border:1px solid var(--line); font-size:12.5px; color:var(--muto); }
.isa__stato b { font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink); }
.isa__stato .btn { margin-left:auto; }

.isa__manca { margin-top:14px; padding:14px 16px; border-radius:11px;
  background:#FFF8EC; border:1px solid #F0D9A8; border-left:3px solid #C96A00; }
.isa__manca > b { display:block; font-size:13.5px; color:#6B3D00; margin-bottom:9px; }
.isa__lac { display:flex; gap:12px; padding:9px 0; border-top:1px solid rgba(201,106,0,.16); }
.isa__lacr { flex:0 0 96px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  line-height:1.5; color:#8A5A12; }
.isa__lact { display:flex; flex-direction:column; gap:3px; min-width:0;
  font-size:12px; line-height:1.5; color:var(--ink2); }
.isa__lact b { font-size:12.5px; color:var(--nero); }
.isa__lact i { font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:#8A5A12; word-break:break-word; }
.isa__lact u { text-decoration:none; font-size:11.5px; color:var(--muto); }

.isa__com { margin-top:14px; padding:14px 16px; border-radius:11px;
  background:var(--sup); border:1px solid var(--line); }
.isa__com > b { display:block; font-size:13.5px; margin-bottom:4px; }
.isa__com > p { margin:0 0 9px; font-size:12px; line-height:1.5; color:var(--muto); max-width:76ch; }
.isa__comr { display:flex; align-items:center; gap:12px; padding:5px 0; }
.isa__comr > span { flex:0 0 200px; min-width:0; font-size:12.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.isa__comr select { flex:1 1 auto; min-width:0; font-size:12px; padding:6px 9px; }

.isa__g { margin-top:22px; }
.isa__gh { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding-bottom:7px; border-bottom:1px solid var(--ink); }
.isa__gh b { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.isa__tot { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#A33; }
.isa__tot.is-ok { color:#1F7A4D; }
.isa__r { display:flex; align-items:flex-start; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--line); }
.isa__c { flex:0 0 38px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--muto); padding-top:7px; }
.isa__d { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;
  font-size:12.5px; line-height:1.45; padding-top:5px; }
.isa__sug { align-self:flex-start; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:#1F5C8F; text-align:left; }
.isa__sug b { font-family:'IBM Plex Mono',monospace; }
.isa__sug:hover { text-decoration:underline; }
.isa__v { flex:0 0 86px; width:86px; text-align:right; font-family:'IBM Plex Mono',monospace;
  font-size:13px; padding:6px 9px; }
.isa__v--2 { flex:0 0 66px; width:66px; }
.isa__x { flex:0 0 auto; width:auto; margin:9px 32px 0 0; }
.isa__nota { margin:7px 0 0; font-size:11.5px; line-height:1.5; color:var(--muto); }
.isa__pie { margin:26px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--muto); max-width:78ch; }

@media (max-width:760px) {
  .isa__stato .btn { margin-left:0; }
  .isa__lac { flex-direction:column; gap:4px; }
  .isa__lacr { flex:0 0 auto; }
  .isa__comr { flex-direction:column; align-items:stretch; gap:5px; }
  .isa__comr > span { flex:0 0 auto; }
  .isa__r { flex-wrap:wrap; }
  .isa__d { flex:1 1 100%; order:2; }
  .isa__v { order:3; margin-left:auto; }
  .isa__v--2 { order:4; }
}