/* ============================================================
   Il Gestionale di Elena Guardigli
   Palette e tipografia approvate il 27 agosto 2026.
   I quattro colori --s1..--s4 sono stati validati sui cinque
   controlli di leggibilità: non sostituirli a occhio.
   ============================================================ */

:root{
  --deep:#062227; --ground:#082A30; --surface:#0D373E; --raised:#12454D;
  --line:#1B5A63; --line-soft:#134048;
  --text:#EAF4F2; --text-2:#A8C6C4; --text-3:#7BA09E;
  --gold:#E9A83C; --coral:#F07A6B; --mint:#63D6B0;
  --band:#265C64;

  /* ---------- superfici ----------
     Le box sono avorio sfumato su fondo petrolio: fogli chiari
     appoggiati su una superficie scura. Il testo dentro è petrolio,
     non chiaro. Scelta del 27 agosto 2026. */
  --avorio:246,241,230;

  /* Il gradiente non è sul colore ma sull'opacità: l'avorio è sempre
     lo stesso e cambia quanto petrolio lascia passare, dal 79% nel
     vertice in alto a sinistra al 63% nell'angolo in basso a destra.
     Il nero resta leggibile su tutta la diagonale: 11,1:1 nel punto
     più chiaro, 7,7:1 nel più scuro, entrambi sopra la soglia dei 7. */
  /* «to bottom right» segue le proporzioni del riquadro: la sfumatura
     va davvero da vertice a vertice, qualunque forma abbia la box. Per
     compensare la diagonale schiacciata delle box larghe, il divario è
     più ampio di quello chiesto (79→58 invece di 79→63): a occhio il
     risultato è quello voluto. */
  --velo-box:linear-gradient(to bottom right,
              rgba(var(--avorio),.80) 0%,
              rgba(var(--avorio),.58) 100%);
  --velo-riga:linear-gradient(to bottom right,
              rgba(255,253,247,.46) 0%,
              rgba(255,253,247,.24) 100%);
  --bordo-box:rgba(var(--avorio),.42);
  --bordo-riga:rgba(255,253,247,.26);

  /* Inchiostri dentro le box: nero, su richiesta di Elena.
     Il petrolio resta il colore della cornice, non del testo. */
  --ink:#000000;
  --ink-2:#242424;
  --ink-3:#4A4A4A;

  /* Avvisi su fondo chiaro: fondi tenui e testo scuro, altrimenti
     l'oro non si legge. */
  --velo-gold:linear-gradient(to bottom right,
              rgba(246,226,180,.84) 0%, rgba(240,215,158,.60) 100%);
  --bordo-gold:rgba(216,181,105,.62);
  --oro-scuro:#7A5610;
  --velo-coral:linear-gradient(to bottom right,
              rgba(246,214,203,.84) 0%, rgba(240,198,184,.60) 100%);
  --bordo-coral:rgba(216,156,140,.62);
  --coral-scuro:#A34433;
  --velo-mint:#E3F1EA;
  --mint-scuro:#1C6B4A;

  /* Serie dei grafici, validate sul fondo avorio #F1ECE0 */
  --g1:#A66E12; --g2:#A83C80; --g3:#1F6BC4; --g4:#1C7F55;
  --s1:#BE8218; --s2:#C4519B; --s3:#3987E5; --s4:#2E9E6B;
  --rail-w:230px;

  /* ---------- tipografia ----------
     Scelta il 27 agosto 2026: Playfair Display per i titoli, Figtree per tutto
     il resto. I numeri usano lo stesso carattere del testo, con le cifre
     allineate in colonna: prima erano in monospaziato e sembravano un
     terminale. La scala è più grande di circa un terzo rispetto alla
     prima versione, che risultava minuta. */
  --f-tit:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-txt:"Figtree",system-ui,-apple-system,sans-serif;

  --t-xs:11px;    /* etichette in maiuscoletto */
  --t-sm:14px;    /* contatori, targhette */
  --t-md:15px;    /* sottotitoli, note */
  --t-base:15px;  /* pulsanti, campi */
  --t-lg:16px;    /* voci del menù */
  --t-rg:18px;    /* righe: nomi di attività, corsi, clienti */
  --t-h3:20px;
  --t-h2:24px;
  --t-num:32px;   /* i numeri grandi degli indicatori */
  --t-big:34px;

  /* Le etichette: stesso carattere del resto, in maiuscoletto spaziato. */
  --f-eti:"Figtree",system-ui,sans-serif;

  --lh:1.6;       /* respiro del testo */
  --lh-riga:1.45; /* dentro le righe */
}

