/* Il font sta nella cartella: cosi' i mockup si guardano anche senza rete,
   e non dipendono dalla cache del browser. Il file variabile copre tutti i
   pesi da 100 a 900 in una volta. */
@font-face{
  font-family:'League Spartan';
  src:url('/static/fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-display:swap;
}
/* ====================================================================
   IL PANNELLO DELL'ASSISTENTE
   Si apre sopra la pagina: la domanda nasce mentre lavori, e uscire per
   chiederla significa perdere il posto.
   Grafica sua, piu' calda degli altri pannelli: e' una conversazione, non
   un modulo da compilare.
   ==================================================================== */
.velo-as{position:fixed; inset:0; z-index:290;
  background:color-mix(in srgb, var(--testo) 30%, transparent);
  opacity:0; pointer-events:none; transition:opacity 220ms ease}
.velo-as.aperto{opacity:1; pointer-events:auto}
.pan-as{position:fixed; top:0; right:0; bottom:0; z-index:300;
  width:min(540px, 96vw); display:flex; flex-direction:column;
  background:var(--superficie); box-shadow:var(--ombra-alta);
  transform:translateX(100%); visibility:hidden;
  transition:transform 280ms cubic-bezier(.4,0,.2,1), visibility 280ms}
.pan-as.aperto{transform:none; visibility:visible}
@media (prefers-reduced-motion: reduce){ .pan-as, .velo-as{transition:none} }

.capo-as{position:relative; flex:none}
.banner-as{display:block; width:100%; aspect-ratio:13/4; object-fit:cover;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--azione) 22%, var(--superficie)),
    color-mix(in srgb, #7a4f9c 18%, var(--superficie)))}
.chiudi-as{position:absolute; top:var(--s3); right:var(--s3);
  width:34px; height:34px; border-radius:50%;
  background:color-mix(in srgb, var(--superficie) 82%, transparent);
  color:var(--testo); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px)}
.chiudi-as:hover{background:var(--superficie)}
.chiudi-as svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}

.corpo-as{flex:1 1 0; overflow-y:auto; padding:var(--s5) var(--s5) var(--s4);
  display:flex; flex-direction:column; gap:var(--s4)}

.benvenuto-as .dice-as{margin:0 0 var(--s5); font-size:15px; line-height:1.6;
  color:var(--testo)}
.esempi-as{display:flex; flex-direction:column; gap:7px; margin-top:var(--s3)}
.esempi-as button{text-align:left; font-size:13.5px; line-height:1.45;
  padding:11px var(--s4); border-radius:11px;
  border:1px solid var(--bordo); background:var(--superficie-alt);
  color:var(--testo-medio)}
.esempi-as button:hover{border-color:var(--azione); color:var(--azione);
  background:color-mix(in srgb, var(--azione) 5%, var(--superficie))}
.limite-as{margin:var(--s5) 0 0; padding:var(--s3) var(--s4); border-radius:10px;
  background:var(--superficie-alt); border-left:3px solid var(--bordo-forte);
  font-size:11.5px; color:var(--testo-debole); line-height:1.6}

/* le battute */
.chiesto{align-self:flex-end; max-width:82%; padding:11px var(--s4);
  border-radius:14px 14px 4px 14px; background:var(--azione); color:#fff;
  font-size:14px; line-height:1.55}
.risposto{max-width:94%; font-size:14px; line-height:1.65; color:var(--testo)}
.risposto p{margin:0 0 var(--s3)}
.risposto p:last-child{margin-bottom:0}
.risposto b{font-weight:600}
.fonte-as{display:inline-flex; align-items:center; gap:7px; margin-top:var(--s3);
  font-size:11.5px; color:var(--testo-medio); background:var(--superficie-alt);
  border:1px solid var(--bordo); border-radius:8px; padding:6px 11px;
  text-decoration:none}
.fonte-as:hover{border-color:var(--azione); color:var(--azione)}
.fonte-as svg{width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fonte-as .quando-f{color:var(--testo-debole)}
.non-so{padding:var(--s4); border-radius:11px; background:var(--nota-fondo);
  border:1px solid var(--nota-bordo); color:var(--nota); font-size:13.5px;
  line-height:1.6}
.non-so b{color:var(--testo)}
.pollici{display:flex; gap:6px; margin-top:var(--s3)}
.pollici button{width:30px; height:30px; border-radius:8px; border:1px solid var(--bordo);
  background:var(--superficie); color:var(--testo-debole); font-size:13px;
  display:flex; align-items:center; justify-content:center}
.pollici button:hover{border-color:var(--azione); color:var(--azione)}
.pollici button[aria-pressed="true"]{border-color:var(--adesso); color:var(--adesso);
  background:color-mix(in srgb, var(--adesso) 9%, var(--superficie))}
.sto-pensando{display:flex; gap:5px; align-items:center; color:var(--testo-debole);
  font-size:13px}
.sto-pensando i{width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulsa 1.2s infinite}
.sto-pensando i:nth-child(2){animation-delay:.2s}
.sto-pensando i:nth-child(3){animation-delay:.4s}
@keyframes pulsa{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* **l'assistente base** (05/10, G13-20): «Ti è servito?» accanto ai
   pollici, gli altri testi vicini sotto la risposta, i titoli e gli elenchi
   dei testi, e gli esempi che non si vedono finche' non arrivano */
.pollici{align-items:center}
.pollici .dice-pollici-as{font-size:11.5px; color:var(--testo-debole); margin-right:4px}
.vicini-as{display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:var(--s4)}
/* **i testi vicini come gli esempi** (05/10, Luciano): si toccano per avere
   quella risposta, come una domanda; la fonte e' un'altra cosa */
.vicini-as button{text-align:left; font:inherit; font-size:13px; line-height:1.45;
  padding:9px var(--s4); border-radius:11px; border:1px solid var(--bordo);
  background:var(--superficie-alt); color:var(--testo-medio); cursor:pointer}
.vicini-as button:hover{border-color:var(--azione); color:var(--azione);
  background:color-mix(in srgb, var(--azione) 5%, var(--superficie))}
.vicini-as .cat-vicino-as{color:var(--testo-debole); font-size:11.5px}
/* **i dati del listino** nella risposta (08/10, G16-09): sopra la scheda del
   trattamento, o da soli; un riquadro sobrio, etichetta a sinistra e valore
   a destra */
.listino-as{margin:0 0 var(--s3); padding:var(--s3) var(--s4); border-radius:10px; background:var(--superficie-alt); border:1px solid var(--bordo)}
.listino-as .eyebrow{display:block; margin-bottom:6px}
.riga-listino-as{display:flex; justify-content:space-between; gap:var(--s3); font-size:13px; line-height:1.5; padding:2px 0}
.riga-listino-as span{color:var(--testo-medio)}
.riga-listino-as b{font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.nota-listino-as{margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--testo-debole)}
/* **la fonte si legge, non si tocca**; chi puo' correggere ha il suo
   collegamento, scritto (05/10, Luciano) */
.fonte-riga-as{margin-top:var(--s3); font-size:11.5px; line-height:1.5; color:var(--testo-debole)}
.fonte-riga-as b{font-weight:600; color:var(--testo-medio)}
.correggi-as{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s2);
  font-size:12px; font-weight:600; color:var(--azione); text-decoration:none}
.correggi-as:hover{text-decoration:underline}
.correggi-as svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.risposto ul, .risposto ol{margin:0 0 var(--s3); padding-left:1.3em}
.risposto li{margin-bottom:3px}
.risposto h2, .risposto h3, .risposto h4{font-size:14.5px; font-weight:600; margin:var(--s3) 0 var(--s2)}
.risposto strong{font-weight:600}
.benvenuto-as [hidden]{display:none}

.piede-as{flex:none; padding:var(--s3) var(--s5) var(--s4);
  border-top:1px solid var(--bordo); background:var(--superficie)}
.scrivi-as{display:flex; gap:var(--s2); align-items:flex-end;
  border:1.5px solid var(--bordo-forte); border-radius:14px; padding:6px 6px 6px var(--s4);
  background:var(--superficie); transition:border-color var(--apertura) ease}
.scrivi-as:focus-within{border-color:var(--azione);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 12%, transparent)}
/* il contorno del browser qui e' un doppione: il riquadro attorno si colora
   gia' con `:focus-within`, e due segni sullo stesso elemento sono rumore */
.scrivi-as textarea:focus, .scrivi-as textarea:focus-visible{outline:none; box-shadow:none}
.scrivi-as textarea{flex:1 1 0; border:0; outline:none; resize:none; background:none;
  font:inherit; font-size:14.5px; line-height:1.5; color:var(--testo);
  padding:9px 0; max-height:130px}
.b-chiedi{width:38px; height:38px; border-radius:10px; flex:none;
  background:var(--azione); color:#fff; display:flex; align-items:center;
  justify-content:center}
.b-chiedi:disabled{opacity:.35; cursor:default}
.b-chiedi svg{width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.nota-as{display:block; margin-top:var(--s2); font-size:11px;
  color:var(--testo-debole); text-align:center}

/* L'avatar mostra la FOTO quando c'e'; le iniziali sono il ripiego.
   E le iniziali sono di nome e cognome: «DB» per «Debora» non vuol dire
   niente, sarebbe «D». */
.tondo{overflow:hidden; position:relative}
.tondo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* IL MENU «ALTRO»
   Prima «Operatività» e «Configurazioni» stavano allo stesso livello, ma le
   colonne due e tre erano **entrambe** configurazione: la distinzione era
   fatta due volte, e infatti non si capiva.
   Ora la prima colonna e' quello che si fa e si guarda; le altre due stanno
   sotto un'intestazione sola che dice che sono impostazioni — e restano due,
   non una lunghissima. */
/* tre colonne di contenuto hanno bisogno di spazio: 660px erano pensati per
   il menu vecchio, e comprimevano la configurazione fino a renderla
   illeggibile */
.tendina.mega{min-width:900px !important;
  grid-template-columns:230px minmax(0,1fr) !important}
.gruppo-config{min-width:0; background:color-mix(in srgb, var(--azione) 4%, var(--superficie-alt));
  border:1px solid color-mix(in srgb, var(--azione) 20%, transparent);
  border-radius:11px; padding:var(--s3) var(--s2) var(--s2)}
.eti-config{display:flex; align-items:center; gap:8px; font-family:var(--titoli);
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--azione); padding:0 var(--s3) var(--s3);
  margin-bottom:0}
