/*
 * Foglio di stile del pannello Lega Navale e dell'area soci.
 *
 * UN FILE SOLO, IN QUATTRO PARTI, separate da segnaposti che
 * tests/Feature/FoglioDiStileTest.php cerca:
 *   1. TAVOLOZZA  - colori, ombre e raggi, in :root;
 *   2. PANNELLO   - ogni regola parte da body.pannello;
 *   3. AREA SOCI  - ogni regola parte da .area-soci (o da :where(.area-soci)
 *                   per la base che ereditava dal pannello, congelata);
 *   4. STAMPA     - le regole di @media print dei due mondi.
 *
 * NIENTE STRUMENTI DI COMPILAZIONE: sull'hosting non si compila, e questo
 * file e' servito cosi' com'e' (il layout del pannello lo chiama con la sua
 * data di modifica, ?v=, perche' dopo un deploy nessuno tenga quello
 * vecchio). Niente font o icone da una rete esterna: ogni risorsa remota e'
 * una richiesta che parte dal browser di chi usa il pannello (anagrafica di
 * 741 soci) verso qualcun altro. Le icone sono SVG scritti nel markup
 * (resources/views/icona.blade.php, tracciati in App\Support\Icone).
 *
 * LA GRAFICA DEL PANNELLO, dal 18 settembre 2026, e' quella dell'area soci
 * con una tavolozza un po' piu' scura (spec
 * docs/superpowers/specs/2026-09-18-grafica-pannello-design.md): testata blu
 * col logo, menu laterale bianco a gruppi, tabelle fitte dentro schede
 * bianche, stati a pastiglia. Le tabelle lunghe RESTANO COMPATTE: l'elenco
 * soci ha 741 righe, e l'aria in una tabella cosi' lunga si paga in
 * scorrimento.
 *
 * VOCABOLARIO DELLE CLASSI DEL PANNELLO (il contratto con le pagine).
 *
 * -- Intelaiatura (layout.blade.php) --
 * .pannello-menu-interruttore  la casella nascosta che apre il menu sul telefono
 * .pannello-testata        la barra blu in alto
 * .pannello-menu-bottone   il bottone del menu (tre righe), solo sul telefono
 * .pannello-marchio        logo (.pannello-stemma) e nome (.pannello-titolo)
 * .pannello-utente         chi e' entrato (.pannello-utente-nome) e l'uscita (.pannello-esci)
 * .pannello-telaio         menu a sinistra e contenuto a destra
 * .pannello-menu           il menu laterale bianco
 * .pannello-menu-velo      il velo dietro il menu aperto sul telefono
 * .pannello-nav            le voci di primo livello, con icona
 * .pannello-nav a.attivo   la voce della pagina corrente
 * .pannello-gruppo         il titolo di un gruppo senza pagina sua
 * .pannello-sotto          le sotto-voci, rientrate e senza icona
 * .pannello-corpo          il contenuto
 * .riquadro-accesso        la scheda bianca del modulo d'accesso
 *
 * -- Intestazione di pagina --
 * .intestazione-pagina     titolo (con l'icona della sezione) piu' azioni
 * .azioni-pagina           i bottoni a destra dell'intestazione
 * .in-linea                form ridotto a un bottone, in fila con gli altri
 * .nav-secondaria          pastiglie fra pagine sorelle (a.attivo: la corrente)
 *
 * -- Schede con numeri (riepilogo) --
 * .schede / .scheda        la griglia e la scheda (icona, numero, etichetta)
 * .scheda-numero           il numero grande
 * .scheda-etichetta        la didascalia
 * .scheda-attenzione       la scheda il cui numero chiede di fare qualcosa (arancio)
 *
 * -- Filtri, bottoni, azioni --
 * .filtri-soci / .gruppo-filtri / .etichetta-filtri   i gruppi di filtri
 * .filtro / .filtro.acceso pastiglia, piena quando e' accesa
 * .intestazione-tabella    conteggio a sinistra, azioni a destra sopra una tabella
 * .bottone                 link che si presenta come un bottone pieno
 * .secondario              bottone bianco col bordo blu
 * .azione / .testo-azione  azione di riga: icona e parola (sul telefono solo icona)
 * .colonna-azioni          la colonna delle azioni
 * .icona                   svg in linea, prende il colore del testo
 * .barra-ricerca           campo di ricerca e bottone in riga
 * .impaginazione / .impaginazione-pagine / .pagina (.attiva, .disabilitata) / .per-pagina
 *
 * -- Tabelle --
 * .tabella-compatta        tabella densa (soci, doppioni, presenze), intestazione ferma
 * .tabella-dati            tabella chiave/valore di una scheda di dettaglio
 * .campo-del-tablet        campo che il pannello non puo' modificare
 * .riga-doppia             riga che condivide la chiave con un'altra
 * .riga-sotto-soglia       riga di graduatoria sotto la soglia di mantenimento
 * .nota-tabella            didascalia sotto una tabella
 * .campi-concordi          blocco richiudibile dei campi concordi
 * .conteggio / .presenze   numero in colonna a destra; .conteggio-centrato al centro
 * .riga-azione             form dentro una cella
 *
 * -- Moduli e messaggi --
 * .modulo / .campo-modulo  form e campo con la sua etichetta sopra
 * .messaggio / .avviso / .errore   conferma, avviso, errore (barra colorata a sinistra)
 * .sfumato                 testo secondario
 * .etichetta-stato (--ok, --attenzione, --errore)   pastiglie di stato
 *
 * -- Stampa --
 * .non-in-stampa           elemento che la stampa nasconde
 */

/* ===== PARTE 1: TAVOLOZZA ===== */

/*
 * LA TAVOLOZZA COMUNE: i colori, le ombre e i raggi del foglio stanno qui,
 * una volta sola.
 *
 * Due mondi, due blu. L'area soci resta sul blu dello stemma (#0073BF) con i
 * valori misurati dall'app LNI Mazara: le sue variabili (su .area-soci, parte
 * 3) puntano ai --soci-* con gli STESSI valori di prima, e per i soci non
 * cambia niente. Il pannello usa la tavolozza B scelta con l'utente il 18
 * settembre 2026, "un po' piu' scura": il suo blu e' il blu scuro dell'area
 * soci, e arancio, verde e rosso sono smorzati - il pannello e' una pagina
 * da lavoro, guardata per ore, non una vetrina.
 */
