/* ============================================================
   css/stile.css — P.A.O.L.A. — Gestionale Assoraider
   ============================================================
   Impostazione: direzione B — il blu resta il colore
   strutturale, ripulito e reso più profondo; l'oro del giglio
   Assoraider entra come accento.

   I nomi di classe e id sono quelli di sempre: cambia l'aspetto,
   non i ganci su cui si appoggiano le pagine PHP.

   Il carattere IBM Plex è servito da questo dominio (css/font.css
   e cartella fonts/), non da Google Fonts, che la CSP blocca.
   ============================================================ */

/* ── PERCHE' GLI @import PORTANO UN «?v=» ──────────────────────────────────
   Non e' un numero da tenere aggiornato, ed e' importante saperlo prima di
   provare a incrementarlo: e' stato messo UNA VOLTA, per cambiare l'indirizzo
   di questi due fogli e costringere i browser che ne avevano una copia vecchia
   a richiederli. Da qui in avanti ci pensa public/.htaccess, che sui fogli di
   stile manda «Cache-Control: no-cache» — conservali, ma chiedimi ogni volta
   se sono ancora buoni.

   Serviva perche' un @import e' una risorsa a se': «asset()» mette la versione
   in coda a stile.css, non a quel che stile.css importa, e per giorni una
   correzione qui dentro poteva non arrivare a nessuno. */
@import url("font.css?v=2");
/* I grafici del modulo statistiche: serve anche alle stampe, percio' sta
   in un foglio suo. Gli @import vanno tutti qui in cima: uno piu' in
   basso, dopo la prima regola, il browser lo ignora in silenzio.
   ============================================================ */
@import url("statistiche.css?v=2");

/* ── VARIABILI ───────────────────────────────────────────────
   Colori del marchio campionati dal file img/ASSOWFIS…png:
   oro #fdd200 (29% del marchio), verde #187740 (22%),
   verde chiaro #00a44e (9%), nero #221e1f.
   ------------------------------------------------------------ */
:root {
    /* Marchio */
    --oro:            #fdd200;
    --oro-tenue:      #fff8e1;
    --oro-bordo:      #f7e08a;
    /* Il giallo dei grafici e' piu' carico di quello del marchio: #fdd200 e'
       fatto per fondi larghi con testo scuro sopra, e in una fetta di due
       pixel dentro una barra blu semplicemente non si vede. Questo regge il
       confronto col blu e col verde e resta distinguibile dal rosso delle
       perdite, che e' molto piu' rosso. */
    --oro-grafico:    #e8a200;
    --verde-marchio:  #187740;

    /* Colore strutturale */
    --blu:            #124a86;
    --blu-scuro:      #0e3968;
    --blu-tenue:      #e4eef8;

    /* Stati */
    --rosso:          #c0341a;
    --rosso-tenue:    #fdeceb;
    --rosso-testo:    #7d2011;
    --verde:          #1f6b3b;
    --verde-tenue:    #e6f2ea;
    --verde-testo:    #14532a;
    --ambra:          #b8541c;
    --ambra-tenue:    #fdf0e4;
    --arancio:        #c05621;   /* banner simulazione */

    /* Neutri */
    --inchiostro:     #14171a;
    --grigio:         #5b6672;
    --grigio-chiaro:  #7c8794;
    --grigio-tenue:   #8a95a2;
    --bordo:          #e2e8ee;
    --bordo-forte:    #d5dee6;
    --separatore:     #edf1f5;
    --riga:           #f1f4f7;
    --zebra:          #fafcfd;
    --fondo:          #f6f8fa;
    --superficie:     #ffffff;

    /* Tipografia */
    --font:           "IBM Plex Sans", -apple-system, "Segoe UI", Verdana, Arial, sans-serif;
    --font-mono:      "IBM Plex Mono", Menlo, Consolas, monospace;
    --testo-xs:       11px;
    --testo-s:        12px;
    --testo-m:        13px;
    --testo:          14px;
    --testo-l:        16px;
    --titolo:         22px;
    --numero:         28px;

    /* Spaziature */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    /* Superfici */
    --raggio:         8px;
    --raggio-s:       6px;
    --ombra:          0 1px 2px rgba(20, 23, 26, 0.04);
    --ombra-alta:     0 4px 14px rgba(20, 23, 26, 0.10);

    --altezza-testata: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: var(--testo);
    line-height: 1.5;
    background: var(--fondo);
    color: var(--inchiostro);
    -webkit-font-smoothing: antialiased;
}

body.nav-aperto { overflow: hidden; }

/* ── TESTATA ─────────────────────────────────────────────────
   Fondo bianco anziché blu: il marchio Assoraider ha il proprio
   fondo trasparente e su bianco si legge come è stato disegnato.
   ------------------------------------------------------------ */
#testata {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    height: var(--altezza-testata);
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 200;
}

#testata-logo { display: flex; align-items: center; }

#testata-logo img {
    height: 38px;
    width: auto;
    display: block;
}

/* Etichetta dell'ambiente (prova, formazione): c'e' solo dove il .env la
   valorizza. Sta subito a destra del marchio, in arancio come il banner di
   simulazione, perche' dice la stessa cosa — «quello che fai qui non e'
   quello che sembra». Deve reggere anche su mobile, dove i titoli spariscono:
   e' li' che si rischia di scambiare un ambiente per l'altro. */
#etichetta-ambiente {
    flex-shrink: 0;
    background: var(--arancio);
    color: #ffffff;
    font-size: var(--testo-l);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--raggio-s);
    white-space: nowrap;
}

#testata-titoli {
    min-width: 0;
    padding-left: var(--sp-3);
    border-left: 1px solid var(--bordo);
}

.intestazione-grande {
    font-size: var(--testo-l);
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--inchiostro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intestazione-piccola {
    font-size: var(--testo-xs);
    line-height: 1.3;
    color: var(--grigio);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#testata-utente {
    margin-left: auto;
    font-size: var(--testo-s);
    color: var(--grigio);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

#testata-utente a {
    color: var(--blu);
    text-decoration: none;
    font-weight: 500;
    padding: 6px 10px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
}

#testata-utente a:hover {
    background: var(--fondo);
    text-decoration: none;
}

/* Hamburger — solo mobile */
#hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

#hamburger span {
    display: block;
    height: 2px;
    background: var(--inchiostro);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

#hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
    background: var(--blu);
    position: sticky;
    top: var(--altezza-testata);
    z-index: 190;
}

#nav-overlay { display: none; }

#nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

.nav-gruppo { position: relative; }

.nav-categoria {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 12px 15px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font);
    font-size: var(--testo-m);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.nav-categoria:hover,
.nav-gruppo:hover .nav-categoria {
    color: #ffffff;
    border-bottom-color: var(--oro);   /* accento del marchio */
}

.nav-freccia { font-size: 9px; transition: transform 0.2s; }
.nav-gruppo:hover .nav-freccia { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    box-shadow: var(--ombra-alta);
    list-style: none;
    margin: 6px 0 0 0;
    padding: var(--sp-1);
    z-index: 300;
}

.nav-gruppo:hover .nav-dropdown { display: block; }

/* Il distacco di 6px fra la voce e la tendina è voluto, ma lasciato nudo
   spezza il passaggio del puntatore: attraversandolo il cursore non è più
   sopra il gruppo, :hover decade e la tendina si chiude prima che si
   riesca a scegliere. Questo elemento invisibile copre quello spazio ed è
   figlio del gruppo, quindi lo tiene in stato :hover. */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nav-dropdown li a {
    display: block;
    padding: 9px 12px;
    font-size: var(--testo-m);
    color: var(--inchiostro);
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.1s;
}

.nav-dropdown li a:hover {
    background: var(--blu-tenue);
    color: var(--blu);
}

/* ── BANNER SIMULAZIONE ──────────────────────────────────── */
#banner-simulazione {
    background: var(--arancio);
    color: #ffffff;
    text-align: center;
    padding: 8px var(--sp-4);
    font-size: var(--testo-s);
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
}

#banner-simulazione button {
    background: #ffffff;
    color: var(--arancio);
    border: none;
    padding: 5px 12px;
    font-size: var(--testo-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
}

/* ── CONTENUTO ───────────────────────────────────────────── */
#contenuto {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-5);
    min-height: calc(100vh - 200px);
}

#contenuto h3 {
    font-size: var(--titolo);
    font-weight: 600;
    letter-spacing: -0.4px;
    text-align: left;
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-4) 0;
}

/* Un h3 usato come sottotitolo dentro una scheda non è un titolo di
   pagina: alla misura del titolo principale spezzerebbe la gerarchia. */
#contenuto .riquadro h3 {
    font-size: var(--testo-l);
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: var(--sp-4) 0 var(--sp-2) 0;
}

/* Elenchi dentro le schede: niente pallini, voci spaziate e
   comodamente cliccabili. */
#contenuto .riquadro ul {
    list-style: none;
    margin: 0 0 var(--sp-3) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Il link occupa tutta la larghezza utile della scheda e resta dentro il
   rientro: prima un margine negativo lo faceva sporgere oltre il bordo. */
#contenuto .riquadro ul li a {
    display: block;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: var(--raggio-s);
    transition: background 0.12s;
}

#contenuto .riquadro ul li a:hover { background: var(--blu-tenue); text-decoration: none; }

/* ── RIQUADRI ─────────────────────────────────────────────── */
.riquadro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    margin-bottom: var(--sp-3);
    padding-bottom: 0;
    /* Le tabelle larghe scorrono dentro la scheda invece di essere
       ritagliate: con overflow:hidden le ultime colonne diventavano
       irraggiungibili su schermi stretti. */
    overflow-x: auto;
    overflow-y: hidden;
}

/* Il titolo del riquadro non è più una fascia piena di colore:
   testo su bianco con un filo di separazione. Meno rumore,
   stessa gerarchia. */
#contenuto h4, .riquadro h4 {
    font-size: var(--testo);
    font-weight: 600;
    text-align: left;
    background: transparent;
    color: var(--inchiostro);
    padding: 14px var(--sp-4);
    margin: 0;
    border-bottom: 1px solid var(--separatore);
}

/* Rientro interno delle schede.
   Vale per OGNI figlio diretto, non solo per quelli che ci si ricorda di
   elencare: titoli, paragrafi ed elenchi devono allinearsi fra loro.
   La tabella fa eccezione perché il rientro ce l'hanno già le celle. */
#contenuto .riquadro > *      { padding-left: var(--sp-4); padding-right: var(--sp-4); }
#contenuto .riquadro > h4     { padding: 14px var(--sp-4); }
#contenuto .riquadro > table  { padding-left: 0; padding-right: 0; }
#contenuto .riquadro > *:last-child { padding-bottom: var(--sp-4); }

/* ── IMPAGINAZIONE A COLONNE ──────────────────────────────
   Sostituisce gli stili inline "display:flex" nelle pagine: una
   regola inline non è raggiungibile da una media query, e su
   telefono le colonne restavano affiancate e schiacciate.
   ---------------------------------------------------------- */
.colonne {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.colonne > * { flex: 1; min-width: 0; }

@media (max-width: 767px) {
    .colonne { flex-direction: column; gap: var(--sp-3); }
    .colonne > * { width: 100%; }
}

/* ── TABELLE ──────────────────────────────────────────────
   Via i bordi verticali e la fascia grigia di intestazione:
   righe alternate e separatori orizzontali sottili. Su migliaia
   di righe la leggibilità cambia sensibilmente.
   ---------------------------------------------------------- */
table {
    font-family: var(--font);
    font-size: var(--testo-m);
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

td, th {
    padding: 10px var(--sp-3);
    border: none;
    border-bottom: 1px solid var(--riga);
    text-align: left;
    vertical-align: top;
}

tr:last-child td { border-bottom: none; }
/* La zebratura sta dentro :where() perche' cosi' non pesa nulla in
   specificita'.
   Scritta com'era — table tr:nth-child(even) td — valeva (0,1,3) e batteva
   .riga-sezione > td, che vale (0,1,1): una riga di titolo appariva azzurra
   o grigia a seconda che capitasse in posizione dispari o pari, e sembrava
   casuale. Lo stesso capitava alle righe di totale e a quelle attenuate.
   Con :where() qualunque riga che dichiari un colore suo vince, anche quelle
   che verranno aggiunte in futuro: e' una riga a righe alterne, non deve
   avere l'ultima parola su nulla. */
:where(table tr:nth-child(even)) td { background: var(--zebra); }

th,
.testata-tabella,
tr.testata-tabella td {
    font-size: var(--testo-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--grigio);
    background: transparent;
    border-bottom: 1px solid var(--separatore);
}

/* L'allineamento dell'intestazione sta dentro :where() e quindi non pesa
   nulla in specificita'.
   Scritto insieme al resto valeva (0,1,2) e batteva .t-destra, che vale
   (0,1,0): un'intestazione marcata «a destra» restava comunque a sinistra,
   sfalsata rispetto alla colonna di numeri che intitolava. Il titolo di una
   colonna deve stare dov'e' il suo contenuto, altrimenti non lo intitola. */
:where(th, .testata-tabella, tr.testata-tabella td) { text-align: left; }

tr.testata-tabella td { background: transparent; }

/* ── LINK ─────────────────────────────────────────────────── */
#contenuto a:link, #contenuto a:visited {
    color: var(--blu);
    text-decoration: none;
    font-weight: 500;
}
#contenuto a:hover { color: var(--blu-scuro); text-decoration: underline; }

/* ── FORM ─────────────────────────────────────────────────── */
/* «tel» e «search» stanno nell'elenco anche se il programma usa «text» per i
   telefoni: chi un giorno scrivesse type="tel" — che e' la cosa naturale da
   scrivere — si ritroverebbe una casella senza bordo in mezzo alle altre, e
   passerebbe il pomeriggio a cercare l'errore nel proprio codice. E' successo.

   ED E' SUCCESSO DI NUOVO, con «url»: il sito del campo, scritto type="url"
   perche' e' la cosa naturale da scrivere, e' comparso senza bordo, senza
   imbottitura e con un carattere suo, in mezzo a caselle vestite. Chi guarda
   non pensa «manca un tipo nell'elenco»: pensa che la pagina si sia rotta li'.
   Quando se ne aggiunge uno, si aggiunge QUI — e negli altri due elenchi
   piu' sotto, che vestono le caselle dentro le tabelle. */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="url"],
input[type="search"], select, textarea {
    font-family: var(--font);
    font-size: var(--testo-m);
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    padding: 8px 11px;
    border-radius: var(--raggio-s);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(18, 74, 134, 0.14);
}

input::placeholder { color: var(--grigio-tenue); }

button, input[type="submit"] {
    background: var(--blu);
    color: #ffffff;
    border: none;
    padding: 9px 15px;
    font-family: var(--font);
    font-size: var(--testo-m);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--raggio-s);
    transition: background 0.15s;
}

button:hover, input[type="submit"]:hover { background: var(--blu-scuro); }
button:disabled { background: #eff2f5; color: var(--grigio-tenue); cursor: default; }

/* ── MESSAGGI ─────────────────────────────────────────────── */
.allarme, .tuttook, .avviso {
    padding: 11px 14px;
    margin: var(--sp-3) 0;
    border-radius: var(--raggio-s);
    font-size: var(--testo-m);
    border: none;
    border-left: 3px solid;
}

.allarme { background: var(--rosso-tenue);  color: var(--rosso-testo);  border-left-color: var(--rosso); }
.tuttook { background: var(--verde-tenue);  color: var(--verde-testo);  border-left-color: var(--verde); }
.avviso  { background: var(--oro-tenue);    color: #6b4e00;             border-left-color: var(--oro); }

/* ── MODULO BILANCIO ──────────────────────────────────────────
   Un bilancio si legge per colonne di numeri: conta piu' la
   leggibilita' delle cifre che l'ariosita' della pagina.
   ============================================================ */

/* Gli importi: incolonnati e a larghezza fissa, cosi' le cifre
   si allineano e un totale si controlla a occhio. */
.importo-positivo, .importo-negativo, .importo-nullo {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.importo-negativo { color: var(--rosso-testo); }
/* --grigio-chiaro dava 3,55:1 su testo di 13px. Uno zero in un bilancio non
   e' un ornamento: dice che quella voce e' stata guardata e vale zero. */
.importo-nullo    { color: var(--grigio); }

.riga-totale > td { border-top: 2px solid var(--bordo-forte); background: var(--riga); }
.riga-sezione > td { background: var(--blu-tenue); }

/* Un movimento senza capitolo non e' un errore, ma non deve passare
   inosservato: e' quello che tiene un bilancio fuori dal rendiconto. */
.riga-attenzione > td { background: var(--oro-tenue); }
.senza-capitolo {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--raggio-s);
    background: var(--ambra-tenue);
    color: var(--ambra);
    font-size: var(--testo-xs);
    font-weight: 600;
}

/* Le tabelle larghe scorrono da sole invece di allargare la pagina.
   Senza min-width la tabella si comprime dentro il contenitore invece di
   scorrere: le colonne di testo diventano una lettera per riga, e lo scorrimento
   non serve piu' a niente perche' non c'e' nulla da scorrere. */
.tabella-scorrevole { overflow-x: auto; }
.tabella-scorrevole > table { min-width: 900px; }

/* Stato dell'esercizio, con la stessa grammatica delle sezioni. */
.bil-stato-aperto  { background: var(--verde-tenue); color: var(--verde-testo); }
.bil-stato-chiuso  { background: var(--oro-tenue);   color: #6b4e00; }
.bil-stato-inviato { background: var(--blu-tenue);   color: var(--blu-scuro); }

/* ── BARRA DEL MODULO BILANCIO ────────────────────────────────
   Due livelli. Sopra le fasi del lavoro, nell'ordine in cui
   accadono; sotto, solo le pagine della fase in cui ci si trova.

   Prima erano quindici voci affiancate su tre righe, tutte con lo
   stesso peso: occupavano mezzo schermo e non lasciavano capire
   che cosa dipendesse da che cosa. Con due livelli la gerarchia si
   vede — si e' dentro «Rendiconto», e dentro c'e' «Modello D» — e
   la barra torna a due righe.
   ============================================================ */
.nav-bilancio { margin: 0 0 var(--sp-4); }

/* Primo livello: le fasi. */
.nav-fasi {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--bordo);
}
.nav-fasi li { margin: 0; }

#contenuto .nav-fasi a,
#contenuto .nav-fasi a:link,
#contenuto .nav-fasi a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: var(--testo);
    font-weight: 600;
    color: var(--grigio);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
#contenuto .nav-fasi a:hover {
    color: var(--blu);
    background: var(--fondo);
    border-bottom-color: var(--bordo-forte);
}
.nav-fasi .fase-attiva a,
#contenuto .nav-fasi .fase-attiva a:link,
#contenuto .nav-fasi .fase-attiva a:visited {
    color: var(--blu);
    border-bottom-color: var(--blu);
}

/* Quante pagine contiene la fase: dice che sotto c'e' dell'altro,
   senza doverci entrare. */
.fase-quante {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bordo);
    color: var(--grigio);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.nav-fasi .fase-attiva .fase-quante { background: var(--blu); color: #fff; }

/* Secondo livello: le pagine della fase corrente. Rientrate e piu'
   leggere, perche' dipendono da quella sopra. */
.nav-pagine {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 8px 16px 0;
    list-style: none;
    background: var(--fondo);
    border-bottom: 1px solid var(--bordo);
    border-radius: 0 0 var(--raggio-s) var(--raggio-s);
}
.nav-pagine li { margin: 0; }

#contenuto .nav-pagine a,
#contenuto .nav-pagine a:link,
#contenuto .nav-pagine a:visited,
.nav-pagine .voce-corrente {
    display: block;
    padding: 5px 12px 8px;
    font-size: var(--testo-m);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
#contenuto .nav-pagine a,
#contenuto .nav-pagine a:link,
#contenuto .nav-pagine a:visited { color: var(--grigio); }
#contenuto .nav-pagine a:hover { color: var(--blu); }
.nav-pagine .voce-corrente {
    color: var(--inchiostro);
    font-weight: 700;
    border-bottom-color: var(--blu);
}

/* Su schermo stretto la barra scorre invece di avvolgersi: sei fasi
   su tre righe perdono l'ordine che le rende leggibili, e l'altezza
   della barra raddoppia proprio dove lo spazio manca. Scorrendo,
   restano due righe come sul desktop. */
@media (max-width: 700px) {
    .nav-fasi, .nav-pagine {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* la barra di scorrimento non deve mangiarsi l'altezza */
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .nav-fasi > li, .nav-pagine > li { flex: 0 0 auto; }
    #contenuto .nav-fasi a,
    #contenuto .nav-fasi a:link,
    #contenuto .nav-fasi a:visited { padding: 9px 12px; font-size: var(--testo-m); }
}

/* ── CRUSCOTTO ────────────────────────────────────────────────
   Entrando si vuole sapere dove sta il bilancio, non leggere una
   tabella: i dati essenziali stanno in riquadri, grossi abbastanza
   da vedersi da lontano.
   ============================================================ */
.griglia-cifre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
}
.cifra {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cifra-etichetta {
    font-size: var(--testo-s);
    font-weight: 600;
    color: var(--grigio);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cifra-valore {
    font-size: var(--numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.cifra-nota { font-size: var(--testo-s); color: var(--grigio); }

/* I cinque dati essenziali si leggono come un'operazione: saldo iniziale,
   piu' entrate, meno uscite, uguale saldo d'esercizio, uguale saldo finale.
   I segni fra un riquadro e l'altro rendono visibile il legame — senza,
   sarebbero cinque numeri affiancati e nulla direbbe che si sommano. */
/* La misura del numero segue la larghezza disponibile: un importo come
   «158.862,71 €» a corpo fisso 28 non entra in una colonna da 150 pixel e
   veniva tagliato a meta'. Con clamp() rimpicciolisce quanto serve e non
   oltre. La colonna minima e' larga abbastanza da contenere l'importo piu'
   lungo alla misura minima. */
.cifre-rendiconto { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.cifre-rendiconto .cifra { position: relative; min-width: 0; }
.cifre-rendiconto .cifra-valore {
    font-size: clamp(17px, 2.1vw, var(--numero));
    white-space: nowrap;
}

/* Il segno sta DENTRO il riquadro, davanti all'etichetta, non nello spazio
   fra un riquadro e l'altro: cinque importi non stanno su una riga sola a
   ogni larghezza, e quando la riga andava a capo il segno restava appeso al
   margine, riferito a nulla. Dentro, l'operazione si legge comunque. */
.cifre-rendiconto .cifra-etichetta::before {
    font-weight: 700;
    color: var(--grigio-chiaro);
    margin-right: 4px;
}
.cifre-rendiconto .cifra-piu .cifra-etichetta::before       { content: "+"; }
.cifre-rendiconto .cifra-risultato .cifra-etichetta::before { content: "="; }

/* Il saldo d'esercizio sta fuori dalla catena: e' un risultato parziale, non
   un addendo. Lo si distingue con un filetto invece che con un operatore. */
.cifre-rendiconto .cifra-esercizio { border-left: 3px solid var(--bordo-forte); }

/* Il numero d'arrivo: e' quello che si va a cercare per primo. */
.cifre-rendiconto .cifra-risultato {
    border-color: var(--blu);
    box-shadow: inset 3px 0 0 var(--blu);
}

/* Il contorno — conteggi e ripartizioni — pesa meno dei cinque importi. */
.cifre-minori { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.cifra-piccola { background: var(--fondo); min-width: 0; }
.cifra-piccola .cifra-valore {
    font-size: clamp(16px, 1.8vw, var(--titolo));
    white-space: nowrap;
}

/* La riprova, detta in una riga: i due estremi devono chiudere. */
.riga-riprova {
    font-variant-numeric: tabular-nums;
    background: var(--verde-tenue);
    color: var(--verde-testo);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio-s);
    padding: 9px 14px;
    margin: 0 0 var(--sp-4);
}
.segno-operazione { display: inline-block; margin: 0 6px; font-weight: 700; opacity: .7; }


/* Le barre dell'andamento mensile. In SVG e non con una larghezza in linea:
   la CSP di produzione vieta gli stili in linea, e le barre uscivano tutte
   della stessa lunghezza. La geometria sta negli attributi del <rect>, che
   la CSP non governa; il colore invece e' qui, dove deve stare. */
.barre-mese {
    display: block;
    width: 100%;
    height: 16px;
    min-width: 90px;
}
.barra-entrate { fill: var(--verde); }
.barra-uscite  { fill: var(--rosso); }
.grafico-mesi td:last-child { min-width: 160px; }

/* Una voce collegata, con il suo pulsante per staccarla. */
.pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 4px 2px 0;
    padding: 2px 4px 2px 8px;
    border: 1px solid var(--bordo-forte);
    border-radius: 999px;
    background: var(--fondo);
    font-size: var(--testo-xs);
}

/* Il verso di un movimento: due parole, non un segno da digitare. */
.scelta-verso {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: var(--sp-4);
    font-weight: 600;
}

/* Un riquadro dentro un altro: la divisione di un movimento sta dentro la
   scheda del movimento, e deve leggersi come una cosa subordinata. */
.riquadro-annidato {
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--oro);
    border-radius: var(--raggio-s);
    background: var(--fondo);
    margin: var(--sp-4) 0 0;
}
.riquadro-annidato > h4 { margin: 0; padding: 10px 14px; }

/* Il socio collegato: nome, estremi e le due azioni, in riga. */
.socio-scelto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* ── TORNA INDIETRO ───────────────────────────────────────────
   Sta in cima al contenuto, sopra il titolo: e' la prima cosa
   che serve a chi si e' spinto in un ramo e vuole risalire.
   Discreto, perche' e' una via d'uscita e non una destinazione.
   ============================================================ */
.torna-indietro { margin: 0 0 var(--sp-2); font-size: var(--testo-m); }

#contenuto .torna-indietro a,
#contenuto .torna-indietro a:link,
#contenuto .torna-indietro a:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    border-radius: var(--raggio-s);
    color: var(--grigio);
    font-weight: 500;
    text-decoration: none;
}
#contenuto .torna-indietro a:hover {
    color: var(--blu);
    background: var(--fondo);
}

/* Quando la pagina ha gia' le sue briciole, le due righe si toccano:
   il «torna» perde il margine perche' non diventino uno stacco. */
.torna-indietro + .briciole { margin-top: 0; }

/* ── Il richiamo alla guida ──────────────────────────────────────────────────
   Un punto interrogativo all'altezza della navigazione, a destra: sulla riga
   dove si legge dove si e' arrivati si legge anche dove sta scritto come si fa.

   GALLEGGIA invece di stare in una riga sua. Cosi' il «torna indietro» e le
   briciole restano fratelli adiacenti — la regola qui sopra continua a valere
   — e su una pagina che non ha ne' l'uno ne' le altre il richiamo non lascia
   dietro di se' una riga vuota.

   E' PICCOLO E GRIGIO finche' non lo si guarda. Sta su ogni pagina del
   programma: se ognuno di quei richiami chiedesse attenzione, la chiederebbero
   tutti insieme e nessuno l'avrebbe. */
#contenuto .aiuto-pagina {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 var(--sp-2) var(--sp-3);
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    color: var(--grigio);
    font-size: var(--testo-m);
    font-weight: 500;
    text-decoration: none;
    background: var(--superficie, #fff);
}
#contenuto .aiuto-pagina:hover,
#contenuto .aiuto-pagina:focus-visible {
    color: var(--blu);
    border-color: var(--blu);
    background: var(--fondo);
}
/* Sullo stretto resta il solo segno: la parola «Guida» accanto a un punto
   interrogativo non aggiunge niente, e li' lo spazio serve al titolo. */
@media (max-width: 600px) {
    #contenuto .aiuto-pagina span { display: none; }
    #contenuto .aiuto-pagina { padding: 4px 6px; }
}

/* Righe dell'anteprima di importazione: si distinguono a colpo d'occhio
   perche' la decisione da prendere su ciascuna e' diversa. */
tr.riga-doppia > td {
    background: var(--riga);
    color: var(--grigio);
}
tr.riga-doppia .importo-positivo,
tr.riga-doppia .importo-negativo { color: var(--grigio); }

/* Nel confronto fra la riga da importare e quella in archivio, i valori che
   non coincidono: sono l'unica cosa che serve guardare. */
.valore-diverso {
    font-weight: 700;
    color: var(--ambra);
    background: var(--ambra-tenue);
    padding: 1px 4px;
    border-radius: var(--raggio-s);
}

/* La spunta «importa comunque»: un pulsante che sembra una casella, perche'
   scrivere in archivio deve passare da un invio e non da un interruttore. */
.spunta-forza {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--grigio);
    cursor: pointer;
}
.spunta-forza:hover { color: var(--blu); background: none; }
.spunta-attiva, .spunta-attiva:hover { color: var(--verde); }

/* Una riga doppia ma forzata torna a leggersi come le altre, con un filo
   verde che ricorda che la decisione e' stata presa a mano. */
tr.riga-scartata > td {
    background: var(--fondo);
    color: var(--grigio-chiaro);
    text-decoration: line-through;
}
tr.riga-modifica > td { background: var(--fondo); padding: 0; }

/* ── AREA DI TRASCINAMENTO ────────────────────────────────────
   E' un <label> legato al campo file: senza JavaScript resta un
   normale selettore, e il caricamento funziona lo stesso.
   ============================================================ */
.area-trascina {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--sp-6) var(--sp-4);
    margin: var(--sp-3) 0;
    border: 2px dashed var(--bordo-forte);
    border-radius: var(--raggio-s);
    background: var(--fondo);
    cursor: pointer;
    text-align: center;
}
.area-trascina:hover { border-color: var(--blu); background: var(--blu-tenue); }
.area-attiva { border-color: var(--blu); background: var(--blu-tenue); }
.area-con-file { border-style: solid; border-color: var(--verde); background: var(--verde-tenue); }
.area-icona { font-size: 26px; color: var(--grigio); line-height: 1; }
.nome-file { font-weight: 600; color: var(--verde-testo); }

