/* =====================================================
   AECBL SERVICE - complemento all'area soci
   Roberto Arato (c) 2026 - Tutti i diritti riservati
   =====================================================

   Questo file NON ridefinisce la grafica: la grafica e' quella di
   style.css, copia del foglio di stile del sito, caricato prima di
   questo. Qui c'e' solo cio' che nel sito non esiste ancora, piu' due
   correzioni rese necessarie dal fatto che queste pagine non hanno
   JavaScript.

   La regola per chi mette mano: se una cosa serve anche al sito, va in
   style.css e da li' torna nel sito; se serve solo all'area soci, va
   qui. Tenere questo file piccolo e' il modo per poter riallineare
   style.css con una semplice sovrascrittura, senza dover ricontrollare
   ogni volta cosa e' stato modificato.

   Le variabili --primary-color, --secondary-color e le altre arrivano
   da style.css e vengono usate anche qui: i colori restano dichiarati
   in un posto solo.
   ===================================================== */

/* =====================================================
   MENU SU SCHERMI STRETTI
   =====================================================
   La barra superiore usa l'hamburger del sito: sotto i 768px .main-nav
   esce dallo schermo e rientra quando menu.js le mette
   data-visible="true". Il meccanismo e' gia' tutto in style.css, qui si
   correggono solo due cose che nel sito non si presentano.

   Primo: il pannello del sito e' semitrasparente su una pagina che ha
   dietro un'immagine. Nell'area soci dietro c'e' testo, e le voci
   diventerebbero illeggibili. Si mette quindi un fondo pieno.

   Secondo: il pannello copre il 70% dello schermo a partire da destra,
   e in quel punto ci sono il nominativo e LOGOUT. Si alza il pannello
   sopra di essi, cosi' non compaiono attraverso. */

@media (max-width: 768px) {
  .soci-header .main-nav {
    background: var(--card-bg-color);
    backdrop-filter: none;             /* fondo pieno: dietro c'e' testo, non una foto */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1100;                     /* sopra il nominativo e il pulsante di uscita */
  }

  /* Il menu laterale non ha un hamburger proprio: due pannelli a
     scomparsa sulla stessa pagina sarebbero uno di troppo. Diventa una
     striscia orizzontale che scorre, sempre visibile. */
  .soci-area  { flex-direction: column; }
  .soci-menu  { flex: none; width: 100%; padding: 0; }
  .soci-menu nav ul { display: flex; overflow-x: auto; }
  .soci-menu nav a {
    border-left: none;
    border-bottom: 4px solid transparent;
    white-space: nowrap;
    padding: 0.8rem 1.2rem;
  }
  .soci-menu nav li.active a {
    border-left: none;
    border-bottom: 4px solid var(--secondary-color);
  }
  .soci-content { padding: 1.5rem 1.25rem; }
}

/* =====================================================
   LA BARRA A TUTTA LARGHEZZA HA BISOGNO DI MARGINI
   =====================================================
   .container-fullwidth annulla la larghezza al 90% e il max-width del
   .container normale, per far arrivare la barra da bordo a bordo. Cosi'
   pero' annulla anche l'unica cosa che teneva il contenuto lontano dai
   bordi: il marchio finiva incollato a sinistra e LOGOUT a destra,
   tagliato dalla barra di scorrimento.

   Il riempimento va qui e non su .container-fullwidth in style.css:
   quella classe potrebbe servire un domani a una fascia che deve davvero
   toccare i bordi — una foto, un colore pieno — e li' un margine sarebbe
   un difetto. */

.soci-header .container-fullwidth {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* =====================================================
   VOCE ATTIVA DELLA BARRA SUPERIORE
   =====================================================
   style.css evidenzia la voce attiva solo nel menu laterale
   (.soci-menu nav li.active a). In alto serve lo stesso segnale, per
   sapere in quale sezione ci si trova. */

.soci-header .main-nav li.active a {
  color: var(--secondary-color);
  border-bottom: 3px solid var(--secondary-color);
  padding-bottom: 0.2rem;
}

/* Il ripiego per chi non ha JavaScript sta in senza-script.css, che le
   pagine caricano dentro un <noscript>: qui non serve nulla. */

/* =====================================================
   VOCI RISERVATE: QUESTA NON E' UNA STANZA DI TUTTI
   =====================================================
   Chi ha piu' cappelli deve vedere a colpo d'occhio quando sta per
   entrare da segretario, da superutente o da gestore del sito invece
   che da socio. Non e' una protezione — quella la fa la rotta, e la fa
   comunque — e' un modo di non sbagliare stanza.

   DUE COLORI e non tre, ma nemmeno uno solo.

   VERDE ACQUA per segreteria e redazione: sono MESTIERI. Chi li fa entra
   li' tutti i giorni, e il verde dice solo "questa voce non e' di
   tutti" — che per un mestiere basta.

   GIALLO per il superutente, e la differenza e' vera. Quelle voci non
   sono un mestiere: sono le TABELLE DI RIFERIMENTO, cioe' le regole con
   cui si calcola tutto il resto. Cambiare una tariffa cambia il conto di
   ogni volo gia' registrato, e non e' la stessa cosa che aprire l'elenco
   dei soci. Il giallo lo dice prima del click.

   Fino al 21/08/2026 il colore era uno solo, con la motivazione che il
   segnale utile fosse binario e che il gruppo lo dicesse gia' la
   posizione nel menu. Non reggeva su un punto: fra le tre riservatezze
   una comporta un rischio diverso dalle altre due, e quella distinzione
   la posizione non la fa.

   Le classi restano TRE: segreteria e redazione condividono oggi la
   tinta, ma sono cose diverse e vivono separate nel codice. Il giorno
   che servisse dividerle basta una riga di CSS, senza toccare Menu.cs.

   DUE TONI di ciascun colore, e non e' un capriccio: la barra in alto ha
   il fondo chiaro e la colonna di sinistra il fondo blu scuro. Il tono
   scuro usato a sinistra sarebbe illeggibile, e quello chiaro usato in
   alto lo sarebbe altrettanto. */

/* ---- barra superiore: fondo chiaro, verde profondo ---- */
/* :not(.active) perche' la voce attiva resta arancione: dire "dove sei"
   viene prima di dire "di chi e'". */

.soci-header .main-nav li.riservata-segreteria:not(.active) > a,
.soci-header .main-nav li.riservata-editor:not(.active)     > a {
  color: #0f766e;
}

/* ---- menu di sinistra: fondo blu scuro, verde chiaro ---- */

.soci-menu nav li.riservata-segreteria > a,
.soci-menu nav li.riservata-editor     > a {
  color: #5eead4;
}

/* La voce attiva a sinistra si riconosce dal fondo e dal bordo, non dal
   colore del testo: la tinta della riservatezza puo' quindi restare, e
   si continua a sapere che la voce non e' di tutti anche mentre ci si
   sta dentro. Si alza solo il contrasto, perche' il fondo si schiarisce. */

.soci-menu nav li.active.riservata-segreteria > a,
.soci-menu nav li.active.riservata-editor     > a {
  color: #99f6e4;
}

/* ---- il SUPERUTENTE ha un colore suo: giallo ----

   Le voci di segreteria e di redazione restano verdi: sono mestieri, e
   chi li fa entra li' tutti i giorni. Quelle del superutente no -- sono
   le TABELLE DI RIFERIMENTO, cioe' le regole con cui si calcola tutto
   il resto: listino, attivita', abilitazioni, tariffe. Toccarle cambia
   il conto di ogni volo gia' registrato.

   Il verde diceva "non e' di tutti". Il giallo dice "e' di uno solo, e
   quello che c'e' dentro vale per tutti gli altri" -- ed e' anche il
   colore che si usa per dire "attenzione" senza dire "errore".

   Funziona perche' SUPERUSER non sta fra i permessi DELEGABILI: una
   voce dichiarata SUPERUSER e' davvero del solo superutente, e il
   colore non mente mai. */

.soci-header .main-nav li.riservata-superuser:not(.active) > a {
  color: #b45309;                      /* ambra scura: sul fondo chiaro il giallo puro non si legge */
}

.soci-menu nav li.riservata-superuser > a {
  color: #fcd34d;                      /* giallo chiaro: qui il fondo e' blu scuro */
}

.soci-menu nav li.active.riservata-superuser > a {
  color: #fde68a;
}

/* =====================================================
   TABELLE DEI DATI
   =====================================================
   Il sito non ha tabelle: e' fatto di card e testo. L'area soci mostra
   invece elenchi di righe, e servono. */

.soci-content table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--card-bg-color);
  border-radius: 10px;
  overflow: hidden;                    /* gli angoli arrotondati valgono anche per le celle */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.soci-content th,