:root {
    /* Area soci: i valori di prima, invariati. */
    --soci-blu: #0073BF;
    --soci-blu-scuro: #005C99;
    --soci-blu-chiaro: #E1F0FA;
    /* PIU' CALDO del #FF9800 dell'originale (arancione 500 di Material), che
       era tarato sul blu di Material e accanto al blu del nostro stemma
       risultava acceso. In piu' guadagna leggibilita': 3.2:1 su bianco contro
       2.2:1, cioe' sopra la soglia AA per il testo grande - e il numero dei
       punti e' la cosa piu' grande della pagina. */
    --soci-arancio: #E0701A;
    --soci-arancio-fondo: #FFF3E0;
    /* UNA PUNTA DI AZZURRO, invece del grigio 100 neutro dell'originale: e'
       lo stesso blu dello stemma diluito quasi fino al bianco, e lega il
       fondo all'intestazione senza che si veda da dove viene. */
    --soci-fondo: #F2F6FA;
    --soci-verde: #2E7D32;
    --soci-verde-fondo: #E8F5E9;
    --soci-rosso: #C62828;
    --soci-rosso-fondo: #FFEBEE;

    /* Pannello: la tavolozza B. L'arancio-testo e' l'arancio scurito per le
       scritte piccole su fondo arancio chiaro, dove #C45F12 non basterebbe. */
    --pannello-blu: #005C99;
    --pannello-blu-scuro: #004A7C;
    --pannello-blu-chiaro: #DCE8F2;
    --pannello-arancio: #C45F12;
    --pannello-arancio-testo: #8A420C;
    --pannello-arancio-fondo: #FBEEE4;
    --pannello-verde: #25682A;
    --pannello-verde-fondo: #E4F0E5;
    --pannello-rosso: #A32222;
    --pannello-rosso-fondo: #F9E5E5;
    --pannello-fondo: #EEF2F6;
    --pannello-riga: #E6ECF1;
    --pannello-riga-sopra: #F4F8FB;
    --pannello-bordo-campo: #BFCBD6;

    /* Neutri, comuni ai due mondi. */
    --neutro-bianco: #FFFFFF;
    --neutro-testo: #212121;
    --neutro-testo-tenue: #666666;
    --neutro-bordo: #DDE4EA;

    /* Ombre, raggi, fuoco da tastiera. */
    --ombra-scheda: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
    --ombra-leggera: 0 1px 2px rgba(16, 24, 40, .08);
    --raggio-scheda: 12px;
    --raggio-campo: 8px;
    --fuoco: #3D8FD1;
}

* {
    box-sizing: border-box;
}

/* ===== PARTE 2: PANNELLO ===== */

/*
 * IL PANNELLO (resources/views/layout.blade.php e le pagine che lo
 * estendono). OGNI REGOLA PARTE DA body.pannello, e non e' ordine: le pagine
 * dei soci usano classi con gli stessi nomi (.scheda, .schede,
 * .tabella-compatta, .messaggio), e una regola senza quel prefisso le
 * cambierebbe senza che nessuno le guardi. FoglioDiStileTest lo controlla.
 *
 * I colori vengono dalla tavolozza (parte 1); a mano si scrivono solo il
 * bianco e le trasparenze delle ombre. L'intelaiatura (testata, menu,
 * corpo) sta in fondo a questa parte.
 */

/* ---- Testo di servizio ---- */

body.pannello .sfumato {
    color: var(--neutro-testo-tenue);
}

body.pannello .campi-concordi {
    margin: .5rem 0 1rem;
    color: var(--neutro-testo-tenue);
}

body.pannello summary {
    cursor: pointer;
}

/* ---- Navigazione secondaria: pastiglie ---- */

body.pannello .nav-secondaria {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

body.pannello .nav-secondaria a {
    padding: .35rem .9rem;
    border: 1px solid var(--neutro-bordo);
    border-radius: 999px;
    background: var(--neutro-bianco);
    color: var(--neutro-testo);
    font-size: .875rem;
    text-decoration: none;
}

body.pannello .nav-secondaria a:hover {
    border-color: var(--pannello-blu-chiaro);
    background: var(--pannello-blu-chiaro);
}

/* La pagina sorella corrente e' piena, come il filtro acceso: si legge come
   "sei qui" anche in bianco e nero, dal peso del testo. */
body.pannello .nav-secondaria a.attivo {
    border-color: var(--pannello-blu);
    background: var(--pannello-blu);
    color: #fff;
    font-weight: 600;
}

/* ---- Intestazione di pagina ---- */

body.pannello .intestazione-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

body.pannello .intestazione-pagina h1 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

body.pannello .intestazione-pagina h1 .icona {
    width: 1.5rem;
    height: 1.5rem;
}

body.pannello .azioni-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* I form ridotti a un bottone stanno in fila con gli altri bottoni. */
body.pannello .in-linea {
    display: inline;
    margin: 0;
}

/* ---- Schede con numeri (riepilogo): come la home dei soci ---- */

body.pannello .schede {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
}

body.pannello .scheda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1.25rem 1rem;
    border-radius: var(--raggio-scheda);
    background: var(--neutro-bianco);
    box-shadow: var(--ombra-scheda);
    color: inherit;
    text-align: center;
    text-decoration: none;
}

body.pannello .scheda:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

body.pannello .scheda .icona {
    width: 28px;
    height: 28px;
    margin-bottom: .35rem;
    color: var(--pannello-blu);
}

body.pannello .scheda-numero {
    display: block;
    color: var(--neutro-testo);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* "Cose da guardare" in arancio quando c'e' qualcosa: e' l'unico numero del
   riepilogo che chiede di fare qualcosa. */
body.pannello .scheda-attenzione .scheda-numero {
    color: var(--pannello-arancio);
}

body.pannello .scheda-etichetta {
    display: block;
    color: var(--neutro-testo-tenue);
    font-size: .8125rem;
}

/* ---- Filtri a pastiglia (elenco soci, righe per pagina) ---- */

body.pannello .filtri-soci {
    margin: 0 0 1rem;
}

/* Ogni gruppo su una riga sua: si vede a colpo d'occhio che sceglierne uno
   esclude l'altro. */
body.pannello .gruppo-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
}

body.pannello .etichetta-filtri {
    color: var(--neutro-testo-tenue);
    font-size: .8125rem;
    font-weight: 500;
}

body.pannello .filtro {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--neutro-bordo);
    border-radius: 999px;
    background: var(--neutro-bianco);
    color: var(--neutro-testo);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    /* "SOCIO ONORARIO A VITA" non si spezza in due righe dentro la pastiglia. */
    white-space: nowrap;
}

body.pannello .filtro:hover {
    border-color: var(--pannello-blu-chiaro);
    background: var(--pannello-blu-chiaro);
}

/* IL FILTRO ACCESO SI VEDE DA LONTANO, e non solo dal colore: chi guarda un
   elenco filtrato senza accorgersene conclude che mancano dei soci. */
body.pannello .filtro.acceso {
    border-color: var(--pannello-blu);
    background: var(--pannello-blu);
    color: #fff;
    font-weight: 600;
}

body.pannello .filtro.acceso:hover {
    border-color: var(--pannello-blu-scuro);
    background: var(--pannello-blu-scuro);
}

body.pannello .intestazione-tabella {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

body.pannello .intestazione-tabella p {
    margin: 0;
    color: var(--neutro-testo-tenue);
    font-size: .875rem;
}

/* ---- Icone, bottoni, azioni ---- */

/* L'icona prende il colore e la dimensione del testo che la contiene. */
body.pannello .icona {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    vertical-align: -.15em;
}

/* Un <a class="bottone"> e un <button> sono la stessa promessa per chi
   guarda: stessa forma. */
body.pannello .bottone,
body.pannello button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border: 1px solid var(--pannello-blu);
    border-radius: var(--raggio-campo);
    background: var(--pannello-blu);
    color: #fff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

body.pannello .bottone:hover,
body.pannello button:hover {
    border-color: var(--pannello-blu-scuro);
    background: var(--pannello-blu-scuro);
}

/* L'azione non principale: stesso ingombro, molto meno peso. */
body.pannello .secondario {
    border-color: var(--pannello-blu);
    background: var(--neutro-bianco);
    color: var(--pannello-blu);
}

body.pannello .secondario:hover {
    border-color: var(--pannello-blu);
    background: var(--pannello-blu-chiaro);
}

body.pannello .barra-ricerca {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

body.pannello .barra-ricerca input[type="search"] {
    flex: 1 1 22rem;
}

/* LE AZIONI DI RIGA: icona piu' parola. L'icona sola si riconosce quando la
   si conosce gia', la parola serve la prima volta; sul telefono resta
   l'icona (vedi in fondo). */
body.pannello .azione {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border-radius: 6px;
    color: var(--pannello-blu);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

body.pannello .azione:hover {
    background: var(--pannello-blu-chiaro);
}

body.pannello .colonna-azioni {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* ---- Impaginazione: bottoni tondi ---- */

body.pannello .impaginazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .75rem 0 1.5rem;
}

body.pannello .impaginazione-conteggio {
    color: var(--neutro-testo-tenue);
    font-size: .8125rem;
}

body.pannello .impaginazione-pagine {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

body.pannello .pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .5rem;
    border: 1px solid var(--neutro-bordo);
    border-radius: 999px;
    background: var(--neutro-bianco);
    color: var(--neutro-testo);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

body.pannello .pagina:hover {
    border-color: var(--pannello-blu-chiaro);
    background: var(--pannello-blu-chiaro);
}

body.pannello .pagina.attiva {
    border-color: var(--pannello-blu);
    background: var(--pannello-blu);
    color: #fff;
    font-weight: 600;
}

/* Spento e non cliccabile: un bottone che sembra premibile e non fa niente
   e' peggio di un bottone assente. */
body.pannello .pagina.disabilitata {
    border-color: var(--pannello-fondo);
    background: var(--pannello-fondo);
    color: var(--pannello-bordo-campo);
}

body.pannello .per-pagina {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

/* ---- Tabelle: fitte, dentro una scheda bianca ----
   `separate` e non `collapse`, e gli angoli arrotondati sulle celle d'angolo
   invece di `overflow: hidden` sulla tabella: overflow ne farebbe un
   contenitore di scorrimento, e l'intestazione ferma (sticky) smetterebbe
   di restare ferma. */

body.pannello table {
    width: 100%;
    margin: 0 0 1rem;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--raggio-scheda);
    background: var(--neutro-bianco);
    box-shadow: var(--ombra-leggera);
}

body.pannello table > :first-child > tr:first-child > :first-child {
    border-top-left-radius: var(--raggio-scheda);
}

body.pannello table > :first-child > tr:first-child > :last-child {
    border-top-right-radius: var(--raggio-scheda);
}

body.pannello table > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: var(--raggio-scheda);
}

body.pannello table > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: var(--raggio-scheda);
}

body.pannello th,
body.pannello td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--pannello-riga);
    text-align: left;
}

/* L'ultima riga non porta una linea che correrebbe sopra l'angolo tondo. */
body.pannello tr:last-child td {
    border-bottom: none;
}

/* L'intestazione azzurra, in minuscolo: si legge meglio del maiuscolo
   piccolo di prima. */
body.pannello th {
    border-bottom: 1px solid var(--pannello-riga);
    background: var(--pannello-blu-chiaro);
    color: var(--pannello-blu-scuro);
    font-size: .8125rem;
    font-weight: 600;
}

/* Tabella densa: su 741 righe l'aria si paga in scorrimento. */
body.pannello .tabella-compatta th,
body.pannello .tabella-compatta td {
    padding: .4rem .75rem;
    font-size: .875rem;
}

body.pannello .tabella-compatta tr:hover td {
    background: var(--pannello-riga-sopra);
}

/* L'intestazione resta ferma sotto la testata (alta 56px) mentre si
   scorre, sopra le righe che le passano sotto. */
body.pannello .tabella-compatta th {
    position: sticky;
    top: 56px;
    z-index: 1;
}

/* Tabella di dettaglio: l'intestazione e' una colonna di etichette. */
body.pannello .tabella-dati th {
    width: 12rem;
    border-bottom: 1px solid var(--pannello-riga);
    background: transparent;
    color: var(--neutro-testo-tenue);
    font-size: .8125rem;
    font-weight: 500;
}

body.pannello .campo-del-tablet {
    background: var(--pannello-riga-sopra);
    color: var(--neutro-testo-tenue);
}

/* Riga duplicata (stessa persona, due banchi d'ingresso): marcata, non
   nascosta, nel tono dell'avviso. */
body.pannello .riga-doppia td {
    background: var(--pannello-arancio-fondo);
}

/* Sotto la soglia di mantenimento: grigia, non colorata come un errore - non
   e' un dato sbagliato, e' solo sotto soglia. */
body.pannello .riga-sotto-soglia td {
    background: var(--pannello-fondo);
    color: var(--neutro-testo-tenue);
}

/* Il TOTALE dell'anno sopra la soglia di mantenimento: verde, sulla scheda
   del socio (graduatoria/_scheda.blade.php) e sulla colonna dei totali
   dell'elenco (graduatoria/elenco.blade.php). Sotto soglia resta com'era
   prima - nessuna classe qui, solo .riga-sotto-soglia sopra. */
body.pannello .totale-sopra-soglia {
    color: var(--pannello-verde);
}

body.pannello .nota-tabella {
    margin-top: .5rem;
    color: var(--neutro-testo-tenue);
    font-size: .8125rem;
}

/* I numeri in colonna, incolonnati a destra con cifre della stessa
   larghezza: due conteggi vicini si confrontano a occhio. */
body.pannello .conteggio,
body.pannello .presenze {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.pannello .conteggio-centrato {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.pannello .riga-azione {
    display: inline;
    margin: 0;
}

/* Dentro una cella campi e bottoni restano piccoli: la tabella e' fitta. */
body.pannello td input:not([type="checkbox"]):not([type="radio"]),
body.pannello td select {
    min-height: 2.25rem;
    padding: .3rem .5rem;
}

body.pannello td button,
body.pannello td .bottone {
    padding: .3rem .7rem;
    font-size: .8125rem;
}

/* La scheda dell'anno per categoria (graduatoria/_scheda.blade.php). */
body.pannello .tabella-graduatoria-socio .riga-categoria th {
    padding-top: 12px;
    text-align: left;
}

body.pannello .tabella-graduatoria-socio .riga-subtotale td {
    font-style: italic;
}

/* ---- Moduli ---- */

body.pannello input,
body.pannello select,
body.pannello textarea {
    min-height: 2.75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--pannello-bordo-campo);
    border-radius: var(--raggio-campo);
    background: var(--neutro-bianco);
    color: var(--neutro-testo);
    font: inherit;
}

body.pannello textarea {
    min-height: 6rem;
}

body.pannello input[type="checkbox"],
body.pannello input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--pannello-blu);
}

body.pannello input[type="file"] {
    min-height: 0;
    padding: .4rem;
}

body.pannello input:focus,
body.pannello select:focus,
body.pannello textarea:focus {
    outline: none;
    border-color: var(--pannello-blu);
    box-shadow: 0 0 0 3px rgba(0, 92, 153, .18);
}

body.pannello .modulo p {
    margin: 0 0 .9rem;
}

body.pannello .campo-modulo {
    margin: 0 0 1rem;
}

body.pannello .campo-modulo label {
    display: block;
    margin-bottom: .3rem;
    color: var(--neutro-testo);
    font-size: .8125rem;
    font-weight: 600;
}

/* ---- Messaggi ----
   La barra colorata a sinistra dice il tono anche a chi non distingue il
   verde dal rosso: e' la differenza fra un avviso e un errore. */

body.pannello .errore,
body.pannello .messaggio,
body.pannello .avviso {
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--raggio-campo);
    font-size: .875rem;
}