.eti-config svg{width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dentro-config{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2)}
.dentro-config .col-mega{background:none; border:0; padding:0}
.dentro-config .eti{padding-top:var(--s3)}
@media (max-width:820px){
  .tendina.mega{grid-template-columns:1fr}
  .dentro-config{grid-template-columns:1fr}
}

/* ====================================================================
   (qui finiva il primo blocco del mockup e cominciava il secondo: nel file
   unico i due si susseguono senza confine)
   ==================================================================== */
/* **Lo sfondo un po' piu' scuro** (29/09, Luciano): tabelle e riquadri,
   bianchi, escono di piu' dalla pagina. Era #f2f4f7. */
html[data-tema="chiaro"]{
  --sfondo:#e6ebf4; --superficie:#ffffff; --superficie-alt:#f7f8fa; --superficie-cava:#eceff3;
  --bordo:#e4e8ee; --bordo-forte:#c9d0d9; --riga:#e6e9ef;
  --testo:#12161c; --testo-medio:#5a6472; --testo-debole:#98a0ac;
  --azione:#2f5fd0; --manca:#b3261e; --adesso:#1f6b52; --nota:#9a6b06;
  --nota-fondo:#fdf7e6; --nota-bordo:#ecd9a3;
  --ombra:0 1px 2px rgba(16,20,28,.04), 0 2px 8px rgba(16,20,28,.05);
  --ombra-alta:0 2px 4px rgba(16,20,28,.08), 0 12px 28px rgba(16,20,28,.14);
}
html[data-tema="scuro"]{
  --sfondo:#0d1015; --superficie:#181c23; --superficie-alt:#1e232b; --superficie-cava:#0a0d11;
  --bordo:#272d36; --bordo-forte:#3a424e; --riga:#242a33;
  --testo:#eaedf2; --testo-medio:#a6aeba; --testo-debole:#79818e;
  --azione:#5b8cf5; --manca:#ff6b5e; --adesso:#3d9e7c; --nota:#e8c877;
  --nota-fondo:#28220f; --nota-bordo:#5f5227;
  --ombra:0 1px 2px rgba(0,0,0,.5);
  --ombra-alta:0 2px 6px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.6);
}
:root{
  --t-chirurgia:#b5382c; --t-poliambulatorio:#cf6236; --t-medicina:#e08b28;
  --t-controllo:#2a5ea8;
  --t-rigenerativa:#c9a41b; --t-massaggi:#7a4f9c; --t-prima-visita:#3d92cf;
  --titoli:'League Spartan', system-ui, sans-serif;
  --corpo:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --apertura:220ms; --h-campo:40px; --contenuto:1560px; --largo:1880px; --h-barra:71px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--sfondo); color:var(--testo); font-family:var(--corpo); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.eyebrow{font-family:var(--titoli); margin:0}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--testo-debole)}
.num{font-variant-numeric:tabular-nums}
a{color:inherit}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--azione); outline-offset:2px}

.barra{position:sticky; top:0; z-index:90; display:flex; gap:var(--s5); align-items:center; padding:var(--s3) var(--s5); background:var(--superficie); border-bottom:1px solid var(--bordo)}
.marchio{flex:none; display:flex; align-items:center}
.logo{height:26px; width:auto; display:block}
html[data-tema="scuro"] .logo{filter:brightness(1.9) contrast(1.05)}
.luoghi{display:flex; gap:var(--s1); flex:none}
.luogo{display:inline-flex; align-items:center; gap:8px; padding:0 var(--s3); height:38px; border-radius:8px; font-size:13.5px; color:var(--testo-medio); text-decoration:none; white-space:nowrap}
.luogo svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.luogo:hover{background:var(--superficie-cava); color:var(--testo)}
.luogo[aria-current="page"]{background:color-mix(in srgb, var(--azione) 10%, var(--superficie)); color:var(--azione); font-weight:600}
.a-tendina{position:relative}
.tendina{position:absolute; top:calc(100% + 6px); z-index:100; width:288px; background:var(--superficie); border:1px solid var(--bordo-forte); border-radius:8px; box-shadow:var(--ombra-alta); padding:var(--s2)}
.tendina.a-destra{right:0}
.tendina[hidden]{display:none}
.tendina a{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px var(--s3); border-radius:5px; font-size:13px; text-decoration:none; color:var(--testo)}
.tendina a:hover{background:var(--superficie-cava)}
.tendina .sep{height:1px; background:var(--bordo); margin:var(--s2) 0}
/* **Esci ha l'aspetto delle altre voci** (30/09): e' un tasto dentro un
   modulo, ma nel menu deve leggersi come «Preferenze». */
.tendina .esci-f{margin:0}
.tendina .esci-f button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px var(--s3); border-radius:5px; font:inherit; font-size:13px; color:var(--testo); background:none; border:0; cursor:pointer}
.tendina .esci-f button:hover{background:var(--superficie-cava)}
/* **Una voce che arriva presto** (30/09, Luciano): stesse misure delle
   altre, spenta, col segno «in arrivo». Non si preme. */
.tendina .voce-presto{display:flex; align-items:center; gap:9px; width:100%; padding:9px var(--s3); border-radius:5px; font-size:13px; color:var(--testo-debole); cursor:default}
.tendina.mega .voce-presto{padding:7px var(--s3); border-radius:7px}
.voce-presto em{margin-left:auto; font-style:normal; font-family:var(--titoli); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--testo-debole); background:var(--superficie-cava); border-radius:99px; padding:2px 7px; white-space:nowrap}
.tendina .eti{display:block; font-size:10px; font-family:var(--titoli); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--testo-debole); padding:var(--s2) var(--s3) 4px}
.riga-tema{display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3)}
.riga-tema .eti-t{font-size:13px; flex:1}
.g-tema{display:inline-flex; border:1px solid var(--bordo-forte); border-radius:7px; overflow:hidden; flex:none}
.g-tema button{background:var(--superficie); border-right:1px solid var(--bordo); color:var(--testo-medio); font-size:11.5px; padding:5px 11px}
.g-tema button:last-child{border-right:0}
.g-tema button[aria-pressed="true"]{background:var(--azione); color:#fff; font-weight:600}
/* **La riga «Larghezza» solo dove ha effetto** (30/09, Luciano): la scelta
   vale solo nelle pagine larghe di natura, dashboard e agenda (base.html),
   e fino a 1560 pixel «Piena» e «Ridotta» si vedono uguali. Altrove sarebbe
   un tasto che non fa niente (regola 42). */
html:not([data-largo-scelta="si"]) .riga-largo{display:none}
@media (max-width:1560px){
  .riga-largo{display:none}
}
/* **Quale dashboard** (29/09): la forma di Giorno/Notte, con le sue
   misure, ma sono collegamenti. Le regole di `.tendina a` (a tutta
   larghezza, con i margini di una voce del menu) qui vanno annullate. */
.d2-g-dash{display:inline-flex; border:1px solid var(--bordo-forte); border-radius:7px; overflow:hidden; flex:none}
.tendina .d2-g-dash a{display:inline-flex; width:auto; gap:0; border-radius:0; background:var(--superficie); border-right:1px solid var(--bordo); color:var(--testo-medio); font-size:11.5px; padding:5px 11px; white-space:nowrap}
.tendina .d2-g-dash a:last-child{border-right:0}
.tendina .d2-g-dash a:hover{background:var(--superficie-cava); color:var(--testo)}
.tendina .d2-g-dash a[aria-current="page"]{background:var(--azione); color:#fff; font-weight:600}
.cerca-globale{flex:1; max-width:520px; min-width:230px; display:flex; align-items:center; gap:var(--s3); border:1.5px solid color-mix(in srgb, var(--azione) 40%, var(--bordo)); border-radius:10px; padding:0 var(--s2) 0 var(--s4); height:46px; background:var(--superficie); box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 7%, transparent)}
.cerca-globale > svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--azione); stroke-width:1.9; stroke-linecap:round}
.cerca-globale input{flex:1; border:0; background:none; font:inherit; font-size:14.5px; color:var(--testo); min-width:0}
.cerca-globale input:focus{outline:none}
.b-invio{flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px; background:var(--azione); color:#fff}
.b-invio svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.barra-dx{display:flex; align-items:center; gap:var(--s3); margin-left:auto}
.b-icona{display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:8px; padding:0 var(--s3); height:38px; font-size:12.5px; color:var(--testo-medio)}
.b-icona:hover{background:var(--superficie-cava); color:var(--testo)}
.b-icona svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.chi-sono{display:flex; align-items:center; gap:var(--s2); padding:0 var(--s2) 0 var(--s3); height:38px; border-radius:8px; border-left:1px solid var(--bordo)}
.chi-sono:hover{background:var(--superficie-cava)}
/* **Il tondo di chi e' collegato a 38 px** (05/10, Luciano): alto quanto
   il riquadro del nome, che resta com'era; le iniziali in proporzione. */
.chi-sono .tondo{width:38px; height:38px; border-radius:50%; background:var(--azione); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--titoli); font-weight:700; font-size:14.5px}
.chi-sono b{font-size:13px; font-weight:600}
.chi-sono .frecciotta{font-size:9px; color:var(--testo-debole)}
/* **La barra sui portatili** (30/09, Luciano): sotto i 1440 pixel la barra
   intera non ci sta. A 1280 usciva di 53 pixel, e tutta la pagina scorreva
   di lato; a 1366 il nome andava su due righe. Si tolgono due scritte: di
   «Assistente» resta l'icona, col suggerimento; del nome resta il tondo con
   le iniziali, e il nome si legge in cima al menu che si apre. Le voci della
   navigazione restano intere, e la ricerca prende lo spazio che si libera.
   Sopra i 1440 pixel la barra e il menu restano come prima. */
.tendina .io-nome{display:none}
@media (max-width:1439px){
  .barra-dx .b-icona .b-scritta{display:none}
  .chi-sono b{display:none}
  .tendina .io-nome{display:block; font-size:13px; font-weight:600; color:var(--testo); padding:var(--s2) var(--s3) var(--s3); border-bottom:1px solid var(--bordo); margin-bottom:var(--s2)}
}

.pagina{max-width:var(--contenuto); margin:var(--s5) auto var(--s7); padding:0 var(--s5)}
html[data-largo="si"] .pagina{max-width:var(--largo)}

