/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9if1nzqz1e],
.components-reconnect-repeated-attempt-visible[b-9if1nzqz1e],
.components-reconnect-failed-visible[b-9if1nzqz1e],
.components-pause-visible[b-9if1nzqz1e],
.components-resume-failed-visible[b-9if1nzqz1e],
.components-rejoining-animation[b-9if1nzqz1e] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-retrying[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-failed[b-9if1nzqz1e],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9if1nzqz1e] {
    display: block;
}


#components-reconnect-modal[b-9if1nzqz1e] {
    background-color: var(--card);
    color: var(--text);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 22vh auto;
    padding: 2.2rem 2rem 1.8rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 17, 14, .28);
    font-family: var(--sans);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9if1nzqz1e 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9if1nzqz1e 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9if1nzqz1e 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9if1nzqz1e]::backdrop {
    background-color: rgba(20, 17, 14, 0.45);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-9if1nzqz1e 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9if1nzqz1e {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9if1nzqz1e {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9if1nzqz1e {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9if1nzqz1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9if1nzqz1e] {
    margin: 0;
    text-align: center;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--text);
}

#components-reconnect-modal button[b-9if1nzqz1e] {
    border: 0;
    background-color: var(--accent);
    color: var(--accent-on);
    padding: .55rem 1.3rem;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

    #components-reconnect-modal button:hover[b-9if1nzqz1e] {
        filter: brightness(1.08);
    }

    #components-reconnect-modal button:active[b-9if1nzqz1e] {
        filter: none;
    }

/* «Ricarica la pagina»: sempre visibile, in ogni fase (non ha le classi components-*-visible che
   il CSS base nasconde). Un link discreto: l'uscita che funziona anche a circuito morto. */
.components-reconnect-reload[b-9if1nzqz1e] {
    color: var(--accent-text);
    font-size: 0.85rem;
    text-decoration: underline;
}

.components-rejoining-animation[b-9if1nzqz1e] {
    position: relative;
    width: 80px;
    height: 80px;
}

/* Il marchio al centro degli anelli: è Budopass che si ricollega, non un browser qualunque. */
.components-rejoining-animation[b-9if1nzqz1e]::after {
    content: "武";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--jp);
    font-size: 1.6rem;
    color: var(--accent);
}

    .components-rejoining-animation div[b-9if1nzqz1e] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9if1nzqz1e 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9if1nzqz1e] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9if1nzqz1e {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/NovitaCard.razor.rz.scp.css */
/* La card «Novità» (mockup_novita_versione_webadmin.html): testa col sigillo 新, la pastiglia
   versione e la lista puntata del changelog. Il sigillo copia .avvio-sig; il resto è scoped alla
   card, colori e raggi dalle sole variabili di tema (vale anche per le skin scure). */

/* Fascia a piena larghezza sopra la dashboard, col ritmo di 1rem verso la griglia (come .avvio). */
.novita[b-wvgbo2h8k4] { margin-bottom: 1rem; }

.novita-testa[b-wvgbo2h8k4] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .2rem;
    padding-right: 1.6rem;
}

.novita-sig[b-wvgbo2h8k4] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-on);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: var(--jp);
}

.novita-testa h2[b-wvgbo2h8k4] { margin: 0; font-size: 1.05rem; }

.novita-ver[b-wvgbo2h8k4] {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 600;
    color: var(--accent-text);
    background: var(--accent-tenue);
    border-radius: 20px;
    padding: .18rem .6rem;
    white-space: nowrap;
}

.novita-data[b-wvgbo2h8k4] { color: var(--muted); font-size: .82rem; margin: .1rem 0 .8rem; }

.novita-lista[b-wvgbo2h8k4] { list-style: none; margin: 0; padding: 0; }

.novita-lista li[b-wvgbo2h8k4] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .5rem .15rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text);
}
.novita-lista li + li[b-wvgbo2h8k4] { border-top: 1px solid var(--border); }

/* Il grassetto del changelog (Novita.Formatta): niente lo appiattiva, ma Inter si serve
   in 400/500/600 e il bold di default (700) non ha una faccia sua — si fissa a 600, il
   peso «voce» del sistema, invece di lasciare al browser un grassetto sintetico. */
.novita-lista strong[b-wvgbo2h8k4] { font-weight: 600; color: var(--text); }

.novita-lista .pallino[b-wvgbo2h8k4] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: .5rem;
}

