/* Il vocabolario visivo condiviso fra schermo e carta.
   Usa solo i token: nessun valore scritto a mano.
   Chi aggiunge un componente lo aggiunge qui, non nelle viste. */

/* ═══════════════════════════════ TIPOGRAFIA ═══════════════════════════════ */

h1{ font-size:var(--t-xl); line-height:var(--i-stretta); letter-spacing:-.015em;
  margin:0 0 var(--s-2); font-weight:650 }
h2{ font-size:var(--t-lg); line-height:var(--i-stretta); letter-spacing:-.01em;
  margin:var(--s-6) 0 var(--s-3); font-weight:640 }
h3{ font-size:var(--t-md); line-height:var(--i-stretta); margin:var(--s-5) 0 var(--s-2);
  font-weight:640 }

/* La riga di spiegazione sotto il titolo: si legge, quindi ha bisogno di
   respiro e di una misura. Oltre una certa larghezza l'occhio perde la riga. */
.guida{ color:var(--tenue); font-size:var(--t-base); line-height:var(--i-larga);
  max-width:var(--testo-largo); margin:0 0 var(--s-5) }

/* Il riferimento normativo: presente ma mai in primo piano. */
.norma{ font-size:var(--t-xs); color:var(--tenue); font-style:italic }

/* Codici, IBAN, identificativi: si confrontano carattere per carattere. */
.cod{ font-family:var(--mono); font-size:var(--t-sm); color:var(--tenue);
  font-variant-ligatures:none }

/* Il segno di un importo: favorevole o sfavorevole. Erano colori scritti in
   linea nelle viste, e in linea nessun foglio di stampa poteva spegnerli. */
.segno-ok{ color:var(--ok) }
.segno-errore{ color:var(--errore) }

/* Ciò che guida chi lavora allo schermo ma non appartiene al documento
   consegnato: avvertenze già ripetute nel piede, promemoria di revisione. */
.solo-schermo{}

/* ═══════════════════════════════ SUPERFICI ═══════════════════════════════ */

.card{ background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r-lg); padding:var(--s-5); margin-bottom:var(--s-4);
  box-shadow:var(--ombra) }
.card > :first-child{ margin-top:0 }
.card > :last-child{ margin-bottom:0 }

/* Le celle affiancate hanno la stessa altezza, sempre. Lasciarle crescere
   ciascuna per conto proprio fa una fila di rettangoli sfalsati, e l'occhio
   legge lo sfalsamento come un errore prima ancora di leggere i numeri. */
.griglia{ display:grid; gap:var(--s-3); align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }

/* Il riquadro di un numero. Il numero è la cosa che si guarda: tutto il resto
   gli sta intorno in punta di piedi. Una banda di colore sul fianco dà al
   cruscotto un ritmo che tre rettangoli bianchi non hanno. */
.riquadro{ position:relative; background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r-lg); padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  box-shadow:var(--ombra); overflow:hidden }
.riquadro::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accento) }
.riquadro .etichetta{ font-size:var(--t-xs); color:var(--tenue); text-transform:uppercase;
  letter-spacing:var(--spazio-lettere); font-weight:600 }
.riquadro .valore{ font-size:var(--t-xl); font-weight:650; margin-top:var(--s-1);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:var(--i-stretta) }
.riquadro .nota{ font-size:var(--t-sm); color:var(--tenue); margin-top:var(--s-1) }
/* La banda dice di che numero si tratta: un portafoglio, un incasso mancato,
   una scadenza che si avvicina. Senza, tre rettangoli identici chiedono di
   leggere l'etichetta per capire quale guardare per primo.

   I nomi sono composti — riquadro--errore e non errore — perché `.errore` è
   già la classe del messaggio d'errore dell'accesso, con un margine superiore
   e un'altezza minima. La scheda se li prendeva: quel margine alzava la riga
   della griglia e le schede accanto si allungavano per riempirla, lasciandone
   una più bassa delle altre. */
.riquadro--ok::before{ background:var(--ok) }
.riquadro--allerta::before{ background:var(--allerta) }
.riquadro--errore::before{ background:var(--errore) }
.riquadro--errore .valore{ color:var(--errore) }

/* Due pannelli affiancati quando c'è spazio, uno sotto l'altro quando non c'è:
   un grafico stretto in una scheda larga è soprattutto spazio vuoto. */
.affiancati{ display:grid; gap:var(--s-4); align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }

/* ═══════════════════════════════ TABELLE ═══════════════════════════════ */

table{ width:100%; border-collapse:collapse; font-size:var(--t-base);
  background:var(--superficie) }
th{ text-align:left; padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--n-300);
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--spazio-lettere);
  color:var(--n-600); font-weight:650; white-space:nowrap;
  background:var(--n-50); position:sticky; top:0; z-index:1 }
td{ padding:var(--s-2) var(--s-3); border-bottom:1px solid var(--n-100);
  vertical-align:top; line-height:var(--i-normale) }
tbody tr:last-child td{ border-bottom:none }
tbody tr{ transition:background var(--transizione) }
tbody tr:hover{ background:var(--n-25) }
tfoot td{ font-weight:650; border-top:1px solid var(--n-300); border-bottom:none;
  background:var(--n-50) }

/* I numeri si incolonnano e si confrontano: cifre di larghezza uguale,
   allineate a destra, mai mandate a capo. */
.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono);
  font-size:var(--t-sm); white-space:nowrap }

/* Una colonna che porta il senso della riga prende lo spazio che avanza,
   invece di mandare a capo mentre accanto restano colonne vuote. */
th.largo,td.largo{ width:100%; min-width:16rem }

/* Un albero si legge dal rientro. Il codice dice già a che livello si è, ma
   l'occhio non conta i punti fra le cifre. */
.ramo{ display:block }
.ramo-2{ padding-left:var(--s-4) }
.ramo-3{ padding-left:var(--s-6) }

/* Una tabella dentro una scheda resta dentro i suoi margini: portarla a filo
   sembrava più pulito, ma gli angoli arrotondati della scheda tagliavano
   l'intestazione e l'ultima colonna finiva contro il bordo. */
.card table{ margin-top:var(--s-3) }
.card .scorri{ border:none; box-shadow:none; margin-bottom:0; border-radius:var(--r) }

.scorri{ overflow:auto; max-height:70vh; border:1px solid var(--bordo);
  border-radius:var(--r-lg); background:var(--superficie); box-shadow:var(--ombra);
  margin-bottom:var(--s-4) }
/* Gli angoli arrotondati del contenitore devono valere anche per la prima e
   l'ultima cella, altrimenti l'intestazione sborda dallo smusso. */
.scorri table{ border-radius:inherit }

/* Una tabella più larga dello schermo si scorre di lato, e deve dirlo: la
   prima colonna — chi, che cosa — resta ferma mentre le altre scorrono, e il
   bordo dove continua sfuma. Le classi le mette segnaScorrimento() (ui.js)
   misurando la tabella, non la larghezza dello schermo. */
@media (min-width:641px){
  .scorri--largo th:first-child,.scorri--largo td:first-child{ position:sticky; left:0; z-index:1;
    background:var(--superficie); box-shadow:1px 0 0 var(--bordo); min-width:9rem; max-width:16rem }
  .scorri--largo thead th:first-child{ z-index:3; background:var(--n-50) }
  .scorri--largo tfoot td:first-child{ background:var(--n-50) }
  .scorri--largo tbody tr:hover td:first-child{ background:var(--n-25) }
  .scorri--largo th:first-child,.scorri--largo td:first-child{ min-width:0 }
  .scorri--largo.scorri--due th:nth-child(2),.scorri--largo.scorri--due td:nth-child(2){ position:sticky;
    left:var(--prima, 0); z-index:1; background:var(--superficie); box-shadow:1px 0 0 var(--bordo); max-width:16rem }
  .scorri--largo.scorri--due th:first-child,.scorri--largo.scorri--due td:first-child{ box-shadow:none }
  .scorri--largo.scorri--due thead th:nth-child(2){ z-index:3; background:var(--n-50) }
  .scorri--largo.scorri--due tfoot td:nth-child(2){ background:var(--n-50) }
  .scorri--largo.scorri--due tbody tr:hover td:nth-child(2){ background:var(--n-25) }
  .scorri--largo.scorri--destra{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent) }
}
.scorri-cenno{ display:none; font-size:var(--t-xs); color:var(--tenue); margin:calc(var(--s-3) * -1) 0 var(--s-3); text-align:right }
.scorri--largo + .scorri-cenno{ display:block }
.scorri thead tr:first-child th:first-child{ border-top-left-radius:var(--r-lg) }
.scorri thead tr:first-child th:last-child{ border-top-right-radius:var(--r-lg) }

.vuoto{ padding:var(--s-7) var(--s-5); text-align:center; color:var(--tenue);
  font-size:var(--t-base); background:var(--superficie);
  border:1px dashed var(--n-300); border-radius:var(--r-lg);
  margin-bottom:var(--s-4) }

/* ═══════════════════════════════ COMANDI ═══════════════════════════════ */

button{ font:inherit; font-size:var(--t-base); font-weight:550;
  padding:0 var(--s-4); height:34px; line-height:1;
  border-radius:var(--r-sm); border:1px solid var(--n-300);
  background:var(--superficie); color:var(--testo); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--s-2);
  transition:background var(--transizione), border-color var(--transizione),
             box-shadow var(--transizione) }
button:hover{ background:var(--n-50); border-color:var(--n-400) }
button:active{ background:var(--n-100) }
button:disabled{ opacity:.5; cursor:not-allowed }
button:disabled:hover{ background:var(--superficie); border-color:var(--n-300) }

button.primario{ background:var(--accento); color:var(--su-colore); border-color:var(--accento) }
button.primario:hover{ background:var(--accento-scuro); border-color:var(--accento-scuro) }
button.primario:active{ background:var(--accento-scuro) }

button.piatto{ background:transparent; border-color:rgba(255,255,255,.28);
  color:var(--su-colore); height:30px; padding:0 var(--s-3); font-size:var(--t-sm) }
button.piatto:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45) }
button.piccolo{ height:26px; padding:0 var(--s-3); font-size:var(--t-sm); font-weight:500; white-space:nowrap }
/* I comandi in fondo a una riga di tabella: affiancati, e a capo su telefono. */
.azioni-riga{ display:inline-flex; flex-wrap:nowrap; gap:var(--s-1); justify-content:flex-end }