.capo{background:var(--superficie); border:1px solid color-mix(in srgb, var(--bordo-forte) 72%, var(--testo-medio)); border-bottom:0; border-radius:14px 14px 0 0; padding:var(--s5)}
.riga1{display:flex; align-items:flex-start; gap:var(--s4); flex-wrap:wrap}
.che-doc{flex:1 1 0; min-width:220px}
.che-doc h1{font-size:26px; font-weight:600; letter-spacing:-.025em; line-height:1.15}
.che-doc .sotto{font-size:13px; color:var(--testo-medio); margin-top:5px; line-height:1.55; max-width:62ch}
.bottone{font-size:14px; font-weight:600; padding:0 18px; min-height:var(--h-campo); border-radius:9px; border:1.5px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; text-decoration:none}
.bottone.primario{background:var(--azione); color:#fff}
.bottone.secondario{background:var(--superficie); border-color:var(--bordo-forte); color:var(--testo)}
.bottone.secondario:hover{border-color:var(--azione); color:var(--azione)}
/* **I due colori dei gesti dell'appuntamento** (27/09): stavano in
   agenda.css, e la scheda non li aveva. Il rosso per i gesti che costano
   cari — «Non si e' presentato», «Disdici» —, e il fondo pieno rosso e' un
   allarme: passandoci sopra basta un accenno. Il giallo della nota per
   «Riprogramma o modifica», scelto da Luciano sull'anteprima. */
.bottone.pericolo{border:1px solid color-mix(in srgb, var(--manca) 40%, transparent); color:var(--manca); background:var(--superficie)}
.bottone.pericolo:hover{background:color-mix(in srgb, var(--manca) 10%, var(--superficie)); color:var(--manca); border-color:var(--manca)}
.bottone.modifica{border:1px solid var(--nota-bordo); background:var(--nota-fondo); color:var(--nota)}
.bottone.modifica:hover{border-color:var(--nota)}
/* **«Trasforma in prestazione»** (27/09, scelto da Luciano sull'anteprima, la «A»): la
   forma di «Apri la scheda paziente» col verde del telaio. Sta qui perche'
   lo useranno l'agenda e la scheda */
.bottone.tratta{border:1px solid color-mix(in srgb, var(--adesso) 34%, transparent); background:color-mix(in srgb, var(--adesso) 9%, var(--superficie)); color:var(--adesso); font-weight:600}
.bottone.tratta:hover{background:color-mix(in srgb, var(--adesso) 16%, var(--superficie))}
/* **Dove si va, in azzurro** (29/09, Luciano): «Apri la scheda paziente»
   nel pannello dell'agenda e «Apri in agenda» in quello della scheda sono
   lo stesso gesto, e hanno lo stesso colore. Stava in agenda.css col nome
   `.bottone.scheda`, che si portava dietro la linguetta `.scheda` del
   telaio (regola 21): stessi valori, nome suo. */
.bottone.vai-a{border:1px solid color-mix(in srgb, var(--azione) 34%, transparent); background:color-mix(in srgb, var(--azione) 9%, var(--superficie)); color:var(--azione); font-weight:600}
.bottone.vai-a:hover{background:color-mix(in srgb, var(--azione) 16%, var(--superficie))}
/* **L'avviso rosso del pannello dell'appuntamento** (dal 27/09 qui, era in
   agenda.css): l'anestesista non confermato, e i consensi che mancano prima
   di trattare. Lo usano il pannello dell'agenda e quello della scheda */
.allerta-pan{margin-bottom:var(--s4); padding:10px var(--s4); border-radius:9px; font-size:12.5px; font-weight:600; line-height:1.45; color:var(--manca); background:color-mix(in srgb, var(--manca) 8%, var(--superficie)); border:1px solid color-mix(in srgb, var(--manca) 28%, transparent)}
/* **Il modulo di «Trasforma in prestazione»** (27/09, disegnato con Luciano): sotto il
   suo tasto, con le misure del modulo «Riprogramma o modifica» e un nome
   suo — pannello.js cerca `.riprog`, e troverebbe questo. Qui perche' lo
   usano l'agenda e la scheda; dove sta nella griglia dei tasti lo dice
   ognuna nel suo foglio */
.tr-mod{position:relative; padding:var(--s4); border-radius:11px; background:var(--superficie-alt); border:1px solid var(--bordo); text-align:left}
.tr-mod[hidden]{display:none}
.tr-mod .eyebrow{display:block; margin-bottom:var(--s3); font-size:12px; color:var(--adesso); letter-spacing:.1em}
.tr-dice{margin:0 0 var(--s3); font-size:12px; line-height:1.5; color:var(--testo-medio)}
.tr-avviso{margin:0 0 var(--s3); padding:10px var(--s3); border-radius:9px; font-size:12px; line-height:1.5; color:var(--nota); background:var(--nota-fondo); border:1px solid var(--nota-bordo)}
.tr-campo{position:relative; display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--testo-debole); max-width:300px}
.tr-piede{display:flex; gap:var(--s2); margin-top:var(--s4)}
.tr-errore{margin:var(--s3) 0 0; font-size:12px; font-weight:600; color:var(--manca)}
/* regola 17: la tendina del trattamento non si taglia, e si apre in su */
.tr-mod, .tr-campo{overflow:visible}
.tr-mod .campo-elenco .tendina-c{bottom:calc(100% + 4px); top:auto}
/* regola 38: mentre salva, il modulo si vela e gira la rotella del telaio */
.tr-mod.sto-salvando{pointer-events:none}
.tr-mod.sto-salvando::after{content:''; position:absolute; inset:0; z-index:30; background:color-mix(in srgb, var(--superficie) 72%, transparent); border-radius:11px}
.tr-mod.sto-salvando::before{content:''; position:absolute; top:50%; left:50%; z-index:31; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--azione) 26%, transparent); border-top-color:var(--azione); animation:gira-attesa 700ms linear infinite}
.bottone svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* le tre cose che non tornano */
.pile{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:var(--s3); margin-top:var(--s5)}
.pila{display:flex; gap:var(--s3); align-items:flex-start; text-align:left; width:100%; padding:var(--s4); border-radius:13px; border:1.5px solid var(--bordo); background:var(--superficie-alt); color:inherit}
.pila:hover{border-color:var(--azione)}
.pila[aria-pressed="true"]{border-color:var(--azione); background:color-mix(in srgb, var(--azione) 8%, var(--superficie))}
.pila .quadro-p{width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--superficie-cava); color:var(--testo-medio)}
.pila .quadro-p svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pila.rossa .quadro-p{background:color-mix(in srgb, var(--manca) 13%, var(--superficie)); color:var(--manca)}
.pila.gialla .quadro-p{background:color-mix(in srgb, var(--nota) 22%, var(--superficie)); color:var(--nota)}
.pila.verde .quadro-p{background:color-mix(in srgb, var(--adesso) 13%, var(--superficie)); color:var(--adesso)}
.pila .che-p{flex:1 1 0; min-width:0}
.pila .che-p b{display:block; font-family:var(--titoli); font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.05}
.pila .che-p .eti-p{display:block; font-size:12.5px; font-weight:600; margin-top:4px; line-height:1.3}
.pila .che-p .dice-p{display:block; font-size:11.5px; color:var(--testo-debole); margin-top:3px; line-height:1.45}
.pila.rossa .che-p b{color:var(--manca)}
.pila.gialla .che-p b{color:var(--nota)}

.schede{display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--s4)}
.scheda{display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:99px; border:1px solid transparent; background:var(--superficie-cava); color:var(--testo-medio); font-size:13.5px}
.scheda:hover{background:var(--bordo)}
.scheda[aria-current="true"]{background:color-mix(in srgb, var(--azione) 12%, var(--superficie)); border-color:var(--azione); color:var(--azione); font-weight:600}
.scheda .quanti-s{font-family:var(--titoli); font-size:11px; font-weight:700; min-width:20px; height:20px; line-height:20px; text-align:center; border-radius:99px; background:var(--superficie); color:var(--testo-debole); padding:0 6px}
.scheda[aria-current="true"] .quanti-s{background:var(--azione); color:#fff}

.filtri{background:var(--superficie-alt); border-left:1px solid color-mix(in srgb, var(--bordo-forte) 72%, var(--testo-medio)); border-right:1px solid color-mix(in srgb, var(--bordo-forte) 72%, var(--testo-medio)); border-top:1px solid var(--bordo); border-bottom:1px solid var(--bordo); padding:var(--s3) var(--s5); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap}
.filtri input[type="text"]{font:inherit; font-size:13.5px; height:var(--h-campo); width:230px; padding:0 var(--s3); border:1px solid var(--bordo-forte); border-radius:9px; background:var(--superficie); color:var(--testo)}
.filtri input[type="text"]:focus{outline:none; border-color:var(--azione); box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 13%, transparent)}
.filtri .conta-f{margin-left:auto; font-size:13px; color:var(--testo-medio); font-variant-numeric:tabular-nums}
.filtri .conta-f b{color:var(--testo)}

.telaio{background:var(--superficie); border:1px solid color-mix(in srgb, var(--bordo-forte) 72%, var(--testo-medio)); border-top:0; border-radius:0 0 14px 14px; overflow:hidden}
.riga-l{display:grid; gap:var(--s4); align-items:center; padding:var(--s3) var(--s5); border-bottom:1px solid var(--riga)}
.riga-l:last-of-type{border-bottom:0}
.riga-l:hover{background:var(--superficie-alt)}
.riga-l.spenta{opacity:.55}
.riga-l.testa{background:var(--superficie-alt); border-bottom:1px solid var(--bordo-forte); font-family:var(--titoli); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--testo-debole); padding-top:10px; padding-bottom:10px}