body.pannello .errore {
    border-left-color: var(--pannello-rosso);
    background: var(--pannello-rosso-fondo);
    color: var(--pannello-rosso);
}

body.pannello .messaggio {
    border-left-color: var(--pannello-verde);
    background: var(--pannello-verde-fondo);
    color: var(--pannello-verde);
}

/* Ne' errore ne' conferma: la graduatoria di un anno non dichiarato completo
   lo usa per avvisare PRIMA che chi legge guardi i numeri. */
body.pannello .avviso {
    border-left-color: var(--pannello-arancio);
    background: var(--pannello-arancio-fondo);
    color: var(--pannello-arancio-testo);
}

/* ---- Etichette di stato: pastiglie ---- */

body.pannello .etichetta-stato {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--pannello-fondo);
    color: var(--neutro-testo);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

body.pannello .etichetta-stato--ok {
    background: var(--pannello-verde-fondo);
    color: var(--pannello-verde);
}

body.pannello .etichetta-stato--attenzione {
    background: var(--pannello-arancio-fondo);
    color: var(--pannello-arancio-testo);
}

body.pannello .etichetta-stato--errore {
    background: var(--pannello-rosso-fondo);
    color: var(--pannello-rosso);
}

/* ---- QR dell'app dei soci (qr.blade.php) ----
   Il disegno e' un SVG in linea: i moduli scuri prendono il colore da qui, e
   il bianco attorno e' il fondo del riquadro (la zona di silenzio che serve
   alla fotocamera). */

body.pannello .qr {
    background: var(--neutro-bianco);
    line-height: 0;
}

body.pannello .qr svg {
    display: block;
    width: 100%;
    height: auto;
}

body.pannello .qr .qr-disegno {
    fill: #000;
}

body.pannello .riquadro-app-soci {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--raggio-scheda);
    background: var(--neutro-bianco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

body.pannello .riquadro-app-soci .qr {
    flex: 0 0 10rem;
    width: 10rem;
}

body.pannello .riquadro-app-soci h2 {
    margin-top: 0;
}

/* La pagina /installa-soci: stampata e' una locandina. */
body.pannello .installa-locandina {
    max-width: 24rem;
    margin: 1rem 0 2rem;
    text-align: center;
}

body.pannello .installa-locandina .qr {
    width: 16rem;
    margin: 0 auto 1rem;
}

body.pannello .installa-indirizzo {
    font-weight: 600;
    word-break: break-all;
}

/* ---- Schermo stretto ---- */

@media (max-width: 60rem) {
    body.pannello .riquadro-app-soci {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Le azioni restano le sole icone: il `title` le spiega a chi si ferma
       sopra. */
    body.pannello .testo-azione {
        display: none;
    }

    body.pannello .schede {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    body.pannello .intestazione-pagina h1 {
        font-size: 1.3rem;
    }
}

/* ---- Il fuoco da tastiera ----
   Ultimo, perche' vince sulle regole :focus dei campi a parita' di forza: chi
   naviga col Tab deve vedere dove si trova su link, bottoni e campi. */

body.pannello a:focus-visible,
body.pannello button:focus-visible,
body.pannello summary:focus-visible,
body.pannello input:focus-visible,
body.pannello select:focus-visible,
body.pannello textarea:focus-visible {
    outline: 3px solid var(--fuoco);
    outline-offset: 2px;
}

/* ----- Pannello: intelaiatura (layout.blade.php) ----- */

/*
 * La pagina del pannello: testata blu ferma in alto col logo, menu laterale
 * bianco a sinistra, contenuto a destra su fondo grigio-azzurro. Sotto i
 * 60rem il menu sparisce e si apre dal bottone della testata (una casella
 * nascosta e due etichette: niente JavaScript).
 */

body.pannello {
    margin: 0;
    background: var(--pannello-fondo);
    color: var(--neutro-testo);
    /* Il carattere di sistema, come l'area soci: nessuno scarica niente. */
    font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body.pannello a {
    color: var(--pannello-blu);
}

body.pannello h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pannello-blu);
}

body.pannello h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 .75rem;
    color: var(--neutro-testo);
}

/* ---- Testata ---- */

body.pannello .pannello-testata {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: .75rem;
    height: 56px;
    padding: 0 .5rem 0 1rem;
    background: var(--pannello-blu);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

body.pannello .pannello-marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-right: auto;
}

/* Il logo bianco, come nella testata dell'area soci. Niente piu' filtro
   (Correzione 1 del Task 3b): lo stemma e' blu E bianco, e brightness(0)
   invert(1) tingeva di bianco anche il disco blu, perdendo anello, scritte
   e monogramma. immagini/logo-bianco.png e' gia' il negativo bianco/
   trasparente (vedi tools/logo/rendi_trasparente.py), quindi la testata
   punta direttamente a quel file senza bisogno di alcun filtro CSS. */
body.pannello .pannello-stemma {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

body.pannello .pannello-titolo {
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pannello .pannello-utente {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    font-size: .875rem;
}

body.pannello .pannello-utente-nome {
    overflow: hidden;
    max-width: 30vw;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pannello .pannello-utente form {
    margin: 0;
}

body.pannello .pannello-esci {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    box-shadow: none;
    cursor: pointer;
}

body.pannello .pannello-esci:hover {
    background: rgba(255, 255, 255, .14);
    border-color: transparent;
}

body.pannello .pannello-esci .icona {
    width: 20px;
    height: 20px;
}

/* La casella che apre il menu sul telefono: nascosta alla vista ma non alla
   tastiera (display:none la toglierebbe anche dal Tab). */
body.pannello input.pannello-menu-interruttore[type="checkbox"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
}

body.pannello .pannello-menu-bottone {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    margin-left: -.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

body.pannello .pannello-menu-bottone:hover {
    background: rgba(255, 255, 255, .14);
}

/* Nella testata blu il contorno del fuoco e' bianco: quello azzurro del
   resto della pagina li' non si vedrebbe. */
body.pannello .pannello-testata :focus-visible,
body.pannello .pannello-menu-interruttore:focus-visible ~ .pannello-testata .pannello-menu-bottone {
    outline: 3px solid #fff;
    outline-offset: 0;
}

/* Da 60.0625rem in su il menu laterale c'e' sempre e il bottone ☰ non si
   vede: la casella resta pero' nell'ordine del Tab (display:none la
   toglierebbe anche dalla vista, non solo alla vista). La togliamo dal Tab
   solo qui, dove il bottone che governa non si vede. */
@media (min-width: 60.0625rem) {
    body.pannello input.pannello-menu-interruttore[type="checkbox"] {
        display: none;
    }
}

/* ---- Menu laterale ---- */

body.pannello .pannello-telaio {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 56px);
}

body.pannello .pannello-menu {
    position: sticky;
    top: 56px;
    flex: 0 0 15rem;
    width: 15rem;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: .75rem .5rem 2rem;
    border-right: 1px solid var(--neutro-bordo);
    background: var(--neutro-bianco);
}

body.pannello .pannello-menu-velo {
    display: none;
}

body.pannello .pannello-nav,
body.pannello .pannello-sotto {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.pannello .pannello-nav > li {
    margin: 0 0 2px;
}

body.pannello .pannello-nav a,
body.pannello .pannello-gruppo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: var(--raggio-campo);
    color: var(--neutro-testo);
    font-size: .9375rem;
    text-decoration: none;
}

/* Il titolo di un gruppo senza pagina sua (Amministrazione): non e' un link,
   e non deve sembrarlo. */
body.pannello .pannello-gruppo {
    color: var(--neutro-testo-tenue);
    font-weight: 600;
}

body.pannello .pannello-nav .icona {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--pannello-blu);
}

body.pannello .pannello-nav a:hover {
    background: var(--pannello-fondo);
}

body.pannello .pannello-nav a.attivo {
    background: var(--pannello-blu-chiaro);
    color: var(--pannello-blu-scuro);
    font-weight: 700;
}

body.pannello .pannello-nav a.attivo .icona {
    color: var(--pannello-blu-scuro);
}

/* Le sotto-voci: rientrate fin sotto la parola della voce sopra, senza
   icona. */
body.pannello .pannello-sotto a {
    padding: .4rem .75rem .4rem 2.75rem;
    font-size: .875rem;
}

/* ---- Corpo ---- */

body.pannello .pannello-corpo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

/* ---- Accesso (ospiti) ---- */

body.pannello .riquadro-accesso {
    max-width: 24rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: var(--raggio-scheda);
    background: var(--neutro-bianco);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

body.pannello .riquadro-accesso input {
    width: 100%;
}

body.pannello .riquadro-accesso button[type="submit"] {
    width: 100%;
    justify-content: center;
}

/* ---- Telefono ---- */

@media (max-width: 60rem) {
    body.pannello .pannello-menu-bottone {
        display: flex;
    }

    body.pannello .pannello-menu {
        display: none;
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 15;
        width: min(18rem, 85vw);
        height: auto;
        box-shadow: 4px 0 16px rgba(0, 0, 0, .18);
    }

    body.pannello .pannello-menu-interruttore:checked ~ .pannello-telaio .pannello-menu {
        display: block;
    }

    /* Il velo dietro il menu aperto: e' un'etichetta della stessa casella,
       quindi toccarlo richiude il menu. */
    body.pannello .pannello-menu-interruttore:checked ~ .pannello-telaio .pannello-menu-velo {
        display: block;
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 14;
        background: rgba(0, 0, 0, .35);
    }

    body.pannello .pannello-corpo {
        padding: 1rem 1rem 3rem;
    }

    body.pannello .pannello-titolo {
        font-size: 1rem;
    }

    body.pannello .pannello-utente-nome {
        max-width: 28vw;
    }
}

body.pannello .identita-anteprime {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--pannello-bordo-campo);
}

/* ===== PARTE 3: AREA SOCI ===== */

/*
 * ==========================================================================
 * AREA SOCI — copia dell'impianto dell'app LNI Mazara, misurata dalle sue
 * schermate invece che stimata a occhio.
 *
 * I valori vengono da un campionamento delle schermate a 1080x2400 (densita'
 * 3x): schede bianche, pannelli d'avviso #FFF3E0 (arancione 50), testo tenue
 * #666, e le geometrie (intestazione 56, margini 16, barra in fondo 60). Quell'app e'
 * Material Design puro, quindi le quote che il campionamento su 3x rendeva
 * rumorose (raggi, ombre, altezze) le prende dalla specifica Material, che e'
 * la stessa a cui obbedisce l'originale.
 *
 * COSA NON VIENE DA LI', e va saputo: il blu e' #0073BF, campionato dal file
 * dello stemma invece del #1976D2 di Material (stemma e intestazione non si
 * somigliano, sono lo stesso colore); l'arancione dei punti e' #E0701A invece
 * di #FF9800, piu' caldo e sopra la soglia di contrasto per il testo grande;
 * il fondo ha una punta di azzurro invece del grigio 100 neutro; e il
 * carattere e' quello di sistema invece di Roboto. Il resto - schede, ombre,
 * raggi, geometrie - e' l'originale.
 *
 * OGNI SELETTORE PARTE DA `.area-soci`, e non e' ordine: le viste del socio
 * usano `.scheda`, `.schede` e `.tabella-compatta`, che sono classi DEL
 * PANNELLO. Una regola senza quel prefisso cambierebbe pagine della
 * segreteria che nessuno ha guardato.
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
 * LA BASE CHE L'AREA SOCI EREDITAVA DAL PANNELLO, congelata qui.
 *
 * Fino al 18 settembre 2026 le regole generiche del pannello (a, h1, table,
 * th, button, input, .scheda, .messaggio...) valevano anche nelle pagine dei
 * soci, che le sovrascrivevano solo in parte: quello che restava faceva
 * parte del loro aspetto. Il pannello adesso ha le sue regole sotto
 * body.pannello, e queste sono la copia esatta di cio' che i soci
 * ricevevano, ristretta a loro.
 *
 * :where() e non .area-soci davanti: :where() non pesa, quindi ogni regola
 * ha la stessa forza di prima e le regole .area-soci qui sotto vincono
 * esattamente dove vincevano. Toccarle cambia l'area soci: e' una decisione
 * da prendere guardando quelle pagine, non il pannello.
 * -------------------------------------------------------------------------- */

body:where(.area-soci) {
    -webkit-font-smoothing: antialiased;
}

:where(.area-soci) a {
    color: #12395c;
}

:where(.area-soci) h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

:where(.area-soci) h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 .75rem;
}

:where(.area-soci) .pannello-corpo {
    max-width: 80rem;
    margin: 1.5rem auto;
    padding: 0 1.5rem 3rem;
}

:where(.area-soci) .intestazione-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

:where(.area-soci) .intestazione-pagina h1 {
    margin: 0;
}

:where(.area-soci) .in-linea {
    display: inline;
    margin: 0;
}

:where(.area-soci) .schede {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

:where(.area-soci) .scheda {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    padding: 1.25rem;
    min-width: 9rem;
    flex: 1 1 9rem;
    text-decoration: none;
    color: inherit;
}

:where(.area-soci) .scheda:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(16, 24, 40, .08);
}

:where(.area-soci) .scheda-numero {
    display: block;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #12395c;
}

:where(.area-soci) .scheda-etichetta {
    display: block;
    color: #6b7280;
    font-size: .8125rem;
}

:where(.area-soci) button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Un elemento con l'attributo hidden sparisce sempre: senza questa regola
   il display d'autore (per esempio inline-flex dei pulsanti) vince sul
   [hidden] del browser, e «Segnala un errore» non spariva aprendo il modulo. */
.area-soci [hidden] {
    display: none !important;
}

:where(.area-soci) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
}

:where(.area-soci) th,
:where(.area-soci) td {
    text-align: left;
    padding: .625rem .75rem;
    border-bottom: 1px solid #f0f1f3;
}

:where(.area-soci) tr:last-child td {
    border-bottom: none;
}

:where(.area-soci) th {
    background: #f9fafb;
    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb;
}

:where(.area-soci) .tabella-compatta th,
:where(.area-soci) .tabella-compatta td {
    padding: .4rem .75rem;
    font-size: .875rem;
}

:where(.area-soci) .tabella-compatta tr:hover td {
    background: #f9fafb;
}

:where(.area-soci) .tabella-compatta th {
    position: sticky;
    top: 0;
    z-index: 1;
}

:where(.area-soci) input,
:where(.area-soci) select,
:where(.area-soci) textarea,
:where(.area-soci) button {
    font: inherit;
}

:where(.area-soci) input,
:where(.area-soci) select,
:where(.area-soci) textarea {
    padding: .45rem .6rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

:where(.area-soci) input:focus,
:where(.area-soci) select:focus,
:where(.area-soci) textarea:focus {
    outline: none;
    border-color: #12395c;
    box-shadow: 0 0 0 3px rgba(18, 57, 92, .15);
}

:where(.area-soci) button {
    padding: .45rem .9rem;
    border: 1px solid #12395c;
    border-radius: .5rem;
    background: #12395c;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

:where(.area-soci) button:hover {
    background: #0e2c47;
    border-color: #0e2c47;
}

:where(.area-soci) .secondario {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}

:where(.area-soci) .secondario:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

:where(.area-soci) .modulo p {
    margin: 0 0 .75rem;
}

:where(.area-soci) .campo-modulo {
    margin: 0 0 .875rem;
}

:where(.area-soci) .campo-modulo label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: .25rem;
}

:where(.area-soci) .errore,
:where(.area-soci) .messaggio {
    border-radius: .5rem;
    padding: .625rem .875rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid;
    border-left-width: 4px;
}

:where(.area-soci) .errore {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

:where(.area-soci) .messaggio {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.area-soci {
    /* I nomi di sempre, che le regole qui sotto usano; i valori stanno nella
       tavolozza comune (parte 1) e sono quelli di prima. */
    --blu: var(--soci-blu);
    --blu-scuro: var(--soci-blu-scuro);
    --blu-chiaro: var(--soci-blu-chiaro);
    --arancio: var(--soci-arancio);
    --arancio-fondo: var(--soci-arancio-fondo);
    --fondo: var(--soci-fondo);
    --bianco: var(--neutro-bianco);
    --testo: var(--neutro-testo);
    --testo-tenue: var(--neutro-testo-tenue);
    --bordo: var(--neutro-bordo);
    --verde: var(--soci-verde);
    --verde-fondo: var(--soci-verde-fondo);
    --rosso: var(--soci-rosso);
    --rosso-fondo: var(--soci-rosso-fondo);
    --ombra: var(--ombra-scheda);

    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    /* IL CARATTERE DI SISTEMA, senza nominare Roboto in testa: l'originale
       gira su Android, dove Roboto E' il carattere di sistema, ma su iPhone
       quel nome non trova niente e si scende di un gradino. Con questa pila
       ogni telefono usa il suo - San Francisco su iPhone, Roboto su Android
       (ci arriva da system-ui, non perche' glielo chiediamo), Segoe su
       Windows - e nessuno scarica niente. */
    font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
 * L'intestazione: 56dp, blu pieno, ferma in cima.
 * -------------------------------------------------------------------------- */

.area-soci .socio-testata {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: 56px;
    padding: 0 8px 0 12px;
    background: var(--blu);
    color: #fff;
}

.area-soci .socio-marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Niente piu' filtro (Correzione 1 del Task 3b): lo stemma e' blu E bianco,
   e brightness(0) invert(1) tingeva di bianco anche il disco blu, perdendo
   anello, scritte e monogramma. immagini/logo-bianco.png e' gia' il
   negativo bianco/trasparente (vedi tools/logo/rendi_trasparente.py). */
.area-soci .socio-stemma {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.area-soci .socio-sezione {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .15px;
    white-space: nowrap;
}

.area-soci .socio-persona {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.area-soci .socio-persona-nome {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34vw;
}

.area-soci .socio-persona form {
    margin: 0;
}

.area-soci .socio-esci {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    box-shadow: none;
}

.area-soci .socio-esci:hover,
.area-soci .socio-esci:focus-visible {
    background: rgba(255, 255, 255, .14);
}

.area-soci .pannello-corpo {
    max-width: 44rem;
    margin: 0 auto;
    padding: 16px 16px 84px;
}

/* --------------------------------------------------------------------------
 * La fascia di saluto, come la loro Home.
 * -------------------------------------------------------------------------- */

.area-soci .socio-saluto {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--blu);
    color: #fff;
}

.area-soci .socio-saluto-cerchio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.area-soci .socio-saluto p {
    margin: 0;
}

.area-soci .socio-saluto-nome {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.area-soci .socio-saluto-sotto {
    font-size: 14px;
    opacity: .88;
}

/* --------------------------------------------------------------------------
 * I riquadri 2x2: icona sopra, numero grande, etichetta sotto.
 * -------------------------------------------------------------------------- */

.area-soci .schede {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 16px;
}

.area-soci .scheda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin: 0;
    padding: 18px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--bianco);
    box-shadow: var(--ombra);
    text-align: center;
}

.area-soci .scheda p {
    margin: 0;
}

.area-soci .scheda .socio-icona {
    color: var(--blu);
    margin-bottom: 6px;
}

.area-soci .scheda-numero {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--testo);
    font-variant-numeric: tabular-nums;
}

.area-soci .scheda-etichetta {
    font-size: 14px;
    color: var(--testo-tenue);
}

.area-soci .scheda p:last-child {
    font-size: 13px;
    color: var(--testo-tenue);
}

.area-soci .scheda a {
    color: var(--blu);
    text-decoration: none;
}

.area-soci .socio-numero-punti {
    color: var(--arancio);
}

.area-soci .socio-stato-buono {
    font-size: 20px;
    color: var(--verde);
}

.area-soci .socio-stato-scaduto {
    font-size: 20px;
    color: var(--rosso);
}

/* --------------------------------------------------------------------------
 * La scheda bianca, il mattone di ogni pagina.
 * -------------------------------------------------------------------------- */

.area-soci .socio-blocco {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bianco);
    box-shadow: var(--ombra);
}

.area-soci .socio-blocco-titolo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--testo);
}

.area-soci .socio-blocco-titolo .socio-icona {
    color: var(--blu);
}

.area-soci .socio-blocco-sotto {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--testo-tenue);
}

/* LA TESSERA, dentro la sua scheda: e' cio' che il socio mostra al banco,
   quindi il numero e' la cosa piu' grande della pagina dopo il saluto. */
.area-soci .socio-tessera {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--blu-chiaro);
    text-align: center;
}

.area-soci .socio-tessera p {
    margin: 0;
}

.area-soci .socio-tessera-numero {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--blu);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.area-soci .socio-tessera-nome {
    font-size: 15px;
    color: var(--testo-tenue);
}

/* La riga icona - etichetta - valore, che nella loro app descrive le barche. */
.area-soci .socio-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--bordo);
    font-size: 15px;
}

.area-soci .socio-riga:first-of-type {
    border-top: 0;
}

.area-soci .socio-riga .socio-icona {
    color: var(--testo-tenue);
    flex: 0 0 auto;
}

.area-soci .socio-riga-etichetta {
    font-weight: 500;
    color: var(--testo);
}

.area-soci .socio-riga-valore {
    margin-left: auto;
    text-align: right;
    color: var(--testo-tenue);
}

/* --------------------------------------------------------------------------
 * Le date a targhetta e le pastiglie di stato, dalla loro scheda Eventi.
 * -------------------------------------------------------------------------- */

.area-soci .socio-evento {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--bordo);
}

.area-soci .socio-evento:first-of-type {
    border-top: 0;
}

.area-soci .socio-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--blu-chiaro);
    color: var(--blu);
    line-height: 1.1;
}

.area-soci .socio-data-giorno {
    font-size: 20px;
    font-weight: 600;
}

.area-soci .socio-data-mese {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.area-soci .socio-evento-corpo {
    min-width: 0;
    flex: 1 1 auto;
}

.area-soci .socio-evento-titolo {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.area-soci .socio-evento-dettagli {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--testo-tenue);
}

.area-soci .socio-evento-azione {
    flex: 0 0 auto;
    margin-left: auto;
}

.area-soci .socio-evento-azione button {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
}

.area-soci .socio-adesione-chiusa {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fondo);
    color: var(--testo-tenue);
    font-size: 12px;
}