/* Link allo storico completo, in coda alla card: separatore sopra, colore accento. */
.novita-tutte[b-wvgbo2h8k4] {
    display: block;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
    color: var(--accent-text);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.novita-tutte:hover[b-wvgbo2h8k4] { text-decoration: underline; }
/* /Components/Pages/Chiusure.razor.rz.scp.css */
/* --- il modulo di creazione (§27 ago) ----------------------------------------------------
   Le due date e il motivo stanno in fila; «per chi vale» sotto, allineata a sinistra, com'è nel
   mockup (docs/mockup/budopass_chiusure_form.html).

   Le date sono 150 px fisse — `gg/mm/aaaa` non chiede un terzo di pagina — e il motivo prende
   quel che avanza, con un pavimento a 180 px. Il contenitore ha `flex-wrap: wrap` e NON
   `nowrap`: con `nowrap` la riga non andrebbe a capo, straborderebbe. Le larghezze qui sotto
   sono MISURATE in un browser vero, non stimate; finché l'ambito era il quarto blocco della riga
   il tetto stava a 917 px, ora che sta sotto la riga respira molto più giù.

   --- una nota che vale oltre questo foglio (terzo giro su questa pagina) ---
   Tre difetti di fila, sempre la stessa forma: uno stile di casa esisteva e accanto ne è nato
   uno nuovo. `.kanji` → `.ch-kanji` senza la faccia giapponese; l'etichetta di campo →
   `.ch-ambito-testa` con la voce dei titoli di sezione. È la stessa forma dell'`<input
   type="checkbox">` grezzo che il giro prima ha sostituito `Spunta`, e della scala di frequenza
   e della regola delle affiliazioni ancora prima.

   Quando una pagina ha bisogno di un aspetto che l'app già possiede, la prima mossa è CERCARE
   la classe o il componente che c'è. Un nome nuovo è l'ultima risorsa, e deve dire in un
   commento perché quello esistente non bastava. */
.ch-riga[b-zxnjvjdocj] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: end;
    /* Lo spazio sotto la riga appartiene ALLA RIGA, non a ciò che le viene dopo. Prima lo dava
       il `margin-bottom` di `.campo`, poi — da quando qui è azzerato — lo copriva senza dirlo il
       `margin-top` dell'ambito. Il giorno in cui l'ambito non si disegna (un corso attivo o
       nessuno, §27 ago) quel margine sparisce con lui e i pulsanti finiscono a 4 px dai campi:
       misurato. Una riga che si tiene la sua spaziatura non dipende da chi la segue. */
    margin-bottom: .9rem;
}
.ch-data[b-zxnjvjdocj] { flex: 0 0 150px; }
.ch-motivo[b-zxnjvjdocj] { flex: 1 1 auto; min-width: 180px; }
/* `.campo` porta un `margin-bottom: .9rem` che serve quando i campi si impilano. In una riga
   flex è peso morto — la spaziatura la fa il `gap` — e rompe l'`align-items: end`: il fondo che
   si allinea è quello del MARGINE, quindi le scatole finivano 14 px più in alto di ciò che
   stava loro accanto. */
.ch-riga .campo[b-zxnjvjdocj] { margin-bottom: 0; }

/* L'ambito, sotto le date e a filo con «Dal». `white-space: nowrap` sul blocco E su ogni
   opzione: «Tutto il dojo» e «Solo alcuni corsi» non devono poter andare a capo nemmeno
   volendo — spezzate su tre righe erano metà del difetto che si vedeva a schermo. */
.ch-ambito[b-zxnjvjdocj] {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}
/* L'etichetta è un `<label>` nudo: la veste gliela dà app.css, come ai tre campi sopra. Qui si
   toglie solo il `margin-bottom` che serve quando un'etichetta sta SOPRA il suo campo e non
   accanto — vale anche per le due opzioni, che sono anch'esse `<label>`. */
.ch-ambito label[b-zxnjvjdocj] { margin-bottom: 0; }
.ch-scelta[b-zxnjvjdocj] {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .9rem; white-space: nowrap; cursor: pointer;
}
.ch-scelta input[b-zxnjvjdocj] { margin: 0; }

/* I corsi da spuntare. Riquadro proprio perché sono una scelta dentro una scelta: si
   distinguono dal resto del modulo senza diventare una carta a sé. */
