/* Design system "passaporto d'inchiostro" — ibrido "ariosa + editoriale" (§3.1).
I valori sono gli stessi di Colori.xaml dell'app: qui non si inventano colori, si
traduce la palette in CSS custom properties guidate da data-accent/data-theme su
, così web e app restano coordinati. Supera la vecchia nota "il tema è materia
dell'app": ora accento e tema si scelgono anche qui (§3.1, deciso 22 lug). */
/* ===== font locali (privacy §6: serviti da wwwroot, mai da un CDN) ===== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); }
/* Niente serif (corretto 23 lug, §3.1): il serif su titoli e numeri riportava le grazie
sulla I maiuscola che l'app aveva scartato apposta (§7). Un carattere solo, Inter, e la
differenza la fa il PESO — come le tre chiavi dell'app: 400 testo, 500 in evidenza,
600 voce (titoli, wordmark, numeri). */
/* Solo i kanji che servono (印 e i quattro elementi): il file è un sottoinsieme di
NotoSansJP, ~8 KB invece dei 9 MB del variabile completo. */
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSansJP-Kanji.ttf') format('truetype'); }
/* ===== accenti: i quattro elementi (§3.1), valori grezzi identici a Colori.xaml =====
Ogni accento porta: pieno (chiaro/scuro), fondo tenue (chiaro/scuro), testo leggibile
sulla superficie (chiaro/scuro), tono di banda, e testo/icone sopra il pieno. Il tema
sceglie poi QUALE variante è attiva. Terra è l'eccezione: su-accento chiaro è scuro,
perché il suo pieno è troppo chiaro per reggere testo chiaro (deroga WCAG calcolata). */
:root,
html[data-accent="fuoco"] { --acc:#B5382C; --acc-scuro:#D9584C; --acc-tenue-l:#F5E4E1; --acc-tenue-d:#3A2320; --acc-testo-l:#8C2A20; --acc-testo-d:#EFA79E; --acc-banda:#7C2A20; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; }
html[data-accent="terra"] { --acc:#A8792E; --acc-scuro:#CBA45C; --acc-tenue-l:#F4EBDA; --acc-tenue-d:#33291A; --acc-testo-l:#7A5717; --acc-testo-d:#DCC08A; --acc-banda:#5E4212; --acc-su-l:#1A1206; --acc-su-d:#1C1A16; }
html[data-accent="aria"] { --acc:#2F6B42; --acc-scuro:#4E9968; --acc-tenue-l:#E2EFE6; --acc-tenue-d:#1B2C21; --acc-testo-l:#235233; --acc-testo-d:#8FC9A5; --acc-banda:#1C3F27; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; }
html[data-accent="acqua"] { --acc:#2E4A7A; --acc-scuro:#5B7FBF; --acc-tenue-l:#E3E9F3; --acc-tenue-d:#1D2739; --acc-testo-l:#24395F; --acc-testo-d:#9FB8E0; --acc-banda:#1B2C4A; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; }
html[data-accent="cenere"] { --acc:#6B6156; --acc-scuro:#8E8578; --acc-tenue-l:#F1EEE8; --acc-tenue-d:#2E2B25; --acc-testo-l:#574E44; --acc-testo-d:#CDBFA8; --acc-banda:#4E463B; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; }
/* ===== tema chiaro (default) ===== */
:root {
/* superfici (Colori.xaml) */
--page: #EFEBE1;
--page-tenue:#F5F2EA;
--card: #FFFFFF;
--card-alta: #FFFFFF;
--border: #E3DED2;
--text: #23201C;
--muted: #6B6E73;
/* rail chiaro su washi + riga tabella al passaggio (specifici del web) */
--rail: #FBF9F4;
--rail-border:#ECE6D9;
--riga-hover: #FBF9F4;
/* accento attivo: chiaro usa il pieno e il tenue-chiaro */
--accent: var(--acc);
--accent-tenue:var(--acc-tenue-l);
--accent-text: var(--acc-testo-l);
--accent-on: var(--acc-su-l);
--accent-banda:var(--acc-banda);
/* semantici — NON seguono l'accento (§3.1): verificato/mostrato restano sé stessi */
--ok:#2F7D5B; --ok-bg:#E4F0EA; --ok-text:#245C41;
--warn:#B07214; --warn-bg:#F6EBD6; --warn-text:#8A5A0B;
/* Arancio delle BARRE di frequenza (§26 ago), a sé da `--warn`: quello è l'ocra dei badge
d'avviso — «quota scaduta», «in pausa» — e su una barretta di 6px legge marrone. Qui
serve un arancio che si distingua a colpo d'occhio dal rosso che gli sta sotto nella
scala e dal verde che gli sta sopra, e `--warn` da solo non ci arrivava. Non si tocca
`--warn`: cambiarlo ridipingerebbe ogni pastiglia d'avviso del pannello. */
--arancio:#DD6B20; --arancio-text:#A9501A;
--err:#A63125; --err-bg:#F6E4E1; --err-text:#7A231B;
--demo:#6A4C93; --demo-on:#FFFFFF;
/* bottone solido neutro (si inverte al buio) */
--btn-bg:#17191C; --btn-fg:#FFFFFF;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--jp: 'Noto Sans JP', var(--sans);
--raggio: 12px;
--raggio-s: 8px;
/* MATERIA (strato di movimento, in fondo al file). L'ombra di prima erano due strati di
blu-grigio al 5%: sul washi non si vedeva, e nessuna .carta leggeva come un foglio
POSATO sulla pagina. Ora sono tre, e in inchiostro caldo (35,32,28 — la tinta del sumi,
non un grigio freddo): un filo di contatto, una diffusione corta che dà lo SPESSORE del
foglio, e un'ombra lunga e rientrata che stacca la carta dal fondo senza sporcarlo.
--ombra-alta è la stessa mano un gradino più su: la usa solo l'hover di .sollevabile,
dove il foglio si alza di 1px. Le ~20 regole che già chiamano --ombra ne beneficiano
senza toccarne nessuna. */
--ombra: 0 1px 1px rgba(35,32,28,.05),
0 2px 5px -1px rgba(35,32,28,.055),
0 14px 28px -12px rgba(35,32,28,.13);
--ombra-alta: 0 1px 1px rgba(35,32,28,.05),
0 4px 10px -2px rgba(35,32,28,.08),
0 22px 40px -14px rgba(35,32,28,.20);
/* Il washi "vuoto" dello scheletro di caricamento: un tono sotto --page-tenue, perché
sopra --card (bianco) deve leggersi come una forma e non sparire. */
--scheletro: #E8E3D6;
--scheletro-luce: rgba(255,255,255,.85); /* la luce che lo percorre */
/* Le tre durate del movimento. Una scala sola, come i tre pesi del carattere: gli stati
(hover, focus, pressione), le entrate, e il gesto che si guarda. Un quarto valore
vorrebbe dire che non si è deciso. --t-lunga oggi non la chiama nessuno: è la durata
dei gesti che vogliono JavaScript (sigillo, conteggio, transizione di pagina) e che
sono un lavoro a parte — sta qui perché la scala si decide tutta insieme. */
--t-corta: 120ms;
--t-media: 260ms;
--t-lunga: 320ms; /* un foglio, un pannello: il tempo di un gesto intero (11) */
--t-lunga: 620ms;
--curva: cubic-bezier(.22,.68,.28,1); /* esce svelta, si posa piano */
/* scala dei caratteri dell'app (Stili.xaml: TitoloPagina 27, Titolo 19, Valore 15, Meta 12.5,
Etichetta 11; deciso 2 set). La usano i pezzi condivisi — Sezione, Riga, Campo, Foglio. Il
corpo di pagina resta a 14px finché le pagine non sono passate una per una: alzarlo adesso
le sposterebbe tutte sotto i piedi. `--t-pagina` è 24 e non 27: il titolo del web è già una
taglia sotto dal restyle. */
--t-pagina: 24px;
--t-titolo: 19px;
--t-valore: 15px;
--t-meta: 12.5px;
--t-etichetta: 11px;
--t-sezione: 12px;
/* Cintura e badge del grado (§10): stessi valori di Colori.xaml dell'app. Bianco e
nero SONO la cintura, non il tema — l'unica che il tema la segue è la nera, che su
carta scura sparirebbe: in chiaro è quasi nera, al buio un carbone appena sopra la
card. Il contorno segue il tema perché una cintura bianca senza bordo, di notte,
scomparirebbe. */
--cintura-bianca: #FFFFFF;
--cintura-nera: #17140F;
--cintura-contorno: rgba(0,0,0,.13);
/* «Il mio percorso»: le tonalità di sabbia della linea del tempo (mockup). Fondo asse,
tratto pieno (tessera), tratteggio (fermo/pausa), gambo — la tacca finale e l'alone
seguono invece l'accento. */
--perc-track: #F0ECE3;
--perc-pieno: #B8AE97;
--perc-tratto: #CBC3B2;
--perc-gambo: #C3BAA6;
color-scheme: light;
}
/* ===== tema scuro ===== */
html[data-theme="dark"] {
--page: #1A1A19;
--page-tenue:#201F1E;
--card: #242422;
--card-alta: #2E2E2B;
--border: #474642;
--text: #E9E7E1;
--muted: #97968F;
--rail: #201F1E;
--rail-border:#383734;
--riga-hover: #292927;
/* al buio è l'accento a dover risaltare sulla carta: pieno più chiaro, tenue scuro */
--accent: var(--acc-scuro);
--accent-tenue:var(--acc-tenue-d);
--accent-text: var(--acc-testo-d);
--accent-on: var(--acc-su-d);
--accent-banda:var(--acc-banda);
--ok:#5FA783; --ok-bg:#24422F; --ok-text:#9ED8B8;
--warn:#D5A24A; --warn-bg:#493617; --warn-text:#E6C489;
--arancio:#EF8B4B; --arancio-text:#F3AB7E;
--err:#E0776B; --err-bg:#4A2723; --err-text:#F0A99F;
--demo:#A98BD6; --demo-on:#1F1633;
--btn-bg:#E9E7E1; --btn-fg:#1A1A19;
/* L'ombra al buio non può restare quella chiara: l'inchiostro caldo (35,32,28) è quasi il
colore del fondo, quindi sparirebbe, e una .carta #242422 su una pagina #1A1A19 non
leggerebbe più come un foglio posato ma come un rettangolo appena più chiaro. Stessa
geometria a tre strati, nero pieno e molto più opaco: è l'opacità, non la forma, a
cambiare col tema. */
--ombra: 0 1px 1px rgba(0,0,0,.30),
0 2px 5px -1px rgba(0,0,0,.34),
0 14px 28px -12px rgba(0,0,0,.55);
--ombra-alta: 0 1px 1px rgba(0,0,0,.32),
0 4px 10px -2px rgba(0,0,0,.42),
0 22px 40px -14px rgba(0,0,0,.68);
/* Lo scheletro al buio va SOPRA la card (#242422), non sotto — al buio "vuoto" vuol dire
più chiaro, non più scuro. E la luce che lo percorre è un bianco al 7%, non all'85%:
quello, su fondo scuro, sarebbe un lampeggio. */
--scheletro: #32312E;
--scheletro-luce: rgba(255,255,255,.07);
/* La nera diventa un carbone (non nero pieno) e il contorno si schiarisce (§10). */
--cintura-nera: #3D3C39;
--cintura-contorno: #67655E;
--perc-track: #282826;
--perc-pieno: #575651;
--perc-tratto: #474642;
--perc-gambo: #575651;
color-scheme: dark;
}
/* "Di sistema": segue prefers-color-scheme quando il tema è system (o non impostato,
pre-JS). Ripete i token scuri — è l'unico modo per farli valere senza l'attributo. */
@media (prefers-color-scheme: dark) {
html[data-theme="system"],
html:not([data-theme]) {
--page:#1A1A19; --page-tenue:#201F1E; --card:#242422; --card-alta:#2E2E2B;
--border:#474642; --text:#E9E7E1; --muted:#97968F;
--rail:#201F1E; --rail-border:#383734; --riga-hover:#292927;
--accent:var(--acc-scuro); --accent-tenue:var(--acc-tenue-d);
--accent-text:var(--acc-testo-d); --accent-on:var(--acc-su-d); --accent-banda:var(--acc-banda);
--ok:#5FA783; --ok-bg:#24422F; --ok-text:#9ED8B8;
--warn:#D5A24A; --warn-bg:#493617; --warn-text:#E6C489;
--arancio:#EF8B4B; --arancio-text:#F3AB7E;
--err:#E0776B; --err-bg:#4A2723; --err-text:#F0A99F;
--demo:#A98BD6; --demo-on:#1F1633;
--btn-bg:#E9E7E1; --btn-fg:#1A1A19;
--ombra: 0 1px 1px rgba(0,0,0,.30), 0 2px 5px -1px rgba(0,0,0,.34), 0 14px 28px -12px rgba(0,0,0,.55);
--ombra-alta: 0 1px 1px rgba(0,0,0,.32), 0 4px 10px -2px rgba(0,0,0,.42), 0 22px 40px -14px rgba(0,0,0,.68);
--scheletro:#32312E; --scheletro-luce:rgba(255,255,255,.07);
--cintura-nera:#3D3C39; --cintura-contorno:#67655E;
--perc-track:#282826; --perc-pieno:#575651; --perc-tratto:#474642; --perc-gambo:#575651;
color-scheme: dark;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--sans);
color: var(--text);
background: var(--page);
font-size: 15px;
line-height: 1.5;
}
/* Titoli in Inter 600 (la "voce" dell'app), non in serif: la I di "I Dan" resta ad asta
pulita (§3.1, §7). Sentence case ovunque. */
h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; color: var(--text); }
/* Titolo di pagina più stretto (§3.1, restyle): ~22px, non 27. Il sottotitolo (.sottotitolo)
porta il contesto — stagione, conteggio — senza ripetere il nome dell'ente. */
h1 { font-size: 1.45rem; margin: 0 0 .2rem; }
h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
/* FocusOnNavigate (Routes.razor) porta il focus sull'h1 di pagina a ogni navigazione, così
lo screen reader riparte dal titolo. È un focus PROGRAMMATICO, non un gesto dell'utente:
l'anello di focus del browser sull'h1 (largo quanto la pagina) è solo rumore visibile, si
toglie. L'accessibilità resta — il focus c'è, non lo si disegna. */
h1:focus, h1:focus-visible { outline: none; }
/* Un nome o un grado dentro un elenco: in evidenza col peso 500, come il "valore" nell'app
(era la vecchia classe `.serif`, rinominata quando il serif è caduto). */
.risalto { font-weight: 500; color: var(--text); }
.kanji { font-family: var(--jp); }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* L'underline di a:hover è giusto per una parola-link in una frase, ma «cola» sui link che sono
scatole (pulsanti, piastrelle, righe-card) o affordance di ritorno: lì l'hover si mostra con
fondo/bordo, mai sottolineato. Questi opt-out lo spengono (la specificità :hover batte a:hover). */
.bottone:hover, .ev-riga:hover, .link-indietro:hover { text-decoration: none; }
.wordmark {
font-weight: 600;
font-size: 1.3rem;
color: var(--text);
padding: 0 1.25rem 1.1rem;
display: flex;
align-items: center;
gap: .6rem;
}
.wordmark .bollo-logo {
width: 32px; height: 32px;
border-radius: 7px;
object-fit: contain;
}
/* Card «in arrivo»: segnaposto centrato per una superficie disattivata nel pilota. */
.carta.in-arrivo { max-width: 480px; margin: 2rem auto; text-align: center; }
.carta.in-arrivo .in-arrivo-ico { color: var(--muted); margin-bottom: .4rem; }
.carta.in-arrivo .in-arrivo-ico svg { width: 40px; height: 40px; }
/* ===== Immagini pubbliche d'ente + moderazione (PILOTA) ===================== */
/* DORMIENTI dal 25 ago: .slot-immagine / .slot-anteprima / .slot-corpo vestivano la card
«Immagini pubbliche» delle Impostazioni ente, che conteneva solo un rimando ai timbri (logo e
copertina stanno nella testata, i timbri nel foglio di ogni maestro). Nessun markup le usa più;
restano perché sono la resa di uno slot immagine, e la moderazione qui sotto è viva. */
.slot-immagine { display: flex; gap: 1rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.slot-immagine:first-of-type { border-top: none; padding-top: 0; }
.slot-anteprima { flex: 0 0 auto; width: 130px; height: 84px; border-radius: 8px; border: 1px solid var(--border);
background: var(--page-tenue); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); }
.slot-anteprima img { max-width: 100%; max-height: 100%; object-fit: contain; }
.slot-corpo { flex: 1; min-width: 200px; }
.slot-corpo b { display: block; margin-bottom: .2rem; }
/* Badge di stato della moderazione: In revisione (ambra) / Pubblico (verde) / Da rivedere (rosso). */
.mod-badge { display: inline-block; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: 20px; }
.mod-badge.rev { background: var(--warn-bg); color: var(--warn-text); }
.mod-badge.pub { background: var(--ok-bg); color: var(--ok-text); }
.mod-badge.no { background: var(--err-bg); color: var(--err-text); }
.mod-nota { font-size: .8rem; color: var(--err-text); margin: .35rem 0; }
/* Sfondo a scacchi per leggere la trasparenza dei PNG (anteprima nella coda admin). */
.scacchi {
background-color: #fff;
background-image:
linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
/* Miniatura di una voce nella coda di moderazione media: quadratino con la scacchiera dietro
(le immagini possono essere trasparenti). */
.media-thumb { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; border-radius: 6px; border: 1px solid var(--border); }
.contenuto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* LA COLONNA DEL CONTENUTO — la larghezza e le spalle stanno QUI, in due variabili, e non
altrove: nel guscio a schede ci si allineano anche la barra e la fila delle schede (2 set), e
una misura scritta in tre posti si disallinea alla prima modifica. Chi ha bisogno della
colonna legge `--colonna` e `--colonna-lato`; nessuno riscrive i numeri. */
:root { --colonna: 1180px; --colonna-lato: 1.75rem; }
.pagina { padding: var(--colonna-lato); max-width: var(--colonna); width: 100%; }
.sottotitolo { color: var(--muted); margin: 0 0 1.25rem; }
/* --- superfici ---------------------------------------------------------- */
.carta {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.25rem;
}
/* Carta-modulo: un form breve non deve stirarsi a tutta pagina (§leggibilità). Stessa misura
che le pagine sorelle mettevano inline (DichiaraGrado, ChiediRatifica, ChiediAffiliazione). */
.carta.modulo { max-width: 560px; }
.griglia { display: grid; gap: 1rem; }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Tessere-statistica morbide: i numeri li porta il peso, non un secondo carattere (§3.1). */
.dato { font-weight: 600; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.01em; color: var(--text); }
.etichetta { color: var(--muted); font-size: .82rem; }
/* Il "perché" accanto a un numero grande: "+3 nel mese", "la più vecchia da 3 giorni". Un 2
nudo non dice se preoccuparsi. */
.dato-perche { font-size: .82rem; color: var(--muted); font-weight: 400; margin-left: .4rem; }
/* --- intestazione di pagina: titolo stretto + sottolinea di contesto ---
Il sottotitolo non ripete il nome dell'ente (già a schermo due volte). */
.pagina-titolo { font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .1rem; }
.pagina-sub { color: var(--muted); font-size: .88rem; margin: 0 0 1.25rem; }
/* --- carta: testa con titolo di sezione (maiuscolo, fioco) e azione ---- */
.carta-testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.carta-testa .spazio { flex: 1; }
.carta-titolo {
font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); opacity: .8;
}
.carta-azione, .carta-azione a { font-size: .8rem; }
/* La pastiglia di STATO accanto al titolo (§26 ago): non è un'azione — quindi non sta nello slot
a destra — ed è lo stato di ciò che la carta contiene, non uno dei suoi dati. Fra i dati, per
restare in colonna, si prendeva una riga intera per una parola sola.
Il distacco dal titolo lo dà il `gap` della testa più un filo: deve leggersi come «TESSERA ·
Valida», non come una seconda etichetta di sezione. I margini propri del badge si azzerano —
sono pensati per un flusso di testo, e quello in basso qui lo scentrerebbe nella riga flex.
`:empty` è la rete per la carta che dichiara lo slot e a volte non ha niente da metterci (la
tessera in modifica, l'ente che non gestisce la scadenza): senza, resterebbe il `gap`. */
.carta-pastiglia { display: inline-flex; margin-left: .15rem; }
.carta-pastiglia:empty { display: none; }
.carta-pastiglia .badge { margin: 0; }
/* Periodo delle statistiche accanto al titolo di una carta: SOLO etichetta, mai un comando. */
.carta-periodo { font-size: .8rem; color: var(--muted); white-space: nowrap; }
/* Il periodo della «Salute del dojo» è un COMANDO (25 ago): stessa taglia e stesso tono di
quando era etichetta — non deve gridare — ma con la freccina e il menù al clic, nello stile di
quello della lingua. Il contenitore è l'àncora: .menu è position:absolute e senza un antenato
posizionato scenderebbe dall'angolo della pagina. Allineato a destra perché nasce dallo slot
azione, che sta a destra nella testata della carta. */
.periodo-scelta { position: relative; display: inline-block; }
.carta-periodo.comando {
border: none; background: transparent; padding: 0; cursor: pointer;
font-family: var(--sans); color: var(--muted);
}
.carta-periodo.comando:hover { color: var(--accent-text); }
.carta-periodo .freccia { font-size: .7rem; }
.menu-periodo { right: 0; width: 240px; }
/* La riga che dice la conseguenza della scelta: è dell'ente, non una lente personale. */
.menu-nota {
margin: .35rem .55rem .1rem; font-size: .74rem; color: var(--muted); line-height: 1.4;
}
/* --- conteggio a pastiglia (accento / ambra / rosso) ------------------- */
.conteggio {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
font-size: .72rem; font-weight: 600;
background: var(--accent-tenue); color: var(--accent-text);
}
.conteggio.ambra { background: var(--warn-bg); color: var(--warn-text); }
.conteggio.rosso { background: var(--err-bg); color: var(--err-text); }
/* Riga "richiede attenzione": etichetta a sinistra, pastiglia di conteggio a destra. */
.df {
display: flex; align-items: center; gap: .5rem;
padding: .55rem .15rem; border-bottom: 1px solid var(--border);
color: var(--text); text-decoration: none;
}
.df:last-child { border-bottom: none; }
.df:hover { text-decoration: none; color: var(--accent-text); }
.df span:first-child { flex: 1; }
/* --- riga persona: quadratino-avatar + nome + meta + valore in coda ---- */
.riga-persona { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.riga-persona:last-child { border-bottom: none; }
.rp-av {
flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px;
background: var(--accent-tenue); color: var(--accent-text);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: .82rem;
/* `--jp` è «Noto Sans JP, poi il sans»: la faccia incorporata è un sottoinsieme di soli kanji,
quindi una lettera latina ci cade attraverso e resta nel carattere di sempre. Così la stessa
casella regge sia le iniziali di una persona sia il kanji di una disciplina, senza che chi
la riempie debba dire quale dei due sta passando (§26 ago). È la ricetta che `.hero .disc`
usa da sempre, e infatti quella casella si chiamava «Glifo» già prima di averne uno. */
font-family: var(--jp);
}
.rp-corpo { flex: 1; min-width: 0; }
.rp-nome { font-weight: 500; }
.rp-meta { font-size: .8rem; color: var(--muted); }
.rp-valore { margin-left: auto; flex: 0 0 auto; text-align: right; }
/* Riga persona come link: bersaglio tutto-riga, alone tenue, › discreto in coda. */
.riga-persona.linkabile {
cursor: pointer; color: var(--text); text-decoration: none;
margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem;
border-radius: 9px; transition: background .12s ease;
}
.riga-persona.linkabile:hover { background: var(--accent-tenue); color: var(--accent-text); }
.riga-persona.linkabile:hover .rp-meta,
.riga-persona.linkabile:hover .rp-vai { color: var(--accent-text); }
.rp-vai { flex: 0 0 auto; margin-left: .45rem; color: var(--muted); }
/* Avatar della riga quando ospita un segno grafico (SegnoGrado) al posto delle iniziali:
niente fondo accento, il token porta il suo, e l'SVG riempie la casella di 36px. */
.rp-av.rp-segno { background: transparent; padding: 0; }
.rp-av.rp-segno .token-svg { width: 36px; height: auto; display: block; }
/* --- barra strumenti delle liste (indice: ricerca + pastiglie filtro) --------------------
Usata sopra gli elenchi persona/entità (Soci, Corsi, Discipline, Maestri). Colori dalle
sole variabili, così luce/buio restano validi. La cerca cresce, i filtri stanno a destra. */
.toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .cerca {
flex: 1 1 220px; min-width: 200px; max-width: 340px;
border-radius: 999px; padding: .5rem .95rem;
}
.filtro { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.filtro .f {
display: inline-flex; align-items: center; gap: .35rem; width: auto;
font-family: var(--sans); font-size: .85rem; font-weight: 500;
padding: .4rem .8rem; border-radius: 999px;
border: 1.4px solid var(--border); background: transparent; color: var(--muted);
cursor: pointer; white-space: nowrap;
}
.filtro .f:hover { border-color: var(--accent); color: var(--text); }
.filtro .f.on { border-color: var(--accent); background: var(--accent-tenue); color: var(--accent-text); }
.filtro .f .spunta { visibility: hidden; }
/* Il conteggio in coda alla pastiglia (6 set): un gradino più tenue, cifre allineate. A zero la
pastiglia è spenta. */
.filtro .f .n { margin-left: .15rem; opacity: .7; font-variant-numeric: tabular-nums; }
.filtro .f:disabled { opacity: .45; cursor: default; }
.filtro .f:disabled:hover { border-color: var(--border); color: var(--muted); }
.filtro .f.on .spunta { visibility: visible; color: var(--accent); }
/* --- intestazioni ordinabili (tabella Soci) ----------------------------------------------
La colonna cliccabile ordina; ri-clic inverte. La freccia (.ar) sta sulla colonna attiva
(.on), in accento. Colori dalle sole variabili. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent-text); }
th.on { color: var(--accent-text); }
.ar { color: var(--accent); font-weight: 700; margin-left: .25rem; }
/* La cella «socio»: avatar (foto o iniziali) + gettone del grado + nome. */
.cell-socio { display: flex; align-items: center; gap: .6rem; }
.cell-socio .segno .token-svg { width: 34px; }
.cell-socio .rp-av { flex: 0 0 32px; width: 32px; height: 32px; }
/* La foto del socio nello slot in testa: stessa impronta della casella iniziali (.rp-av),
ma tonda e ritagliata. */
.rp-foto { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.cell-socio .rp-foto { flex: 0 0 32px; width: 32px; height: 32px; }
table.soci tbody tr { cursor: pointer; }
/* Barretta di presenza: traccia tenue + riempimento (verde ok), come su Home. */
.barrina { height: 6px; width: 64px; border-radius: 4px; background: var(--page-tenue);
display: inline-block; vertical-align: middle; position: relative; overflow: hidden; }
.barrina i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); border-radius: 4px; }
/* Scala a tre (§26 ago), la stessa per tutte e quattro le barre di frequenza: rosso sotto il
20%%, ambra fino al 60%%, verde sopra. Il verde non ha classe — è il colore di riposo scritto
nella regola base, e così nel markup si vede solo ciò che devia. Le soglie stanno in
`Budopass.Client.Frequenza`, non qui: il CSS sa i colori, non dove cadono. */
.barrina.media i { background: var(--arancio); }
.barrina.scarsa i { background: var(--err); }
/* Dettaglio corso: le sezioni della scheda Impostazioni su due colonne (a sinistra il corso e
i gradi, a destra gli orari). Le carte impilate in una colonna si distanziano da sole. */
.corso-due { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start; }
.corso-due > div { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 820px) { .corso-due { grid-template-columns: 1fr; } }
/* Orari come lista pulita (al posto della tabella): giorno + fascia oraria + sala + azioni. */
.orario { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .6rem .75rem;
border: 1px solid var(--border); border-radius: 10px; }
/* Conferma «rimuovi orario»: azione-prima. Va a capo a tutta larghezza dentro la riga (non
schiaccia giorno/ora/azioni) e presenta due card-scelta impilate, ognuna con la sua conseguenza;
la distruttiva usa il tono d'errore (washi hanko). */
.orario .orario-conferma { flex: 1 0 100%; display: flex; flex-direction: column; gap: .5rem;
margin-top: .15rem; }
.orario-conferma .oc-domanda { font-size: .9rem; font-weight: 600; color: var(--text); }
/* Card-scelta full-width: bordo tenue, glifo a sinistra, titolo + sottotesto muted. */
.orario-conferma .oc-scelta { display: flex; align-items: flex-start; gap: .6rem; width: 100%;
text-align: left; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: 11px;
background: var(--card); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.orario-conferma .oc-scelta:hover:not(:disabled) { border-color: var(--muted); }
.orario-conferma .oc-scelta:disabled { opacity: .55; cursor: default; }
.orario-conferma .oc-ico { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px;
background: var(--page-tenue); color: var(--muted); display: grid; place-items: center; margin-top: .05rem; }
.orario-conferma .oc-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.orario-conferma .oc-testo { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.orario-conferma .oc-tit { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.orario-conferma .oc-nota { font-size: .8rem; color: var(--muted); line-height: 1.35; }
/* Scelta distruttiva: tono hanko d'errore su fondo washi. */
.orario-conferma .oc-scelta.danno { background: var(--err-bg); border-color: var(--err-bg); }
.orario-conferma .oc-scelta.danno:hover:not(:disabled) { border-color: var(--err); }
.orario-conferma .oc-scelta.danno .oc-tit { color: var(--err-text); }
.orario-conferma .oc-scelta.danno .oc-ico { background: var(--err); color: #fff; }
/* Annulla discreto sotto le scelte. */
.orario-conferma .oc-annulla { align-self: flex-start; background: none; border: 0; padding: .1rem .1rem;
color: var(--muted); font-size: .85rem; cursor: pointer; }
.orario-conferma .oc-annulla:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
.orario-conferma .oc-azioni { display: flex; gap: .5rem; flex-wrap: wrap; }
.orario + .orario { margin-top: .5rem; }
.orario .g { font-weight: 600; min-width: 96px; }
.orario .h { font-family: monospace; }
.orario .sala { color: var(--muted); font-size: .82rem; }
/* Spaziatore flessibile generico (spinge a destra ciò che segue in una riga flex). Le regole
.X .spazio scoped restano valide; questa le generalizza dove non erano previste (toolbar liste). */
.spazio { flex: 1; }
/* --- testata-hero della scheda corso (v2) + striscia KPI (dati già caricati) --------------
Identità del corso a colpo d'occhio: tessera disciplina + nome + pastiglie, poi i numeri. */
.hero { display: flex; align-items: flex-start; gap: 1rem; }
.hero .disc {
width: 52px; height: 52px; border-radius: 12px; flex: 0 0 auto;
background: var(--accent-tenue); color: var(--accent-text);
display: grid; place-items: center; font-family: var(--jp); font-size: 1.5rem;
}
.hero-corpo { flex: 1; min-width: 0; }
.hero-corpo h1 { margin: 0; }
.hero-sub { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.dato-chip {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .78rem; font-weight: 600; color: var(--text);
background: var(--page-tenue); border: 1px solid var(--border); border-radius: 18px; padding: .25rem .6rem;
}
.kpi { display: flex; margin-top: .9rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.kpi .k { flex: 1; padding: .7rem .9rem; border-right: 1px solid var(--border); }
.kpi .k:last-child { border-right: none; }
.kpi .n { font-size: 1.15rem; font-weight: 700; line-height: 1.15; }
.kpi .l { font-size: .68rem; color: var(--muted); margin-top: .2rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 620px) { .kpi { flex-wrap: wrap; } .kpi .k { flex: 1 1 45%; } }
/* Riga settimana negli orari: 7 giorni, quelli con lezione in accento. */
.settimana { display: flex; gap: .35rem; margin-bottom: .75rem; }
.settimana .gg { flex: 1; text-align: center; font-size: .7rem; font-weight: 700; color: var(--muted);
background: var(--page-tenue); border-radius: 8px; padding: .45rem 0; }
.settimana .gg.on { background: var(--accent); color: var(--accent-on); }
/* --- Impostazioni: anteprima viva «come ti vedono gli allievi» (v2) -----------------------
Una scheda ente uguale a quella dell'app, legata ai campi @bind del form: si aggiorna dal vivo. */
.preview-lab { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; }
.ente-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--ombra); margin-bottom: 1rem; }
.ente-cover { height: 96px; position: relative; background: linear-gradient(120deg, var(--accent-tenue), var(--accent-banda)); }
.ente-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ente-logo {
position: absolute; left: 16px; bottom: -24px; width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
background: var(--card); border: 2px solid var(--card); box-shadow: 0 3px 8px rgba(0,0,0,.15);
display: grid; place-items: center; font-family: var(--jp); font-size: 1.5rem; color: var(--accent-text);
}
.ente-logo > img { width: 100%; height: 100%; object-fit: cover; }
.ente-body { padding: 2rem 1rem 1rem; }
.ente-body h3 { margin: 0; font-size: 1.05rem; }
.ente-body .m { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.ente-tag { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
/* --- archetipo dettaglio (schede socio/corso) --------------------------------------------
Una testata piena + una griglia a due colonne di carte. Le classi qui sotto sostituiscono i
vecchi style inline (flex a mano): spaziature e colori vengono solo dalle variabili. */
.det-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
/* Ogni colonna è una PILA che si impacchetta per conto suo (§26 ago), come `imp-griglia` nelle
impostazioni. In auto-flow le carte si allineavano alla riga, cioè alla più alta delle due:
fra una carta e la successiva restavano buchi che nessuno aveva scelto. */
.det-griglia > .det-col { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 720px) { .det-griglia { grid-template-columns: 1fr; } }
/* Impostazioni utente: le carte su due colonne affiancate (assegnazione esplicita, niente
auto-flow), ciascuna colonna una pila con lo stesso gap delle carte. Sotto soglia, una sola
colonna con le carte impilate nell'ordine del markup. */
.imp-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; max-width: 960px; }
.imp-griglia > .imp-col { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 720px) { .imp-griglia { grid-template-columns: 1fr; } }
/* Testata: avatar del socio + identità (col grado accanto al nome), con l'azione in alto a
destra (slot Azione della carta). */
.det-intestazione { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.det-chi { flex: 1; min-width: 200px; }
/* Le azioni della testata stanno DENTRO la riga dell'identità (§26 ago), non nello slot `Azione`
della carta. Quello slot vive nella testa della carta, accanto al titolo: qui un titolo non
c'è, e la testa veniva su come una fascia vuota alta quanto due pulsanti, con mezza carta di
niente accanto — spazio che non conteneva nulla e che si notava solo perché era vuoto.
Nella riga si allineano al centro dell'identità, che con nome / codice socio / stato vuol dire
proprio all'altezza del codice socio. A destra ci vanno da sé — `.det-chi { flex: 1 }` li
spinge —, ma `margin-left: auto` è la rete per il giorno in cui quel flex cambiasse. */
.det-intestazione-azioni { display: flex; gap: .5rem; flex-wrap: wrap; flex: none; margin-left: auto; }
.det-chi h1 { margin: 0; }
.det-badge { margin-top: .4rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.segno.segno-grande .token-svg { width: 66px; }
/* Avatar di testata: la foto (o le iniziali) nello slot in testa, ~72px e tondo. */
.det-foto { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.det-iniziali {
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-tenue); color: var(--accent-text);
font-weight: 600; font-size: 1.4rem;
}
/* Nome + gettone del grado su una riga: il segno sta accanto al titolo (non più in testa). */
.det-nome { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.det-nome .segno .token-svg { width: 40px; }
.mono { font-family: monospace; }
a.badge { text-decoration: none; }
/* Gruppo chiave/valore in lettura (etichetta fioca + valore in risalto). */
.det-dati { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0 1rem; }
/* DATI e BOTTONI non si toccano (§26 ago): quando una carta mostra dei dati e poi delle azioni,
fra i due ci va una riga. Senza, i pulsanti si leggono come un valore in più della fila —
«Rinnova tessera» sembrava il contenuto della colonna che gli stava sopra.
La regola sta QUI e non nelle singole pagine: vale ovunque i due blocchi si susseguano, e una
carta nuova se la ritrova senza doversene ricordare. Il selettore di fratellanza è preciso di
suo — scatta solo quando le azioni seguono davvero dei dati, non per ogni `.det-azioni` della
pagina (nei form, dove i bottoni chiudono dei campi, la riga non ci va). `.det-rinnovo` è la
stessa transizione col pannello inline aperto al posto del bottone. */
.det-dati + .det-azioni,
.det-dati + .det-rinnovo { border-top: 1px solid var(--border); margin-top: 0; padding-top: .9rem; }
/* Righe di campi in modifica: i .campo dentro si dividono lo spazio e vanno a capo. */
.det-campi { display: flex; gap: .75rem; flex-wrap: wrap; }
.det-campi .campo { flex: 1 1 150px; min-width: 140px; margin-bottom: 0; }
/* `pari`: le colonne restano della STESSA misura anche sull'ultima riga (§26 ago). In flex un
campo che resta solo in coda si allarga per tutta la riga — «Scadenza» diventava largo il
triplo di «Rinnovo» che gli sta sopra, e un campo data largo mezza carta promette uno spazio
che non serve a nessuno. `auto-fill` tiene le tracce vuote; `auto-fit` le collassa, ed è tutta
la differenza fra un campo che resta in colonna e uno che si mangia la riga.
È un MODIFICATORE e non la nuova regola di `.det-campi`: in giro per l'app quel contenitore
porta decine di pesi scritti a mano sui campi (`style="flex:2"` accanto a `flex:1`, per dare
più spazio a un comune che a un CAP), e in griglia diventerebbero tutti uguali senza che
nessuno se ne accorga. Si mette dove i campi sono davvero pari fra loro. */
.det-campi.pari { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
/* I bottoni di un FORM stanno in fondo a destra (§26 ago): dove finisce la lettura dei campi
finisce anche la riga, e l'occhio li trova dove li ha lasciati l'ultimo campo. Vale solo per le
azioni che seguono davvero dei campi — le azioni di una CARTA (che seguono dei dati, o stanno
da sole) restano a sinistra, dove cominciano le cose che si leggono. */
.det-campi + .det-azioni { justify-content: flex-end; }
/* Riga di pulsanti; nella scheda quota ospita anche il campo data (largo quanto basta). */
.det-azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .25rem; }
.det-azioni input[type="date"] { width: auto; }
/* Il filo fra due gruppi di azioni (§26 ago): a sinistra i gesti che si disfano, a destra quelli
che non si disfano. `align-self: stretch` gli dà l'altezza dei bottoni senza fissarla a mano.
Sotto la soglia i pulsanti vanno a capo e il filo non separerebbe più niente: sparisce. */
.det-sep { width: 1px; align-self: stretch; background: var(--border); margin: .1rem .35rem; }
@media (max-width: 720px) { .det-sep { display: none; } }
/* Il TAGLIO in fondo alla scheda socio (§26 ago), prima delle azioni sulla pratica: separa ciò
che si LEGGE da ciò che AGISCE. Sfuma ai bordi invece di correre da parte a parte — così è una
pausa nella pagina e non l'ennesima riga di tabella, che qui dentro ce ne sono già molte. Lo
spazio sopra è il doppio di quello sotto: il filo appartiene a quello che viene DOPO. */
.det-taglio {
border: 0; height: 1px; margin: 2.2rem 0 1.1rem;
background: linear-gradient(to right, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
/* Il pannello di modifica che si apre nella testata: staccato da una linea. */
.det-forma { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.det-forma .det-campi { margin-bottom: .75rem; }
.det-forma h3 { margin-top: 0; }
/* Riga di azioni allineata a destra (in fondo a un form: es. Salva della scheda corso). */
.det-azioni.fine { justify-content: flex-end; }
/* Lista di spunte scorrevole (roster: aggiungi soci a un corso). */
.roster-scroll { max-height: 320px; overflow: auto; margin-bottom: .5rem; }
/* Avviso con cornice d'attenzione (conferme di generazione/disattivazione): il warn non segue
l'accento, come i badge di stato. Sostituisce lo style inline «border:1px solid var(--warn)». */
.avviso.attenzione { border: 1px solid var(--warn); margin-top: .75rem; }
/* --- tabelle (in Inter, leggibili anche fitte — §3.1) ------------------- */
table { width: 100%; border-collapse: collapse; }
th {
text-align: left;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-weight: 600;
padding: .55rem .6rem;
border-bottom: 1px solid var(--border);
}
td { padding: .6rem; border-bottom: 1px solid var(--border); }
/* --- la tabella dei gradi, dentro una carta di mezza pagina (§26 ago) ------------------
Cinque colonne in poco più di 500px: la data andava a capo («30 mag / 26») e i due
pulsanti si impilavano uno sotto l'altro — su sei gradi, dodici bottoni in colonna.
La regola è che UNA sola colonna può cedere, quella del nome: a stringersi manda a capo
una parola e non fa danno. Tutte le altre portano un dato che non si spezza — una data,
un timbro, due comandi — e `width: 1%` su una cella di tabella è il modo di dire
«prenditi lo stretto necessario»: il browser dà il minimo a chi lo chiede e tutto il
resto a chi non dice niente.
Il respiro orizzontale scende da .6 a .4rem: cinque colonne fanno dieci margini interni,
ed erano quasi cento pixel spesi in aria dove l'aria non c'era. I pulsanti passano a
`mini`, che è la misura pensata per le azioni di RIGA — qui sono esattamente quelle. */
.tab-gradi td { padding: .6rem .4rem; }
.tab-gradi td:first-child { padding-left: 0; }
.tab-gradi td:last-child { padding-right: 0; }
.tab-gradi .g-segno, .tab-gradi .g-data, .tab-gradi .g-timbro, .tab-gradi .g-azioni { width: 1%; }
.tab-gradi .g-data { white-space: nowrap; }
.tab-gradi .g-timbro { text-align: center; }
.tab-gradi .g-azioni > div { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: nowrap; }
/* `flex: none`: senza, in stretta i due pulsanti si comprimerebbero invece di chiedere spazio
alla colonna del nome — ed è quella del nome, che manda a capo una parola, la sola che deve
cedere. Un pulsante schiacciato non si legge, e qui non c'è niente da guadagnarci. */
.tab-gradi .g-azioni .bottone { white-space: nowrap; flex: none; }
tbody tr:hover { background: var(--riga-hover); }
tbody tr:last-child td { border-bottom: none; }
/* Intestazioni ordinabili (elenco «Soci»): tutta la cella è cliccabile, la freccia occupa
sempre il suo spazio (anche vuota) così la larghezza non balla quando cambia colonna
attiva. La freccia si accende solo sull'attiva; l'hover scurisce il testo per invitare al
clic. */
th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
th.ord:hover { color: var(--text); }
th.ord.attiva { color: var(--text); }
th.ord .freccia {
display: inline-block; width: .8em; margin-left: .25rem;
font-size: .7rem; text-align: center; opacity: .5;
}
th.ord.attiva .freccia { opacity: 1; }
/* --- controlli ---------------------------------------------------------- */
/* La famiglia dei controlli. input, select e textarea condividono con CampoData l'altezza
(min 2.5rem, così vanno in fila col campo data), il raggio (--raggio-s) e — sul focus —
l'anello morbido hanko (box-shadow + accent-tenue) al posto dell'outline netto.
Caselle e radio sono fuori da TUTTA la regola, non solo dall'altezza (§27 ago). Prima
l'esclusione stava solo sul `min-height` qui sotto, e la conseguenza vera era `width: 100%`:
un radio grezzo misurava 859 px — tutta la riga — e mandava la sua etichetta a capo su tre
righe; una casella dentro una riga flex si prendeva lo spazio di tutti gli altri elementi,
che restavano a schermo larghi ZERO. Bordo, padding e sfondo il browser li ignora già sui
controlli nativi (misurato: border 0px, padding 0px), quindi la larghezza era l'unica cosa
che arrivava davvero — ed era quella sbagliata.
Nessuno ci era cascato prima perché il design system ha i suoi componenti e quasi tutto li
usa: le liste multi-scelta vanno con `Spunta`, gli on/off singoli con `Interruttore`. Questa
riga esiste perché chi scriverà il prossimo input grezzo non ricada nella stessa buca. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
font-family: var(--sans);
font-size: .92rem;
padding: .5rem .65rem;
border: 1px solid var(--border);
border-radius: var(--raggio-s);
background: var(--card);
color: var(--text);
width: 100%;
min-height: 2.5rem;
}
/* Focus: l'anello morbido di CampoData (.campo-data:focus-within), non l'outline netto. */
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-tenue);
}
/* Disabilitato: si spegne come .campo-data.dis — fondo tenue, testo muto, non cliccabile.
`background-COLOR`, e non l'abbreviazione `background` (§28 ago). L'abbreviazione azzera tutto
quello che non nomina, quindi si portava via anche il `background-repeat: no-repeat` del chevron
qui sotto — e con specificità 0-1-1 batteva `select` (0-0-1), che è dove il no-repeat sta. Al
buio l'immagine tornava lo stesso da `html[data-theme="dark"] select` (0-1-2, che vince su
tutti e due): immagine sì, ripetizione sì, e il chevron si affiancava a sé stesso venti volte
per la larghezza del controllo. In chiaro lo stesso difetto era invisibile e opposto —
l'immagine non tornava affatto, e il select spento restava senza freccia.
È la SECONDA volta che un'abbreviazione di questo foglio costa un pomeriggio: il 26 ago era la
regola globale `input, select, textarea` che rompeva il modulo delle chiusure. Non si cura
alzando la specificità di `select` né con un `!important` — quello nasconde la trappola invece
di toglierla, e la lascia armata per il prossimo. Si cura nominando la proprietà che si voleva
davvero cambiare. */
input:disabled, select:disabled, textarea:disabled {
background-color: var(--page-tenue); color: var(--muted); cursor: not-allowed;
}
/* Select: via la freccia del sistema (appearance:none), mettiamo la NOSTRA — un chevron SVG
come background-image (data-URI, tratto in --muted), con spazio a destra così il testo non
ci finisce sotto. La tendina resta NATIVA: appearance:none veste solo la scatola, non il
menu, che su mobile è quello di sistema (il migliore). Nessuna tendina custom. */
select {
appearance: none; -webkit-appearance: none;
padding-right: 2.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236B6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .7rem center;
background-size: 1.05rem;
cursor: pointer;
}
/* Il chevron è "cotto" nel data-URI, quindi il suo colore non segue il token: al buio lo si
riscrive col --muted scuro (tema manuale e "di sistema"), così resta leggibile sulla carta scura. */
html[data-theme="dark"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2397968F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
html[data-theme="system"] select,
html:not([data-theme]) select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2397968F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
}
label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.campo { margin-bottom: .9rem; }
/* CampoData — un solo campo data (componente CampoData.razor, mockup budopass_campo_data.html).
La veste è nostra; al clic si apre un CALENDARIO nostro (.cd-pop qui sotto), tematizzato dai token
→ leggibile in chiaro e in scuro. Prima si apriva il picker del SISTEMA (un
trasparente sotto la veste): su ROM che forzano lo scuro ignorando color-scheme i giorni finivano
chiari su fondo chiaro, invisibili. Altezza e raggio come gli del form, così cade in fila
con gli altri campi senza stonare. */
.campo-data {
position: relative;
display: flex; align-items: center; gap: .55rem;
min-height: 2.5rem; padding: 0 .7rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--raggio-s);
cursor: pointer;
transition: border-color .12s, box-shadow .12s;
}
.campo-data .val { flex: 1; font-size: .92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stato vuoto: nome dedicato (non `.vuoto`, che è la utility globale per liste/tabelle
vuote e porterebbe padding 2.5rem — gonfiava il campo solo quando era vuoto). */
.campo-data .val.senza-valore { color: var(--muted); }
.campo-data .cal { width: 18px; height: 18px; flex: none; color: var(--muted); display: inline-flex; }
.campo-data .cal svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.campo-data:hover { border-color: var(--muted); }
/* focus / calendario aperto: l'anello segue l'accento, come gli altri campi (.auth .campo input:focus). */
.campo-data:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tenue); }
.campo-data:focus-within .cal { color: var(--accent); }
/* errore: vira il campo, non solo il testo sotto (§ mockup). */
.campo-data.err { border-color: var(--err); background: var(--err-bg); }
.campo-data.err .cal { color: var(--err); }
/* disabilitato: si spegne e non è cliccabile. */
.campo-data.dis { background: var(--page-tenue); border-color: var(--border); cursor: not-allowed; }
.campo-data.dis .val { color: var(--muted); }
/* ✕ per svuotare (solo con un valore e se non obbligatorio). Sta SOPRA lo scatto (z-index) così il
suo clic svuota senza aprire il calendario. */
.campo-data .x { position: relative; z-index: 2; width: 18px; height: 18px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--page-tenue); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.campo-data .x:hover { color: var(--text); }
.campo-data .x svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* Lo scatto: un