.area-soci .socio-correzione-in-attesa {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--arancio-fondo);
    color: #8A5300;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
 * I punti: la stella, il numero arancione, il pannello d'avviso.
 * -------------------------------------------------------------------------- */

.area-soci .socio-punti-totale {
    margin: 0 0 16px;
    padding: 24px 16px;
    border-radius: 12px;
    background: var(--bianco);
    box-shadow: var(--ombra);
    text-align: center;
}

.area-soci .socio-punti-stella {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--arancio);
    color: #fff;
}

.area-soci .socio-punti-totale p {
    margin: 0;
    font-size: 15px;
    color: var(--testo-tenue);
}

.area-soci .socio-punti-totale .socio-punti-numero {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--arancio);
    font-variant-numeric: tabular-nums;
}

/* Sopra la soglia di mantenimento: verde come "In regola" nella pagina
   Quota (.socio-stato-buono), invece dell'arancio di sempre. */
.area-soci .socio-punti-totale .socio-punti-numero.socio-punti-sopra-soglia {
    color: var(--verde);
}

.area-soci .socio-posizione-classifica {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #FFE0B2;
    border-radius: 12px;
    background: var(--arancio-fondo);
    color: #8A5300;
    font-size: 14px;
}

.area-soci .socio-selettore-anno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
 * La graduatoria del socio (socio/attivita.blade.php): i quattro quadranti,
 * la barra verso la soglia, le tabelle per categoria. Spec "La graduatoria
 * diventa l'unica fonte dei punti", sezione 6.
 * -------------------------------------------------------------------------- */

/* L'etichetta di un quadrante e' lunga ("B · Attivita' di organizzazione"):
   va a capo invece di allargare la griglia. */
.area-soci .socio-quadranti .scheda-etichetta {
    font-size: 13px;
    line-height: 1.3;
}

.area-soci .socio-soglia-barra {
    display: block;
    width: 100%;
    height: 10px;
    margin: 14px 0 8px;
    border: 0;
    border-radius: 5px;
    background: var(--blu-chiaro);
    accent-color: var(--arancio);
    appearance: none;
}

.area-soci .socio-soglia-barra::-webkit-progress-bar {
    border-radius: 5px;
    background: var(--blu-chiaro);
}

.area-soci .socio-soglia-barra::-webkit-progress-value {
    border-radius: 5px;
    background: var(--arancio);
}

.area-soci .socio-soglia-barra::-moz-progress-bar {
    border-radius: 5px;
    background: var(--arancio);
}

.area-soci .socio-soglia-testo {
    font-size: 13px !important;
}

.area-soci .socio-nota-tetto {
    color: var(--testo-tenue);
    font-size: 12px;
}

/* Le voci sotto il nome di un evento. */
.area-soci .socio-evento-voci {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--testo);
}

.area-soci .socio-selettore-anno select {
    width: auto;
    min-width: 8rem;
    border: 0;
    background: transparent;
    color: var(--blu);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.area-soci .socio-storico-vuoto {
    margin: 0;
    padding: 20px 16px;
    border-radius: 12px;
    background: var(--bianco);
    box-shadow: var(--ombra);
    color: var(--testo-tenue);
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
 * La quota e le tabelle.
 * -------------------------------------------------------------------------- */

.area-soci .socio-quota-stato {
    text-align: left;
}

.area-soci .socio-quota-numero {
    margin: 0 0 10px !important;
    font-size: 26px;
    font-weight: 600;
    color: var(--blu);
}

/* Lo stato della quota coi colori della Home (spec 2026-09-19, decisione 6).
   Piu' specifiche di .socio-stato-buono/-scaduto, che porterebbero anche la
   misura 20 dei riquadri: qui cambia solo il colore, la misura resta 26. */
.area-soci .socio-quota-numero.socio-stato-buono {
    color: var(--verde);
}

.area-soci .socio-quota-numero.socio-stato-scaduto {
    color: var(--rosso);
}

/* Il form dei riferimenti per il bonifico (quota.blade.php:42) non aveva
   margine: il pulsante toccava la scheda dello storico sotto. */
.area-soci .socio-quota-riferimenti {
    margin: 0 0 16px;
}

.area-soci .tabella-compatta {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.area-soci .tabella-compatta th {
    padding: 8px 0;
    background: transparent;
    color: var(--testo-tenue);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.area-soci .tabella-compatta td {
    padding: 10px 0;
    border-top: 1px solid var(--bordo);
    font-size: 15px;
}

/* SU SCHERMO STRETTO le tabelle diventano elenchi, invece di tagliarsi: una
   riga per voce, e UN SOLO divisore fra una riga e l'altra (il bordo sopra
   della riga, mai sopra la prima), nessuna linea fra le celle di una riga.
   STA DOPO `.area-soci .tabella-compatta td`, che ha la stessa forza e
   vincerebbe su tutto cio' che sta prima: la graduatoria aveva la sua copia
   di queste regole piu' in alto nel foglio, perdeva, e sul telefono mostrava
   padding 10 e due linee fra una cella e l'altra. I bordi SOTTO di th e td si
   azzerano qui perche' la base congelata (:where(.area-soci) th, td) ne mette
   uno, che sommato al bordo sopra della riga dopo faceva due linee. Spec
   2026-09-19-app-soci-come-il-web.
   Il profilo non ha una riga d'intestazione da nascondere: ogni riga e'
   <th>etichetta</th><td>valore</td>, e la prima e' la tessera. */
@media (max-width: 42rem) {
    .area-soci .socio-tabella-attivita tr:first-child,
    .area-soci .socio-tabella-quota tr:first-child,
    .area-soci .socio-tabella-graduatoria tr:first-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .area-soci .socio-tabella-attivita tr,
    .area-soci .socio-tabella-quota tr,
    .area-soci .socio-tabella-graduatoria tr {
        display: block;
        padding: 8px 0;
        border-top: 1px solid var(--bordo);
    }

    /* La prima riga che si vede e' la seconda: la prima e' l'intestazione
       nascosta. */
    .area-soci .socio-tabella-attivita tr:nth-child(2),
    .area-soci .socio-tabella-quota tr:nth-child(2),
    .area-soci .socio-tabella-graduatoria tr:nth-child(2) {
        border-top: 0;
    }

    .area-soci .socio-tabella-attivita td,
    .area-soci .socio-tabella-quota td,
    .area-soci .socio-tabella-graduatoria td {
        display: block;
        padding: 1px 0;
        border-top: 0;
        border-bottom: 0;
    }

    .area-soci .socio-tabella-attivita td:first-child,
    .area-soci .socio-tabella-quota td:first-child {
        color: var(--testo-tenue);
        font-size: 13px;
    }

    .area-soci .socio-tabella-attivita td:nth-child(2) {
        font-weight: 500;
    }

    /* La graduatoria: la voce in evidenza, poi i punti, poi da dove vengono
       in tenue. */
    .area-soci .socio-tabella-graduatoria td:first-child {
        font-weight: 500;
    }

    .area-soci .socio-tabella-graduatoria td:last-child {
        color: var(--testo-tenue);
        font-size: 13px;
    }

    /* Il profilo: etichetta sopra, tenue; valore sotto. */
    .area-soci .socio-tabella-profilo tr {
        display: block;
        padding: 10px 0;
        border-top: 1px solid var(--bordo);
    }

    .area-soci .socio-tabella-profilo tr:first-of-type {
        border-top: 0;
    }

    .area-soci .socio-tabella-profilo th,
    .area-soci .socio-tabella-profilo td {
        display: block;
        padding: 0;
        border-top: 0;
        border-bottom: 0;
    }

    .area-soci .socio-tabella-profilo th {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
 * Campi e pulsanti.
 * -------------------------------------------------------------------------- */

.area-soci input,
.area-soci select,
.area-soci textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--bianco);
    color: var(--testo);
    font: inherit;
}

.area-soci input:focus-visible,
.area-soci select:focus-visible,
.area-soci textarea:focus-visible,
.area-soci button:focus-visible,
.area-soci a:focus-visible {
    outline: 3px solid #8FC8EA;
    outline-offset: 2px;
}

.area-soci button {
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--blu);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: var(--ombra);
}

.area-soci button:hover {
    background: var(--blu-scuro);
}

.area-soci button.secondario {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    color: var(--testo-tenue);
    box-shadow: none;
}

.area-soci button.secondario:hover {
    background: var(--fondo);
    color: var(--testo);
}

.area-soci .socio-segnala-errore {
    min-height: 40px;
    padding: 6px 10px;
    background: transparent;
    color: var(--blu);
    font-weight: 500;
    box-shadow: none;
}

.area-soci .socio-segnala-errore:hover {
    background: var(--blu-chiaro);
}

/* LA CANCELLAZIONE E' UN RIQUADRO, non un pulsante: sta staccata dal resto,
   con la sua cornice rossa tenue, perche' e' l'unica azione di questa pagina
   che non si torna indietro da sola. */
.area-soci .socio-cancella-accesso {
    margin: 24px 0 0;
    padding: 16px;
    border: 1px solid #FFCDD2;
    border-radius: 12px;
    background: var(--rosso-fondo);
}

.area-soci .socio-cancella-accesso h2 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--rosso);
}

.area-soci .socio-cancella-accesso p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #7F2A2A;
}

.area-soci .socio-cancella-accesso button {
    background: var(--rosso);
}

.area-soci .socio-cancella-accesso button:hover {
    background: #A61B1B;
}

.area-soci .socio-modulo-correzione {
    margin: 10px 0 0;
    padding: 14px;
    border-radius: 8px;
    background: var(--fondo);
}

.area-soci .in-linea {
    display: inline-block;
    margin: 0;
}

.area-soci .messaggio,
.area-soci .errore {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.area-soci .messaggio {
    background: var(--verde-fondo);
    color: #1B5E20;
}

.area-soci .errore {
    background: var(--rosso-fondo);
    color: #B71C1C;
}

/* --------------------------------------------------------------------------
 * La barra in fondo: cinque voci, icona sopra e parola sotto.
 * -------------------------------------------------------------------------- */

.area-soci .socio-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--bordo);
    background: var(--bianco);
}

.area-soci .socio-barra a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    color: var(--testo-tenue);
    font-size: 12px;
    text-decoration: none;
}

.area-soci .socio-barra a.attivo {
    color: var(--blu);
    font-weight: 500;
}

.area-soci .socio-barra a:hover {
    background: var(--fondo);
}

/* --------------------------------------------------------------------------
 * Le pagine senza sessione.
 * -------------------------------------------------------------------------- */

.area-soci .socio-ingresso {
    max-width: 24rem;
    margin: 40px auto 0;
    padding: 28px 22px 26px;
    border-radius: 12px;
    background: var(--bianco);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.area-soci .socio-ingresso-marchio {
    text-align: center;
    margin-bottom: 20px;
}

.area-soci .socio-ingresso-marchio img {
    width: 88px;
    height: 88px;
}

.area-soci .socio-ingresso-marchio p {
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--blu);
}

.area-soci .socio-ingresso-marchio span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--testo-tenue);
}

.area-soci .socio-ingresso label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    color: var(--testo-tenue);
}

.area-soci .socio-ingresso button[type="submit"] {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}

.area-soci .socio-ingresso-aiuto {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
}

.area-soci .socio-ingresso-aiuto a {
    color: var(--blu);
}

.area-soci .socio-icona {
    display: block;
    flex: 0 0 auto;
}

.area-soci .intestazione-pagina {
    display: flex;
    align-items: center;
    gap: 10px;
    /* annulla lo space-between della base congelata: l'icona e' fratella dell'h1, non deve finire all'altro capo */
    justify-content: flex-start;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.area-soci .intestazione-pagina h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--blu);
}

.area-soci .intestazione-pagina .socio-icona {
    color: var(--blu);
}

.area-soci h2 {
    margin: 20px 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--testo);
}

/* --------------------------------------------------------------------------
 * L'app sul telefono (home.blade.php): dal computer il QR da inquadrare, dal
 * telefono - dove inquadrare lo schermo che si tiene in mano e' impossibile -
 * il link al suo posto.
 * -------------------------------------------------------------------------- */

.area-soci .socio-app {
    display: flex;
    gap: 16px;
    align-items: center;
}

.area-soci .socio-app .qr {
    flex: 0 0 140px;
    width: 140px;
    line-height: 0;
    background: var(--bianco);
}

.area-soci .socio-app .qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.area-soci .socio-app .qr .qr-disegno {
    fill: #000;
}

.area-soci .socio-app p {
    margin: 0 0 8px;
}

.area-soci .socio-app-telefono {
    display: none;
}

@media (max-width: 42rem) {
    .area-soci .socio-app .qr,
    .area-soci .socio-app-computer {
        display: none;
    }

    .area-soci .socio-app-telefono {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-soci * {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== PARTE 4: STAMPA ===== */

/*
 * LA STAMPA, dei due mondi. Graduatoria ed elenco dei presenti sono le cose
 * che qualcuno porta in assemblea su carta: niente navigazione, niente
 * sfondi colorati, niente ombre, testo nero su bianco.
 */

@media print {
    /* Area soci: le regole di stampa che riceveva dal pannello, congelate
       come la base della parte 3 (stessa forza, grazie a :where()). */
    :where(.area-soci) .non-in-stampa {
        display: none !important;
    }

    :where(.area-soci) .scheda,
    :where(.area-soci) table,
    :where(.area-soci) th,
    :where(.area-soci) .tabella-compatta th {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    :where(.area-soci) table,
    :where(.area-soci) .scheda {
        border: 1px solid #000;
    }

    :where(.area-soci) a {
        color: #000;
        text-decoration: none;
    }
}

@media print {
    /* Pannello: niente testata, niente menu, niente azioni ne' impaginazione. */
    body.pannello .non-in-stampa,
    body.pannello .colonna-azioni,
    body.pannello .impaginazione {
        display: none !important;
    }

    body.pannello {
        background: #fff;
        color: #000;
    }

    body.pannello .pannello-telaio {
        display: block;
        min-height: 0;
    }

    body.pannello .pannello-corpo {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    body.pannello h1 {
        color: #000;
    }

    body.pannello .scheda,
    body.pannello .etichetta-stato,
    body.pannello .filtro,
    body.pannello .nav-secondaria a,
    body.pannello table,
    body.pannello th,
    body.pannello .campo-del-tablet,
    body.pannello .riga-doppia td {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    body.pannello table,
    body.pannello .scheda {
        border: 1px solid #000;
    }

    /* Sulla carta non c'e' una testata sopra cui restare fermi. */
    body.pannello .tabella-compatta th {
        position: static;
    }

    body.pannello a {
        color: #000;
        text-decoration: none;
    }
}