/* Il campo file vero: nascosto alla vista ma non agli assistenti vocali,
   che devono continuare a raggiungerlo. */
.campo-nascosto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── IL PALLINO DELL'ANAGRAFICA ATTIVA ───────────────────────────────────
   Era un carattere «●» grande quanto il testo: a quella misura il verde e il
   grigio erano due macchie scure indistinguibili, e per sapere quale fosse
   quale bisognava confrontarne due vicini. Ora e' un cerchio disegnato, largo
   il doppio del testo, con un bordo piu' scuro del riempimento perche' anche
   sul giallo tenue di una riga segnalata il contorno resti netto.

   NON PORTA IL SUO SIGNIFICATO NEL COLORE E BASTA: il «title» lo dice a
   parole, e la parola sta anche in .campo-nascosto per chi legge con un
   assistente vocale. Un colore da solo non e' un'informazione. */
.pallino-stato {
    display: inline-block;
    width: 13px; height: 13px;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 7px;
    flex: none;
}
/* I DUE COLORI NON VENGONO DALLA TAVOLOZZA GENERALE, e non e' una svista.
   --verde e --grigio-chiaro nascono per portare del testo bianco addosso, e
   per questo sono spenti quanto basta a reggere il contrasto. Il pallino
   testo non ne ha: puo' permettersi un verde piu' acceso e un grigio piu'
   chiaro, che e' esattamente quel che serve perche' i due si distinguano di
   colpo invece che a confronto. Il bordo resta piu' scuro del riempimento e
   tiene il contorno leggibile su qualunque fondo di riga. */
.pallino-attivo { background: #2fbe63; border: 1px solid #1f8c48; }
.pallino-spento { background: #c6cfd8; border: 1px solid #a3aeba; }

/* Il pallino nella testata: e' il comando che ordina, non lo stato di
   qualcuno, e per questo e' vuoto. Sta sopra la colonna di pallini che
   ordina, con lo stesso margine, cosi' i centri si incolonnano. */
.pallino-testata {
    background: transparent;
    border: 2px solid var(--grigio-chiaro);
    /* La freccia dell'ordinamento deve restare attaccata al pallino, se no
       si legge come se riguardasse COGNOME: lo stacco fra i due comandi lo
       mette il collegamento, non il pallino. */
    margin-right: 2px;
}
#contenuto a.ordina-pallino { margin-right: 9px; }
#contenuto a.ordina-pallino,
#contenuto a.ordina-pallino:link,
#contenuto a.ordina-pallino:visited { color: inherit; text-decoration: none; }
#contenuto a.ordina-pallino:hover .pallino-testata { border-color: var(--blu); }

/* ── UN RIQUADRO CHE CHIEDE ATTENZIONE ───────────────────────────────────────
   Giallo come gli avvisi, non rosso come gli allarmi: quel che manca qui non
   e' un guasto ne' un dato falso — sono fogli che devono ancora arrivare, e
   arriveranno. Il rosso e' per le cose che non vanno; questo e' per le cose
   che non sono ancora finite.

   SI COLORA IL BORDO E LA TESTATA, non il fondo di tutto: dentro c'e' una
   tabella da leggere e da compilare, e un fondo colorato sotto dei campi li
   rende piu' faticosi da riempire proprio mentre si chiede di riempirli. */
.riquadro-avviso {
    border-color: var(--oro);
    box-shadow: inset 3px 0 0 var(--oro);
}
.riquadro-avviso > h4 {
    background: var(--oro-tenue);
    color: #6b4e00;
}

/* ── UN ELENCO DI PROSA DENTRO UN RIQUADRO ───────────────────────────────────
   Dentro un riquadro gli <ul> sono file di pastiglie, e per quello
   «#contenuto .riquadro ul» li mette in fila (display:flex) e ne toglie i
   segni. I due usi del tutore principale sono invece un elenco vero, di
   frasi: in fila diventano una riga sola illeggibile, e senza segni non si
   vede nemmeno che sono due cose distinte.

   IL SELETTORE E' LUNGO PERCHE' DEVE VINCERE. Quella regola pesa un id, una
   classe e un elemento; scritta piu' corta, questa pareggiava e perdeva per
   ordine di comparsa — e non succedeva niente, che e' il modo peggiore in cui
   una regola CSS puo' sbagliare. Resta comunque chiusa dentro #box-tutori:
   .elenco-stretto la usa anche una pagina del bilancio, e cambiarla la' non
   e' cosa di questo lavoro. */
#contenuto .riquadro #box-tutori ul.elenco-stretto {
    display: block;
    list-style: disc;
    padding-left: var(--sp-5);
}

/* ── La tabella dei tutori ───────────────────────────────────────────────────
   Otto colonne su una riga sola. Lasciate libere, il browser le fa tutte
   uguali: il codice fiscale e le note ricevono la stessa larghezza, la riga
   sfonda di novanta pixel e i tasti Salva ed Elimina finiscono oltre il bordo
   — con lo scorrimento orizzontale che li recupera, ma solo per chi si accorge
   che c'è qualcosa da scorrere.

   Ogni colonna prende quindi la misura di quel che ci va davvero, e le note si
   tengono quel che avanza. «fixed» perché senza, il contenuto piu' lungo
   continuerebbe a decidere lui. */
#box-tutori table { table-layout: fixed; width: 100%; }
#box-tutori th:nth-child(1), #box-tutori td:nth-child(1) { width: 11%; }   /* cognome */
#box-tutori th:nth-child(2), #box-tutori td:nth-child(2) { width: 11%; }   /* nome */
#box-tutori th:nth-child(3), #box-tutori td:nth-child(3) { width: 9.5rem; }/* in qualità di */
#box-tutori th:nth-child(4), #box-tutori td:nth-child(4) { width: 12%; }   /* codice fiscale */
#box-tutori th:nth-child(5), #box-tutori td:nth-child(5) { width: 10%; }   /* telefono */
#box-tutori th:nth-child(6), #box-tutori td:nth-child(6) { width: 14%; }   /* posta */
#box-tutori th:nth-child(7), #box-tutori td:nth-child(7) { width: auto; }  /* note: il resto */
#box-tutori th:nth-child(8), #box-tutori td:nth-child(8) { width: 6.5rem; }/* principale */
#box-tutori th:nth-child(9), #box-tutori td:nth-child(9) { width: 9.5rem; }/* salva ed elimina */
#box-tutori input[type="text"],
#box-tutori input[type="email"],
#box-tutori select { width: 100%; box-sizing: border-box; }

/* Una scelta sì/no scritta per esteso: la casella e la sua frase stanno sulla
   stessa riga e si premono insieme. La usa il campo «Rivista», che la
   nominava già senza che il foglio le desse niente. */
.scelta-in-riga {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    /* LO SPAZIO FRA UNA SCELTA E LA SEGUENTE: il «gap» separa la casella dalla
       sua frase, dentro una scelta sola. Finché ce n'era una per riga —
       il campo «Rivista» — non serviva altro; con tre in fila (sì, no, non
       richiesto) uscivano appiccicate: «Sì○ No●  non richiesto». */
    margin-right: var(--sp-4);
}
.scelta-in-riga:last-child { margin-right: 0; }
.scelta-in-riga input { margin: 0; }

/* ── Un tasto che dice sì o no ───────────────────────────────────────────────
   È la pastiglia delle qualità con una parola sola dentro, che cambia con lo
   stato: piena e «Sì», vuota e «No». In una tabella di campi, una casella da
   spuntare è un bersaglio di dodici pixel accanto a caselle di testo larghe
   trecento, e per sapere che cosa vale bisogna guardare se c'è la spunta; un
   tasto la risposta ce l'ha scritta sopra.

   LO SCAMBIO LO FA IL CSS. Con uno script, chi non ce l'ha vedrebbe il tasto
   riempirsi premendolo — quello è il browser — e la parola restare «No». */
.pastiglia-si-no { min-width: 4.5rem; text-align: center; }
.pastiglia-si-no .se-si { display: none; }
.scelta-nascosta:checked + .pastiglia-si-no .se-si { display: inline; }
.scelta-nascosta:checked + .pastiglia-si-no .se-no { display: none; }

/* La frase che spiega sta accanto al tasto, e non dentro: un tasto porta la
   risposta, non il ragionamento che ci sta dietro. */
.accanto-al-tasto { margin-left: var(--sp-3); }

/* Il filo di briciole: dove si e' e da dove si viene. */
.briciole { font-size: var(--testo-m); margin: 0 0 var(--sp-3); }

.f-mono { font-family: var(--font-mono); }

/* Un avviso dentro una riga di modulo, dove .allarme sarebbe un blocco. */
.allarme-inline { color: var(--rosso-testo); font-weight: 600; }

/* L'albero dei quadri: i livelli si distinguono per rientro e peso. */
.albero-quadro .livello-1 > td:first-child { color: var(--inchiostro); }
.albero-quadro .livello-2 > td:first-child { color: var(--grigio); }
.albero-quadro tr:hover > td { background: var(--zebra); }

/* Un modulo che deve stare in riga accanto a un collegamento: di suo il form
   e' un blocco e manderebbe il pulsante sotto. */
.in-riga { display: inline; margin: 0; }

.filtri-movimenti .riga-filtro { align-items: baseline; }
.senza-a-capo { white-space: nowrap; }

/* ── FILTRO DEGLI ELENCHI ─────────────────────────────────────
   Sta sopra l'elenco che filtra, non nella barra in cima: quella
   cerca fra i soci, questa fra le righe qui sotto, e confonderle
   farebbe cercare nel posto sbagliato.
   ============================================================ */
.riga-filtro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sp-3);
    flex-wrap: wrap;
}

.etichetta-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--testo-s);
    font-weight: 600;
    color: var(--grigio);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.campo-filtro {
    flex: 1 1 240px;
    max-width: 380px;
}

/* Etichetta e campo restano insieme quando la riga va a capo: divisi,
   l'etichetta sembra riferirsi alla tendina della riga successiva. */
.coppia-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}
.coppia-filtro .campo-modulo { width: auto; min-width: 130px; max-width: 240px; }

.esito-filtro {
    font-size: var(--testo-s);
    color: var(--grigio-chiaro);
}

/* ── STATO DELLA SEZIONE ──────────────────────────────────────
   Sta accanto al titolo perche' cambia il senso di tutto cio' che
   segue: su una sezione storica i dati si leggono come un archivio,
   non come la scheda di qualcosa che opera oggi.
   ============================================================ */
.etichetta-stato {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--testo-s);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

/* Dentro un elenco l'etichetta sta in riga con il nome, non accanto a un
   titolo: le serve meno respiro e un corpo piu' piccolo. */
.scheda-titolo .etichetta-stato {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: var(--testo-xs);
}

/* Una sezione storicizzata resta leggibile ma arretra: il nome perde peso e
   la riga si stacca dal bianco delle attive. Non si nasconde — i suoi dati
   servono ancora — ma non compete con chi opera oggi. */
.riga-attenuata { background: var(--fondo); border-color: var(--bordo-forte); }
tr.riga-attenuata > td { background: var(--fondo); }
.riga-attenuata .scheda-nome { color: var(--grigio); font-weight: 500; }

.stato-attiva  { background: var(--verde-tenue); color: var(--verde-testo); }
/* --grigio-tenue dava 3,04:1 su testo di 12px: troppo poco per leggerlo. */
.stato-storica { background: var(--grigio); color: #fff; }

/* ── AVVISO CRITICO ───────────────────────────────────────────
   Piu' marcato di .allarme perche' non segnala l'esito di un'azione
   appena fatta, ma uno stato che perdura: la sezione non puo' emettere
   ricevute finche' non lo risolve. Sta in testata e deve reggere il
   confronto con il titolo della pagina, altrimenti si scorre oltre.
   ============================================================ */
.avviso-critico {
    background: var(--rosso-tenue);
    color: var(--rosso-testo);
    border: 1px solid var(--rosso);
    border-left-width: 5px;
    border-radius: var(--raggio-s);
    padding: 14px 18px;
    margin: var(--sp-4) 0;
}

.avviso-critico h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--testo-l);
    color: var(--rosso-testo);
}

.avviso-critico ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.avviso-critico li { margin: 3px 0; }

.avviso-critico p {
    margin: 0;
    font-size: var(--testo-m);
}

/* Il collegamento porta al campo da compilare: va riconoscibile come
   tale anche dentro un riquadro gia' tutto rosso. */
#contenuto .avviso-critico a:link,
#contenuto .avviso-critico a:visited {
    color: var(--rosso-testo);
    text-decoration: underline;
    font-weight: 600;
}

#contenuto .avviso-critico a:hover { text-decoration: none; }

/* Il campo raggiunto dal collegamento resta evidenziato per un attimo,
   se no si arriva in fondo alla pagina senza capire dove guardare. */
.campo-modulo:target,
.tabella-form tr:target { outline: 2px solid var(--rosso); outline-offset: 2px; }


/* ── PIÈ DI PAGINA ────────────────────────────────────────── */
#footer {
    background: var(--superficie);
    border-top: 1px solid var(--bordo);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--testo-s);
    color: var(--grigio-chiaro);
    text-align: right;
}

#footer a { color: var(--blu); text-decoration: none; font-weight: 500; }
#footer a:hover { text-decoration: underline; }

/* ── PULSANTE-LINK ────────────────────────────────────────── */
/* La specificità conta: #contenuto a:link (un id) batterebbe
   p.pseudopulsante a (una classe), e il testo bianco tornerebbe blu
   su fondo blu — invisibile. */
#contenuto p.pseudopulsante a,
#contenuto p.pseudopulsante a:link,
#contenuto p.pseudopulsante a:visited {
    display: inline-block;
    color: #ffffff;
    background: var(--blu);
    font-size: var(--testo-m);
    font-weight: 500;
    text-decoration: none;
    padding: 9px 15px;
    border-radius: var(--raggio-s);
}

#contenuto p.pseudopulsante a:hover {
    background: var(--blu-scuro);
    color: #ffffff;
    text-decoration: none;
}

/* ── PAGINA DI ACCESSO ────────────────────────────────────── */
body.pagina-login { background: var(--fondo); }
body.pagina-login #navbar { display: none; }

body.pagina-login #testata {
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-2);
    height: auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-5) var(--sp-4);
    text-align: center;
    background: transparent;
    border-bottom: none;
    position: static;
}

body.pagina-login #testata img { height: 62px; }
body.pagina-login #testata-titoli { border-left: none; padding-left: 0; }
body.pagina-login .intestazione-grande { font-size: 20px; white-space: normal; }
body.pagina-login .intestazione-piccola { white-space: normal; }

body.pagina-login #contenuto {
    max-width: 400px;
    min-height: 0;
    margin: 0 auto var(--sp-6) auto;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: var(--sp-5);
}

.login-aiuto {
    margin: var(--sp-4) 0 0 0;
    text-align: center;
    font-size: var(--testo-m);
}

.login-aiuto a { color: var(--blu); text-decoration: none; font-weight: 500; }
.login-aiuto a:hover { text-decoration: underline; }

body.pagina-login #contenuto p { font-size: var(--testo-m); line-height: 1.65; color: var(--grigio); }
body.pagina-login #contenuto h3 { font-size: var(--testo-l); margin-bottom: var(--sp-3); }
body.pagina-login #contenuto strong { color: var(--inchiostro); }

body.pagina-login table { border: none; }
body.pagina-login td, body.pagina-login th {
    border: none;
    background: transparent;
    padding: 6px 0;
    font-size: var(--testo-m);
    font-weight: 500;
    color: var(--grigio);
    text-transform: none;
    letter-spacing: 0;
}
body.pagina-login tr:nth-child(even) td { background: transparent; }
body.pagina-login input[type="text"], body.pagina-login input[type="password"] { width: 100%; }
body.pagina-login button { width: 100%; padding: 11px; font-size: var(--testo); margin-top: var(--sp-2); }

/* ============================================================
   RESPONSIVE — soglia 768px
   ============================================================ */
@media (max-width: 767px) {

    :root { --altezza-testata: 56px; }

    #testata { padding: 0 var(--sp-4); }
    #testata-titoli { display: none; }
    #testata-utente { display: none; }

    /* L'etichetta resta: con i titoli nascosti e' l'unico segno che si sta
       lavorando fuori dalla produzione. Rimpicciolita per stare accanto
       all'hamburger anche sugli schermi stretti; se il testo e' lungo si
       accorcia con i puntini invece di spingere l'hamburger fuori pagina. */
    #etichetta-ambiente {
        font-size: var(--testo-s);
        padding: 4px 10px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #hamburger { display: flex; }

    #navbar {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: none;
        pointer-events: none;
        z-index: 400;
    }

    #nav-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(20, 23, 26, 0.45);
        opacity: 0;
        transition: opacity 0.25s;
        pointer-events: none;
    }

    #nav-overlay.visibile { opacity: 1; pointer-events: auto; }

    #nav-inner {
        position: absolute;
        top: 0; left: 0;
        width: 285px;
        height: 100%;
        padding: var(--altezza-testata) 0 0 0;
        background: var(--blu);
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        pointer-events: auto;
    }

    #nav-inner.aperto { transform: translateX(0); }

    .nav-gruppo { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

    .nav-categoria {
        width: 100%;
        min-height: 48px;          /* bersaglio comodo al tocco */
        padding: 12px var(--sp-4);
        font-size: var(--testo);
        justify-content: space-between;
        border-bottom: none;
    }

    .nav-categoria:hover, .nav-gruppo:hover .nav-categoria {
        background: var(--blu-scuro);
        color: #ffffff;
        border-bottom-color: transparent;
    }

    .nav-dropdown {
        display: none;
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--blu-scuro);
        margin: 0;
        padding: 0;
        min-width: 0;
    }

    .nav-gruppo:hover .nav-dropdown  { display: none; }
    .nav-gruppo.aperto .nav-dropdown { display: block !important; }
    .nav-gruppo.aperto .nav-freccia  { transform: rotate(180deg); }

    .nav-dropdown li a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px var(--sp-5);
        color: rgba(255, 255, 255, 0.88);
        border-radius: 0;
        font-size: var(--testo-m);
    }

    .nav-dropdown li a:hover {
        background: rgba(253, 210, 0, 0.16);   /* oro del marchio */
        color: var(--oro);
    }

    #contenuto { padding: var(--sp-4) var(--sp-3); }
    #contenuto h3 { font-size: 20px; }

    td, th { padding: 9px 10px; }
}

/* ============================================================
   Riscontro visivo della normalizzazione in ingresso.
   I campi elencati vengono salvati in maiuscolo dal server
   (normalizzaTesto() in core/helpers.php): mostrarlo già durante
   la digitazione evita all'operatore la sorpresa di rivedere il
   dato diverso da come l'aveva scritto. È solo resa grafica — il
   valore inviato resta quello digitato.
   ============================================================ */
input[name="nome"], input[name="cognome"], input[name="alias"], input[name="luonas"],
input[name="citta"], input[name="specit"], input[name="indiri"],
input[name="speind"], input[name="codpro"], input[name="spepro"],
input[name="codfis"], input[name="professione"], input[name="desprofessione"],
input[name="incari"], input[name="codrag"] {
    text-transform: uppercase;
}

input[name="email"] { text-transform: lowercase; }

/* ── PAGINA IMPOSTAZIONI ──────────────────────────────────── */
.nota-riquadro {
    font-size: var(--testo-m);
    color: var(--grigio);
    line-height: 1.65;
    margin: var(--sp-3) 0;
}

.chiave-impostazione {
    font-family: var(--font-mono);
    font-size: var(--testo-xs);
    color: var(--grigio-chiaro);
}

.campo-giorno-mese, .campo-importo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.colonna-modifica  { font-size: var(--testo-s); color: var(--grigio); white-space: nowrap; }
.autore-modifica   { color: var(--grigio-tenue); }

.azioni-form { margin: var(--sp-4) 0 var(--sp-2) 0; }

.tabella-form td { vertical-align: middle; }
.tabella-form tr.testata-tabella td { vertical-align: bottom; }

/* ============================================================
   CLASSI DI UTILITÀ
   ============================================================
   Sostituiscono gli attributi style="" sparsi nelle pagine.
   Non è pulizia formale: finché quegli attributi esistevano, la
   Content-Security-Policy doveva ammettere 'unsafe-inline' su
   style-src, e una direttiva che ammette tutto non protegge nulla.
   ============================================================ */

/* Allineamento */
.t-centro   { text-align: center; }
.t-destra   { text-align: right; }
.t-sinistra { text-align: left; }

/* Corpo del testo */
.f-10 { font-size: 10px; }
.f-11 { font-size: var(--testo-xs); }
.f-12 { font-size: var(--testo-s); }
.f-13 { font-size: var(--testo-m); }
.f-14 { font-size: var(--testo); }
.grassetto { font-weight: 600; }
.normale   { font-weight: 400; }
.maiuscolo { text-transform: uppercase; }

/* Colori del testo */
.attenuato       { color: var(--grigio); }
.molto-attenuato { color: var(--grigio-tenue); }
.esito-ok        { color: var(--verde); font-weight: 600; }
.esito-ko        { color: var(--rosso); font-weight: 600; }
.esito-atteso    { color: var(--ambra); font-weight: 600; }
.colore-primario { color: var(--blu); }

/* Fondi */
.fondo-ok      { background: var(--verde-tenue); }
.fondo-ko      { background: var(--rosso-tenue); }
.fondo-atteso  { background: var(--ambra-tenue); }
.fondo-neutro  { background: var(--fondo); }
.fondo-scelto  { background: var(--blu-tenue); }

/* Spaziature interne */
.p-0  { padding: 0; }
.p-6  { padding: 6px; }
.p-8  { padding: var(--sp-2); }
.p-10 { padding: 10px; }
.p-12 { padding: var(--sp-3); }
.p-14 { padding: 14px; }
.p-16 { padding: var(--sp-4); }
.p-20 { padding: 20px; }
.p-etichetta { padding: 2px 8px; border-radius: 4px; display: inline-block; }