/* Le cifre restano incolonnate anche senza monospaziato. */
.mono,.money,.num,.ct,.when,.chip,.delta,.big,.kpi .k b{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--deep);color:var(--text);
  font-family:var(--f-txt);
  font-size:var(--t-base);line-height:var(--lh);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* Tutti i titoli in Figtree, come le intestazioni delle schede: la
   gerarchia la fanno corpo e peso, non un carattere diverso. Il serif
   resta solo nel monogramma. */
h1,h2,h3,h4{font-family:var(--f-txt);margin:0;font-weight:700;
  letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
.mono{font-family:var(--f-txt)}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------- accesso ----------------
   Schermata chiara, in contrasto col resto dell'app che è scuro.
   Su fondo crema l'oro perde stacco, quindi qui il monogramma e il
   pulsante si invertono: petrolio pieno su crema, non oro su crema. */
:root{ --crema:#F2EEE4; --crema-2:#E6E0D2; }

#login{position:fixed;inset:0;background:var(--crema);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:200}
#lpulisci{position:absolute;top:18px;right:18px;width:38px;height:38px;padding:0;
  background:transparent;border:1px solid var(--crema-2);border-radius:10px;
  color:#9C947F;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .15s,border-color .15s}
#lpulisci:hover{color:var(--deep);border-color:var(--deep)}
#lpulisci:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
#lpulisci:disabled{opacity:.4}
.loginbox{width:100%;max-width:340px;text-align:center}
.loginbox .eg{margin:0 auto 24px;background:var(--deep);color:var(--gold);
  width:56px;height:56px;border-radius:15px;font-size:21px}
.loginbox h1{font-size:29px;font-weight:700;margin-bottom:5px;color:var(--deep)}
.loginbox p{color:#6B6558;font-size:var(--t-lg);margin-bottom:26px}

.loginbox button{width:100%;background:var(--deep);border:0;color:var(--crema);
  border-radius:11px;padding:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:11px;font-size:var(--t-lg);
  transition:filter .15s,border-color .15s,color .15s}
.loginbox button:hover{filter:brightness(1.25)}
.loginbox button:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.loginbox button svg{flex:none}

#loginerr{color:#A63D3D;font-size:13px;margin-top:14px;min-height:19px}

/* ---------------- monogramma ---------------- */
.eg{width:36px;height:36px;border-radius:10px;background:var(--gold);color:var(--deep);
  font-family:var(--f-tit);font-weight:800;font-size:14px;letter-spacing:-.04em;
  display:flex;align-items:center;justify-content:center;flex:none}
.eg.sm{width:34px;height:34px;border-radius:9px;font-size:14px}

/* ---------------- impianto ---------------- */
#app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}

/* ---------------- colonna ---------------- */
.rail{background:var(--deep);border-right:1px solid var(--line-soft);
  padding:16px 12px 24px;overflow-y:auto;position:sticky;top:0;height:100vh}
/* Cliccabile ma identico a prima: nessuno sfondo, nessun bordo,
   nessun effetto al passaggio del mouse. Cambia solo il cursore. */
.railtop{display:flex;align-items:center;gap:9px;padding:0 6px;margin:0 0 20px;
  width:100%;background:none;border:0;text-align:left;color:inherit;
  font-family:inherit;font-size:inherit;cursor:pointer}
.railtop:focus-visible{outline:1px solid var(--line);outline-offset:4px;border-radius:8px}
.railtop b{font-family:var(--f-txt);font-size:18.5px;font-weight:700;line-height:1.25}
.railtop b span{display:block;font-size:13.5px;color:var(--text-3);font-weight:400;
  font-family:var(--f-txt);letter-spacing:0}
.grp{font-family:var(--f-eti);font-size:12.5px;letter-spacing:.18em;font-weight:600;
  text-transform:uppercase;color:var(--text-3);margin:26px 0 9px;padding:0 8px}
.grp:first-of-type{margin-top:0}
.rail button:not(.railtop){width:100%;display:flex;align-items:center;gap:11px;
  background:none;border:0;font-size:var(--t-lg);color:var(--text-2);padding:6px 8px;
  border-radius:7px;cursor:pointer;text-align:left;transition:background .14s,color .14s}
.rail button:not(.railtop):hover{background:var(--surface);color:var(--text)}
.rail button:not(.railtop)[aria-current="page"]{background:var(--gold);color:var(--deep);font-weight:600}
.rail button:not(.railtop) svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rail .ct{margin-left:auto;font-size:var(--t-sm);color:var(--text-3)}
.rail button[aria-current="page"] .ct{color:rgba(6,34,39,.65)}
.rail .ct.hot{color:var(--gold)}
.rail button[aria-current="page"] .ct.hot{color:var(--deep)}

/* ---------------- area centrale ---------------- */
.main{padding:18px 20px 40px;min-width:0}
.mainbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.mainbar h2{font-family:var(--f-txt);font-size:var(--t-h2);font-weight:700;font-weight:700;margin-right:auto;line-height:1.2}
.mainbar h2 span{display:block;font-family:var(--f-txt);font-size:var(--t-md);
  font-weight:400;color:var(--text-3);letter-spacing:0;margin-top:3px}
.sbox{display:flex;align-items:center;gap:9px;background:var(--deep);
  border:1px solid var(--line-soft);border-radius:9px;padding:0 14px;
  flex:1 1 270px;min-width:270px;max-width:360px}
.sbox svg{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2;flex:none}
.sbox input{background:none;border:0;padding:10px 0;width:100%;
  font-size:var(--t-base);outline:none;text-overflow:ellipsis}
.sbox input::placeholder{color:var(--text-3)}

.tbtn{display:inline-flex;align-items:center;gap:7px;background:var(--velo-box);
  border:1px solid var(--bordo-box);color:var(--text);border-radius:9px;padding:9px 14px;
  font-size:var(--t-base);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tbtn:hover{border-color:var(--gold);color:var(--gold)}
.tbtn b{font-family:var(--f-txt);font-weight:500}
.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.tbtn.run{border-color:var(--mint);color:var(--mint)}
.tbtn .lash{display:none}
body.privacy .tbtn.eyeb{background:var(--gold);border-color:var(--gold);color:var(--deep)}
body.privacy .tbtn.eyeb .lash{display:block}
body.privacy .tbtn.eyeb .open{display:none}

/* Due icone nude in fondo alla barra: niente bordo, niente sfondo,
   nessuna aria da pulsante. Solo il segno. */
.icone{display:flex;align-items:center;gap:4px;margin-left:2px}
.ico{background:none;border:0;padding:7px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,opacity .15s}
.ico:hover{opacity:.75}

/* Ognuna col suo colore: il pomodoro è rosso perché è un pomodoro,
   il biscotto dorato, l'occhio resta neutro finché non è attivo. */
#pomo{color:var(--coral)}
#pulisci{color:var(--gold)}
#eye{color:var(--text-3)}
#eye:hover{color:var(--text-2)}
.ico:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ico svg{flex:none}
.ico b{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  margin-left:6px;letter-spacing:-.01em}
.ico b:empty{display:none}
#pomo.run{color:var(--gold)}
.ico .lash{display:none}
body.privacy .ico.eyeb{color:var(--mint)}
body.privacy .ico.eyeb .lash{display:block}
body.privacy .ico.eyeb .open{display:none}

/* ---------------- indicatori ---------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--velo-box);border:1px solid var(--bordo-box);border-radius:13px;
  padding:16px 17px;display:flex;gap:13px;align-items:flex-start}
.kpi .ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  flex:none;margin-top:3px}
.kpi .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ic.g{color:var(--g1)}.ic.m{color:var(--g4)}.ic.b{color:var(--g3)}.ic.p{color:var(--g2)}
.kpi .k{min-width:0}
.kpi .k b{display:block;color:var(--ink);font-size:var(--t-num);
  font-weight:600;letter-spacing:-.03em;line-height:1.15}
.kpi .k span{font-size:var(--t-md);color:var(--ink-3);display:block}
.delta{font-size:var(--t-sm);margin-top:5px;display:block}
.delta.up{color:var(--mint-scuro)}.delta.dn{color:var(--coral-scuro)}.delta.fl{color:var(--ink-3)}

/* ---------------- griglie ---------------- */
/* Ogni scheda prende l'altezza del suo contenuto: senza questo le
   colonne si pareggiano sulla più alta e le schede corte restano
   mezze vuote. */
.row{display:grid;gap:12px;margin-bottom:12px;align-items:start}
.r-2a{grid-template-columns:1.35fr 1fr}
.r-2{grid-template-columns:1fr 1fr}
.r-3{grid-template-columns:repeat(3,1fr)}

/* ---------------- schede ---------------- */
.card{background:var(--velo-box);color:var(--ink);border:1px solid var(--bordo-box);
  border-radius:13px;padding:17px 18px}
.ch{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.ch h3{font-family:var(--f-txt);font-size:13px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin-right:auto}
.ch a,.ch button.lnk{font-size:var(--t-sm);color:var(--ink-3);text-decoration:none;
  font-family:var(--f-txt);background:none;border:0;cursor:pointer;padding:0}
.ch a:hover,.ch button.lnk:hover{color:var(--oro-scuro)}

.it{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border-radius:10px;
  background:var(--velo-riga);border:1px solid var(--bordo-riga);
  margin-bottom:8px;line-height:var(--lh-riga)}
.it:last-child{margin-bottom:0}
.it .bd{flex:1;min-width:0}
.it .bd strong{display:block;color:var(--ink);font-weight:600;font-size:var(--t-rg);line-height:1.4}
.it .bd span{font-size:var(--t-md);color:var(--ink-3);display:block;line-height:1.45}
.it.warn{background:var(--velo-gold);border-color:var(--bordo-gold)}
.it.crit{background:var(--velo-coral);border-color:var(--bordo-coral)}
.it.add{background:transparent;border:1px dashed var(--bordo-box);color:var(--ink-3);
  font-size:var(--t-base);cursor:pointer}
.it.add:hover{border-color:var(--oro-scuro);color:var(--oro-scuro)}
.it .kill{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:0 2px;
  font-size:15px;line-height:1;opacity:0;transition:opacity .15s}
.it:hover .kill{opacity:1}
.it .kill:hover{color:var(--coral-scuro)}

.tick{width:17px;height:17px;border:1.7px solid var(--ink-3);border-radius:5px;flex:none;
  margin-top:4px;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.tick:hover{border-color:var(--mint-scuro)}
.tick.done{background:var(--mint-scuro);border-color:var(--mint-scuro)}
.tick.done::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:9px;
  border:solid #FCFAF4;border-width:0 2px 2px 0;transform:rotate(42deg)}
.it.off .bd strong{text-decoration:line-through;color:var(--ink-3)}

.av{width:31px;height:31px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--f-tit);font-weight:600;font-size:12px;
  letter-spacing:-.02em;color:#FCFAF4}
.tag{font-size:var(--t-xs);letter-spacing:.04em;
  padding:3px 8px;border-radius:5px;background:var(--deep);color:var(--text-3);
  border:1px solid var(--line-soft);flex:none;margin-top:3px}
button.tag{cursor:pointer}
button.tag:hover{color:var(--oro-scuro);border-color:var(--oro-scuro)}
.chip{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-sm);font-weight:600;padding:3px 11px;border-radius:999px;flex:none;margin-top:3px}
.chip.g{background:rgba(246,226,180,.75);color:var(--oro-scuro)}
.chip.c{background:rgba(246,214,203,.75);color:var(--coral-scuro)}
.chip.m{background:rgba(214,238,226,.7);color:var(--mint-scuro)}
.chip.n{background:rgba(255,253,247,.42);color:var(--ink-2)}
.when{font-size:var(--t-md);color:var(--ink-2);flex:none;
  text-align:right;margin-top:3px;line-height:1.35}
.when b{display:block;color:var(--ink);font-weight:600}

/* Numeri grandi e note sotto: erano usati nel codice ma non
   definiti qui, quindi ereditavano la misura del testo. */
.big{display:block;color:var(--ink);font-size:var(--t-big);font-weight:600;
  letter-spacing:-.03em;line-height:1.1}
.sub{font-size:var(--t-md);color:var(--ink-3);margin-top:5px;line-height:1.5}

/* ---------------- importi e occhiolino ---------------- */
.money{border-radius:3px;transition:color .16s,background-color .16s}
body.privacy .money{border-radius:3px;transition:color .16s,background-color .16s}
body.privacy .hidefill{fill:var(--band) !important}
body.privacy .hidestroke{stroke:var(--band) !important}
body.privacy .hidebar{background:var(--band) !important}

/* ---------------- grafici ---------------- */
.leg{display:flex;flex-direction:column;gap:7px;min-width:0}
.legrow{display:flex;align-items:center;gap:10px;font-size:var(--t-md)}
.legrow .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legrow .nm{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.legrow .pc{font-size:var(--t-sm);color:var(--ink-3);flex:none}
.legrow .vl{font-size:var(--t-md);flex:none;
  min-width:58px;text-align:right}
.donutwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut{position:relative;flex:none}
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.donut .mid b{font-size:22px;font-weight:600;
  letter-spacing:-.03em;line-height:1}
.donut .mid span{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:9px;height:104px;padding-top:6px}
.bcol{flex:1;display:flex;flex-direction:row;align-items:flex-end;gap:3px;height:100%}
.bcol .seg{flex:1;border-radius:3px 3px 0 0;transition:opacity .15s}
.bcol:hover .seg{opacity:.75}
.blab{display:flex;gap:9px;margin-top:7px}
.blab div{flex:1;text-align:center;
  font-size:var(--t-sm);color:var(--ink-3)}
.blab div.now{color:var(--oro-scuro);font-weight:600}
.meter{height:8px;border-radius:4px;background:rgba(10,42,46,.13);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--g4)}
.meter i.late{background:var(--g1)}

/* ---------------- blocchi mensili delle docenze ---------------- */
.card.mese{padding:0;overflow:hidden;margin-bottom:14px}
.card.mese:last-of-type{margin-bottom:0}
.mese-h{display:flex;align-items:center;gap:11px;width:100%;padding:15px 18px;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--ink-2);
  transition:color .14s}
.mese-h:hover{color:var(--ink)}
.mese-h:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:-3px}
.mese-h h3{font-family:var(--f-txt);font-size:19px;font-weight:700;
  color:var(--ink);margin-right:auto;text-transform:none;letter-spacing:-.01em}
.mese-h .mese-n{font-size:var(--t-md);color:var(--ink-3);font-variant-numeric:tabular-nums}
.mese-h .frec{flex:none;transition:transform .18s}
.card.mese.chiuso .frec{transform:rotate(-90deg)}
.mese-c{padding:0 18px 17px}
.card.mese.chiuso .mese-c{display:none}
.card.mese.chiuso .mese-h{padding-bottom:15px}

/* La scheda «Da fare» porta alle Attività: il titolo diventa un
   comando, non solo un'etichetta. */
.ch h3.vai{cursor:pointer;transition:color .14s}
.ch h3.vai:hover{color:var(--ink)}

/* Le schede messe una sotto l'altra dentro un pannello — le tre
   categorie delle novità, le fasce degli eventi — devono respirare
   come i blocchi mensili delle docenze. Dentro una .row ci pensa il
   gap, qui no. */
.pane > .card{margin-bottom:14px}
.pane > .card:last-child{margin-bottom:0}

/* ---------------- scheda fatturato ---------------- */
.anno-testa{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.anno-num{font-size:38px;font-weight:700;letter-spacing:-.03em;
  color:var(--text);margin-right:auto;line-height:1;font-variant-numeric:tabular-nums}
#annoSel{background:var(--surface);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:9px 13px;font-size:var(--t-base);cursor:pointer}
#annoSel:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.anno-graf{display:flex;align-items:flex-end;gap:7px;height:180px;padding-top:8px}
.anno-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.anno-barre{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.anno-barre i{display:block;width:100%;max-width:20px;border-radius:4px 4px 0 0;min-height:2px}
.anno-barre .ora{background:var(--g4)}
.anno-barre .prima{background:var(--g1);opacity:.4}
.anno-col span{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.anno-col:hover .anno-barre i{opacity:.75}
body.privacy .anno-barre i{background:rgba(60,60,60,.4) !important}

/* ---------------- pannelli ---------------- */
.pane{display:none}
.pane.on{display:block}
.empty{color:var(--ink-3);font-size:var(--t-base);padding:12px 2px;line-height:1.55}
.err{color:var(--coral);font-size:var(--t-md);padding:8px 10px;border-radius:8px;
  background:var(--velo-coral);color:var(--coral-scuro);border:1px solid var(--bordo-coral);margin-bottom:6px}

/* ---------------- finestre ---------------- */
.modal{position:fixed;inset:0;background:rgba(6,34,39,.8);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:150}
.modal .box{background:var(--ground);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;width:100%;max-width:440px;max-height:86vh;overflow-y:auto}
.modal h3{font-family:var(--f-txt);font-weight:700;font-size:var(--t-h3);margin-bottom:16px}
.modal label{display:block;font-family:var(--f-eti);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:16px 0 6px}
.modal input,.modal textarea,.modal select{width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:var(--t-base)}
.modal textarea{min-height:76px;resize:vertical}
.modal .acts{display:flex;gap:9px;margin-top:18px}
.modal .acts button{flex:1;border-radius:8px;padding:9px;border:0;cursor:pointer;font-weight:600}
.modal .acts .ok{background:var(--gold);color:var(--deep)}
.modal .acts .no{background:transparent;border:1px solid var(--line);color:var(--text-2)}
.modal .chk{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:var(--t-base);cursor:pointer}
.modal .chk input{width:auto;margin:0}

.tip{position:fixed;pointer-events:none;background:var(--deep);border:1px solid var(--line);
  border-radius:9px;padding:9px 13px;font-size:var(--t-md);z-index:180;
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .12s}
.tip.on{opacity:1}
.tip b{font-family:var(--f-txt);font-weight:500}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--gold);color:var(--deep);border-radius:9px;padding:10px 18px;
  font-weight:600;font-size:var(--t-base);z-index:190;opacity:0;transition:all .2s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------------- ricerca globale ---------------- */
#results{position:absolute;z-index:120;background:var(--ground);border:1px solid var(--line);
  border-radius:11px;padding:8px;width:340px;max-height:420px;overflow-y:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
#results .rgrp{font-family:var(--f-eti);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);padding:9px 9px 5px}
#results button{width:100%;text-align:left;background:none;border:0;color:var(--text-2);
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:var(--t-base)}
#results button:hover{background:var(--surface);color:var(--text)}
#results button span{display:block;font-size:var(--t-sm);color:var(--text-3)}

/* ---------------- telefono ---------------- */
@media(max-width:900px){
  #app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:140;height:100vh;
    transform:translateX(-100%);transition:transform .22s;border-right:1px solid var(--line)}
  body.railopen .rail{transform:none}
  body.railopen::after{content:"";position:fixed;inset:0;background:rgba(6,34,39,.6);z-index:130}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .r-2a,.r-2,.r-3{grid-template-columns:1fr}
  .main{padding:14px 14px 90px}
  .mainbar h2{font-size:17px}
  .sbox{display:flex;align-items:center;gap:9px;background:var(--deep);
  border:1px solid var(--line-soft);border-radius:9px;padding:0 14px;
  flex:1 1 270px;min-width:270px;max-width:360px}
  #burger{display:inline-flex !important}
}
#burger{display:none}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
@media print{.rail,.mainbar,.it .kill{display:none}}