/* ═══════════════════════════════════════════════════════════════════════════
   LA GERARCHIA DEL GESTIONALE
   ═══════════════════════════════════════════════════════════════════════════

   Il gestionale aveva un colore solo. Tutto — il tasto che chiude una serata,
   quello che apre un pannello, l'etichetta di un campo, il titolo di una
   sezione — era scritto con lo stesso peso e lo stesso contrasto su fondi che
   differivano di due toni. Aprendo una pagina non si capiva dove guardare, e
   fra dieci pulsanti in fila non si capiva quale fosse quello che conta.

   Qui non ci sono colori nuovi: sono gli stessi token del marchio, usati con
   PIÙ PESI invece che con uno solo.

     PRINCIPALE   pieno, sul verde di richiamo. Uno per schermata, quello che
                  fa avanzare il lavoro: «Crea e pubblica», «Salva», «Partita
                  finita». Si vede da lontano, e da solo.
     SECONDARIO   contorno — ed è il default, quello che le pagine hanno già.
                  Le cose che si fanno spesso e non sono la strada principale:
                  «Modifica», «Aggiorna», «Annulla».
     QUIETO       solo testo. Quelle che devono esserci e non devono chiamare.

   Il ROSSO non è un peso, è un avvertimento: sta addosso a quello che non si
   annulla, e ha due forme — contorno quando aspetta, pieno quando è armato e
   al prossimo tocco fa la cosa.

   ── PERCHÉ SOLO ALCUNI SELETTORI, E CON `body` DAVANTI ────────────────────
   Ogni pagina del gestionale porta il suo `<style>`, scritto prima che questo
   foglio esistesse: `button {…}` per il pulsante normale e `.primario {…}` per
   quello di richiamo, più i suoi componenti (le linguette, le carte, le
   pastiglie). Collegare un foglio prima di quel blocco vorrebbe dire perdere a
   parità di specificità; collegarlo dopo vorrebbe dire dipendere dall'ordine
   dei tag in `<head>`, che si rompe la prima volta che qualcuno riordina.
   `body button.primario` vince per specificità e non per posizione.

   E si tocca SOLO quello che ha un nome: `.primario`, `.pericolo`, `.conferma`,
   `.quieto`. Il pulsante senza classe resta com'è — è il secondario, ed è
   giusto così. Una regola generica su `button` scavalcherebbe anche i
   componenti che le pagine hanno disegnato apposta (le linguette del pannello
   sono pulsanti, e devono restare piatte): il risultato sarebbe una barra di
   linguette che sembrano dieci pulsanti in fila, cioè il problema di partenza
   spostato di un metro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LA SCALA DEL GESTIONALE — l'80% di quella del sito

   «Il gestionale mi piace come si vede riducendo lo zoom all'80%»: e aveva
   ragione. Il sito e il gestionale hanno due mestieri diversi. Sul sito la
   misura serve a farsi guardare da chi passa; qui dentro si sta per ore, e
   ogni schermata deve portare più roba — un elenco di serate, una tabella di
   dodici persone, un registro. La misura del sito, qui, è un ingrandimento.

   ── COME, VISTO CHE LE MISURE STANNO IN DUE SISTEMI ────────────────────────
   Nelle pagine convivono i token in pixel (`--sig-corpo-testo`, gli spazi) e
   un centinaio di misure scritte in `rem` dentro i loro `<style>`. Toccarne
   uno solo lascerebbe indietro l'altra metà, e il risultato sarebbe una
   pagina sfasata invece che una pagina più densa. Quindi tutti e due:

     · `font-size: 80%` sulla radice rimpicciolia OGNI valore in `rem`, senza
       che nessuno debba andarli a cercare;
     · i token in pixel si ridichiarano al loro 80%, perché quelli il
       `font-size` non li tocca.

   E vale SOLO per il gestionale: questo foglio lo caricano le sue quindici
   pagine e nessun'altra. La vetrina non cambia di un pixel.

   ── QUELLO CHE NON SI RIMPICCIOLISCE ───────────────────────────────────────
   LA MISURA DEL TOCCO. Un bersaglio da 44 pixel ridotto a 35 è un bersaglio
   che si manca, e il registro si compila col dito a bordo campo. Resta 44
   dove si tocca col dito, e scende a 36 solo dove c'è un puntatore fine —
   cioè un mouse, che è preciso e non ha bisogno di quel margine. È la sola
   misura che dipende dalla mano e non dallo stile.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  font-size: 80%;

  --sig-corpo-display: 80px;
  --sig-corpo-h1: 45px;
  --sig-corpo-h2: 32px;
  --sig-corpo-h3: 21px;
  --sig-corpo-testo: 13px;
  --sig-corpo-testo-piccolo: 11px;
  --sig-corpo-etichetta: 9px;
  --sig-corpo-bottone: 13px;
  --sig-corpo-numero: 51px;

  --sig-corpo-display-mobile: 32px;
  --sig-corpo-h1-mobile: 26px;
  --sig-corpo-h2-mobile: 21px;
  --sig-corpo-h3-mobile: 16px;
  --sig-corpo-numero-mobile: 32px;

  --sig-spazio-1: 3px;
  --sig-spazio-2: 6px;
  --sig-spazio-3: 10px;
  --sig-spazio-4: 13px;
  --sig-spazio-5: 19px;
  --sig-spazio-6: 26px;
  --sig-spazio-7: 38px;
  --sig-spazio-8: 51px;
  --sig-spazio-9: 77px;
}

/* Col mouse il bersaglio si stringeva a 36 px: tolto il 12 novembre 2026. Tutto ciò che si
   tocca è alto almeno 44 px, sempre (sig.css, «I PULSANTI DEL GESTIONALE»). */