.ch-corsi[b-zxnjvjdocj] {
    margin-top: .6rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    overflow: hidden;
}
.ch-corso[b-zxnjvjdocj] { border-top: 1px solid var(--border); }
.ch-corso:first-child[b-zxnjvjdocj] { border-top: 0; }

/* Dentro c'è `Spunta`, che porta già il riquadro d'inchiostro e il bersaglio a riga intera: qui
   si scende con ::deep solo per togliere il raggio (le righe sono incollate una all'altra) e per
   mettere in fila kanji, nome e istruttore dentro la sua etichetta. */
.ch-corso[b-zxnjvjdocj]  .spunta { border-radius: 0; padding: .5rem .7rem; }
.ch-corso[b-zxnjvjdocj]  .spunta-testo {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: .6rem;
}
/* Il kanji della disciplina al posto dell'iniziale, come in ogni altra casella di corso. La
   FACCIA la dà `.kanji` di app.css (`font-family: var(--jp)`, il sottoinsieme NotoSansJP da 8 KB):
   qui resta solo la geometria della colonnina. Senza `.kanji` il glifo cadeva sul font di sistema
   e 合 usciva come un simbolo che non c'entrava niente. Un solo posto decide quale faccia disegna
   un kanji, ed è app.css: qui non si ridichiara. */
.ch-kanji[b-zxnjvjdocj] { flex: none; width: 1.4rem; text-align: center; color: var(--muted); }
.ch-nome[b-zxnjvjdocj] { flex: 1; min-width: 0; }
/* L'istruttore e i giorni: è ciò che rende selezionabile «i corsi del M° Ferrari» senza legare
   la chiusura al maestro — se domani quel corso cambia istruttore, la chiusura resta quella che
   il gestore ha scritto. */
.ch-meta[b-zxnjvjdocj] { color: var(--muted); font-size: .82rem; white-space: nowrap; }

@media (max-width: 560px) {
    .ch-meta[b-zxnjvjdocj] { white-space: normal; text-align: right; }
}
/* /Components/Pages/ConfigurazioneEnte.razor.rz.scp.css */
/* Le tessere dell'indice «Configurazione ente» (deciso 24 ago). Sono .carta — fondo, bordo, raggio
   e ombra vengono da lì — e questo foglio aggiunge solo l'impaginazione interna e il fatto che
   l'INTERA carta è un link: colore ereditato e nessuna sottolineatura, sennò il titolo leggerebbe
   come un collegamento dentro un riquadro che non lo è.

   Solo variabili di tema, nessun colore letterale: il rail e le pagine cambiano fondo su tre skin
   e due temi, e un esadecimale qui sarebbe l'unica cosa a non seguirli. */

.conf-tessera[b-elto0i79zl] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
    /* Solo il bordo si accende: una tessera che si solleva o si ombreggia al passaggio farebbe
       muovere una griglia di cinque elementi a ogni spostamento del mouse. */
    transition: border-color .12s;
}

.conf-tessera:hover[b-elto0i79zl] {
    border-color: var(--accent);
    text-decoration: none;
}

/* L'icona sopra il titolo, alla misura di un'icona di sezione: fioca come l'occhiello di un gruppo
   — è un segno di riconoscimento, non un elemento da leggere per primo. Il tratto lo eredita da
   currentColor, come sul rail. */
.conf-ico[b-elto0i79zl] {
    display: inline-flex;
    color: var(--muted);
}

.conf-ico[b-elto0i79zl]  svg {
    width: 24px;
    height: 24px;
}

.conf-tit[b-elto0i79zl] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
}

.conf-nota[b-elto0i79zl] {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.35;
}
/* /Components/Pages/DettaglioCorso.razor.rz.scp.css */
/* Roster «essenziale» del corso (§«cluster scheda corso ↔ scheda socio», 10 ago,
   mockup_cluster_corso_socio.html). Stessa lingua visiva della carta «Corsi» della scheda socio,
   ma la riga è un bersaglio cliccabile verso la scheda allievo. Colori dalle sole variabili di
   tema, così luce/buio (e la pelle Sumi) restano validi. */
.isc-lista[b-r3fu2cngaw] { display: flex; flex-direction: column; }

.isc-riga[b-r3fu2cngaw] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .5rem;
    border-radius: var(--raggio-s);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.isc-riga:last-child[b-r3fu2cngaw] { border-bottom: none; }