/* Margini */
.m-0    { margin: 0; }
.mt-8   { margin-top: var(--sp-2); }
.mt-10  { margin-top: 10px; }
.mt-12  { margin-top: var(--sp-3); }
.mt-16  { margin-top: var(--sp-4); }
.mb-4   { margin-bottom: var(--sp-1); }
.mb-8   { margin-bottom: var(--sp-2); }
.mb-10  { margin-bottom: 10px; }
.mb-12  { margin-bottom: var(--sp-3); }
.ml-6   { margin-left: 6px; }
.ml-8   { margin-left: var(--sp-2); }
.ml-12  { margin-left: var(--sp-3); }
.ml-16  { margin-left: var(--sp-4); }
.mr-8   { margin-right: var(--sp-2); }
.centrato { margin-left: auto; margin-right: auto; }

/* Larghezze — usate soprattutto nelle colonne delle tabelle */
.w-30 { width: 30px; }   .w-40 { width: 40px; }   .w-50 { width: 50px; }
.w-60 { width: 60px; }   .w-70 { width: 70px; }   .w-80 { width: 80px; }
.w-90 { width: 90px; }   .w-100 { width: 100px; } .w-105 { width: 105px; }
.w-110 { width: 110px; } .w-120 { width: 120px; } .w-130 { width: 130px; }
.w-140 { width: 140px; } .w-150 { width: 150px; } .w-170 { width: 170px; }
.w-240 { width: 240px; } .w-300 { width: 300px; }
.w-piena { width: 100%; }
.w-auto  { width: auto; }

.mw-200 { max-width: 200px; }  .mw-400 { max-width: 400px; }
.mw-460 { max-width: 460px; }  .mw-500 { max-width: 500px; }
.mw-600 { max-width: 600px; }

/* Impaginazione */
.flex        { display: flex; }
.flex-inline { display: inline-flex; }
.allinea-centro { align-items: center; }
.a-capo      { flex-wrap: wrap; }
.gap-12      { gap: var(--sp-3); }
.gap-16      { gap: var(--sp-4); }
.blocco      { display: block; }
.in-linea    { display: inline; }
.in-blocco   { display: inline-block; }
.nascosto    { display: none; }
.relativo    { position: relative; }
.cursore     { cursor: pointer; }
.senza-bordo { border: none; }
.riga-alta   { line-height: 1.8; }

/* Messaggio di elenco vuoto: ricorre in quasi tutte le pagine */
.nessun-risultato {
    text-align: center;
    padding: 20px var(--sp-4);
    color: var(--grigio-tenue);
    font-size: var(--testo-m);
}

/* Utilità — secondo giro, per le combinazioni rimaste */
.t-bianco { color: #ffffff; }
.t-oro    { color: var(--oro); }
.senza-sottolineatura { text-decoration: none; }

.pr-6  { padding-right: 6px; }
.pr-8  { padding-right: var(--sp-2); }
.pr-14 { padding-right: 14px; }
.pl-8  { padding-left: var(--sp-2); }
.pl-12 { padding-left: var(--sp-3); }
.pt-8  { padding-top: var(--sp-2); }
.pt-10 { padding-top: 10px; }
.p-5      { padding: 5px; }
.p-18     { padding: 18px; }
.p-6-10   { padding: 6px 10px; }
.p-8-12   { padding: var(--sp-2) var(--sp-3); }
.p-6-14   { padding: 6px 14px; }
.p-6-20   { padding: 6px 20px; }
.p-3-10   { padding: 3px 10px; }
.p-10-20  { padding: 10px 20px; }
.p-4-0    { padding: var(--sp-1) 0; }
.p-scheda { padding: 6px 12px 2px 12px; }

.m-10    { margin: 10px; }
.m-6-10  { margin: 6px 10px; }
.mx-4    { margin: 0 var(--sp-1); }
.my-8    { margin: var(--sp-2) 0; }
.my-12   { margin: var(--sp-3) 0; }
.mt-0    { margin-top: 0; }
.mt-2    { margin-top: 2px; }
.mb-16   { margin-bottom: var(--sp-4); }
.centrato-8 { margin: var(--sp-2) auto; }

.fondo-primario { background: var(--blu); }
.fondo-grigio   { background: var(--grigio-tenue); }
.bordo-errore   { border-color: var(--rosso); }
.bordo-leggero  { border: 1px solid var(--bordo-forte); }
.bordo-alto     { border-top: 1px solid var(--separatore); }
.bordo-alto-primario { border-top: 2px solid var(--blu); }
.bordo-sinistro { border-left: 1px solid var(--bordo); }
.raggio         { border-radius: var(--raggio-s); }
.cursore-vietato { cursor: not-allowed; }

/* Elenco dei suggerimenti sotto i campi di ricerca (gest_tess.php) */
.suggerimenti {
    /* Nascosto finché il JavaScript non ha risultati da mostrare: senza
       questo resta a video un riquadro bianco vuoto sotto il campo. */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
    box-shadow: var(--ombra-alta);
    z-index: 500;
    max-height: 240px;
    overflow-y: auto;
    width: 300px;
}

/* Etichette e pulsanti minuti ricorrenti in duplicati.php */
.etichetta-stato { padding: 2px 10px; border-radius: 20px; font-size: var(--testo-s); display: inline-block; }
.etichetta-piccola { padding: 2px 8px; border-radius: 20px; font-size: var(--testo-xs); display: inline-block; }
.pulsante-mini  { font-size: 10px; padding: 2px 6px; background: var(--blu); color: #fff;
                  border-radius: 4px; text-decoration: none; display: inline-block; }
.pulsante-piccolo { font-size: var(--testo-xs); padding: 3px 8px; background: var(--blu); color: #fff;
                  border-radius: 4px; text-decoration: none; display: inline-block; }
.pulsante-pericolo   { padding: 9px 24px; background: var(--rosso); color: #fff; border: none;
                       border-radius: var(--raggio-s); cursor: pointer; }

/* ── IL TASTO PRINCIPALE DI UNA PAGINA ───────────────────────────────────
   Piu' grande dei pulsanti di riga perche' non e' un'azione fra tante: e'
   la destinazione verso cui si esce da questa pagina, e va vista senza
   cercarla. L'icona sta a sinistra del testo e ci si allinea al centro: un
   segno e una parola sulla stessa base leggono come una cosa sola. */
.pulsante-grande {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    background: var(--blu);
    border-radius: var(--raggio-s);
    text-decoration: none;
    font-size: var(--testo-l);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.azioni-testata { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--sp-3) 0 var(--sp-4) 0; }

/* La variante contornata dello stesso tasto: due tasti pieni affiancati si
   contendono l'attenzione e nessuno dei due la ottiene. Il colore del testo
   NON sta qui ma in fondo, nel blocco della precedenza sui link: li' il
   pulsante pieno dichiara il bianco, e una dichiarazione di pari forza scritta
   prima perderebbe — testo bianco su fondo trasparente, cioe' invisibile. */
.pulsante-grande.pulsante-contornato {
    background: transparent;
    border: 2px solid var(--blu);
}

/* ── LE TESTATE DI COLONNA CHE ORDINANO ──────────────────────────────────
   Il collegamento prende il colore della testata invece del blu dei link:
   otto testate blu in fila sembrerebbero otto voci di menu, e la riga
   smetterebbe di leggersi come l'intestazione della tabella. Che siano
   premibili lo dicono il passaggio del mouse e la freccia di quella
   corrente. */
#contenuto a.ordina-colonna,
#contenuto a.ordina-colonna:link,
#contenuto a.ordina-colonna:visited { color: inherit; text-decoration: none; }
#contenuto a.ordina-colonna:hover   { color: var(--blu); text-decoration: underline; }
.pulsante-secondario { padding: 9px 16px; background: var(--grigio); color: #fff;
                       border-radius: var(--raggio-s); text-decoration: none; display: inline-block; }
.riga-gruppo td { background: var(--separatore); font-weight: 600; }

/* Stati di riga generati dal codice */
.riga-saldata  { background: var(--verde-tenue); }
.riga-bloccata { background: var(--rosso-tenue); }
.ordinamento-attivo { font-weight: 600; }
.colore-ereditato { color: inherit; }
.ordinamento-attivo { text-decoration: underline; font-weight: 600; }

/* Confronto duplicati (admin/duplicati.php) */
.livello-certa { background: var(--rosso);  color: #fff; }
.livello-alta  { background: var(--ambra);  color: #fff; }
.livello-media { background: #8a7f3d;       color: #fff; }
.livello-bassa { background: var(--grigio); color: #fff; }

.cella-recuperabile { background: var(--verde-tenue); }
.cella-discorde     { background: var(--ambra-tenue); }
.cella-conflitto    { background: var(--rosso-tenue); }

.intestazione-gruppo {
    background: var(--separatore);
    font-weight: 600;
    font-size: var(--testo-xs);
    padding: var(--sp-1) var(--sp-2);
    color: var(--inchiostro);
}

/* Pagina di errore generata da core/bootstrap.php */
.pagina-errore {
    max-width: 640px;
    margin: 60px auto;
    text-align: center;
    padding: 0 var(--sp-4);
}
.pagina-errore h1 { color: var(--rosso); font-size: var(--titolo); font-weight: 600; }
.pagina-errore p  { color: var(--grigio); line-height: 1.7; }
.riferimento-errore {
    background: var(--separatore);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--testo-s);
}
.dettaglio-errore {
    text-align: left;
    background: var(--fondo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    padding: var(--sp-3);
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--testo-s);
}

/* ============================================================
   PRECEDENZA SUI COLORI DEI LINK
   ============================================================
   #contenuto a:link usa un id e batte qualunque classe: un link con
   .t-bianco o .pulsante-* tornava blu, e su fondo blu spariva. È già
   successo tre volte (pulsante di recupero password, collegamenti nella
   scheda socio, pulsanti in duplicati). Qui le classi vengono ridichiarate
   con la stessa forza, così il problema non si ripresenta.
   ============================================================ */
#contenuto a.pulsante-mini,      #contenuto a.pulsante-mini:link,      #contenuto a.pulsante-mini:visited,
#contenuto a.pulsante-piccolo,   #contenuto a.pulsante-piccolo:link,   #contenuto a.pulsante-piccolo:visited,
#contenuto a.pulsante-secondario,#contenuto a.pulsante-secondario:link,#contenuto a.pulsante-secondario:visited,
#contenuto a.pulsante-grande,    #contenuto a.pulsante-grande:link,    #contenuto a.pulsante-grande:visited,
#contenuto a.t-bianco,           #contenuto a.t-bianco:link,           #contenuto a.t-bianco:visited {
    color: #ffffff;
}

#contenuto a.pulsante-mini:hover,
#contenuto a.pulsante-piccolo:hover,
#contenuto a.pulsante-secondario:hover,
#contenuto a.pulsante-grande:hover,
#contenuto a.t-bianco:hover { color: #ffffff; text-decoration: none; }

/* Il contornato viene DOPO il pieno e con la stessa forza: e' la sua
   eccezione, e deve poterla vincere. */
#contenuto a.pulsante-contornato,
#contenuto a.pulsante-contornato:link,
#contenuto a.pulsante-contornato:visited,
#contenuto a.pulsante-contornato:hover { color: var(--blu); text-decoration: none; }
#contenuto a.pulsante-contornato:hover { background: var(--blu-tenue); color: var(--blu-scuro); }

#contenuto a.pulsante-mini:hover,
#contenuto a.pulsante-grande:hover,
#contenuto a.pulsante-piccolo:hover { background: var(--blu-scuro); }

#contenuto a.attenuato,       #contenuto a.attenuato:link       { color: var(--grigio); }
#contenuto a.molto-attenuato, #contenuto a.molto-attenuato:link { color: var(--grigio-tenue); }
#contenuto a.esito-ok,        #contenuto a.esito-ok:link        { color: var(--verde); }
#contenuto a.esito-ko,        #contenuto a.esito-ko:link        { color: var(--rosso); }
#contenuto a.t-oro,           #contenuto a.t-oro:link           { color: var(--oro); }
#contenuto a.colore-ereditato,#contenuto a.colore-ereditato:link{ color: inherit; }

/* I fondi tenui servono a righe, celle ed etichette, dove il testo è scuro.
   Su un pulsante — che ha testo bianco — diventerebbero illeggibili: lì le
   stesse classi valgono nella versione piena. */
button.fondo-ko,     #contenuto a.fondo-ko,     #contenuto a.fondo-ko:link     { background: var(--rosso);  color: #fff; }
button.fondo-atteso, #contenuto a.fondo-atteso, #contenuto a.fondo-atteso:link { background: var(--ambra);  color: #fff; }
button.fondo-grigio, #contenuto a.fondo-grigio, #contenuto a.fondo-grigio:link { background: var(--grigio); color: #fff; }
button.fondo-ok,     #contenuto a.fondo-ok,     #contenuto a.fondo-ok:link     { background: var(--verde);  color: #fff; }
/* Il giallo del marchio è chiaro: qui il testo va scuro, non bianco — bianco
   su #fdd200 darebbe un contrasto di 1,5:1, cioè illeggibile. Con l'inchiostro
   siamo a 13:1. È la ragione per cui questa riga non segue le altre quattro. */
button.fondo-giallo, #contenuto a.fondo-giallo, #contenuto a.fondo-giallo:link { background: var(--oro); color: var(--inchiostro); }

button.fondo-ko:hover     { background: #9c2a15; }
button.fondo-atteso:hover { background: #96430f; }
button.fondo-grigio:hover { background: var(--inchiostro); }
button.fondo-giallo:hover { background: #e6bf00; }

button.fondo-grigio.cursore-vietato,
button.fondo-grigio:disabled { background: #eff2f5; color: var(--grigio-tenue); }
.anno-in-corso {
    font-size: var(--numero);
    font-weight: 600;
    letter-spacing: -0.8px;
    color: var(--blu);
    margin: var(--sp-3) 0 var(--sp-2) 0;
    font-variant-numeric: tabular-nums;
}

/* Icone dentro pulsanti e link: allineate al testo e dello stesso colore. */
.icona { vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }
button, .pulsante-mini, .pulsante-piccolo, .pulsante-secondario, p.pseudopulsante a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    /* Un pulsante e un collegamento a forma di pulsante devono avere la stessa
       altezza e stare sulla stessa riga. Due cose lo impedivano:

       line-height — i controlli di modulo non ereditano l'interlinea del
       documento, quindi il <button> restava a «normal» mentre l'<a> prendeva
       quella del corpo del testo: 21px contro 22,5px, uno visibilmente piu'
       basso dell'altro.

       vertical-align — con l'allineamento alla linea di base, la base di un
       riquadro flessibile cambia a seconda di che cosa contiene: un pulsante
       con un'icona si posava 2,5px piu' in alto di uno con il solo testo.
       Con «middle» il contenuto non conta piu'. */
    line-height: 1.5;
    vertical-align: middle;
}
button .icona, a .icona { margin-right: 0; }

/* Campi di un modulo di inserimento: stessa larghezza per tutti, così le
   caselle formano una colonna regolare invece di una scaletta. Il limite
   di caratteri resta sul singolo campo, dove è un vincolo sul dato. */
.campo-modulo {
    width: 320px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .campo-modulo { width: 100%; }
}

/* ── CAMPO DATA ───────────────────────────────────────────────
   Casella di testo e pulsante calendario formano un solo controllo:
   il bordo è sul contenitore, così i due pezzi non sembrano staccati.
   ------------------------------------------------------------ */
.campo-data {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
    background: var(--superficie);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.campo-data:focus-within {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(18, 74, 134, 0.14);
}

.campo-data .campo-data-testo {
    border: none;
    border-radius: 0;
    background: transparent;
    width: 118px;
    padding: 8px 10px;
}

.campo-data .campo-data-testo:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.campo-data-pulsante {
    display: flex;
    align-items: center;
    justify-content: center;
    /* NON SI STRINGE MAI. Dentro una colonna stretta il campo data è un flex, e
       il tasto del calendario si lasciava schiacciare a ventotto pixel: l'icona
       ci finiva dentro di traverso. Trentasei sono trentasei. */
    flex: 0 0 36px;
    width: 36px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--bordo);
    border-radius: 0;
    background: var(--fondo);
    color: var(--grigio);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.campo-data-pulsante:hover { background: var(--blu-tenue); color: var(--blu); }
.campo-data-pulsante .icona { margin: 0; }

/* Il campo nativo serve solo ad aprire il calendario: resta fuori vista,
   e compare soltanto sui browser che non sanno aprirlo da soli. */
.campo-data-nascosto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0;
    opacity: 0;
    pointer-events: none;
}

.campo-data-nascosto.visibile {
    position: static;
    width: auto; height: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 8px 10px;
    border-left: 1px solid var(--bordo);
}

/* Nel modulo di inserimento il campo data si allinea agli altri */
.campo-modulo.campo-data-testo { width: 100%; }
.campo-data.campo-modulo { width: 320px; max-width: 100%; padding: 0; }

/* Etichette di stato: le versioni tenui vanno con testo scuro */
.etichetta-piccola.fondo-ok      { color: var(--verde-testo); }
.etichetta-piccola.fondo-ko      { color: var(--rosso-testo); }
.etichetta-piccola.fondo-atteso  { color: var(--ambra); }
.etichetta-piccola.fondo-neutro  { color: var(--grigio); }
/* Il blu tenue va col testo blu, come gli altri tre: senza, la pastiglia
   «assegnata» resterebbe nera su azzurro e si leggerebbe come disattivata. */
.etichetta-piccola.fondo-scelto  { color: var(--blu); }

/* Pannello dei trasferimenti in home */
.pannello-trasferimenti .riga-richiesta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 0;
    border-bottom: 1px solid var(--riga);
    flex-wrap: wrap;
}
.pannello-trasferimenti .riga-richiesta:last-child { border-bottom: none; }
.pannello-trasferimenti .socio { font-weight: 600; }
.pannello-trasferimenti .verso { color: var(--grigio); font-size: var(--testo-m); }
.pannello-trasferimenti .azioni { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

/* Richiesta di passaggio dal riquadro dei duplicati */
.modulo-passaggio {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: var(--sp-3) 0;
}

/* I titoli che aprono e chiudono una sezione sono cliccabili: si vede. */
.sezione-toggle { cursor: pointer; user-select: none; }
.sezione-toggle:hover { color: var(--blu); }

/* ── ELENCO DI SCHEDE RICHIUDIBILI ────────────────────────────
   Sessanta moduli aperti uno sotto l'altro non sono un elenco: qui a
   colpo d'occhio si leggono i nomi, e si apre solo quello che serve.
   ------------------------------------------------------------ */
.elenco-schede {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scheda-collassabile {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    background: var(--superficie);
    overflow: hidden;
}

.scheda-titolo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    width: 100%;
    padding: 11px var(--sp-3);
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    color: var(--inchiostro);
    transition: background 0.12s;
}

.scheda-titolo:hover { background: var(--fondo); }

.scheda-titolo .freccia {
    color: var(--grigio-tenue);
    font-size: 10px;
    flex-shrink: 0;
}

/* Il nome è ciò che si cerca scorrendo l'elenco: sta davanti a tutto. */
.scheda-nome {
    font-size: var(--testo);
    font-weight: 600;
    color: var(--inchiostro);
}

.scheda-nota {
    font-size: var(--testo-s);
    color: var(--grigio);
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheda-corpo {
    padding: var(--sp-3);
    border-top: 1px solid var(--separatore);
    background: var(--fondo);
}

.scheda-azioni {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

@media (max-width: 767px) {
    .scheda-titolo { flex-wrap: wrap; }
    .scheda-nota   { margin-left: 0; width: 100%; text-align: left; }
}

/* Collegamento alla scheda completa, sotto il titolo di una riga richiudibile */
/* Titolo e collegamento affiancati: sono due comandi distinti sulla stessa
   riga. Il titolo prende lo spazio che avanza, il collegamento sta in coda e
   non si lascia comprimere — un «Scheda completa →» tagliato a meta' non e'
   piu' un comando riconoscibile. */
.scheda-riga { display: flex; align-items: stretch; }

.scheda-riga .scheda-titolo { flex: 1 1 auto; min-width: 0; }

.scheda-collegamento,
.scheda-collegamento:link,
.scheda-collegamento:visited {
    display: flex;
    align-items: center;
    /* In un contenitore flex lo spazio fra due figli non e' un carattere ma
       niente: senza «gap» la freccia si attacca alla parola. */
    gap: 5px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 var(--sp-3);
    border-left: 1px solid var(--bordo);
    font-size: var(--testo-s);
    white-space: nowrap;
    text-decoration: none;
}

.scheda-collegamento:hover { background: var(--blu-tenue); text-decoration: underline; }

/* Sotto i 560 px il nome, lo stato, l'identificativo e il collegamento non
   ci stanno in fila: il collegamento torna sotto, dove ha spazio, invece di
   schiacciare il nome che e' la cosa che si sta cercando. */
@media (max-width: 560px) {
    .scheda-riga { flex-wrap: wrap; }
    .scheda-riga .scheda-titolo { flex: 1 0 100%; }
    .scheda-collegamento,
    .scheda-collegamento:link,
    .scheda-collegamento:visited {
        flex: 1 0 100%;
        justify-content: flex-end;
        padding: 0 var(--sp-3) 10px;
        border-left: none;
    }
}


/* ============================================================
/* ============================================================
   STATISTICHE — i grafici stanno in css/statistiche.css, importato
   in cima a questo foglio. Sono in un file loro perche' li usa anche
   css/stampa.css, che di stile.css non sa nulla.
   ============================================================ */

/* Il filtro per stato in testa a un elenco: due o tre voci con il loro
   conteggio, quella attiva evidente senza doverla cercare. */
.filtro-stato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#contenuto .scelta-filtro,
#contenuto .scelta-filtro:link,
#contenuto .scelta-filtro:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--bordo-forte);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--grigio);
    font-size: var(--testo-s);
    text-decoration: none;
}
#contenuto .scelta-filtro:hover { background: var(--blu-tenue); color: var(--blu-scuro); }
#contenuto .scelta-filtro-attiva,
#contenuto .scelta-filtro-attiva:link,
#contenuto .scelta-filtro-attiva:visited {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
    font-weight: 600;
}
/* La ricerca accanto alle pastiglie: etichetta, campo ed esito viaggiano
   insieme, e il campo non si allarga a tutta la riga — cerca un nome di
   sezione, non un paragrafo. */
.gruppo-cerca {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.campo-cerca-stretto { flex: 0 1 210px; min-width: 130px; }

.gruppo-cerca .esito-filtro { font-size: var(--testo-s); color: var(--grigio); white-space: nowrap; }

@media (max-width: 720px) {
    /* Senza spazio la ricerca va a capo da sola e si prende la riga: e'
       meglio di un campo largo due centimetri schiacciato in fondo. */
    .gruppo-cerca { margin-left: 0; flex: 1 0 100%; }
    .campo-cerca-stretto { flex: 1 1 auto; }
}

.scelta-filtro-numero {
    font-variant-numeric: tabular-nums;
    opacity: .75;
    font-size: var(--testo-xs);
}


/* Il riquadro della propria sezione in home: quattro requisiti, ognuno con il
   suo esito. Non e' una lista da leggere in fila, e' un quadro da guardare. */
.elenco-requisiti {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-1) var(--sp-4);
    margin: 0 0 var(--sp-3);
    padding: 0;
    font-size: var(--testo-m);
}
.elenco-requisiti li { display: flex; align-items: center; gap: var(--sp-2); }
/* Il segno non basta da solo: chi non distingue i colori vede comunque
   spunta contro crocetta, e chi non vede affatto legge «manca»/«presente». */
.requisito-ok    { color: var(--verde-testo); }
.requisito-manca { color: var(--rosso-testo); font-weight: 600; }


/* Il registro delle modifiche: una data, sotto le sue voci. */
.giorno-registro { margin-top: var(--sp-4); }
.elenco-registro { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); font-size: var(--testo-m); }
.elenco-registro li { margin-bottom: 3px; }


/* Quel che manca ma non impedisce di lavorare: si vede, ma non grida. Accanto
   all'avviso critico dev'essere evidente che sono due cose di peso diverso. */
.avviso-da-finire {
    background: var(--oro-tenue);
    border: 1px solid var(--oro-bordo);
    border-left: 3px solid var(--ambra);
    border-radius: var(--raggio-s);
    padding: 10px var(--sp-4);
    margin: 0 0 var(--sp-4);
    font-size: var(--testo-m);
}
.avviso-da-finire p { margin: 0; }


/* Le barre del ricambio stanno in css/statistiche.css insieme agli altri
   grafici: le disegna barreRicambio() in stat/_grafici.php, e le usano sia
   il cruscotto sia le stampe. */

/* L'elenco ordinato delle migrazioni da eseguire: si legge e si esegue in fila. */
.elenco-migrazioni { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--testo-m); }
.elenco-migrazioni li { margin-bottom: 6px; }


/* Il testo lungo dell'informativa: si legge, quindi righe corte e respiro fra
   una sezione e l'altra. Senza limite di larghezza, su uno schermo grande le
   righe diventano lunghe il doppio di quanto l'occhio segue senza perdersi. */
.testo-lungo h3 {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: var(--testo-l);
    color: var(--blu-scuro);
}
.testo-lungo h3:first-child { margin-top: 0; }
.testo-lungo h4 {
    margin: var(--sp-4) 0 var(--sp-1);
    font-size: var(--testo);
    padding: 0;
}
/* La misura si limita sul RIQUADRO, non sui paragrafi. Limitando i paragrafi,
   la scatola restava larga quanto la pagina e il testo si fermava a metà:
   settecento pixel di bianco a destra, che non sembrano una scelta ma un
   difetto. Stringendo la scatola, il riquadro combacia con quel che contiene
   e la pagina si legge come un documento. */
/* 38rem = 608 px: tolti i 32 di rientro restano 576 px di testo, cioe' poco
   meno di ottanta caratteri per riga — la misura in cui l'occhio ritrova
   l'inizio della riga successiva senza cercarlo. */
.riquadro.testo-lungo { max-width: 38rem; }

/* Il riquadro di modifica è più largo: dentro c'è un campo di scrittura, e
   scrivere in una colonna stretta è scomodo. Resta comunque limitato, perché
   su un monitor molto grande un campo largo duemila pixel non si governa. */
.riquadro.riquadro-testo { max-width: 62rem; }

.testo-lungo p,
.testo-lungo li {
    line-height: 1.6;
    font-size: var(--testo-m);
}
/* I pallini vanno rimessi: «#contenuto .riquadro ul» li toglie a tutti gli
   elenchi dentro un riquadro — giusto per gli elenchi di collegamenti, che
   sono la maggioranza — e vince per specificità. Qui l'elenco è prosa, non
   navigazione, e senza pallini le voci si leggevano come paragrafi staccati.
   Il selettore è «.riquadro.testo-lungo» SENZA spazio: le due classi stanno
   sullo stesso elemento, e con lo spazio si chiedeva un discendente che non
   esiste — la regola non si applicava affatto. */
#contenuto .riquadro.testo-lungo ul,
.testo-lungo ul {
    list-style: disc;
    display: block;
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-5);
}
.testo-lungo li { margin-bottom: 4px; display: list-item; }

/* Il campo in cui la Segreteria riscrive il testo: grande, a caratteri di
   larghezza fissa, perché i segni di formattazione si vedano allineati. */
.area-testo-lunga {
    width: 100%;
    min-height: 460px;
    font-family: var(--font-mono);
    font-size: var(--testo-s);
    line-height: 1.5;
    resize: vertical;
}

/* Il collegamento nel piè di pagina: presente, non invadente — ma leggibile.
   Ereditando il colore del piè di pagina stava a 3,65:1, sotto la soglia di
   4,5:1 per il testo: qui è più scuro (5,5:1) e questo lo distingue anche dal
   testo attorno, che è quel che ci si aspetta da un collegamento. */
#footer .collegamento-privacy,
#footer .collegamento-privacy:link,
#footer .collegamento-privacy:visited,
#footer .collegamento-versione,
#footer .collegamento-versione:link,
#footer .collegamento-versione:visited {
    color: var(--grigio);
    text-decoration: underline;
}
#footer .collegamento-privacy:hover,
#footer .collegamento-versione:hover { color: var(--blu); }

/* Le azioni in fondo a una riga: stessa misura per tutte, qualunque sia la
   parola che portano. Senza, «Simula» misurava 48 px, «Elimina» 50 e
   «Modifica» 55, e incolonnati uno sotto l'altro facevano una scaletta.
   Il bordo trasparente non è un vezzo: l'etichetta spenta un bordo ce l'ha, e
   senza questo era due pixel più alta delle altre. */
.azione-riga {
    display: inline-block;
    box-sizing: border-box;
    min-width: 64px;
    text-align: center;
    border: 1px solid transparent;
}

/* Un'azione che qui non si può fare: si vede che esiste, si vede che è spenta,
   e passandoci sopra si legge perché. Sparire sarebbe peggio — lascerebbe
   chiedersi se quel pulsante ci sia mai stato. */
.etichetta-spenta {
    background: var(--separatore);
    color: var(--grigio);
    border-color: var(--bordo-forte);
    cursor: help;
}

/* Le azioni di una riga: affiancate, ma a posti fissi, cosi' che scorrendo la
   tabella con l'occhio ogni pulsante si trovi sempre nella stessa colonna.
   I <form> che avvolgono i pulsanti diventano elementi della fila come gli
   altri: senza, ognuno formerebbe un blocco per conto suo. */
.azioni-riga {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.azioni-riga form { margin: 0; display: contents; }

/* Il posto che tiene la colonna dove l'azione non si applica. Vuoto alla
   vista e muto per chi legge con un lettore di schermo: non e' un pulsante
   spento, e' spazio. */
.azione-vuota { visibility: hidden; }

/* Le delibere di affiliazione: il tipo si riconosce dal colore prima che dalla
   parola — si apre, si conferma, si chiude. */
.delibera-avvio      { background: var(--blu-tenue);   color: var(--blu-scuro); }
.delibera-conferma   { background: var(--verde-tenue); color: var(--verde-testo); }
.delibera-esclusione { background: var(--rosso-tenue); color: var(--rosso-testo); }

/* Le delibere di associazione di una persona: stessa lettura per colore —
   verde chi entra, rosso chi esce — cosi' chi ha imparato a leggere quelle
   delle Sezioni non deve impararlo una seconda volta. */
.delibera-ammissione { background: var(--verde-tenue); color: var(--verde-testo); }
.delibera-decadenza  { background: var(--rosso-tenue); color: var(--rosso-testo); }

/* Il volontariato e' un'altra storia dalla qualita' di socio, e si legge
   come tale: azzurro chi entra, ambra chi cessa — vicini a verde e rosso per
   il verso, distinti per la famiglia. */
.delibera-ammissione_volontario { background: var(--blu-tenue);   color: var(--blu-scuro); }
.delibera-decadenza_volontario  { background: var(--ambra-tenue); color: var(--ambra); }

/* Il volontariato per l'associazione: stessa coppia di colori con il bordo
   marcato, perche' e' la stessa cosa deliberata da un altro organo — e chi
   guarda deve distinguerle senza leggerle. */
.delibera-ammissione_volontario_naz {
    background: var(--blu-tenue); color: var(--blu-scuro);
    box-shadow: inset 0 0 0 1px var(--blu);
}
.delibera-decadenza_volontario_naz {
    background: var(--ambra-tenue); color: var(--ambra);
    box-shadow: inset 0 0 0 1px var(--ambra);
}

/* La pastiglia del tipo non va a capo: «Delibera di ammissione a volontario»
   spezzata su tre righe alza la riga della tabella e non si legge come
   un'etichetta. La colonna si allarga quanto basta a contenerla. */
.pastiglia-delibera { white-space: nowrap; }

/* La colonna con la casella di scelta nelle pagine di ammissione e decadenza
   dei volontari: stretta quanto basta, se no si porta via la larghezza dei
   nomi, che sono la cosa che si legge. */
.col-scelta { width: 2.5em; }

/* ── LA DATA DELL'ULTIMO MOVIMENTO, ACCANTO AL TASTO DI STAMPA ───────────
   Piccola e attenuata: non e' un comando, e' la risposta alla domanda che ci
   si fa guardando il tasto. Va a capo prima del tasto quando lo spazio non
   basta, perche' il tasto e' la cosa che si preme. */
.data-aggiornamento {
    font-size: var(--testo-xs);
    color: var(--grigio);
    white-space: nowrap;
}

/* ── GLI ESTREMI IN TESTA A UN RIQUADRO ──────────────────────────────────
   Le poche cose che identificano quel che si sta guardando — sezione, data,
   quante persone — in fila e non incolonnate: sono tre o quattro, e una
   tabella per tre coppie e' piu' struttura di quanta ne serva. */
/* A COLONNE E NON IN FILA. Con «flex» ogni voce era larga quanto il suo
   contenuto e la riga finiva dove capitava: su uno schermo largo, cinque dati
   corti si accalcavano a sinistra e restava un terzo di riga bianco. A griglia
   le colonne si dividono lo spazio in parti uguali e la fascia arriva in
   fondo; «auto-fit» ne mette quante ce ne stanno, e sul telefono diventa una
   colonna sola senza bisogno di dirglielo. */
.estremi-riquadro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3) var(--sp-5);
    margin: 0 0 var(--sp-3);
}
.estremi-riquadro div { margin: 0; }
.estremi-riquadro dt {
    font-size: var(--testo-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grigio);
}
.estremi-riquadro dd { margin: 0; font-weight: 600; }

/* ── LA STORIA DI UNA DOMANDA, nel riquadro del corso ────────────────────
   Un fatto per riga, l'etichetta a sinistra e il fatto a destra: si legge
   dall'alto in basso come una storia, che e' quel che e' — mandata, spostata,
   decisa, e com'e' andato il corso.

   NON UNA GRIGLIA A COLONNE come gli estremi di un riquadro: li' i dati sono
   alla pari e l'ordine non conta, qui l'ordine E' l'informazione. E una frase
   d'attestato lunga due righe in una colonna stretta si legge a spizzichi.

   SOTTO I SEICENTO l'etichetta va sopra: due colonne su uno schermo di
   telefono lascerebbero al fatto un terzo di riga. */
.storia-domanda {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: var(--sp-1) var(--sp-4);
    margin: 0 0 var(--sp-3);
    font-size: var(--testo-s);
}
.storia-domanda dt {
    margin: 0;
    color: var(--grigio);
}
.storia-domanda dd { margin: 0; }
@media (max-width: 600px) {
    .storia-domanda { grid-template-columns: 1fr; gap: 0 0; }
    .storia-domanda dt { margin-top: var(--sp-2); }
}

/* ── I TESTI STANDARD DELLE DELIBERE (impostazioni) ──────────────────────
   Un modulo per tipo, separati da una riga: sono cinque blocchi identici, e
   senza un confine si leggono come un unico modulo lunghissimo in cui non si
   capisce quale tasto salva che cosa. */
.titolo-gruppo-modelli {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: var(--testo-m);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grigio);
}
.modulo-modello {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    background: var(--fondo);
}

