/* L'agenda di Esteta — si guarda da un metro di distanza, in piedi, al banco.
   Perciò: caratteri grandi, contrasto alto, e il nome della cliente più grosso
   di tutto il resto. Chi sta al telefono deve leggerlo senza avvicinarsi. */

:root {
  --carta:      #fbfaf8;
  --inchiostro: #24201d;
  --tenue:      #7a726b;
  --bordo:      #e3ded8;
  --serranda:   #efebe5;
  --oro:        #b08d4f;
  --allarme:    #c0392b;
  /* ⭐ Le due qui sotto erano USATE e mai dichiarate: il ripiego faceva la cosa
     giusta per caso, e il giorno che qualcuno avesse cambiato il tema sarebbero
     rimaste indietro. Le ha trovate il banco il 29/09, insieme a una terza —
     `--tinta-chiara` — che invece faceva la cosa SBAGLIATA in silenzio. */
  --allarmesoft: #f9e7e5;
  --linea2:      #d8d2ca;
  --larghezza-ore: 62px;
  --gap: 6px;
  /* ⚠️ Queste due le SCRIVE la pagina, non il foglio: `--n` è quante colonne ha
     l'agenda oggi e `--tinta` è il colore della cabina di quel blocco. Stanno
     qui col loro valore di ripiego perché una variabile usata e mai dichiarata
     è un difetto — e perché se un giorno la pagina smettesse di scriverle,
     l'agenda avrebbe sei colonne grigie invece di sparire. */
  --n: 6;
  --tinta: var(--oro);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 16px/1.4 "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sottile { color: var(--tenue); font-weight: 400; font-size: .82em; }

/* ------------------------------------------------------------------ testa */
.testa {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bordo);
  background: #fff;
  position: sticky; top: 0; z-index: 30;
}
.marchio strong {
  font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--oro);
}
.marchio .sottile { display: block; letter-spacing: .12em; font-size: 11px; }

/* ⛔ `flex-wrap: wrap`, e il motivo è misurato: aggiungendo «le clienti»
   accanto agli altri tasti, la riga dell'intestazione dell'agenda è uscita
   dallo schermo del telefono di 78 px e si è trascinata dietro tutta la
   pagina. Una barra di comandi che non sa andare a capo funziona finché non
   le si aggiunge un comando — cioè finché il programma non cresce. */
.giorni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 auto; }
.giorni h1 {
  margin: 0; font-size: 21px; font-weight: 600; letter-spacing: .01em;
  min-width: 15ch; text-align: center;
  /* ⚠️ sul telefono 15ch è più largo dello schermo insieme ai tasti */
  max-width: 100%;
}
.oggi {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  background: var(--oro); color: #fff; padding: 2px 7px; border-radius: 99px;
  vertical-align: 3px; margin-left: 6px;
}
/* ⛔ `white-space: nowrap` e sta QUI, sul bottone, non sul caso singolo.
   Il 29/09 «Vai alla cassa €» andava a capo su OGNI parola e l'ha riparato una
   riga dedicata a quel bottone: chiudere il caso non chiudeva la specie. Il
   giorno dopo il banco della geometria ha trovato «← le impostazioni» spezzato
   in due sul telefono — 125 px di scatola per un testo che ne vuole 136 — e
   «+ prenota» pure. Un'etichetta di bottone non va a capo: o ci sta, o la
   scatola si allarga. */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--bordo); background: #fff;
  color: var(--inchiostro); text-decoration: none; font-size: 22px; line-height: 1;
  white-space: nowrap;
}
.bottone:hover { background: var(--serranda); }
.bottone.testo { width: auto; padding: 0 12px; font-size: 14px; flex: 0 0 auto; }

.conti { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 13px; }
.conti strong { font-size: 17px; }

/* --------------------------------------------------------------- cartelli */
.cartello {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px;
  border-left: 4px solid var(--oro); background: #fff8ea; font-size: 14px;
}
.cartello.chiuso { border-left-color: var(--tenue); background: var(--serranda); }
.cartello.avviso { border-left-color: var(--allarme); background: #fdf0ee; }

/* -------------------------------------------------------------- tabellone */
/* ⚠️ `padding-top` sul corpo, non sul tabellone: la prima etichetta dell'ora sta
   mezza riga PIU' IN ALTO del suo minuto (e' centrata sulla linea), quindi alle
   09:00 finiva sotto l'intestazione appiccicata. Misurato guardando la fotografia. */
.tabellone { padding: 14px 20px 26px; }
.corpo { margin-top: 14px; }   /* spazio vero: il `padding + margine negativo` si annullava */

/* ⚠️ intestazioni e colonne DEVONO avere la stessa geometria, o i titoli scivolano
   di lato rispetto alle cabine — e al banco nessuno se ne accorge subito, legge
   solo l'appuntamento nella colonna sbagliata. Percio' la stessa struttura in due
   posti: flex con la colonna delle ore fissa, poi la griglia delle cabine. */
.intestazioni, .corpo { display: flex; gap: var(--gap); }
.angolo { width: var(--larghezza-ore); flex: 0 0 var(--larghezza-ore); }
.titoli, .colonne {
  display: grid; flex: 1;
  grid-template-columns: repeat(var(--n, 6), minmax(150px, 1fr));
  gap: var(--gap);
}

.intestazioni { position: sticky; top: 67px; z-index: 20; background: var(--carta); padding-bottom: 6px; }
.titolo-colonna {
  padding: 8px 10px; border-radius: 9px 9px 0 0;
  background: #fff; border: 1px solid var(--bordo); border-bottom: 3px solid var(--tinta, var(--oro));
  font-weight: 600; font-size: 14px; line-height: 1.2;
}
.titolo-colonna .sottile { display: block; font-size: 10.5px; }

.corpo { position: relative; }
.ore { position: relative; width: var(--larghezza-ore); flex: 0 0 var(--larghezza-ore); }
.ora { position: absolute; left: 0; right: 0; }
.ora span {
  position: absolute; top: -.7em; right: 10px;
  font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums;
}
.ora::after {
  content: ""; position: absolute; left: var(--larghezza-ore); width: 100vw;
  border-top: 1px solid var(--bordo);
}

.colonne { position: relative; }
.colonna {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordo); border-top: 0;
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

.serranda {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg,
    var(--serranda) 0 6px, #e7e2db 6px 12px);
}
.serranda span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
}