.soci-content td {
  padding: 0.85rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #e6e8eb;
}

.soci-content thead th {
  background-color: var(--primary-color);
  color: var(--light-text-color);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.soci-content tbody tr:last-child th,
.soci-content tbody tr:last-child td { border-bottom: none; }

/* Il colore della riga sotto il mouse e' stato scurito da #fafbfc a
   questo: prima era cosi' tenue da non vedersi. Adesso conta, perche'
   con i collegamenti non piu' sottolineati e' il segno che dice "questa
   riga si puo' aprire". */
.soci-content tbody tr:hover { background-color: #eef2f7; }

/* Tabella etichetta/valore: la prima colonna e' un'intestazione di riga. */
.soci-content table.dati th[scope="row"] {
  width: 220px;
  font-weight: 600;
  color: var(--primary-color);
  background-color: #fafbfc;
}

.soci-content h2 {
  color: var(--primary-color);
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem 0;
}

.soci-content h2:first-of-type { margin-top: 0; }

/* =====================================================
   STATO DELLE SCADENZE
   =====================================================
   I tre colori non sono decorativi: distinguono a colpo d'occhio cio'
   che e' scaduto da cio' che sta per scadere. Il rosso e il verde non
   sono presi dalle variabili del sito perche' li' non esistono: la
   palette ha solo il blu e l'arancione. */

.valida      { color: #1a7f4b; }
/* In giallo cio' che sta per scadere (dalla 2.36): lo sfondo si vede in
   una tabella lunga anche senza leggere, e il testo si scurisce perche'
   l'arancio di prima su fondo giallo non avrebbe contrasto. Quanti giorni
   prima scatta lo decide Preavviso, nel servizio: 60 per le licenze, 30
   per le currency SPL, 15 per le currency 2 mesi di AG e VDS. */
.in-scadenza { color: #7a4b00; background-color: #fff1a8; font-weight: 600; }
.scaduta     { color: #b91c1c; font-weight: 600; }

.preparazione { color: #667085; }

/* Quante righe ha prodotto una ricerca. Stesso grigio, nome diverso:
   .preparazione significa "pagina non ancora scritta" e non e' questo. */
.conteggio { color: #667085; font-size: 0.9rem; }

/* =====================================================
   RICERCA NELL'ELENCO DEI SOCI
   =====================================================
   Una riga sola: campo, casella, pulsante. flex-wrap perche' sotto i
   500px il pulsante andrebbe fuori dallo schermo, e su un telefono la
   segreteria cerca un cognome come e piu' che dal computer. */

.soci-content form.ricerca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Larghezza FISSA e non "si allarga quanto puo'". Su uno schermo largo il
   campo prendeva tutta la riga e spingeva il pulsante CERCA fuori dalla
   vista: si scriveva un cognome, non succedeva niente, e sembrava che la
   ricerca cercasse solo il codice. Il pulsante deve stare dove cade
   l'occhio dopo aver finito di scrivere, cioe' subito a destra. */
.soci-content form.ricerca input[type="text"] {
  flex: 0 1 22rem;                    /* si stringe se serve, non si allarga oltre */
  padding: 0.6rem 0.8rem;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 0.95rem;
}

.soci-content form.ricerca label {
  color: #667085;
  font-size: 0.9rem;
  cursor: pointer;                    /* la casella si accende anche dall'etichetta */
}

.soci-content form.ricerca button { padding: 0.6rem 1.4rem; }

/* =====================================================
   DENSITA' DELL'AREA RISERVATA
   =====================================================
   Qui non si legge un articolo: si compila un modulo da venti campi e
   si scorre un elenco di cinquanta righe. La misura comoda per un testo
   e' quella scomoda per una tabella, e sono due mestieri diversi.

   La base di tutto il sito e' scesa a 15px in style.css; qui si stringe
   ancora, ma SOLO dentro .soci-content: il sito pubblico resta un sito
   da leggere. */

.soci-content { font-size: 0.9rem; line-height: 1.4; padding: 1.2rem 1.5rem; }

.soci-content h1 { font-size: 1.35rem; margin-bottom: 0.6rem; padding-bottom: 0.4rem; }
.soci-content h2 { font-size: 1.05rem; margin: 1.3rem 0 0.5rem 0; }
.soci-content h3 { font-size: 0.92rem; margin: 0.9rem 0 0.3rem 0;
                   text-transform: uppercase; letter-spacing: 0.05em; color: #667085; }

.soci-content table { margin-bottom: 1.2rem; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); }

.soci-content th,
.soci-content td { padding: 0.35rem 0.6rem; }

.soci-content thead th { font-size: 0.72rem; letter-spacing: 0.03em; }

.soci-content table.dati th[scope="row"] { width: 170px; }

/* =====================================================
   I COLLEGAMENTI DENTRO LE TABELLE
   =====================================================
   Nella tabella dei soci il codice porta alla scheda e il saldo al
   conto: sono collegamenti veri, e finora prendevano l'aspetto di
   fabbrica del browser - blu elettrico, sottolineato, e viola dopo
   averli aperti una volta.

   Su cinquecento righe il risultato e' una colonna di blu sottolineato
   che fa sembrare la pagina vecchia di trent'anni, e in piu' il viola
   dei visitati fa apparire "consumati" i soci che si sono aperti.

   La convenzione di oggi per le tabelle di dati e' questa: colore del
   testo, nessuna sottolineatura a riposo, sottolineatura al passaggio
   del mouse. Che il codice sia cliccabile lo si capisce dalla riga che
   si illumina (tbody tr:hover, gia' presente) e dal puntatore.

   color: inherit non e' pigrizia: e' cio' che fa restare rossi i saldi
   negativi e verdi gli accrediti. Dando un colore fisso ai link, la
   colonna del saldo avrebbe perso il suo, che e' l'informazione che
   quella colonna esiste per dare. */

.soci-content table a {
  color: inherit;
  text-decoration: none;
}

.soci-content table a:hover,
.soci-content table a:focus-visible {
  text-decoration: underline;
}

/* La prima colonna e' l'identita' della riga: resta in evidenza, ma con
   il peso invece che con il colore. */
.soci-content table td:first-child a {
  font-weight: 600;
  color: var(--primary-color);
}

.soci-content .aiuto { font-size: 0.75rem; line-height: 1.3; margin-top: 0.1rem; color: #8a94a6; }
.conteggio           { font-size: 0.78rem; }

.soci-content p { margin-bottom: 0.5rem; }

/* =====================================================
   IL LOGOUT E' UN PULSANTE VESTITO DA COLLEGAMENTO
   =====================================================
   Da agosto 2026 l'uscita e' una POST, quindi nell'intestazione c'e' un
   <form> con un <button> al posto del vecchio <a href="/esci">. Il
   motivo sta in PaginaLogin.Esci: una GET la fanno anche i programmi
   che seguono i link da soli, e bastava uno di quelli per disconnettere
   il socio senza che avesse toccato niente.

   Il colore, l'imbottitura e gli angoli restano quelli di
   .logout-button in style.css. Qui si toglie soltanto quello che il
   browser aggiunge di suo a un <button>: il bordo in rilievo e il
   carattere di sistema, che accanto al nome del socio si vedrebbero
   subito.

   Il selettore ha due classi e batte .logout-button, che ne ha una:
   cosi' l'ordine di caricamento dei due fogli non conta. */

.form-logout {
  display: inline;
  margin: 0;
}

.form-logout .logout-button {
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* =====================================================
   GLI ELENCHI PUNTATI A FILO DEL RESTO
   =====================================================
   Qualifiche e permessi sono elenchi puntati in mezzo a titoli e
   tabelle. Con il marcatore "outside" - il valore di fabbrica - il
   pallino viene disegnato FUORI dal riquadro della voce: il testo era
   gia' a filo del titolo, ma i pallini sporgevano a sinistra e la
   colonna sembrava disallineata.

   La correzione: marcatore dentro il riquadro, e il rientro appeso lo
   fa la coppia padding-left / text-indent. La prima riga torna a filo
   perche' il text-indent negativo annulla il padding; le righe
   successive di una voce lunga restano rientrate sotto il testo e non
   sotto il pallino - che e' come si legge un elenco.

   Non si e' usato un semplice padding-left sull'UL: avrebbe spostato a
   destra anche il testo, allineando i pallini al prezzo di
   disallineare tutto il resto. */

.soci-content ul {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}

.soci-content ul li {
  padding-left: 1.1rem;
  text-indent: -1.1rem;
}

/* L'albero dei files non c'entra: non ha marcatori, il suo rientro lo
   fa lui, e il rientro appeso qui sopra glielo storcerebbe. La regola
   ha piu' peso specifico e vince. */
.soci-content ul.albero li {
  padding-left: 0;
  text-indent: 0;
}

/* =====================================================
   MODULI: I CAMPI STANNO IN GRIGLIA
   =====================================================
   Un modulo di venti campi in colonna sola e' un chilometro di pagina, e
   chi lo compila perde di vista meta' di quello che ha gia' scritto.

   La griglia sta sul FORM e non su un contenitore da aggiungere attorno
   ai campi: cosi' vale per tutti i moduli dell'area riservata senza che
   ogni pagina debba ricordarsi di avvolgerli.

   Su OGNI form e non solo su form.tabella: le pagine usano classi
   diverse - .tabella, .scheda, .movimento - e sceglierne una avrebbe
   lasciato le altre in colonna singola, che e' esattamente il problema.
   L'unica esclusa e' .ricerca, che e' gia' una riga flex.

   auto-fit e non un numero fisso di colonne, cosi' su un portatile ne
   stanno quattro e su un telefono una sola. */

.soci-content form:not(.ricerca) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
  align-items: start;
}

/* Quello che divide o conclude va per traverso: un titolo di sezione in
   mezzo a una griglia di campi non separerebbe niente. */
.soci-content form:not(.ricerca) > h2,
.soci-content form:not(.ricerca) > h3,
.soci-content form:not(.ricerca) > p,
.soci-content form:not(.ricerca) > table,
.soci-content form:not(.ricerca) > .caselle,
.soci-content form:not(.ricerca) > .campi-riga,
/* La galleria e' una griglia dentro una griglia: senza questa riga si
   prendeva UNA colonna da 200 px del modulo, e le miniature - che
   dentro quella colonna ci stanno una per volta - scendevano in
   colonna singola con mezza pagina vuota a destra. */
.soci-content form:not(.ricerca) > .galleria {
  grid-column: 1 / -1;
}

/* Le note sono lunghe e occupano una colonna che potrebbe ospitare tre
   campi: si prendono la riga intera, dove ci stanno per davvero. */
.soci-content form:not(.ricerca) > .campo:has(textarea) {
  grid-column: 1 / -1;
}

/* I pulsanti prendono la riga ma non si allargano a coprirla: un
   "SALVA" largo mezzo schermo sembra un banner, non un pulsante. */
.soci-content form:not(.ricerca) > button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.5rem;
}

/* =====================================================
   I PULSANTI GIALLI DELL'AREA RISERVATA
   =====================================================
   .cta-button nasce per il sito pubblico, dove un pulsante e' un invito
   e deve chiamare l'occhio da tre metri: 0.8rem di riempimento verticale
   e 2rem di orizzontale, su una pagina che ne ha uno solo.

   Qui il mestiere e' un altro. "APRI", "REGISTRA", "SALVA" sono comandi
   di un modulo, ce n'e' uno o due per schermata e stanno accanto a campi
   alti mezzo centimetro: alla misura del sito sembravano banner, e
   rubavano l'altezza che serviva ai dati.

   Si restringe SOLO dentro .soci-content: sulla home il pulsante
   "Diventa Pilota" resta quello di prima, e li' e' giusto. */

.soci-content .cta-button,
.soci-content .cancella-button,
.soci-content form.ricerca button {
  padding: 0.4rem 1.1rem;
  font-size: 0.8rem;
  border-radius: 4px;                  /* la pillola tonda e' da invito, non da comando */
  letter-spacing: 0.03em;
}

/* Il sollevamento al passaggio del mouse e' fatto per un pulsante grande
   in mezzo a una foto. Su un comando di modulo, alto un centimetro e
   incastrato fra due campi, tre pixel di scatto sono solo irrequietezza. */
.soci-content .cta-button:hover,
.soci-content .cancella-button:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.soci-content form:not(.ricerca) .campo { margin-bottom: 0.55rem; }

.soci-content form:not(.ricerca) label {
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #667085;
}

.soci-content form:not(.ricerca) input[type="text"],
.soci-content form:not(.ricerca) input[type="password"],
.soci-content form:not(.ricerca) select,
.soci-content form:not(.ricerca) textarea {
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  width: 100%;
}

/* La riga di aiuto sotto un campo si mostra solo quando serve davvero:
   al passaggio del mouse o quando il campo ha il fuoco. Venti campi con
   venti spiegazioni sotto raddoppiano l'altezza del modulo, e chi lo
   compila per la cinquantesima volta non le legge piu' - ma la prima
   volta gli servivano, e toglierle del tutto sarebbe stato peggio.

   L'aiuto e' FUORI DAL FLUSSO: sta in position absolute sotto il campo e
   compare sopra a quello che segue. Con un aiuto in flusso, la comparsa
   faceva crescere la riga della griglia e tutto il modulo scendeva di
   colpo mentre il mouse passava - fastidioso da vedere e, peggio, un
   bersaglio che si sposta da sotto al dito. */
.soci-content form:not(.ricerca) .campo {
  position: relative;
}

.soci-content form:not(.ricerca) .campo .aiuto {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0.15rem 0 0 0;
  padding: 0.3rem 0.45rem;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
  opacity: 0;
  visibility: hidden;                                                                       /* senza questo l'aiuto invisibile intercetta i clic */
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.soci-content form:not(.ricerca) .campo:hover .aiuto,
.soci-content form:not(.ricerca) .campo:focus-within .aiuto {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   MODULI DELL'AREA RISERVATA
   =====================================================
   .campo e .aiuto erano gia' usati dall'editor delle notizie ma non
   erano mai stati definiti: i moduli venivano fuori senza spaziatura.
   Valgono per l'editor e per la registrazione dei movimenti. */

.soci-content .campo { margin-bottom: 1.2rem; }

/* Campi affiancati: la scheda di un socio ha quaranta campi, e in colonna
   sola sarebbe un chilometro di modulo. auto-fit e non un numero fisso di
   colonne, cosi' su un portatile ne stanno tre e su un telefono una. */
.soci-content .campi-riga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 1.5rem;
}

/* Griglia delle caselle: qualifiche e permessi sono una ventina l'una, e
   incolonnate occuperebbero due schermate. */
.soci-content .caselle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem 1.5rem;
  margin-bottom: 1.5rem;
}

.soci-content .casella {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.soci-content .casella label {
  display: inline;
  margin: 0;
  font-weight: 400;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Una casella disabilitata non e' un errore: e' un permesso che chi sta
   guardando non ha titolo di cambiare. Si vede che c'e' e che non si tocca. */
.soci-content .casella input:disabled + label { color: #98a2b3; cursor: not-allowed; }

/* =====================================================
   PULSANTE DI CANCELLAZIONE
   =====================================================
   Rosso e defilato: sta accanto a SALVA e non deve avere lo stesso peso
   visivo, perche' non e' l'operazione che si viene a fare. */

.soci-content .cancella-button {
  background-color: transparent;
  color: #b91c1c;
  border: 1px solid #b91c1c;
  padding: 0.6rem 1.4rem;
  border-radius: 5px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  margin-left: 0.8rem;
}

.soci-content .cancella-button:hover {
  background-color: #b91c1c;
  color: #fff;
}

/* =====================================================
   GALLERIA DELLE IMMAGINI DELLE NOTIZIE
   =====================================================
   Miniature quadrate a griglia, con sotto il richiamo Markdown da
   copiare. Il richiamo e' selezionabile: e' il motivo per cui c'e'. */

.soci-content .galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.soci-content .galleria-voce img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;                   /* riempie il quadrato senza deformare */
  display: block;
  border-radius: 4px;
  background-color: #e6e8eb;           /* si vede il riquadro anche mentre carica */
}

/* Il nome di chi ha scattato la foto, nella sezione FOTOGRAFIE. Sta
   sotto la miniatura e non dentro: sopra l'immagine sarebbe illeggibile
   su meta' delle foto, e qui non c'e' lo spazio per l'ombra che sulla
   home rende possibile scriverci sopra. */
.soci-content .galleria-autore {
  margin: 0.35rem 0 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-color);
  overflow-wrap: break-word;
}

/* I paragrafi di servizio dentro un riquadro della griglia stanno
   stretti: la data e la riga "sul sito" non devono spingere in basso la
   fila di miniature. */
.soci-content .galleria-voce p.aiuto {
  margin: 0.1rem 0 0.3rem 0;
  font-size: 0.75rem;
}

.soci-content .galleria-voce code {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: #667085;
  word-break: break-all;               /* i percorsi lunghi vanno a capo invece di allargare la griglia */
  user-select: all;                    /* un clic seleziona tutto il richiamo */
}

.soci-content .campo label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.9rem;
}

.soci-content .campo input[type="text"],
.soci-content .campo textarea,
.soci-content .campo select {
  width: 100%;
  max-width: 520px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;                /* le textarea altrimenti passano a monospace */
}

.soci-content .aiuto {
  margin: 0.35rem 0 0 0;
  color: #667085;
  font-size: 0.85rem;
}

/* =====================================================
   ESITO DI UN'OPERAZIONE
   =====================================================
   .errore esisteva solo dentro .login-container. Serve anche qui, dove
   una registrazione puo' non andare a buon fine. */

.soci-content .avviso,
.soci-content .errore {
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.soci-content .avviso {
  border-left: 4px solid #1a7f4b;
  background-color: #f2fbf6;
  color: #1a7f4b;
}

.soci-content .errore {
  border-left: 4px solid #b91c1c;
  background-color: #fdf2f2;
  color: #b91c1c;
}

/* =====================================================
   ESTRATTO CONTO
   =====================================================
   Gli importi a destra, perche' incolonnati si confrontano; il resto a
   sinistra. Il rosso e il verde ripetono un'informazione che c'e' gia'
   nel segno: e' voluto, ma il segno resta, cosi' la tabella si legge
   anche stampata in bianco e nero o da chi non distingue i due colori. */

/* .numero e' l'incolonnamento a destra e basta: le classi importo-* e saldo-*
   dicono anche COSA e' quel numero, e chi le usa per allineare si trova il
   valore colorato il giorno che si cambia il colore di un saldo. */
.soci-content table td.numero,
.soci-content table td.importo-accredito,
.soci-content table td.importo-addebito,
.soci-content table td.importo-assegnato,
.soci-content table td.saldo-positivo,
.soci-content table td.saldo-negativo {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;  /* cifre di larghezza uguale: le colonne si allineano */
}

.soci-content table td.importo-accredito { color: #1a7f4b; }
.soci-content table td.importo-addebito  { color: #b45309; }
.soci-content table td.importo-assegnato { color: var(--primary-color); font-weight: 600; }

.soci-content table td.saldo-positivo { font-weight: 600; }
.soci-content table td.saldo-negativo { font-weight: 600; color: #b91c1c; }

/* L'assegnazione non e' un movimento: fissa il saldo. Si distingue dalla
   riga, non solo dall'importo, perche' e' la riga intera a comportarsi
   in modo diverso. */
.soci-content table tr.assegnazione { background-color: #f5f8fc; }

/* Riga annullata da uno storno.
   NON e' barrata di proposito: la riga CONTA ANCORA nel saldo -- e'
   l'altra riga, quella di segno opposto, a compensarla -- e il saldo
   progressivo si muove proprio li'. Un barrato direbbe "ignorata dal
   calcolo", che e' falso.
   Resta un grigio piu' tenue; a dire cosa e' successo e' il testo
   "[annullato dal n. NNN]" in colonna descrizione. */
.soci-content table tr.stornato td { color: #667085; }

.soci-content p.saldo-positivo,
.soci-content p.saldo-negativo {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: -0.5rem;
}

.soci-content p.saldo-negativo { color: #b91c1c; }

/* =====================================================
   MESSAGGIO DI RIFIUTO SUL LOGIN
   =====================================================
   Sobrio di proposito: dice che non si entra, non perche', e non deve
   sembrare un guasto del sistema. */

.login-container .errore {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid #b91c1c;
  border-radius: 4px;
  background-color: #fdf2f2;
  color: #b91c1c;
  font-size: 0.9rem;
  text-align: left;
}

.login-container .occhiello {
  margin-top: -1.5rem;
  margin-bottom: 2rem;
  color: #667085;
  font-size: 0.95rem;
}

/* =====================================================
   CALENDARIO DELLE PRENOTAZIONI
   =====================================================
   Le macchine in verticale, le ore in orizzontale.

   Il contrario del calendario di Google, che mette le risorse in
   colonna: le risorse sono poche e fisse, le ore sono tante. Sette
   macchine stanno in sette righe basse, e le quattordici ore di una
   giornata di volo hanno tutta la larghezza dello schermo. Al
   contrario servirebbe scorrere in verticale per vedere il pomeriggio.

   Le fasce sono posizionate in assoluto con left e width in
   percentuale, calcolate dal server: il foglio di stile non puo'
   sapere che una prenotazione comincia alle 9:20, e una classe per
   ogni quarto d'ora sarebbe stata peggio. */

.cal-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background-color: #eef2f7;
  font-size: 0.85rem;
}

.cal-barra a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.cal-barra a:hover { text-decoration: underline; }

/* Il salto a una data e' un form GET in mezzo alla barra: senza questo
   andrebbe a capo da solo, perche' i form sono block. */
.cal-barra form.ricerca {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.cal-barra form.ricerca input {
  width: 7rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
}

.cal-barra .cta-button {
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
}

/* margin-left: auto e non un float: spinge il giorno per esteso a
   destra e resta al suo posto anche quando la barra va a capo. */
.cal-giorno {
  margin-left: auto;
  font-weight: 600;
  color: var(--primary-color);
}

.calendario {
  margin-bottom: 0.8rem;
  border: 1px solid #d7dde5;
  border-radius: 4px;
  background-color: var(--card-bg-color);
  overflow: hidden;
}

.cal-riga {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e5e9ef;
}

.cal-riga:last-child { border-bottom: none; }

.cal-nome {
  flex: 0 0 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-right: 1px solid #d7dde5;
  color: var(--light-text-color);
  line-height: 1.15;
}

.cal-id { font-weight: 600; font-size: 0.8rem; }

.cal-dettaglio {
  font-size: 0.68rem;
  opacity: 0.85;
}

/* Le linee dell'ora sono uno sfondo ripetuto e non degli elementi:
   sono decorazione, e un div per ogni mezz'ora avrebbe riempito la
   pagina di roba che non si puo' cliccare ne' leggere.

   Il PASSO lo scrive il server in background-size, perche' la fascia
   mostrata non e' sempre di quattordici ore: se qualcuno prenota alle
   sei si allarga, e delle linee scritte qui a percentuale fissa si
   troverebbero in mezzo alle ore. */
.cal-fascia {
  position: relative;
  flex: 1 1 auto;
  height: 4.6rem;                      /* quattro righe: orario, socio, istruttore, nota */
  background-color: #fbfcfd;
  background-image: linear-gradient(to right, #e5e9ef 0, #e5e9ef 1px, transparent 1px);
  background-repeat: repeat;
}

.cal-ore .cal-fascia {
  height: 1.1rem;
  background-image: none;
}

.cal-ore .cal-nome {
  background-color: transparent;
  color: #667085;
  font-size: 0.7rem;
}

.cal-ora {
  position: absolute;
  top: 0.15rem;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: #667085;
}

.cal-spazio {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}

a.cal-spazio.libero:hover {
  background-color: rgba(13, 44, 75, 0.10);
  cursor: cell;
}

/* top e bottom a zero, non 2px: gli spazi liberi stanno sotto e vanno
   da bordo a bordo, e due strisce da 2px sopra e sotto una prenotazione
   sarebbero rimaste cliccabili come "spazio libero" -- un bersaglio da
   due pixel che apre il modulo sbagliato. Lo stacco fra una fascia e la
   riga lo fa il bordo chiaro. */
.cal-pren {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.2rem 0.35rem;
  border-top: 2px solid var(--card-bg-color);
  border-bottom: 2px solid var(--card-bg-color);
  border-radius: 3px;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--light-text-color);
  text-decoration: none;
}

/* Le tre righe dentro la fascia. Ognuna su una riga sola con i puntini:
   su una fascia stretta e' meglio "Rossi Ma..." che il nome mandato a
   capo dentro due centimetri. La terza sparisce sotto il bordo quando
   non ci sta, e quello che resta -- orario e nome -- e' comunque cio'
   per cui si guarda un calendario. */
.cal-pren span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.15;
}

/* Quattro righe, in ordine di importanza: orario, socio, istruttore,
   nota. E' anche l'ordine in cui si perdono quando la fascia e' stretta,
   ed e' voluto -- l'ultima cosa che deve restare leggibile e' QUANDO e
   CHI.

   L'istruttore ha un peso suo, fra il nome e la nota: e' un dato della
   prenotazione come il socio, non un commento. La nota invece e' testo
   scritto da qualcuno, e si vede che lo e'. */
.cal-pren .f-ora  { font-size: 0.68rem; font-weight: 600; opacity: 0.9; }
.cal-pren .f-chi  { font-size: 0.74rem; font-weight: 600; }
.cal-pren .f-con  { font-size: 0.66rem; opacity: 0.95; }
.cal-pren .f-nota { font-size: 0.64rem; opacity: 0.8; font-style: italic; }

/* La propria si distingue da quelle degli altri, e non con un colore
   diverso: il colore dice GIA' di che macchina si tratta. Dice che si
   puo' cliccare, che e' l'altra cosa che si vuole sapere. */
a.cal-pren.mia {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

a.cal-pren:hover { filter: brightness(1.12); }

/* Righe INAGIBILI: la cosa esiste ma non e' disponibile -- macchina
   ferma o in manutenzione, oppure una su cui questo socio non e'
   abilitato. Il grigio e' sul nome e sullo sfondo, non sulle fasce: gli
   impegni di quella macchina restano leggibili, ed e' per quelli che
   uno guarda la riga.

   NON e' il grigio di "non ci puoi cliccare": un calendario in sola
   lettura -- i turni per chi non li compila -- non ha righe grigie,
   perche' colorarle tutte avrebbe fatto dire al grigio "tutto no",
   cioe' niente. Vedi CalendarioGiorno.Riga.Inagibile. */
.cal-riga.bloccata .cal-nome {
  background-color: #98a2b3 !important;
}

.cal-riga.bloccata .cal-fascia { background-color: #f4f5f7; }

/* La tavolozza. Otto colori che si ripetono: sopra le otto macchine
   due righe dello stesso colore tornano, ma sono lontane, e il nome a
   sinistra resta l'unica cosa che identifica davvero la riga. */
.cal-riga.col-0 .cal-nome, .cal-riga.col-0 .cal-pren { background-color: #c2185b; }
.cal-riga.col-1 .cal-nome, .cal-riga.col-1 .cal-pren { background-color: #7cb342; }
.cal-riga.col-2 .cal-nome, .cal-riga.col-2 .cal-pren { background-color: #2e7d32; }
.cal-riga.col-3 .cal-nome, .cal-riga.col-3 .cal-pren { background-color: #ef6c00; }
.cal-riga.col-4 .cal-nome, .cal-riga.col-4 .cal-pren { background-color: #1e88e5; }
.cal-riga.col-5 .cal-nome, .cal-riga.col-5 .cal-pren { background-color: #b8860b; }
.cal-riga.col-6 .cal-nome, .cal-riga.col-6 .cal-pren { background-color: #d32f2f; }
.cal-riga.col-7 .cal-nome, .cal-riga.col-7 .cal-pren { background-color: #00897b; }

/* Il pulsante che cancella. Rosso, e in una form sua: due submit nello
   stesso form si distinguono solo dal name del pulsante, che e' il
   dato che i browser mandano in modo meno prevedibile. */
.soci-content .cta-button.pericolo {
  background-color: #b91c1c;
  color: var(--light-text-color);
}

/* Sotto i 700 px la colonna dei nomi si stringe e le ore restano
   leggibili: si perde il modello della macchina, non la matricola. */
@media (max-width: 700px) {
  .cal-nome { flex: 0 0 5rem; }
  .cal-dettaglio { display: none; }
  .cal-pren { font-size: 0.62rem; }
}

/* =====================================================
   ELENCO DEI DOCUMENTI (sezione FILES)
   ===================================================== */

.soci-content p.briciole {
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: #667085;
}

.soci-content p.briciole a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.soci-content p.briciole a:hover { text-decoration: underline; }

.soci-content p.briciole i { margin-right: 0.25rem; }

.soci-content table.files a {
  color: var(--primary-color);
  text-decoration: none;
}

.soci-content table.files a:hover { text-decoration: underline; }

/* L'icona del tipo di file, davanti al nome: larghezza fissa cosi' i nomi
   restano incolonnati anche se le icone sono di larghezza diversa. */
.soci-content table.files a i {
  display: inline-block;
  width: 1.3rem;
  color: #667085;
}

/* Le cartelle in arancio e in grassetto: sono l'unica cosa dell'elenco
   che porta altrove invece di scaricare qualcosa. */
.soci-content table.files a.cartella {
  font-weight: 600;
}

.soci-content table.files a.cartella i { color: var(--secondary-color); }

.soci-content input[type="file"] {
  padding: 0.3rem 0;
  font-size: 0.85rem;
}

/* Il pulsante che toglie sta dentro una form sua, una per riga: due
   submit nello stesso form si distinguono solo dal name del pulsante,
   che e' il dato che i browser mandano in modo meno prevedibile.

   La form non ha bisogno di regole proprie: usa .in-riga, che sta gia'
   piu' sotto in questo foglio e la rende inline senza margine. */

/* =====================================================
   IL CALENDARIETTO DEL MESE
   =====================================================
   Le tre frecce da sole non bastavano: per arrivare a sabato prossimo
   servivano nove click, e per sapere che giorno della settimana e' il
   12 bisognava andarci. Un mese davanti agli occhi risponde a tutte e
   due le domande senza cliccare niente.

   Sta accanto alla griglia su schermo largo e sopra su schermo stretto:
   e' un float, non una colonna, cosi' il calendario della giornata usa
   tutta la larghezza che resta senza che serva un contenitore in piu'. */

.cal-mese {
  float: right;
  width: 14rem;
  margin: 0 0 1rem 1.5rem;
  padding: 0.6rem;
  border: 1px solid #d7dde5;
  border-radius: 6px;
  background-color: var(--card-bg-color);
}

.cal-mese .mese-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cal-mese .mese-testa a {
  padding: 0 0.5rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 700;
}

.cal-mese .mese-nome {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary-color);
  text-transform: capitalize;
}

/* table-layout fisso: senza, le colonne cambiano larghezza a seconda di
   quante cifre hanno i giorni, e il mese "balla" passando da uno
   all'altro. */
.soci-content .cal-mese table.mese-griglia {
  table-layout: fixed;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.78rem;
}

.soci-content .cal-mese th,
.soci-content .cal-mese td {
  padding: 0;
  text-align: center;
  border: none;
  height: 1.7rem;
}

.soci-content .cal-mese thead th {
  background: none;
  color: #98a2b3;
  font-size: 0.7rem;
  font-weight: 600;
}

.soci-content .cal-mese tbody tr:nth-child(even) { background: none; }

.cal-mese td a {
  display: block;
  line-height: 1.7rem;
  border-radius: 4px;
  color: var(--text-color);
  text-decoration: none;
}

.cal-mese td a:hover { background-color: #eef2f7; }

.cal-mese td.festivo a { color: #b45309; }

/* Il giorno mostrato e oggi si distinguono, e non e' un doppione: si
   guarda spesso una giornata che non e' quella di oggi, e senza il
   secondo segno si perde il riferimento a "adesso". */
.cal-mese td.scelto a {
  background-color: var(--primary-color);
  color: var(--light-text-color);
  font-weight: 700;
}

.cal-mese td.oggi a {
  box-shadow: inset 0 0 0 2px var(--secondary-color);
  font-weight: 600;
}

/* =====================================================
   PULSANTE DENTRO UNA RIGA DI TABELLA
   =====================================================
   Un form per riga: e' l'unico modo di avere un pulsante che fa una
   POST senza JavaScript. Di suo un form e' block e manderebbe a capo la
   cella. */

.soci-content form.in-riga {
  display: inline;
  margin: 0;
}

/* =====================================================
   UN PULSANTE DENTRO UNA RIGA DI TABELLA
   =====================================================
   TOGLI, STORNA e simili sono comandi che stanno in una cella. Presi
   dal loro stile normale erano alti quanto un pulsante di modulo -
   0.6rem di imbottitura sopra e sotto, testo a 0.95rem, grassetto - e
   ogni riga della tabella cresceva fino a diventare due righe di
   spazio bianco attorno a una parola.

   Un comando in tabella non deve invitare: deve stare nella riga. Qui
   e' rimpicciolito fino a occupare quanto il testo che gli sta
   accanto, cosi' che sia la cella a decidere l'altezza e non lui.

   Il margine sinistro va tolto: serviva a staccarlo da SALVA in un
   modulo, e in una cella lo sbilanciava e basta.

   NOTA per chi cerchera' di capire perche' era grande: .cancella-button
   e' definito DUE volte in questo foglio, una volta piccolo fra le
   regole dei moduli e una volta grande piu' sotto. Hanno lo stesso peso
   specifico, quindi vince la seconda - non la prima che si trova
   leggendo. La regola qui sotto ha un elemento in piu' nel selettore e
   vince su entrambe. */

.soci-content table .cancella-button,
.soci-content table .cta-button {
  padding: 0.25rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  margin-left: 0;
  white-space: nowrap;                 /* "TOGLI" spezzato in due e' un pulsante alto il doppio */
}

.soci-content .cta-button.piccolo {
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
}

/* La fascia sotto la barra si chiude sul float del calendarietto: senza,
   il modulo di prenotazione gli finirebbe accanto invece che sotto. */
.soci-content h2 { clear: both; }

/* Il collegamento "modifica" accanto al pulsante che cancella. Sono due
   cose diverse e si vedono diverse: il primo riapre un modulo e non
   tocca niente, il secondo scrive. Farli uguali avrebbe dato lo stesso
   peso a due azioni che si distinguono solo dopo averle premute. */
.soci-content td a.azione {
  margin-right: 0.8rem;
  color: var(--primary-color);
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 600;
}

.soci-content td a.azione:hover { text-decoration: underline; }

/* =====================================================
   MODULO DEI MOVIMENTI DI CONTO
   =====================================================
   Il pulsante REGISTRA finiva appiccicato alla tabella dei movimenti,
   e i due si leggevano come una cosa sola: sembrava il pulsante
   dell'elenco -- "registra questa riga" -- invece che del modulo qui
   sopra.

   Non e' solo brutto: qui si scrive denaro sul conto di un socio, e un
   pulsante che sembra appartenere alla cosa sbagliata e' il modo in cui
   si preme senza aver riletto cosa si sta per fare. */

.soci-content form.movimento {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e4e7ec;
}

/* =====================================================
   DUE MODULI SULLA STESSA PAGINA
   =====================================================
   La pagina dei permessi ne ha due: la password e le caselle. Sono due
   decisioni diverse e due pulsanti diversi, e devono vedersi come due
   blocchi -- altrimenti SALVA PASSWORD sembra il pulsante di tutto
   quello che sta sopra E sotto, e si preme quello sbagliato.

   La riga separa e lo spazio respira: sono i due modi piu' semplici di
   dire "qui finisce una cosa e ne comincia un'altra". */

.soci-content form.scheda + form.scheda {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid #e4e7ec;
}

/* Il titolo del secondo blocco non ha bisogno del margine che si prende
   di suo: la distanza la fa gia' il padding qui sopra. */
.soci-content form.scheda + form.scheda > h2 { margin-top: 0; }

/* La regola qui sopra vale solo per due moduli ATTACCATI. La pagina
   delle qualifiche non e' cosi': fra un modulo e il successivo ci sono
   titoli, tabelle e righe di aiuto, quindi i due form non sono mai
   fratelli adiacenti e il selettore non scatta mai.

   Li' lo stacco lo fa un <hr> messo a mano all'inizio di ogni blocco.
   Serve perche' la pagina e' lunga e fatta di cose che si somigliano -
   un titolo, un modulo, una tabella, di nuovo - e senza una riga non si
   capisce dove finisce AGGIUNGI UN PASSAGGIO MACCHINA e dove comincia
   ASSEGNA UN'ABILITAZIONE. Il rischio concreto e' premere il pulsante
   del blocco sbagliato.

   border-top invece di border: la resa di <hr> cambia da browser a
   browser (in alcuni e' ancora un solco a due colori), e lasciarla al
   valore di fabbrica vuol dire una riga diversa su ogni macchina. */

.soci-content hr {
  margin: 3rem 0 1.5rem;
  border: 0;
  border-top: 2px solid #e4e7ec;
}

/* Il titolo che segue la riga non aggiunge il suo margine: la distanza
   l'ha gia' messa l'<hr>, e sommandole il blocco si stacca troppo e
   sembra un'altra pagina. */
.soci-content hr + h2 { margin-top: 0; }

/* =====================================================
   LE QUATTRO FACCE DI UN SOCIO
   =====================================================
   Anagrafica, qualifiche, permessi, conto. Passare dall'una all'altra
   e' il gesto piu' frequente della sezione: chi apre l'anagrafica quasi
   sempre finisce a guardare anche le qualifiche.

   Prima erano tre parole sottolineate dentro un paragrafo di aiuto:
   sembravano una nota e si leggevano come testo, non come una barra di
   navigazione. Adesso sono pulsanti, e si vedono da lontano.

   Quella su cui si e' gia' resta al suo posto, spenta e non cliccabile:
   cosi' le quattro voci non ballano da una pagina all'altra. Prima
   veniva omessa e i pulsanti si spostavano a ogni click. */

.soci-content .facce-socio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.8rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e4e7ec;
}

.soci-content .facce-socio .faccia {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--primary-color);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.soci-content .facce-socio a.faccia:hover {
  background-color: #eef2f7;
  border-color: var(--primary-color);
}

/* Dove si e' adesso: fondo pieno, e nessun bordo che inviti a cliccare.
   Il cursore resta quello del testo, non la manina. */
.soci-content .facce-socio .faccia.qui {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-text-color);
  cursor: default;
}

/* =====================================================
   ALBERO DELLA RACCOLTA (sezione FILES)
   =====================================================
   Fatto con <details> e <summary>: e' HTML e non JavaScript, quindi si
   apre da tastiera, lo annuncia un lettore di schermo, e funziona anche
   con gli script bloccati. Un albero costruito a colpi di script sarebbe
   stata la sola parte del sito a non funzionare senza.

   Sta SOPRA l'elenco e non al suo posto: l'albero risponde a "dov'e'
   quel documento", l'elenco a "cosa c'e' qui e quanto e' vecchio" -- la
   dimensione e la data stanno solo li'. */

.soci-content .albero-guscio {
  margin-bottom: 1.2rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #e4e7ec;
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
  background-color: #fafbfc;
}

.soci-content .albero-guscio > summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667085;
}

.soci-content ul.albero,
.soci-content ul.albero ul {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding-left: 1.1rem;
}

/* La riga verticale che lega i figli al padre: senza, a tre livelli non
   si capisce piu' cosa sta dentro cosa. */
.soci-content ul.albero ul {
  border-left: 1px solid #e4e7ec;
  margin-left: 0.35rem;
}

.soci-content ul.albero li { margin: 0.15rem 0; }

.soci-content ul.albero summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
}

.soci-content ul.albero summary i { margin-right: 0.35rem; color: #b45309; }

.soci-content ul.albero a {
  color: inherit;
  text-decoration: none;
}

.soci-content ul.albero a:hover { text-decoration: underline; }

.soci-content ul.albero .albero-file a {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--primary-color);
}

.soci-content ul.albero .albero-file i { margin-right: 0.35rem; color: #667085; }

/* Dove si e' adesso. Il fondo e non il grassetto: le cartelle sono gia'
   in grassetto, e un secondo grassetto non si sarebbe distinto. */
.soci-content ul.albero summary.qui {
  background-color: #fff4e0;
  border-radius: 3px;
  padding: 0 0.3rem;
}

.soci-content ul.albero .albero-vuota {
  margin: 0.1rem 0 0.1rem 1.4rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #98a2b3;
}

/* =====================================================
   BARRA DEI COMANDI DELL'EDITOR DELLE NOTIZIE
   =====================================================
   In cima al modulo e APPICCICATA mentre si scorre. Una notizia e'
   lunga: con i comandi in fondo, per salvare una correzione fatta nel
   titolo bisognava scorrere il testo, le immagini e la parte inglese.

   sticky e non fixed: fixed l'avrebbe staccata dalla colonna del
   contenuto e sovrapposta al menu di sinistra alle larghezze piccole.

   Il fondo e' pieno e c'e' un'ombra: sopra un testo che scorre, una
   barra trasparente diventa illeggibile appena ci passa sotto una riga
   in grassetto. */

.soci-content .barra-comandi {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.5rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  background-color: #eef2f7;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
}

.soci-content .comandi-sinistra,
.soci-content .comandi-destra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* SALVA e CANCELLA stanno alle due estremita' e non si toccano mai:
   sono i due pulsanti che non si devono confondere, e la distanza e' la
   difesa piu' semplice - piu' di un colore diverso, che non aiuta chi
   non li distingue. */
.soci-content .barra-comandi .cta-button {
  padding: 0.45rem 1.4rem;
  font-size: 0.85rem;
}

.soci-content .barra-comandi .cancella-button {
  padding: 0.45rem 1.2rem;
  font-size: 0.85rem;
  margin-left: 0;                      /* il margine lo fa gia' il gap del flex */
}

.soci-content .barra-comandi .annulla {
  color: #667085;
  font-size: 0.85rem;
  text-decoration: none;
}

.soci-content .barra-comandi .annulla:hover { text-decoration: underline; }

/* La spunta di pubblicazione accanto a SALVA: nel momento in cui si
   salva dice in quale dei due stati si sta salvando. */
.soci-content .spunta-pubblica {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.soci-content .spunta-pubblica input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
}

.soci-content .spunta-pubblica label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: none;                /* le label dei moduli sono maiuscole: qui e' una frase */
  letter-spacing: normal;
  cursor: pointer;
}

/* =====================================================
   LE SPUNTE DEGLI ARGOMENTI, nell'editor delle notizie
   =====================================================
   Senza queste regole l'etichetta finiva SOTTO la casella invece che
   accanto: le label dei moduli di quest'area sono display:block - lo
   vogliono i campi di testo, dove il titolo sta sopra la casella - e
   qui quella regola faceva esattamente il danno opposto.

   Con quattro caselle una sotto l'altra non si capiva quale parola
   appartenesse a quale quadratino, che su una spunta e' l'unica cosa
   che conta. */
.soci-content .spunta-argomento {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.soci-content .spunta-argomento input[type="checkbox"] {
  flex: 0 0 auto;                      /* il quadratino non si stringe se l'etichetta e' lunga */
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
}

.soci-content .spunta-argomento label {
  display: inline;                     /* qui sta ACCANTO alla casella, non sopra */
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

/* Sotto i 640px CANCELLA va a capo e prende tutta la riga: appiccicato
   accanto a SALVA su uno schermo stretto e' il pulsante sbagliato che
   aspetta un dito impreciso. */
@media (max-width: 640px) {
  .soci-content .barra-comandi { justify-content: flex-start; }
  .soci-content .comandi-destra { width: 100%; justify-content: flex-end; }
}

/* La versione del servizio in fondo alle pagine dell'area soci
   (Pagina.ChiudiSezione): piccola e grigia, deve trovarla chi la cerca
   dopo un aggiornamento, non distrarre chi usa la pagina. */
.versione-servizio {
  margin: 1.5rem 0 1rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: #8a94a3;
}

/* La pagina pubblica di iscrizione a un evento (PUBBLICO/Iscrizioni.cs).
   =====================================================
   Locandina e presentazione in testa, affiancate su schermo largo; sotto
   il modulo, con le stesse classi del modulo contatti (contact-form,
   form-group, interessi) per sembrare la stessa cosa. L'informativa e'
   in un riquadro suo, piu' piccola ma leggibile: va letta, non nascosta. */
.iscrizione-evento {
  max-width: 820px;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.iscrizione-testata {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.iscrizione-testata:has(> .iscrizione-presentazione:only-child) { grid-template-columns: 1fr; }

.iscrizione-locandina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.iscrizione-occhiello {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b06f00;
}

.iscrizione-presentazione h2 { margin: 0.2rem 0 0.6rem 0; }

.iscrizione-data { font-weight: 600; }

/* Le scelte e le caselle del modulo di iscrizione.
   Il foglio del sito allarga ogni input del modulo a tutta riga
   (.form-group input), e un pallino largo quanto la riga finiva centrato
   SOPRA la sua etichetta. Qui tornano piccoli oggetti accanto al testo, e
   piu' grandi del normale: si toccano con un dito, su un telefono. */
.iscrizione-modulo .interessi label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.45rem 0;
  font-weight: 400;
  cursor: pointer;
}

.iscrizione-modulo input[type="radio"] {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  accent-color: var(--primary-color);
  cursor: pointer;
}

/* La casella di spunta disegnata qui: quadrata, grande, con il segno di
   spunta chiaro. Quella del browser e' piccola e con gli angoli tondi. */
.iscrizione-modulo input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0 0;
  padding: 0;
  border: 2px solid var(--primary-color);
  border-radius: 3px;
  background-color: #ffffff;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.iscrizione-modulo input[type="checkbox"]::after {
  content: "";
  width: 0.45rem;
  height: 0.85rem;
  margin-top: -0.15rem;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.1s ease-in-out;
}

.iscrizione-modulo input[type="checkbox"]:checked {
  background-color: var(--primary-color);
}

.iscrizione-modulo input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.iscrizione-modulo input[type="checkbox"]:focus-visible,
.iscrizione-modulo input[type="radio"]:focus-visible {
  outline: 3px solid #fca311;
  outline-offset: 2px;
}

.iscrizione-consenso label { cursor: pointer; }

.iscrizione-informativa {
  margin: 1.5rem 0 1rem 0;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  background-color: #f3f5f8;
  font-size: 0.85rem;
  line-height: 1.5;
}

.iscrizione-informativa h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.iscrizione-informativa p { margin: 0 0 0.5rem 0; }

.iscrizione-consenso {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}



@media (max-width: 700px) {
  .iscrizione-testata { grid-template-columns: 1fr; }
}

/* La locandina attuale nel modulo dell'evento (area soci). */
.anteprima-locandina img {
  max-width: 220px;
  height: auto;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
}

/* La data nel riquadro dell'evento in copertina, in home. */
.copertina-data {
  font-weight: 600;
  margin-bottom: 0.6rem !important;
}

/* =====================================================
   SICUREZZA VOLO (dalla 2.47)
   Il modulo pubblico /sicurezza/segnalazione e le schede in
   STATISTICHE - SICUREZZA VOLO.
   ===================================================== */

/* Le due tendine (tipologia e fase): come gli altri campi del modulo. */
.segnalazione-modulo select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: var(--main-font);
  font-size: 1rem;
  background-color: #ffffff;
}

.segnalazione-modulo h3 {
  margin: 1.6rem 0 0.6rem 0;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #fca311;
  color: var(--primary-color);
}

.segnalazione-modulo .aiuto { margin: 0 0 0.4rem 0; }

/* Una segnalazione nell'area soci: una scheda, non una riga di tabella,
   perche' la descrizione e' lunga e va letta. */
.segnalazione {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid #e6e8eb;
  border-left: 4px solid #fca311;
  border-radius: 6px;
  background-color: #ffffff;
}

.segnalazione-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.segnalazione-testa h3 { margin: 0; font-size: 1.05rem; color: var(--primary-color); }

.segnalazione-dati {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1rem;
  margin: 0.8rem 0;
}

.segnalazione-dati dt { font-weight: 600; color: #475467; }
.segnalazione-dati dd { margin: 0; }

.segnalazione-titoletto { margin: 0.6rem 0 0.2rem 0; font-weight: 600; color: #475467; }

/* Le andate a capo di chi ha scritto restano. */
.segnalazione-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .segnalazione-dati { grid-template-columns: 1fr; }
  .segnalazione-dati dd { margin-bottom: 0.4rem; }
}