.isc-riga:hover[b-r3fu2cngaw] { background: var(--page-tenue); }

/* Iscrizione in pausa: la riga si smorza (come nel mockup), le azioni restano piene. */
.isc-riga.pausa[b-r3fu2cngaw] { opacity: .72; }

/* La cintura: SegnoGrado disegna .token-svg senza vincolo di larghezza — qui lo cappo a 34px
   (come nell'elenco soci), scendendo nel componente figlio con ::deep. */
.isc-segno[b-r3fu2cngaw] { flex: 0 0 auto; }
.isc-segno[b-r3fu2cngaw]  .token-svg { width: 34px; height: auto; display: block; }

/* Pastiglia neutra (iniziali) quando manca la cintura: riuso .rp-av globale, dimensionata. */
.isc-av[b-r3fu2cngaw] { flex: 0 0 34px; width: 34px; height: 34px; }

.isc-info[b-r3fu2cngaw] { flex: 1 1 auto; min-width: 0; }
.isc-nome[b-r3fu2cngaw] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.isc-meta[b-r3fu2cngaw] { display: block; margin-top: .15rem; font-size: .78rem; color: var(--muted); }

.isc-freq[b-r3fu2cngaw] { flex: 0 0 auto; width: 5.5rem; text-align: right; }
.isc-pc[b-r3fu2cngaw] { font-size: 1rem; font-weight: 700; }
.isc-pl[b-r3fu2cngaw] { font-size: .72rem; color: var(--muted); margin-left: .3rem; }
.isc-bar[b-r3fu2cngaw] {
    height: 5px;
    border-radius: 3px;
    background: var(--page-tenue);
    margin-top: .35rem;
    overflow: hidden;
}
.isc-bar > i[b-r3fu2cngaw] { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
/* Sotto il 50% la barra vira in ambra (warn), come la frequenza per corso della scheda socio. */
.isc-bar.media > i[b-r3fu2cngaw] { background: var(--arancio); }
.isc-bar.scarsa > i[b-r3fu2cngaw] { background: var(--err); }

.isc-azioni[b-r3fu2cngaw] { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }

.isc-chev[b-r3fu2cngaw] { flex: 0 0 auto; color: var(--muted); opacity: .55; font-size: 1.1rem; line-height: 1; }

/* Schermo stretto: la riga va a capo, frequenza e azioni scendono sotto nome e cintura. */
@media (max-width: 640px) {
    .isc-riga[b-r3fu2cngaw] { flex-wrap: wrap; }
    .isc-freq[b-r3fu2cngaw] { width: auto; text-align: left; flex: 1 1 auto; }
    .isc-azioni[b-r3fu2cngaw] { flex: 1 1 100%; justify-content: flex-start; }
    .isc-chev[b-r3fu2cngaw] { display: none; }
}

/* --- giorni di chiusura + «Genera» (§26 ago) ------------------------------------------
   Il blocco che chiude la carta «Orari»: la riga sopra è la stessa regola delle altre carte
   — fra i dati e i pulsanti ci va un filo — e qui i dati sono l'elenco degli orari.

   Le chiusure stanno attaccate a «Genera» e non in una carta loro perché sono la ragione per
   cui il conto delle lezioni non torna: chi genera e poi conta deve trovare la spiegazione
   dove ha premuto, non due schermate più in là. */
.corso-genera[b-r3fu2cngaw] {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}
.cc-testa[b-r3fu2cngaw] {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .35rem;
}
/* Le due date e quello che viene dopo non si toccano. `.det-campi .campo` azzera il margine dei
   campi — serve, sennò in griglia le righe si scostano — ma qui sotto il gruppo finisce, e la
   frase delle chiusure (o l'elenco, o il campo «Motivo» del pannello annidato) restava incollata
   al bordo inferiore di «Al», fuori dal passo su cui è impaginato il resto. Il valore è quello di
   `.campo`: sono gli stessi campi, e devono respirare uguale. */
.corso-genera .det-campi[b-r3fu2cngaw] { margin-bottom: .9rem; }
.cc-aiuto[b-r3fu2cngaw] { font-size: .82rem; color: var(--text); line-height: 1.5; margin: 0 0 .6rem; }
.cc-elenco[b-r3fu2cngaw] { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
/* Data e motivo sulla stessa riga: la data in tondo scuro perché è la cosa che si cerca, il
   motivo tenue accanto perché è quello che la fa riconoscere. */
.cc-riga[b-r3fu2cngaw] { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .84rem; }
.cc-per[b-r3fu2cngaw] { font-weight: 600; white-space: nowrap; }
.cc-mot[b-r3fu2cngaw] { color: var(--muted); min-width: 0; }
/* Il link alle chiusure a sinistra e «Genera» a destra: la lettura finisce dove comincia
   l'azione, e chi deve prima sistemare le chiusure ha la porta lì, non in fondo al menu. */
.cc-piede[b-r3fu2cngaw] { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; flex-wrap: wrap; }
.cc-piede .spazio[b-r3fu2cngaw] { flex: 1; }
.cc-piede a[b-r3fu2cngaw] { font-size: .84rem; }

/* Il pannello «chiudi questo corso» dentro quello di generazione (§27 ago): rientrato e su fondo
   tenue perché è una cosa dentro un'altra — si sta ancora guardando la finestra da generare, e
   questo è un gesto che la cambia. */
.cc-nuova[b-r3fu2cngaw] {
    margin-top: .8rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--page-tenue);
}
/* /Components/Pages/DettaglioSocio.razor.rz.scp.css */
/* Ritmo verticale fra le carte impilate: stesso passo del gap interno di .det-griglia (1rem),
   coerente con le pagine sorelle (.cru > .col, .corso-due > div, .imp-form). Senza questo le
   carte a tutta larghezza (Testata, Corsi) e la griglia si toccano (deciso 3 ago). */
.det-pila[b-85hsyss22u] { display: flex; flex-direction: column; gap: 1rem; }

/* Carta «Corsi» del socio (§2 ago): una riga per corso con chip disciplina, nome + stato,
   riga oraria, la % di frequenza per corso e le azioni. Stili scoped alla pagina, così non
   toccano il foglio globale. Colori e raggi dalle variabili di tema (chiaro/scuro). */

.corsi-lista[b-85hsyss22u] { display: flex; flex-direction: column; }

/* Riga intera cliccabile → scheda corso (pattern elenco soci): mano e alone all'hover come le
   righe apribili dell'app (.testa-carta.apribile). Il divisorio in basso resta. */
.corso-riga[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .1rem;
    border-bottom: 1px solid var(--border);
    border-radius: var(--raggio-s);
    cursor: pointer;
}
.corso-riga:last-child[b-85hsyss22u] { border-bottom: none; }
.corso-riga:hover[b-85hsyss22u] { background: var(--riga-hover); }

/* Iscrizione scaduta (rimossa): la riga resta come storia, ma smorzata e senza azioni. */
.corso-riga.spenta[b-85hsyss22u] { opacity: .55; }

.corso-chip[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--raggio-s);
    background: var(--accent-tenue);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Col KANJI la pastiglia cambia misura, non solo carattere (§26 ago). Il peso torna normale
   perché il Noto Sans JP incorporato ha la sola faccia 500: a 700 il browser lo ingrassa da sé,
   e un kanji ingrassato sinteticamente perde i tratti sottili che lo rendono leggibile a 20px.
   Il corpo sale un filo perché il glifo, a parità di punti, disegna più piccolo di una lettera
   latina; `line-height: 1` gli toglie l'interlinea che lo spingeva sotto il centro del riquadro.
   La famiglia arriva da `.kanji` (app.css), che è la stessa delle chip di «Cerca un ente». */
.corso-chip.kanji[b-85hsyss22u] { font-weight: 500; font-size: 1.15rem; line-height: 1; }

.corso-info[b-85hsyss22u] { flex: 1 1 auto; min-width: 0; }

.corso-nome[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.corso-meta[b-85hsyss22u] {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--muted);
}

.corso-freq[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 5.5rem;
    text-align: right;
}
.corso-pc[b-85hsyss22u] { font-size: 1rem; font-weight: 700; }
.corso-pl[b-85hsyss22u] { font-size: .72rem; color: var(--muted); margin-left: .3rem; }

/* La barra di frequenza sta FRA il nome e i numeri, e si prende il vuoto in mezzo alla riga
   (§26 ago). Prima viveva dentro `.corso-freq`, larga 5,5rem: un accenno sotto due cifre, troppo
   corto perché due righe si potessero confrontare a occhio — che è l'unica cosa per cui una
   barra esiste, visto che la percentuale è già scritta lì accanto in chiaro.

   Il tetto a 20rem è di gusto: su un monitor largo la riga ha un vuoto enorme, e una barretta
   alta 6px lunga mezzo schermo smette di leggersi come un indicatore. Lo spazio che avanza resta
   fra la barra e i numeri, e va bene così: i numeri sono ancorati a destra dalla loro colonna. */
.corso-bar[b-85hsyss22u] {
    flex: 1 1 4rem;
    max-width: 20rem;
    align-self: center;
    height: 6px;
    border-radius: 4px;
    background: var(--page-tenue);
    overflow: hidden;
}
.corso-bar > i[b-85hsyss22u] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ok);
}
.corso-bar.media > i[b-85hsyss22u] { background: var(--arancio); }
.corso-bar.scarsa > i[b-85hsyss22u] { background: var(--err); }