/* Un testo deliberativo e' lungo tre righe: una casella di una riga lo
   nasconde mentre lo si scrive, che e' esattamente quando serve vederlo. */
.campo-testo-delibera {
    width: 100%;
    min-height: 90px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

/* Anche l'oggetto vuole tutta la larghezza: e' l'intestazione del verbale, e
   in trenta caratteri se ne legge un terzo. */
.campo-oggetto-delibera { width: 100%; box-sizing: border-box; }

/* ── L'ELENCO DELLE DELIBERE DI UNA PERSONA ──────────────────────────────
   Il testo deliberativo occupa la colonna larga e va a capo come e' stato
   scritto: e' la parte che si rilegge, e schiacciata in una riga non si
   rilegge. Data, tipo e tasti prendono lo stretto indispensabile. */
.tabella-delibere .col-delibera-data   { width: 6.5em; }
.tabella-delibere .col-delibera-tipo   { width: 21em; white-space: nowrap; }
.tabella-delibere .col-delibera-azioni { width: 6em; }

/* Il dettaglio aperto sotto la riga: rientrato e su fondo tenue, cosi' si
   vede a colpo d'occhio a quale riga appartiene. */
.dettaglio-delibera {
    padding: var(--sp-3) var(--sp-4);
    background: var(--fondo);
    border-left: 3px solid var(--blu);
}
.dettaglio-delibera .modulo-delibera { margin-bottom: var(--sp-3); }
.testo-delibera {
    margin: 4px 0 0;
    font-size: var(--testo-s);
    line-height: 1.5;
    color: var(--grigio);
}

/* NEL REGISTRO IL TESTO E' IL DOCUMENTO, non una nota a margine: .testo-delibera
   lo attenua perche' li' sta stretto sotto l'oggetto, in un elenco. Nella
   pagina della singola delibera e' quel che si e' venuti a leggere, e va letto
   come si legge un verbale — corpo pieno, righe non troppo lunghe, gli a capo
   di chi l'ha scritto rispettati. */
.testo-delibera-esteso {
    max-width: 62em;
    line-height: 1.6;
    /* Gli a capo li mette nl2br in PHP: aggiungere qui «pre-line» li
       raddoppierebbe, un <br> e un ritorno a capo per ogni riga. */
}

/* ── LE RIGHE MODIFICABILI DEL PERCORSO SCOUT ────────────────────────────
   I campi prendono la larghezza della loro colonna invece di imporla: con
   sei colonne di tendine la somma dei minimi sbordava dal riquadro, e la
   tabella si trascinava di lato anche su uno schermo che l'avrebbe
   contenuta. Stessa cura gia' presa per le tabelle di base. */
.tabella-percorso td { vertical-align: top; }
.tabella-percorso select,
.tabella-percorso input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tabella-percorso .col-percorso-azioni { width: 9em; }
/* ── L'ANNO E L'ESITO DEI PASSAGGI DI FORMAZIONE ───────────────────────────
   NOMI LORO, e non «c-anno» e «c-esito». «.c-esito» in questo foglio c'era
   gia' — e' la colonna della validazione dell'organigramma, larga 7.5em — e
   arrivando dopo vinceva: la tendina dei passaggi restava larga quanto una
   pastiglia, e «Non superato» ci finiva dentro tagliato. Un nome generico su
   una cosa specifica prima o poi incontra l'altro che se lo era preso.

   LA LARGHEZZA SI DA' AL CAMPO E NON SOLO ALLA CELLA. In una tabella che si
   dispone da sola la larghezza di una colonna e' un suggerimento, e con le
   note lunghe accanto il suggerimento perde: un «min-width» sul campo, invece,
   e' una misura che la colonna non puo' scendere sotto.

   L'ANNO E' DI QUATTRO CIFRE e non gliene servono di piu'; l'esito e' una
   tendina di tre voci e la piu' lunga e' «Non superato», che si deve leggere
   intera, freccia compresa. Quel che si toglie all'uno va all'altra, e le
   note — l'unica colonna che si allunga quanto vuole — restano larghe. */
.col-formazione-anno { width: 6em; }
/* «input[type="text"]» E NON «input»: qui sopra c'è «.tabella-percorso
   input[type="text"] { min-width: 0 }», e un selettore con un attributo pesa
   quanto una classe in più. Scritto «.col-formazione-anno input» perdeva
   comunque, per quanto venisse dopo: la casella dell'anno restava larga due
   cifre e la misura che avevo messo non la leggeva nessuno. Stessa forma,
   stesso peso, e a parità vince chi viene dopo. */
.col-formazione-anno input[type="text"] { min-width: 4.5em; }

.col-formazione-esito { width: 10.5em; white-space: nowrap; }
.col-formazione-esito select { width: 100%; min-width: 9.5em; }

/* ── LO SPAZIO FRA UN CAMPO E L'ALTRO ──────────────────────────────────────
   Dodici punti per lato sono la misura di una tabella che si legge — righe di
   testo, con dell'aria intorno. Questa invece è un modulo: le celle sono
   campi attaccati l'uno all'altro, e quei ventiquattro punti fra un campo e
   il successivo li toglieva ai campi stessi, che sono la cosa da leggere.
   Quattro per lato bastano a non farli sembrare uno solo. */
.tabella-percorso td,
.tabella-percorso th { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.tabella-percorso td:first-child,
.tabella-percorso th:first-child { padding-left: var(--sp-3); }
.tabella-percorso td:last-child,
.tabella-percorso th:last-child { padding-right: var(--sp-3); }

/* La riga con cui se ne aggiunge una: staccata dalle altre da un filo, se no
   si legge come un record esistente e vuoto. */
.tabella-percorso .riga-nuova > td {
    border-top: 2px solid var(--bordo-forte);
    background: var(--fondo);
}

/* Lo stato di affiliazione di una sezione, accanto al titolo del riquadro. */
.stato-affiliata { background: var(--verde-tenue); color: var(--verde-testo); }
.stato-avviata   { background: var(--blu-tenue);   color: var(--blu-scuro); }
.stato-esclusa   { background: var(--rosso-tenue); color: var(--rosso-testo); }
.stato-senza     { background: var(--separatore);  color: var(--grigio); }

/* Il sotto-menù a linguette: quale dei registri si sta guardando. Compare solo
   se c'è più di una scelta, quindi non serve prevederne l'aspetto da sola. */
.linguette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--bordo);
}
#contenuto .linguetta,
#contenuto .linguetta:link,
#contenuto .linguetta:visited {
    padding: 8px 16px;
    color: var(--grigio);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--raggio-s) var(--raggio-s) 0 0;
    margin-bottom: -1px;
}
#contenuto .linguetta:hover { background: var(--fondo); color: var(--blu-scuro); }
#contenuto .linguetta-attiva,
#contenuto .linguetta-attiva:link,
#contenuto .linguetta-attiva:visited {
    background: var(--superficie);
    border-color: var(--bordo);
    color: var(--blu-scuro);
    font-weight: 600;
}

/* L'elenco delle delibere dentro una cella: una riga per atto, la data
   incolonnata a sinistra perché si scorra in verticale. */
.elenco-delibere { list-style: none; margin: 0; padding: 0; font-size: var(--testo-s); }
.elenco-delibere li { margin-bottom: 3px; display: flex; gap: var(--sp-2); align-items: baseline; }
.elenco-delibere .num { min-width: 74px; color: var(--grigio); }


/* ── IL LIBRO SOCI, TENUTO SEPARATO DAI FILTRI ────────────────
   Nella pagina delle sezioni socie le pastiglie servono a cercare;
   questo riquadro invece produce il documento ufficiale. Se stesse
   nella stessa riga sembrerebbe una vista fra le altre, e sarebbe
   la piu' importante travestita da quinta.
   ============================================================ */
.libro-ufficiale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--oro-bordo);
    border-left: 4px solid var(--oro);
    border-radius: var(--raggio);
    background: var(--oro-tenue);
}

.libro-ufficiale-attivo { box-shadow: var(--ombra); }

.libro-ufficiale-testo { flex: 1 1 260px; }

.libro-ufficiale h5 {
    margin: 0 0 2px;
    font-size: var(--testo-m);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--inchiostro);
}

.libro-ufficiale p {
    margin: 0;
    font-size: var(--testo-s);
    color: var(--grigio);
}

.libro-ufficiale-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* La pastiglia di questo riquadro e' piu' alta e con il fondo pieno:
   sta su un fondo oro, e quella scolorita degli altri filtri ci si
   perderebbe dentro. */
#contenuto .scelta-libro,
#contenuto .scelta-libro:link,
#contenuto .scelta-libro:visited {
    padding: 6px 14px;
    border-color: var(--oro-bordo);
    background: var(--superficie);
    color: var(--inchiostro);
    font-weight: 600;
}

#contenuto .scelta-libro:hover { background: #fff; border-color: var(--grigio-chiaro); }

#contenuto .scelta-libro.scelta-filtro-attiva,
#contenuto .scelta-libro.scelta-filtro-attiva:link,
#contenuto .scelta-libro.scelta-filtro-attiva:visited {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
}

#contenuto .bottone-stampa,
#contenuto .bottone-stampa:link,
#contenuto .bottone-stampa:visited {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--verde);
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-size: var(--testo-s);
    font-weight: 600;
    text-decoration: none;
}

#contenuto .bottone-stampa:hover { background: var(--verde-testo); border-color: var(--verde-testo); }


/* Un versamento di quota che non corrisponde all'importo dovuto: non e' un
   errore da vietare — si puo' pagare per due anni insieme — ma va visto, e in
   una colonna di numeri incolonnati non si vedrebbe. */
.segnala-importo { color: var(--ambra); font-size: var(--testo-xs); }


/* ── QUEL CHE STA A MONITOR E NON SUL FOGLIO ──────────────────
   L'indicatore di morosita' sul libro soci serve a chi lavora, non
   al documento: un registro dei soci esibito a terzi non e' il posto
   in cui dichiarare chi e' indietro coi versamenti.

   La regola vale anche se qualcuno stampa la pagina di lavoro invece
   del documento: la pagina stampabile e' un'altra, ma un Ctrl+P qui
   non deve produrre un foglio che dice piu' del dovuto.
   ============================================================ */
@media print {
    .solo-a-monitor { display: none !important; }
}


/* La ricerca di un movimento da agganciare: quattro campi in fila che vanno a
   capo insieme. Importo e data sono corti per natura — un campo largo quanto
   il nome di una sezione, per scriverci «10,00», suggerisce che ci vada
   dell'altro. */
.riga-cerca-movimento { align-items: flex-end; gap: var(--sp-2) var(--sp-3); }

.riga-cerca-movimento .gruppo-cerca {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Dentro un contenitore in COLONNA «flex-basis» misura l'altezza, non la
   larghezza: .campo-cerca-stretto, nato per una riga, qui produceva caselle
   alte tredici centimetri. La larghezza si dichiara, e la flessibilita' si
   spegne. */
.riga-cerca-movimento .campo-cerca-stretto,
.riga-cerca-movimento .campo-cerca-minimo { flex: none; }
.riga-cerca-movimento .campo-cerca-stretto { width: 15rem; min-width: 0; }
.riga-cerca-movimento .campo-cerca-minimo  { width: 8.5rem; min-width: 0; }

@media (max-width: 560px) {
    /* Su schermo stretto ogni campo si prende la riga: quattro caselle
       affiancate a 375 px sono quattro caselle illeggibili. */
    .riga-cerca-movimento .gruppo-cerca { flex: 1 0 100%; }
    .riga-cerca-movimento .campo-cerca-stretto,
    .riga-cerca-movimento .campo-cerca-minimo { width: 100%; }
}





/* La pastiglia della quota nel titolo della scheda porta al suo riquadro: e'
   un'etichetta di stato che si puo' seguire, quindi non deve sembrare un
   collegamento qualunque — niente sottolineatura, ma il puntatore cambia. */
#contenuto .etichetta-collegata,
#contenuto .etichetta-collegata:link,
#contenuto .etichetta-collegata:visited { text-decoration: none; cursor: pointer; }
#contenuto .etichetta-collegata:hover { filter: brightness(0.94); }

/* Il ritorno all'elenco, in testa alla scheda. */
.torna-elenco { margin: 0 0 var(--sp-3); font-size: var(--testo-s); }


/* ── LE STAMPE DEL MODULO STATISTICHE ─────────────────────────
   Tre riquadri affiancati dentro la barra richiudibile: ognuno e'
   un modulo suo, con le sole scelte che quella stampa richiede.
   ============================================================ */
.riquadro-stampe { margin-bottom: var(--sp-4); }

.elenco-stampe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-3);
}

.stampa-voce {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    background: var(--fondo);
}

.stampa-voce h5 {
    margin: 0;
    font-size: var(--testo-m);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.stampa-voce p { margin: 0; font-size: var(--testo-s); color: var(--grigio); }
.stampa-voce label { font-size: var(--testo-xs); color: var(--grigio); text-transform: uppercase; }
.stampa-voce select { width: 100%; }
/* Il pulsante in fondo, allineato in basso: i tre riquadri hanno testi di
   lunghezza diversa, e senza questo i pulsanti si scaglionano. */
.stampa-voce .bottone-stampa { margin-top: auto; }


/* ── PROFILO ED ESCI IN TESTATA ───────────────────────────────
   Due comandi affiancati, ciascuno con la sua icona: il nome
   dell'utenza porta al proprio profilo, la porta porta fuori.
   Prima il nome era testo inerte accanto a un solo pulsante.
   ============================================================ */
#testata-utente a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Uscire non e' l'azione che si cerca piu' spesso: resta leggibile ma non
   compete con il profilo, che e' un collegamento come gli altri. */
#testata-utente #collegamento-esci { color: var(--grigio); }
#testata-utente #collegamento-esci:hover { color: var(--rosso-testo); border-color: var(--rosso); }

/* Su schermo stretto lo spazio in testata e' quello che e': restano le icone,
   che si riconoscono, e cadono le parole. */
@media (max-width: 560px) {
    #testata-utente a span { display: none; }
    #testata-utente a { padding: 6px 8px; }
}

/* Il riquadro del cambio password: righe corte, e' un modulo di tre campi. */
.riquadro-stretto { max-width: 30rem; }


/* Il codice fiscale ha sedici caratteri maiuscoli: «size» conta i caratteri di
   una cifra media, e a sedici l'ultimo restava fuori dalla casella. */
.campo-codfis { min-width: 19ch; font-family: var(--font-mono); letter-spacing: .02em; }

/* Indirizzo e «presso»: righe lunghe che si leggono per intero mentre si
   digitano, senza scorrere dentro la casella. */
.campo-largo { min-width: 26rem; max-width: 100%; }

/* ── La griglia dei campi si impila sugli schermi stretti ──────────────────
   grigliaVerticale() dispone i campi a coppie: etichetta, campo, etichetta,
   campo. E' una <table>, e una tabella non manda a capo: sotto i 700 pixel
   le due coppie non ci stanno e la seconda finisce oltre il bordo. Nella
   tabella delle voci di menu significava che CATEGORIA e LINK erano
   IRRAGGIUNGIBILI — non nascosti, proprio fuori portata, perche' la pagina
   non scorre di lato.

   Le tre dichiarazioni sono quelle gia' spiegate nelle note per le tabelle
   scorrevoli, con una differenza: qui non si vuole far scorrere, si vuole
   impilare. Portando righe e celle a display:block le coppie vanno una sotto
   l'altra e l'etichetta si mette sopra il proprio campo. */
@media (max-width: 700px) {
    .griglia-campi,
    .griglia-campi tbody,
    .griglia-campi tr,
    .griglia-campi th,
    .griglia-campi td {
        display: block;
        width: auto;
    }
    .griglia-campi { max-width: 100%; contain: content; }
    .griglia-campi th {
        /* L'etichetta era allineata a destra perche' stava ACCANTO al campo.
           Sopra il campo, a destra, sembrerebbe riferirsi a quello dopo. */
        text-align: left;
        padding: 8px 0 2px;
    }
    .griglia-campi td { padding: 0 0 6px; }
    /* Una coppia dispari lascia th e td vuoti a chiudere la riga: da impilati
       diventerebbero due spazi bianchi in mezzo al modulo. */
    .griglia-campi th:empty,
    .griglia-campi td:empty { display: none; }
    .griglia-campi input,
    .griglia-campi select { max-width: 100%; }
}

/* La pastiglia col numero, dentro una linguetta attiva, segue la linguetta:
   grigia quando la scheda è chiusa, blu quando è quella aperta. È la stessa
   regola che vale per le fasi del bilancio, applicata all'altro tipo di
   barra — senza, il numero resterebbe grigio proprio dove si sta guardando. */
.linguette .linguetta-attiva .fase-quante { background: var(--blu); color: #fff; }

/* Un pulsante con la sola icona era piu' basso di uno con il testo: 33 pixel
   contro 37,5. Stesso padding, stesso corpo, stessa interlinea — ma dentro un
   contenitore flessibile l'altezza la detta il contenuto, e un'icona da 15
   pixel e' piu' bassa della riga di testo da 19,5 che le sta accanto. Messi
   uno di fianco all'altro, «Salva» e il cestino si vedevano disallineati.

   IL PUNTELLO. Un elemento vuoto, largo zero e alto quanto una riga di testo,
   costringe il contenuto ad essere alto almeno quanto lo sarebbe con del
   testo. Su un pulsante che il testo ce l'ha gia' non cambia niente, ed e' il
   motivo per cui la regola vale per tutti invece di dover indovinare quali
   pulsanti hanno la sola icona.

   Non si usa min-height perche' i pulsanti hanno padding diversi a seconda
   della variante: un'altezza minima giusta per uno sarebbe sbagliata per
   l'altro, mentre il puntello lavora sul contenuto e del padding non si cura. */
button::before {
    content: "";
    width: 0;
    height: 1.5em;   /* la stessa interlinea dichiarata sui pulsanti */
}

/* ── IL NOME DEL SOCIO IN TESTA ALLA SUA SCHEDA ────────────────────────────
   Piu' grande del titolo di una pagina qualsiasi, perche' qui il titolo E' il
   nome: aprendo una scheda la prima domanda e' «di chi e'», e la risposta non
   deve essere cercata dentro una riga insieme al numero di socio e alla data
   di nascita.

   L'occhiello sopra dice che cosa si sta guardando in piccolo, e lascia al
   nome tutta la riga. Sta su una riga sua — display:block dentro un titolo
   flessibile non basterebbe — ed e' allineato con il nome, non centrato:
   l'occhio scende in verticale sul bordo sinistro come su tutte le altre
   pagine. */
#contenuto .titolo-socio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 2px;
}
#contenuto .titolo-socio .occhiello-socio {
    flex-basis: 100%;
    font-size: var(--testo-xs);
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--grigio);
}
/* Le etichette non crescono col titolo: restano della loro misura, accanto. */
#contenuto .titolo-socio .etichetta-stato { font-size: var(--testo-xs); }

