/* Stile condiviso dell'app WASM Club (shell staff + shell famiglia). */
:root {
    --mud-typography-default-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------- Bordi dello schermo (PWA installata) ----------
       Installata sul telefono l'app disegna sotto la tacca, gli angoli tondi e
       la barra dei gesti: senza questi margini l'ora coprirebbe il titolo e la
       riga di sistema le voci in basso. In una finestra normale valgono 0, così
       il layout resta identico a prima. Passano da variabili e non da env()
       diretto perché così si possono simulare in prova. */
    --va-safe-top: env(safe-area-inset-top, 0px);
    --va-safe-bottom: env(safe-area-inset-bottom, 0px);
    --va-safe-left: env(safe-area-inset-left, 0px);
    --va-safe-right: env(safe-area-inset-right, 0px);

    /* Altezza della barra in alto: cresce della tacca, cala in orizzontale. */
    --va-appbar-h: 48px;
    /* Altezza della barra in basso, usata anche per lo spazio di fondo pagina. */
    --va-nav-h: 58px;

    /* Spazio da lasciare in cima all'avviso "senza rete", quando c'è. Vale 0 e
       non cambia niente finché js/rete.js non la valorizza con l'altezza VERA
       dell'avviso — misurata, perché su un telefono il testo va a capo e due
       righe sono più alte di una. Funziona esattamente come la tacca qui sopra:
       la barra dell'app cresce e il suo contenuto scende, invece di finirci
       sotto. */
    --va-rete-h: 0px;

    /* ---------- Le misure decise una volta ----------
       Misurato prima di scriverle: la sola Dashboard usava QUATTORDICI
       dimensioni di carattere su settantacinque scritte, fra cui 12 / 12,19 /
       13 / 13,13 / 13,5 — cinque misure dentro un millimetro e mezzo. Nessuno
       le distingue, e insieme fanno sembrare la pagina cresciuta invece che
       decisa.

       Sono sei, le stesse dichiarate in TemaClub.cs per i componenti MudBlazor:
       qui e là devono restare uguali. Chi ne vuole una settima deve prima
       spiegare perché le sei non bastano.

       In PIXEL e non in rem, di proposito: la radice è a 15px (poco sotto),
       quindi ogni rem esce moltiplicato per 15 — ed è da lì che nascevano le
       misure con la virgola. */
    --va-t1: 11px;   /* etichette, soprattitoli, intestazioni di tabella */
    --va-t2: 13px;   /* testo secondario */
    --va-t3: 15px;   /* il testo dell'app */
    --va-t4: 17px;   /* titoli di scheda */
    --va-t5: 21px;   /* titoli di sezione */
    --va-t6: 28px;   /* il titolo della pagina */
    /* Sotto la scala, e solo per la barra in basso: sei voci su un telefono
       stretto lasciano ~52px l'una, e a 11px le etichette si troncano. È
       un'eccezione dichiarata, non una settima misura. */
    --va-t0: 10px;

    /* Gli angoli: tre, non nove. Prima erano 7 / 10 / 11 / 12 / 13 / 14 / 16 px
       più 50% e 999px — dove 11, 12 e 13 non si distinguono a occhio e 100px e
       999px dicevano la stessa cosa. Il cerchio (50%) resta a parte: è una
       forma diversa, non un raggio più grande. */
    --va-r-s: 8px;      /* righe, tessere, pulsanti */
    --va-r-m: 14px;     /* schede e pannelli */
    --va-r-pill: 999px; /* pillole e chip */
}
/* Font leggermente più piccolo su tutta l'app (MudBlazor usa rem → scala globale). */
html { font-size: 15px; }
.club-body-bg { background: var(--club-bg) !important; }

/* App bar piatta: il gradiente rubava attenzione al contenuto e lo stemma era
   ripetuto anche in cima al menu. Una tinta sola, come nell'intranet. */
.club-appbar {
    background: var(--club-appbar-b) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
    /* Sotto la tacca, sotto l'avviso "senza rete", e dentro gli angoli tondi
       (in orizzontale la tacca sta di lato). */
    padding-top: calc(var(--va-safe-top) + var(--va-rete-h));
    padding-left: calc(12px + var(--va-safe-left));
    padding-right: calc(12px + var(--va-safe-right));
    height: calc(var(--va-appbar-h) + var(--va-safe-top) + var(--va-rete-h));
    min-height: calc(var(--va-appbar-h) + var(--va-safe-top) + var(--va-rete-h));
}
/* Il contenuto parte sotto la barra, tacca e avviso compresi. */
.mud-main-content { padding-top: calc(var(--va-appbar-h) + var(--va-safe-top) + var(--va-rete-h)) !important; }
/* Anche il menu laterale scende sotto la tacca e sotto l'avviso. */
.va-drawer .mud-drawer-content, .va-drawer .mud-navmenu { padding-top: calc(var(--va-safe-top) + var(--va-rete-h)); }
/* Nome di chi è connesso, leggibile senza aprire il menu. */
.va-utente {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(255, 255, 255, .12); padding: 4px 10px; border-radius: var(--va-r-pill);
    font-size: var(--va-t2); color: inherit; max-width: 190px;
}
.va-utente-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599.98px) { .va-utente-nome { display: none; } .va-utente { padding: 4px 6px; } }
.club-wordmark { font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.club-sub { opacity: .78; font-weight: 400; }
@media (max-width: 480px) { .club-sub { display: none; } .club-wordmark { font-size: var(--va-t3); } }

/* ---------- Menu laterale in stile intranet ----------
   Ridotto a icone (si apre al passaggio del mouse): lo spazio va al contenuto.
   Etichette, gruppi, blocco sezione e versione spariscono quando è ridotto,
   altrimenti resterebbero tronconi di testo tagliati. */
.va-sezione {
    padding: 8px 16px 10px;
    border-left: 3px solid var(--mud-palette-primary);
    margin-bottom: 4px;
}
.va-sezione-et { font-size: var(--va-t1); letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-disabled); }
.va-sezione-nm { display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 1.3; }

.va-gruppo {
    font-size: var(--va-t1); letter-spacing: .11em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); font-weight: 600; padding: 6px 16px 2px;
}

.va-versione {
    margin-top: 8px; padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: var(--va-t1); color: var(--mud-palette-text-disabled);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Spariscono SOLO quando il menu è ridotto alla striscia di icone: aperto —
   anche solo al passaggio del mouse — MudBlazor toglie --closed e tornano.
   (Legarle a .mud-drawer-mini le nascondeva anche a menu aperto, perché la
   classe mini resta comunque sul drawer.) */
.va-drawer.mud-drawer--closed .va-sezione,
.va-drawer.mud-drawer--closed .va-gruppo,
.va-drawer.mud-drawer--closed .va-versione { display: none; }

/* Drawer / menù a pillole. */
.club-drawer-head { display: flex; align-items: center; padding: 18px 16px 12px; }
.club-drawer .mud-navmenu { padding: 6px 10px; }
.club-drawer .mud-nav-group .mud-nav-link,
.club-drawer .mud-navmenu > .mud-nav-link {
    border-radius: var(--va-r-s); margin: 2px 0; min-height: 42px;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.club-drawer .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 600; color: var(--mud-palette-primary); background: var(--club-active-bg); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary); }
.club-drawer .mud-nav-group > .mud-nav-link { text-transform: uppercase; letter-spacing: .6px; font-size: var(--va-t1); opacity: .8; }

/* Card / paper moderne. */
.mud-card, .club-panel { border-radius: var(--va-r-m); }
.mud-card { transition: box-shadow .15s ease, transform .15s ease; }
.mud-card:hover { transform: translateY(-2px); }
.mud-table-head th { text-transform: uppercase; letter-spacing: .4px; font-size: var(--va-t1); }

