/* ============================================================
   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;
    --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 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; }
.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.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.t-bianco:hover { color: #ffffff; text-decoration: none; }

#contenuto a.pulsante-mini: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 {
    color: var(--grigio);
    text-decoration: underline;
}
#footer .collegamento-privacy: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); }

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