/* La messa a fuoco si vede sempre: chi naviga da tastiera deve sapere dov'è. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--fuoco); outline-offset:1px; box-shadow:var(--anello-fuoco) }

/* La barra dei comandi allinea i controlli sul loro bordo inferiore, non sul
   centro. Un campo con l'etichetta sopra è più alto di un pulsante: centrando,
   il pulsante finiva a mezza via fra l'etichetta e il menu a tendina invece
   che accanto al menu, e si vedeva. Il testo di riepilogo prende l'altezza di
   un controllo, così la sua riga cade dove cadono le altre. */
.azioni{ display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:flex-end;
  margin-bottom:var(--s-4) }
.azioni > span,.azioni > strong,.azioni > a{ display:inline-flex; align-items:center;
  min-height:34px; flex-wrap:wrap; gap:0 .3em }

/* ═══════════════════════════════ CAMPI ═══════════════════════════════ */

input,select,textarea{ font:inherit; font-size:var(--t-base); color:var(--testo);
  padding:0 var(--s-3); height:34px; border:1px solid var(--n-300);
  border-radius:var(--r-sm); background:var(--superficie); max-width:100%;
  transition:border-color var(--transizione), box-shadow var(--transizione) }
input:hover,select:hover,textarea:hover{ border-color:var(--n-400) }
input[type=number]{ text-align:right; font-family:var(--mono) }
input[type=date]{ font-family:var(--mono); font-size:var(--t-sm) }
select{ padding-right:var(--s-2); cursor:pointer }

/* min-width:0 toglie ai campi la larghezza minima automatica del contenuto: senza,
   un'opzione lunga in una select sfonda la sua colonna della griglia invece di starci dentro. */
label.campo{ display:flex; flex-direction:column; gap:var(--s-1);
  font-size:var(--t-sm); color:var(--tenue); font-weight:550; min-width:0 }
label.campo textarea{ font-size:var(--t-base); color:var(--testo);
  padding:var(--s-2) var(--s-3); height:auto; resize:vertical; min-height:74px;
  width:100%; box-sizing:border-box; line-height:var(--i-normale) }

/* Un modulo non distribuisce lo spazio verticale: le righe valgono quanto il
   loro contenuto. Senza align-content basta che qualcosa dia al modulo
   un'altezza definita perché i campi si allontanino l'uno dall'altro — ed è
   successo, quando il foglio A4 di un bollettino si chiamava .modulo. */
.modulo{ display:grid; gap:var(--s-3) var(--s-4); align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }

/* I gruppi di un modulo lungo. Il titoletto prende l'intera riga e porta un
   filo sopra: separa senza aggiungere una scatola dentro un'altra scatola. */
.modulo__sezione{ grid-column:1/-1; margin:var(--s-3) 0 0; padding-top:var(--s-3);
  border-top:1px solid var(--bordo); font-size:var(--t-xs); font-weight:700;
  color:var(--n-500); text-transform:uppercase; letter-spacing:var(--spazio-lettere) }
.modulo__sezione:first-child{ margin-top:0; padding-top:0; border-top:0 }
/* La riga di una tabella che riguarda ciò che si sta guardando. Non usa uno
   sfondo: su carta gli sfondi si perdono quando la stampa è in bianco e nero
   o quando il browser non stampa i colori di fondo. Un filo a sinistra e un
   peso maggiore si vedono sempre. */
/* Una lettera non è un prospetto: ha il destinatario in alto a destra, la
   data sotto, il testo giustificato e lo spazio per la firma. Su carta ogni
   lettera comincia a pagina nuova, perché ciascuna va in una busta diversa. */
.documento--lettera{ line-height:var(--i-larga) }
.documento--lettera .destinatario{ margin-left:auto; width:min(100%,58%);
  text-align:left; margin-top:var(--s-6) }
.documento--lettera .data-lettera{ text-align:right; margin:var(--s-6) 0 var(--s-5) }
.documento--lettera p{ text-align:justify }
/* Il destinatario e la data non sono prosa: giustificarli stira le parole
   fino a lasciare buchi bianchi in mezzo a un indirizzo. */
.documento--lettera .destinatario p,
.documento--lettera .data-lettera,
.documento--lettera .firma p{ text-align:left }
.documento--lettera .data-lettera,
.documento--lettera .firma p{ text-align:right }
.documento--lettera .firma p{ text-align:center }
.documento--lettera .destinatario .mezzo{ font-size:var(--t-sm); color:var(--tenue);
  text-transform:uppercase; letter-spacing:var(--spazio-lettere) }
.documento--lettera .firma{ margin-top:var(--s-7); margin-left:auto; width:min(100%,46%);
  text-align:center }
.documento--lettera .firma .riga-firma{ border-top:1px solid var(--testo);
  margin-top:var(--s-6); padding-top:var(--s-1) }

/* Il codice MAV su un avviso: diciassette cifre che qualcuno dovrà ricopiare
   in un bancomat o dettare al telefono. Grandi, spaziate, in carattere a
   larghezza fissa — dove 0 e O, 1 e l non si somigliano. */
.mav__codice{ border:2px solid var(--testo); border-radius:var(--r);
  padding:var(--s-3) var(--s-4); margin:var(--s-5) 0; text-align:center }
.mav__cifre{ font-family:var(--mono); font-size:var(--t-lg); font-weight:700;
  letter-spacing:.12em; margin-top:var(--s-1); word-spacing:.3em }

tr.evidenza > td{ font-weight:650 }
tr.evidenza > td:first-child{ box-shadow:inset 3px 0 0 var(--accento) }

.campo--largo{ grid-column:1/-1 }
/* Le fasce di una bolletta sono righe ripetute dello stesso modulo: senza
   stacco l'etichetta della seconda si attacca al campo della prima, e non si
   capisce più quale limite va con quale tariffa. */
.fascia{ margin-bottom:var(--s-3) }
/* La casella da spuntare non ha l'etichetta sopra ma accanto: sopra sembra il
   titolo di un campo vuoto. Il selettore ripete l'elemento perché la regola
   base è `label.campo`: senza `label` qui, flex-direction non cambierebbe. */
label.campo--spunta{ flex-direction:row; align-items:center; gap:var(--s-2);
  align-self:end; min-height:34px }
label.campo--spunta input{ width:auto; margin:0 }

/* ═══════════════════════════════ SEGNALI ═══════════════════════════════ */

.pill{ display:inline-flex; align-items:center; padding:1px var(--s-2);
  border-radius:var(--r-tondo); font-size:var(--t-xs); font-weight:650;
  letter-spacing:.01em; white-space:nowrap;
  border:1px solid transparent }
.pill.ok{ background:var(--ok-tenue); color:var(--ok); border-color:rgba(23,112,74,.18) }
.pill.ko,.pill.errore{ background:var(--errore-tenue); color:var(--errore);
  border-color:rgba(168,35,29,.18) }
.pill.att{ background:var(--allerta-tenue); color:var(--allerta);
  border-color:rgba(164,84,10,.18) }
.pill.neutro{ background:var(--neutro-tenue); color:var(--n-600);
  border-color:var(--n-200) }

.avviso{ padding:var(--s-3) var(--s-4); border-radius:var(--r);
  margin-bottom:var(--s-3); font-size:var(--t-base); line-height:var(--i-normale);
  border:1px solid transparent; border-left-width:3px }
.avviso.alto{ background:var(--errore-tenue); border-color:rgba(168,35,29,.2);
  border-left-color:var(--errore) }
.avviso.medio{ background:var(--allerta-tenue); border-color:rgba(164,84,10,.2);
  border-left-color:var(--allerta) }
.avviso.info{ background:var(--accento-tenue); border-color:rgba(29,91,134,.18);
  border-left-color:var(--accento) }
.avviso strong{ font-weight:650 }

.caricamento{ padding:var(--s-7); text-align:center; color:var(--tenue) }

/* ───────────────────────────────────────────────────────── GRAFICI ─────
   Barre e colonne sono elementi del documento, non un disegno su tela: la
   lunghezza arriva da --quota, tutto il resto dai token. Così si adattano
   alla larghezza come il testo e si stampano nitidi. */

.grafico{ margin:0 0 var(--s-5); max-width:var(--grafico-largo) }
.grafico:last-child{ margin-bottom:0 }
.grafico__titolo{ display:flex; align-items:baseline; gap:var(--s-3);
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--spazio-lettere);
  color:var(--tenue); font-weight:650; margin-bottom:var(--s-3) }
.grafico__totale{ margin-left:auto; font-size:var(--t-md); text-transform:none;
  letter-spacing:0; color:var(--testo); font-weight:650;
  font-variant-numeric:tabular-nums }

/* I toni: il colore porta significato, non decora. */
.tono-accento{ background:var(--accento) }
.tono-ok{ background:var(--ok) }
.tono-allerta{ background:var(--allerta) }
.tono-errore{ background:var(--errore) }
.tono-tenue{ background:var(--n-400) }

/* Barre orizzontali ------------------------------------------------------ */
.grafico__barre{ display:grid; gap:var(--s-2) }
.gbarra{ display:grid; align-items:center; gap:var(--s-3);
  grid-template-columns:minmax(9rem,15rem) 1fr auto 3.2rem }
.gbarra--senza-quota{ grid-template-columns:minmax(9rem,15rem) 1fr auto }
.gbarra__etichetta{ font-size:var(--t-sm); line-height:var(--i-stretta); min-width:0;
  overflow-wrap:anywhere }
.gbarra__nota{ display:block; font-size:var(--t-xs); color:var(--tenue); margin-top:1px }
.gbarra__traccia{ background:var(--n-100); border-radius:var(--r-sm);
  height:16px; overflow:hidden; min-width:0 }
.gbarra__riempimento{ height:100%; width:var(--quota); border-radius:var(--r-sm);
  transition:width var(--transizione);
  -webkit-print-color-adjust:exact; print-color-adjust:exact }
.gbarra__valore{ font-size:var(--t-sm); font-family:var(--mono);
  font-variant-numeric:tabular-nums }
.gbarra__quota{ font-size:var(--t-xs); color:var(--tenue); font-family:var(--mono);
  font-variant-numeric:tabular-nums }