/* ---------------------------------------------------------------- blocchi */
.blocco {
  position: absolute; left: 4px; right: 4px;
  border-radius: 8px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--tinta);
  border-left: 5px solid var(--tinta);
  padding: 5px 8px 4px;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  /* ⭐ Dal 29/09 il blocco E' un collegamento: si tocca e si apre la sua scheda.
     Quindi va spento tutto cio' che un browser fa di suo ai collegamenti — il
     sottolineato e il blu — o l'agenda diventerebbe illeggibile. */
  display: block; text-decoration: none; color: inherit;
}
.blocco:hover { box-shadow: 0 2px 6px rgba(0,0,0,.14); }
/* ⚠️ Il contorno di chi si muove con la tastiera NON si toglie: e' l'unico modo
   che ha di sapere dove si trova. */
.blocco:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.blocco .quando { font-size: 11.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.blocco .chi { font-weight: 650; font-size: 15px; line-height: 1.15; margin: 1px 0 1px; }
.blocco .cosa { line-height: 1.2; }
.blocco .con { font-size: 12px; color: var(--tenue); margin-top: 1px; }
/* ⛔ Lo stato sta NEL FLUSSO, non appiccicato in alto a destra. Misurato il
   29/09 guardando una fotografia del telefono: con `position: absolute` in una
   colonna stretta l'etichetta finiva SOPRA l'orario — «09:30–1̶0̶:̶3̶0̶CONCLUSA»,
   illeggibile, e proprio dove l'agenda si guarda davvero. Nessuna delle prove
   verdi la vedeva: una posizione assoluta non si sovrappone finche' c'e' spazio,
   e lo spazio c'e' sempre su uno schermo largo.
   ⭐ Adesso orario e stato stanno sulla stessa riga e si spartiscono la
   larghezza: se non ci stanno, lo stato si accorcia — non si sovrappone. */
.blocco .quando {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
}
.blocco .stato {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta); font-weight: 600;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⭐ I tre formati. La soglia la decide motore/agenda.py, in MINUTI: qui si decide
   solo come si vede. Nessun blocco scende sotto i 20 px, o la striscia di colore
   non si distingue nemmeno. Il `title=` porta sempre tutto: niente si perde. */
.blocco { min-height: 20px; }
.blocco.fmt-medio { padding: 3px 7px 3px; font-size: 12.5px; }
.blocco.fmt-medio .quando { display: flex; justify-content: space-between; gap: 6px; }
.blocco.fmt-medio .stato { font-size: 9.5px; }
.blocco.fmt-medio .chi { margin: 0; font-size: 13px; display: flex; gap: 5px; align-items: baseline; }
.blocco.fmt-medio .chi strong { font-weight: 650; }
.blocco.fmt-medio .cosa {
  color: var(--tenue); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.blocco.fmt-minimo { padding: 0 6px; display: flex; align-items: center; }
.riga-sola {
  display: flex; align-items: baseline; gap: 5px; width: 100%;
  white-space: nowrap; overflow: hidden; font-size: 12px; line-height: 1.1;
}
.riga-sola .quando { font-size: 11px; flex: 0 0 auto; }
/* ⛔ `flex: 0 0 auto` voleva dire «non restringerti mai»: il nome della cliente
   teneva la sua larghezza, la riga sfondava la scatola e il browser la TAGLIAVA
   di netto — «Innocenti Rit», senza nemmeno i tre puntini che avvisano che manca
   qualcosa. Misurato sul telefono il 29/09: 115 px di testo in una scatola da
   100. Adesso si restringe e mette i puntini, che e' la differenza fra accorciare
   e tagliare via. */
.riga-sola strong {
  font-weight: 650; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.riga-sola .cosa {
  color: var(--tenue); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.blocco .allerta { color: var(--allarme); font-weight: 700; }
/* il riassetto: la cabina è ancora occupata, ma non c'è nessuna cliente dentro */
.blocco .riassetto {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(135deg,
    rgba(0,0,0,.045) 0 4px, transparent 4px 8px);
  border-top: 1px dashed var(--bordo);
}
.blocco.stato-conclusa { opacity: .72; }
.blocco.stato-da_confermare { border-style: dashed; }

/* ----------------------------------------------------------------- adesso */
.adesso { position: absolute; left: 0; right: 0; z-index: 15; pointer-events: none; }
.adesso::after {
  content: ""; position: absolute; left: var(--larghezza-ore); right: 0;
  border-top: 2px solid var(--allarme);
}
.adesso span {
  position: absolute; top: -.75em; left: 6px;
  background: var(--allarme); color: #fff; font-size: 11px;
  padding: 1px 5px; border-radius: 4px; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ fuori */
.fuori { margin: 20px; padding: 14px 18px; border: 1px solid var(--allarme); border-radius: 10px; background: #fdf0ee; }
.fuori h2 { margin: 0 0 4px; font-size: 16px; color: var(--allarme); }
.fuori p { margin: 0 0 8px; font-size: 13.5px; color: var(--tenue); }
.fuori ul { margin: 0; padding-left: 18px; font-size: 14px; }
.fuori em { color: var(--allarme); font-style: normal; font-size: .88em; }

.piede {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 20px 22px; font-size: 12.5px; color: var(--tenue);
  border-top: 1px solid var(--bordo); margin-top: 8px;
}

/* ⛔ IL TABELLONE SCORRE SEMPRE, non solo sotto i 760 px. Misurato il 29/09 dal
   banco della geometria: a 1280 px — il computer del banco — l'agenda sporgeva di
   82 px e a scorrere era LA PAGINA INTERA, non la griglia. Sei cabine da almeno
   150 px piu' la colonna delle ore non ci stanno, e non e' un difetto: e' quanto
   e' largo il centro. Ma a scorrere deve essere il tabellone, cosi' l'intestazione
   con la data e i tasti restano dove sono. */
.tabellone { overflow-x: auto; }

@media (max-width: 760px) {
  .testa { flex-wrap: wrap; gap: 10px; }
  .giorni { margin: 0; order: 3; width: 100%; justify-content: space-between; }
  .intestazioni, .colonne { grid-template-columns: repeat(var(--n, 6), minmax(128px, 1fr)); }
}

/* ------------------------------------------------------------- la soglia
   Le due pagine prima di entrare: accesso e cambio della parola d'ordine.
   Stanno in mezzo allo schermo e non hanno navigazione — da qui non si va da
   nessuna parte finché non si entra, ed è giusto che si veda. */
body.soglia {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background: linear-gradient(160deg, #fbfaf8 0%, #f3efe8 100%);
}
.riquadro {
  width: 100%; max-width: 420px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 16px;
  padding: 30px 30px 24px;
  box-shadow: 0 10px 34px rgba(36,32,29,.07);
}
.marchio.grande { text-align: center; margin-bottom: 22px; }
.marchio.grande strong { font-size: 27px; }
.riquadro h1 { font-size: 19px; font-weight: 600; margin: 0 0 16px; }
.riquadro .cartello { margin: 0 0 16px; }
.cartello.fatto { border-left-color: #417505; background: #f1f7ea; }

.riquadro label {
  display: block; margin: 14px 0 5px;
  font-size: 13px; font-weight: 600; color: var(--tenue);
}
.riquadro input[type="email"], .riquadro input[type="password"] {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--bordo); border-radius: 10px;
  font: inherit; font-size: 16px;      /* 16px: sotto, il telefono ingrandisce da solo */
  background: #fdfcfb; color: var(--inchiostro);
}
.riquadro input:focus {
  outline: 2px solid var(--oro); outline-offset: 1px;
  border-color: var(--oro); background: #fff;
}
.riquadro button {
  width: 100%; margin-top: 20px; padding: 12px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--oro); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .02em;
}
.riquadro button:hover { background: #9b7a41; }
.aiuto {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--bordo);
  font-size: 12.5px; line-height: 1.5; color: var(--tenue);
}
.aiuto em { font-style: normal; font-family: ui-monospace, monospace; color: var(--inchiostro); }

/* chi è dentro, e il bottone per uscire */
.chi-sono { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.chi-sono .ruolo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tenue); display: block;
}
.chi-sono form { margin: 0; }
.chi-sono button {
  border: 1px solid var(--bordo); background: #fff; border-radius: 9px;
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--inchiostro);
}
.chi-sono button:hover { background: var(--serranda); }

/* ------------------------------------------------------ la prenotazione
   Quattro scelte in fila, poi le ore. L'ordine è quello della risposta 11 di
   Giuseppe: prima COSA, poi si accendono le ore vere — non il contrario. */
.prenotazione { padding: 18px 20px 40px; }
.scelte {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: end;
  padding-bottom: 20px; border-bottom: 1px solid var(--bordo);
}
.scelta.larga { grid-column: span 2; }
.scelta label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--tenue);
}
.scelta select, .scelta input[type="date"], .nuova input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--bordo); border-radius: 10px;
  font: inherit; font-size: 15px; background: #fff; color: var(--inchiostro);
}
.scelta select:focus, .scelta input:focus, .nuova input:focus {
  outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--oro);
}
.scelta > .sottile { margin: 5px 0 0; }
.nuova { margin-top: 8px; }
.nuova summary {
  cursor: pointer; font-size: 12.5px; color: var(--oro); list-style: none;
}
.nuova summary::before { content: "+ "; font-weight: 700; }
.nuova input { margin-top: 6px; font-size: 14px; }

button.secondario {
  width: 100%; padding: 11px;
  border: 1px solid var(--oro); border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--oro);
  font: inherit; font-size: 15px; font-weight: 600;
}
button.secondario:hover { background: #fdf8ef; }

/* ⛔ `.ore-proposte`, NON `.ore`. Il 26/09 questa sezione si chiamava `.ore` come
   la colonna delle ore del tabellone dell'agenda — e le due schermate condividono
   UN foglio di stile. Risultato: `.ore { width: var(--larghezza-ore) }` schiacciava
   le ore libere della prenotazione a 62 pixel, una per riga, col titolo che andava
   a capo a ogni parola. Nessuna delle 42 prove poteva vederlo: la pagina era
   corretta, i dati erano giusti, era il DISEGNO a essere rotto. L'ha trovato la
   fotografia, come le altre cinque volte.
   ⚠️ Chi aggiunge una schermata qui dentro: i nomi di classe generici (`.ore`,
      `.giorni`, `.conti`, `.scelta`) appartengono gia' a qualcuno. */
.ore-proposte { padding-top: 22px; }
.ore-proposte h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.ore-proposte > .sottile { margin: 0 0 16px; }
.griglia-ore {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}
.ora-libera {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--bordo); border-left: 4px solid var(--oro);
  border-radius: 10px; background: #fff; font: inherit; text-align: left;
}
.ora-libera:hover { background: #fdf8ef; border-color: var(--oro); }
.ora-libera strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ora-libera span { font-size: 11.5px; color: var(--tenue); line-height: 1.3; }

.niente {
  padding: 18px 20px; border-radius: 12px;
  background: var(--serranda); border-left: 4px solid var(--tenue);
}
.niente h2 { margin: 0 0 6px; font-size: 17px; }
.perche { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.niente .sottile { margin: 0; }
.bottone.primario { background: var(--oro); color: #fff; border-color: var(--oro); font-weight: 600; }
.bottone.primario:hover { background: #9b7a41; }

/* -------------------------------------------------------- il pannello
   Le impostazioni. Tutto quello che si cambia da qui è già un DATO nel
   database: questi schermi non aggiungono potere, tolgono la necessità di
   aprire il database a mano. */
.pannello { padding: 20px 24px 50px; max-width: 1400px; }

.spiegone {
  margin: 0 0 22px; max-width: 74ch;
  font-size: 14.5px; line-height: 1.6; color: var(--tenue);
}

.stato-negozio {
  margin: 0 0 20px; padding: 14px 18px; border-radius: 12px;
  border-left: 4px solid var(--bordo); background: #fff;
}
.stato-negozio h2 { margin: 0 0 8px; font-size: 16px; font-weight: 650; }
.stato-negozio ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.stato-negozio p { margin: 6px 0 0; font-size: 14px; }
.stato-negozio.bene { border-left-color: #417505; background: #f2f8ec; }
.stato-negozio.attenzione { border-left-color: var(--oro); background: #fff8ea; }
.stato-negozio.rotto { border-left-color: var(--allarme); background: #fdf0ee; }
.stato-negozio li.rottura, .stato-negozio li.avviso::marker { color: var(--allarme); }
.stato-negozio li.avviso { color: var(--inchiostro); }

.sezioni {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.sezione {
  display: block; padding: 16px 18px; text-decoration: none; color: inherit;
  border: 1px solid var(--bordo); border-radius: 12px; background: #fff;
  border-top: 3px solid var(--oro);
}
.sezione:hover { background: #fdf8ef; }
.sezione h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.sezione p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tenue); }

/* Il contenitore che scorre: la tabella resta larga quanto le serve, e a
   scivolare e' lei e non la pagina. */
/* ⛔ Il bordo arrotondato e il taglio stanno sul TAVOLO, non sulla tabella.
   Misurato il 29/09 dal banco della geometria, appena nata la riga «aggiungi»:
   `overflow: hidden` sulla tabella tagliava via le caselle della riga nuova —
   1762 px di contenuto dentro una scatola da 1232 — e le nascondeva senza
   dirlo. La stessa riga serviva solo ad arrotondare gli angoli. Adesso la
   tabella cresce quanto le serve e a scorrere è il contenitore. */
.tavolo {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordo); border-radius: 12px; background: #fff;
}

.tabellina {
  border-collapse: collapse; background: #fff;
  width: 100%; min-width: 100%;
  font-size: 14px;
}
.tabellina th, .tabellina td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
.tabellina thead th {
  background: var(--serranda); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tenue); font-weight: 650;
}
.tabellina tbody th { font-weight: 600; }
.tabellina tr.gruppo th {
  background: #faf7f2; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--oro); padding-top: 12px;
}
.tabellina input[type="text"], .tabellina input:not([type]), .tabellina select {
  padding: 6px 9px; border: 1px solid var(--bordo); border-radius: 8px;
  font: inherit; font-size: 14px; background: #fdfcfb;
}
.tabellina input:focus, .tabellina select:focus {
  outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--oro);
}
.tabellina input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--oro); }
.tabellina code { font-size: 12.5px; color: var(--tenue); }
.unita { color: var(--tenue); font-size: 12px; margin-left: 3px; }
.aiuto-riga { font-size: 12.5px; color: var(--tenue); line-height: 1.45; max-width: 46ch; }
.ipotesi { color: var(--oro); font-size: 12.5px; font-style: italic; }

/* la matrice: le colonne sono strette, i titoli girano */
.matrice thead th:not(:first-child) { height: 120px; padding: 0; width: 38px; }
.matrice thead th span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 0; white-space: nowrap; text-transform: none; letter-spacing: 0;
  font-size: 12px;
}
.matrice td.casella { text-align: center; padding: 5px; }
.matrice tbody tr:hover { background: #fdf8ef; }

.salva {
  display: flex; align-items: center; gap: 14px;
  position: sticky; bottom: 0; margin-top: 18px;
  padding: 14px 0; background: linear-gradient(to top, var(--carta) 70%, transparent);
}
.salva button {
  padding: 11px 28px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--oro); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
}
.salva button:hover { background: #9b7a41; }
.impostazione .aiuto { border-top: 0; padding-top: 10px; }

/* ------------------------------------------------- la scheda cliente (T3, 28/09)
   ⚠️ Queste due classi sono nate perché `banco-prenota` sezione M le ha PRETESE:
   pretende che ogni classe usata da un modello abbia una regola nel foglio, e
   quando ho scritto `cliente.html` le ha trovate nude. La guardia scritta la
   mattina ha morso il lavoro della sera — che è esattamente il suo mestiere. */
.elenco {
  list-style: none; padding: 0; margin: 8px 0;
}
.elenco li {
  padding: 6px 0; border-bottom: 1px solid var(--bordo);
}
.elenco li:last-child { border-bottom: 0; }

.tabella {
  width: 100%; border-collapse: collapse; margin: 8px 0;
}
.tabella th, .tabella td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bordo);
}
.tabella thead th {
  font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tenue);
}

/* Il nome della cliente e' la porta della sua scheda: si vede che si puo' aprire,
   senza diventare un collegamento blu che urla in mezzo al tabellone. */
.nome-cliente {
  color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor;
}
.nome-cliente:hover, .nome-cliente:focus { border-bottom-style: solid; }

/* ---------------------------------------------------- la scheda cliente (T3)
   ⛔⛔ Queste regole nascono da una FOTOGRAFIA, non da un banco. Le trenta prove
   di `banco-cliente` erano tutte verdi mentre la pagina era illeggibile: avevo
   riusato `.conti`, che e' la classe dei TOTALI dell'agenda — `align-items:
   flex-end`, colonna — e cosi' «Telefono» e «3330000003» finivano incolonnati a
   destra su due righe. Il contenuto era giusto e il disegno rotto: e' la terza
   volta in questo cantiere che questa specie la trova una foto.
   ⭐ Da qui la guardia dei nomi di classe (banco-prenota, sezione M) ha imparato
   a guardare anche `text-align` e `align-items`, non solo larghezza e griglia. */
.scheda {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; align-items: start;
}
/* ⛔⛔ E QUI IL SECONDO difetto che ha trovato la stessa fotografia, e ha la
   STESSA forma del primo: le sezioni usavano `.riquadro`, che e' la cartolina
   della schermata d'accesso e porta `max-width: 420px`. Spanate su tutta la
   riga della griglia, restavano larghe 420 px e le tabelle USCIVANO dal bordo.
   ⭐ Due volte nella stessa pagina ho riusato una classe di un'altra schermata
   per un mestiere diverso. La cura non e' stare piu' attento: e' che la scheda
   abbia le SUE classi, e che l'esclusione del banco dichiari dove vale. */
.sezione-scheda {
  background: #fff; border: 1px solid var(--bordo); border-radius: 16px;
  padding: 22px 24px 18px; margin: 0;
}
.sezione-scheda h2 { font-size: 19px; font-weight: 600; margin: 0 0 14px; }
.sezione-scheda h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
/* ⚠️ una sezione con una tabella dentro vuole tutta la riga: incolonnarla in
   340 px le farebbe mangiare le colonne. */
.scheda > .larga { grid-column: 1 / -1; }

.dati {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 16px; margin: 6px 0 0; font-size: 15px;
}
.dati dt { color: var(--tenue); }
.dati dd { margin: 0; }

/* Il segno dell'euro sul blocco porta alla cassa. Piccolo di proposito: non deve
   competere col nome della cliente, che e' la cosa che si legge da un metro. */
.alla-cassa {
  color: var(--tenue); text-decoration: none; font-weight: 600;
  padding: 0 3px; border-radius: 4px;
}
.alla-cassa:hover, .alla-cassa:focus { background: var(--oro); color: #fff; }

/* ------------------------------------------------------------ la cassa (T4)
   ⛔ Nate da una FOTOGRAFIA, la quarta volta su quattro in questo cantiere.
   Avevo riusato `.scelte`/`.scelta` della prenotazione — fatte per tre scelte
   larghe — per quattro campi piccoli: etichette disallineate in verticale, e il
   testo d'aiuto che finiva sopra il campo accanto. Illeggibile, con 38 prove
   verdi. Stessa specie di `.conti` e `.riquadro` il 28/09: la terza volta in due
   giorni che riuso una classe di un'altra schermata per un mestiere diverso. */
.campi-cassa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 22px; margin: 4px 0 14px; align-items: start;
}
.campo-cassa { display: flex; flex-direction: column; gap: 5px; }
.campo-cassa label { font-size: 13px; color: var(--tenue); }
.campo-cassa input {
  font-size: 18px; padding: 9px 11px; border: 1px solid var(--bordo);
  border-radius: 9px; background: #fff; width: 100%;
}
/* ⚠️ l'aiuto sta SOTTO il suo campo e non accanto: accanto, con quattro campi in
   riga, finiva sopra il campo del vicino. */
.campo-cassa .aiuto { font-size: 12px; line-height: 1.35; margin: 0; }

.incassa { margin-top: 16px; }
.incassa button {
  font-size: 18px; padding: 13px 26px; border: 0; border-radius: 11px;
  background: var(--oro); color: #fff; font-weight: 600; cursor: pointer;
}