/* ═══════════════════════════════════════════════════════════════════════════
   LE SUPERFICI, E IL RITMO CHE FANNO

   Il gestionale era un muro monocromatico: barra, moduli, pannelli ed elenco
   stavano tutti sullo stesso fondo, e niente si staccava da niente. Non erano
   i dettagli — era che c'era UN PIANO SOLO.

   La vetrina quel problema non ce l'ha, e non perché sia più colorata: è
   fatta di FASCE a tutta larghezza che si alternano, e il confine fra una
   cosa e l'altra si vede senza leggere. Qui si prende quella.

     LA TESTATA   il gradiente del marchio — blu, petrolio, verde — schiarito
                  verso il navy, la stessa fascia che porta l'area. È l'unica
                  scura, sta in cima e ci resta mentre si scorre. Da qui il
                  verde entra in ogni schermata del gestionale, che è il posto
                  dove non si era mai visto.
     SI AGISCE    verde tenue a tutta larghezza: quello che si compila sta
                  lì dentro, e si riconosce da lontano.
     SI LEGGE     il fondo di pagina, con le carte sopra.

   Sta QUI e non in ogni pagina perché è la stessa ricetta per tutte e
   quindici: scritta quindici volte, al primo ritocco ne restano indietro
   quattordici. Le pagine tengono solo quello che è loro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Il respiro laterale, dentro fasce che vanno da bordo a bordo. NIENTE
   `max-width`, ed è una differenza col sito: là la colonna stretta serve a non
   far diventare illeggibile una riga di prosa, qui dentro ci sono tabelle da
   nove colonne — strozzarle vuol dire mandare le azioni fuori vista su uno
   schermo che lo spazio ce l'aveva. Il ritmo lo fanno le fasce. */
body .dentro { padding: 0 var(--sig-sp-4); }
body .fascia { padding: var(--sig-sp-4) 0; }

/* La fascia in cui si AGISCE. Il filo sotto è il verde dell'appoggio, lo
   stesso che sta sotto i pulsanti pieni. Il fondo resta verde nei due temi —
   chiarissimo sul chiaro, profondo sullo scuro. */
body .fascia.azione {
  background: var(--sig-verde-tenue);
  border-bottom: var(--sig-spessore-bordo) solid var(--sig-appoggio);
}
/* Dentro una fascia le schede non si portano il fondo dietro: sarebbe una
   carta dentro una carta. Il modulo vive sulla fascia. */
body .fascia.azione > .dentro > .scheda {
  background: transparent; border: none; padding: 0; margin-bottom: 0;
}
body .fascia.azione > .dentro > .scheda + .scheda { margin-top: var(--sig-sp-4); }

/* ══ I RIQUADRI IMPILATI NON SI TOCCANO ═══════════════════════════════════
   Giro visivo del 9 ottobre 2026. Ogni pagina ridefinisce `.scheda` nel suo
   `<style>` col margine che le pare (1.1, 1.2, 1.5, 1.6 rem — o nessuno): la
   scheda di una persona non ne aveva, e «Trattamento dei dati» e «Dichiarazione
   di salute» stavano a 0 px.

   Il respiro fra un blocco e il blocco dopo è uno solo, --sig-stacco: 16 px
   veri (--sig-spazio-4 sul computer vale 13: il gestionale lavora all'80%, e
   i riquadri impilati stavano a 13 — 19 ottobre 2026). Si dà come margine SOPRA a quello che segue: due margini verticali
   fra fratelli si fondono nel più grande, quindi dove la pagina già dava di
   più (24 px) resta quello, e dove dava meno o niente arriva a 16. Non si
   tocca l'altezza di nessuna tabella: il margine è fuori dal riquadro. */
body .scheda + .scheda,
body .nota + .scheda { margin-top: var(--sig-stacco); }