.corso-azioni[b-85hsyss22u] {
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

/* Il picker «Iscrivi a corso»: scelta multipla dei corsi dell'ente dove non è già iscritto. */
.corsi-picker[b-85hsyss22u] {
    margin-top: 1rem;
    border: 1px solid var(--accent-tenue);
    border-radius: var(--raggio);
    padding: .4rem .4rem .6rem;
    background: var(--page-tenue);
}
.corsi-picker-h[b-85hsyss22u] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .55rem .6rem .35rem;
}
.corsi-opt[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: var(--raggio-s);
    cursor: pointer;
}
.corsi-opt:hover[b-85hsyss22u] { background: var(--card); }
.corsi-ck[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 5px;
    border: 1.6px solid var(--border);
    display: grid;
    place-items: center;
    font-size: .75rem;
    color: transparent;
}
.corsi-opt.sel .corsi-ck[b-85hsyss22u] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
}
.corsi-oi[b-85hsyss22u] { flex: 1 1 auto; min-width: 0; }
.corsi-oi b[b-85hsyss22u] { display: block; font-weight: 600; }
.corsi-oi small[b-85hsyss22u] { font-size: .78rem; color: var(--muted); }
.corsi-picker-f[b-85hsyss22u] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .55rem .5rem .1rem;
    border-top: 1px solid var(--border);
    margin-top: .35rem;
}

/* Stretto: la % e le azioni scendono sotto le info invece di comprimersi. */
@media (max-width: 640px) {
    .corso-riga[b-85hsyss22u] { flex-wrap: wrap; }
    .corso-freq[b-85hsyss22u] { width: auto; text-align: left; flex: 1 1 auto; }
    .corso-azioni[b-85hsyss22u] { flex: 1 1 100%; }
    /* In stretto la barra non ha più un vuoto da riempire: prende una riga sua, sotto il nome,
       a tutta larghezza. Schiacciata fra nome e percentuale sarebbe lunga due centimetri, cioè
       di nuovo l'accenno da cui siamo partiti; nasconderla invece toglierebbe l'unica cosa che
       si confronta a colpo d'occhio scorrendo tre corsi. */
    .corso-bar[b-85hsyss22u] { flex: 1 1 100%; max-width: none; order: 1; }
    .corso-freq[b-85hsyss22u] { order: 2; }
    .corso-azioni[b-85hsyss22u] { order: 3; }
}

/* --- Note interne del socio (§«diario condiviso della gestione», 6 ago) ---
   Carta a piena larghezza: avviso di riservatezza, composer e voci datate/firmate. I colori
   pescano dalle variabili di tema (app.css), così sopravvivono anche alla pelle scura Sumi. */
.nota-avviso[b-85hsyss22u] {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .8rem;
    color: var(--muted);
    background: var(--page-tenue);
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .55rem .75rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}
/* Il lucchetto (`Icone.Lucchetto`): l'SVG nasce a 18px, qui sta accanto a un testo di .8rem e
   va rimpicciolito come nella galleria della scheda esame. `currentColor` gli dà il tono
   dell'avviso, cosa che l'emoji che stava qui prima non sapeva fare. */
.nota-avviso .lucchetto[b-85hsyss22u] { flex: none; margin-top: 1px; display: inline-flex; color: var(--muted); }
.nota-avviso .lucchetto svg[b-85hsyss22u] { width: 14px; height: 14px; }

.nota-comp[b-85hsyss22u] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.1rem;
}
.nota-comp textarea[b-85hsyss22u] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .6rem .7rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 60px;
    background: var(--card);
    color: var(--text);
}
.nota-comp .riga[b-85hsyss22u] { display: flex; justify-content: flex-end; }

.nota-voce[b-85hsyss22u] {
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
}
.nota-voce:first-of-type[b-85hsyss22u] { padding-top: .2rem; }
.nota-voce:last-child[b-85hsyss22u] { border-bottom: 0; padding-bottom: .1rem; }

.nota-firma[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.nota-firma .autore[b-85hsyss22u] { font-weight: 600; color: var(--text); }
.nota-firma .sep[b-85hsyss22u] { opacity: .5; }
.nota-firma .mod[b-85hsyss22u] { font-style: italic; }

.nota-testo[b-85hsyss22u] {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.nota-edit[b-85hsyss22u] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .6rem .7rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 60px;
    background: var(--card);
    color: var(--text);
}

.nota-azioni[b-85hsyss22u] { display: flex; gap: 1rem; margin-top: .5rem; }
.nota-azioni a[b-85hsyss22u] {
    font-size: .8rem;
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
}
.nota-azioni a.elim[b-85hsyss22u] { color: var(--muted); font-weight: 500; }

.nota-vuoto[b-85hsyss22u] {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
    padding: .2rem 0 .1rem;
}

/* «Mostra altro»: rivelazione progressiva, centrata, separatore tratteggiato sopra */
.nota-altro[b-85hsyss22u] {
    display: flex;
    justify-content: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--border);
}
.nota-altro button[b-85hsyss22u] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    padding: .45rem 1rem;
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
}
.nota-altro button:hover[b-85hsyss22u] { background: var(--page-tenue); }
.nota-altro button .n[b-85hsyss22u] { color: var(--muted); font-size: .8rem; }

/* Rinnovo inline (tessera e quota, §17 ago): riquadro sobrio col campo data pre-compilato e le
   azioni Conferma/Annulla. Sostituisce le modali/scorciatoie di prima. */
.det-rinnovo[b-85hsyss22u] {
    margin-top: .75rem;
    padding: .8rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s, 10px);
    background: var(--page-tenue, #fbfaf6);
}
.det-rinnovo .etichetta[b-85hsyss22u] { margin-bottom: .35rem; }
.det-rinnovo .det-azioni[b-85hsyss22u] { margin-top: .7rem; }

/* Stepper «+N mesi» del rinnovo quota: –/+ attorno al numero, poi l'etichetta «mesi». */
.quota-stepper[b-85hsyss22u] { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.stepper[b-85hsyss22u] {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card);
}
.stepper button[b-85hsyss22u] {
    width: 38px; height: 40px; border: none; background: transparent;
    color: var(--accent); font-size: 1.3rem; font-weight: 600; cursor: pointer;
}
.stepper button:hover:not(:disabled)[b-85hsyss22u] { background: var(--riga-hover); }
.stepper button:disabled[b-85hsyss22u] { opacity: .4; cursor: default; }
.stepper-n[b-85hsyss22u] { min-width: 42px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text); }
/* /Components/Pages/NovitaStorico.razor.rz.scp.css */
/* Lo storico «Novità» nella seconda mano (3 set): testata col sigillo 新, poi due colonne — l'indice
   delle versioni a sinistra, fermo sotto la testata del guscio, e le carte dei rilasci a destra.
   Colori e raggi dalle sole variabili di tema (vale sulle skin scure). Il sigillo riusa .novita-sig
   della card; la lista puntata riusa la forma di .novita-lista (qui ridichiarata perché lo scoped
   CSS non attraversa i componenti). */

.ns-testa[b-wl7bnmdcch] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.25rem;
}

.novita-sig[b-wl7bnmdcch] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-on);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-family: var(--jp);
}

.ns-testa h1[b-wl7bnmdcch] { margin: 0; font-size: 1.4rem; }
.ns-sotto[b-wl7bnmdcch] { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }

/* Due colonne: l'indice stretto, i rilasci con tutto il resto. */
.ns-griglia[b-wl7bnmdcch] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.ns-indice[b-wl7bnmdcch] {
    position: sticky;
    top: calc(var(--sa-testa-h, 100px) + 1rem);
}

/* Le voci dell'indice: righe come ovunque, la versione a sinistra e la data in coda, la versione
   attuale con l'accento. */