.nome-l{display:flex; align-items:center; gap:var(--s3); min-width:0; text-align:left}
.nome-l .segno-l{width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c, var(--testo-debole)) 14%, var(--superficie)); color:var(--c, var(--testo-medio)); font-family:var(--titoli); font-size:11px; font-weight:700}
.nome-l .che-l{min-width:0}
.nome-l .che-l b{display:block; font-size:14.5px; font-weight:600; line-height:1.3}
.nome-l .che-l span{display:block; font-size:12px; color:var(--testo-debole); margin-top:2px}
.dato-l{font-size:13px; color:var(--testo-medio); min-width:0}
.dato-l.num{font-variant-numeric:tabular-nums}
.prezzo-l{font-family:var(--titoli); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.prezzo-l small{display:block; font-family:var(--corpo); font-size:11px; font-weight:400; color:var(--testo-debole); margin-top:1px}
.prezzo-l.manca{color:var(--manca); font-size:13px}
.sconto-l{font-size:12.5px; color:var(--adesso); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.sconto-l small{display:block; font-weight:400; color:var(--testo-debole); font-size:11px; margin-top:1px}
.sconto-l.nullo{color:var(--nota)}

.bollo-l{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:99px; white-space:nowrap}
.bollo-l svg{width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bollo-l.male{color:var(--manca); background:color-mix(in srgb, var(--manca) 9%, var(--superficie))}
.bollo-l.attenzione{color:var(--nota); background:var(--nota-fondo)}

/* Non è un'etichetta: è un comando. Con il bordo e il verbo al passaggio si
   capisce che si può cliccare — prima sembrava solo uno stato scritto. */
.interruttore{display:inline-flex; align-items:center; gap:8px; font-size:12.5px;
  padding:7px 13px; border-radius:99px; border:1px solid var(--bordo-forte);
  white-space:nowrap; position:relative}
.interruttore .verbo{display:none}
.interruttore:hover .stato-i{display:none}
.interruttore:hover .verbo{display:inline}
/* al passaggio il colore dice COSA SUCCEDE cliccando, non cos'è adesso:
   arancione perché si sta per togliere qualcosa dalla vendita, verde perché
   si sta per rimetterla. */
.interruttore.si:hover{color:#cf6236; border-color:#cf6236;
  background:color-mix(in srgb, #cf6236 10%, var(--superficie))}
.interruttore.no:hover{color:var(--adesso); border-color:var(--adesso);
  background:color-mix(in srgb, var(--adesso) 10%, var(--superficie))}
.interruttore .punto{width:8px; height:8px; border-radius:50%; flex:none; background:currentColor}
.interruttore.si{color:var(--adesso); background:color-mix(in srgb, var(--adesso) 11%, var(--superficie))}
.interruttore.no{color:var(--testo-debole); background:var(--superficie-cava)}
.interruttore:hover{border-color:currentColor}
/* **L'interruttore di un invio automatico** (07/10, G13-22): quello del
   mockup 40, identico. Sta nel telaio perche' lo usano due pagine: i
   Compleanni, e col secondo pezzo il pannello dei Messaggi. Acceso e'
   verde come «fatto»; il tasto vero e' un <button> con aria-pressed. */
.interruttore-m{position:relative; width:44px; height:25px; border-radius:99px; background:var(--bordo-forte); flex:none; transition:background var(--apertura) ease; border:0; padding:0; cursor:pointer}
.interruttore-m::after{content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform var(--apertura) ease}
.interruttore-m[aria-pressed="true"]{background:var(--adesso)}
.interruttore-m[aria-pressed="true"]::after{transform:translateX(19px)}
.interruttore-m:focus-visible{outline:2px solid var(--azione); outline-offset:2px}
.interruttore-m:disabled{opacity:.5; cursor:default}
.azioni-l{display:flex; gap:6px; justify-content:flex-end}
.azioni-l button{font-size:12.5px; padding:8px 13px; border-radius:8px; border:1px solid var(--bordo-forte); background:var(--superficie); color:var(--testo)}
.azioni-l button:hover{border-color:var(--azione); color:var(--azione)}

.vuoto-l{padding:var(--s7) var(--s5); text-align:center; color:var(--testo-debole)}
.vuoto-l svg{width:42px; height:42px; margin-bottom:var(--s4); fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.6}
.vuoto-l p{margin:0 auto; font-size:14px; line-height:1.6; max-width:44ch}

.piede-pag{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding:var(--s3) var(--s5); border-top:1px solid var(--bordo); background:var(--superficie-alt)}
.piede-pag .quante{display:flex; align-items:center; gap:var(--s2); font-size:12.5px; color:var(--testo-medio)}
.piede-pag .quante select{font:inherit; font-size:12.5px; height:32px; padding:0 var(--s2); border:1px solid var(--bordo-forte); border-radius:6px; background:var(--superficie); color:var(--testo)}
.piede-pag .dove-sono{font-size:12.5px; color:var(--testo-debole); font-variant-numeric:tabular-nums}
.pagine{display:flex; gap:4px; align-items:center; margin-left:auto; flex-wrap:wrap}
.pagine button{min-width:32px; height:32px; padding:0 9px; border-radius:7px; border:1px solid var(--bordo-forte); background:var(--superficie); color:var(--testo); font-size:12.5px; font-variant-numeric:tabular-nums}
.pagine button:hover:not(:disabled){border-color:var(--azione); color:var(--azione)}
.pagine button[aria-current="true"]{background:var(--azione); border-color:var(--azione); color:#fff; font-weight:600}
.pagine button:disabled{opacity:.4; cursor:default}
.pagine .salto{border:0; color:var(--testo-debole); min-width:20px; padding:0}

/* il pannello */
.velo-pan{position:fixed; inset:0; z-index:190; background:color-mix(in srgb, var(--testo) 26%, transparent); opacity:0; pointer-events:none; transition:opacity 220ms ease}
.velo-pan.aperto{opacity:1; pointer-events:auto}
.pannello{position:fixed; top:0; right:0; bottom:0; z-index:200; width:min(620px, 96vw); display:flex; flex-direction:column; background:var(--superficie); box-shadow:var(--ombra-alta); transform:translateX(100%); visibility:hidden; transition:transform 260ms cubic-bezier(.4,0,.2,1), visibility 260ms}
.pannello.aperto{transform:none; visibility:visible}
@media (prefers-reduced-motion: reduce){ .pannello, .velo-pan{transition:none} }
.capo-p{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s5) var(--s6) var(--s4); border-bottom:1px solid var(--bordo); flex:none}
.capo-p .quadro-p{width:50px; height:50px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 14%, var(--superficie)); color:var(--c); font-family:var(--titoli); font-size:14px; font-weight:700}
/* **L'icona nella testata ha una misura sua** (21/09): senza questa
   regola prendeva quella naturale — grande quanto il quadrato — e
   sembrava gonfia. Le pile ce l'hanno da sempre. */
.capo-p .quadro-p svg{width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.capo-p .che-p{flex:1 1 0; min-width:0}
.capo-p h2{font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.capo-p .sotto-p{font-size:12.5px; color:var(--testo-medio); margin-top:4px}
.capo-p .chiudi-p{width:36px; height:36px; border-radius:9px; color:var(--testo-debole); display:flex; align-items:center; justify-content:center; flex:none}
.capo-p .chiudi-p:hover{background:var(--superficie-cava); color:var(--testo)}
.capo-p .chiudi-p svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.corpo-p{flex:1 1 0; overflow-y:auto; padding:var(--s5) var(--s6) var(--s7)}
.piede-p{display:flex; gap:var(--s3); align-items:center; justify-content:flex-end; padding:var(--s4) var(--s6); border-top:1px solid var(--bordo); background:var(--superficie-alt); flex:none; flex-wrap:wrap}
/* **A stringersi è il messaggio, non i tasti.** Il piede va a capo quando
   non ci sta tutto, e a cedere erano i tre bottoni: un avviso di venti
   parole spingeva «Salva» su una riga sua. Cosi' invece il messaggio si
   prende lo spazio che avanza e va a capo dentro quello. */
.piede-p .dice-pp{margin-right:auto; flex:1 1 0; min-width:0; max-width:32ch; font-size:11.5px; color:var(--testo-medio); line-height:1.5}
.piede-p .bottone{flex:none}
/* **`hidden` deve vincere.** In un contenitore flex i figli prendono
   `display` dal contenitore, e quello annulla `hidden`: i tasti restavano
   visibili su un pannello che aveva dichiarato di non avere niente da
   salvare. */
.piede-p .bottone[hidden]{display:none}

.campo-p{margin-bottom:var(--s4)}
.campo-p:last-child{margin-bottom:0}
.campo-p > label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px}
.campo-p input, .campo-p select, .campo-p textarea{width:100%; font:inherit; font-size:14.5px; min-height:46px; padding:0 var(--s3); border:1.5px solid var(--bordo-forte); border-radius:10px; background:var(--superficie); color:var(--testo)}
.campo-p textarea{min-height:70px; padding:var(--s2) var(--s3); resize:vertical; line-height:1.5}
.campo-p input:focus, .campo-p select:focus, .campo-p textarea:focus{outline:none; border-color:var(--azione); box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 14%, transparent)}
.campo-p .aiuto-p{font-size:11.5px; color:var(--testo-debole); margin-top:5px; line-height:1.5}
/* **il valore al posto del campo** (11/10, G14-01): nei pannelli di chi
   legge soltanto — le liste e Strutture e sale alla segreteria */
.campo-p .valore-p{font-size:14.5px; font-weight:600; line-height:1.5; color:var(--testo); overflow-wrap:anywhere}
.campo-p .valore-p .pallino-s{display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-2px}
.due-p{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.eyebrow-p{display:block; margin:var(--s5) 0 var(--s3)}
.eyebrow-p:first-child{margin-top:0}
/* **una spunta nel pannello, nel suo riquadro** (06/10, Luciano: «Non vuole
   gli auguri» nell'anagrafica). Senza, la regola dei campi la faceva
   grande come una casella di testo. Spuntata, il riquadro si colora: e'
   una scelta che toglie qualcosa, e deve vedersi. */
.campo-p > .spunta-p{display:flex; align-items:flex-start; gap:var(--s3); margin:0; padding:var(--s3) var(--s4); border:1.5px solid var(--bordo-forte); border-radius:10px; background:var(--superficie); font-weight:400; cursor:pointer}
.campo-p > .spunta-p:hover{border-color:var(--azione)}
.campo-p .spunta-p input{width:18px; height:18px; min-height:0; flex:none; margin:2px 0 0; padding:0; border:0; accent-color:var(--azione); cursor:pointer}
.campo-p .spunta-p input:focus{box-shadow:none}
.spunta-p b{display:block; font-size:14px; font-weight:600; color:var(--testo)}
.spunta-p small{display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--testo-debole)}
.campo-p > .spunta-p:has(input:checked){border-color:color-mix(in srgb, var(--manca) 45%, transparent); background:color-mix(in srgb, var(--manca) 5%, var(--superficie))}
.campo-p > .spunta-p:has(input:checked) b{color:var(--manca)}

/* **I campi dei pannelli a coppie** (12/10, Luciano): l'anagrafica si
   apre anche da Persone e percorsi, dalla Ricerca e da Schede da
   controllare, e l'incasso dalla pagina del preventivo, che non caricano
   `scheda.css`: li' i campi finivano uno sotto l'altro. Sono **le stesse
   righe di `scheda.css`, copiate e non spostate**: nella scheda e negli
   Incassi quelle vengono dopo e dicono lo stesso, quindi li' non cambia
   niente. La copia in `scheda.css` si toglie dopo un confronto foto per
   foto (regola 26; COSE-APERTE, G01-29). */
.corpo-p .coppia-p{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.corpo-p .indirizzo-p{display:grid; grid-template-columns:90px minmax(0,1fr) 72px minmax(0,1fr); gap:var(--s3)}
.corpo-p .coppia-p,
.corpo-p .indirizzo-p{margin-bottom:var(--s5)}
.corpo-p .coppia-p .campo-p,
.corpo-p .indirizzo-p .campo-p{margin-bottom:0}

.riga-mini{display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4); border:1px solid var(--bordo); border-radius:10px; margin-bottom:7px; background:var(--superficie-alt)}
.riga-mini .qta-m{width:52px; min-height:38px; padding:0 8px; text-align:center; font-family:var(--titoli); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; border:1.5px solid var(--bordo-forte); border-radius:8px; background:var(--superficie); color:var(--testo); flex:none}
.riga-mini .nome-m{flex:1 1 0; min-width:0; font-size:13.5px; font-weight:600}
.riga-mini .nome-m small{display:block; font-weight:400; font-size:11.5px; color:var(--testo-debole); margin-top:1px}
.riga-mini .val-m{font-size:13px; color:var(--testo-medio); font-variant-numeric:tabular-nums; white-space:nowrap}
.riga-mini .rimuovi-m{flex:none; font-size:12.5px; color:var(--testo-debole); padding:6px 11px; border-radius:7px}
.riga-mini .rimuovi-m:hover{color:var(--manca); background:color-mix(in srgb, var(--manca) 8%, transparent)}
.riga-mini.spento{border-color:color-mix(in srgb, var(--manca) 34%, transparent); background:color-mix(in srgb, var(--manca) 5%, var(--superficie))}
.riga-mini.spento .nome-m small{color:var(--manca); font-weight:600}
.niente-m{font-size:12.5px; color:var(--testo-debole); padding:var(--s4); border:1px dashed var(--bordo-forte); border-radius:10px; text-align:center; margin-bottom:7px}
.agg-m{display:flex; gap:var(--s2); align-items:center; margin-top:var(--s3)}
.agg-m select, .agg-m input{flex:1 1 0; min-height:44px; padding:0 var(--s3); font:inherit; font-size:14px; border:1.5px solid var(--bordo-forte); border-radius:10px; background:var(--superficie); color:var(--testo)}
.agg-m .qta-m{flex:none}

/* il confronto: quanto costerebbe comprando i trattamenti separatamente */
.confronto{margin-top:var(--s5); padding:var(--s4) var(--s5); border-radius:12px;
  background:var(--superficie-alt); border:1px solid var(--bordo)}
.confronto .riga-c{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:5px 0; font-size:13px; color:var(--testo-medio)}
.confronto .riga-c b{font-family:var(--titoli); font-size:16px; font-weight:600; color:var(--testo); font-variant-numeric:tabular-nums}
.confronto .riga-c.totale{border-top:1px solid var(--bordo); margin-top:6px; padding-top:11px}
.confronto .riga-c.totale b{font-size:21px; color:var(--adesso)}
.confronto .riga-c.totale.nullo b{color:var(--nota)}
.confronto .dice-c{font-size:11.5px; color:var(--testo-debole); line-height:1.55; margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--bordo)}

@media (max-width:820px){
  .riga-l{grid-template-columns:1fr !important; row-gap:var(--s2)}
  .riga-l.testa{display:none}
  .azioni-l{justify-content:flex-start}
}
@media (max-width:560px){
  .pagina{padding:0 var(--s3)}
  .capo, .filtri, .riga-l{padding-inline:var(--s4)}
  .capo-p, .corpo-p, .piede-p{padding-inline:var(--s4)}
  .due-p{grid-template-columns:1fr}
}

.azioni-l .togli:hover:not(:disabled){border-color:var(--manca); color:var(--manca)}
.azioni-l .togli:disabled{opacity:.35; cursor:default; border-color:var(--bordo); color:var(--testo-debole)}

/* IL MEGAMENU
   Venti voci in colonna sono un rotolo che non si legge: affiancate in tre
   colonne si abbracciano con lo sguardo. */
/* `display:grid` su due classi vince su `[hidden]` che ne ha una sola:
   senza questa riga il megamenu resta sempre visibile. */
.tendina.mega[hidden]{display:none}
.tendina.mega{width:auto; min-width:660px; display:grid;
  grid-template-columns:repeat(3, minmax(190px, 1fr));
  gap:0 var(--s5); padding:var(--s4) var(--s5) var(--s3); right:auto; left:0}
.tendina.mega .col-mega{min-width:0}
.tendina.mega .eti{padding:var(--s3) var(--s3) 5px}
.tendina.mega .col-mega > .eti:first-child{padding-top:0}
.tendina.mega a{padding:7px var(--s3)}
.tendina.mega .piede-mega{grid-column:1 / -1; margin-top:var(--s3);
  padding-top:var(--s3); border-top:1px solid var(--bordo)}
.tendina.mega .piede-mega a{color:var(--testo-debole); font-size:12.5px}
@media (max-width:820px){
  .tendina.mega{min-width:0; width:min(92vw, 320px); grid-template-columns:1fr;
    max-height:70vh; overflow-y:auto; left:auto; right:0}
}

/* i titoli delle sezioni: piu' grandi e col colore dell'azione, cosi' i
   gruppi si distinguono a colpo d'occhio invece di sembrare tutti uguali */
.tendina.mega .eti{font-size:11.5px; letter-spacing:.06em; color:var(--azione);
  padding:var(--s4) var(--s3) 6px}
.tendina.mega .col-mega > .eti:first-child{padding-top:0}

/* i gruppi del megamenu: un'icona e uno sfondo li rendono blocchi distinti
   invece di un elenco che scorre via */
.tendina.mega{gap:var(--s3)}
.tendina.mega .col-mega{background:var(--superficie-alt); border:1px solid var(--bordo);
  border-radius:11px; padding:var(--s3) var(--s2) var(--s2)}
.tendina.mega .eti{display:flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.05em; color:var(--azione);
  padding:var(--s3) var(--s3) 7px; margin-top:var(--s2);
  border-top:1px solid var(--bordo)}
.tendina.mega .col-mega > .eti:first-child{margin-top:0; padding-top:0; border-top:0}
.tendina.mega .eti svg{width:14px; height:14px; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tendina.mega a{padding:7px var(--s3); border-radius:7px}
.tendina.mega a:hover{background:var(--superficie)}
.tendina.mega .piede-mega{background:none; border:0; padding:0 var(--s2)}

/* il campo con elenco e ricerca (regola 18) */
.campo-elenco{position:relative; display:block}
.campo-elenco .apri-elenco{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); width:100%; min-height:var(--h-campo); padding:0 var(--s3);
  border:1px solid var(--bordo-forte); border-radius:9px; background:var(--superficie);
  color:var(--testo); font:inherit; font-size:13.5px; text-align:left}
.campo-elenco .apri-elenco:hover{border-color:var(--azione)}
.campo-elenco .valore{flex:1 1 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.campo-elenco .valore.vuoto{color:var(--testo-debole)}
.campo-elenco .frecciotta-c{font-size:9px; color:var(--testo-debole); flex:none}
.tendina-c{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:var(--superficie); border:1px solid var(--bordo-forte); border-radius:8px;
  box-shadow:var(--ombra-alta); padding:var(--s2); max-height:290px; display:flex;
  flex-direction:column; min-width:100%; width:max-content; max-width:300px;
  box-sizing:border-box; transform-origin:top center; visibility:hidden; opacity:0;
  transform:scaleY(.97) translateY(-5px); pointer-events:none;
  transition:opacity 160ms ease, transform 160ms cubic-bezier(.4,0,.2,1), visibility 160ms}
.tendina-c.aperta{visibility:visible; opacity:1; transform:none; pointer-events:auto}
.tendina-c .cerca-riga{display:flex; align-items:center; gap:7px;
  border-bottom:1px solid var(--bordo); margin:0 0 var(--s2); padding:0 4px;
  height:38px; flex:none}
.tendina-c .cerca-riga svg{width:14px; height:14px; flex:none; fill:none;
  stroke:var(--testo-debole); stroke-width:1.9; stroke-linecap:round}
.tendina-c .cerca-riga input{flex:1 1 0; min-width:0; border:0; outline:none;
  box-shadow:none; background:none; font:inherit; font-size:13.5px; color:var(--testo)}
/* `flex:1 1 0` fa partire la lista da altezza **zero**, e nella tendina
   niente le dava spazio: si vedeva solo la barra di ricerca. `flex:0 1 auto`
   la fa alta quanto le sue voci, fino al massimo della tendina. */
.tendina-c .voci{list-style:none; margin:0; padding:0; overflow-y:auto; flex:0 1 auto; min-height:0}
.tendina-c .voci button{display:block; width:100%; text-align:left; padding:9px var(--s3);
  border-radius:6px; font-size:13.5px; color:var(--testo); border:0; background:none;
  cursor:pointer}
.tendina-c .voci button:hover{background:var(--superficie-cava)}
.tendina-c .voci button[aria-selected="true"]{color:var(--azione); font-weight:600}
.tendina-c .niente{padding:var(--s3); font-size:12.5px; color:var(--testo-debole);
  text-align:center}
/* il margine di un prodotto: due numeri che vivono in posti diversi */
.conto-marg{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); padding:var(--s4); border-radius:11px; background:color-mix(in srgb, var(--adesso) 7%, var(--superficie)); border:1px solid color-mix(in srgb, var(--adesso) 24%, transparent)}
.conto-marg > span:first-child{font-size:12.5px; color:var(--testo-medio)}
.conto-marg b{font-family:var(--titoli); font-size:22px; font-weight:600; color:var(--adesso); font-variant-numeric:tabular-nums}
.conto-marg .perc-marg{font-size:11.5px; color:var(--testo-debole); margin-left:auto}

/* ====================================================================
   LO STILE DEL CATALOGO (dal 23-catalogo)
   Il foglio nasceva dal 24-listino, quindi le classi del catalogo
   non c'erano: la tabella usciva senza grafica.
   ==================================================================== */
.finto-ed{border:1.5px solid var(--bordo-forte); border-radius:10px; overflow:hidden}
.barra-ed{display:flex; gap:2px; padding:6px; background:var(--superficie-alt);
  border-bottom:1px solid var(--bordo); flex-wrap:wrap}
.barra-ed button{width:30px; height:28px; border-radius:6px; font-size:12.5px;
  color:var(--testo-medio); display:flex; align-items:center; justify-content:center}
.barra-ed button:hover{background:var(--superficie-cava); color:var(--testo)}
.barra-ed .var-ed{width:auto; padding:0 9px; font-family:ui-monospace,monospace;
  font-size:11px; color:var(--azione); margin-left:auto}
.finto-ed textarea{border:0; border-radius:0; width:100%; font:inherit; font-size:14px;
  line-height:1.65; padding:var(--s4); background:var(--superficie); color:var(--testo); resize:vertical}
.finto-ed textarea:focus{outline:none; box-shadow:none}
.campo-p code{font-family:ui-monospace,monospace; font-size:11.5px;
  background:var(--superficie-cava); padding:1px 5px; border-radius:4px}
.capo-sez{padding:var(--s5) !important}
.esami-sc{display:flex; flex-direction:column; gap:var(--s3)}
.gruppo-es{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.eti-es{flex:0 0 100%; font-family:var(--titoli); font-size:9.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--testo-debole)}
.chip-es{font-size:12.5px; padding:7px 13px; border-radius:99px;
  border:1px solid var(--bordo-forte); background:var(--superficie); color:var(--testo-medio)}
.chip-es:hover{border-color:var(--azione); color:var(--azione)}
.chip-es[aria-pressed="true"]{border-color:var(--azione); color:var(--azione);
  background:color-mix(in srgb, var(--azione) 9%, var(--superficie)); font-weight:600}
.schede{display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--s5)}
.filtri .spunta{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--testo-medio); border:1px solid var(--bordo-forte); border-radius:9px; padding:0 var(--s3); height:var(--h-campo); background:var(--superficie)}
.filtri .spunta[aria-pressed="true"]{border-color:var(--azione); color:var(--azione); font-weight:600}
.filtri .spunta .segno{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--bordo-forte); flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent}
.filtri .spunta[aria-pressed="true"] .segno{background:var(--azione); border-color:var(--azione); color:#fff}
.riga-s{display:grid; gap:var(--s4); align-items:center; padding:var(--s3) var(--s5); border-bottom:1px solid var(--riga)}
.riga-s:last-of-type{border-bottom:0}
.riga-s:hover{background:var(--superficie-alt)}
.riga-s.spenta{opacity:.55}
/* **La presa per trascinare e il numero d'ordine**, dal mockup 32: erano
   in anagrafiche.css, e dal 05/10 stanno qui perche' li usa anche il
   Catalogo, per l'ordine delle categorie (regola 23). Le regole sono le
   stesse, parola per parola. */
.presa{width:14px; flex:none; color:var(--testo-debole); cursor:grab; display:flex; align-items:center}
.presa svg{width:12px; height:16px; fill:currentColor}
.riga-s:active .presa{cursor:grabbing}
.riga-s.in-viaggio{opacity:.4; border-style:dashed; border-color:var(--azione)}
.presa-n{display:flex; align-items:center; gap:8px}
.num-t{font-family:var(--titoli); font-size:12px; font-weight:700; color:var(--testo-debole); min-width:18px; text-align:right}
.riga-s.testa{background:var(--superficie-alt); border-bottom:1px solid var(--bordo-forte); font-family:var(--titoli); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--testo-debole); padding-top:10px; padding-bottom:10px}
.nome-s{display:flex; align-items:center; gap:var(--s3); min-width:0; text-align:left}
.nome-s .segno-s{width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c, var(--testo-debole)) 14%, var(--superficie)); color:var(--c, var(--testo-medio)); font-family:var(--titoli); font-size:11px; font-weight:700}
.nome-s .che-s{min-width:0}
.nome-s .che-s b{display:block; font-size:14.5px; font-weight:600; line-height:1.3}
.nome-s .che-s span{display:block; font-size:12px; color:var(--testo-debole); margin-top:2px}
.dato-s{font-size:13px; color:var(--testo-medio); min-width:0}
.dato-s.num{font-variant-numeric:tabular-nums}
.dato-s b{color:var(--testo); font-weight:600}
.senza-prezzo{color:var(--manca); font-weight:600; font-size:12.5px}
.gettone{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 10px; border-radius:99px; background:var(--superficie-cava); color:var(--testo-medio); white-space:nowrap}
.gettone .pall{width:7px; height:7px; border-radius:50%; background:var(--c); flex:none}
.gettoni{display:flex; gap:5px; flex-wrap:wrap}
.azioni-s{display:flex; gap:6px; justify-content:flex-end}
.azioni-s button{font-size:12.5px; padding:8px 13px; border-radius:8px; border:1px solid var(--bordo-forte); background:var(--superficie); color:var(--testo)}
.azioni-s button:hover{border-color:var(--azione); color:var(--azione)}
.azioni-s .togli:hover{border-color:var(--manca); color:var(--manca)}
.azioni-s .togli:disabled{opacity:.35; cursor:default; border-color:var(--bordo); color:var(--testo-debole)}
.dice-uso{padding:var(--s3) var(--s5); font-size:12px; color:var(--testo-debole); background:var(--superficie-alt); border-top:1px solid var(--bordo); line-height:1.6}
.dice-uso b{color:var(--testo-medio)}
.vuoto-s{padding:var(--s7) var(--s5); text-align:center; color:var(--testo-debole)}
.vuoto-s svg{width:42px; height:42px; margin-bottom:var(--s4); fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.6}
.vuoto-s p{margin:0 auto var(--s4); font-size:14px; line-height:1.6; max-width:44ch}
.sezione{border:1px solid var(--bordo); border-radius:13px; margin-bottom:var(--s3); overflow:hidden}
.capo-sez{display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left; padding:var(--s4) var(--s5); background:var(--superficie-alt)}
.capo-sez:hover{background:var(--superficie-cava)}
.capo-sez .quadro-z{width:32px; height:32px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--superficie); color:var(--testo-medio)}
.capo-sez .quadro-z svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.capo-sez .che-z{flex:1 1 0; min-width:0}
.capo-sez .che-z b{display:block; font-family:var(--titoli); font-size:14.5px; font-weight:600; line-height:1.3}
.capo-sez .che-z span{display:block; font-size:11.5px; color:var(--testo-debole); margin-top:2px}
.capo-sez .frecciotta-z{color:var(--testo-debole); font-size:12px; transition:transform var(--apertura) ease}
.sezione.aperta .capo-sez .frecciotta-z{transform:rotate(180deg)}
.fisarmonica{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--apertura) ease}
.sezione.aperta .fisarmonica{grid-template-rows:1fr}
.fisarmonica > .dentro{overflow:hidden; min-height:0}
.dentro-sez{padding:var(--s5)}
.scelte-p{display:flex; gap:7px; flex-wrap:wrap}
.scelte-p button{font-size:13.5px; padding:10px 15px; border-radius:10px; border:1.5px solid var(--bordo-forte); background:var(--superficie); color:var(--testo-medio)}
.scelte-p button:hover{border-color:var(--azione); color:var(--azione)}
.scelte-p button[aria-pressed="true"]{border-color:var(--azione); color:var(--azione); background:color-mix(in srgb, var(--azione) 8%, var(--superficie)); font-weight:600}
.altrove{display:flex; gap:var(--s3); align-items:center; padding:var(--s4); border-radius:11px; background:var(--superficie-alt); border:1px solid var(--bordo); flex-wrap:wrap}
.altrove .che-a{flex:1 1 0; min-width:180px; font-size:12.5px; color:var(--testo-medio); line-height:1.55}
.altrove .che-a b{color:var(--testo)}
.prezzi-ora{display:flex; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s4)}
.prezzi-ora .voce-pr{font-size:12.5px; color:var(--testo-debole)}
.prezzi-ora .voce-pr b{display:block; font-family:var(--titoli); font-size:19px; font-weight:600; color:var(--testo); font-variant-numeric:tabular-nums; margin-top:2px}
.prezzi-ora .voce-pr.manca b{color:var(--manca)}
.riga-mini .togli-m{flex:none; font-size:12px; color:var(--testo-debole); padding:6px 10px; border-radius:7px}
.riga-mini .togli-m:hover{color:var(--manca); background:color-mix(in srgb, var(--manca) 8%, transparent)}
.elenco-z{display:flex; flex-direction:column; gap:6px}
.riga-z{display:flex; align-items:center; gap:var(--s3); padding:9px var(--s3);
  border:1px solid var(--bordo); border-radius:10px; background:var(--superficie-alt);
  cursor:grab}