/* ══ LA NOTA SOTTO UN BLOCCO ══════════════════════════════════════════════
   Una `.nota` sotto un riquadro, una tabella o un elenco stava a .4rem
   (6.4 px), attaccata al bordo: «Il consenso al trattamento non si cambia da
   qui…» sotto «Dichiarazione di salute», la nota sotto la tabella delle
   amicizie, sotto l'elenco da condurre. Sotto un CAMPO resta com'è: lì è la
   sua didascalia e deve stargli vicino. */
body :is(.scheda, .tabella-scroll, .griglia, .proposte-elenco) + .nota {
  margin-top: var(--sig-stacco);
}

/* ══ CAMPI E PULSANTI IN RIGA, O IN COLONNA QUANDO VANNO A CAPO ═══════════
   `.riga-campi` stava a .6rem (9.6 px) in ogni pagina che la ridefinisce, e le
   file di pulsanti (consensi, modifica, revoca) a .5rem (8 px): su un telefono
   i campi vanno a capo uno sotto l'altro e «Crea e pubblica», «Salva come
   bozza», «Registra una serata passata» sembravano un unico blocco.
   12 px (--sig-spazio-3) fra un elemento e il successivo; l'etichetta resta a
   4 px dal suo campo — è la sua didascalia. Una riga di campi sotto una nota
   prende lo stesso passo, o i campi toccano il testo che li presenta. */
body .riga-campi,
body .azioni-consensi,
body .barra-modifica,
body .barra-revoca { gap: var(--sig-spazio-3); }
body .nota + .riga-campi { margin-top: var(--sig-spazio-3); }

/* ══ UN FORM O UNA RICERCA NON SI ATTACCA A CIÒ CHE SEGUE ═════════════════
   Giro «spazi» del 19 ottobre 2026. Un blocco con dei campi (la ricerca, i
   filtri, il modulo «nuova spesa») seguito da una tabella, una griglia o una
   nota stava a 10 px sul computer — 12,8 sul telefono —, la nota sotto il
   modulo di Economia a 3,8: ogni pagina dava `margin-bottom` alla ricerca col
   numero che le pareva, e alla nota il suo .3rem.

   16 px veri fra un blocco e il successivo. Sul computer il token
   --sig-spazio-4 vale 13 (il gestionale lavora all'80%): il pavimento di
   16 px è quello chiesto dal titolare. Il margine sta SOPRA al seguente, e
   fra fratelli i margini si fondono: dove la pagina già dava di più resta
   quello. L'altezza delle tabelle non cambia: il margine è fuori. */
:root { --sig-stacco: max(16px, var(--sig-spazio-4)); }
body :is(.cerca, .cerca-data, .riga-campi) + :is(.tabella-scroll, .griglia, .nota) {
  margin-top: var(--sig-stacco);
}

/* ══ SUL TELEFONO I CAMPI DI UN FORM HANNO TUTTI LA STESSA LARGHEZZA ════════
   Giro visivo del 9 ottobre 2026. Ogni campo prendeva la larghezza del suo
   contenuto o del suo `max-width`: nello stesso modulo il Nome stava a 212 px,
   la Descrizione a 256, «Chi è» a 285, la Soglia a 112, la ricerca a 291 — un
   bordo destro a gradini. Su un telefono un modulo è una colonna: ogni campo
   riempie la riga, e il suo bordo destro è quello della colonna. Sopra i 640
   px le righe di campi restano affiancate com'erano.

   `label.campo` e non `.campo`: i `span.campo` sono note, non campi. Le caselle
   (che stanno in un'etichetta anche loro) e il colore restano com'erano. */
@media (max-width: 640px) {
  body .riga-campi > label.campo:not(:has(> input[type="checkbox"])) { flex: 1 1 100%; }
  body .riga-campi label.campo > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
    width: 100%; max-width: 100%;
  }
}

/* ══ IL RESPIRO DELLE CELLE: SOLO AI LATI ═════════════════════════════════
   Le dodici pagine con una tabella ridefinivano `th, td { padding }` ognuna con
   la sua misura (.5, .7, .8 rem — 10 px sul computer, dove il gestionale
   lavora all'80%): il testo di una colonna toccava quello della colonna
   accanto. Un valore solo, 16 px, e SOLO sui lati: `padding-inline`. L'altezza
   di una riga è fatta dal `padding-block` e dall'interlinea, e non si tocca.

   Eccezione dichiarata: `#unisci` (la tabella dei doppioni) ha il suo
   selettore con un id, che vince su questo, ed è fatta per stare stretta. */
:root { --sig-cella-lato: var(--sig-spazio-4); }
body :is(th, td) { padding-inline: var(--sig-cella-lato); }

/* La stessa distinzione in piccolo, dentro un pannello: le schede in cui si
   COMPILA prendono il verde, quelle in cui si LEGGE restano carta. */
body .scheda.azione {
  background: var(--sig-verde-tenue);
  border-color: var(--sig-appoggio);
}