.riga-dati-socio { margin: 0 0 var(--sp-4); }

@media (max-width: 560px) {
    /* Un nome lungo a 28 pixel occuperebbe tre righe su un telefono. */
    #contenuto .titolo-socio { font-size: 22px; }
}

/* Il titolo della scheda socio va al centro, e con lui l'occhiello, le
   etichette e la riga dei dati sotto: un titolo centrato con la riga di
   servizio allineata a sinistra si legge come due blocchi scollegati. */
#contenuto .titolo-socio { justify-content: center; text-align: center; }
#contenuto .titolo-socio .occhiello-socio { text-align: center; }
.riga-dati-socio { text-align: center; }

/* Le linguette che scoprono una parte della stessa pagina sono <button>:
   vanno riportate all'aspetto di una linguetta, che il browser dà agli <a>
   ma non ai pulsanti. */
#contenuto .linguette button.linguetta {
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--raggio-s) var(--raggio-s) 0 0;
    color: var(--grigio);
    font-size: var(--testo-m);
    font-weight: 400;
    cursor: pointer;
}
#contenuto .linguette button.linguetta-attiva {
    background: var(--superficie);
    border-color: var(--bordo);
    color: var(--blu-scuro);
    font-weight: 600;
}

/* ── UN CAMPO OBBLIGATORIO CHE MANCA ───────────────────────────────────────
   Il contorno rosso sta sul campo e non solo nella nota in cima: chi scorre
   il modulo vede dove intervenire senza tornare su a rileggere l'elenco.

   È un contorno e non un fondo colorato: il fondo renderebbe meno leggibile
   quel che si sta scrivendo proprio nel campo dove si deve scrivere.

   Sparisce mentre si scrive? No: la classe la mette il server, e si aggiorna
   al salvataggio. Un contorno che sparisce al primo carattere direbbe «fatto»
   anche a chi ha battuto uno spazio. */
/* Il selettore porta anche l'elemento: la regola di base per i campi e'
   «input[type="text"], select, textarea», che con l'attributo pesa quanto una
   classe. Una classe sola avrebbe pareggiato e perso a seconda dell'ordine. */
input.campo-mancante,
select.campo-mancante,
textarea.campo-mancante {
    border-color: var(--rosso);
    background: var(--rosso-tenue);
}
input.campo-mancante:focus,
select.campo-mancante:focus,
textarea.campo-mancante:focus {
    border-color: var(--rosso);
    outline-color: var(--rosso);
}

/* ── L'ESITO DEI TASTI DEL CODICE FISCALE ─────────────────────────────────
   Verde: il dato è d'accordo con il codice fiscale, oppure l'ha appena
   riempito il gestionale. Rosso: il codice fiscale dice un'altra cosa.

   Non è la stessa cosa del contorno rosso dei campi obbligatori, che segnala
   un dato che manca: qui il dato c'è, ed è il confronto a non tornare. Perché
   i due rossi non si confondano, questo è un contorno più marcato e senza
   fondo colorato — e comunque i due casi non capitano mai insieme sullo
   stesso campo, perché un campo vuoto viene riempito, non contraddetto.

   Il selettore porta anche l'elemento, come per «campo-mancante»: la regola
   di base pesa quanto una classe, e una classe sola avrebbe pareggiato. */
/* La riga di capo ramo nei quadri del bilancio: si clicca, e la freccia dice
   se il dettaglio e' aperto. Il resto della riga resta un totale da leggere. */
.albero-quadro tr.albero-testa { cursor: pointer; user-select: none; }
.albero-quadro tr.albero-testa:hover > td { background: var(--fondo); }
.freccia-ramo { display: inline-block; width: 1em; color: var(--grigio-chiaro); }

/* Le frecce che scorrono i movimenti, nella barra del titolo del riquadro di
   modifica. Stanno a destra, staccate dal titolo, e non prendono il colore del
   collegamento: sono comandi di servizio, non parole da leggere. */
.scorri-movimenti { float: right; display: inline-flex; align-items: center; gap: var(--sp-2); }
.scorri-movimenti a,
.scorri-movimenti .scorri-spento {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 var(--sp-1);
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    background: #fff;
}
.scorri-movimenti a { color: inherit; }
.scorri-movimenti a:hover { background: var(--fondo); }
.scorri-movimenti .scorri-spento { opacity: .35; cursor: default; }
.scorri-quale { font-size: var(--testo-s); font-weight: normal; opacity: .7; }

/* La riga di percorso che non e' passata: si riconosce da lontano, senza
   coprire il rosso dei campi che dicono qual e' il guaio. */
.tabella-percorso tr.riga-errata > td { background: var(--rosso-tenue); }

input.campo-ok,     select.campo-ok,     textarea.campo-ok,
input.campo-errato, select.campo-errato, textarea.campo-errato {
    border-width: 2px;
}
input.campo-ok,     select.campo-ok,     textarea.campo-ok     { border-color: var(--verde); }
input.campo-errato, select.campo-errato, textarea.campo-errato { border-color: var(--rosso); }

input.campo-ok:focus,     select.campo-ok:focus,     textarea.campo-ok:focus
    { border-color: var(--verde); outline-color: var(--verde); }
input.campo-errato:focus, select.campo-errato:focus, textarea.campo-errato:focus
    { border-color: var(--rosso); outline-color: var(--rosso); }

/* Il campo e i suoi due tasti su una riga sola, che va a capo se non ci sta:
   sotto i 560 px la cella è stretta e i tasti scendono sotto il campo invece
   di stringerlo fino a rendere illeggibile un codice di sedici caratteri. */
.cf-con-tasti {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.cf-con-tasti input { flex: 1 1 16ch; min-width: 0; }

/* ── IL CAMPO DATA NON HA UN BORDO SUO ────────────────────────────────────
   Il bordo del campo data appartiene allo «span» che lo contiene, insieme al
   tasto del calendario: l'input dentro ha «border-width: 0». Le classi che
   colorano il bordo — quella dei campi obbligatori mancanti e quelle
   dell'esito del codice fiscale — finiscono sull'input, dove un bordo da
   colorare non c'è: sul campo data si vedeva il fondo rosso e basta, e il
   verde non si vedeva affatto.

   Si colora il contenitore quando dentro c'è il campo marcato. Dove «:has»
   non funzionasse, la regola cade tutta e si torna a com'era: nessun colore,
   non un colore sbagliato. */
.campo-data:has(> .campo-mancante) { border-color: var(--rosso); }
.campo-data:has(> .campo-ok)       { border-color: var(--verde); border-width: 2px; }
.campo-data:has(> .campo-errato)   { border-color: var(--rosso); border-width: 2px; }

/* Il fondo tenue del campo mancante sta sull'input, dove si vede: lo «span»
   lo coprirebbe l'input stesso. Qui serve solo che non resti bianco il pezzo
   sotto il tasto del calendario. */
.campo-data:has(> .campo-mancante) { background: var(--rosso-tenue); }

/* Il vecchio numero di tessera accanto a quello attuale: si legge, ma non
   compete. Stesso corpo del campo e colore attenuato — piu' piccolo sarebbe
   sembrato una nota a pie' di pagina, uguale avrebbe fatto credere che i
   numeri validi fossero due. */
.tessera-ex {
    margin-left: 8px;
    color: var(--grigio);
    white-space: nowrap;
}

/* ── LA MOTIVAZIONE DI UN ENCOMIO ────────────────────────────────────────
   Sta su una riga sua, sotto i dati dell'atto. In linea con gli altri sei
   campi la tabella usciva dal contenitore e i tasti finivano fuori vista;
   accorciata, restava una colonna in cui una motivazione di duemila
   caratteri non si legge.

   Le due righe devono leggersi come un record solo: la seconda non ha bordo
   sopra, cosi' non sembra una riga a se'. */
tr.riga-seguito > td {
    border-top: none;
    padding-top: 0;
}

.motivazione-encomio {
    color: var(--grigio);
    line-height: 1.55;
}

/* ── LA TABELLA DEGLI ENCOMI ─────────────────────────────────────────────
   «table-layout: fixed» e non larghezze a mano. Senza, la cella della
   motivazione chiede quanto sarebbe larga scritta su una riga sola — che per
   duemila caratteri e' moltissimo — e il browser allarga tutta la tabella
   per accontentarla: le altre colonne si gonfiavano a duecentosettanta pixel
   per una data, e i tasti finivano oltre il bordo visibile.

   Con le colonne fissate la larghezza la decide il contenitore e il testo va
   a capo dentro la sua. Vale solo qui: le altre tabelle del gestionale
   contengono campi corti e stanno meglio come sono. */
.tabella-encomi {
    table-layout: fixed;
    width: 100%;
}

/* Le parole lunghe — un protocollo senza spazi, un indirizzo — devono
   spezzarsi invece di sfondare la colonna che ora e' fissa. */
.tabella-encomi td { overflow-wrap: anywhere; }

/* Le colonne del registro degli encomi. Percentuali e non pixel: la tabella
   ha «table-layout: fixed», e le percentuali si ridistribuiscono da se' fra
   il minimo di 900 px del contenitore scorrevole e uno schermo largo.

   Sono classi e non attributi «style=»: la CSP di produzione ha
   «style-src 'self'» e gli attributi in linea li ignora in silenzio — la
   pagina non si romperebbe, semplicemente le larghezze non arriverebbero. */
.col-encomio-n       { width: 7%; }
.col-encomio-data    { width: 15%; }
.col-encomio-sezione { width: 33%; }
.col-encomio-tipo    { width: 17%; }
.col-encomio-prot    { width: 28%; }

/* Nel riquadro della scheda sezione le colonne sono quattro, non cinque:
   manca quella della Sezione, che li' e' gia' detta dal titolo della pagina.
   Il selettore nomina la tabella e non il riquadro che la contiene: anche il
   registro sta dentro un riquadro, e «.riquadro .tabella-encomi» avrebbe
   stretto le colonne di tutte e due. */
.tabella-encomi-sezione .col-encomio-n    { width: 9%; }
.tabella-encomi-sezione .col-encomio-data { width: 21%; }
.tabella-encomi-sezione .col-encomio-tipo { width: 24%; }
.tabella-encomi-sezione .col-encomio-prot { width: 46%; }

/* ── LA MATRICE DEGLI ADEMPIMENTI ────────────────────────────────────────
   Righe le Sezioni, colonne le incombenze. Il numero di colonne cambia da un
   anno all'altro — gli adempimenti si aggiungono, si ritirano, e quelli del
   cambio di commissario compaiono solo se qualcuno l'ha cambiato — quindi qui
   non si possono fissare percentuali come nel registro degli encomi: la prima
   colonna ha una larghezza sua e le altre si dividono quel che resta.

   Il contenitore «.tabella-scorrevole» impone gia' il minimo di 900 px: su
   uno schermo stretto la matrice scorre invece di comprimersi fino a
   diventare illeggibile. */
.matrice-adempimenti .col-sezione-adempimenti { width: 190px; }
.matrice-adempimenti .col-commissario-adempimenti { width: 130px; }

/* L'intestazione di colonna porta il nome e sotto la scadenza: due righe
   corte si leggono meglio di una lunga, e la seconda serve a capire perche'
   una casella e' in ritardo. Allineate in basso, cosi' i nomi su due righe
   non sfalsano quelli su una. */
.matrice-adempimenti .testata-adempimento {
    vertical-align: bottom;
    line-height: 1.35;
    min-width: 120px;
}

/* La casella e' tutta cliccabile, non solo la pastiglia: mirare un'etichetta
   alta venti pixel dentro una griglia di duecento caselle e' un esercizio di
   precisione che non deve servire a nessuno.

   «colore-ereditato» tiene fuori il colore dei link: dentro #contenuto un
   <a> con una classe «fondo-*» diventerebbe un pulsante pieno, e la pastiglia
   perderebbe il fondo tenue che la fa leggere come stato e non come comando.
   Il fondo lo mette la pastiglia dentro, l'ancora e' solo l'area sensibile. */
.cella-adempimento {
    display: block;
    text-align: center;
    padding: 5px 2px;
    border-radius: 6px;
    text-decoration: none;
}
.cella-adempimento:hover { background: var(--blu-tenue); text-decoration: none; }

/* La casella scelta resta segnata mentre si lavora nel riquadro sopra:
   scorrendo una matrice di venti righe, senza questo non si ritrova. */
.cella-adempimento.cella-scelta { box-shadow: inset 0 0 0 2px var(--blu); }

/* «Non dovuto» non e' uno stato: e' l'assenza dell'obbligo, e va detta in
   modo che non si confonda con «da inviare». Un trattino grigio e nessuna
   pastiglia — le pastiglie sono degli stati. */
.cella-non-dovuta {
    display: block;
    text-align: center;
    padding: 5px 2px;
    color: var(--grigio-tenue);
}

/* La legenda del semaforo: le stesse quattro pastiglie della matrice, in
   fila, con accanto che cosa vogliono dire. */
.legenda-semaforo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: baseline;
    margin: 0;
}
.legenda-semaforo > span { white-space: nowrap; }

/* ── LE DUE COLONNE DELLA HOME ───────────────────────────────────────────
   A sinistra gli avvisi, uno sotto l'altro: benvenuto, la quota di sezione
   non versata, il profilo della sezione. A destra la tabella degli iscritti,
   da sola, su piu' di meta' pagina.

   Non e' «.colonne»: quella affianca riquadri di uguale larghezza, e qui non
   e' quel che serve. La tabella degli iscritti ha quattro colonne di numeri
   piu' il nome della sezione — a un terzo di pagina le intestazioni vanno a
   capo e i numeri si accavallano — mentre gli avvisi sono frasi corte, che in
   una colonna larga lasciano solo spazio vuoto a destra.

   7fr contro 5fr: la tabella prende poco meno del sessanta per cento. E'
   il «almeno mezza pagina» chiesto, con il margine che serve a non mandare a
   capo «Acc. Segreteria».

   Lo scarto verticale fra i riquadri e' zero perche' ce l'ha gia' ciascun
   «.riquadro» come margine sotto: sommarli avrebbe raddoppiato lo spazio a
   sinistra e lasciato invariato quello a destra, dove il riquadro e' uno solo. */
.colonne-home {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 var(--sp-4);
    align-items: start;
}

/* Tutto quel che non e' la tabella degli iscritti sta a sinistra, nell'ordine
   in cui e' scritto nella pagina. */
.colonne-home > * { grid-column: 1; }

/* La tabella attraversa tutte le righe della colonna di sinistra: senza lo
   span occuperebbe la sola prima riga, e quella riga dovrebbe diventare alta
   quanto la tabella — spingendo quota e profilo di sezione sotto il fondo
   della tabella invece che accanto. Le righe in eccesso sono vuote e alte
   zero, e con lo scarto verticale a zero non si vedono. */
.colonne-home > .riquadro-iscritti {
    grid-column: 2;
    grid-row: 1 / span 99;
}

/* Su telefono le due colonne diventano una: gli avvisi restano in testa e la
   tabella, che li' scorre da sola dentro il riquadro, va in fondo. */
@media (max-width: 767px) {
    .colonne-home { grid-template-columns: 1fr; gap: 0; }
    .colonne-home > *,
    .colonne-home > .riquadro-iscritti { grid-column: 1; grid-row: auto; }
}

/* ── LE PASTIGLIE DEL SEMAFORO DEGLI ADEMPIMENTI ─────────────────────────
   Fondo pieno e testo bianco, non il fondo tenue delle altre etichette.

   NON E' UN VEZZO GRAFICO, E' QUEL CHE SERVE A UNA MATRICE. Le altre
   etichette del gestionale stanno una per riga, accanto al testo che le
   spiega: li' il fondo tenue basta e il colore acceso sarebbe chiasso. Qui
   sono cento caselle in una griglia, e non si leggono — si guardano. Un
   verde al cinque per cento di saturazione, a otto punti, in mezzo ad altre
   novantanove caselle, non si distingue da un grigio: bisogna leggere la
   parola dentro, e a quel punto la matrice non serve piu' a niente.

   I quattro colori sono gli stessi delle altre etichette, presi nella
   versione piena — le stesse quattro variabili con cui il gestionale colora
   i pulsanti. Cambia l'intensita', non il significato: il rosso resta il
   rosso del respinto. */
.etichetta-piccola.pastiglia-stato {
    font-weight: 600;
    padding: 3px 10px;
    letter-spacing: 0.2px;
}

/* «Da inviare» resta chiaro: e' il punto di partenza di ogni casella, quello
   in cui si trova tutta la matrice a inizio anno, e un grigio pieno ripetuto
   duecento volte pesa come un allarme senza esserlo. Il colore acceso serve a
   quel che si stacca dal fondo — in valutazione, respinto, approvato — e se
   lo prende anche il fondo non si stacca piu' niente.

   Il filo intorno lo tiene riconoscibile come pastiglia: su carta bianca un
   grigio cosi' chiaro, da solo, non si vedrebbe come un contorno. Il senso
   comunque lo porta la parola, che sul suo fondo sta a 5,9:1.

   L'assenza di stato — la casella non dovuta — resta un trattino e nessuna
   pastiglia: e' un'altra cosa, e deve sembrare un'altra cosa. */
.etichetta-piccola.pastiglia-stato.fondo-neutro {
    background: var(--separatore);
    color: var(--grigio);
    box-shadow: inset 0 0 0 1px var(--bordo-forte);
}
.etichetta-piccola.pastiglia-stato.fondo-atteso { background: var(--ambra);  color: #fff; }
.etichetta-piccola.pastiglia-stato.fondo-ko     { background: var(--rosso);  color: #fff; }
.etichetta-piccola.pastiglia-stato.fondo-ok     { background: var(--verde);  color: #fff; }

/* ── I RIQUADRI DELLA HOME CHE SEGNALANO UNA MANCANZA ────────────────────
   Stessa carta gialla dell'avviso sulla quota di Sezione non versata: in
   home il giallo vuol dire «qui c'e' qualcosa che tocca a te e non e'
   ancora fatto». Un riquadro bianco in mezzo agli altri diceva la stessa
   cosa solo a chi lo leggeva.

   NON TUTTI I RIQUADRI, e non e' una distinzione sottile: giallo e' quel che
   manca a CHI GUARDA. I trasferimenti che una Sezione ha inoltrato e sta
   aspettando restano bianchi — la palla e' al nazionale, e ingiallirli
   direbbe alla Sezione di fare qualcosa che non puo' fare. Se fosse giallo
   tutto, il giallo non direbbe piu' niente. */
.riquadro.riquadro-mancanze {
    background: var(--oro-tenue);
    border-color: var(--oro-bordo);
    border-left: 3px solid var(--ambra);
}

/* Il filo che separa le righe dentro il riquadro va scurito: quello grigio
   chiaro, sulla carta gialla, non si vede piu'. */
.riquadro-mancanze .riga-richiesta { border-bottom-color: var(--oro-bordo); }
.riquadro-mancanze > h4            { border-bottom-color: var(--oro-bordo); }

/* ── LA TRACCIA DEI PASSAGGI DI UNA DISTINTA ─────────────────────────────
   Un segno per passaggio, nell'ordine in cui sono avvenuti. Serve a vedere
   in un elenco quali pratiche hanno rimbalzato: una fila blu-verde e' andata
   liscia, una con un segno rosso in mezzo e' tornata indietro almeno una
   volta. Il racconto per esteso e' nel «title» e nel testo per i lettori di
   schermo — questi sono segni, non parole. */
.traccia-distinta { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.traccia-segni    { display: inline-flex; gap: 2px; }

.traccia-passo {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--grigio-tenue);
}

/* Gli stessi quattro colori del resto del gestionale. Le due accettazioni
   sono verdi ma piu' chiare della chiusura: sono mezze firme, e mostrarle
   dello stesso verde avrebbe fatto sembrare finita una pratica che aspetta
   ancora l'altra meta'. */
.traccia-creata         { background: var(--grigio-tenue); }
.traccia-inviata        { background: var(--blu); }
.traccia-respinta       { background: var(--rosso); }
/* Il richiamo non e' un rifiuto e non deve sembrarlo: il rifiuto lo decide
   chi riceve, il richiamo chi ha mandato. Il giallo del marchio lo distingue
   dal rosso senza farlo sparire fra i grigi. */
.traccia-richiamata     { background: var(--oro); }
.traccia-acc_segreteria,
.traccia-acc_tesoreria  { background: #6aa87f; }
.traccia-accettata      { background: var(--verde); }

/* Quante volte e' tornata indietro. Solo se e' successo. */
.traccia-rifiuti {
    font-size: var(--testo-xs);
    font-weight: 600;
    color: var(--rosso-testo);
}

/* ── UNA DISTINTA RIMASTA SENZA PAGAMENTI ────────────────────────────────
   Non e' un errore ma non serve a niente, e finche' resta li' la sezione
   continua a vedersela nell'elenco chiedendosi che cosa contenga. Si segnala
   con la stessa carta gialla degli avvisi in home — «c'e' qualcosa da fare» —
   e accanto ha il tasto per dismetterla. */
.riga-distinta-vuota > td { background: var(--oro-tenue); }
.riga-distinta-vuota td:first-child { box-shadow: inset 3px 0 0 var(--ambra); }

/* ── IL RIQUADRO DI SINTESI DI UN SOCIO ──────────────────────────────────
   Si apre dal nome nell'elenco di una distinta: chi controlla una distinta ha
   davanti trenta nomi e ogni tanto ha bisogno di sapere chi e' uno di quelli,
   senza perdere il posto in cui stava leggendo. Andare all'anagrafica e
   tornare indietro fa perdere il posto; questo no.

   E' un <dialog> del browser e non un finto riquadro sovrapposto: la
   chiusura con Esc, il fuoco della tastiera intrappolato dentro e lo sfondo
   reso inerte li fa gia' lui, e rifarli a mano li fa quasi sempre peggio. */
dialog.scheda-socio {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 0;
    width: min(460px, calc(100vw - 2rem));
    background: var(--superficie);
    color: var(--inchiostro);
}
dialog.scheda-socio::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.scheda-socio h4 {
    margin: 0;
    padding: 14px var(--sp-4);
    border-bottom: 1px solid var(--separatore);
    font-size: var(--testo);
    font-weight: 600;
}
dialog.scheda-socio .corpo-scheda-socio { padding: var(--sp-3) var(--sp-4); }
dialog.scheda-socio .piede-scheda-socio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px var(--sp-4);
    border-top: 1px solid var(--separatore);
}
dialog.scheda-socio table { font-size: var(--testo-m); }
dialog.scheda-socio th { width: 42%; color: var(--grigio); font-weight: 400; }

/* Il nome nell'elenco e' un comando, ma non deve sembrare un pulsante: resta
   il testo della cella, con il solo tratteggio a dire che ci si puo'
   cliccare. Un <button> nudo, altrimenti eredita fondo e bordo dei pulsanti
   veri e la tabella diventa una scacchiera. */
button.nome-cliccabile {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--blu);
    text-align: left;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
button.nome-cliccabile:hover { background: none; color: var(--blu-scuro); text-decoration: underline; }

/* ── LA CONFERMA DEI CONSENSI, PRIMA DI REGISTRARE UN TESSERAMENTO ───────
   Sta su fondo giallo come gli avvisi «c'e' qualcosa da fare»: e' una
   dichiarazione che chi registra rende in prima persona, non una casella di
   modulo da spuntare distrattamente. */
.conferma-consensi {
    background: var(--oro-tenue);
    border: 1px solid var(--oro-bordo);
    border-left: 3px solid var(--ambra);
    border-radius: var(--raggio-s);
    padding: 12px var(--sp-4);
    margin: var(--sp-3) 0;
    font-size: var(--testo-m);
}
.conferma-consensi label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.conferma-consensi input { margin-top: 3px; flex-shrink: 0; }

/* ── IL SOTTOMENU DI UNA PAGINA ──────────────────────────────────────────
   Due o tre modi di guardare lo stesso elenco, sotto il titolo. Non e' il
   filtro a pastiglie che sta dentro i riquadri: quello restringe le righe,
   questo cambia il mestiere della pagina — che cosa si viene a fare qui —
   e per questo sta sopra, alla stessa altezza del titolo.

   Sono collegamenti veri con un indirizzo proprio: si aprono in un'altra
   scheda, si mettono nei segnalibri, e il tasto «indietro» del browser fa
   quel che deve. Linguette finte mosse da JavaScript non fanno niente di
   tutto questo. */
.sottomenu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    border-bottom: 1px solid var(--bordo);
    margin: 0 0 var(--sp-4);
}

/* Il colore va ridichiarato con «#contenuto» davanti: «#contenuto a:link»
   usa un id e batterebbe qualunque classe, riportando le voci al blu dei
   collegamenti anche quando non sono quella scelta. E' gia' successo tre
   volte in questo foglio, ed e' scritto poco piu' su. */
.voce-sottomenu,
#contenuto a.voce-sottomenu:link,
#contenuto a.voce-sottomenu:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    margin-bottom: -1px;            /* il bordo della voce copre quello della barra */
    border-bottom: 3px solid transparent;
    color: var(--grigio);
    font-weight: 600;
    text-decoration: none;
}
#contenuto a.voce-sottomenu:hover { color: var(--blu); text-decoration: none; }

.voce-sottomenu-attiva,
#contenuto a.voce-sottomenu-attiva:link,
#contenuto a.voce-sottomenu-attiva:visited {
    color: var(--blu);
    border-bottom-color: var(--blu);
}