.riga-z:active{cursor:grabbing}
.riga-z.in-viaggio{opacity:.45; border-style:dashed; border-color:var(--azione)}
.riga-z .presa-z{width:14px; flex:none; color:var(--testo-debole); display:flex; align-items:center}
.riga-z .presa-z svg{width:12px; height:16px; fill:currentColor}
.riga-z:hover .presa-z{color:var(--testo-medio)}
.riga-z .num-z{width:30px; height:30px; flex:none; border-radius:8px;
  background:var(--superficie); border:1px solid var(--bordo-forte);
  font-family:var(--titoli); font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:center}
.riga-z .nome-m{flex:1 1 0; min-width:0; font-size:14px; font-weight:600}
.riga-z .rimuovi-z{flex:none; font-size:12.5px; color:var(--testo-debole);
  padding:6px 11px; border-radius:7px}
.riga-z .rimuovi-z:hover{color:var(--manca); background:color-mix(in srgb, var(--manca) 8%, transparent)}
.agg-z{display:flex; gap:var(--s2); align-items:center; margin-top:var(--s3)}
.agg-z .nome-z{flex:1 1 0; min-height:44px; padding:0 var(--s3); font:inherit; font-size:14px;
  border:1.5px solid var(--bordo-forte); border-radius:10px;
  background:var(--superficie); color:var(--testo)}