/* ── LA TESTATA ─────────────────────────────────────────────────────────────
   `display: block` dichiarato: quasi tutte le pagine avevano un `header {
   display: flex }` loro, e lasciandolo il `.dentro` sarebbe diventato un
   figlio flex che non si allarga. Qui il flex sta sul `.dentro`, non
   sull'involucro — è l'involucro a dover andare da bordo a bordo. */
/* La stessa rete di sig.css, per le pagine che caricano questo foglio: vedi là. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
html > body { touch-action: pan-y pinch-zoom; }

body header.testata {
  /* Sopra la fascia il grigio chiaro non regge sul verde (2,91): qui il secondario è bianco. */
  --sig-scuro-tenue: var(--sig-bianco);
  display: block; margin: 0; padding: 0;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--sig-blu-500) 65%, var(--sig-blu-900)),
    color-mix(in srgb, var(--sig-petrolio-500) 65%, var(--sig-blu-900)) 50%,
    color-mix(in srgb, var(--sig-verde-500) 65%, var(--sig-blu-900)));
  color: var(--sig-bianco);
  border-bottom: var(--sig-spessore-appoggio) solid var(--sig-accento);
}
/* Alta almeno quanto una testata col pulsante «Aggiorna» (12 novembre 2026): passando da una
   linguetta all'altra la fila delle linguette, che sta subito sotto, saltava di 20 px fra le pagine
   che hanno il pulsante e quelle che non l'hanno. */
body header.testata .dentro {
  display: flex; align-items: center; gap: var(--sig-sp-3);
  flex-wrap: wrap; min-height: max(48px, calc(var(--sig-tocco) + 2 * var(--sig-sp-2)));
  padding-top: var(--sig-sp-2); padding-bottom: var(--sig-sp-2);
}
body header.testata h1, body header.testata h2 { color: var(--sig-bianco); }
/* Il grigio chiaro è quello che il sistema usa sopra lo scuro, e regge il
   contrasto su tutti e tre i tratti del gradiente. */
body header.testata .conteggio, body header.testata .sottotitolo,
body header.testata .nota, body header.testata .torna { color: var(--sig-scuro-tenue); }
/* ══ IL CONTATORE TIENE IL SUO POSTO PRIMA DI ESSERE SCRITTO ════════════════
   Il titolare, 4 novembre 2026: la barra cambia dopo il primo disegno. Misurato
   a 375: il contatore nasce vuoto e si riempie con la risposta, e a quel punto
   «Aggiorna» scendeva a capo: testata da 69 a 112. Dentro il guscio, dove va a
   capo nessuno, il tasto scivolava di lato. */
body header.testata .conteggio { min-width: 8rem; min-height: 1lh; }
body header.testata .spazio { flex: 1; }
body header.testata a { color: var(--sig-bianco); }
body header.testata button {
  background: transparent; color: var(--sig-bianco);
  border-color: var(--sig-scuro-tenue);
}
@media (hover: hover) {
  body header.testata button:hover:not(:disabled) { border-color: var(--sig-bianco); }
}
/* Il primario resta lime anche quassù: è l'azione, e il lime sul gradiente
   scuro si vede più che mai. */
body header.testata button.primario {
  background: var(--sig-accento); color: var(--sig-accento-su);
  border-color: var(--sig-accento);
}

/* ─── I pulsanti ──────────────────────────────────────────────────────────── */
/* Il sistema dei pulsanti del gestionale (la misura del tocco, il fuoco, il
   principale lime, il quieto, il pericolo e la conferma) sta in sig.css dal 12
   novembre 2026: «I PULSANTI DEL GESTIONALE». */

/* ─── I pesi del testo ────────────────────────────────────────────────────── */
/* I titoli si staccano: erano dello stesso peso del testo attorno, e una
   pagina in cui i titoli non si vedono è una pagina senza indice.

   IL TITOLO DI PAGINA è nel taglio del brand: maiuscolo, nero, obliquo — lo
   stesso `--sig-obliquo` dei display della vetrina, in misura da strumento.
   È l'unico titolo che grida, e sta sulla fascia scura.

   I TITOLI DI SEZIONE diventano OCCHIELLI: la didascalia maiuscoletta verde
   del sito. Erano dieci righe grigie tutte uguali, una per pannello; adesso
   fanno da etichetta e lasciano il peso ai dati, che è il verso giusto —
   in una pagina di lavoro il titolo dice DOVE sei, il dato è quello che
   sei venuto a leggere. */
body h1 {
  font-weight: var(--sig-peso-black);
  font-size: 1.5rem; margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--sig-tracking-titolo);
  transform: var(--sig-obliquo);
}
@media (min-width: 1024px) { body h1 { font-size: 1.8rem; } }
/* Il titolo di sezione (l'occhiello) sta in sig.css, `.sig-gestionale h2`
   (12 novembre 2026): una regola sola per tutte le pagine. */