.ns-voce[b-wl7bnmdcch] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem .9rem;
    color: var(--text);
    text-decoration: none;
}
.ns-voce + .ns-voce[b-wl7bnmdcch] { border-top: 1px solid var(--border); }
.ns-voce:hover[b-wl7bnmdcch] { background: var(--riga-hover); }
.ns-voce-ver[b-wl7bnmdcch] { font-weight: 600; font-size: .92rem; }
.ns-voce.cur .ns-voce-ver[b-wl7bnmdcch] { color: var(--accent-text); }
.ns-voce-data[b-wl7bnmdcch] { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }

.ns-rilasci[b-wl7bnmdcch] { display: grid; gap: 1rem; min-width: 0; }

/* L'ancora si ferma sotto la testata del guscio, non dietro. */
.ns-rilascio[b-wl7bnmdcch] { scroll-margin-top: calc(var(--sa-testa-h, 100px) + 1rem); }

.novita-lista[b-wl7bnmdcch] { list-style: none; margin: 0; padding: 0; }

.novita-lista li[b-wl7bnmdcch] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .7rem 1.1rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text);
}
.novita-lista li + li[b-wl7bnmdcch] { border-top: 1px solid var(--border); }

/* Il grassetto del changelog (Novita.Formatta): niente lo appiattiva, ma Inter si serve
   in 400/500/600 e il bold di default (700) non ha una faccia sua — si fissa a 600, il
   peso «voce» del sistema, invece di lasciare al browser un grassetto sintetico. */
.novita-lista strong[b-wl7bnmdcch] { font-weight: 600; color: var(--text); }

.novita-lista .pallino[b-wl7bnmdcch] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: .55rem;
}

@media (max-width: 999.98px) {
    .ns-griglia[b-wl7bnmdcch] { grid-template-columns: 1fr; }
    .ns-indice[b-wl7bnmdcch] { display: none; }
}
/* /Components/Pages/Soci.razor.rz.scp.css */
/* Storico dei cessati (§«Elenco soci: storico dei cessati + riattiva», 2 ago): col chip «Mostra
   cessati» acceso i disdetti tornano visibili, in coda e SMORZATI — grigi, grado in scala di
   grigi — così si distinguono a colpo d'occhio dagli attivi pur restando cliccabili. Il badge
   «Cessato · data» riusa .badge.neutro del foglio globale; qui solo la riga, il segno e il
   divisore. Stili scoped alla pagina, colori dalle variabili di tema (chiaro/scuro), niente hex
   fissi come nel mockup. */

/* Riga cessata: smorzata come l'iscrizione scaduta del dettaglio (.spenta). Resta cliccabile. */
.soci tbody tr.cessato td[b-z6atxtmswz] { opacity: .55; }

/* Il segno del grado, se c'è, va in scala di grigi: è storia, non lo stato attuale. */
.soci tbody tr.cessato .segno[b-z6atxtmswz] { filter: grayscale(1); }

/* Divisore «Cessati»: una fascia tenue che stacca la coda dei cessati dagli attivi. Non è
   cliccabile (non apre un dettaglio), e il colspan copre tutte le colonne. */
.soci tbody tr.divi td[b-z6atxtmswz] {
    background: var(--page-tenue);
    padding: .35rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: default;
}

/* Il chip «Mostra cessati» è d'altra natura dalle pastiglie di anomalia (ricarica, non filtra in
   memoria): da acceso porta un tono NEUTRO invece dell'accento, così non si confonde con esse. */
.filtro .f.cessati.on[b-z6atxtmswz] {
    background: var(--page-tenue);
    border-color: var(--border);
    color: var(--muted);
}
.filtro .f.cessati.on .spunta[b-z6atxtmswz] { color: var(--muted); }

/* Icona «account collegato» (§«Elenco soci: icona account collegato»): un telefonino accanto al
   nome — in accento se il socio ha un account Budopass collegato, tenue (colore bordo) se no.
   È informativa: niente clic, non intercetta il clic-riga. Colori dai token, non cablati. */
.acc-tel[b-z6atxtmswz] { display:inline-flex; width:16px; height:16px; margin-left:.35rem; vertical-align:-3px; }
.acc-tel svg[b-z6atxtmswz] { width:16px; height:16px; }
.acc-tel.on[b-z6atxtmswz]  { color: var(--accent); }
.acc-tel.off[b-z6atxtmswz] { color: var(--border); }   /* muta = tenue, non un errore */