/* Confronto: due valori per voce (preventivo e consuntivo) ---------------- */
.glegenda{ display:flex; gap:var(--s-4); font-size:var(--t-xs); color:var(--tenue); margin-bottom:var(--s-2); flex-wrap:wrap }
.glegenda i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact }
.gconf{ display:grid; grid-template-columns:minmax(9rem,15rem) 1fr 5.5rem; gap:var(--s-3);
  align-items:center; padding:var(--s-1) 0; border-bottom:1px solid var(--n-100) }
.gconf__etichetta{ font-size:var(--t-sm); line-height:var(--i-stretta); min-width:0; overflow-wrap:anywhere }
.gconf__barre{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.gconf__riga{ display:grid; grid-template-columns:1fr 5.5rem; gap:var(--s-2); align-items:center }
.gconf__riga .num{ font-size:var(--t-xs); font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right }
.gconf__traccia{ background:var(--n-100); border-radius:var(--r-sm); height:9px; overflow:hidden }
.gconf__riempimento{ height:100%; width:var(--quota); border-radius:var(--r-sm);
  -webkit-print-color-adjust:exact; print-color-adjust:exact }
.gconf__scarto{ font-size:var(--t-xs); font-family:var(--mono); text-align:right }
.scarto-ko{ color:var(--errore); font-weight:650 }
.scarto-ok{ color:var(--ok) }
.scarto-neutro{ color:var(--tenue) }

/* Linee nel tempo, in SVG ------------------------------------------------- */
.glinee{ width:100%; height:auto; display:block; max-height:300px }
.glinee__griglia{ stroke:var(--n-200); stroke-width:1 }
.glinee__asse{ fill:var(--tenue); font-size:11px; font-family:var(--mono) }
.glinee__linea{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round }
.tono-traccia-accento{ stroke:var(--accento) }
.tono-traccia-tenue{ stroke:var(--n-400) }
.tono-traccia-ok{ stroke:var(--ok) }
.tono-traccia-errore{ stroke:var(--errore) }

@media (max-width:640px){
  .gconf{ grid-template-columns:1fr 4.5rem }
  .gconf__etichetta{ grid-column:1 / -1 }
}

/* Colonne verticali ------------------------------------------------------ */
.grafico__colonne{ display:flex; align-items:flex-end; gap:var(--s-3);
  overflow-x:auto; padding-bottom:var(--s-1) }
.gcolonna{ flex:0 1 4.5rem; min-width:3rem; display:flex; flex-direction:column;
  align-items:center; gap:var(--s-1) }
.gcolonna__valore{ font-size:var(--t-xs); font-family:var(--mono);
  font-variant-numeric:tabular-nums; color:var(--tenue) }
.gcolonna__asta{ width:100%; height:104px; background:var(--n-100);
  border-radius:var(--r-sm); display:flex; align-items:flex-end; overflow:hidden }
.gcolonna__riempimento{ width:100%; height:var(--quota); border-radius:var(--r-sm);
  transition:height var(--transizione);
  -webkit-print-color-adjust:exact; print-color-adjust:exact }
.gcolonna__etichetta{ font-size:var(--t-xs); text-align:center;
  line-height:var(--i-stretta) }
.gcolonna__nota{ display:block; color:var(--tenue) }
/* I segni del menu. Un insieme ristretto riusato per famiglia:
   venticinque pittogrammi diversi sarebbero rumore, mentre un segno costante
   per genere di cosa dà all'occhio un appiglio senza chiedergli di imparare
   un alfabeto. Sono maschere applicate a currentColor, così seguono il colore
   della voce — tenue a riposo, pieno quando è quella attiva — e non portano
   una tavolozza propria. */
.menu a[data-v="cruscotto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="2.5" width="6" height="6" rx="1"/><rect x="11.5" y="2.5" width="6" height="6" rx="1"/><rect x="2.5" y="11.5" width="6" height="6" rx="1"/><rect x="11.5" y="11.5" width="6" height="6" rx="1"/></svg>') }
.menu a[data-v="guida"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.5"/><path d="M7.8 7.6a2.3 2.3 0 0 1 4.4.9c0 1.6-2.2 1.9-2.2 3.3"/><circle cx="10" cy="14.4" r=".7" fill="%23000" stroke="none"/></svg>') }
.menu a[data-v="condomini"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17V4.5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1V17"/><path d="M12 8.5h4a1 1 0 0 1 1 1V17"/><path d="M1.5 17h17"/><path d="M6 7h3M6 10.5h3M6 14h3"/></svg>') }
.menu a[data-v="unita"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13"/><path d="M3 17h14"/><circle cx="12" cy="10.5" r=".9" fill="%23000" stroke="none"/></svg>') }
.menu a[data-v="soggetti"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="6.5" r="3"/><path d="M4 16.5a6 6 0 0 1 12 0"/></svg>') }
.menu a[data-v="tabelle"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="1.2"/><path d="M2.5 8h15M2.5 12.2h15M7.5 3.5v13"/></svg>') }
.menu a[data-v="conti"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 5.5h11M6.5 10h11M6.5 14.5h11"/><circle cx="3" cy="5.5" r="1.1" fill="%23000" stroke="none"/><circle cx="3" cy="10" r="1.1" fill="%23000" stroke="none"/><circle cx="3" cy="14.5" r="1.1" fill="%23000" stroke="none"/></svg>') }
.menu a[data-v="movimenti"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h11l-3-3"/><path d="M16 13H5l3 3"/></svg>') }
.menu a[data-v="fatture"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.5h6l4 4V17a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 5 17V3a.5.5 0 0 1 .5-.5Z"/><path d="M11 2.5V7h4"/></svg>') }
.menu a[data-v="mastrini"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 4.2A1.7 1.7 0 0 1 5.2 2.5H16a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5H5.2a1.7 1.7 0 0 0-1.7 1.7Z"/><path d="M3.5 15.5H16"/><path d="M7 6h6M7 9h6"/></svg>') }
.menu a[data-v="riparto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10V2.6a7.4 7.4 0 1 1-7.4 7.4H10Z"/></svg>') }
.menu a[data-v="rate"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4" width="14.4" height="13" rx="1.4"/><path d="M2.8 8h14.4M6.5 2.5v3M13.5 2.5v3"/></svg>') }
.menu a[data-v="insolvenze"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.6 18 16.4H2Z"/><path d="M10 7.6v4"/><circle cx="10" cy="14" r=".9" fill="%23000" stroke="none"/></svg>') }
.menu a[data-v="bollettini"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 2.5h11v15l-2-1.4-1.8 1.4-1.7-1.4-1.8 1.4L6.5 16l-2 1.5Z"/><path d="M7.5 6.5h5M7.5 10h5"/></svg>') }
.menu a[data-v="mav"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5v11M5.8 4.5v11M8.4 4.5v11M11.6 4.5v11M14.2 4.5v11M17 4.5v11"/></svg>') }
.menu a[data-v="avvisi"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="15" height="11" rx="1.3"/><path d="m2.9 5.4 7.1 5.3 7.1-5.3"/></svg>') }
.menu a[data-v="convocazioni"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4" width="14.4" height="13" rx="1.4"/><path d="M2.8 8h14.4M6.5 2.5v3M13.5 2.5v3"/></svg>') }
.menu a[data-v="verbale"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.5h6l4 4V17a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 5 17V3a.5.5 0 0 1 .5-.5Z"/><path d="M11 2.5V7h4"/></svg>') }
.menu a[data-v="docRendiconto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 4.2A1.7 1.7 0 0 1 5.2 2.5H16a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5H5.2a1.7 1.7 0 0 0-1.7 1.7Z"/><path d="M3.5 15.5H16"/><path d="M7 6h6M7 9h6"/></svg>') }
.menu a[data-v="docRiparto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10V2.6a7.4 7.4 0 1 1-7.4 7.4H10Z"/></svg>') }
.menu a[data-v="comunicazioni"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 2.5 9 11"/><path d="M17.5 2.5 12.2 17.5 9 11 2.5 7.8Z"/></svg>') }
.menu a[data-v="situazione"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3v13M5.5 16.5h9"/><path d="M3 7.5h14"/><path d="M6.5 7.5 4 12.5h5Z"/><path d="M13.5 7.5 11 12.5h5Z"/></svg>') }
.menu a[data-v="rendiconto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 4.2A1.7 1.7 0 0 1 5.2 2.5H16a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5H5.2a1.7 1.7 0 0 0-1.7 1.7Z"/><path d="M3.5 15.5H16"/><path d="M7 6h6M7 9h6"/></svg>') }
.menu a[data-v="assemblee"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="6.5" r="2.6"/><path d="M2.5 16a5 5 0 0 1 10 0"/><path d="M13.5 4.4a2.6 2.6 0 0 1 0 4.2"/><path d="M14.2 11.6A5 5 0 0 1 17.5 16"/></svg>') }
.menu a[data-v="quorum"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.3"/><circle cx="14" cy="14" r="2.3"/><path d="M15.5 4.5 4.5 15.5"/></svg>') }
.menu a[data-v="fiscale"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.3"/><circle cx="14" cy="14" r="2.3"/><path d="M15.5 4.5 4.5 15.5"/></svg>') }
.menu a[data-v="cu"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8.5a4 4 0 1 1 8 0c0 2-1.5 2.5-1.5 4h-5C7.5 11 6 10.5 6 8.5Z"/><rect x="4" y="14" width="12" height="3.2" rx=".8"/></svg>') }
.menu a[data-v="quadroac"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.5h6l4 4V17a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 5 17V3a.5.5 0 0 1 .5-.5Z"/><path d="M11 2.5V7h4"/></svg>') }
.menu a[data-v="scadenzario"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.4"/><path d="M10 5.6V10l3 2"/></svg>') }
.menu a[data-v="normativa"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16.5h12"/><path d="M10 3v11"/><path d="M5 6.5 10 4l5 2.5"/><path d="M3 12a2.6 2.6 0 0 0 4 0L5 7.8Z"/><path d="M13 12a2.6 2.6 0 0 0 4 0L15 7.8Z"/></svg>') }
.menu a[data-v="esercizio"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4" width="14.4" height="13" rx="1.4"/><path d="M2.8 8h14.4M6.5 2.5v3M13.5 2.5v3"/><path d="m6.8 12.4 2.2 2.2 4.2-4.2"/></svg>') }
.menu a[data-v="estratto"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 2.8h11a.7.7 0 0 1 .7.7v13l-2.4-1.4-2.4 1.4-2.4-1.4-2.4 1.4-2.4-1.4V3.5a.7.7 0 0 1 .7-.7Z"/><path d="M7.5 7h5M7.5 10.5h5"/></svg>') }
.menu a[data-v="solleciti"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.2h14.4v9.6H2.8z"/><path d="m2.8 5.8 7.2 4.8 7.2-4.8"/><path d="M10 16.8v1.4"/></svg>') }
.menu a[data-v="rubrica"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 2.8h10a.7.7 0 0 1 .7.7v13a.7.7 0 0 1-.7.7h-10a.7.7 0 0 1-.7-.7v-13a.7.7 0 0 1 .7-.7Z"/><path d="M3.2 6.2h2M3.2 10h2M3.2 13.8h2"/><circle cx="10.5" cy="8.4" r="1.9"/><path d="M7.8 13.6a2.9 2.9 0 0 1 5.4 0"/></svg>') }
.menu a[data-v="etichette"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 4.4h6v5h-6zM11.2 4.4h6v5h-6zM2.8 11.6h6v5h-6zM11.2 11.6h6v5h-6z"/></svg>') }
.menu a[data-v="protocollo"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 2.8h8l3.6 3.6v10.8H4.2z"/><path d="M12.2 2.8v3.6h3.6"/><path d="M6.8 10h6.4M6.8 13h4.2"/></svg>') }
.menu a[data-v="registro-modifiche"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="M10 6v4l2.6 1.8"/></svg>') }
.menu a[data-v="circolari"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6.5 10 3l7 3.5v8.2a.8.8 0 0 1-.8.8H3.8a.8.8 0 0 1-.8-.8z"/><path d="m3 6.5 7 4.5 7-4.5"/></svg>') }
.menu a[data-v="modelli"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 3h11v14h-11z"/><path d="M7 6.5h6M7 9.5h6M7 12.5h3.5"/><path d="m12.5 15.5 3-3"/></svg>') }
.menu a[data-v="registro-verbali"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3.5h9.5a2 2 0 0 1 2 2v11H6a2 2 0 0 1-2-2z"/><path d="M4 14.5a2 2 0 0 1 2-2h9.5"/><path d="M7.5 6.5h5M7.5 9h3"/></svg>') }
.menu a[data-v="riconciliazione"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h9M3 10h6M3 14h5"/><path d="m11.5 13.2 2 2 3.5-4"/></svg>') }
.menu a[data-v="studio"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7" r="2.5"/><circle cx="13.5" cy="8" r="2"/><path d="M2.8 16a4.7 4.7 0 0 1 9.4 0M12 16h5.2a3.6 3.6 0 0 0-5.6-3"/></svg>') }
.menu a[data-v="archivio"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.5h14.4v3H2.8zM4 8.5v8h12v-8"/><path d="M8 11.5h4"/></svg>') }
.menu a[data-v="detrazioni"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 10 4l7 5.5V16a.8.8 0 0 1-.8.8H3.8A.8.8 0 0 1 3 16z"/><path d="m7.5 14 5-5M8 9.5h.01M12 13.5h.01"/></svg>') }
.menu a[data-v="area-condomini"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="2.8" width="9" height="14.4" rx="1.6"/><path d="M8.8 14.6h2.4"/></svg>') }
.menu a[data-v="tecnica"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12.4 3.2a3.6 3.6 0 0 0 4.4 4.9l-8.3 8.3a1.9 1.9 0 1 1-2.7-2.7l8.3-8.3a3.6 3.6 0 0 0-1.7-2.2Z"/><circle cx="5.2" cy="15.4" r=".8" fill="%23000" stroke="none"/></svg>') }
.menu a[data-v="anagrafe"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 2.8h9a.7.7 0 0 1 .7.7v13a.7.7 0 0 1-.7.7h-9a.7.7 0 0 1-.7-.7v-13a.7.7 0 0 1 .7-.7Z"/><path d="M3 6h2M3 10h2M3 14h2"/><circle cx="10" cy="8" r="1.8"/><path d="M7.4 13.6a2.8 2.8 0 0 1 5.2 0"/></svg>') }
.menu a[data-v="scheda"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5V8l7-5 7 5v8.5a.9.9 0 0 1-.9.9H3.9a.9.9 0 0 1-.9-.9Z"/><path d="m7.6 11.4 1.6 1.6 3.2-3.4"/></svg>') }
.menu a[data-v="incarichi"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2.8h8a.8.8 0 0 1 .8.8v12.8a.8.8 0 0 1-.8.8H6a.8.8 0 0 1-.8-.8V3.6a.8.8 0 0 1 .8-.8Z"/><path d="M8 6.5h4M8 9.5h4"/><path d="m8 13.4 1.5 1.5 3-3"/></svg>') }

/* ═════════════════════════════ ELENCHI LUNGHI ═════════════════════════════
   La barra che elenchi.js mette sopra una tabella lunga, la casella che
   restringe una tendina, la scelta dei documenti da stampare. */
.elenco-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3);
  margin:var(--s-3) 0 var(--s-2) }
.elenco-barra__cerca{ flex:1 1 220px; max-width:360px }
.elenco-barra__conto{ color:var(--tenue); font-size:var(--t-sm); font-variant-numeric:tabular-nums }
.elenco-barra__pagine{ display:inline-flex; gap:var(--s-1); margin-left:auto }
.tendina-filtro{ width:100%; margin:0 0 var(--s-1) }
@media screen{ .elenco-fuori-pagina{ display:none } }
.scelta-documenti{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--s-1) var(--s-4); max-height:50vh; overflow:auto; margin-top:var(--s-3);
  padding:var(--s-2); border:1px solid var(--bordo); border-radius:var(--r) }

/* ═════════════════════════════════ GUIDA ═════════════════════════════════ */
.aiuto-pagina{ float:right; margin:0 0 var(--s-3) var(--s-4); font-size:var(--t-sm); font-weight:600;
  text-decoration:none; padding:2px var(--s-3); border:1px solid var(--bordo); border-radius:999px;
  background:var(--superficie) }
.aiuto-pagina:hover{ border-color:var(--accento) }
.guida-indice{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--s-2) var(--s-5) }
.guida-indice h3{ margin:0 0 var(--s-1); font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--tenue) }
.guida-indice ul{ margin:0 0 var(--s-3); padding-left:var(--s-4) }
.guida-indice li{ margin:2px 0 }
.guida-gruppo__titolo{ margin:var(--s-6) 0 var(--s-3); font-size:var(--t-sm); text-transform:uppercase;
  letter-spacing:.06em; color:var(--tenue) }
.guida-capitolo{ max-width:78ch; scroll-margin-top:calc(var(--barra-alta) + var(--s-3)) }
.guida-capitolo h2{ margin-top:0 }
.guida-capitolo--scelto{ border-color:var(--accento) }
.guida-capitolo li{ margin:var(--s-1) 0; line-height:var(--i-larga) }
.guida-capitolo p{ line-height:var(--i-larga) }
.guida-passi > li::marker{ font-weight:700 }
.guida-percorso{ font-weight:600; white-space:nowrap }
.guida-domande dt{ font-weight:700; margin-top:var(--s-3) }
.guida-domande dd{ margin:var(--s-1) 0 0 var(--s-4) }

/* ═══════════════════════════ ZONA DEI FILE ═══════════════════════════════
   Il campo del browser — «Scegli file · Nessun file selezionato» — non si può
   vestire e non accoglie i file trascinati. Resta nascosto dentro la zona. */
.zona-file{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-1); padding:var(--s-5) var(--s-4); border:2px dashed var(--n-300); border-radius:var(--r);
  background:var(--n-50, #f7f8fa); color:var(--tenue); text-align:center; cursor:pointer;
  transition:border-color var(--transizione), background var(--transizione); min-height:110px; width:100% }
.zona-file:hover,.zona-file:focus-visible{ border-color:var(--accento); color:var(--testo) }
.zona-file--sopra{ border-color:var(--accento); background:var(--accento-tenue, #e8f0f7); color:var(--testo) }
.zona-file--piena{ border-style:solid; border-color:var(--ok) }
.zona-file__icona{ font-size:22px; line-height:1; color:var(--accento) }
.zona-file__testo{ font-size:var(--t-sm) }
.zona-file__testo u{ color:var(--accento); text-decoration-thickness:1px }
.zona-file__tipi{ font-size:var(--t-xs); letter-spacing:.04em }
.zona-file__scelti{ display:flex; flex-wrap:wrap; gap:var(--s-1); justify-content:center; margin-top:var(--s-1) }
.zona-file__nome{ font-size:var(--t-xs); background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r-sm); padding:2px 8px; color:var(--testo) }
.zona-file__nome small{ color:var(--tenue) }
/* Il campo vero resta dentro, invisibile: serve alla tastiera e ai lettori di schermo. */
.zona-file__campo{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }


/* ═══════════════════════════ RIFINITURE DELL'INTERFACCIA ═════════════════
   Revisione del 29/09/2026: campi, tendine, pulsanti e righe delle tabelle
   con un linguaggio solo. */

/* Le tendine: la freccia disegnata al posto di quella del sistema, uguale
   su tutti i browser, e il testo scelto con il peso del testo normale. */
select{ -webkit-appearance:none; appearance:none; font-weight:400; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234e5a67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px }
select[multiple]{ background-image:none; padding-right:var(--s-3) }

/* Il campo su cui si sta scrivendo si vede: bordo e alone del colore d'accento. */
/* Il valore scritto nei campi ha il peso del testo, non quello dell'etichetta
   che li contiene (ereditavano il semigrassetto). */
input,select,textarea{ font-weight:400 }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accento-chiaro);
  box-shadow:var(--anello-fuoco) }
input::placeholder,textarea::placeholder{ color:var(--n-400) }
input:disabled,select:disabled,textarea:disabled{ background:var(--n-50); color:var(--tenue); cursor:not-allowed }

/* I campi di ricerca portano la lente. */
input[type=search],input[placeholder^="Cerca"]{ padding-left:32px;
  background:var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%236b7885' stroke-width='1.6'/%3E%3Cpath d='m9.5 9.5 3 3' stroke='%236b7885' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center / 14px }

/* Pulsanti: il primario pieno, i secondari chiari con un filo d'ombra, così
   che in una riga di sei comandi l'occhio trovi subito quello principale. */
button{ box-shadow:0 1px 1px rgba(22,28,34,.04) }
button.primario{ box-shadow:0 1px 2px rgba(20,66,95,.25) }
/* Le azioni che cancellano si riconoscono: testo rosso, sfondo rosso al passaggio. */
button:is([data-az-click^="elimina"],[data-az-click^="annulla"],[data-az-click^="disattiva"],[data-az-click^="scollega"],
  [onclick^="elimina"],[onclick^="annulla"]):not(.primario){ color:var(--errore) }
button:is([data-az-click^="elimina"],[data-az-click^="annulla"],[data-az-click^="disattiva"],[data-az-click^="scollega"],
  [onclick^="elimina"],[onclick^="annulla"]):not(.primario):hover{ background:var(--errore-tenue); border-color:var(--errore) }

/* I comandi di riga: leggeri, senza bordo finché non li si indica, e in
   evidenza sulla riga su cui si sta passando. Dieci righe con «Scheda ·
   Modifica · Elimina» a piena intensità erano un muro di pulsanti. */
td button.piccolo{ background:transparent; border-color:transparent; box-shadow:none; color:var(--accento) }
td button.piccolo:hover{ background:var(--accento-tenue); border-color:transparent }
@media (hover:hover) and (min-width:641px){
  tbody tr .azioni-riga,tbody tr td > button.piccolo{ opacity:.7; transition:opacity var(--transizione) }
  tbody tr:hover .azioni-riga,tbody tr:hover td > button.piccolo,
  tbody tr .azioni-riga:focus-within,tbody tr td > button.piccolo:focus-visible{ opacity:1 }
}

/* La finestra: la ✕ in alto a destra, e i pulsanti in fondo sempre visibili
   anche quando il modulo è più lungo dello schermo. */
.modale-chiudi{ position:absolute; top:10px; right:10px; width:34px; height:34px; padding:0;
  justify-content:center; border-color:transparent; background:transparent; box-shadow:none;
  font-size:20px; color:var(--tenue); z-index:3 }
.modale-chiudi:hover{ background:var(--n-100); color:var(--testo) }
#modale-corpo > .azioni:last-child{ position:sticky; bottom:0; z-index:2;
  margin:var(--s-4) calc(var(--s-6) * -1) calc(var(--s-6) * -1); padding:var(--s-3) var(--s-6);
  background:var(--superficie); border-top:1px solid var(--bordo) }

/* Il menu «Esporta» accanto a «Stampa»: un <details>, che si apre senza codice. */
.menu-esporta{ position:relative; display:inline-block }
.menu-esporta > summary{ list-style:none; display:inline-flex; align-items:center; gap:6px; height:34px;
  padding:0 var(--s-3) 0 var(--s-4); border:1px solid var(--n-300); border-radius:var(--r-sm);
  background:var(--superficie); font-weight:550; cursor:pointer; box-shadow:0 1px 1px rgba(22,28,34,.04); user-select:none }
.menu-esporta > summary::-webkit-details-marker{ display:none }
.menu-esporta > summary::after{ content:''; width:10px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5l3-3' fill='none' stroke='%234e5a67' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat }
.menu-esporta > summary:hover{ background:var(--n-50); border-color:var(--n-400) }
.menu-esporta[open] > summary{ border-color:var(--accento-chiaro); box-shadow:var(--anello-fuoco) }
.menu-esporta__voci{ position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:220px;
  background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r); box-shadow:var(--ombra-alta);
  padding:var(--s-1); display:flex; flex-direction:column }
.menu-esporta__voci button{ justify-content:flex-start; border-color:transparent; box-shadow:none; width:100%; font-weight:500 }
.menu-esporta__voci button:hover{ background:var(--accento-tenue); border-color:transparent }
@media print{ .menu-esporta{ display:none!important } }

/* La conferma: piccola, al centro, con il verbo dell'azione sul pulsante. */
dialog.conferma{ max-width:min(92vw,460px); padding:0; border:none; border-radius:var(--r-lg); box-shadow:var(--ombra-alta) }
dialog.conferma::backdrop{ background:rgba(22,28,34,.5) }
.conferma__corpo{ display:flex; gap:var(--s-4); padding:var(--s-5) var(--s-5) var(--s-4) }
.conferma__icona{ flex:0 0 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; background:var(--accento-tenue); color:var(--accento) }
.conferma__icona--pericolo{ background:var(--errore-tenue); color:var(--errore) }
.conferma__domanda{ margin:6px 0 0; font-weight:650; font-size:var(--t-md); line-height:var(--i-stretta) }
.conferma__resto{ margin:var(--s-2) 0 0; color:var(--tenue); font-size:var(--t-sm); line-height:var(--i-normale) }
.conferma__azioni{ display:flex; justify-content:flex-end; gap:var(--s-2); padding:var(--s-3) var(--s-5);
  background:var(--n-50); border-top:1px solid var(--bordo); border-radius:0 0 var(--r-lg) var(--r-lg) }
button.pericolo{ background:var(--errore); border-color:var(--errore); color:#fff }
button.pericolo:hover{ background:#8c1c17; border-color:#8c1c17 }
/* I pulsanti raccolti in «Altre azioni» si leggono come voci di un elenco. */
.menu-altre .menu-esporta__voci button{ height:34px; white-space:nowrap }
.menu-altre .menu-esporta__voci{ min-width:260px }

/* La pagina vuota: un segno tenue sopra il messaggio, e il primo passo sotto. */
.vuoto::before{ content:''; display:block; width:40px; height:40px; margin:0 auto var(--s-3); opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='7' y='9' width='26' height='24' rx='4' fill='none' stroke='%239aa6b4' stroke-width='2'/%3E%3Cpath d='M7 16h26M13 22h14M13 27h9' stroke='%239aa6b4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/40px no-repeat }
td .vuoto::before,.documento .vuoto::before,td.vuoto::before{ display:none }
.vuoto__azione{ margin-top:var(--s-4) }

/* La sagoma di una pagina che si sta caricando. Compare dopo un attimo
   (animation-delay): se i dati arrivano prima, non si vede affatto. */
.sagoma{ opacity:0; animation:sagoma-appare .2s ease .25s forwards }
@keyframes sagoma-appare{ to{ opacity:1 } }
.sagoma__titolo,.sagoma__riga,.sagoma__comandi span,.sagoma__cella{ border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 50%,var(--n-100) 75%);
  background-size:400% 100%; animation:sagoma-luce 1.4s ease-in-out infinite }
@keyframes sagoma-luce{ from{ background-position:100% 0 } to{ background-position:0 0 } }
.sagoma__titolo{ height:28px; width:38%; margin:var(--s-2) 0 var(--s-4) }
.sagoma__riga{ height:12px; margin-bottom:var(--s-5) }
.sagoma__comandi{ display:flex; gap:var(--s-2); margin-bottom:var(--s-5) }
.sagoma__comandi span{ display:block; height:34px; width:130px }
.sagoma__tabella{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:14px 18px; padding:var(--s-4);
  border:1px solid var(--bordo); border-radius:var(--r-lg); background:var(--superficie) }
.sagoma__cella{ height:14px }
@media (prefers-reduced-motion:reduce){ .sagoma__titolo,.sagoma__riga,.sagoma__comandi span,.sagoma__cella{ animation:none } }
.menu a[data-v="importa-contabilita"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5v10M6 8.5l4 4 4-4"/><path d="M3.5 13.5v2.5a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2.5"/></svg>') }
.importa-passo{ margin-bottom:var(--s-5) }
.importa-passo h2{ display:flex; align-items:center; gap:var(--s-2); margin-top:0 }
.importa-passo h2 .numero{ display:inline-flex; width:26px; height:26px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--accento-tenue); color:var(--accento); font-size:var(--t-sm); font-weight:700 }
.importa-esito{ margin-top:var(--s-3) }

/* ═══════════════════════════════ AGENDA ═══════════════════════════════ */
.interruttore{ display:inline-flex; border:1px solid var(--n-300); border-radius:var(--r-sm); overflow:hidden }
.interruttore button{ border:0; border-radius:0; box-shadow:none; height:34px }
.interruttore button + button{ border-left:1px solid var(--n-300) }
.interruttore button.attivo{ background:var(--accento-tenue); color:var(--accento); font-weight:650 }
.agenda-barra{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3) }
.agenda-nav{ display:flex; align-items:center; gap:var(--s-2) }
.agenda-titolo{ font-size:var(--t-md); margin-left:var(--s-2); text-transform:capitalize }
.agenda{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--bordo);
  border-radius:var(--r-lg); overflow:hidden; background:var(--bordo); gap:1px }
.agenda-intest{ background:var(--n-50); padding:6px 8px; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--tenue); font-weight:650 }
.agenda-giorno{ background:var(--superficie); min-height:108px; padding:6px; display:flex; flex-direction:column; gap:3px; min-width:0 }
.agenda--settimana .agenda-giorno{ min-height:320px }
.agenda-fuori{ background:var(--n-25) }
.agenda-fuori .agenda-numero{ color:var(--n-400) }
.agenda-festa .agenda-numero{ color:var(--errore) }
.agenda-numero{ font-size:var(--t-sm); font-weight:650; color:var(--n-600) }
.agenda-oggi{ box-shadow:inset 0 0 0 2px var(--accento) }
.agenda-oggi .agenda-numero{ color:var(--accento) }
.ag-voce{ display:flex; flex-direction:column; align-items:flex-start; gap:0; height:auto; padding:3px 6px; width:100%;
  border:0; border-left:3px solid; border-radius:4px; font-size:11.5px; line-height:1.25; text-align:left; font-weight:550;
  box-shadow:none; white-space:normal; overflow:hidden }
.ag-voce .ag-titolo{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.ag-voce .ag-cond{ color:var(--tenue); font-weight:400; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.ag-voce .ag-ora{ font-family:var(--mono); font-size:10.5px; color:var(--tenue) }
.ag-scadenza{ background:var(--accento-tenue); border-color:var(--accento) }
.ag-assemblea{ background:#efe9f8; border-color:#6b4fa3 }
.ag-rata{ background:var(--ok-tenue); border-color:var(--ok) }
.ag-tecnica{ background:var(--allerta-tenue); border-color:var(--allerta) }
.ag-pratica{ background:var(--errore-tenue); border-color:var(--errore) }
.ag-fatto{ opacity:.55 } .ag-fatto .ag-titolo{ text-decoration:line-through }
.ag-seg{ border-left:3px solid; border-radius:2px }
:root[data-tema="scuro"] .ag-assemblea{ background:#2c2340 }
@media (max-width:640px){
  .agenda{ grid-template-columns:1fr }
  .agenda-intest{ display:none }
  .agenda-giorno{ min-height:0 }
  .agenda-fuori{ display:none }
}
.ag-seg.ag-scadenza{ background:var(--accento-tenue) } .ag-seg.ag-assemblea{ background:#efe9f8 }
.ag-seg.ag-rata{ background:var(--ok-tenue) } .ag-seg.ag-tecnica{ background:var(--allerta-tenue) }
.ag-seg.ag-pratica{ background:var(--errore-tenue) }

/* Giro di invio: quanto è partito. */
.giro-avanzamento{ height:8px; background:var(--neutro-tenue); border-radius:4px; overflow:hidden; margin:var(--s-2) 0 var(--s-3) }
.giro-barra{ height:100%; background:var(--accento); border-radius:4px; transition:width .4s ease }

/* Registrazione multipla: la griglia e le righe da correggere. */
.griglia-multipla input, .griglia-multipla select{ width:100%; min-width:0 }
.griglia-multipla td{ vertical-align:top }
.griglia-multipla .num-riga{ color:var(--tenue); font-variant-numeric:tabular-nums }
.griglia-multipla tr.riga-errata td{ background:var(--errore-tenue) }
.griglia-multipla .esito-riga{ min-width:12em }
dialog:has(.griglia-multipla){ max-width:min(96vw,1180px) }
.menu a[data-v="assistente"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 16.5v-6.2a4.5 4.5 0 0 1 9 0v6.2M3.5 16.5h13"/><path d="M9.2 4.4h1.6" stroke-width="2"/></svg>') }
.menu a[data-v="pratiche"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3.5" width="12" height="14" rx="1.8"/><path d="M7.5 3.5V2.6h5v.9M7 8.5l1.6 1.6L12.5 6.8M7 13.5h6"/></svg>') }

/* Lo storico di una pratica: una linea di eventi. */
.storico-pratica{ list-style:none; padding:0; margin:0 0 var(--s-4); border-left:2px solid var(--bordo); }
.storico-pratica li{ padding:var(--s-2) var(--s-3); margin-left:-1px; border-left:2px solid transparent }
.storico-pratica li.dal-condomino{ border-left-color:var(--accento); background:var(--accento-tenue); border-radius:0 var(--r-sm) var(--r-sm) 0 }

/* Primi passi di uno studio nuovo. */
.elenco-passi{ list-style:none; padding:0; margin:0 0 var(--s-3); display:grid; gap:var(--s-2) }
.elenco-passi li{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-2) 0; border-bottom:1px solid var(--bordo) }
.elenco-passi .spunta{ flex:0 0 22px; height:22px; border-radius:50%; border:2px solid var(--bordo); display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff }
.elenco-passi li.fatto .spunta{ background:var(--ok); border-color:var(--ok) }
.elenco-passi li.fatto a{ color:var(--tenue) }
.menu a[data-v="riscaldamento"]{ --glifo:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="%23000" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17.5a4 4 0 0 1-4-4c0-3 4-5 4-11 0 0 4 3.5 4 8.5a4 4 0 0 1-4 6.5z"/></svg>') }

/* Il riparto del riscaldamento scritto a mano (riscaldamento.js): una riga per
   unità, gli importi allineati a destra come usciranno nel prospetto. */
.griglia-risc input:not([type=checkbox]){ width:8.5em; text-align:right; font-variant-numeric:tabular-nums }
.griglia-risc td{ vertical-align:middle }
.griglia-risc td:has(> input:not([type=checkbox])){ text-align:right }

/* La riga appena registrata (evidenziaMovimento, app.js): si vede dove è finita. */
@keyframes riga-nuova{ from{ background:var(--accento-tenue, #fff3c4) } to{ background:transparent } }
tr.riga-nuova td{ animation:riga-nuova 4s ease-out 1; box-shadow:inset 3px 0 0 var(--accento, #c58a00) }

/* La ricerca nei dati (ricerca.js): la voce sotto la casella del menu e i risultati. */
.menu-cerca-dati{ display:block; width:calc(100% - 16px); margin:4px 8px 8px; text-align:left; font-size:var(--t-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.risultati-gruppo h2{ margin-bottom:var(--s-2) }
.risultati-elenco{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.risultato{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; text-align:left;
  height:auto; min-height:34px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; padding:10px 12px; background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r) }
.risultato:hover{ border-color:var(--accento) }
.risultato .norma{ font-weight:400 }

/* Le colonne che si ordinano con un clic (elenchi.js): il titolo lo dice al passaggio, la freccia dice il verso. */
th.ordinabile{ cursor:pointer; user-select:none }
th.ordinabile:hover,th.ordinabile:focus-visible{ color:var(--accento) }
th.ordinabile::after{ content:"↕"; margin-left:4px; opacity:.25; font-size:.9em }
th.ordinata-su::after{ content:"▲"; opacity:.8 }
th.ordinata-giu::after{ content:"▼"; opacity:.8 }
@media print{ th.ordinabile::after{ content:none } }
.filtri-elenco select{ max-width:280px }

/* ─────────────── «Chiedi ad ATRIO» (assistente.js) ───────────────
   L'assistente risponde come ATRIO scrive i suoi documenti: le risposte in
   carattere con grazie, senza fumetto, accanto all'avatar (il portone
   dell'atrio); la domanda di chi lavora è una riga compatta a destra, nel
   carattere dell'interfaccia. Il resto è sobrio: i colori e le misure del
   programma, così vale anche il tema scuro. In stampa non c'è. */

/* L'avatar: il portone ad arco, bianco sul blu. */
.assistente-avatar{ flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:var(--accento); color:var(--su-colore) }
.assistente-avatar svg{ width:20px; height:20px }
.assistente-avatar--grande{ width:44px; height:44px; border-radius:11px }
.assistente-avatar--grande svg{ width:32px; height:32px }
.assistente-avatar--pensa{ animation:assistente-pensa 1.4s ease-in-out infinite }
@keyframes assistente-pensa{ 50%{ opacity:.45 } }
.assistente-avatar--piccolo{ width:20px; height:20px; border-radius:5px }
.assistente-avatar--piccolo svg{ width:15px; height:15px }

/* «Scrivi con ATRIO» nel modulo della circolare. */
.scrivi-atrio{ padding:10px 12px; border:1px dashed var(--bordo); border-radius:var(--r); background:var(--neutro-tenue) }
.scrivi-atrio__riga{ display:flex; gap:8px; margin-top:4px }
.scrivi-atrio__riga input{ flex:1; min-width:0 }
.scrivi-atrio button{ flex:none; gap:8px; padding-left:8px }
.scrivi-atrio--campo{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; padding:0; border:0; background:none }
.scrivi-atrio--campo button{ height:30px; font-size:var(--t-sm) }
.scrivi-atrio--campo .norma.scrivi-atrio__esito{ margin:0 }
.scrivi-atrio button.in-corso .assistente-avatar{ animation:assistente-pensa 1.4s ease-in-out infinite }
.scrivi-atrio .norma{ margin:6px 0 0 }
@media (max-width:640px){ .scrivi-atrio__riga{ flex-wrap:wrap } .scrivi-atrio__riga input{ flex-basis:100% } }

/* Il pulsante che apre il pannello. */
.assistente-apri{ position:fixed; right:20px; bottom:20px; z-index:40; height:auto; padding:7px 16px 7px 7px; gap:10px;
  border-radius:var(--r-tondo); background:var(--superficie); color:var(--testo); border:1px solid var(--bordo);
  box-shadow:var(--ombra-media); font-weight:600 }
.assistente-apri:hover{ background:var(--superficie); border-color:var(--accento); color:var(--accento) }
.assistente-apri .assistente-avatar{ width:30px; height:30px; border-radius:var(--r-tondo) }
body.assistente-aperto .assistente-apri{ display:none }

/* Il pannello. */
.assistente{ position:fixed; right:16px; bottom:16px; top:calc(var(--barra-alta) + 14px); z-index:45;
  width:min(440px, calc(100vw - 32px)); display:flex; flex-direction:column; overflow:hidden;
  background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r-lg); box-shadow:var(--ombra-alta);
  transition:width var(--transizione) }
.assistente--largo{ width:min(720px, calc(100vw - 32px)) }
.assistente[hidden]{ display:none }
.assistente:not([hidden]){ animation:assistente-entra .18s ease-out }
@keyframes assistente-entra{ from{ opacity:0; transform:translateY(8px) } }

.assistente-testa{ display:grid; grid-template-columns:auto 1fr auto; align-items:start; column-gap:10px; padding:12px 12px 0 14px }
.assistente-titolo h2{ margin:0; font-size:var(--t-md); line-height:var(--i-stretta) }
.assistente-contesto{ margin:2px 0 0; font-size:var(--t-xs); color:var(--tenue); line-height:1.35; display:flex; flex-wrap:wrap; gap:0 6px }
.assistente-contesto strong{ color:var(--n-600); font-weight:600 }
.assistente-comandi{ display:flex; gap:2px }
.assistente-comandi button{ width:32px; height:32px; padding:0; justify-content:center; border:0; background:transparent; color:var(--tenue);
  border-radius:var(--r-sm) }
.assistente-comandi button:hover{ background:var(--neutro-tenue); color:var(--testo) }
.assistente-comandi svg{ width:18px; height:18px }

/* Il credito: una linea sottile sotto la testa, con quanto resta. */
.assistente-credito{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:10px; padding-bottom:10px;
  border-bottom:1px solid var(--bordo); font-size:var(--t-xs); color:var(--tenue); font-variant-numeric:tabular-nums }
.assistente-credito-barra{ flex:0 0 72px; height:4px; border-radius:2px; background:var(--neutro-tenue); overflow:hidden }
.assistente-credito-barra span{ display:block; height:100%; background:var(--accento); border-radius:2px }
.assistente-credito--basso .assistente-credito-barra span{ background:var(--allerta) }
.assistente-credito--basso{ color:var(--allerta) }

.assistente-avviso{ margin:10px 14px 0; padding:10px 12px; border-radius:var(--r); background:var(--allerta-tenue);
  font-size:var(--t-sm); line-height:1.45; color:var(--testo) }
.assistente-avviso[hidden]{ display:none }
.assistente-avviso p{ margin:0 0 8px }
.assistente-avviso--finito{ background:var(--errore-tenue) }

/* La conversazione. */
.assistente-messaggi{ flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth }
.assistente-msg{ margin:0 }
.assistente-riga-utente{ align-self:flex-end; display:flex; align-items:flex-start; gap:10px; max-width:92% }
.assistente-avatar-utente{ flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-tondo);
  background:var(--n-200); color:var(--n-700); font-size:11px; font-weight:700; letter-spacing:.02em; margin-top:4px }
.assistente-msg--utente{ min-width:0; padding:8px 12px; border-radius:var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg);
  background:var(--accento-tenue); color:var(--testo); font-size:var(--t-base); line-height:var(--i-normale); white-space:pre-wrap; overflow-wrap:anywhere }
.assistente-msg--assistente{ display:flex; gap:10px; align-items:flex-start }
.assistente-colonna{ flex:1; min-width:0 }
.assistente-testo{ font-family:var(--font-doc); font-size:15.5px; line-height:var(--i-larga); color:var(--testo); overflow-wrap:anywhere }
.assistente-testo p{ margin:0 0 8px } .assistente-testo > :last-child{ margin-bottom:0 }
.assistente-testo ul,.assistente-testo ol{ margin:2px 0 10px; padding-left:20px }
.assistente-testo li{ margin:2px 0 }
.assistente-testo li::marker{ color:var(--accento) }
.assistente-testo strong{ font-weight:700 }
.assistente-testo code{ font-family:var(--mono); font-size:.86em; background:var(--neutro-tenue); padding:1px 4px; border-radius:4px }
.assistente-sottotitolo{ font-weight:700 }
/* Il cursore mentre scrive. */
.in-scrittura .assistente-testo > :last-child::after{ content:""; display:inline-block; width:7px; height:1em; margin-left:2px;
  vertical-align:-2px; background:var(--accento); animation:assistente-cursore 1s steps(2) infinite }
@keyframes assistente-cursore{ 50%{ opacity:0 } }
.assistente-lavoro{ margin:3px 0 0; font-size:var(--t-sm); color:var(--tenue); font-style:italic }
.assistente-lavoro::after{ content:"…"; }
.assistente-errore{ font-family:var(--font-ui); font-size:var(--t-sm); color:var(--errore); margin:6px 0 0 }
.assistente-tabella-scorri{ overflow-x:auto; margin:4px 0 10px }
.assistente-tabella{ border-collapse:collapse; font-family:var(--font-ui); font-size:var(--t-sm); font-variant-numeric:tabular-nums }
.assistente-tabella th,.assistente-tabella td{ border-bottom:1px solid var(--bordo); padding:4px 10px 4px 0; text-align:left; white-space:nowrap }
.assistente-tabella th{ color:var(--tenue); font-weight:600 }

/* Sotto ogni risposta: copia, utile, non utile, e quanto è costata. */
.assistente-azioni{ display:flex; align-items:center; gap:2px; margin-top:6px }
.assistente-azioni button{ width:28px; height:28px; padding:0; justify-content:center; border:0; background:transparent; color:var(--tenue); border-radius:var(--r-sm) }
.assistente-azioni button:hover{ background:var(--neutro-tenue); color:var(--testo) }
.assistente-azioni button.scelta{ color:var(--accento); background:var(--accento-tenue) }
.assistente-azioni svg{ width:16px; height:16px }
.assistente-consumo{ margin-left:8px; font-size:var(--t-xs); color:var(--tenue); font-variant-numeric:tabular-nums }

/* Come proseguire: le pagine nominate e le domande di seguito. */
.assistente-proposte{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.assistente-proposte button{ height:auto; min-height:30px; padding:5px 11px; line-height:1.3; white-space:normal; text-align:left;
  border-radius:var(--r-tondo); font-weight:500; font-size:var(--t-sm); background:var(--superficie) }
.assistente-apri-pagina{ border-color:var(--accento); color:var(--accento) }
.assistente-apri-pagina:hover{ background:var(--accento-tenue) }

/* Il pannello vuoto: un saluto e da dove cominciare. */
.assistente-inizio{ margin:auto 0; padding:8px 4px 16px }
.assistente-saluto{ margin:14px 0 4px; font-family:var(--font-doc); font-size:var(--t-lg); line-height:var(--i-stretta) }
.assistente-sotto{ margin:0 0 16px; color:var(--tenue); font-size:var(--t-sm); line-height:var(--i-normale) }
.assistente-partenze{ display:flex; flex-direction:column; gap:6px }
.assistente-partenze button{ height:auto; padding:9px 12px; justify-content:flex-start; text-align:left; white-space:normal;
  line-height:1.35; font-weight:500; border-radius:var(--r) }
.assistente-partenze button:hover{ border-color:var(--accento); color:var(--accento) }

/* La casella: un riquadro solo, con il testo e il pulsante dentro, allineati in basso. */
.assistente-modulo{ padding:10px 14px 12px; border-top:1px solid var(--bordo) }
.assistente-scrivi{ display:flex; align-items:flex-end; gap:8px; padding:6px 6px 6px 12px; border:1px solid var(--n-300);
  border-radius:var(--r-lg); background:var(--superficie); transition:border-color var(--transizione), box-shadow var(--transizione) }
.assistente-scrivi:focus-within{ border-color:var(--fuoco); box-shadow:var(--anello-fuoco) }
.assistente-scrivi textarea{ flex:1; min-height:24px; max-height:140px; margin:0; padding:5px 0; border:0; outline:0; resize:none;
  background:transparent; color:var(--testo); font:inherit; font-size:var(--t-base); line-height:21px; box-shadow:none }
.assistente-scrivi textarea:focus{ box-shadow:none; outline:0 }
.assistente-scrivi textarea::placeholder{ color:var(--n-400) }
.assistente-invia{ flex:none; width:32px; height:32px; padding:0; justify-content:center; border-radius:var(--r-tondo);
  border:0; background:var(--accento); color:var(--su-colore) }
.assistente-invia:hover{ background:var(--accento-scuro) }
.assistente-invia:disabled{ background:var(--n-200); color:var(--n-400); cursor:default }
.assistente-invia svg{ width:18px; height:18px }
.assistente-invia--ferma{ background:var(--testo) }
.assistente-piede{ display:flex; justify-content:space-between; gap:8px; margin:6px 2px 0; font-size:var(--t-xs); color:var(--tenue) }
.assistente-nascosto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* Allargare ha senso solo dove c'è spazio; sul telefono il pannello occupa lo schermo. */
@media (max-width:900px){ .assistente-solo-largo{ display:none!important } .assistente--largo{ width:min(440px, calc(100vw - 32px)) } }
@media (max-width:640px){
  .assistente{ inset:0; width:100%; border-radius:0; border:0 }
  .assistente-apri{ right:12px; bottom:12px; padding:5px }
  .assistente-apri span:not(.assistente-avatar){ display:none }
  .assistente-piede span:first-child{ display:none }
}
/* A tutta pagina (voce del menu): la conversazione al centro, a destra che cos'è e il credito. */
#vista.vista-assistente{ padding:0; overflow:hidden }
/* Qui la colonna a destra spiega già tutto: il richiamo alla guida, flottante, restringerebbe la pagina. */
#vista.vista-assistente > .aiuto-pagina{ display:none }
.assistente-pagina{ display:grid; grid-template-columns:minmax(0,1fr) 300px; height:calc(100vh - var(--barra-alta)); }
.assistente-pagina-chat{ min-width:0; display:flex }
.assistente--pagina{ position:static; inset:auto; width:100%; flex:1; border:0; border-radius:0; box-shadow:none; animation:none }
.assistente--pagina .assistente-solo-pannello{ display:none!important }
.assistente:not(.assistente--pagina) .assistente-solo-pagina{ display:none!important }
.assistente-comandi button[aria-pressed="true"]{ color:var(--accento); background:var(--accento-tenue) }
/* La guida a lato nascosta: la conversazione prende tutto lo spazio. */
.assistente-pagina--senza-info{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important }
.assistente-pagina--senza-info .assistente-pagina-info{ display:none }
.assistente--pagina .assistente-messaggi,.assistente--pagina .assistente-modulo,.assistente--pagina .assistente-avviso{
  width:100%; max-width:760px; margin-left:auto; margin-right:auto; box-sizing:border-box }
.assistente--pagina .assistente-modulo{ border-top:0; padding-bottom:20px }
.assistente--pagina .assistente-testa{ padding:16px 24px 0; width:100%; max-width:808px; margin:0 auto; box-sizing:border-box }
.assistente--pagina .assistente-titolo h2{ font-size:var(--t-lg) }
.assistente--pagina .assistente-messaggi{ padding:24px 24px 8px }
.assistente--pagina .assistente-testo{ font-size:16.5px }
.assistente-pagina-info{ border-left:1px solid var(--bordo); background:var(--n-25); overflow-y:auto; padding:16px 18px 24px;
  font-size:var(--t-sm); line-height:var(--i-normale) }
.assistente-info-blocco{ border-bottom:1px solid var(--bordo); padding:10px 0 }
.assistente-info-blocco:last-child{ border-bottom:0 }
.assistente-info-blocco summary{ cursor:pointer; font-weight:600; font-size:var(--t-base); padding:2px 0; list-style-position:outside }
.assistente-info-blocco p{ margin:8px 0 }
.assistente-info-tema{ margin:12px 0 4px!important; color:var(--tenue); font-weight:600 }
.assistente-info-esempi{ display:flex; flex-direction:column; gap:4px }
.assistente-info-esempi button{ height:auto; justify-content:flex-start; text-align:left; white-space:normal; line-height:1.35;
  padding:6px 10px; font-weight:500; font-size:var(--t-sm); background:var(--superficie) }
.assistente-info-esempi button:hover{ border-color:var(--accento); color:var(--accento) }
.assistente-credito-barra--larga{ display:block; width:100%; height:6px; margin:6px 0 }
@media (max-width:1200px){
  .assistente-pagina{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .assistente-pagina-info{ order:-1; border-left:0; border-bottom:1px solid var(--bordo); max-height:34vh; padding:6px 18px }
  .assistente-info-blocco{ padding:6px 0 }
}
@media (prefers-reduced-motion:reduce){
  .assistente:not([hidden]),.assistente-avatar--pensa,.in-scrittura .assistente-testo > :last-child::after{ animation:none }
  .assistente-messaggi{ scroll-behavior:auto }
}
@media print{ .assistente,.assistente-apri{ display:none!important } }
/* Il consumo del piano dell'assistente (studio.js). */
.barra-credito{ height:8px; background:var(--neutro-tenue, #eef1f4); border-radius:4px; overflow:hidden; margin:6px 0 10px; max-width:420px }
.barra-credito span{ display:block; height:100%; background:var(--accento) }
.dati-bonifico{ margin:8px 0; border-collapse:collapse }
.dati-bonifico td{ padding:3px 10px 3px 0; vertical-align:middle }

/* Dopo «Non utile»: la proposta di mandare domanda e risposta al gestore (assistente.js). */
.assistente-segnala{ margin-top:8px; padding:10px 12px; border:1px solid var(--bordo); border-radius:var(--r); background:var(--n-25);
  font-family:var(--font-ui); font-size:var(--t-sm); line-height:var(--i-normale) }
.assistente-segnala p{ margin:0 0 8px }
.assistente-segnala textarea{ display:block; width:100%; box-sizing:border-box; height:auto; min-height:36px; max-height:140px; padding:8px 10px;
  line-height:18px; resize:none; overflow-y:auto; font:inherit; font-size:var(--t-sm); margin-bottom:6px }
.assistente-segnala-avviso{ color:var(--allerta); font-size:var(--t-xs) }
.assistente-segnala-comandi{ display:flex; gap:6px; flex-wrap:wrap }
.assistente-segnala-fatto{ margin:6px 0 0; font-family:var(--font-ui); font-size:var(--t-xs); color:var(--ok) }
/* Le segnalazioni dell'assistente nella console (gestione.js). */
.segnalazione-g{ border:1px solid var(--bordo); border-radius:var(--r); padding:10px 12px; margin:8px 0 }
.segnalazione-g p{ margin:0 0 6px }
.segnalazione-g--vista{ opacity:.7 }
.segnalazione-g-commento{ font-style:italic }
.segnalazione-g-risposta{ font-family:var(--font-doc); background:var(--n-25); border-left:2px solid var(--accento); padding:8px 10px; margin:6px 0; max-height:320px; overflow:auto }
/* L'avvertenza sotto la casella dell'assistente: sempre visibile, discreta. */
.assistente-avvertenza{ margin:6px 0 0; text-align:center; font-size:var(--t-xs); color:var(--tenue) }
/* Allegati e proposte nella chat (assistente.js). */
.assistente-graffetta{ flex:none; align-self:flex-end; width:32px; height:32px; padding:0; justify-content:center; border:0;
  background:transparent; color:var(--tenue); border-radius:var(--r-tondo); margin-left:-6px }
.assistente-graffetta:hover{ background:var(--neutro-tenue); color:var(--testo) }
.assistente-graffetta svg{ width:18px; height:18px }
.assistente-allegati{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.assistente-allegati[hidden]{ display:none }
.assistente-chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 6px 4px 8px; border:1px solid var(--bordo);
  border-radius:var(--r-tondo); background:var(--superficie); font-size:var(--t-xs); color:var(--testo) }
.assistente-chip svg{ width:14px; height:14px; flex:none; color:var(--tenue) }
.assistente-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.assistente-chip button{ width:20px; height:20px; padding:0; justify-content:center; border:0; background:transparent; color:var(--tenue); border-radius:var(--r-tondo) }
.assistente-chip button:hover{ background:var(--neutro-tenue) }
.assistente-chip--carico{ color:var(--tenue) }
.assistente-chip--errore{ border-color:var(--errore); color:var(--errore) }
.assistente-allegati-msg{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px }
.assistente-allegati-msg .assistente-chip{ background:transparent; padding:2px 8px }
.assistente--trascina{ outline:2px dashed var(--accento); outline-offset:-6px }
.assistente-proposta{ margin:10px 0 2px; padding:12px 14px; border:1px solid var(--bordo); border-left:3px solid var(--accento);
  border-radius:var(--r); background:var(--superficie); font-family:var(--font-ui); font-size:var(--t-sm) }
.assistente-proposta-titolo{ margin:0 0 8px; font-weight:700 }
.assistente-proposta dl{ display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0 0 10px }
.assistente-proposta dt{ color:var(--tenue) }
.assistente-proposta dd{ margin:0; overflow-wrap:anywhere }
.assistente-proposta-avviso{ margin:0 0 8px; color:var(--allerta); font-size:var(--t-xs) }

/* Conversazioni recenti, nel posto dei messaggi. */
.assistente-recenti{ display:flex; flex-direction:column; gap:10px }
.assistente-recenti-testa{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.assistente-recenti h3{ margin:0; font-size:var(--t-md) }
.assistente-recenti ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px }
.assistente-recenti li{ display:flex; align-items:stretch; gap:2px; border:1px solid var(--bordo); border-radius:var(--r); background:var(--superficie) }
.assistente-recenti li.attuale{ border-color:var(--accento) }
.assistente-recenti-voce{ flex:1; min-width:0; height:auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:8px 10px; border:0; background:transparent; text-align:left; font-weight:500 }
.assistente-recenti-voce span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.assistente-recenti-voce:hover{ background:var(--neutro-tenue) }
.assistente-recenti-togli{ flex:none; width:34px; height:auto; padding:0; justify-content:center; border:0; background:transparent; color:var(--tenue) }
.assistente-recenti-togli:hover{ color:var(--testo); background:var(--neutro-tenue) }
.assistente-recenti-togli svg{ width:14px; height:14px }

/* «Chiedi ad ATRIO» sopra un testo selezionato nella pagina. */
.assistente-selezione{ position:absolute; z-index:60; height:30px; gap:6px; padding:0 10px 0 5px; font-size:var(--t-sm);
  border-radius:var(--r-tondo); box-shadow:0 4px 14px rgba(15,35,60,.18) }
.assistente-selezione[hidden]{ display:none }

/* Il microfono: acceso mentre ascolta. */
#assistente-microfono.in-ascolto, .scrivi-atrio__detta.in-ascolto{ color:#fff; background:var(--errore); border-color:transparent }
#assistente-microfono{ margin-left:0 }
#assistente-microfono.in-ascolto svg, .scrivi-atrio__detta.in-ascolto svg{ animation:assistente-pensa 1.2s ease-in-out infinite }
.scrivi-atrio__detta svg{ width:16px; height:16px }
@media (prefers-reduced-motion:reduce){ #assistente-microfono.in-ascolto svg, .scrivi-atrio__detta.in-ascolto svg{ animation:none } }

/* Le schede nominate nella risposta: si aprono con un clic. */
.assistente-collegamenti{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px }
.assistente-collega{ height:auto; min-height:28px; gap:6px; padding:3px 10px 3px 8px; font-size:var(--t-sm); font-weight:500;
  border-radius:var(--r-tondo); background:var(--accento-tenue); border-color:transparent; color:var(--accento) }
.assistente-collega:hover{ border-color:var(--accento) }
.assistente-collega svg{ width:14px; height:14px; flex:none }
/* Le prove dell'assistente nella console. */
.prova-g{ border:1px solid var(--bordo); border-radius:var(--r); padding:6px 10px; margin:6px 0 }
.prova-g summary{ cursor:pointer }
.prova-g--ko{ border-color:var(--errore) }
/* Più azioni sulla stessa riga di una tabella larga: una sotto l'altra, così la tabella non scorre di lato. */
.azioni-riga.azioni-colonna{ display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:max-content }
.azioni-riga.azioni-colonna button{ justify-content:center }
/* I pulsanti sotto un modulo o sotto una griglia di riquadri: staccati, non attaccati ai campi. */
.modulo + .azioni, .griglia + .azioni, .modulo + .norma + .azioni{ margin-top:var(--s-4) }
/* Le caselle da spuntare non ereditano l'altezza dei campi di testo. */
input[type=checkbox], input[type=radio]{ height:auto; min-height:0 }
/* Una casella da spuntare sotto la sua etichetta: della sua misura, a sinistra, non stirata sulla larghezza del campo. */
/* Sotto l'etichetta, la casella sta a metà dell'altezza di un campo (34 px, 44 sul telefono): in riga con gli altri campi. */
label.campo:not(.campo--spunta) > input[type=checkbox], label.campo:not(.campo--spunta) > input[type=radio]{ align-self:flex-start; width:auto; margin:10.5px 0 }
@media (max-width:640px){ label.campo:not(.campo--spunta) > input[type=checkbox], label.campo:not(.campo--spunta) > input[type=radio]{ margin:15.5px 0 } }
/* Con l'etichetta accanto, la casella sta a metà della prima riga di testo, anche quando il testo va a capo. */
label.campo--spunta{ align-items:flex-start }
label.campo--spunta > input[type=checkbox], label.campo--spunta > input[type=radio]{ align-self:flex-start; flex:none;
  font-size:inherit; line-height:inherit; margin-top:calc((1lh - 13px) / 2) } /* 1lh è la riga dell'etichetta: sul telefono i campi hanno un carattere più grande */
/* In un modulo a griglia, i campi di una riga stanno alla stessa altezza anche se un'etichetta va a capo:
   le etichette si allineano in basso, sopra il proprio campo. */
.modulo > label.campo:not(.campo--spunta){ justify-content:flex-end }
/* Il contenitore aggiunto alle celle scritte a mano (ui.js, avvolgiCelle) conta solo sul telefono: sul computer è trasparente. */
.cella--auto{ display:contents }

/* La fascia dell'ambiente di prova (ui.js, ATRIO_AMBIENTE): sempre in vista, sopra a tutto, non in stampa. */
.fascia-ambiente{ position:sticky; top:0; z-index:1000; padding:6px var(--s-4); text-align:center;
  background:#b45309; color:#fff; font-size:var(--t-sm); font-weight:650; letter-spacing:.01em }
@media print{ .fascia-ambiente{ display:none } }