body h3 { font-weight: var(--sig-peso-semibold); }

/* ─── Le superfici ────────────────────────────────────────────────────────── */
/* Una scheda si stacca dal fondo per il BORDO, non per l'ombra: il fondo è
   scuro, e un'ombra su scuro non si vede. Il bordo forte è la differenza fra
   «c'è un riquadro» e «c'è del testo». */
body .scheda { border-color: var(--sig-bordo-forte); }

/* La testata di una tabella è un'intestazione, non una riga di dati: si legge
   come etichetta e si smette di contarla fra le righe. */
body thead th {
  color: var(--sig-testo-tenue);
  font-size: var(--sig-corpo-etichetta);
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: var(--sig-peso-semibold);
}
/* La riga che si sta leggendo si accende: su una tabella larga si perde il
   filo, e ritrovarlo costa uno sguardo ogni volta. */
body tbody tr:hover > td { background: var(--sig-fondo-alt); }

/* ─── Le due schede di una sezione ────────────────────────────────────────── */
/* Tre voci del menu tengono DUE pagine ciascuna, e la seconda si raggiunge da
   qui: «Premi e punti» tiene i premi e le regole che li fanno scattare,
   «Contenuti» tiene i media e le informative, «Stato» tiene la diagnostica e
   il registro di chi ha fatto cosa.
   
   Sono coppie e non voci separate perché rispondono alla stessa domanda con
   due pagine: un menu di undici voci si scorre, uno di otto si guarda.
   
   Le schede sono LINK e non pulsanti, ed è deliberato: ogni pagina continua a
   funzionare aperta da sola, fuori dal guscio, e un link è la cosa che ci
   porta anche allora. Dentro l'iframe navigano l'iframe, e la voce di menu
   resta accesa — il guscio riconosce le pagine sorelle. */
body .sezione-schede {
  display: flex; gap: var(--sig-sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sig-sp-4);
  border-bottom: 1px solid var(--sig-bordo);
}
body .sezione-schede a {
  display: inline-flex; align-items: center;
  min-height: var(--sig-tocco);
  padding: var(--sig-sp-2) var(--sig-sp-3);
  color: var(--sig-testo-tenue); text-decoration: none;
  font-weight: var(--sig-peso-semibold);
  border-bottom: var(--sig-spessore-appoggio) solid transparent;
  margin-bottom: -1px;
}
body .sezione-schede a:hover { color: var(--sig-testo); }
/* La scheda aperta si segna col filo sotto, non col fondo pieno: è una
   posizione, non un pulsante premuto. */
body .sezione-schede a[aria-current] {
  color: var(--sig-testo);
  border-bottom-color: var(--sig-accento);
}
/* Quante ne aspettano, sulla scheda che ci porta. Il numero sul menu dice «in
   questa sezione»; questo dice in quale delle due schede (8 settembre 2026).
   Non compare mai a zero: una pastiglia con dentro «0» è una cosa in più da
   guardare per scoprire che non c'è niente da guardare. */
body .sezione-schede .novita-scheda {
  margin-left: var(--sig-sp-2);
  min-width: 1.35rem; padding: .05rem .35rem;
  border-radius: var(--sig-raggio-pillola);
  background: var(--sig-attenzione); color: var(--sig-blu-900);
  font-size: var(--sig-corpo-etichetta); font-weight: var(--sig-peso-bold);
  text-align: center; line-height: 1.4;
}

/* ── La ricerca sopra una tendina di persone ─────────────────────────────────
   /sito/cerca-tendina.js la infila davanti alla tendina. È una casella come le
   altre, un filo più piccola, e sotto la tendina una riga minuta dice quante
   voci restano («12 di 48»). Il titolare, 5 settembre 2026: «con cinquanta
   iscritti scorrere l'elenco è impossibile». */
body input.cerca-tendina {
  display: block;
  width: 100%;
  margin: 0 0 .35rem;
  font-size: var(--sig-corpo-testo-piccolo);
}
body .cerca-tendina-conto {
  display: block;
  margin-top: .25rem;
  font-size: var(--sig-corpo-etichetta);
  color: var(--sig-testo-tenue);
}
body .cerca-tendina-conto:empty { display: none; }
body .cerca-tendina-conto.vuoto { color: var(--sig-errore-testo); }

/* ══ LE PAGINE DEL TITOLARE, APERTE DA UN ISTRUTTORE ══════════════════════
   `/sito/solo-titolare.js` mette la classe sulla radice quando chi guarda è
   un istruttore: resta la testata e la riga che lo dice, tutto il resto —
   moduli, tabelle, e gli avvisi «impossibile caricare» appesi al body — non
   si vede. Regola del 6 settembre 2026: «non si mostra quello che non può
   usare». */