/* ====================================================================
   LA SCHEDA DELL'APPUNTAMENTO — dal 29/09
   ⭐ Ci si arriva toccando un blocco in agenda (risposta 21 di Giuseppe).
   ==================================================================== */

/* I tasti degli stati. ⚠️ Uno per riga e grandi: si premono col pollice, al
   telefono, mentre la cliente e' in linea. Stretti e vicini si sbaglia, e qui
   sbagliare vuol dire disdire l'appuntamento sbagliato. */
.passi { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.passo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.passo button { min-height: 40px; padding: 8px 16px; }
/* ⚠️ Il campo del perché NON si allarga a tutta la riga: se cresce, la frase
   «libera l'ora» finisce dall'altra parte dello schermo e sembra di un'altra
   riga. Largo quanto basta a scriverci una frase. */
.passo input {
  flex: 0 1 300px; min-width: 150px; min-height: 40px;
  padding: 6px 10px; border: 1px solid var(--bordo); border-radius: 7px;
}
/* ⭐ Il tasto PROPOSTO si vede da lontano: è la difesa contro lo sbaglio più
   probabile, e se non si distingue non difende niente. */
/* ⛔ Questa riga era `box-shadow: 0 0 0 3px var(--tinta-chiara, rgba(0,0,0,.10))`
   e `--tinta-chiara` non esiste in nessun punto del foglio: il ripiego è un
   grigio al 10%, cioè niente. Il tasto suggerito non si distingueva dagli
   altri — e il suggerimento esiste APPOSTA perché chi ha fretta preme il primo
   tasto che salta all'occhio, e deve essere quello giusto. Una variabile che
   non c'è non dà errore: fa la cosa sbagliata in silenzio. */
.passo button.primario {
  background: var(--oro); color: #fff; border-color: var(--oro); font-weight: 650;
}
.passo button.primario:hover { background: #9b7a41; }
/* ⚠️ E se il suggerito è uno di quelli che liberano l'ora, il bordo rosso
   dell'avvertimento resta: le due cose non si escludono. */
.passo-libera button.primario { border-color: var(--allarme); }
/* ⭐ Gli stati che liberano l'ora si vedono da lontano: sono quelli che non si
   tornano indietro, perche' quell'ora puo' essere rivenduta un minuto dopo. */
.passo-libera button { border-color: var(--allarme); }
.passo-libera .aiuto { color: var(--allarme); }

/* ⛔ Misurato il 29/09 chiedendo al browser, non a occhio: dentro `.passo` la
   classe `.aiuto` portava il suo `border-top`, e disegnava una riga sottile in
   mezzo ai tasti che sembrava un difetto di tutt'altro. Qui quel bordo non
   serve: l'aiuto sta ACCANTO al tasto, non sotto a una sezione. */
.passo .aiuto { border-top: 0; padding-top: 0; }

/* ⛔ E il bottone della cassa era largo **38 px** dentro un contenitore da 1090:
   «Vai alla cassa €» andava a capo su ogni parola, una parola per riga.
   `inline-flex` lasciava che il testo si accartocciasse. Un `inline-block` che
   non va a capo fa quello che deve, e non c'e' niente da calcolare. */
.alla-cassa-grande { margin: 14px 0 2px; }
.alla-cassa-grande .bottone {
  display: inline-block; white-space: nowrap;
  min-height: 42px; line-height: 28px; width: auto;
}

/* ------------------------------------------------------- la riga che si aggiunge
   Sta in fondo alla tabella, vuota, e si riempie. ⭐ Non ha un bottone suo: si
   preme lo stesso «Salva» di tutto il resto, perché un secondo bottone sarebbe
   un secondo modo di sbagliare. Se resta vuota non succede niente. */
.tabellina tr.riga-nuova { background: var(--serranda, #faf6ef); }
/* ⭐ Le caselle in più della riga nuova (il nome, la variante, la categoria)
   vanno IN COLONNA e non in fila: in fila allargavano la tabella di 500 px e
   sul telefono nessuno le trovava. */
.tabellina tr.riga-nuova th { font-weight: 500; color: var(--tenue); white-space: nowrap; }
.tabellina tr.riga-nuova th input,
.tabellina tr.riga-nuova th select { display: block; margin-top: 4px; max-width: 200px; }
.tabellina tr.riga-nuova .piu {
  display: inline-block; width: 20px; height: 20px; line-height: 19px;
  text-align: center; border-radius: 6px; margin-right: 4px;
  background: var(--oro); color: #fff; font-weight: 700;
}
.tabellina tr.riga-nuova input::placeholder { color: var(--tenue); opacity: .75; }

/* ------------------------------------------------------- l'elenco delle clienti
   ⛔ Questa pagina non esisteva fino al 29/09: per aprire la scheda di una
   cliente bisognava conoscerne il numero interno. */
.cerca-clienti {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 12px;
}
.cerca-clienti label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; }
.cerca-clienti input {
  padding: 9px 12px; font-size: 16px;   /* 16 px: sotto, iOS ingrandisce da solo */
  border: 1px solid var(--linea2, #cfc5d8); border-radius: 9px; width: 100%;
}
.cerca-clienti button {
  padding: 0 18px; height: 40px; border-radius: 9px; border: 1px solid var(--oro);
  background: var(--oro); color: #fff; font-weight: 600; font-size: 15px;
  white-space: nowrap; cursor: pointer;
}
.tabella tr.bloccata th a { color: var(--allarme, #a8322c); }
.etichetta-blocco {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--allarmesoft, #f9e7e5); color: var(--allarme, #a8322c);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* --------------------------------------------- la scheda cliente che si corregge */
.campi-cliente {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
}
.campi-cliente label, .nota-cliente { display: flex; flex-direction: column; gap: 3px; }
.campi-cliente span, .nota-cliente span { font-size: 12px; color: var(--tenue); }
.campi-cliente input, .nota-cliente textarea {
  padding: 8px 10px; font-size: 16px; width: 100%;
  border: 1px solid var(--linea2, #cfc5d8); border-radius: 8px;
  font-family: inherit;
}
.nota-cliente { margin-top: 12px; }
.spunte-cliente {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 12px;
}
.spunte-cliente label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.spunte-cliente input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--oro); }
.modulo-cliente .salva { position: static; margin-top: 14px; }

/* ⛔ I collegamenti dentro le tabelle portavano il vestito di serie del browser
   — blu elettrico e sottolineato — in mezzo a una pagina fatta di oro e
   inchiostro. Non è una questione di gusto: un colore che il resto del
   gestionale non usa da nessun'altra parte insegna a chi guarda una regola
   sbagliata («blu = cliccabile»), e il giorno che un blu compare altrove per
   un motivo diverso quella regola fa danno. */
.tabella a, .tabellina a {
  color: var(--inchiostro); text-decoration: none;
  border-bottom: 1px solid var(--linea2, #cfc5d8);
}
.tabella a:hover, .tabellina a:hover { border-bottom-color: var(--oro); }
.tabella a:focus-visible, .tabellina a:focus-visible { outline: 2px solid var(--oro); }
.tabella th a { font-weight: 650; }

/* la stessa specie del bottone che si accartoccia: un'etichetta non va a capo */
.salva button { white-space: nowrap; }

/* ------------------------------------------------------ spostare un appuntamento */
.giorno-sposta { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.giorno-sposta label { display: flex; flex-direction: column; gap: 3px; }
.giorno-sposta input {
  padding: 8px 10px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--linea2, #cfc5d8); border-radius: 8px;
}
.giorno-sposta button {
  height: 40px; padding: 0 16px; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--bordo); background: #fff; font-size: 15px; cursor: pointer;
}
/* ⭐ Le ore libere a griglia e non in fila: un giorno vuoto ne ha trenta, e in
   fila uscirebbero dallo schermo. Ognuna e' alta 40 px perche' si preme col
   pollice mentre la cliente e' in linea. */
.ore-sposta { display: flex; flex-wrap: wrap; gap: 8px; }
.ore-sposta button {
  min-width: 68px; height: 40px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--bordo); background: #fff;
  font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ore-sposta button:hover:not(:disabled) { background: var(--serranda); border-color: var(--oro); }
.ore-sposta button:disabled { opacity: .45; cursor: default; }

/* Il numero della cliente sui blocchi grandi dell'agenda: piccolo, tenue, con
   le cifre a larghezza fissa perche' si legge a colpo d'occhio mentre si compone. */
.blocco .telefono {
  font-size: 11.5px; color: var(--tenue); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------ i consensi che si registrano */
.riga-consenso { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.riga-consenso select {
  padding: 5px 7px; font-size: 13px; border-radius: 7px;
  border: 1px solid var(--linea2);
}
/* ⭐ «sì» e «no» si distinguono a colpo d'occhio: qui sbagliare bersaglio vuol
   dire registrare il contrario di quello che la cliente ha detto. */
.riga-consenso button {
  min-width: 42px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bordo); background: #fff; font-size: 14px;
  font-weight: 600; white-space: nowrap;
}
.riga-consenso button[value="1"] { border-color: var(--oro); color: var(--oro); }
.riga-consenso button[value="0"] { border-color: var(--allarme); color: var(--allarme); }
.nota-nuova { margin-top: 14px; border-top: 1px solid var(--bordo); padding-top: 12px; }

/* =====================================================================
   LA STAMPA — il sabato mattina senza linea, e il foglio da appendere
   =====================================================================
   ⛔⛔ Perche' esiste. Il piano del 23/08 metteva la stampa fra le CINQUE
       cose che non si tagliano mai, e il censimento del 29/09 ha misurato che
       non c'era niente: «non si puo' stampare niente: nessun foglio di stile
       per la stampa, nessun tasto». Senza, un guasto alla linea il sabato
       mattina lascia il centro senza sapere chi arriva e a che ora.
   ⭐ Cosa si stampa, e perche' quelle: l'agenda del giorno (il foglio che si
      appende in cabina) e la scheda di una cliente. Non il pannello, non la
      cassa: sono cose che si fanno al computer, e un foglio con dentro i
      prezzi di listino o le parole d'ordine e' un foglio che gira.
   ⚠️ Questa e' la carta, non il lavoro senza linea: un gestionale che
      funziona offline e' un altro mestiere, ed e' dichiarato come non fatto.
      Stampare l'agenda la sera prima pero' copre il caso vero — la linea che
      cade — e costa un foglio.
   ⛔ E i dati SANITARI non si stampano mai: un foglio appeso in cabina con le
      allergie di una cliente e' un dato sanitario lasciato in giro, e in
      cabina passano le altre clienti. */
@media print {
  /* niente sfondi e niente colori pieni: consumano toner e non dicono niente
     in bianco e nero */
  :root { --carta: #fff; --serranda: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* Via quello che serve a NAVIGARE: su carta non si clicca.
     ⚠️ NON tutti i `form`: le pagine che SONO un modulo (prenota, le
     impostazioni) resterebbero fogli bianchi, e un foglio bianco che esce
     dalla stampante e' peggio di un foglio brutto — chi lo vede pensa che il
     programma sia rotto. Qui si tolgono i moduli che stanno DENTRO una scheda
     (la scheda cliente, l'appuntamento), dove sono strumenti di modifica e su
     carta sarebbero caselle vuote. */
  .bottone, .stampa, button, .testa .chi-sono,
  .salva, .passi, .cerca-clienti, .riga-consenso, .ore-sposta, .giorno-sposta,
  .alla-cassa-grande, .scheda form { display: none !important; }

  /* ⛔ i dati sanitari NON vanno su carta: in cabina passano altre clienti */
  /* ⛔ Tutto ciò che viene da una scheda sanitaria: il riquadro, il
     triangolino, e anche il CONTEGGIO in fondo all'agenda — «1 cliente
     con avvisi» non dice chi, ma restringe a quattro nomi, e restringere
     è già dire. */
  .sanitaria, .allerta, .avviso-casa { display: none !important; }

  .testa { position: static; border-bottom: 2px solid #000; }
  .tabellone { overflow: visible !important; }
  .intestazioni { position: static !important; }

  /* i blocchi dell'agenda: bordo nero e niente tinte, si leggono da lontano */
  .blocco {
    border: 1px solid #000 !important; background: #fff !important;
    color: #000 !important; box-shadow: none !important;
  }
  .blocco .stato { border: 1px solid #000; }

  /* ⚠️ `break-inside` e non `page-break-inside`: la seconda e' la vecchia, e
     Chrome la onora ancora, ma la prima e' quella che vale. Si mettono
     tutt'e due perche' costano una riga e il foglio esce giusto ovunque. */
  .sezione-scheda, .blocco, .tabella tr {
    page-break-inside: avoid; break-inside: avoid;
  }
  .scheda { display: block; }
  .sezione-scheda { border: 1px solid #000; margin-bottom: 8pt; }

  a { text-decoration: none; color: #000; }
  /* ⭐ l'indirizzo del collegamento NON si stampa accanto al testo: su un
     foglio di agenda riempirebbe tutto di «http://…/cliente/12». */
  a[href]:after { content: ""; }

  .tavolo { overflow: visible !important; border: 0 !important; }
  .tabellina, .tabella { font-size: 9.5pt; }
}

/* Il tasto «stampa», che su carta sparisce da solo (sta in `form`? no: e' un
   bottone nudo, quindi si nasconde per nome). */
@media print { .stampa { display: none !important; } }
.stampa {
  height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--bordo); background: #fff; color: var(--inchiostro);
  font-size: 14px; white-space: nowrap; font-family: inherit;
}
.stampa:hover { background: var(--serranda); }

/* ------------------------------------- un altro trattamento, di fila */
.allunga { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.allunga label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; }
.allunga select {
  padding: 9px 10px; font-size: 15px; width: 100%; font-family: inherit;
  border: 1px solid var(--linea2); border-radius: 8px;
}
.allunga button {
  height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--oro); background: var(--oro); color: #fff;
  font-weight: 600; font-size: 15px; white-space: nowrap;
}

/* ===================================================================== */
/* I CONTI DEL CENTRO — 29/09                                            */
/* ⚠️ Solo tinte gia' dichiarate su :root. Un banco pretende che ogni     */
/*    var(--x) usata qui dentro sia definita: il 29/09 «--tinta-chiara»   */
/*    non lo era, e il bottone suggerito aveva un alone grigio invisibile.*/
/* ===================================================================== */
.cartellone {
  background: var(--carta);
  border: 2px solid var(--oro);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin-bottom: var(--gap);
  text-align: center;
}
.cartellone p { margin: 0.3rem 0; }
/* ⭐ Il numero che si va a cercare si vede da lontano: questa pagina la si apre
      per UNA domanda, e la risposta non deve stare in mezzo a una tabella. */
.cartellone .grosso {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--oro);
}
.tabellina td.numero, .tabellina th.numero { text-align: right; white-space: nowrap; }
/* ⛔ `--serranda` e NON `--tenue`: la seconda e' un grigio da TESTO (#7a726b), e
      usata come sfondo faceva una barra scura che sembrava una riga selezionata.
      Trovato da una FOTOGRAFIA, non da una prova: le 43 del banco dei conti
      guardavano i numeri, non come si vedono. */
.tabellina tr.totale td {
  border-top: 2px solid var(--bordo);
  background: var(--serranda);
}
/* ⛔ La data non si spezza a meta': «Antonietta, 2026-09-» e «10» su due righe
      era il modo in cui la colonna piu' stretta si arrendeva. */
.tabellina td.detto { white-space: nowrap; }
/* ⛔ Rosso solo dove il numero e' davvero brutto o davvero ignoto: un colore
      d'allarme usato per abitudine smette di allarmare. */
.tabellina .allarme, .non-so dt { color: var(--allarme); }
.non-so { margin: 0; }
.non-so dt { font-weight: 600; margin-top: 0.8rem; }
.non-so dd { margin: 0.2rem 0 0 0; color: var(--inchiostro); }