.agg-z .nome-z:focus{outline:none; border-color:var(--azione);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 14%, transparent)}
.sezione.piena{border-color:color-mix(in srgb, var(--azione) 30%, transparent)}
.sezione.piena .capo-sez{background:color-mix(in srgb, var(--azione) 7%, var(--superficie))}
.sezione.piena .capo-sez:hover{background:color-mix(in srgb, var(--azione) 11%, var(--superficie))}
.sezione.piena .capo-sez .quadro-z{background:color-mix(in srgb, var(--azione) 13%, var(--superficie));
  color:var(--azione)}
.sezione.piena .capo-sez .che-z b{color:var(--azione)}
.agg-voce{display:inline-flex; align-items:center; gap:8px; margin-top:var(--s3); font-size:13px; font-weight:600; padding:9px 15px; border-radius:9px; border:1.5px solid color-mix(in srgb, var(--azione) 38%, transparent); background:color-mix(in srgb, var(--azione) 8%, var(--superficie)); color:var(--azione)}
.agg-voce:hover{border-color:var(--azione); background:color-mix(in srgb, var(--azione) 16%, var(--superficie))}
.riga-nuova{display:flex; gap:var(--s2); align-items:center; margin-top:var(--s3); flex-wrap:wrap}
.riga-nuova input{font:inherit; font-size:13.5px; min-height:40px; padding:0 var(--s3); border:1.5px solid var(--bordo-forte); border-radius:9px; background:var(--superficie); color:var(--testo)}
.riga-nuova .n-voce{flex:1 1 180px; min-width:0}
.riga-nuova .v-voce{flex:0 0 120px}
@media (max-width:820px){
  .riga-s{grid-template-columns:1fr !important; row-gap:var(--s2)}
  .riga-s.testa{display:none}
  .azioni-s{justify-content:flex-start}
}
@media (max-width:560px){
  .pagina{padding:0 var(--s3)}
  .capo, .filtri, .riga-s{padding-inline:var(--s4)}
  .capo-p, .corpo-p, .piede-p{padding-inline:var(--s4)}
  .due-p{grid-template-columns:1fr}
}