.non-del-titolare body > :not(header):not(.solo-titolare) { display: none !important; }
.solo-titolare {
  max-width: 40rem; margin: var(--sig-sp-6) auto; padding: 0 var(--sig-sp-4);
  font-size: var(--sig-corpo-testo);
}
.solo-titolare p { margin: 0 0 var(--sig-sp-3); }
.solo-titolare a { font-weight: var(--sig-peso-semibold); }

/* ═══════════════════════════════════════════════════════════════════════════
   IL GESTIONALE SUL TELEFONO — la scala dell'80% qui non vale

   Il titolare, 14 settembre 2026: «adattale tutte, non una alla volta. Non
   voglio una versione diversa: voglio che si veda tutto e che non sia rotto.
   Niente sbordi, tabelle leggibili, moduli usabili col pollice, niente doppi
   titoli».

   ── PERCHÉ L'80% ERA GIUSTO E QUI È SBAGLIATO ──────────────────────────────
   La scala ridotta in cima a questo foglio è nata per il computer: «il
   gestionale mi piace come si vede riducendo lo zoom all'80%», e aveva
   ragione — davanti a uno schermo grande si sta per ore, e ogni schermata
   deve portare più roba.

   Su un telefono quella stessa riduzione risponde a un problema che non c'è.
   La densità lo schermo ce l'ha già, per forza: il guadagno è mezza riga in
   più, e il prezzo è che le etichette scendono a 9 pixel e le tabelle a 11.
   Misurato a 393 su tutte e diciassette le pagine, il carattere più piccolo
   di ognuna stava fra 8,7 e 11 pixel — quello che il titolare chiama
   «tabelle da leggere con la lente».

   Quindi sotto i 720 la riduzione si annulla: la radice torna al 100% (e con
   lei tutte le misure in `rem` che le pagine si sono scritte dentro) e i
   token in pixel tornano quelli del sito. Non è un'altra veste: è la stessa
   pagina alla sua misura vera.

   L'etichetta va oltre, a 12: a 11 in maiuscoletto sopra un modulo è la riga
   che si salta, e sono i nomi dei campi.

   ── DOVE SI TOCCA ──────────────────────────────────────────────────────────
   `--sig-tocco` è già 44 sul telefono (scende a 36 solo con un puntatore
   fine), e i pulsanti delle pagine lo rispettano. Restavano fuori tre
   famiglie, tutte misurate col telefono emulato — non con una finestra
   stretta, che risponde `pointer: fine` e fa vedere un gestionale che sul
   telefono non esiste:

     · le CASELLE da spuntare, 13×13 — un bersaglio da tredici pixel non si
       centra col pollice, si centra col mignolo e guardando;
     · i NOMI dentro le tabelle (iscrizioni, economia): sono link alti 14, e
       sono la cosa che si tocca per aprire una scheda;
     · i pulsanti che una pagina si è scritta più piccoli degli altri — «Manda
       per email…» del registro stava a 32.

   Il minimo si mette una volta sola, qui, e vale per tutte: `min-height` e
   basta, senza toccare colori, bordi o forma. Le linguette restano linguette,
   i pulsanti quieti restano quieti — diventano solo abbastanza alti da essere
   presi.

   ── QUELLO CHE NON SI FA ───────────────────────────────────────────────────
   Le tabelle NON diventano schede. Continuano a scorrere dentro il loro
   riquadro, come già facevano: una tabella impaginata in verticale è una
   seconda versione della stessa pagina, e da lì in poi ogni colonna nuova va
   aggiunta in due posti — che è il modo in cui le due versioni cominciano a
   dire cose diverse.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root {
    font-size: 100%;

    --sig-corpo-display: 100px;
    --sig-corpo-h1: 56px;
    --sig-corpo-h2: 40px;
    --sig-corpo-h3: 26px;
    --sig-corpo-testo: 16px;
    --sig-corpo-testo-piccolo: 14px;
    --sig-corpo-etichetta: 12px;
    --sig-corpo-bottone: 16px;
    --sig-corpo-numero: 64px;

    --sig-corpo-display-mobile: 40px;
    --sig-corpo-h1-mobile: 32px;
    --sig-corpo-h2-mobile: 26px;
    --sig-corpo-h3-mobile: 20px;
    --sig-corpo-numero-mobile: 40px;

    --sig-spazio-1: 4px;
    --sig-spazio-2: 8px;
    --sig-spazio-3: 12px;
    --sig-spazio-4: 16px;
    --sig-spazio-5: 24px;
    --sig-spazio-6: 32px;
    --sig-spazio-7: 48px;
    --sig-spazio-8: 64px;
    --sig-spazio-9: 96px;
  }

  /* Il dito, e non il mouse: il telefono risponde `pointer: coarse`, ma una
     finestra stretta sul computer no — e allora il minimo lo si dice qui, che
     è dove si sa di essere su uno schermo da telefono.

     `!important` perché questo è il solo valore che una pagina non può
     negoziare: il registro si era scritto `min-height: 32px` sui pulsanti
     dentro le righe degli avvisi, e vinceva per specificità — ne uscivano
     cinquanta bersagli da 32 su una pagina sola. La misura del dito non
     dipende dalla pagina che la ospita. */
  body button,
  body .bottone,
  body select,
  body input:not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--sig-tocco) !important;
  }

  /* Sotto i 16 px Safari su iPhone zooma la pagina appena si tocca un campo,
     e poi non torna indietro da solo: 14 px su una ventina di campi del
     gestionale. Il carattere è quello del campo, e non si negozia. */
  body select,
  body textarea,
  body input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
  }

  body input[type="checkbox"],
  body input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  /* Il nome dentro una cella è un link, ma il gesto è quello di un pulsante:
     si tocca per aprire la scheda di una persona, ed era alto quattordici
     pixel. Due mosse, e sono due perché una sola non basta:

       · la RIGA si alza (`padding` sulle celle), così due nomi consecutivi
         stanno abbastanza lontani da non prendersi il tocco a vicenda;
       · il BERSAGLIO del link si estende in altezza con uno pseudo-elemento
         trasparente, centrato sul testo.

     Lo pseudo-elemento e non l'imbottitura sul link: `a.nome` porta la sua
     riga tratteggiata come `border-bottom`, e un'imbottitura la staccherebbe
     dal nome di quindici pixel — una riga vuota sotto ogni persona. Il
     bersaglio cresce, quello che si vede resta dov'era. */
  body td { padding-block: 12px; }
  body td a,
  body th a { position: relative; }
  body td a::after,
  body th a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--sig-tocco);
  }
  /* ══ NIENTE DOPPI TITOLI ══════════════════════════════════════
     Sopra c'è già la barra del telefono, col marchio e col nome della pagina
     (`vestiLaVista` in `gestionale.html` gliel'ha fatto dire dalla pagina
     stessa). Ripeterli qui sotto vuol dire due marchi e due titoli prima di
     una riga di contenuto, su uno schermo alto 850.

     Il titolo non si cancella, si toglie dagli occhi: resta un `h1` nel
     documento — è quello che dice di cosa parla la pagina a chi la ascolta
     invece di guardarla, e una pagina senza `h1` è una pagina senza nome.

     `.in-guscio` la mette il guscio, e solo lui: la stessa pagina aperta da
     sola — un indirizzo copiato, un link da un'email — tiene la sua testata
     intera, perché lì non c'è nessuna barra sopra. */
  .in-guscio body > header.testata .segno { display: none; }
  .in-guscio body > header.testata h1 {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE TABELLE COMPATTE SUL TELEFONO  (`public/sito/tabelle.js`)

   <table class="tabella-compatta" data-riga="Nome,Stato">

   Sotto i 640 px la riga mostra il NOME (al più due righe), lo STATO e una
   freccia da 44×44; le altre colonne stanno in un dettaglio aperto SOTTO la
   riga, dentro la tabella. Sopra i 640 px non cambia niente: tutto quello che
   il modulo aggiunge (la freccia, il nome intero) è nascosto.

   Il respiro delle celle (16 px ai lati) qui diventa il margine interno della
   riga: stesso token, `--sig-cella-lato`.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  .tabella-compatta .tc-intero,
  .tabella-compatta .tc-freccia { display: none; }
}
@media (max-width: 640px) {
  /* Il tetto di altezza e lo scorrimento laterale di `.tabella-scroll` non
     servono più: la tabella sta nella larghezza, e scorre la pagina. Lo
     scorrimento DENTRO il riquadro, a una riga che si apre, farebbe due barre
     una dentro l'altra. */
  body .tabella-scroll:has(> table.tabella-compatta) {
    max-height: none; overflow: hidden; padding-right: 0;
  }
  body table.tabella-compatta { display: block; width: 100%; min-width: 0; }
  body table.tabella-compatta thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body table.tabella-compatta tbody { display: block; }
  body table.tabella-compatta tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 44px;
    column-gap: var(--sig-spazio-2); align-items: center;
    padding-left: var(--sig-cella-lato);
    border-bottom: 1px solid var(--sig-bordo);
    scroll-margin-top: 5rem;
  }
  body table.tabella-compatta tbody tr:last-child { border-bottom: 0; }
  body table.tabella-compatta tbody tr > td {
    display: block; border: 0; padding: var(--sig-spazio-2) 0; padding-inline: 0;
    min-width: 0; white-space: normal; position: static; background: none; box-shadow: none;
  }
  /* La riga: nome e stato e freccia sempre sulla prima riga della griglia. */
  body table.tabella-compatta tbody tr > td.tc-nome {
    grid-column: 1; grid-row: 1; min-height: 44px; display: flex; align-items: center;
    flex-wrap: wrap; gap: 4px var(--sig-spazio-2); line-height: 1.25; overflow-wrap: break-word;
  }
  body table.tabella-compatta .tc-testo {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body table.tabella-compatta tbody tr > td.tc-stato {
    grid-column: 2; grid-row: 1; justify-self: end; text-align: right; max-width: 9rem;
  }
  body table.tabella-compatta tbody tr > td.tc-freccia {
    grid-column: 3; grid-row: 1; padding: 0; width: 44px; height: 44px;
  }
  body table.tabella-compatta .tc-apri {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit;
    display: grid; place-items: center; cursor: pointer; box-shadow: none; border-radius: 0;
  }
  body table.tabella-compatta .tc-apri::before {
    content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s;
  }
  body table.tabella-compatta tr.tc-aperta .tc-apri::before {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  @media (prefers-reduced-motion: reduce) { body table.tabella-compatta .tc-apri::before { transition: none; } }

  /* ── LA CELLA DEL COMANDO A SINISTRA (`data-comando="sinistra"`) ───────────
     «Chi c'è» di una serata: segnare una presenza resta UN TOCCO. La casella
     (44×44, e tutta la sua cella) sta a sinistra, il nome accanto, la freccia a
     destra; toccare il nome o la freccia apre il dettaglio, toccare la casella
     no. Qui la colonna del comando è larga quanto la casella e il suo esito. */
  body table.tabella-compatta[data-comando="sinistra"] tbody tr {
    grid-template-columns: auto minmax(0, 1fr) 44px; padding-left: var(--sig-spazio-1);
  }
  body table.tabella-compatta[data-comando="sinistra"] tbody tr > td.tc-stato {
    grid-column: 1; justify-self: start; text-align: left; max-width: none;
  }
  body table.tabella-compatta[data-comando="sinistra"] tbody tr > td.tc-nome { grid-column: 2; }
  body table.tabella-compatta[data-comando="sinistra"] tbody tr.tc-aperta > td.tc-intero,
  body table.tabella-compatta[data-comando="sinistra"] tbody tr.tc-aperta > td.tc-dett:not(.tc-vuota) {
    padding-left: var(--sig-cella-lato);
  }
  body table.tabella-compatta tbody tr > td.tc-comando {
    display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0;
  }

  /* Il dettaglio: chiuso non c'è; aperto è una colonna di coppie etichetta/valore. */
  body table.tabella-compatta tbody tr > td.tc-dett,
  body table.tabella-compatta tbody tr > td.tc-intero { display: none; }
  body table.tabella-compatta tbody tr.tc-aperta { background: var(--sig-fondo-alt); }
  body table.tabella-compatta tbody tr.tc-aperta > td.tc-intero {
    display: block; grid-column: 1 / -1; grid-row: 2; padding: 0 var(--sig-cella-lato) 0 0;
    font-weight: var(--sig-peso-semibold); overflow-wrap: break-word;
  }
  body table.tabella-compatta tbody tr.tc-aperta > td.tc-dett:not(.tc-vuota) {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sig-spazio-3);
    grid-column: 1 / -1; padding: var(--sig-spazio-1) var(--sig-cella-lato) var(--sig-spazio-1) 0;
    overflow-wrap: break-word; min-width: 0; text-align: left;
  }
  body table.tabella-compatta tbody tr.tc-aperta > td.tc-dett:not(.tc-vuota)::before {
    content: attr(data-label); flex: 0 0 min(34%, 8rem);
    color: var(--sig-testo-tenue); font-size: .85em;
  }
  body table.tabella-compatta tbody tr.tc-aperta > td.tc-dett:last-of-type { padding-bottom: var(--sig-spazio-3); }
  /* I pulsanti stavano «in fila, mai a capo» perché la tabella scorreva di lato:
     qui non scorre, vanno a capo. */
  body table.tabella-compatta .barra,
  body table.tabella-compatta td > .barra { flex-wrap: wrap; margin-top: 0; flex: 1 1 100%; }
}

/* Anche il tablet: a 768 px i campi erano da 11 px e Safari zooma sotto i 16,
   qualunque sia la larghezza. Vale per ogni schermo a dito, non per il mouse. */
@media (pointer: coarse) {
  body select,
  body textarea,
  body input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
  }
}

/* I messaggi su fondo colorato: il testo è quello normale, il colore lo dicono fondo e bordo.
   Il titolare, 5 novembre 2026: «una scritta verde su fondo verde, illeggibile nel tema scuro».
   Era il «Assegnati 10 punti» di Premi, 5,3 sul fondo: passava la soglia e non si leggeva. */
body .avviso, body .avviso.ok, body .avviso.errore, body .avviso.attesa, body .avvertimento { color: var(--sig-testo); }