/* Dashboard: KPI badge, box-data, righe. */
.club-kpi { transition: box-shadow .15s ease, transform .15s ease; }
.club-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 32, 74, .14); }
.club-kpi-badge { width: 46px; height: 46px; border-radius: var(--va-r-s); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.club-kpi-badge .mud-icon-root { font-size: 26px; }
.club-event { border-radius: var(--va-r-s); cursor: pointer; transition: background .12s ease; }
.club-event:hover { background: var(--mud-palette-action-default-hover); }
.club-daybox { width: 46px; height: 46px; border-radius: var(--va-r-s); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.club-daybox .d-day { font-size: var(--va-t4); font-weight: 800; }
.club-daybox .d-mon { font-size: var(--va-t0); font-weight: 600; letter-spacing: .5px; }

/* Chi si apre col tasto invio deve anche VEDERSI quando ha il fuoco: senza
   questo il bordo di sistema sparisce dietro il raggio di curvatura e chi
   naviga da tastiera non sa piu' dove si trova. */
.club-event:focus-visible, .club-todo:focus-visible, .va-card[tabindex]:focus-visible {
    outline: 2px solid var(--mud-palette-primary); outline-offset: 2px;
}

/* Le tessere coi numeri, sul telefono, sono file alte 180 px: prima di arrivare
   al primo impegno bisogna scorrere. Rimpicciolite recuperano un evento e mezzo
   di schermo. Su computer non cambia niente.

   Dal 17/09/2026 la Dashboard non ne ha piu': dicevano numeri fermi o gia'
   scritti sotto. Questo blocco resta per le altre pagine che le usano. */
@media (max-width: 959.98px) {
    .club-kpi { padding: 10px 12px !important; }
    .club-kpi-badge { width: 34px; height: 34px; border-radius: var(--va-r-s); }
    .club-kpi-badge .mud-icon-root { font-size: 20px; }
    .club-kpi .mud-typography-h4 { font-size: var(--va-t5); }
    .club-kpi .mud-typography-body2 { font-size: var(--va-t1); line-height: 1.2; }
    .club-kpi:hover { transform: none; }
}

/* ---------- Tabella su schermo largo, schede sul telefono ----------
   Una tabella da sei colonne, su 375 px, MudBlazor la impila in coppie
   etichetta/valore: sei righe per un allenamento, e con trentasette eventi si
   assomigliano tutti. Sotto la soglia si mostrano le schede.

   La soglia e' la STESSA della barra in basso (959.98px), di proposito: cosi'
   "telefono" vuol dire una cosa sola in tutta l'applicazione, e non si finisce
   con la barra che compare a una larghezza e le schede a un'altra. */
.va-solo-telefono { display: none; }
@media (max-width: 959.98px) {
    .va-solo-telefono { display: block; }
    .va-no-telefono { display: none !important; }
}

/* ---------- A che punto e' un evento ----------
   Una barretta che si riempie e la frase, sulla riga dell'evento. Il colore lo
   prende dalla tavolozza di MudBlazor e non da un esadecimale scritto qui:
   cosi' funziona anche col tema scuro, che a un ambra fisso non perdona.

   La barra e' `currentColor` a due opacita' — traccia e riempimento — cosi' il
   colore si decide in un punto solo, sul contenitore. */
/* La frase non si spezza a meta': nella colonna "Risposte" della tabella
   diventava «Tutti hanno / risposto» su due righe. Se non ci sta, va a capo
   tutta insieme — il contenitore che la ospita manda a capo gli elementi. */
.va-avanz {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: var(--va-t1); font-weight: 600; line-height: 1;
    color: var(--mud-palette-primary);
}
.va-avanz.attenzione { color: var(--mud-palette-warning); }
.va-avanz.fatto { color: var(--mud-palette-success); }

/* La traccia e' lo stesso colore al 22%: un valore solo da mantenere, e si
   schiarisce da se' quando il tema cambia. */
.va-avanz-barra {
    width: 54px; height: 5px; border-radius: var(--va-r-pill); flex: 0 0 auto;
    background: color-mix(in srgb, currentColor 22%, transparent);
    overflow: hidden;
}
.va-avanz-barra > i {
    display: block; height: 100%; border-radius: var(--va-r-pill);
    background: currentColor; transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* Nei riepiloghi la barra prende tutta la riga: li' non e' un dettaglio in
   fondo a una riga, e' il colpo d'occhio della pagina. */
.va-avanz.piena { display: flex; }
.va-avanz.piena .va-avanz-barra { width: auto; flex: 1 1 auto; height: 6px; }

/* Senza convocati non c'e' niente da riempire: un punto, non una barra vuota. */
.va-avanz-punto {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .va-avanz-barra > i { transition: none; }
}

/* ---------- La barra dei pulsanti resta sotto gli occhi ----------
   Vale per le schede lunghe (il modulo evento e' sei schermate su un telefono):
   compilate le informazioni in cima, per salvare bisognava scorrere fino in
   fondo, oltre luogo, stato, presenze e ricorrenza. Chi non ci arrivava usciva
   senza salvare, e non se ne accorgeva.

   Sta SOPRA la barra di navigazione in basso, che e' fissa: senza quel calcolo
   il pulsante Salva finisce sotto le icone. E' la stessa misura della schermata
   delle foto, dove il problema si era gia' presentato.

   `sticky` qui NON funziona, ed e' il motivo per cui e' scritto `fixed`:
   MudBlazor mette `overflow:hidden` su `.mud-tabs` per ritagliare gli angoli
   tondi, e quell'overflow diventa il contenitore di scorrimento dell'elemento
   appiccicoso — un contenitore che non scorre, quindi l'elemento non si appiccica
   mai. `fixed` esce da li' perche' nessun antenato ha una trasformazione.
   Misurato il 17/09/2026: con `sticky` la barra restava a 1185px dal bordo alto
   di una finestra da 812. */
@media (max-width: 959.98px) {
    .va-barra-azioni {
        position: fixed;
        left: 12px; right: 12px;
        bottom: calc(var(--va-nav-h) + var(--va-safe-bottom, 0px) + 8px);
        z-index: 1100;
        margin: 0;
    }
    /* Lo spazio che la barra toglie al documento: senza, l'ultima sezione
       resta sotto e non si riesce a leggerla. */
    .va-barra-azioni-spazio { height: 92px; }
}

/* Il numero di posizione in classifica, sul telefono: largo fisso, cosi' la
   colonna dei nomi parte allineata anche fra il 9 e il 10. */
.va-pos {
    flex: 0 0 auto; min-width: 26px; text-align: center;
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--mud-palette-text-secondary);
}
.va-pos.podio { color: var(--mud-palette-primary); font-weight: 800; }

/* ---------- Quello che aspetta una risposta sale in cima ----------
   Su schermo largo "Da gestire" e' la colonna di destra, e va bene: si vede
   insieme agli eventi. Sul telefono le colonne diventano una sotto l'altra, e
   nell'ordine del documento finisce dopo sei impegni: chi aspetta una risposta
   sta sotto la piega. La griglia di MudBlazor e' flex, quindi basta l'ordine. */
@media (max-width: 959.98px) {
    .va-prima-su-telefono { order: -1; }
}

/* ---------- Tabella impilata: che stia nella colonna ----------
   Quando MudBlazor impila una tabella (mud-sm-table) il browser calcola la
   larghezza dal contenuto piu' largo che non va a capo: su Staff, a 375 px, una
   riga con tre pastiglie e un bottone usciva a 585 px, e le celle Permessi e
   Incarichi si vedevano VUOTE perche' il contenuto stava fuori, a destra
   (misurato l'11/09/2026). Le pagine grosse hanno le schede sotto i 960 px; per
   tutte le altre tabelle questa e' la rete: larghezza fissa, e dentro la cella
   il valore scende sotto l'etichetta quando non ci sta di fianco.
   SOLO quando la tabella e' impilata, cioe' sotto la soglia del suo Breakpoint
   (le stesse di MudBlazor): le classi mud-*-table ci sono sempre, e la regola
   fuori dalle soglie valeva anche sul computer. La riga «nessun evento» ha
   colspan=1000, e con la larghezza fissa sono mille colonne da un pixel: le
   intestazioni dell'elenco eventi vuoto finivano una sopra l'altra, illeggibili
   (28/09/2026). */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-xs-table .mud-table-cell { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
    .mud-xs-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 960px) {
    .mud-sm-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-sm-table .mud-table-cell { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
    .mud-sm-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 1280px) {
    .mud-md-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-md-table .mud-table-cell { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
    .mud-md-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 1920px) {
    .mud-lg-table .mud-table-root { table-layout: fixed; width: 100%; }
    .mud-lg-table .mud-table-cell { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
    .mud-lg-table .mud-table-cell > * { min-width: 0; max-width: 100%; }
}

/* Tabella impilata compatta, su richiesta (va-tabella-compatta, 27/09/2026).
   Impilate cosi' come vengono, le tabelle della Configurazione facevano una
   scheda da mezzo schermo per riga: ogni cella con 14 px sopra e sotto, il nome
   ripetuto dall'etichetta «Nome» e matita e cestino da soli su una riga in
   fondo. Qui il nome sta in testa senza etichetta, i pulsanti (va-azioni) gli
   vanno accanto e i valori brevi (va-breve) stanno tre per riga con
   l'etichetta sopra. Solo dove la si chiede: in altre tabelle la prima cella o
   le celle senza etichetta sono altro. Breakpoint.Sm impila sotto i 960 px. */
@media (max-width: 959.98px) {
    .va-tabella-compatta.mud-sm-table .mud-table-root,
    .va-tabella-compatta.mud-sm-table .mud-table-body { display: block; }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-row {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px;
        padding: 6px 0; border-bottom: 1px solid var(--mud-palette-table-lines);
    }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell {
        order: 2; flex: 1 1 100%; padding: 3px 14px; border: 0 !important; min-height: 0;
    }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell::before { font-weight: 400; opacity: .7; }
    /* Base al 55%: accanto al nome ci stanno i pulsanti, non i valori brevi. */
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell:first-child { order: 0; flex: 1 1 55%; font-size: 1rem; }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell:first-child::before { display: none; }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell.va-azioni { order: 1; flex: 0 0 auto; padding: 0 6px 0 0; }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell.va-azioni::before { display: none; }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell.va-breve {
        flex: 1 1 calc(33% - 4px); flex-direction: column; align-items: flex-start; justify-content: flex-start;
    }
    .va-tabella-compatta.mud-sm-table .mud-table-body .mud-table-cell.va-breve::before { font-size: var(--va-t1); padding: 0; }
}

/* Riga compatta di un atleta nell'elenco a telefono: nome sopra, una riga fine
   sotto. Prima ogni giocatore era una scheda da 300 px con squadra, data e
   certificato uno sotto l'altro: due giocatori e mezzo per schermata, su
   venticinque. Qui ne stanno una dozzina. */
.va-riga-atleta { padding: 8px 12px; margin-bottom: 6px; }
.va-ellissi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Il mese che separa gli eventi in elenco, sul telefono e come riga di gruppo
   nella tabella. */
.va-mese, .mud-table .va-mese-riga .mud-table-cell {
    text-transform: uppercase; letter-spacing: .08em; font-size: var(--va-t1); font-weight: 600;
    color: var(--mud-palette-text-secondary); padding: 12px 4px 4px;
}
.va-mese:first-child { padding-top: 0; }

/* Una voce della Storia dell'attivita': una frase, un filo sotto. */
.va-attivita-riga { padding: 10px 16px; border-bottom: 1px solid var(--mud-palette-table-lines); }
.va-attivita-riga:last-child { border-bottom: none; }
.club-todo { border-radius: var(--va-r-s); cursor: pointer; transition: background .12s ease; }
.club-todo:hover { background: var(--mud-palette-action-default-hover); }

/* Variabili tema (classe pilotata da _dark su MudLayout). */
.club-light {
    --club-bg: #eef1f7; --club-appbar-a: #1f3a86; --club-appbar-b: #28489F; --club-active-bg: rgba(40, 72, 159, .10);
    /* Colori di stato: dicono SOLO presente / in attesa / assente. */
    --club-ok: #137A5C; --club-ok-bg: #E1F3EC;
    --club-att: #8F5A0C; --club-att-bg: #FBEEDA;
    --club-no: #C4242F; --club-no-bg: #FBE9EA;
    --club-card: #ffffff; --club-card-2: #f6f8fc; --club-linea: #DCE2EF;
}
.club-dark {
    --club-bg: #0d1424; --club-appbar-a: #0f1c3a; --club-appbar-b: #17264a; --club-active-bg: rgba(122, 160, 255, .16);
    --club-ok: #5FD3AB; --club-ok-bg: #123328;
    --club-att: #E9AF56; --club-att-bg: #33260F;
    --club-no: #FF8087; --club-no-bg: #3A1D22;
    --club-card: #151e33; --club-card-2: #1b2540; --club-linea: #2A3550;
}

/* ---------- Barra di navigazione fissa in basso (famiglie E staff) ----------
   Su telefono l'hamburger costava due tocchi per ogni spostamento e copriva lo
   schermo: la barra tiene le sezioni più usate a portata di pollice. Nello staff
   l'ultima voce apre il menu laterale, dove resta tutto il resto.
   Sopra i 960px torna il drawer laterale e la barra sparisce. */
.va-nav { display: none; }
@media (max-width: 959.98px) {
    .va-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: var(--club-card); border-top: 1px solid var(--club-linea);
        padding: 6px calc(var(--va-safe-right)) max(8px, var(--va-safe-bottom)) calc(var(--va-safe-left));
    }
    /* Con la chat le caselle sono sei: su un telefono stretto restano ~52px
       l'una, quindi icona e testo scendono di un paio di punti. Le etichette
       che non ci stanno vengono troncate, non mandate a capo. */
    .va-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        text-decoration: none; color: var(--mud-palette-text-secondary);
        font-size: var(--va-t0); font-weight: 600; padding: 2px 1px; min-width: 0;
    }
    .va-nav a .mud-icon-root { font-size: 20px; }
    .va-nav a.attiva { color: var(--mud-palette-primary); }
    .va-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* La voce "Menu" dello staff è un bottone, non un link: stesso aspetto. */
    .va-nav button.va-nav-btn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        background: none; border: 0; cursor: pointer; padding: 2px 1px; min-width: 0;
        color: var(--mud-palette-text-secondary); font-size: var(--va-t0); font-weight: 600;
        font-family: inherit;
    }
    .va-nav button.va-nav-btn .mud-icon-root { font-size: 20px; }
    /* Spazio in fondo alla pagina: la barra non deve coprire l'ultimo contenuto.
       Cresce con la barra dei gesti del telefono. */
    .va-corpo { padding-bottom: calc(var(--va-nav-h) + 20px + var(--va-safe-bottom)) !important; }
    /* Su telefono il drawer si apre solo dalla voce "Menu": niente hamburger. */
    .va-solo-desktop { display: none !important; }
    /* Il menu a icone qui è nascosto, ma MudBlazor lascia comunque al contenuto
       il margine della striscia (56px): la pagina restava stretta e spostata a
       destra. Su schermo piccolo il contenuto prende tutta la larghezza. */
    .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }
    /* …e la striscia di icone sparisce: la navigazione è la barra in basso.
       Quando si apre da "Menu" il drawer perde --closed e torna visibile. */
    .va-drawer.mud-drawer--closed { display: none !important; }
    /* In orizzontale la tacca sta di lato: il contenuto le gira intorno. */
    .va-corpo { padding-left: calc(16px + var(--va-safe-left)); padding-right: calc(16px + var(--va-safe-right)); }
}

/* ---------- Telefono in orizzontale ----------
   Restano poche centinaia di pixel di altezza: barre più basse e testo più
   piccolo, così lo spazio va al contenuto invece che alla navigazione. */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --va-appbar-h: 42px; --va-nav-h: 46px; }
    .va-nav { padding-top: 2px; }
    .va-nav a, .va-nav button.va-nav-btn { font-size: 9px; gap: 0; padding: 1px; }
    .va-nav a .mud-icon-root, .va-nav button.va-nav-btn .mud-icon-root { font-size: 17px; }
}