/* ====================================================================
   IL CATALOGO — quello che il mockup aveva e qui mancava
   ==================================================================== */
/* il prezzo in grassetto con la nota sotto: «1.200 €» da solo farebbe
   pensare al prezzo intero, mentre e' quello della prima zona */
/* 15px, non 22: l'importo non deve essere piu' grande del nome del
   trattamento — nel mockup il nome domina, e l'importo lo accompagna */
.prezzo-s{font-family:var(--titoli); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.prezzo-s small{font-family:var(--corpo, inherit); font-size:11px; font-weight:500; color:var(--testo-debole); margin-top:2px; letter-spacing:0}
.prezzo-s.manca{font-size:13px; font-weight:600; color:var(--manca)}

/* Elimina e' irreversibile: rosso, non grigio come gli altri */
.togli.rosso{color:var(--manca); border-color:color-mix(in srgb, var(--manca) 34%, transparent)}
.togli.rosso:hover:not([disabled]){background:color-mix(in srgb, var(--manca) 10%, var(--superficie)); border-color:var(--manca)}
.togli.rosso[disabled]{opacity:.4; cursor:default}

/* l'editor dei protocolli: sono fogli che il paziente legge, non note */
.finto-ed textarea{min-height:150px}

/* una riga segnata per essere togliata: si vede che sparira' col salvataggio */
.riga-z.da-togliere, .riga-mini.da-togliere{opacity:.5; text-decoration:line-through; border-style:dashed}
.riga-z.da-togliere .num-z{background:none; border-style:dashed}

/* aggiungere una voce: il campo compare accanto al comando */
.agg-riga{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin:var(--s3) 0}
.agg-riga select, .agg-riga input{flex:1 1 120px; min-width:0}
.agg-riga .agg-voce{flex:0 0 auto}

/* la conferma del salvataggio: si vede, e sparisce da se' */
.dice-pp.bene{color:var(--adesso); font-weight:600}
.dice-pp.male{color:var(--manca); font-weight:600}
#salva-p.acceso{box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 22%, transparent)}

/* I due mockup hanno interruttori **leggermente diversi**: nel catalogo
   senza bordo e piu' stretto, nel listino con bordo. Non e' un errore: sono
   due schermate, e il confronto al millimetro lo ha fatto notare. */
.riga-s .interruttore{padding:6px 12px; border-color:transparent}

/* la manina: gli interruttori si premono, e senza il cursore non si capisce */
.interruttore, .spunta, .togli, .agg-voce, .chip-es, .scelte-p button,
.rimuovi-z, .togli-m, .b-min, .capo-sez, .nome-s, .nome-l, .scheda, .pila{cursor:pointer}
.interruttore[disabled], .togli[disabled], .bottone[disabled]{cursor:default}

/* il Salva quando ha salvato: **verde**, si vede da lontano */
/* **Anche il testo**, non solo il fondo: restava del colore di prima —
   scuro su verde scuro — e nel momento in cui il tasto deve dire «fatto»
   era l'unica cosa che non si leggeva. */
#salva-p.fatto{background:var(--adesso) !important; border-color:var(--adesso) !important; color:#fff !important}

/* la tendina dei dati dentro la barra dell'editor */
.tendina-var{margin-left:auto; margin-right:6px; font-size:12px; height:26px;
  border:1px solid var(--bordo-forte); border-radius:6px; background:var(--superficie);
  color:var(--azione); max-width:150px; cursor:pointer}

/* l'editor: la stessa cornice degli altri campi. **La cornice e' del
   contenitore** (05/10, Luciano): prima ogni pezzo dell'editor aveva il suo
   bordo, con gli angoli quasi dritti, e il contenitore arrotondato li
   tagliava: negli angoli il bordo spariva. Adesso il bordo, gli angoli e il
   segno del fuoco sono quelli degli altri campi, e dentro resta solo la
   riga fra la barra e il testo. **Senza `overflow:hidden`**: tagliava la
   tendina dei titoli, che scende oltre l'editor. Per questo gli angoli di
   dentro (la barra in alto, il testo in basso) si arrotondano da soli, di
   quanto basta a stare dentro il bordo. La barra ha anche un suo
   contenitore col bordo (`ck-sticky-panel__content`): era il secondo bordo
   negli angoli in alto. */
.ck-editor__editable{min-height:150px !important}
.campo-p .ck.ck-editor{border:1.5px solid var(--bordo-forte); border-radius:10px}
.campo-p .ck.ck-editor:focus-within{border-color:var(--azione); box-shadow:0 0 0 3px color-mix(in srgb, var(--azione) 14%, transparent)}
.campo-p .ck.ck-editor__top .ck-sticky-panel__content{border:0 !important; border-radius:8.5px 8.5px 0 0 !important}
.campo-p .ck.ck-toolbar{border:0 !important; border-bottom:1px solid var(--bordo) !important;
  border-radius:8.5px 8.5px 0 0 !important; background:var(--superficie-alt) !important}
.campo-p .ck.ck-editor__editable{border:0 !important; border-radius:0 0 8.5px 8.5px !important; box-shadow:none !important}

/* una riga appena aggiunta: lo stesso stile delle altre, con un segno */
.riga-mini.nuova{border-left:2px solid var(--azione)}



/* i box del pannello respirano: attaccati non si distinguono */
.corpo-p .campo-p{margin-bottom:var(--s5)}
.corpo-p .campo-p:last-child{margin-bottom:0}
.corpo-p .sezione{margin-bottom:var(--s3)}
.dentro-sez > .riga-mini + .agg-riga{margin-top:var(--s4)}

/* I collegamenti dentro le tabelle e i pannelli sono **comandi**, non
   rimandi a un testo: il browser li sottolinea, il mockup no perche' li'
   erano `<button>`. */
.azioni-l a, .azioni-s a, .pila, .scheda, .b-agg, .agg-voce,
.nome-l, .nome-s, .riga-c a, .confronto a{text-decoration:none}
.azioni-l a:hover, .azioni-s a:hover{text-decoration:none; color:var(--azione)}

/* Nel mockup i comandi delle righe sono `<button>`; qui alcuni sono `<a>`
   perche' portano a un'altra schermata. Stesso aspetto: chi guarda non deve
   accorgersi della differenza. */
.azioni-l a, .azioni-s a{font-size:12.5px; padding:8px 13px; border-radius:8px;
  border:1px solid var(--bordo-forte); background:var(--superficie);
  color:var(--testo); display:inline-flex; align-items:center;
  text-decoration:none}
.azioni-l a:hover, .azioni-s a:hover{border-color:var(--azione); color:var(--azione)}

/* «senza prezzo» resta piccolo, ma un prezzo vero e' 17px */
.prezzo-l{font-size:17px}

/* Il testo dei comandi va **al centro**: e' cosi' nel mockup, e allineato a
   sinistra un bottone sembra storto. */
.bottone, .scheda, .agg-voce, .interruttore, .spunta, .togli,
.b-az, .b-firma, .chip-es, .scelte-p button{text-align:center}





/* La testata si clicca per ordinare: senza il cursore e la freccia non si
   capisce che si può, e resta una colonna qualsiasi. */
.riga-s.testa .ordina, .riga-l.testa .ordina{cursor:pointer; text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:5px}
.riga-s.testa .ordina:hover, .riga-l.testa .ordina:hover{color:var(--azione)}
.riga-s.testa .ordina[aria-sort]:after{content:"▴"; font-size:10px}
.riga-s.testa .ordina[aria-sort=giu]:after{content:"▾"}

/* Se la voce non ha un colore suo (aree, tipi di costo) l'avatar restava
   senza sfondo: si usa il colore dei comandi come ripiego. */
.capo-p .quadro-p{--c:var(--azione)}

/* Il colore si sceglie col selettore, e si legge in esadecimale accanto:
   chi ha il codice preciso lo scrive, gli altri lo pescano. */
.scelta-colore{display:flex; gap:var(--s3); align-items:center}
.scelta-colore input[type=color]{width:52px; height:40px; padding:2px; border:1px solid var(--bordo-forte); border-radius:9px; background:var(--superficie); cursor:pointer}
.scelta-colore input[type=text]{flex:1 1 0; min-width:0; font-family:ui-monospace,monospace}

/* Le varianti si **modificano**: nome e prezzo sono campi, non testo fisso.
   Correggere un prezzo non deve costare togliere e rimettere la riga. */
.riga-mini input.nome-m{flex:1 1 0; min-width:0; font:inherit; font-size:13.5px; padding:6px 9px; border:1px solid var(--bordo); border-radius:7px; background:var(--superficie)}
.riga-mini input.val-m{flex:0 0 96px; font:inherit; font-size:13.5px; text-align:right; padding:6px 9px; border:1px solid var(--bordo); border-radius:7px; background:var(--superficie); font-variant-numeric:tabular-nums}
.riga-mini input:focus{border-color:var(--azione); outline:none}


/* **Gli avvisi si vedono.** Una vista che rifiuta di salvare ricaricava
   la pagina in silenzio, e sembrava che il tasto non funzionasse. */
.avvisi{max-width:var(--contenuto); margin:var(--s4) auto 0; padding:0 var(--s5)}
.avviso{padding:var(--s4) var(--s5); border-radius:11px; font-size:13.5px; line-height:1.55; margin-bottom:var(--s3); background:var(--nota-fondo); border:1px solid var(--nota-bordo); color:var(--testo)}
.avviso.error{background:color-mix(in srgb, var(--manca) 8%, var(--superficie)); border-color:color-mix(in srgb, var(--manca) 30%, transparent)}
.avviso.success{background:color-mix(in srgb, var(--adesso) 9%, var(--superficie)); border-color:color-mix(in srgb, var(--adesso) 30%, transparent)}

/* **La fascia dell'impersonazione** (05/10, G13-08; anteprima approvata
   da Luciano): in cima a ogni pagina mentre si guarda il sistema con i
   permessi di un altro. Copiata dal riquadro «in corso» del mockup 39
   (.in-corso, .dice-ic, .bottone.esci), coi nomi imp-. */
.imp-fascia{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding:var(--s4) var(--s5); border-radius:11px; margin-bottom:var(--s5); background:color-mix(in srgb, var(--manca) 8%, var(--superficie)); border:1.5px solid color-mix(in srgb, var(--manca) 34%, transparent)}
.imp-fascia .imp-dice{flex:1 1 240px; font-size:13px; line-height:1.55; color:var(--testo-medio)}
.imp-fascia .imp-dice b{color:var(--manca)}
.bottone.imp-torna{background:var(--manca); color:#fff}

/* **La foto al posto delle iniziali**, quando c'è: riconoscere chi è
   collegato a colpo d'occhio conta su un programma che sta aperto tutto
   il giorno e che più persone usano dallo stesso computer. */
.tondo{overflow:hidden}
.tondo img{width:100%; height:100%; object-fit:cover; display:block}

/* **«da controllare»** (09/10, G19-01): accanto a un telefono arrivato dal
   sito o dall'import che non e' un numero. Il colore delle note, non quello
   dell'errore: il dato c'e', va solo guardato. Uno per tutte le pagine */
.da-controllare{display:inline-block; vertical-align:middle; margin-left:6px;
  padding:1px 7px; border-radius:99px; font-family:var(--corpo); font-size:10.5px;
  font-weight:600; font-style:normal; letter-spacing:.02em; white-space:nowrap;
  color:var(--nota); background:color-mix(in srgb, var(--nota) 13%, var(--superficie))}

/* **«Forse intendevi …?»** sotto la casella dell'email (09/10, G19-02;
   static/js/email-forse.js): un avviso, non un errore, col colore delle
   cose da guardare e il tasto che corregge */
.email-forse{display:flex; flex-wrap:wrap; align-items:center; gap:4px var(--s2);
  margin-top:6px; font-size:12px; line-height:1.4; color:var(--nota)}
.email-forse b{font-weight:600; overflow-wrap:anywhere}
.email-forse .email-correggi{font:inherit; font-weight:600; padding:2px 10px; border-radius:99px; cursor:pointer;
  color:var(--nota); background:color-mix(in srgb, var(--nota) 13%, var(--superficie));
  border:1px solid color-mix(in srgb, var(--nota) 35%, transparent)}
.email-forse .email-correggi:hover{border-color:var(--nota)}

/* **Il pannello mentre salva** (09/10, regola 38): si vela tutto, tasti
   compresi, e gira la rotella del telaio. Dal clic su Salva finche' e'
   pronto, anche quando dopo una cosa nuova se ne rilegge il contenuto
   (eplanner.js). Lo stesso segno di «Trasforma in prestazione», con la scritta */
.pannello.sto-salvando{pointer-events:none}
.pannello.sto-salvando::after{content:'Salvo\2026'; position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center; padding-top:52px;
  font-family:var(--titoli); font-size:14px; font-weight:600; color:var(--azione);
  background:color-mix(in srgb, var(--superficie) 72%, transparent)}
.pannello.sto-salvando::before{content:''; position:absolute; top:50%; left:50%; z-index:61;
  width:22px; height:22px; margin:-22px 0 0 -11px; border-radius:50%;
  border:2.5px solid color-mix(in srgb, var(--azione) 26%, transparent);
  border-top-color:var(--azione); animation:gira-attesa 700ms linear infinite}
@media (prefers-reduced-motion: reduce){ .pannello.sto-salvando::before{animation:none} }

/* **L'attesa fra un salvataggio e la pagina nuova** (21/09): un secondo
   in cui non succede niente di visibile fa premere il tasto due volte. */
.velo-attesa{position:fixed; inset:0; z-index:400;
  background:color-mix(in srgb, var(--sfondo) 45%, transparent);
  display:flex; align-items:center; justify-content:center}
.velo-attesa .dice-attesa{display:flex; align-items:center; gap:var(--s3);
  background:var(--superficie); border:1px solid var(--bordo-forte);
  border-radius:10px; padding:var(--s3) var(--s5); font-size:13px;
  color:var(--testo); box-shadow:var(--ombra-alta)}
.velo-attesa .gira-attesa{width:22px; height:22px; border-radius:50%; flex:none;
  border:2.5px solid color-mix(in srgb, var(--azione) 25%, transparent);
  border-top-color:var(--azione); animation:gira-attesa .7s linear infinite}
@keyframes gira-attesa{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .velo-attesa .gira-attesa{animation:none} }

/* **Il suggerimento** (25/09, disegnato con Luciano): il nome intero di un
   comando in icona, subito, sopra l'elemento. Lo mette sopra la pagina
   static/js/suggerimento.js, per non farlo tagliare dalle sezioni. Scuro su
   chiaro coi colori del telaio: nel tema scuro si inverte da solo. Sotto il
   velo d'attesa (400), sopra i pannelli (300). */
.suggerimento{position:fixed; z-index:350; max-width:260px; width:max-content;
  background:var(--testo); color:var(--superficie); font-size:12px; font-weight:500; line-height:1.3;
  padding:5px 9px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.14);
  pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .12s, transform .12s}
.suggerimento.sotto{transform:translateY(-3px)}
.suggerimento.visibile{opacity:1; transform:none}
.suggerimento::after{content:''; position:absolute; top:100%; left:var(--punta, 50%); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--testo); border-bottom:0}
.suggerimento.sotto::after{top:auto; bottom:100%; border:5px solid transparent; border-top:0; border-bottom-color:var(--testo)}
@media (prefers-reduced-motion: reduce){ .suggerimento{transition:none} }

