/* ============================================================
   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.
   ============================================================ */

@import url("font.css");
/* 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");

/* ── 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;
}

#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 ─────────────────────────────────────────────────── */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], 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, 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; }

/* 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); }

/* 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; }
    #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;
    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); }

/* 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. */
.estremi-riquadro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) 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; }

/* ── 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; }

/* 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="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="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; }