/* Un gruppo in fila che si appoggia a destra: serve dentro le celle
   allineate a destra, dove «text-align» governa il testo ma non la
   disposizione di un contenitore flessibile. */
.giustifica-fine { justify-content: flex-end; }

/* ── L'ORGANIGRAMMA ──────────────────────────────────────────────────────
   La maschera mostra i ruoli previsti, non solo quelli ricoperti: metà
   della tabella sono righe vuote, ed è quella metà che si va a cercare.
   Il nome del ruolo sta in prima colonna in grassetto: è la colonna con
   cui si scorre l'elenco. Le righe vacanti prendono un fondo appena
   diverso, quanto basta a contarle a colpo d'occhio senza farle sembrare
   un errore — un ruolo scoperto a metà anno è una cosa normale, e il rosso
   l'avrebbe raccontata come un guasto. */
.tabella-organigramma > tbody > tr > td:first-child { font-weight: 600; }

.riga-vacante > td { background: var(--zebra); color: var(--grigio); }

/* La data di fine sta nella stessa cella del pulsante che chiude
   l'incarico: sono un gesto solo, e su due righe sembrerebbero due. */
.tabella-organigramma .campo-data { vertical-align: middle; }
.tabella-organigramma .campo-data-testo { width: 8.5em; }

/* L'interruttore dei ruoli vacanti. Le righe vuote partono nascoste: un
   Comitato che ne prevede sedici e ne ha ricoperti otto mostrerebbe
   altrimenti otto righe di niente davanti alle otto che interessano.

   HA LA FACCIA DI UN TASTO E DENTRO E' UNA CASELLA DI SPUNTA. Il tasto vero
   — <button> — avrebbe avuto bisogno di JavaScript per ricordarsi lo stato,
   e la politica di sicurezza delle pagine ignora gli script scritti dentro
   la pagina: sarebbe rimasto fermo senza dire niente a nessuno. La casella
   lo stato lo tiene da se', e la regola di stile fa il resto.

   LA CASELLA NON SI NASCONDE CON display: none, che la toglierebbe anche al
   tabulatore e alla lettura vocale: si rimpicciolisce a un punto e si
   ritaglia via. Resta raggiungibile da tastiera, e l'anello di fuoco si
   sposta sull'etichetta, che e' la parte che si vede.

   Perche' tutto questo funzioni, la casella, l'etichetta e la tabella devono
   restare elementi fratelli: le regole partono dalla casella e scendono a
   quel che le sta accanto. */
.interruttore-vacanti {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pulsante-vacanti {
    display: inline-block;
    margin: 0 0 12px;
    padding: 3px 10px;
    border: 1px solid var(--bordo-forte);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--grigio);
    font-size: var(--testo-xs);
    font-weight: 600;
    cursor: pointer;
}
.pulsante-vacanti:hover { border-color: var(--blu); color: var(--blu); }

/* Premuto: il tasto resta premuto finche' i vacanti sono in vista. Senza il
   segno di spunta e' l'unico modo di vedere in che stato si e' senza
   rileggere la scritta. */
.interruttore-vacanti:checked ~ .pulsante-vacanti {
    border-color: var(--blu);
    background: var(--blu-tenue);
    color: var(--blu);
}

.interruttore-vacanti:focus-visible ~ .pulsante-vacanti {
    outline: 2px solid var(--blu);
    outline-offset: 2px;
}

/* La scritta dice che cosa succede a premere: «Mostra» quando sono nascosti,
   «Nascondi» quando sono in vista. */
.interruttore-vacanti:not(:checked) ~ .pulsante-vacanti .se-acceso,
.interruttore-vacanti:checked      ~ .pulsante-vacanti .se-spento { display: none; }

.interruttore-vacanti:not(:checked) ~ .tabella-scorrevole .riga-vacante { display: none; }
.interruttore-vacanti:checked ~ .tabella-scorrevole .riga-nessun-titolare { display: none; }

/* Il pannello per assegnare: sta in cima e sta chiuso, perche' si guarda un
   organigramma cento volte per una che lo si cambia. Il riassunto e' il suo
   titolo, e deve leggersi come tale — un <summary> senza stile sembra una
   riga di testo con un triangolino davanti. */
.pannello-assegna > summary {
    cursor: pointer;
    font-size: var(--testo-l);
    font-weight: 600;
    color: var(--blu-scuro);
    padding: 2px 0;
}
.pannello-assegna[open] > summary { margin-bottom: 12px; }

/* ── LA VALIDAZIONE DELL'ORGANIGRAMMA ────────────────────────────────────
   La colonna dell'esito tiene una pastiglia sola e non deve allargarsi con
   il testo che le sta accanto: e' la colonna con cui si scorre l'elenco dei
   requisiti, e se balla da una riga all'altra non si scorre piu'. */
.c-esito { width: 7.5em; }

/* NIENTE RIGHE ALTERNATE DENTRO IL BOX DELLA VALIDAZIONE. La zebratura serve
   a far scorrere l'occhio su un elenco lungo di righe tutte uguali; qui le
   righe sono quattro e una di loro e' gialla perche' vuol dire qualcosa. Il
   grigetto alternato dietro le altre non aiuta a leggerle e toglie forza
   all'unica riga che deve saltare all'occhio — per giunta su un riquadro che
   ha gia' un fondo suo, dove una riga schiarita a caso sembra un difetto di
   stampa. Vale per tutte le tabelle del riquadro: righe alterne in una e non
   nell'altra, a un centimetro di distanza, si notano piu' della zebratura
   stessa.

   Sta dentro :where() per la stessa ragione della zebratura che spegne: cosi'
   pesa quanto la sola classe del riquadro, e qualunque riga che dichiari un
   colore suo — la verifica fallita qui sotto, e quelle che verranno — continua
   a vincere. Senza, questa regola avrebbe cancellato proprio il giallo che
   deve saltare all'occhio. */
.pannello-validazione :where(tbody > tr > td) { background: transparent; }

/* LA VERIFICA FALLITA HA IL FONDO GIALLO, e un giallo piu' carico di quello
   del riquadro che la contiene: il box e' gia' giallo tenue — e' il colore
   con cui in tutto il gestionale si dice «qui c'e' qualcosa che ti tocca» —
   e una riga dello stesso identico giallo dentro un fondo giallo non si
   stacca da niente. Per questo non riusa .riga-attenzione, che vive su fondi
   bianchi e li' basta tenue.

   Il testo di dettaglio non resta grigio: «attenuato» sul giallo si legge
   male, proprio nella riga che chiede di essere letta. */
.riga-verifica-ko > td { background: var(--oro-bordo); }
.riga-verifica-ko > td.attenuato,
.riga-verifica-ko > td .attenuato { color: var(--ambra); }

.storia-validazioni > summary {
    cursor: pointer;
    font-size: var(--testo-s);
    color: var(--grigio);
    padding: 4px 0;
}

/* Il box della validazione si chiude quando e' tutto a posto: e' la riga di
   un registro, non un cartello. Il riassunto e' il suo titolo e deve leggersi
   come tale — un <summary> senza stile sembra una riga di testo con un
   triangolino davanti. */
.pannello-validazione > summary {
    cursor: pointer;
    font-size: var(--testo-l);
    font-weight: 600;
    color: var(--blu-scuro);
    padding: 2px 0;
}
.pannello-validazione[open] > summary { margin-bottom: 12px; }

/* Il motivo del respingimento: la Segreteria lo scrive qui, ed e' l'unica
   cosa che dice alla Sezione che cosa correggere. Staccato da quel che sta
   sopra, perche' e' un comando e non una riga in piu' del riepilogo. */
.pannello-respingi {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--bordo);
}
.pannello-respingi label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--testo-s);
    font-weight: 600;
    color: var(--grigio);
}
.pannello-respingi textarea { margin-bottom: 6px; }

/* ── LA BARRA «SALVA TUTTO» DELLE TABELLE DI BASE ────────────────────────
   Sta sopra e sotto l'elenco: su sessanta righe, tornare in cima per
   salvare e' un viaggio che si puo' risparmiare. Il tasto e' a sinistra
   perche' e' il gesto principale della pagina, e la spiegazione gli sta
   accanto invece che sotto — una riga in piu' fra la barra e la tabella le
   avrebbe allontanate senza dire niente di piu'. */
.azioni-tabella {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

/* ── LE TABELLE-MODULO DELLE TABELLE DI BASE ─────────────────────────────
   Una griglia di campi editabili, una riga per record. Il problema che
   risolve: l'attributo «size» di un <input> e la lunghezza delle voci di
   una tendina danno alla cella una larghezza MINIMA, e con nove colonne la
   somma di quei minimi sbordava di trecento pixel dal riquadro — la
   tabella si trascinava di lato anche su uno schermo che l'avrebbe
   contenuta tutta.

   I campi prendono invece la larghezza della loro colonna: il «size» resta
   nel markup e continua a valere come suggerimento di quanto testo ci si
   aspetta, ma non impone piu' niente. La tabella si distribuisce sullo
   spazio che c'e', e le colonne con il testo piu' lungo se ne prendono di
   piu' — che e' quel che si vuole.

   Il riempimento va in «border-box», se no il 100% piu' i bordi e
   l'imbottitura riportano il campo fuori dalla cella. */
.tabella-modulo input[type="text"],
.tabella-modulo input[type="number"],
.tabella-modulo input[type="url"],
.tabella-modulo input[type="email"],
.tabella-modulo input[type="search"],
.tabella-modulo select,
.tabella-modulo textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* In una griglia di nove colonne l'imbottitura dei campi costa piu' di
   quanto renda: undici pixel per parte, su ogni campo, sono un quinto di
   una colonna stretta — e quel quinto e' testo che non si legge. Dentro la
   tabella si stringe; nei moduli normali resta com'e', perche' li' lo
   spazio non manca e un campo comodo si compila meglio. */
.tabella-modulo input[type="text"],
.tabella-modulo input[type="number"],
.tabella-modulo input[type="url"],
.tabella-modulo input[type="email"],
.tabella-modulo input[type="search"],
.tabella-modulo select { padding: 6px 7px; }

/* Quel che non ci sta si taglia con i puntini, non a meta' di una lettera. */
.tabella-modulo select { text-overflow: ellipsis; }

/* Le intestazioni possono andare a capo: «Mandati consecutivi max» su una
   riga sola pretenderebbe per se' una colonna larga il doppio di quanto le
   serve per il contenuto, che e' un numero di una cifra. */
.tabella-modulo > thead td,
.tabella-modulo .testata-tabella td { white-space: normal; }

/* ── UN'OPZIONE CHE NON SI PUO' SCEGLIERE ────────────────────────────────
   Non si nasconde: sparendo, chi cerca «Volontario» lo cerca finche' non si
   arrende, e nessuno gli dice perche' non c'e'. Resta al suo posto in
   grigio, e la nota accanto spiega a che condizione si accende. */
.opzione-spenta { color: var(--grigio-tenue); cursor: not-allowed; }
.opzione-spenta input { cursor: not-allowed; }

/* ── LE PASTIGLIE DI SCELTA ──────────────────────────────────────────────
   Due qualità che si accendono e si spengono — socio, volontario — dette
   con due pastiglie invece che con due quadratini di dodici pixel: premute
   si vedono premute, e a colpo d'occhio si legge che cosa e' acceso senza
   cercare il segno di spunta.

   SOTTO RESTA UNA CASELLA DI SPUNTA, nascosta ma raggiungibile con il
   tabulatore: e' lei che tiene lo stato e viaggia nel modulo, la pastiglia
   e' l'etichetta che la veste. Un <button> vero avrebbe avuto bisogno di
   JavaScript per ricordarsi se e' premuto, e la politica di sicurezza delle
   pagine ignora gli script scritti dentro la pagina.

   Perche' funzioni, la casella deve stare SUBITO PRIMA della sua etichetta:
   la regola parte da li' e arriva alla pastiglia accanto. */
.pastiglie-scelta { display: inline-flex; flex-wrap: wrap; gap: 8px; }

.scelta-nascosta {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pastiglia-scelta {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--bordo-forte);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--grigio);
    font-size: var(--testo-s);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.pastiglia-scelta:hover { border-color: var(--blu); color: var(--blu); }

/* Accesa: piena, come un tasto premuto. */
.scelta-nascosta:checked + .pastiglia-scelta {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
}

/* L'anello di fuoco si sposta sulla pastiglia, che e' la parte che si vede. */
.scelta-nascosta:focus-visible + .pastiglia-scelta {
    outline: 2px solid var(--blu);
    outline-offset: 2px;
}

/* Spenta perche' non si puo' scegliere: resta al suo posto in grigio, e il
   titolo accanto dice a che condizione si accende. Sparendo, chi la cerca la
   cerca finche' non si arrende. */
.scelta-nascosta:disabled + .pastiglia-scelta,
.pastiglia-scelta.opzione-spenta {
    background: var(--separatore);
    border-color: var(--bordo);
    color: var(--grigio-tenue);
    cursor: not-allowed;
}
.scelta-nascosta:disabled + .pastiglia-scelta:hover {
    border-color: var(--bordo);
    color: var(--grigio-tenue);
}

/* ── LA QUALITA' IN TESTA ALLA SCHEDA DEL SOCIO ──────────────────────────
   Socio e volontario stanno in cima perche' sono quel che l'anagrafica E':
   tutto il resto della scheda descrive una persona che e' gia' l'una o
   l'altra cosa. Un filo azzurro a sinistra e un fondo tenue bastano a
   staccarle dai campi che seguono senza farne un riquadro a se'. */
.qualita-anagrafica {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--blu);
    border-radius: var(--raggio-s);
    background: var(--blu-tenue);
}

.etichetta-qualita {
    font-size: var(--testo-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grigio);
}

/* ── L'ATTO ALL'ALTRO CAPO DELLA BARRA ───────────────────────────────────
   Le pastiglie dicono che cosa l'anagrafica E'; questa dice PERCHE' — quale
   delibera lo stabilisce e da quando. Sta dalla parte opposta perche' sono
   due cose diverse: a sinistra quel che si puo' cambiare da qui, a destra
   l'atto che va cambiato altrove, e premendola ci si arriva.

   «margin-left: auto» e non un secondo contenitore: la barra e' gia' una
   riga flessibile, e questo la spinge da sola contro il bordo destro
   qualunque cosa ci sia in mezzo — spiegazione compresa, quando c'e'. */
.atto-qualita {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: var(--raggio-s);
    text-decoration: none;
    white-space: nowrap;
}
#contenuto a.atto-qualita,
#contenuto a.atto-qualita:link,
#contenuto a.atto-qualita:visited { color: inherit; text-decoration: none; }
#contenuto a.atto-qualita:hover   { background: #ffffff; text-decoration: none; }
.data-atto { font-size: var(--testo-xs); color: var(--grigio); font-variant-numeric: tabular-nums; }

/* La spiegazione del blocco non deve spingere l'atto fuori dalla barra: si
   restringe lei, che e' una nota, invece della cosa che si preme. */
.spiegazione-qualita { flex: 0 1 auto; min-width: 0; }

/* Sotto una certa larghezza la barra va a capo invece di comprimersi: tre
   blocchi su una riga di trecento pixel diventano tre colonne di una lettera. */
@media (max-width: 700px) {
    .qualita-anagrafica { flex-wrap: wrap; }
    .atto-qualita { margin-left: 0; }
}

/* ── I RIQUADRI CHE SI ACCENDONO E SI SPENGONO ───────────────────────────
   Nella pagina di tesseramento il contributo riguarda i soci e
   l'assicurazione i volontari: quello che non si applica resta al suo posto
   in grigio invece di sparire. Sparendo, chi cerca il campo dell'assicurazione
   lo cerca finche' non si arrende; spento, si vede che c'e' e che adesso non
   serve. */
.riquadro-spento {
    background: var(--fondo);
    border-color: var(--bordo);
    opacity: 0.55;
}
.riquadro-spento > h4 { color: var(--grigio-tenue); }

/* La quota di Sezione e i consensi stanno richiusi: la prima perche' e'
   facoltativa, i secondi perche' quando ci sono tutti non c'e' niente da
   decidere. Il riassunto e' il loro titolo e deve leggersi come tale. */
.pannello-quota > summary,
.pannello-consensi > summary {
    cursor: pointer;
    font-size: var(--testo-l);
    font-weight: 600;
    color: var(--blu-scuro);
    padding: 2px 0;
}
.pannello-quota[open] > summary,
.pannello-consensi[open] > summary { margin-bottom: 12px; }

/* I riquadri condizionati della pagina di tesseramento sono richiudibili: il
   riassunto e' il loro titolo e deve leggersi come tale. */
.riquadro-condizionato > summary {
    cursor: pointer;
    font-size: var(--testo-l);
    font-weight: 600;
    color: var(--blu-scuro);
    padding: 2px 0;
}
.riquadro-condizionato[open] > summary { margin-bottom: 12px; }

/* LA FORMA GENERALE di un <summary> che fa da titolo di riquadro. I tre casi
   qui sopra sono la stessa cosa scritta prima che servisse un nome: chi ne
   tocca uno li porti qui, invece di aggiungerne un quarto. */
/* UNA CASELLA DI SPUNTA E LA SUA ETICHETTA SONO UNA COSA SOLA: cliccare sul
   testo deve spuntare la casella, e fra le due non deve andare a capo. Serve
   dove si sceglie da un elenco — i profili di un'utenza nuova. */
.etichetta-scelta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    cursor: pointer;
}

summary.titolo-collassabile {
    cursor: pointer;
    font-size: var(--testo-l);
    font-weight: 600;
    color: var(--blu-scuro);
    padding: 2px 0;
}
details[open] > summary.titolo-collassabile { margin-bottom: 12px; }
.riquadro-spento > summary { color: var(--grigio-tenue); }

/* «Non si applica» si legge solo quando e' vero: nel riassunto di un riquadro
   spento spiega perche' e' chiuso, cosi' chi lo trova richiuso non lo scambia
   per una dimenticanza. */
.solo-se-spento { display: none; }
.riquadro-spento .solo-se-spento { display: inline-block; }

/* Spento vince sul giallo: un riquadro che non si applica non ha niente da
   chiedere, e il giallo direbbe il contrario proprio mentre i campi dentro
   sono disattivati. */
.riquadro.riquadro-mancanze.riquadro-spento {
    background: var(--fondo);
    border-color: var(--bordo);
    border-left-color: var(--bordo);
}

/* Una pastiglia bloccata non e' spenta: la qualita' C'E', e non si toglie da
   qui — con una delibera di associazione in corso, o con un incarico di
   Sezione aperto. Resta piena come le accese, con il bordo tratteggiato che
   dice «non si cambia» e il titolo che dice perche'. Grigia come le
   disattivate direbbe il contrario di quel che e'. */
.pastiglia-scelta.pastiglia-bloccata {
    cursor: not-allowed;
    border-style: dashed;
}
.scelta-nascosta:checked + .pastiglia-scelta.pastiglia-bloccata {
    background: var(--blu-scuro);
    border-color: var(--blu-scuro);
    color: #fff;
}
.pastiglia-scelta.pastiglia-bloccata:hover {
    border-color: var(--blu-scuro);
    color: #fff;
}

/* ── LO STATO DELLA DISTINTA NELL'ELENCO DEI TESSERABILI ─────────────────
   Il colore dice se tocca ancora a qualcuno in Sezione. Giallo pieno finché
   c'e' qualcosa da fare — la distinta non c'e', e' in bozza, e' tornata
   indietro — giallo chiaro quando e' partita e si aspetta una firma, niente
   quando la firma e' arrivata: li' la Sezione ha finito, e una riga colorata
   le chiederebbe attenzione per un lavoro che non e' piu' suo. */
.riga-distinta-manca   > td { background: var(--oro-bordo); }
.riga-distinta-inviata > td { background: var(--oro-tenue); }

/* La pastiglia dello stato e' un collegamento: resta bianca sopra il suo
   fondo pieno, come gli altri tasti-pastiglia del gestionale. */
#contenuto a.pastiglia-stato,
#contenuto a.pastiglia-stato:link,
#contenuto a.pastiglia-stato:visited,
#contenuto a.pastiglia-stato:hover { color: #fff; text-decoration: none; }
#contenuto a.pastiglia-stato.fondo-neutro,
#contenuto a.pastiglia-stato.fondo-neutro:link,
#contenuto a.pastiglia-stato.fondo-neutro:visited { color: var(--grigio); }
#contenuto a.pastiglia-stato:hover { filter: brightness(1.12); }

/* ── I VERSAMENTI IN ATTESA DI DISTINTA (tesseramento/distinte.php) ──────
   Un blocco per giorno di versamento: ciascuno e' una distinta che si puo'
   confermare com'e'. Senza un confine visibile i gruppi si leggono come
   un'unica tabella lunga, e non si capisce quale CONFERMA prende quali
   righe — che e' l'unica cosa che qui bisogna capire al primo sguardo. */
.gruppo-versamento {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    background: var(--fondo);
}
.gruppo-versamento:last-child { margin-bottom: 0; }

.testata-versamento {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}
.giorno-versamento {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--testo-s);
}

/* Il nome e' l'etichetta della casella: cliccarlo deve spuntare e togliere
   la spunta, se no per escludere qualcuno bisogna centrare un quadratino. */
.gruppo-versamento tbody label { cursor: pointer; }

/* La data del bonifico dentro una riga d'elenco: la casella normale e' alta
   quanto un campo di modulo e allargava ogni riga della tabella. */
.campo-data .campo-data-testo.campo-data-stretto {
    width: 96px;
    padding: 3px 6px;
    font-size: var(--testo-xs);
}

/* ── DUE TASTI CHE CHIUDONO LA STESSA PAGINA ────────────────────────────
   Uno manda avanti la pratica, l'altro la butta: stanno sulla stessa riga
   perche' la scelta e' una sola, ma agli antipodi e con uno spazio in mezzo,
   perche' non si preme l'uno credendo di premere l'altro. Su schermo stretto
   vanno a capo e il rosso resta sotto, mai sopra. */
.azioni-form.azioni-opposte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* ── LA BACHECA ─────────────────────────────────────────────────────────
   Un avviso e' una notizia, non una pratica: si legge e si chiude. Quelli da
   leggere hanno il filetto colorato a sinistra e restano in evidenza; quelli
   gia' letti si spengono e restano consultabili, perche' raccontano che
   qualcun altro ha toccato una persona di casa. */
/* ── SCEGLIERE I DESTINATARI DI UN AVVISO ──────────────────────────
   Due colonne di spunte, Sezioni e utenze, che possono essere sessanta e
   venti: senza un tetto in altezza il modulo diventa una pagina intera e il
   tasto «Pubblica» finisce fuori schermo. Si scorre dentro la colonna. */
.due-colonne-destinatari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-3);
}
.colonna-destinatari {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-s);
    padding: var(--sp-2);
}
.scelta-destinatario {
    display: block;
    padding: 2px 0;
    white-space: nowrap;
}
.scelta-destinatario input { margin-right: 6px; }

.avviso-bacheca {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
    background: var(--fondo);
}
.avviso-bacheca:last-child { margin-bottom: 0; }
.avviso-bacheca-nuovo {
    border-left-color: var(--ambra);
    background: var(--ambra-tenue);
}
.testata-avviso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-1);
}
.titolo-avviso { font-weight: 600; }
.azioni-avviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
}

/* ── UNA SCHEDA CHE SI LEGGE E BASTA ────────────────────────────────────
   La scheda di un volontario che appartiene a un'altra Sezione si apre ma non
   si tocca. Qui si spengono i comandi che scrivono — sono una ventina fra
   moduli e tasti, e nasconderli uno per uno vuol dire dimenticarne uno.
   NON E' IL CONTROLLO: quello sta nel server (richiediModificaSocio), che
   rifiuta anche quel che arriva da una richiesta costruita a mano. Questo
   serve a non offrire tasti che non funzionerebbero. */
.scheda-sola-lettura button[type="submit"],
.scheda-sola-lettura .azioni-form,
.scheda-sola-lettura .azioni-riga { display: none; }

/* I campi restano leggibili ma non si scrivono: spenti, non spariti — quel
   che c'e' scritto dentro e' il dato che si e' venuti a leggere. */
.scheda-sola-lettura input:not([type="hidden"]),
.scheda-sola-lettura select,
.scheda-sola-lettura textarea {
    pointer-events: none;
    background: var(--fondo);
    color: var(--grigio);
}


/* ── IL RIPRISTINO DELLO STANDARD ─────────────────────────────
   Il tasto e la riga che dice quanto manca stanno sulla stessa
   linea, e vanno a capo insieme quando la finestra è stretta:
   il numero senza il tasto non vuol dire niente.
   ============================================================ */
.riga-ripristino {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 var(--sp-3);
}


/* ── LE COPIE STORICIZZATE ────────────────────────────────────
   Una copia sta sotto il suo esercizio e ne è chiaramente un
   ramo: rientro a sinistra e riga più tenue, così l'elenco si
   legge come una gerarchia e non come esercizi ripetuti.
   ============================================================ */
.riga-copia > td:first-child { padding-left: 26px; }
.riga-copia > td             { background: var(--fondo); }

/* La pastiglia dell'archivio è neutra apposta: le altre tre dicono un
   passaggio del lavoro — aperto, chiuso, inviato — una copia no. */
.bil-stato-archivio { background: var(--riga); color: var(--grigio); }


/* ── LE RIGHE SOPITE DEL PREVENTIVO ───────────────────────────
   Un capitolo che si è mosso quest'anno e per l'anno prossimo
   non prevede niente: resta in elenco per farsi vedere, ma
   fuori dai totali. Il grigio dice «non conta», non «è vuoto».
   ============================================================ */
.riga-sopita > td { background: var(--riga); color: var(--grigio); }
.tabella-previsione .campo-importo {
    width: 8.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ── I DUE MODI DI APRIRE UN ESERCIZIO ────────────────────────
   Due moduli nello stesso riquadro: la riga li separa, così si
   vede che sono due strade e non un unico modulo lungo.
   ============================================================ */
.modulo-apertura + .modulo-apertura {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--bordo);
}
.modulo-apertura h5 {
    margin: 0 0 var(--sp-2);
    font-size: var(--testo-l);
}

/* La spiegazione sotto un campo: sta con lui, non nella nota del
   riquadro, perché riguarda quella scelta e non tutto il modulo. */
.nota-campo {
    display: block;
    margin-top: 4px;
    font-size: var(--testo-s);
    color: var(--grigio);
}


/* ── I CONTROLLI DI COERENZA COL MODELLO D ────────────────────
   Due soli colori, e sono un semaforo: verde vuol dire che i
   saldi si possono guardare, giallo che il rendiconto è più
   povero del bilancio. Non c'è il rosso: nessuno di questi
   controlli dice che il bilancio è sbagliato — dice che una
   parte non arriva dove dovrebbe, che è una cosa da sistemare,
   non un errore di conto.
   ============================================================ */
.semaforo-verde  { background: var(--verde-tenue); color: var(--verde-testo); }
.semaforo-giallo { background: var(--oro-tenue);   color: #6b4e00; }

.controllo-coerenza + .controllo-coerenza {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--separatore);
}
.controllo-coerenza h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-2);
    font-size: var(--testo);
}
.pastiglia-esito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--testo-s);
}
.elenco-stretto { margin: 0 0 var(--sp-3); padding-left: 1.3em; }
.elenco-stretto li { margin: 3px 0; }

/* ── CHE COSA MANCA, SOTTO LA PASTIGLIA ───────────────────────────────────
   Nel registro delle mancanze ogni verdetto porta sotto l'elenco delle voci
   che mancano davvero: «4 da raccogliere» dice quanto lavoro c'è, non quale,
   e chi prende in mano il telefono deve sapere che cosa chiedere.

   PICCOLO E SENZA PALLINI: è una nota sotto una pastiglia, non un elenco
   puntato — i pallini, ripetuti su duemila righe, sarebbero rumore. Largo al
   massimo quanto una colonna leggibile: senza un tetto, le descrizioni dei
   consensi (la più lunga è di 156 caratteri) allargherebbero la tabella
   fino a rendere illeggibile tutto il resto. */
#contenuto ul.che-manca {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-width: 30em;
    font-size: var(--testo-xs);
    color: var(--grigio);
    line-height: 1.35;
}
#contenuto ul.che-manca li { margin: 1px 0; }
/* Il trattino fa da segno di elenco senza pesare come un pallino. */
#contenuto ul.che-manca li::before { content: "– "; }

/* La legenda delle voci per esteso, nel registro delle mancanze. */
.legenda-voci h5 { margin: 10px 0 4px; font-size: var(--testo-s); }
.legenda-voci h5:first-child { margin-top: 0; }
.legenda-voci ol { margin: 0; padding-left: 1.6em; font-size: var(--testo-s); line-height: 1.5; }

/* ── IL RIQUADRO DI RICERCA, APRIBILE ─────────────────────────────────────
   È un <details>: si apre e si chiude senza copione, e funziona anche il
   giorno in cui il copione non arriva. Il <summary> si veste come le altre
   testate richiudibili, così il riquadro somiglia a quelli della scheda
   invece di essere una cosa a parte. */
details.riquadro > summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
    font-weight: 600;
}
details.riquadro > summary::-webkit-details-marker { display: none; }
/* Il triangolo lo disegniamo noi, così gira aprendo senza dipendere da come
   ogni browser disegna il proprio. */
details.riquadro > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform .12s ease;
}
details.riquadro[open] > summary::before { transform: rotate(90deg); }
details.riquadro > summary:hover { background: var(--separatore); }

/* Le righe della ricerca: i campi vanno a capo da soli su uno schermo stretto
   invece di uscire dal riquadro. */
.modulo-ricerca .riga-filtro { flex-wrap: wrap; margin: 0 0 8px; }
.modulo-ricerca .campo-filtro { min-width: 22em; }

/* UN NUMERO NON HA BISOGNO DI VENTIDUE EM. L'età si scrive in due cifre, e una
   casella larga come quella del cognome fa credere che ci vada una frase. La
   colonna resta larga — l'allineamento della maschera non si tocca — ma il
   campo dentro è della misura di quel che ci si scrive. */
.campo-modulo.campo-stretto { max-width: 8em; }

/* ── LO SPECCHIETTO DELLE VACCINAZIONI OBBLIGATORIE ─────────────────────────
   Sta nella linguetta Scheda medica, sotto le domande sulle vaccinazioni, ed
   è una tabella da leggere in mezzo a una tabella da compilare. Si distingue
   perché non si compila: testo più piccolo, nessun campo, e una didascalia
   che lo dice. Senza questa differenza sembrerebbe l'ennesima riga da
   riempire. */
.specchietto-vaccinale { margin-top: var(--sp-5); font-size: var(--testo-s); }

.specchietto-vaccinale caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: var(--sp-2);
    color: var(--grigio);
}

.specchietto-vaccinale th,
.specchietto-vaccinale td {
    vertical-align: top;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) 0;
    border-top: 1px solid var(--bordo);
}

/* La fascia d'età non va a capo: è la chiave di lettura della riga. */
.specchietto-vaccinale th { white-space: nowrap; font-weight: 600; }


/* ── IL TASTO CHE AZZERA LA SCHEDA MEDICA ──────────────────────────────────
   Stessa forma del tasto di stampa che gli sta accanto — è un'azione della
   stessa testata, e due forme diverse sulla stessa riga si leggono come due
   cose scollegate — ma rossa, perché toglie invece di aggiungere. Non è il
   rosso pieno di .pulsante-pericolo: quello è per il tasto principale di una
   pagina, e qui sarebbe il segno più grosso di una linguetta in cui l'azione
   normale è scrivere. Il contorno lo dice senza gridarlo, e al passaggio del
   mouse si riempie: chi ci sta andando sopra capisce che cosa sta per fare. */
#contenuto .bottone-azzera {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--rosso);
    border-radius: 999px;
    background: transparent;
    color: var(--rosso);
    font-size: var(--testo-s);
    font-weight: 600;
    cursor: pointer;
}

#contenuto .bottone-azzera:hover { background: var(--rosso); color: #fff; }

/* ── CHI PUÒ VEDERE LA SCHEDA MEDICA ───────────────────────────────────────
   Un elenco di nomi, non un modulo: righe strette, nessun campo, e la
   qualifica accanto al nome invece che sotto. Sta dentro un riquadro che si
   apre — è una risposta che serve quando la si cerca, non ogni volta che si
   apre la linguetta. */
.tabella-chi-vede { margin-top: var(--sp-3); font-size: var(--testo-s); }

.tabella-chi-vede th,
.tabella-chi-vede td {
    padding: var(--sp-1) var(--sp-4) var(--sp-1) 0;
    border-top: 1px solid var(--bordo);
    vertical-align: top;
    text-align: left;
}

/* Il nome non va a capo: è la chiave di lettura della riga. */
.tabella-chi-vede th { white-space: nowrap; font-weight: 600; }

/* Chi legge e basta e chi scrive: la differenza si vede senza rileggere. */
.tabella-chi-vede td:last-child { color: var(--grigio); white-space: nowrap; }

/* ── LA PREMESSA DELLA SCHEDA MEDICA ───────────────────────────────────────
   Sta in cima alla linguetta e dice che le risposte che seguono sono
   volontarie e non vanno provate. Il filetto a sinistra la stacca dalla prosa
   che la circonda senza farne un allarme: è il contrario di un avviso di
   pericolo — dice che nessuno è obbligato a niente. Le stesse parole, con lo
   stesso segno, aprono il foglio stampato. */
.premessa-medica {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--grigio-chiaro);
    background: var(--superficie);
    color: var(--grigio);
    font-size: var(--testo-s);
    line-height: 1.5;
    text-align: justify;
}

/* ── I DUE CONTATTI DI EMERGENZA ───────────────────────────────────────────
   «Primo contatto» e «Secondo contatto» sono i titoli dei due gruppi, non due
   etichette come quelle che stanno sotto: con il peso di .testata-tabella si
   confondevano con «Nominativo» e «Rapporto di parentela», e il riquadro
   sembrava un elenco di sei caselle invece che due contatti da tre.

   IL GRASSETTO DA SOLO NON BASTAVA, perché tutte le intestazioni di riga qui
   dentro sono maiuscole e spaziate: due pesi dello stesso carattere, sulla
   stessa colonna, si distinguono a fatica. Quel che li fa emergere è che le
   caselle rientrano: i titoli restano a filo e le tre domande di ciascuno si
   spostano dentro, così il gruppo si vede come gruppo prima ancora di
   leggerlo. */
.titolo-contatto {
    font-weight: 700;
    font-size: var(--testo-s);
    letter-spacing: .6px;
    color: var(--inchiostro);
    padding-top: var(--sp-4);
}

#box-emergenza tr:not(.testata-tabella) th { padding-left: var(--sp-6); }

/* ── UNA RIGA SPUNTATA IN UN ELENCO ────────────────────────────────────────
   La spunta vale solo dentro quella lista — è un segno di lavoro, «questo
   l'ho chiamato» — e deve vedersi scorrendo la pagina, non solo guardando la
   casella. Un fondo tenue e un filetto a sinistra: abbastanza da distinguersi
   dalla zebratura, non tanto da sembrare un errore. */
/* LA SPUNTA METTE LA BARRETTA, I COLORI METTONO IL FONDO. Sono tre segni
   indipendenti e una riga può portarne più d'uno: se si contendessero il
   fondo, spuntare una riga già verde l'avrebbe fatta sembrare non più verde.
   Così la barretta a sinistra dice «fatto» e il fondo dice di che colore l'hai
   segnata, e le due cose si leggono insieme.

   IL FONDO DELLA SPUNTA È APPENA ACCENNATO e blu, non verde: il verde adesso è
   un segno che si sceglie, e due verdi con due significati diversi nella stessa
   tabella non si distinguono. */
/* LA BARRETTA STA SULLA PRIMA CELLA, non su tutte. Applicata a ogni «td»
   disegnava una riga verticale davanti a ogni colonna — dodici barrette
   invece di una — e la tabella sembrava rigata. Si vede solo adesso che le
   righe colorate sono tre, ma sbagliata lo era già. */
tr.riga-spuntata > td { background: var(--blu-tenue); }
tr.riga-spuntata > td:first-child { box-shadow: inset 3px 0 0 var(--blu); }

/* I due segni colorati. Vengono dopo la spunta di proposito: su una riga che è
   spuntata e verde, il fondo che si vede è quello del colore scelto. */
tr.riga-verde  > td { background: var(--verde-tenue); }
tr.riga-gialla > td { background: var(--ambra-tenue); }

/* VERDE E GIALLO INSIEME NON SI SCELGONO A CASO: chi spunta tutt'e due vuole
   vedere tutt'e due, e un fondo solo ne nasconderebbe uno.

   UN RIGATINO FINE E NON MEZZA RIGA PER COLORE. Il fondo lo disegna ogni cella
   per conto suo: una riga divisa a metà si spezzava a ogni colonna e usciva una
   scalinata, che sembra un difetto invece di una scelta. Un rigatino di otto
   pixel si ripete dentro ogni cella e si legge come una texture — «tutte e
   due» — comunque cadano i confini delle colonne. */
tr.riga-verde.riga-gialla > td {
    background: repeating-linear-gradient(135deg,
        var(--verde-tenue) 0 7px, var(--ambra-tenue) 7px 14px);
}

/* La barretta della spunta sopravvive al colore: sono due informazioni. */
tr.riga-spuntata.riga-verde  > td:first-child,
tr.riga-spuntata.riga-gialla > td:first-child { box-shadow: inset 3px 0 0 var(--blu); }

/* Le tre colonne delle caselle: strette, e ognuna col suo colore
   nell'intestazione, così si sa quale casella fa che cosa senza provarle. */
.c-segno { width: 1%; white-space: nowrap; }
th.c-segno-verde  { color: var(--verde-testo); }
th.c-segno-gialla { color: var(--ambra); }

/* Le pastiglie del conto, accanto al nome dell'elenco. */
.pastiglia-segno { margin-left: var(--sp-1); }
.pastiglia-spunta { background: var(--blu-tenue);  color: var(--blu); }
.pastiglia-verde  { background: var(--verde-tenue); color: var(--verde-testo); }
.pastiglia-gialla { background: var(--ambra-tenue); color: var(--ambra); }

/* L'elenco aperto, nella tabella di quelli salvati: si riconosce a colpo
   d'occhio senza confondersi con una riga spuntata, che vuol dire un'altra
   cosa — quella è un segno di lavoro dentro una lista, questa è «sei qui». */
tr.riga-aperta > td {
    background: var(--superficie);
    box-shadow: inset 3px 0 0 var(--blu);
    font-weight: 500;
}

/* ── LE COLONNE IN PIÙ DI UN ELENCO ─────────────────────────────────────────
   registri/elenchi.php: le colonne dell'anagrafica che si possono aggiungere
   alla tabella di una lista. Sono una quarantina, e in colonna occuperebbero
   due schermate per una scelta che si fa una volta sola.

   A COLONNE STRETTE E NON IN FILA: le etichette sono corte e diseguali —
   «CAP», «Spedizione: provincia» — e messe in fila col ritorno a capo
   automatico le caselle finivano incolonnate a caso, con la casella di una
   riga sopra l'etichetta di un'altra. Una griglia le tiene allineate. */
.scelta-colonne {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-3) 0 var(--sp-4);
}

/* La casella e la sua etichetta non si separano mai: divise da un ritorno a
   capo, la casella sembra riferirsi alla voce di sopra. */
.scelta-campo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--testo-s);
    line-height: 1.35;
    cursor: pointer;
}

.scelta-campo input { flex: none; }

/* Un riquadro dentro un riquadro: niente ombra e un fondo appena diverso,
   perché una seconda scatola con la stessa ombra sembra staccata da quella
   che la contiene. */
.riquadro-interno {
    box-shadow: none;
    margin: 0 0 var(--sp-4);
    background: var(--fondo);
}

/* Le colonne in più nella tabella: più minute delle sei di sempre, perché
   sono un contorno ai nomi e non la ragione per cui si guarda l'elenco. */
td.c-piu, th.c-piu { font-size: var(--testo-s); }
td.c-piu { color: var(--grigio); }

/* ── LE COLONNE IN PIÙ, RAGGRUPPATE PER TEMA ────────────────────────────────
   Un titolino e una griglia per ogni argomento. Il filo verticale a sinistra
   fa il gruppo senza disegnare una scatola: quaranta caselle in sei scatole
   sarebbero sei riquadri dentro un riquadro dentro una pagina, e a quel punto
   non si capisce più che cosa contiene che cosa. */
.tema-colonne {
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--bordo);
}

.tema-colonne h5 {
    margin: 0;
    font-size: var(--testo-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grigio);
}

.tema-colonne .scelta-colonne { margin-top: var(--sp-2); }

/* IL TEMA DELLA SALUTE SI VEDE CHE È DIVERSO. Sono dati dell'articolo 9, e
   chi spunta quelle caselle deve accorgersi di stare facendo qualcosa che non
   è come spuntare «Telefono 2». Il filo rosso non è un divieto — quelle voci
   si possono usare, ed è per quello che ci sono — è un richiamo. */
.tema-salute { border-left-color: var(--rosso); }
.tema-salute h5 { color: var(--rosso); }

/* IL TEMA DEI CONSENSI HA IL SUO FILO, di un altro colore: non è un richiamo
   come quello della salute — questi non sono dati particolari — ma sono
   colonne che dicono che cosa si PUÒ fare, e vanno riconosciute a colpo
   d'occhio in mezzo a «Telefono 2» e «CAP». */
.tema-privacy { border-left-color: var(--blu); }
.tema-privacy h5 { color: var(--blu); }

/* IL NOME DEL NUOVO ELENCO STA IN CIMA AI RISULTATI, e si deve vedere che è
   il gesto che conta: senza un fondo, in mezzo alla maschera di ricerca e
   alla tabella, era una riga di campi come le altre. */
/* ── IL PERCORSO SCOUT, A CHI HA SOLO SÉ STESSO ────────────────────────────
   Delibere, curriculum, incarichi, passaggi di formazione: sono atti di
   qualcun altro, e un'utenza che vede solo la propria scheda li legge. I
   comandi si spengono QUI DENTRO e non su tutta la scheda, perché i recapiti
   e i consensi quella stessa utenza li scrive davvero.

   NON È IL CONTROLLO: quello è la guardia sul salvataggio, che rifiuta anche
   una richiesta costruita a mano. Questo serve a non offrire tasti che non
   funzionano — e un tasto che rifiuta sempre insegna che il programma è rotto. */
.percorso-solo-lettura button[type="submit"],
.percorso-solo-lettura .azioni-riga,
.percorso-solo-lettura .scheda-collassabile .scheda-titolo,
/* ANCHE IL TASTO DEL CALENDARIO: non è un «submit», e restava acceso accanto
   a una data che non si tocca. Un tasto che non fa niente è peggio di un tasto
   che manca — chi lo preme crede che il programma non risponda. */
.percorso-solo-lettura .campo-data-pulsante,
.percorso-solo-lettura .riga-nuova { display: none; }

.percorso-solo-lettura input:not([type="hidden"]),
.percorso-solo-lettura select,
.percorso-solo-lettura textarea,
/* IL CONTORNO DELLE DATE STA SUL CONTENITORE, non sul campo: togliendolo solo
   al campo restava una cornice vuota intorno a un testo che non si tocca, e
   una cornice vuota promette che ci si possa scrivere. */
.percorso-solo-lettura .campo-data {
    border: 0;
    background: transparent;
    padding-left: 0;
    pointer-events: none;
    appearance: none;
}

/* Un campo che prende tutta la riga: le note di un corso sono tre righe di
   testo, e in una colonna larga venti caratteri non si scrivono. */
.campo-filtro.campo-lungo { flex: 1 1 100%; }

/* Una riga che va sotto quella sopra dentro la stessa cella: le date della
   finestra sotto la pastiglia che dice se è aperta. */
.blocco-sotto { display: block; color: var(--grigio); }

.salva-in-cima {
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    background: var(--blu-tenue);
    border-radius: var(--raggio);
    align-items: flex-end;
}

/* I risultati della ricerca stanno dentro il riquadro della ricerca: un
   titolino li stacca dalla maschera senza aprire una seconda scatola. */
.titolo-risultati {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: var(--testo-m);
    font-weight: 600;
}

/* ── UN NOME CHE NON È UN NOME DI PERSONA ───────────────────────────────────
   In tutta PAOLA i campi che si chiamano «nome», «cognome», «citta» e simili
   si scrivono in maiuscolo: sono dati dell'anagrafica, e l'archivio li tiene
   così. Il nome di un ELENCO si chiama anche lui «nome» e finiva nella stessa
   regola: chi scriveva «Campo estivo 2027» si vedeva rispondere «CAMPO ESTIVO
   2027», e non è né un dato anagrafico né qualcosa che qualcuno abbia scelto.

   Si toglie con una classe sul campo, e non restringendo la regola di sopra:
   quella riguarda quindici campi veri, e cambiarla per un caso solo la
   renderebbe una regola con un'eccezione dentro. */
.campo-libero { text-transform: none; }

/* ── LA RIGA SOPRA IL TITOLO ────────────────────────────────────────────────
   Un tasto che porta via dalla pagina, messo prima del titolo perché è la
   prima cosa che serve a chi si è accorto di essere nel posto sbagliato. Sta
   staccato dal titolo quel tanto che basta a non sembrarne parte. */
.capo-pagina {
    margin: 0 0 var(--sp-2);
}


/* ══ UN QUESTIONARIO NON È UNA RIGA DI FILTRI ══════════════════════════════
 *
 * Le domande stavano dentro «riga-filtro» e «campo-filtro», che sono le
 * classi della striscia di ricerca in cima a un elenco: compatte apposta,
 * perché lì servono a stare in poco spazio. Su un questionario di centotrenta
 * domande facevano un nastro stretto a sinistra — ogni casella larga 320
 * punti dentro un riquadro da 1230, un quarto della riga — e tre quarti di
 * pagina bianchi accanto. Un testo lungo si scriveva e si rileggeva da uno
 * spioncino.
 *
 * E NON C'ERA UNA SCALA DI TITOLI: il nome della sezione era 14 punti come la
 * domanda, e la domanda 14 punti come tutto il resto. Tre livelli scritti
 * tutti uguali non sono tre livelli. Qui il titolo della sezione è più grande
 * della domanda, la domanda è più forte del suo aiuto, e l'aiuto è più
 * piccolo e grigio: si capisce dove si è senza leggere.
 */

/* Il titolo di una sezione di domande: più grande di una domanda, perché le
   sta sopra. Solo qui — negli altri riquadri il titolo è una riga di
   intestazione, non l'apertura di un capitolo. */
/* CON L'ID DAVANTI, perché la regola di base è «#contenuto h4»: un id batte
   qualunque classe, e senza pareggiare la specificità questa non si applica
   affatto — la sezione tornava grande come la domanda senza che si capisse
   perché. */
#contenuto .riquadro-domande > h4 {
    font-size: var(--testo-l);
    letter-spacing: 0;
    text-transform: none;
}

/* UNA DOMANDA PER RIGA, separata dalla successiva da un filo: in un elenco
   lungo senza separazioni l'occhio perde il posto fra una risposta e la
   domanda dopo. */
/* Vale sia per il <div> di una domanda con un controllo solo sia per il
   <fieldset> di un gruppo di caselle: il fieldset va spogliato del bordo e
   dei margini che il browser gli mette d'ufficio, o si vedrebbero due
   cornici in mezzo alle domande. */
.domanda {
    padding: var(--sp-3) 0;
    border: 0;
    border-top: 1px solid var(--bordo);
    margin: 0;
    min-width: 0;
}
.domanda > legend { padding: 0; }
.domanda:first-child { padding-top: 0; border-top: 0; }
.domanda:last-child  { padding-bottom: 0; }

.domanda-testo {
    display: block;
    font-weight: 600;
    margin: 0 0 var(--sp-2);
}
.domanda-obbligo { color: var(--rosso); }

.domanda-aiuto {
    display: block;
    font-size: var(--testo-s);
    font-weight: 400;
    color: var(--grigio);
    margin: calc(var(--sp-1) * -1) 0 var(--sp-2);
}

/* LA RISPOSTA PRENDE LA RIGA, tutta.
   C'era un tetto di 46em «per non perdere il capo della riga»: era un tetto
   sopra un tetto, e il conto lo dice — 598 punti dentro un riquadro da 1230,
   di nuovo la meta' della pagina vuota, cioe' il difetto di prima appena
   attenuato. La misura di lettura ce l'ha gia' la pagina: «#contenuto» e'
   largo al massimo 1400 punti, e dentro un riquadro la riga non arriva mai a
   essere lunga un metro. Una seconda misura piu' stretta non protegge
   nessuno: lascia solo bianco a destra di ogni risposta, e il bianco a destra
   di un campo si legge come un campo sbagliato. */
.domanda .campo-modulo {
    width: 100%;
    max-width: 100%;
}
/* Le risposte che sono corte per natura restano corte: una casella larga
   mezza pagina per un anno di quattro cifre dice «scrivici dentro un tema». */
.domanda .campo-modulo.campo-stretto { width: 8em; max-width: 8em; }
.domanda .campo-modulo.campo-breve   { width: 14em; max-width: 14em; }
.domanda .campo-data.campo-modulo    { width: 320px; max-width: 100%; }
.domanda textarea.campo-modulo       { min-height: 5.5em; }

/* IN SOLA LETTURA IL CAMPO SI FA DA PARTE: chi rilegge un questionario
   inviato legge un documento, non compila un modulo, e venti caselle spente
   col bordo pieno sembrano venti cose da fare. Il testo resta nero — è la
   risposta, ed è la cosa che si è venuti a leggere. */
.domanda .campo-modulo:disabled {
    background: var(--fondo);
    border-color: var(--bordo);
    color: inherit;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}

/* Le scelte multiple in colonne, ma sotto la domanda e non di fianco. */
.domanda .scelta-colonne { margin-top: var(--sp-1); }

@media (max-width: 767px) {
    .domanda .campo-modulo,
    .domanda .campo-modulo.campo-breve { width: 100%; max-width: 100%; }
}


/* ══ IL REGISTRO DELLE TESI ════════════════════════════════════════════════
 *
 * QUATTRO LIVELLI SCRITTI IN DUE. «Tesi» è il titolo della pagina, «Da
 * decidere» è un blocco che ne raccoglie sessanta, e dentro ogni tesi porta
 * il nome di una persona: tre cose diverse, e le ultime due si scrivevano
 * uguali — quattordici punti in grassetto tutte e due. Chi scorre non
 * distingue un gruppo da una riga, e un registro lungo diventa un muro.
 *
 * E I CAMPI ERANO STRETTI COME UNA STRISCIA DI RICERCA, perché usavano le sue
 * classi: l'argomento di una tesi può arrivare a duecentocinquantacinque
 * caratteri e stava in una casella larga 320 punti dentro un riquadro da
 * 1316. Un quarto della riga, e il resto bianco.
 */

/* Il blocco di uno stato apre un capitolo: più grande di una tesi. */
#contenuto .registro-tesi > summary {
    font-size: var(--testo-l);
}

/* UNA TESI È UNA SCHEDA DENTRO UN BLOCCO, e si legge come cosa subordinata:
   il filo d'oro a sinistra è quello che porta ogni riquadro annidato del
   programma, e dice «questa sta dentro quella».

   IL NOME RESTA QUATTORDICI PUNTI, e non è una dimenticanza. Portarlo a
   sedici lo farebbe tornare uguale al blocco che lo contiene, che è il
   difetto da cui si è partiti. La scala è 22 · 16 · 14 forte · 12 grigio:
   quattro gradini, e il nome di una persona si distingue dal gruppo che la
   raccoglie per la dimensione, non per il grassetto che hanno tutti e due. */

/* I CAMPI PRENDONO LA RIGA. L'argomento e le note per intero — sono testo
   lungo, e un testo lungo dentro uno spioncino non si rilegge — l'ambito e il
   tutor no: sono due parole, e una casella larga mezza pagina per «Metodo»
   dice «scrivici un tema». */
.tesi-modulo .campo-modulo { width: 100%; max-width: 100%; }
.tesi-modulo .campo-corto  { width: 22em; max-width: 100%; }
.tesi-modulo textarea.campo-modulo { min-height: 5em; }

/* La riga delle tre caselle corte: stanno in fila finché ci stanno. */
.tesi-modulo .riga-corta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-3);
}
/* «0 0 auto» E NON «0 1 auto»: il campo data è un pezzo unico — la casella e
   il pulsante del calendario dentro la stessa cornice — e lasciandolo
   restringere il pulsante veniva schiacciato. Misurato: cassetta larga 120
   punti di cui 118 presi dal testo, DUE per il calendario, e la cornice alta
   55 contro i 35 degli altri campi della riga. Le tre caselle non si
   allineavano, e il calendario non si poteva più aprire. */
.tesi-modulo .riga-corta > label { flex: 0 0 auto; }



.tesi-campo { display: block; margin: 0 0 var(--sp-3); }
/* UNA CLASSE, E NON «QUALUNQUE SPAN FIGLIO». Il campo data è un <span> —
   casella e pulsante dentro una cornice sola — ed è figlio diretto
   dell'etichetta: con «.tesi-campo > span» si prendeva anche lui, e diventava
   un blocco grigio da dodici punti. Larghezza 120 con dentro 154 di roba, il
   pulsante del calendario mandato a capo e nascosto da «overflow: hidden», e
   la cornice alta 55 contro i 35 delle altre caselle. Un selettore per forma
   invece che per ruolo prende cose che non sapeva di prendere. */
.tesi-campo > .tesi-etichetta {
    display: block;
    font-size: var(--testo-s);
    font-weight: 600;
    color: var(--grigio);
    margin: 0 0 var(--sp-1);
}

/* SUL TELEFONO NON SERVE UNA REGOLA: la riga delle caselle corte è già
   flessibile, e a 375 punti ne mette due da 163 una accanto all'altra senza
   sfondare. Una media query che le portasse a tutta larghezza le
   impilerebbe e allungherebbe la pagina per niente. Misurato. */

/* La storia di una tesi: richiusa, e piccola — è un di più che si apre
   quando serve, non una seconda tabella accanto alla prima. */
.tesi-storia { margin: var(--sp-3) 0 0; }
.tesi-storia > summary { padding: 0; border: 0; }

/* ── LE TRE DECISIONI DI UNA TESI ────────────────────────────────────────
   Ogni tasto accanto alla sua data, e una riga per decisione: le tre date da
   una parte e i tre tasti dall'altra si somigliavano tutte, e quale casella
   valesse per quale tasto lo si poteva solo indovinare — su un gesto che
   scrive in archivio. */
.decisioni { margin: var(--sp-4) 0 0; }
.decisione {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-3);
}
.decisione > .tesi-campo { margin: 0; flex: 0 0 auto; }
.decisione > button { flex: 0 0 auto; }
/* ── IL SEPARATORE FRA LE TRE PARTI ──────────────────────────────────────
   Sopra la proposta dell'allievo, in mezzo l'assegnazione, sotto come va a
   finire. Senza una riga, sette caselle di fila si leggono tutte uguali e non
   si capisce dove finisce la domanda e dove comincia la decisione. */
.tesi-riga {
    border: 0;
    border-top: 1px solid var(--bordo);
    margin: var(--sp-5) 0 var(--sp-4);
}

/* CONFERISCI E RESPINGI SULLA STESSA RIGA: sono la stessa domanda con due
   risposte, e arrivano nello stesso momento. Sul telefono vanno una sotto
   l'altra da sole, che è quel che ci sta. */
.decisioni-finali {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
}
.decisioni-finali > .decisione { margin: 0; }

/* Un testo scritto a paragrafi si rilegge com'è stato scritto: gli a capo di
   chi l'ha battuto sono suoi, e schiacciarli in un paragrafo solo cambia quel
   che ha detto. «pre-wrap» li tiene e manda a capo il resto da sé. */
.testo-a-capo { white-space: pre-wrap; }

/* Il riquadro per scegliere un tutor: sta dentro la scheda della tesi su cui
   si sta scegliendo, e si vede che è un di più — non una seconda scheda. */
.scelta-tutor { margin: var(--sp-3) 0; }

/* ── IL TITOLO ASSEGNATO, IN EVIDENZA ────────────────────────────────────
   E' la risposta che l'allievo aspettava: quale tesi fa, e con chi. Stava in
   mezzo agli altri dati e si leggeva come uno di quelli. */
.tesi-assegnata {
    border-left: 3px solid var(--oro);
    background: var(--fondo);
    border-radius: var(--raggio-s);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-3);
}
.tesi-titolo {
    font-size: var(--testo-l);
    font-weight: 600;
    margin: 0;
}
.tesi-assegnata .nota-riquadro { margin: var(--sp-2) 0 0; padding: 0; }

/* Il sommario di una tesi richiusa sta al posto del suo titolo: stessa
   dimensione e stesso rientro di quando era un <h4>, o aprendo e chiudendo il
   nome salterebbe. */
#contenuto .tesi-scheda > summary {
    font-size: var(--testo);
    font-weight: 600;
    padding: 10px 14px;
    margin: 0;
    border-bottom: 1px solid var(--separatore);
}
/* Richiusa non ha un corpo, e il filo sotto il nome sarebbe un filo sospeso. */
#contenuto .tesi-scheda:not([open]) > summary { border-bottom: 0; }

/* I recapiti del tutor proposto, sotto il suo nome: due cose corte in fila,
   perché si leggono insieme — è il numero che si compone e l'indirizzo a cui
   si scrive, non due dati separati. */
.recapiti-tutor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
}

/* ═══ L'ANTEPRIMA DI UN QUESTIONARIO ════════════════════════════════════════
   Chi compone un questionario vede una tabella di caselle; chi lo compila vede
   una pagina di domande. Sono così diverse che un errore grosso — le opzioni
   tutte su una riga, una scala senza valori — non si vede finché non lo apre
   qualcuno, e a quel punto l'ha aperto un allievo.

   LA BANDA DICE CHE È UNA PROVA, e sta in cima davvero: un questionario lungo
   porterebbe il tasto fuori schermo dopo tre domande, e chi ha aperto una
   scheda nuova per guardare non avrebbe altro modo di chiuderla. «sticky» e
   non «fixed»: resta dentro il flusso, e non copre la prima domanda.
   ═══════════════════════════════════════════════════════════════════════════ */
.banda-anteprima {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: var(--blu);
    color: #fff;
}

.banda-anteprima-che {
    font-size: var(--testo-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #d7e4f2;
}

.banda-anteprima-titolo { font-weight: 600; }

/* SUL FONDO BLU NON SI SCRIVE NE' IN NERO NE' IN GRIGIO. La banda eredita il
   bianco, ma le pastiglie no: quelle si portano dietro il proprio colore
   d'inchiostro, pensato per un fondo chiaro, e su questo blu diventano una
   macchia. Qui dentro si vestono da banda — inchiostro bianco su un velo piu'
   chiaro del fondo — e restano leggibili qualunque pastiglia ci si metta. */
.banda-anteprima .etichetta-piccola,
.banda-anteprima .etichetta-piccola.fondo-atteso,
.banda-anteprima .etichetta-piccola.fondo-neutro,
.banda-anteprima .etichetta-piccola.fondo-ok,
.banda-anteprima .etichetta-piccola.fondo-ko {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* IL TASTO DI CHIUSURA IN FONDO ALLA BANDA e rosso: è l'unica cosa che si può
   fare qui dentro, e il rosso in questo programma vuol dire «questo gesto
   toglie di mezzo qualcosa». Spinto a destra da «auto», che è il modo di dire
   «tutto lo spazio che avanza sta prima di me». */
.tasto-chiudi {
    margin-left: auto;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid #fff;
    border-radius: var(--raggio-s);
    background: var(--rosso);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}

.tasto-chiudi:hover { background: #fff; color: var(--rosso); }

/* Il foglio: la stessa larghezza di lettura del questionario vero, in mezzo. */
.foglio-anteprima {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* ═══ COMPORRE UN QUESTIONARIO ══════════════════════════════════════════════
   Era una tabella di dieci colonne, e su uno schermo normale ne entravano
   cinque: le altre si raggiungevano trascinando la tabella di lato. Le opzioni
   di una scelta multipla — la cosa più facile da sbagliare, una per riga —
   stavano in una casella alta una riga e larga duecento punti, dove tre
   opzioni su cinque non si vedono. Si correggeva alla cieca.

   ADESSO OGNI DOMANDA È UNA SCATOLA che si apre, e dentro i campi prendono
   tutta la riga. Niente si trascina di lato, e quel che si legge è quel che
   c'è scritto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un campo che prende la riga: l'etichetta sopra, la casella sotto, larghe
   quanto il riquadro. L'etichetta sopra e non accanto perché accanto ruba
   alla casella la metà della riga, e la casella è la cosa da leggere. */
.campo-disteso { margin: 0 0 var(--sp-2); }
.campo-disteso > label {
    display: block;
    font-size: var(--testo-xs);
    font-weight: 600;
    color: var(--grigio);
}
.campo-disteso .campo-modulo,
.riga-composizione .campo-modulo {
    display: block;
    margin-top: 2px;
    font-size: var(--testo-s);
    font-weight: 400;
    color: var(--inchiostro);
}

/* ── DISTESO VUOL DIRE LARGO QUANTO LA FINESTRA ──────────────────────────
   E la classe «w-piena» da sola non basta, anche se dice proprio questo:
   «.w-piena { width: 100% }» e «.campo-modulo { width: 320px }» hanno la
   stessa specificità, e a parità vince l'ultima scritta nel foglio — che è
   campo-modulo, seicento righe più in basso. Il risultato era una casella da
   320 pixel dentro un riquadro largo il doppio, con dentro una frase da
   stampare su un attestato che si leggeva a spizzichi.

   Qui il selettore ha due classi e vince comunque, dovunque stia. */
.campo-disteso .campo-modulo { width: 100%; }

/* La riga delle cose corte — sezione, tipo, ordine, le spunte — che stanno
   bene affiancate e a capo da sole quando lo schermo si stringe. MAI UNO
   SCORRIMENTO DI LATO: è «wrap», non «overflow». */
/* ── LA SPUNTA BLU DEGLI ATTI ────────────────────────────────────────────
   Una riga del percorso scout che l'interessato non ha scritto: il Tizzoni
   nato da una tesi, il passaggio nato dall'esito di un corso, la riga della
   Segreteria. Si legge e non si tocca, e la spunta dice perché le caselle non
   ci sono — senza, sembrerebbe che la pagina si sia rotta per quella riga.

   BLU e non verde: il verde in questo programma vuol dire «va bene», e qui
   non si sta dicendo che il passaggio è buono — si sta dicendo CHI lo ha
   scritto. */
.spunta-atto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--blu);
    color: #fff;
    vertical-align: -4px;
}
.spunta-atto .icona { margin: 0; }

/* La riga intera un po' più tenue: è un fatto registrato, non un campo da
   compilare, e non deve chiamare la mano come le altre. */
.riga-protetta td { background: var(--fondo); }

/* ── LA CELLA DEL PASSAGGIO ──────────────────────────────────────────────
   Spunta, nome (o tendina) e «Dettaglio» su una riga sola. La pastiglia
   finiva sotto la tendina, e la cella diventava alta il doppio delle altre:
   in una tabella di dieci passaggi si perdeva l'allineamento. Va a capo da
   sola quando la colonna si stringe, che è l'unico caso in cui deve. */
.cella-passaggio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
/* La tendina prende quel che resta, e si lascia stringere: senza «min-width:
   0» un elemento flex non scende mai sotto la larghezza del suo contenuto, e
   qui dentro ci sono nomi lunghi come «Tecnico Rover/Scolte». */
.cella-passaggio select { flex: 1 1 11em; min-width: 0; }
.cella-passaggio .nome-passaggio { flex: 1 1 auto; min-width: 0; }
.cella-passaggio .spunta-atto { flex: 0 0 auto; margin-right: 0; }
.cella-passaggio .etichetta-piccola { flex: 0 0 auto; }

/* ── UN RIQUADRO CHE CHIAMA ──────────────────────────────────────────────
   Quello che ha qualcosa da fare adesso, e una scadenza: un'iscrizione che si
   apre il primo di marzo e si chiude il trenta non aspetta. Il bordo blu lo
   stacca dagli altri senza gridare. */
.riquadro-chiama {
    border-color: var(--blu);
    box-shadow: 0 0 0 1px var(--blu-tenue);
}
.riquadro-chiama > summary { color: var(--blu); }

/* ── UNA CELLA CHE IMPILA I SUOI CAMPI ───────────────────────────────────
   Dove si va, dove si guarda, a chi si scrive: tre risposte alla stessa
   domanda, e stanno in una casella sola dell'elenco dei campi. Una sotto
   l'altra e larghe quanto la cella.

   NON «blocco-sotto», che serviva a un testo e porta con se' il grigio: su
   un campo da riempire quel grigio diventa il colore di quel che si scrive,
   e la casella si legge come spenta. */
.cella-impilata {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.cella-impilata > .campo-modulo { width: 100%; }

/* La colonna delle spunte in testa a un elenco: larga quanto una casella e
   non un dito di piu', o si porta via lo spazio del nome che le sta accanto. */
.col-spunta { width: 2.2rem; text-align: center; }

/* ── IL RIQUADRO CHE SCADE ───────────────────────────────────────────────
   «Corsi a cui ti puoi candidare», quando ce n'è almeno uno. Giallo, e aperto:
   è l'unica cosa della linguetta che ha una scadenza — un'iscrizione che si
   apre il primo di marzo e si chiude il trenta non aspetta che la si vada a
   cercare.

   E IL GIALLO NON DIVENTA UN FONDO CHE NON SI VEDE PIU': quel riquadro per
   undici mesi all'anno sta spento e muto, e il colore arriva solo quando c'è
   davvero una domanda da mandare. */
.riquadro-scade {
    border-color: var(--oro);
    box-shadow: inset 3px 0 0 var(--oro);
    background: var(--oro-tenue);
}
.riquadro-scade > summary { font-weight: 600; color: #6b4e00; }
.riquadro-scade > .p-10 {
    border-radius: 0 0 var(--raggio-s) var(--raggio-s);
    background: #ffffff;
}

/* ── IL RIQUADRO CHE AGGIUNGE ────────────────────────────────────────────
   «Un corso nuovo», «Metti qualcuno fra i corsisti»: sono gesti, non cose da
   leggere, e stanno in cima al loro elenco. Si distinguono da tutti gli altri
   riquadri richiusi — che sono roba da consultare — col verde dell'aggiunta e
   col segno «più» davanti al titolo: il colore da solo lo si impara, il segno
   lo si riconosce subito.

   NON L'ORO DEGLI AVVISI: quello dice «guarda qui, c'è qualcosa che non va»,
   e su un modulo che sta lì tutti i giorni diventa un allarme che non allarma
   più nessuno. */
.riquadro-aggiunge {
    margin: 0 0 var(--sp-4);
    border-color: var(--verde);
    box-shadow: inset 3px 0 0 var(--verde);
    background: var(--verde-tenue);
}
.riquadro-aggiunge > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--verde-testo);
    font-weight: 600;
}
/* Dentro il riquadro il fondo torna bianco: il verde serve a far trovare il
   gesto, non a colorare un modulo di dieci caselle. */
.riquadro-aggiunge > .p-10 {
    border-radius: 0 0 var(--raggio-s) var(--raggio-s);
    background: #ffffff;
}

/* ── IL PALLINO ROSSO SULLA LINGUETTA ────────────────────────────────────
   Quante cose ci sono da fare là dentro. Rosso perché è una chiamata, non
   un'informazione: le linguette di una scheda sono nove, e quel che sta in
   una chiusa non lo cerca nessuno. Compare solo quando il numero c'è. */
.pallino-da-fare {
    display: inline-block;
    min-width: 17px;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--rosso);
    color: #fff;
    font-size: var(--testo-xs);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* ── GLI INTERRUTTORI DELLE CANDIDATURE ──────────────────────────────────
   Quattro caselle in una colonna di tabella: una sotto l'altra, perché
   affiancate su una riga già piena di date si leggono a fatica. Le due
   domande al candidato stanno rientrate, perché valgono solo dove qualcosa
   è aperto. */
.colonna-candidature label { display: block; white-space: nowrap; }
.colonna-candidature .rientrata { padding-left: var(--sp-3); color: var(--grigio); }

/* ── UN GRUPPO DI CAMPI CON IL SUO TITOLO ────────────────────────────────
   «A chi è rivolto», «Le candidature»: pezzi di maschera che rispondono a
   una domanda sola. Il bordo tenue li tiene insieme senza farne un riquadro,
   che sarebbe una scatola dentro una scatola. */
.gruppo-campi {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3) 0;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.gruppo-campi > legend {
    padding: 0 var(--sp-2);
    font-size: var(--testo-xs);
    font-weight: 600;
    color: var(--grigio);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── LE TRE CASELLE DEL TUTOR ────────────────────────────────────────────
   Nome, posta e telefono di chi seguirà la tesi: tre cose dello stesso fatto,
   e stanno su una riga. Le etichette tutte sopra e tutte alla stessa altezza —
   una di fianco e due sopra facevano partire le caselle da tre punti diversi.

   IL NOME PIÙ LARGO DEGLI ALTRI DUE: «Alessandro Frascella (sez. Taranto 2)»
   è un nome vero di questo archivio, e in una colonna da un terzo si legge a
   metà. Sotto i seicento punti vanno una sotto l'altra: tre caselle da
   centottanta non le riempie nessuno. */
.riga-tutor {
    display: grid;
    grid-template-columns: 2fr 1.6fr 1fr;
    gap: 0 var(--sp-3);
    align-items: end;
}
@media (max-width: 600px) {
    .riga-tutor { grid-template-columns: 1fr; }
}

/* ── LE PASTIGLIE CHE SCELGONO UN CORSO ──────────────────────────────────
   Sono tasti, non collegamenti: non si cambia pagina, si mostra un pezzo di
   quel che c'è già. Quella accesa si vede, perché un elenco filtrato che
   sembra intero fa credere che gli altri siano spariti. */
.pastiglia-corso {
    padding: 4px 12px;
    border: 1px solid var(--bordo-forte);
    border-radius: 20px;
    background: var(--superficie);
    color: var(--inchiostro);
    font-size: var(--testo-xs);
    cursor: pointer;
}
.pastiglia-corso:hover { border-color: var(--blu); color: var(--blu); }
.pastiglia-corso-attiva,
.pastiglia-corso-attiva:hover {
    border-color: var(--blu);
    background: var(--blu);
    color: #fff;
}
.pastiglia-corso-attiva .etichetta-piccola {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── LA RIGA DEI SELETTORI DI STATO ──────────────────────────────────────
   Tendine corte, una accanto all'altra, che si mandano da sé al cambio. Non
   sono campi da compilare: sono domande da fare all'elenco, e stanno in
   riga. */
.modulo-filtri {
    align-items: flex-end;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--bordo);
    margin-bottom: var(--sp-2);
}
.campo-filtro-stretto { flex: 0 1 13em; }
.campo-filtro-stretto select { width: 100%; }

.riga-composizione {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    margin: 0 0 var(--sp-2);
}
.campo-composizione {
    flex: 1 1 14em;
    min-width: 0;
    font-size: var(--testo-xs);
    font-weight: 600;
    color: var(--grigio);
}
/* L'ordine è di poche cifre e non deve prendersi la riga di un altro. */
.campo-composizione-corto { flex: 0 0 7em; }

/* ── LE SPUNTE STANNO SU UN RIGO, E SI DIVIDONO LA LARGHEZZA ─────────────
   Una spunta non è una casella da riempire: non vuole l'etichetta sopra e non
   entra in una colonna fissa di sette em. «Lupetti e Coccinelle» lì dentro
   andava a capo tre volte, e le righe delle etichette si sovrapponevano.

   QUI OGNUNA PRENDE QUANTO LE SERVE e si allarga in proporzione — «flex: 1 1
   auto» con la parola che non va a capo — così le sei spunte occupano tutta
   la riga senza che nessuna schiacci le altre. Sotto i seicento vanno a capo
   per intero, una accanto all'altra finché ci stanno. */
.scelte-in-riga {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-2);
}
.scelte-in-riga > label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
    font-size: var(--testo-s);
    font-weight: 400;
    color: var(--inchiostro);
}
.scelte-in-riga > label > input { flex: 0 0 auto; margin: 0; }
/* La nota accanto alle due caselle dell'età sta sulla stessa riga, in fondo,
   e prende quel che avanza: sotto sarebbe una riga in più per sei parole. */
.riga-eta { align-items: end; }
.riga-eta > .nota-campo { align-self: center; }
/* UNA DATA VUOLE LO SPAZIO DI UNA DATA. In sette em ci stava la metà di
   «GG-MM-AAAA» — il campo ha dentro anche il tasto del calendario, che se ne
   prende trentasei pixel — e una data che non si legge non si controlla.

   IN PIXEL E NON IN EM, ed è l'errore che ho fatto la prima volta: dentro una
   tabella scritta in undici pixel, «11.5em» fa centoventisei pixel e non
   centoottantaquattro, e il campo restava tagliato come prima. Qui l'em non
   misura niente di utile, perché quel che ci deve stare dentro — la casella e
   il tasto del calendario — è anch'esso in pixel fissi: 118 + 36 + i bordi. */
.campo-composizione-data { flex: 0 0 170px; }
/* Le spunte non hanno un'etichetta sopra: si allineano al fondo delle caselle
   che hanno accanto, o galleggiano a mezz'aria. */
.spunte-composizione {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-1) var(--sp-3);
    padding-bottom: 4px;
}

/* ── LE DATE STANNO IN RIGA CON LE ALTRE CASELLE ───────────────────────────
   «.campo-data» è uno <span> in «inline-flex» — dentro ci stanno la casella,
   il tasto del calendario e il selettore di sistema — e non è un
   «.campo-modulo»: la regola qui sopra che manda le caselle a capo sotto la
   loro etichetta non lo vedeva. Il risultato era «Dal» scritto ACCANTO al
   riquadro mentre «Titolo» stava SOPRA il suo, e in una riga di cinque campi
   due si allineavano in un modo e tre nell'altro.

   «flex» E NON «inline-flex»: dentro resta uguale — la casella e il tasto
   affiancati — e fuori si comporta come tutte le altre. */
.riga-composizione .campo-data,
.campo-disteso .campo-data {
    display: flex;
    width: 100%;
    margin-top: 2px;
}
.riga-composizione .campo-data .campo-data-testo,
.campo-disteso .campo-data .campo-data-testo { width: 100%; }

/* La riga di spiegazione sotto una casella: piccola e grigia, perché è un
   suggerimento e non un dato. */
.nota-campo {
    display: block;
    margin-top: 2px;
    font-size: var(--testo-xs);
    font-weight: 400;
    color: var(--grigio);
}

/* Il sommario di una domanda richiusa: l'ordine, il testo, e le pastiglie.
   IL TESTO SI TRONCA E NON VA A CAPO: centodue sommari alti tre righe sono il
   muro che questa forma serve a togliere. */
.domanda-composta > summary.domanda-sommario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.domanda-prog {
    flex: 0 0 auto;
    min-width: 2.5em;
    font-variant-numeric: tabular-nums;
    font-size: var(--testo-xs);
    color: var(--grigio);
    text-align: right;
}
.domanda-testo-breve {
    flex: 1 1 20em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* I riquadri delle domande si toccano: sono un elenco, non dieci pannelli
   distinti, e l'aria fra l'uno e l'altro allungava la pagina senza dire
   niente. */
.domanda-composta { margin-bottom: var(--sp-2); }
.domanda-composta > .p-10 { padding: var(--sp-3) var(--sp-3) var(--sp-2); }

/* Un tasto dentro una riga di tasti: il modulo che lo porta non deve mandare
   a capo quel che gli sta accanto. */
.azione-in-riga { display: inline-block; }

/* Una casella che vuole piu' spazio delle altre nella stessa riga: la ricerca
   di un'anagrafica, dove si batte un cognome intero e non due cifre. */
.campo-composizione-lungo { flex: 2 1 22em; }

/* Una riga d'elenco che ha qualcosa da sistemare: un filo giallo a sinistra e
   niente altro. Colorare tutta la riga di ambra su un elenco dove la metà ha
   qualcosa da sistemare fa una pagina gialla, che non indica più niente. */
.riga-da-sistemare > td:first-child { box-shadow: inset 3px 0 0 var(--ambra); }