/* ====================================================================
   RITIRARE UNA PRATICA DI FINANZIAMENTO (06/09; qui dal 28/09, sera):
   nel pannello del finanziamento, che si apre dal preventivo, dalla scheda
   e dagli Incassi. Stava in preventivo.css, e dalle altre due pagine il
   tasto arrivava senza stile, quasi invisibile.
   ==================================================================== */
/* **Ritirare è l'eccezione**, non un comando accanto agli altri: sta in
   una fascia sua, sopra il modulo. */
.ritira-fn{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); padding:var(--s3) var(--s4); border-radius:9px; background:var(--superficie-alt); border:1px solid var(--bordo); font-size:12px; color:var(--testo-medio)}
.ritira-fn > span{flex:1 1 0; min-width:0}
.b-ritira{flex:none; font-size:12px; padding:6px 12px; border-radius:8px; border:1px solid var(--bordo-forte); background:var(--superficie); color:var(--testo-medio); cursor:pointer}
.b-ritira:hover{border-color:var(--manca); background:var(--manca); color:#fff}

/* ====================================================================
   LA BARRA SUI TABLET E SUI TELEFONI (01/10, Luciano, sull'anteprima)
   Da 1280 pixel in su la barra resta quella dei computer (vedi «La barra
   sui portatili», sopra). Sotto, tre forme:
   - da 1024 a 1279 (tablet in orizzontale, iPad grande in verticale): le
     voci col nome; la ricerca diventa la lente, e premuta si apre sotto la
     barra, larga quanto la pagina;
   - da 744 a 1023 (tablet in verticale): le voci con la sola icona (scelta
     A di Luciano), «Altro» in una colonna;
   - sotto i 744 (telefono): il «Menu», le tre righe, con dentro le voci e
     tutto «Altro» in colonna, che scorre se e' piu' lungo dello schermo.
   Prima, sotto i 1280, la barra restava larga 1193 pixel: tutte le pagine
   scorrevano di lato, e il browser del telefono le rimpiccioliva al 30%.
   **Le misure vengono dalla barra** (regola 0): i tasti nuovi hanno la
   forma di «Assistente» (`.b-icona`), il Menu quella delle tendine della
   barra, e la colonna di «Altro» quella che il menu aveva gia' per gli
   schermi stretti (min(92vw, 320px), 70vh), annullata dal
   `min-width:900px !important` del megamenu. **Sta in fondo al foglio**
   perche' deve vincere sulle regole del megamenu, che stanno sopra.
   ==================================================================== */
.b-menu, .b-cerca{display:none}
.b-menu[aria-expanded="true"], .b-cerca[aria-expanded="true"]{background:color-mix(in srgb, var(--azione) 10%, var(--superficie)); color:var(--azione)}
@media (max-width:1279px){
  .barra{gap:var(--s4); padding:var(--s3) var(--s4)}
  .b-cerca{display:inline-flex}
  .cerca-globale{display:none}
  .barra.cerca-aperta .cerca-globale{display:flex; position:absolute; top:calc(100% + var(--s2)); left:var(--s4); right:var(--s4); max-width:none; min-width:0; z-index:95; box-shadow:var(--ombra-alta)}
}
@media (max-width:1023px){
  .tendina.mega{min-width:0 !important; width:min(92vw, 320px); grid-template-columns:1fr !important; max-height:70vh; overflow-y:auto}
  .dentro-config{grid-template-columns:1fr}
  /* **Solo l'icona**: la scritta resta per chi legge con la voce */
  .luoghi .luogo{font-size:0; gap:0; padding:0 11px}
}
@media (max-width:743px){
  .barra, .barra-dx{gap:var(--s2)}
  .b-menu{display:inline-flex}
  .barra .luoghi{display:none; position:absolute; top:calc(100% + 6px); left:var(--s4); right:var(--s4); z-index:100; max-height:70vh; overflow-y:auto; flex-direction:column; gap:2px; background:var(--superficie); border:1px solid var(--bordo-forte); border-radius:8px; box-shadow:var(--ombra-alta); padding:var(--s2)}
  .barra.menu-aperto .luoghi{display:flex}
  /* senza, in colonna le voci si schiacciavano per stare nel riquadro */
  .luoghi .luogo, .luoghi .a-tendina{flex:none}
  .luoghi .luogo{width:100%; font-size:13.5px; gap:8px; padding:0 var(--s3)}
  .luoghi #apri-altro{display:none}
  .luoghi .a-tendina{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--bordo)}
  .luoghi .tendina.mega, .luoghi .tendina.mega[hidden]{display:grid; position:static; width:auto; max-height:none; overflow:visible; border:0; box-shadow:none; padding:0}
}