/* Intestazione area famiglie: il nome dell'atleta è la riga principale. */
.fam-atleta {
    font-size: var(--va-t3); font-weight: 600; letter-spacing: -.01em; cursor: pointer;
    display: inline-flex; align-items: center; gap: 2px; color: inherit; min-width: 0; max-width: 100%;
}
/* Il nome su una riga sola: col selettore e tre icone, sul telefono andava a capo
   tre volte e usciva dalla barra (05/10/2026). */
.fam-testa { min-width: 0; flex: 1 1 auto; line-height: 1.15; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fam-testa .mud-menu, .fam-testa .mud-menu-activator { min-width: 0; max-width: 100%; }
.fam-atleta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Card del prossimo impegno (area famiglie) ---------- */
.va-card { border: 1px solid var(--club-linea); border-radius: var(--va-r-m); overflow: hidden; background: var(--club-card); }
.va-card-top { padding: 9px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.va-data { text-align: center; min-width: 52px; flex: none; }
.va-data .g { font-size: var(--va-t1); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .6; }
.va-data .d { font-size: var(--va-t6); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.va-data .m { font-size: var(--va-t1); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .6; }
.va-riga { display: flex; align-items: center; gap: 6px; font-size: var(--va-t2); opacity: .85; margin-top: 3px; }
.va-riga .mud-icon-root { font-size: 16px; opacity: .7; }
.va-mini { border-left: 3px solid var(--club-linea); background: var(--club-card-2); padding: 9px 12px; border-radius: 0 var(--va-r-s) var(--va-r-s) 0; }
.va-mini + .va-mini { margin-top: 7px; }

/* ---------- Classifica della squadra sul telefono ----------
   La riga del proprio figlio si distingue: in una classifica di venti nomi e'
   l'unica che si sta cercando. */
.va-classifica { padding: 9px 0; border-top: 1px solid var(--club-linea); }
.va-classifica:first-child { border-top: 0; }
.va-classifica.sono-io { background: var(--club-active-bg); border-radius: var(--va-r-s); padding-left: 8px; padding-right: 8px; }
.va-pos {
    min-width: 22px; height: 22px; border-radius: var(--va-r-s); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--club-card-2); font-size: var(--va-t1); font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.va-numeri { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--va-t2); opacity: .85; }
.va-numeri b { font-variant-numeric: tabular-nums; }

/* ---------- Voci di valutazione sul telefono ----------
   Criterio / giudizio / note in tre colonne diventano, strizzate, tre parole
   per riga. Qui il criterio prende tutta la larghezza e il giudizio gli sta a
   destra, come nell'originale ma senza tagliare le parole. */
.va-voce { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.va-voce .g { font-size: var(--va-t2); font-weight: 600; white-space: nowrap; opacity: .9; }

/* Calendario eventi (Heron.MudCalendar): il selettore vista del componente è in
   inglese e in WebAssembly non carica le risorse tradotte, quindi lo nascondiamo:
   la scelta Elenco/Mese/Settimana si fa con i controlli in italiano della pagina.
   Restano visibili le frecce di navigazione e l'etichetta del mese. */
.va-cal .mud-cal-toolbar .mud-button-group-root { display: none; }
/* Le voci del calendario devono poter andare a capo senza tagliare il titolo. */
.va-cal .mud-cal-cell-template { white-space: normal; }

/* Certificato medico non in regola: la riga si tinge appena, quel tanto che
   basta a saltare all'occhio scorrendo l'elenco senza dover leggere la colonna.
   Il bordo a sinistra regge anche dove il colore di sfondo si perde (stampa,
   contrasto alto, daltonismo): non ci si affida al solo colore. */
.va-cert-scaduto  { background: rgba(220, 38, 38, .10); box-shadow: inset 3px 0 0 var(--mud-palette-error); }
.va-cert-vicino   { background: rgba(234, 179, 8, .10);  box-shadow: inset 3px 0 0 var(--mud-palette-warning); }
.va-cert-scaduto:hover, .va-cert-vicino:hover { filter: brightness(1.04); }

/* Presenze: una fila di bottoni invece di una tendina per riga. Si segna una
   squadra intera con un tocco a testa, e il colore dice com'e' andata senza
   leggere. Chi non distingue i colori ha comunque icona e sigla, e il bottone
   scelto resta pieno mentre gli altri no: la differenza non e' solo di tinta. */
.va-presenze { display: flex; gap: 4px; flex-wrap: wrap; }
.va-pres {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: var(--va-r-pill); cursor: pointer;
    border: 1px solid var(--club-linea); background: transparent;
    color: var(--mud-palette-text-secondary); font: inherit; font-size: var(--va-t2); line-height: 1;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.va-pres:hover:not(:disabled) { background: var(--club-card-2); }
.va-pres:disabled { opacity: .45; cursor: default; }
.va-pres .mud-icon-root { font-size: 16px; }
.va-pres-txt { display: none; }
/* Sopra il telefono c'e' spazio per la sigla: sotto restano le sole icone. */
@media (min-width: 900px) { .va-pres-txt { display: inline; } }
.va-pres.ok.on  { background: var(--club-ok-bg);  color: var(--club-ok);  border-color: var(--club-ok); font-weight: 600; }
.va-pres.att.on { background: var(--club-att-bg); color: var(--club-att); border-color: var(--club-att); font-weight: 600; }
.va-pres.no.on  { background: var(--club-no-bg);  color: var(--club-no);  border-color: var(--club-no); font-weight: 600; }

/* Catalogo compiti: riquadri grandi abbastanza da centrarli col pollice. */
.va-compiti-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.va-compito-voce {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: var(--va-r-s); cursor: pointer; text-align: center;
    border: 1px solid var(--club-linea); background: transparent;
    color: var(--mud-palette-text-primary); font: inherit; font-size: var(--va-t2); line-height: 1.2;
}
.va-compito-voce:hover { background: var(--club-card-2); }
.va-compito-voce .mud-icon-root { font-size: 26px; opacity: .75; }
.va-compito-voce.on {
    border-color: var(--mud-palette-primary); background: var(--club-card-2); font-weight: 600;
}
.va-compito-voce.on .mud-icon-root { opacity: 1; color: var(--mud-palette-primary); }

/* Striscia degli eventi vicini in testa alla scheda: da mercoledi' a domenica
   senza passare dall'elenco. Scorre in orizzontale sul telefono, dove le
   frecce da sole non basterebbero a far capire che ce n'e' anche altri. */
.va-vicini { display: flex; align-items: center; gap: 4px; }
.va-vicini-scroll {
    display: flex; gap: 8px; overflow-x: auto; flex: 1;
    scrollbar-width: thin; padding-bottom: 2px;
}
.va-vicino {
    flex: 0 0 auto; min-width: 128px; max-width: 210px;
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px; border-radius: var(--va-r-s); text-decoration: none;
    border: 1px solid var(--club-linea); background: var(--club-card);
    color: var(--mud-palette-text-primary);
}
.va-vicino:hover { background: var(--club-card-2); }
.va-vicino.on { border-color: var(--mud-palette-primary); border-width: 2px; padding: 7px 11px; }
.va-vicino-data { font-size: var(--va-t1); text-transform: uppercase; letter-spacing: .4px; opacity: .7; }
.va-vicino-tit { font-size: var(--va-t2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-vicino-ris { font-size: var(--va-t2); font-weight: 600; color: var(--mud-palette-primary); }

/* Tabellone: noi, il punteggio, loro — come si legge a bordo campo. */
.va-tabellone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.va-squadra { font-weight: 600; font-size: .95rem; opacity: .95; max-width: 190px; }
.va-punteggio { font-size: 2.4rem; font-weight: 800; letter-spacing: 2px; line-height: 1; }
/* Il punteggio come pulsante: si tocca per correggerlo. Senza cornice, il
   tabellone deve restare un tabellone; la matita dice che si può. */
.va-punteggio-tocca {
    font-family: inherit; color: inherit; background: none; border: 0; padding: 4px 6px;
    border-radius: var(--va-r-s, 8px); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.va-punteggio-tocca:hover { background: rgba(255, 255, 255, .12); }
.va-punteggio-tocca:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.va-punteggio-matita { opacity: .7; font-size: 1.1rem !important; }
/* Le azioni sulla fascia scura: bianche piene in tutti e due i temi, perché
   la fascia è scura in tutti e due. */
.va-tabellone .va-tabellone-azione { background: #fff; color: #1d3272; font-weight: 700; }
.va-tabellone .va-tabellone-azione:hover { background: #eef1f8; }

/* Primo passo della creazione: che cosa stai organizzando. Riquadri grandi,
   colore del tipo, icona indovinata dal nome se nessuno ne ha scelta una. */
.va-tipi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.va-tipo {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 10px; border-radius: var(--va-r-m); cursor: pointer; text-align: center;
    border: 1px solid var(--club-linea); background: var(--club-card);
    color: var(--mud-palette-text-primary); font: inherit;
}
.va-tipo:hover { background: var(--club-card-2); border-color: var(--mud-palette-primary); }
.va-tipo-icona {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.va-tipo-icona .mud-icon-root { font-size: 24px; }
.va-tipo-nome { font-size: var(--va-t2); font-weight: 600; }

/* Indice delle sezioni del form: la scheda e' lunga, e scorrerla per trovare
   "chi convocare" o "quando aprono le risposte" e' il momento in cui ci si
   perde. Sul telefono scorre in orizzontale. */
.va-indice { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.va-indice button {
    flex: 0 0 auto; padding: 6px 12px; border-radius: var(--va-r-pill); text-decoration: none;
    font-size: var(--va-t2); border: 1px solid var(--club-linea);
    color: var(--mud-palette-text-secondary); background: transparent;
    font-family: inherit; cursor: pointer;
}
.va-indice button:hover { background: var(--club-card-2); color: var(--mud-palette-text-primary); }

/* Riquadri delle immagini di squadra: mostrano quello che c'e' e, quando non
   c'e' niente, restano un rettangolo tratteggiato invece di un buco. */
.va-img-box {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; border-radius: var(--va-r-m); overflow: hidden;
    border: 1px dashed var(--club-linea); background: var(--club-card-2);
}
.va-img-box.va-img-larga { aspect-ratio: 16 / 6; }
.va-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Le ultime due misure che sfuggivano ----------
   MudBlazor scrive di suo l'etichetta dei pulsanti in rem (0.8125rem, che sulla
   radice a 15px fa 12,19) e ignora la voce Button del tema quando la variante
   ha una sua regola piu' specifica. Qui la si riporta sulla scala: e' l'ultimo
   numero con la virgola rimasto nell'app.

   La schermata di caricamento (#app-splash) resta FUORI di proposito: font
   display a 26px con la spaziatura larga e' una scelta di marca, non disordine,
   e le sue regole stanno in virtus.css, condiviso con gli altri tre portali. */
.mud-button-root .mud-button-label { font-size: var(--va-t2); }

/* MudBlazor scrive di suo il peso 500 sulle voci del menu laterale: e' il
   quarto peso, quello che nessuno ha scelto. Sulla scala ce ne sono tre. */
.mud-nav-link-text { font-weight: 600; }

/* ---------------------------------------------------------------------------
   IL DITO NON È UN MOUSE

   Misurato il 2026-09-10 sulla pagina Staff a 375px: su 103 comandi, 9 stavano
   sotto i 24px e 91 fra i 24 e i 31. Il minimo di WCAG 2.2 è 24, Apple consiglia
   44, Android 48. Le × sulle pastiglie delle squadre stavano a 18px — e lì
   sbagliare bersaglio vuol dire togliere una persona dalla squadra.
   Rimisurato l'11/09 con `pointer: coarse` vero, dopo le schede: 59 comandi,
   0 fra 24 e 31, 52 fra 32 e 43, 1 sopra 44; sotto i 24 restano solo 6 link di
   testo (i nomi, alti 23px), che sono testo e non bottoni.

   Si allargano SOLO dove si tocca con le dita (`pointer: coarse`): col mouse i
   bersagli piccoli vanno benissimo e allargarli farebbe solo pagine più lunghe.
   E si allarga con il PADDING, non con un'area invisibile sovrapposta: due aree
   da 44px accanto si accavallerebbero, e il tocco finirebbe sul comando
   sbagliato — peggio del bersaglio piccolo. Col padding i comandi si spingono
   via a vicenda e restano distinti.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    /* 20px di icona + 12+12 di padding = 44. */
    .mud-icon-button.mud-icon-button-size-small { padding: 12px; }

    /* La × della pastiglia, che MudBlazor fa 18px (.mud-chip .mud-chip-close-button
       nel suo foglio). Stessa specificità, questo foglio viene dopo: vince.
       Il 10/09 avevo scritto qui che NON funzionava e restava a 20px: era la
       misura sbagliata, non la regola — presa con il riquadro del browser che
       non riportava `pointer: coarse`. Rimisurato l'11/09 con la condizione
       vera: 32×32, su tutte le pastiglie della pagina Staff. */
    .mud-chip .mud-chip-close-button {
        width: 32px;
        height: 32px;
        padding: 0;
        margin-inline-start: 2px;
    }

    /* Le pastiglie su cui si preme (quelle con un'azione) e i bottoni piccoli:
       32 non è 44, ma sono bersagli larghi — è l'altezza che manca, non la
       larghezza, e su una riga di tabella 44 di altezza li farebbe esplodere. */
    .mud-chip { min-height: 32px; }
    .mud-button-root.mud-button-filled-size-small,
    .mud-button-root.mud-button-outlined-size-small,
    .mud-button-root.mud-button-text-size-small { min-height: 36px; }

    /* Le caselle delle presenze: si toccano a bordo campo, spesso in piedi e
       con una mano sola. Qui i 44 pieni li vogliamo. */
    .va-pres { min-height: 44px; min-width: 44px; }
}

/* ---------- La mappa per lo spillo ----------
   Il riquadro ha un'altezza dichiarata perche' Leaflet misura il contenitore:
   senza, resta alto zero e non si vede niente. */
.va-mappa {
    height: 320px;
    border-radius: var(--va-r-s);
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}
@media (max-width: 599.98px) { .va-mappa { height: 260px; } }

/* Lo spillo: disegnato qui invece di caricare l'immagine di Leaflet, cosi' segue
   il colore del portale ed e' una cosa in meno da tenere allineata. */
.va-spillo {
    width: 26px; height: 26px;
    background: var(--mud-palette-primary);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* Il riquadro della mappa sta sopra al resto della scheda, non sotto: e' la cosa
   che si sta guardando mentre si sposta il punto. */
.leaflet-container { font: inherit; }

/* ---------- Foto della rosa ----------
   La squadra vista come una pagina di figurine: chi la foto ce l'ha si
   riconosce, chi non ce l'ha e' un riquadro tratteggiato con le iniziali. Non
   serve leggere un elenco per sapere quanti ne mancano, si vede. */
.va-foto-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
}
/* Sul telefono tre per riga: quattro rendono il viso piu' piccolo del pollice
   che deve toccarlo. */
@media (max-width: 599.98px) {
    .va-foto-griglia { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

.va-foto-tessera {
    border: 1px solid var(--club-linea);
    border-radius: var(--va-r-m);
    background: var(--club-card);
    overflow: hidden;
    padding: 0 0 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease;
}
.va-foto-tessera:hover { border-color: var(--mud-palette-primary); }
.va-foto-tessera:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Tratteggiato vuol dire «qui manca ancora qualcosa», ed e' la stessa cosa che
   dice un contorno tratteggiato ovunque: da riempire. */
.va-foto-tessera.va-manca { border-style: dashed; }
/* Chi tocca adesso. Non e' un avviso, e' un segnaposto nella fila. */
.va-foto-tessera.va-tocca { border-color: var(--mud-palette-primary); border-width: 2px; }

.va-foto-quadro {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--club-card-2);
    display: flex; align-items: center; justify-content: center;
}
.va-foto-quadro img { width: 100%; height: 100%; object-fit: cover; display: block; }
.va-foto-iniziali { font-size: 1.4rem; font-weight: 600; opacity: .35; letter-spacing: .04em; }

.va-foto-numero {
    position: absolute; left: 6px; top: 6px;
    min-width: 21px; height: 21px; padding: 0 5px;
    border-radius: var(--va-r-pill);
    background: rgba(0, 0, 0, .55); color: #fff;
    font-size: .7rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.va-foto-segno {
    position: absolute; right: 6px; top: 6px;
    width: 21px; height: 21px; border-radius: var(--va-r-pill);
    display: flex; align-items: center; justify-content: center;
}
.va-foto-nome {
    font-size: .78rem; line-height: 1.25; padding: 8px 6px 0;
    overflow-wrap: anywhere;
}

/* ---------- Il riquadro dello scatto ----------
   Quadrato perche' quadrata esce: quello che si vede qui dentro e' esattamente
   il ritaglio che viene salvato. touch-action serve o il dito, invece di
   spostare la foto, fa scorrere la pagina sotto. */
.va-ritaglio {
    width: min(320px, 76vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: var(--va-r-m);
    overflow: hidden;
    background: var(--club-card-2);
    border: 1px solid var(--club-linea);
    touch-action: none;
    cursor: grab;
}
.va-ritaglio:active { cursor: grabbing; }
.va-ritaglio canvas { display: block; width: 100%; height: 100%; }

/* Il pulsante «a chi tocca» resta in fondo allo schermo mentre si scorre: con
   venticinque riquadri, un pulsante in cima si perde dopo la seconda riga. */
.va-foto-barra {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 12px 0 8px;
    margin-top: 12px;
    background: linear-gradient(to top, var(--mud-palette-background) 65%, transparent);
}
/* Sotto i 960px in fondo allo schermo c'e' gia' la barra di navigazione: senza
   questo, il pulsante si ferma esattamente dietro, e non si vede mai. */
@media (max-width: 959.98px) {
    .va-foto-barra { bottom: calc(var(--va-nav-h) + var(--va-safe-bottom)); }
}

/* ---------- La faccia accanto al nome ----------
   Stessa misura ovunque: se in un elenco è di 32px e in un altro di 40, la
   colonna dei nomi balla e si nota. Le iniziali stanno nello stesso cerchio
   della foto, così chi non ce l'ha non lascia un buco. */
.va-faccia {
    flex: 0 0 auto;
    background: var(--club-card-2);
    border: 1px solid var(--club-linea);
}
.va-faccia img { width: 100%; height: 100%; object-fit: cover; }
.va-faccia-iniziali {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .55;
}
.mud-avatar-medium .va-faccia-iniziali { font-size: .95rem; }

/* Chi non ha la foto ha almeno un colore suo (vedi Faccia.razor): con zero foto
   caricate, venticinque righe erano venticinque cerchi grigi uguali. Il fondo
   colorato arriva come stile in linea, qui c'e' solo quello che ne consegue —
   le lettere in bianco, piene, perche' sopra una tinta il 55% di opacita' non
   si legge piu'. */
.va-faccia-tinta .va-faccia-iniziali { color: #fff; opacity: 1; letter-spacing: .04em; }

/* =========================================================================
   Grafica 2026-09, presa dal nuovo SportEasy (24/09/2026) - la parte del Club
   Barra laterale, barra in alto chiara, schede, intestazioni di scheda e
   contatori stanno in Shared.Ui/grafica/grafica.css, comune ai quattro
   portali. Qui resta quello che ha solo il Club: la pillola della squadra,
   il fine settimana, i filtri degli eventi, la panoramica.
   ========================================================================= */

/* Il selettore di squadra: una pillola. Nella barra laterale e' bordata e
   chiara su scuro; sul telefono sta nella barra blu in alto. */
.va-contesto-pill {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; max-width: 100%;
    padding: 8px 10px; border-radius: var(--va-r-s); font-weight: 700; font-size: var(--va-t3);
}
.va-contesto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.va-contesto-punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.va-contesto-stemma { border-radius: 50%; flex: 0 0 auto; }
.va-contesto-side { display: block; margin: 0 12px 8px; }
.va-contesto-side .mud-menu-activator { width: 100%; }
.va-contesto-side .va-contesto-pill {
    width: 100%; justify-content: flex-start; color: #fff;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
}
.va-contesto-side .va-contesto-pill .mud-icon-root { margin-left: auto; }
.va-contesto-barra { margin-left: 4px; min-width: 0; }
.va-contesto-barra .va-contesto-pill { padding: 4px 8px; font-size: var(--va-t2); background: rgba(255, 255, 255, .14); color: inherit; }
.va-contesto-barra .va-contesto-stemma { display: none; }

/* Schermo largo: la pillola nella barra in alto non serve, e' gia' nella
   barra laterale. */
@media (min-width: 960px) { .va-contesto-barra { display: none !important; } }
/* Nella vista famiglia la pillola sta sopra il nome dell'atleta, piccola, al
   posto del sopratitolo; c'e' anche da PC, dove la barra laterale non ce l'ha. */
.va-contesto-famiglia { display: flex; justify-content: flex-start; align-self: flex-start; width: auto; min-width: 0; max-width: 100%; }
.va-contesto-famiglia .mud-menu-activator { min-width: 0; max-width: 100%; }
.va-contesto-famiglia .va-contesto-pill {
    padding: 1px 6px; gap: 4px; font-size: var(--va-t1); font-weight: 700;
    background: rgba(255, 255, 255, .16); color: inherit; border-radius: 999px;
}
.va-contesto-famiglia .va-contesto-pill .mud-icon-root { font-size: 15px; }
.va-contesto-famiglia .va-contesto-punto { width: 8px; height: 8px; }
.va-contesto-famiglia .va-contesto-stemma { display: none; }
/* Telefono: niente pillola nella barra laterale (c'e' gia' in alto). */
@media (max-width: 959.98px) {
    .va-contesto-side { display: none; }
}


/* Eventi del fine settimana (FineSettimana): griglia a ore, blocchi per squadra. */
.va-fs-scorri { overflow-x: auto; }
.va-fs-griglia { position: relative; }
.va-fs-ora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--club-linea); height: 0; }
.va-fs-ora span { position: absolute; top: -8px; left: 0; width: 40px; font-size: var(--va-t1); color: var(--mud-palette-text-secondary);
    background: var(--club-card); font-variant-numeric: tabular-nums; }
.va-fs-blocco {
    position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--va-tinta) 13%, var(--club-card));
    border: 1px solid color-mix(in srgb, var(--va-tinta) 35%, transparent);
    border-left: 4px solid var(--va-tinta);
    transition: transform .12s ease, box-shadow .12s ease;
}
.va-fs-blocco:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 32, 74, .12); z-index: 2; }
.va-fs-blocco b { font-size: var(--va-t2); color: color-mix(in srgb, var(--va-tinta) 75%, var(--mud-palette-text-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-fs-blocco span { font-size: var(--va-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-fs-blocco small { font-size: var(--va-t1); color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-fs-tutto {
    padding: 6px 10px; border-radius: var(--va-r-pill); font-size: var(--va-t2); text-decoration: none; color: inherit;
    background: color-mix(in srgb, var(--va-tinta) 13%, var(--club-card)); border-left: 4px solid var(--va-tinta);
}

/* ---------- Eventi: la barra in alto e il menu dei filtri (Grafica 2026-09) ----------
   Periodo, ricerca e gruppo a sinistra; filtri, stampa e vista a destra, su
   una riga sola: tabella e calendario restano a tutta larghezza. Nel menu i
   tipi e le squadre col loro colore e il conteggio: il quadratino pieno vuol
   dire acceso, spento resta solo il contorno e la riga si sbiadisce - non ci
   si affida al solo colore. */
.va-eventi-barra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.va-eventi-barra .va-eventi-cerca { width: 280px; max-width: 100%; flex: 0 1 280px; }
.va-eventi-barra .va-eventi-gruppo { width: 200px; flex: 0 0 200px; }
.va-eventi-barra .mud-input-control { margin-top: 0; }
.va-eventi-filtri { display: flex; flex-direction: column; gap: 2px; min-width: 250px; max-height: 70vh; overflow-y: auto; padding: 4px 12px 12px; }
@media (max-width: 599.98px) { .va-eventi-barra .va-eventi-cerca { flex: 1 1 100%; } }
.va-filtri-testa { display: flex; align-items: baseline; justify-content: space-between;
    margin: 14px 2px 4px; font-size: var(--va-t2); font-weight: 700; letter-spacing: .02em; opacity: .8; }
.va-filtri-tutti { background: none; border: 0; padding: 0; font: inherit; font-weight: 500;
    color: var(--mud-palette-primary); cursor: pointer; }
.va-filtro-voce { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: 0; border-radius: 8px; padding: 6px 6px; font: inherit; color: inherit; cursor: pointer; }
.va-filtro-voce:hover { background: var(--mud-palette-action-default-hover); }
.va-filtro-voce:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.va-filtro-segno { flex: none; width: 12px; height: 12px; border-radius: 50%;
    background: var(--va-tinta); border: 2px solid var(--va-tinta); }
.va-filtro-segno.quadro { border-radius: 3px; }
.va-filtro-voce.spento { opacity: .5; }
.va-filtro-voce.spento .va-filtro-segno { background: transparent; }
.va-filtro-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.va-filtro-conta { flex: none; font-size: var(--va-t2); font-variant-numeric: tabular-nums; opacity: .7; }

/* Campionati nel calendario (01/10/2026): la pastiglia col colore del
   campionato, il filtro sulla barra, la partita casa – ospite e la voce del
   mese. Il colore arriva in --va-tinta; lo sfondo e' una sua velatura, cosi'
   il testo resta leggibile col tema chiaro e con quello scuro. */
.va-pastiglia-camp, .va-camp-filtro { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 10px 2px 7px; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--va-tinta) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--va-tinta) 60%, transparent); }
.va-pastiglia-camp .mud-icon-root, .va-camp-filtro .mud-icon-root { color: var(--va-tinta); font-size: 1rem; }
.va-camp-filtro { cursor: pointer; padding-block: 4px; background: transparent; }
.va-camp-filtro:hover { background: color-mix(in srgb, var(--va-tinta) 12%, transparent); }
.va-camp-filtro:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.va-camp-filtro.acceso { background: var(--va-tinta); border-color: var(--va-tinta); color: #fff; }
.va-camp-filtro.acceso .mud-icon-root { color: #fff; }
.va-camp-conta { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 2px; }
/* Ogni squadra resta intera, e la colonna ha una larghezza minima: stretta, le
   due squadre finivano una sotto l'altra col risultato in mezzo, e sembravano
   tre righe diverse. Se non ci sta, va a capo solo l'ospite. */
.va-partita { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; white-space: nowrap; font-weight: 500; }
.va-partita .noi { font-weight: 700; color: var(--mud-palette-primary); }
.va-partita-ris { display: inline-block; min-width: 44px; padding: 0 8px; border-radius: 6px; text-align: center;
    font-weight: 700; font-variant-numeric: tabular-nums; background: var(--mud-palette-background-gray); }
.va-partita-sotto { margin-top: 2px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.va-cal-voce { padding: 2px 5px; font-size: .78rem; line-height: 1.25; cursor: pointer; border-radius: 3px;
    border-left: 3px solid var(--va-tinta); background: color-mix(in srgb, var(--va-tinta) 12%, transparent); }

.va-colori-camp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.va-colore { width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--va-tinta); border: 2px solid var(--mud-palette-surface); box-shadow: 0 0 0 1px var(--mud-palette-lines-default); }
.va-colore.scelto { box-shadow: 0 0 0 2px var(--mud-palette-text-primary); }
.va-colore-auto { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
    font: inherit; font-size: .85rem; cursor: pointer; color: var(--mud-palette-text-primary);
    background: transparent; border: 1px solid var(--mud-palette-lines-default); }
.va-colore-auto.scelto { border: 2px solid var(--mud-palette-text-primary); font-weight: 600; }
.va-colore-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--va-tinta); }
.va-colore-libero { width: 36px; height: 30px; padding: 0 2px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px; background: transparent; cursor: pointer; }
.va-colore:focus-visible, .va-colore-auto:focus-visible, .va-colore-libero:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Le impostazioni dell'evento come in SportEasy (01/10/2026): che cosa e' a
   sinistra, il comando a destra, allineati; «→» per quelle che dipendono da
   quella sopra. */
.va-imp-riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.va-imp-sotto { padding-left: 14px; }
.va-imp-testo { min-width: 0; flex: 1; font-size: .92rem; }
.va-imp-nota { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.va-imp-riga .mud-switch { margin: 0; }
.va-scelte-chip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.va-chip-scelta { padding: 5px 14px; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer;
    color: var(--mud-palette-text-primary); background: transparent; border: 1px solid var(--mud-palette-lines-default); }
.va-chip-scelta:hover { background: var(--mud-palette-action-default-hover); }
.va-chip-scelta.sel { color: #fff; background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.va-chip-scelta:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (max-width: 599.98px) { .va-imp-riga { flex-wrap: wrap; } }

/* Anteprima dell'evento dal calendario. */
.va-anteprima-righe { display: flex; flex-direction: column; gap: 10px; }
.va-anteprima-righe > div { display: flex; align-items: center; gap: 10px; }
.va-anteprima-righe > div > .mud-icon-root { opacity: .6; flex: none; }

/* Stampa del calendario: resta solo quello che si vede, senza menu e filtri. */
@media print {
    .club-drawer, .mud-appbar, .va-eventi-barra, .va-cal .mud-cal-toolbar .mud-icon-button { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .va-cal, .va-cal * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Dettaglio evento: foglio del calendario e risposte in colonne ---------- */
.va-data-foglio { flex: none; display: flex; flex-direction: column; align-items: center; width: 64px;
    background: #fff; color: #1B2A4A; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.va-data-foglio .g { width: 100%; text-align: center; background: rgba(27,42,74,.10); font-size: .68rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.va-data-foglio .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.va-data-foglio .m { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; }
.va-banner-info { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 600; font-size: .9rem; opacity: .96; }
.va-banner-info > span { display: inline-flex; align-items: center; gap: 5px; }
.va-banner-info .mud-icon-root { font-size: 1.05rem; opacity: .85; }
.va-banner-ora { background: rgba(255,255,255,.16); padding: 1px 10px; border-radius: var(--va-r-pill); }
.va-banner-stato { background: rgba(255,255,255,.22); padding: 1px 10px; border-radius: var(--va-r-pill); }
@media (max-width: 599.98px) { .va-data-foglio { width: 52px; } .va-data-foglio .n { font-size: 1.35rem; } }

.va-rsvp-colonne { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.va-rsvp-col { border-radius: 12px; background: color-mix(in srgb, var(--va-tinta) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--va-tinta) 22%, transparent); padding: 0 0 6px; overflow: hidden; }
.va-rsvp-testa { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; margin-bottom: 4px;
    background: color-mix(in srgb, var(--va-tinta) 16%, transparent); color: var(--va-tinta); font-weight: 700; font-size: .85rem; }
.va-rsvp-persona { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: .85rem; min-width: 0; }
.va-rsvp-persona > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-rsvp-vuoto { padding: 3px 10px; opacity: .5; }

/* ---------- Squadre: scheda con fascia e volti ---------- */
.va-squadra-scheda { overflow: hidden; border-radius: var(--va-r-m) !important; }
.va-squadra-fascia { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; text-decoration: none;
    background: linear-gradient(115deg, var(--va-tinta), color-mix(in srgb, var(--va-tinta) 62%, #0b1530)); }
.va-squadra-fascia:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.va-squadra-sigla { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,.2); font-weight: 800; font-size: 1rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.va-squadra-titoli { display: flex; flex-direction: column; min-width: 0; }
.va-squadra-titoli b { font-size: 1.1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-squadra-titoli small { opacity: .85; }
.va-volti { display: flex; align-items: center; padding-left: 6px; }
.va-volti > .va-faccia { margin-left: -6px; box-shadow: 0 0 0 2px var(--mud-palette-surface); border-radius: 50%; }
.va-volti-altri { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 8px; margin-left: 8px; border-radius: 15px;
    background: var(--mud-palette-background-gray); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Giocatori: prima colonna ferma, e la vista a schede ---------- */
.va-tabella-fissa th:first-child, .va-tabella-fissa td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); }
.va-tabella-fissa th:first-child { z-index: 2; }
.va-tabella-fissa tr.va-cert-scaduto td:first-child, .va-tabella-fissa tr.va-cert-vicino td:first-child { background: var(--mud-palette-surface); }
.va-membri-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.va-membro-scheda { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 18px 12px 14px; border-radius: var(--va-r-m); background: var(--mud-palette-surface); color: inherit; text-decoration: none;
    border: 1px solid var(--mud-palette-lines-default); transition: box-shadow .15s, transform .15s; }
.va-membro-scheda:hover { box-shadow: 0 6px 18px rgba(27,42,74,.12); transform: translateY(-1px); }
.va-membro-scheda:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.va-membro-nome { font-size: .95rem; line-height: 1.25; }
.va-membro-riga { font-size: var(--va-t2); opacity: .72; }
.va-membro-squadra { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: var(--va-r-pill); color: #fff; background: var(--va-tinta); }
.va-membro-maglia { position: absolute; top: 10px; right: 12px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .va-membro-scheda { transition: none; } .va-membro-scheda:hover { transform: none; } }

/* ---------- Panoramica di squadra ---------- */
:root { --va-vinta: #2E7D32; --va-pari: #9AA3B5; --va-persa: #C62828; }
.va-pan-scheda { height: 100%; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--va-r-m) !important; }
.va-pan-evento { display: flex; align-items: center; gap: 14px; padding: 10px; margin-top: 4px; border-radius: 12px;
    color: inherit; text-decoration: none; background: color-mix(in srgb, var(--va-tinta) 7%, transparent); }
.va-pan-evento:hover { background: color-mix(in srgb, var(--va-tinta) 13%, transparent); }
.va-pan-evento:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.va-data-foglio.va-data-piccola { width: 52px; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.va-data-foglio.va-data-piccola .n { font-size: 1.35rem; }
.va-pan-evento-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.va-pan-evento-testo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-pan-evento-testo small { opacity: .75; }
.va-pan-tipo-chip { align-self: flex-start; font-size: .7rem; font-weight: 700; color: #fff; background: var(--va-tinta);
    padding: 0 8px; border-radius: var(--va-r-pill); margin-bottom: 2px; }
.va-pan-ris { flex: none; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.va-pan-ris.v { color: var(--va-vinta); } .va-pan-ris.p { color: var(--va-persa); }
.va-pan-stato { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: .9rem; }
.va-pan-msg { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .9rem; }
.va-pan-msg:last-child { border-bottom: 0; }
.va-pan-quando { font-size: var(--va-t2); opacity: .6; white-space: nowrap; }
.va-pan-testo { margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.va-pan-ciambelle { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 8px; }
.va-pan-ciambella { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.va-ciambella { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; }
.va-ciambella > span { width: 70px; height: 70px; border-radius: 50%; background: var(--mud-palette-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.va-ciambella b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.va-ciambella small { font-size: .68rem; opacity: .65; }
.va-pan-tipo { font-weight: 700; font-size: .9rem; }
.va-pan-vnp { display: flex; gap: 8px; font-size: var(--va-t2); font-weight: 700; font-variant-numeric: tabular-nums; }
.va-pan-vnp .v { color: var(--va-vinta); } .va-pan-vnp .n { opacity: .7; } .va-pan-vnp .p { color: var(--va-persa); }
.club-dark { --va-vinta: #5CC46A; --va-pari: #7F8AA3; --va-persa: #EF6B6B; }
.va-contesto-pill.in-attesa { min-width: 120px; opacity: .45; }
/* Il nome non va a capo: «Brambilla / Giacomo» su due righe, con le icone su
   una terza, faceva tre righe per persona. */
.va-tabella-fissa td:first-child { min-width: 240px; }
.va-tabella-fissa td:first-child .mud-link { white-space: nowrap; }
/* Nella fascia colorata dell'evento i tre pulsanti di navigazione avevano il
   testo scuro su fondo scuro: qui diventano bianchi su vetro. */
.va-banner-info .nav-luogo .nav-app { background: rgba(255,255,255,.9) !important; color: #1B2A4A !important; }
.va-banner-info .nav-luogo .nav-nome { color: #fff !important; }
/* Sul telefono la scritta «ASD VIRTUS ADDA · Club» nella barra blu schiacciava
   la pillola fino a «2.»: la pillola dice gia' squadra o club, lo stemma resta. */
@media (max-width: 599.98px) { .club-appbar .club-wordmark { display: none; } .va-contesto-barra .va-contesto-nome { max-width: 46vw; } }
@media (max-width: 599.98px) { .va-banner-testa { align-items: flex-start !important; gap: 12px !important; } }

/* Le scelte di un gruppo di radio una sotto l'altra: la regola di MudBlazor sul
   gruppo e' piu' specifica della nostra, quindi serve !important. */
.va-radio-colonna .mud-radio-group, .mud-radio-group.va-radio-colonna { flex-direction: column !important; align-items: flex-start !important; }

/* ---------- Filtri sul telefono: Giocatori, Esterni, Presenze, Statistiche (27/09/2026) ----------
   Le larghezze massime pensate per il computer lasciavano la ricerca a meta'
   riga e le tendine sparse: sotto la soglia la ricerca prende la riga intera e
   le tendine due per riga. Gli !important battono gli Style in linea. */
@media (max-width: 959.98px) {
    /* MudTextField mette lo Style sul .mud-input interno, non sul contenitore. */
    .va-filtri .va-cerca { flex: 1 1 100%; max-width: none !important; }
    .va-filtri .va-cerca .mud-input { max-width: none !important; }
    .va-filtri .mud-select { flex: 1 1 calc(50% - 12px); max-width: none !important; min-width: 0; }
}

/* ---------- Schede (MudTabs) sul telefono: vanno a capo (27/09/2026) ----------
   Larghe 160 pixel fisse, su 360 ne stavano una e mezza: la seconda tagliata a
   meta' parola («RO…», «CON…», «SP…») fra le frecce di scorrimento, e sembrava
   un guasto. Sotto la soglia le schede prendono la loro larghezza e vanno a
   capo, tutte visibili; senza frecce e senza la lineetta (che MudBlazor calcola
   per una riga sola) la scheda attiva si riconosce dallo sfondo. Provato sul
   telefono vero: toccando una scheda si apre. */
@media (max-width: 959.98px) {
    .mud-tabs-tabbar-inner > .mud-tabs-scroll-button { display: none !important; }
    .mud-tabs-tabbar-wrapper { flex-wrap: wrap !important; transform: none !important; width: 100% !important; gap: 4px; padding: 8px; }
    .mud-tab-slider { display: none !important; }
    .mud-tabs .mud-tab { min-width: 0 !important; padding: 4px 10px !important; min-height: 32px; border-radius: 999px;
        letter-spacing: 0 !important; text-transform: none !important; font-size: .88rem !important; }
    .mud-tabs .mud-tab.mud-tab-active { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
    .mud-tabs .mud-tab .mud-icon-root { font-size: 1.1rem !important; margin-right: 6px !important; }
}

/* L'anteprima del riepilogo settimanale: l'email in una cornice alta quanto
   serve per leggerla senza doppio scorrimento. */
.va-riepilogo-email { width: 100%; height: min(70vh, 720px); border: 1px solid var(--club-linea); border-radius: var(--va-r-s); background: #fff; }
.va-riepilogo-testo { white-space: pre-wrap; font-size: var(--va-t2); background: var(--club-card-2); padding: 12px; border-radius: var(--va-r-s); }

/* «Chi convochi» nella scheda dell'evento (24/10/2026): la rosa in colonne,
   una per riga sul telefono. */
.va-convoca-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }

/* Sotto al punteggio: i parziali dei tempi, e i gol quando il risultato conta i tempi vinti. */
.va-tabellone-parziali { text-align: right; font-size: .9rem; font-weight: 600; opacity: .85; margin-top: 4px; }

/* I marcatori nella finestra del risultato (24/10/2026): una riga per ragazzo,
   − n +, in colonne sul computer e una per riga sul telefono. */
.va-marcatori { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
.va-marcatore { display: flex; align-items: center; gap: 2px; }
.va-marcatore .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--va-t2); }
.va-marcatore .gol { min-width: 18px; text-align: center; font-weight: 700; opacity: .45; }
.va-marcatore.on .gol { opacity: 1; color: var(--mud-palette-success); }

/* Menzioni nella chat (24/10/2026): i suggerimenti sotto il campo, e la
   citazione evidenziata nel messaggio — la propria di piu'. */
.va-suggerimenti { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--va-r-s, 8px); overflow: hidden; }
.va-suggerimenti button { text-align: left; padding: 8px 12px; background: var(--mud-palette-surface); border: 0; border-bottom: 1px solid var(--mud-palette-lines-default); cursor: pointer; font: inherit; color: inherit; }
.va-suggerimenti button:last-child { border-bottom: 0; }
.va-suggerimenti button:hover, .va-suggerimenti button:focus-visible { background: var(--mud-palette-action-default-hover); outline: none; }
.va-suggerimenti span { opacity: .7; font-size: var(--va-t2); }
.va-menzione { color: var(--mud-palette-primary); }
.va-menzione.mia { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); border-radius: 4px; padding: 0 3px; }

/* Il numero dei messaggi da leggere sulla voce «Chat» (25/10/2026): una pastiglia
   rossa sull'icona nella barra in basso, accanto al testo nel menu laterale. */
.va-nav a { position: relative; }
.va-nav a span.va-nav-num {
    position: absolute; top: 0; left: 50%; margin-left: 4px; max-width: none;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--mud-palette-error); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.va-menu-num {
    display: inline-block; margin-left: 8px; min-width: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--mud-palette-error); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
/* «Da leggere»: nome e anteprima su una riga, troncati. */
.va-una-riga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }