/* Registro Accademico — i pezzi condivisi
 *
 * Li usano le pagine su misura del gestore **e** il tema dell'admin
 * (`gestione.css`). Se li scrivessimo due volte divergerebbero, e la prima
 * tabella storta sarebbe quella dell'appello.
 *
 * Due regole dell'identità visiva, che valgono per tutto quello che c'è qui:
 *
 * - **nessun raggio.** L'unico `border-radius` del progetto è `.feature__bullet`,
 *   che è un cerchio apposta
 * - **il colore è una riga o un quadratino, mai un pannello pieno.** `.avviso`
 *   porta la barretta a sinistra di `.login-form__message`, che era l'unico
 *   avviso del progetto e da cui questo strato è cresciuto
 */

/* ---------- Cornice ----------
 *
 * Spostate da `homepage.css` senza cambiare nome. La testata era di una pagina
 * sola; ora la portano homepage, area personale e tutte le schermate dell'admin,
 * che `homepage.css` non lo caricano — lì dentro restano `.hero`, `.features` e
 * `.access`, che sono davvero della sola homepage.
 */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px clamp(20px, 3vw, 28px);
  flex-wrap: wrap;
  padding: 12px var(--bordo);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
}

.brand__logo {
  height: clamp(46px, 8vw, 60px);
  width: auto;
  display: block;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--line);
  padding-left: clamp(12px, 2vw, 18px);
}

.brand__institution {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.brand__title {
  font-size: clamp(17px, 2.2vw, 19px);
  letter-spacing: 0.03em;
  color: var(--ink);
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 34px);
  flex-wrap: wrap;
}

.site-nav__link {
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text);
  padding: 13px 2px;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover { border-bottom-color: var(--yellow); }

.site-main { flex: 1; }

/* Su schermo stretto la navigazione va a capo su una riga tutta sua */
@media (max-width: 600px) {
  .site-nav {
    flex-basis: 100%;
    justify-content: space-between;
  }
}

/* ---------- Menu delle aree ----------
 *
 * `<details>` e non JavaScript: si apre col tocco e con la tastiera, e il
 * progetto non ha JS oltre a `login.js`.
 */

.menu { position: relative; }

.menu__testa {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* La freccetta di serie di `<summary>`, in due dialetti */
.menu__testa::-webkit-details-marker { display: none; }
.menu__testa::marker { content: ""; }

.menu[open] > .menu__testa { border-bottom-color: var(--yellow); }

/* L'area in cui si è: la stessa riga gialla del pannello aperto, senza aprirlo.
   Prima l'indicazione era l'`open`, cioè il pannello sopra il contenuto. */
.menu--qui > .menu__testa { border-bottom-color: var(--yellow); }

.menu__voci {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* L'ultimo pannello si aggancia al bordo destro della propria voce e non al
   sinistro: ancorato a sinistra arrivava a dieci pixel dal bordo della finestra,
   dove la testata ne ha `--bordo`, e sfondava il margine della pagina. */
.menu:last-of-type .menu__voci {
  left: auto;
  right: 0;
}

.menu__voce {
  display: block;
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  white-space: nowrap;
}

.menu__voce:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

.menu__voce--qui {
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--yellow);
}

.site-nav__esci { display: flex; }

/* Su schermo stretto il pannello non ha spazio per uscire di lato, e ancorarlo
   al `<details>` non basta: a 380px «Registri» sforava di 28 pixel a destra
   — con la pagina che si metteva a scorrere — e ancorandolo a destra
   «Catalogo» partiva a x = −71, cioè con le etichette oltre il bordo dello
   schermo e il riquadro che sembrava vuoto. Si ancora al viewport: `top: auto`
   lo lascia cadere sotto il proprio `summary`, e si allarga da un margine
   all'altro. */
@media (max-width: 600px) {
  .menu__voci {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    min-width: 0;
  }
}

/* ---------- Briciole ---------- */

.briciole {
  padding: 18px clamp(18px, 4vw, 54px) 0;
  background: var(--bg);
}

/* ---------- Piede ---------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(44px, 6vh, 68px) var(--bordo) 30px;
}

.footer-brand__title {
  font-size: 19px;
  letter-spacing: 0.03em;
  color: #ffffff;
  font-weight: 400;
}

.site-footer__bottom {
  max-width: 1440px;
  margin: clamp(36px, 5vh, 56px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--dark-rule);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__fineprint {
  font-size: 12px;
  color: var(--on-dark-faint);
  font-weight: 300;
}

/* Il piede dell'area di lavoro: nessuna griglia sopra, quindi né la riga di
   separazione né il margine che la staccava avrebbero da cosa separare. */
.site-footer--stretto { padding: 26px var(--bordo); }

.site-footer--stretto .site-footer__bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  align-items: baseline;
}

/* ---------- Campi ----------
 *
 * Spostate da `login.css` senza cambiare nome: `accesso.html` e `login.js` non
 * si accorgono di niente, e i form del gestore ereditano lo stesso campo con la
 * sola riga sotto.
 */

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 26px;
}

.field--first { margin-top: 38px; }

.field__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  padding: 12px 2px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
}

.field__input:focus { border-bottom-color: var(--ink); }

.field__password {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-input);
}

.field__password:focus-within { border-bottom-color: var(--ink); }

.field__password .field__input {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  letter-spacing: 0.08em;
}

.password-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 2px;
  color: var(--muted);
  transition: color .18s ease;
}

.password-toggle:hover { color: var(--ink); }

/* Sbarra diagonale mostrata quando la password è in chiaro */
.password-toggle__slash { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle__slash { display: inline; }

/* Il campo su una riga sola, per i form del gestore che ne allineano tre */
.field--in-linea {
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  margin-top: 0;
}

/* ---------- Tabella ----------
 *
 * Righe separate da una riga sottile, senza zebratura: il fondo alternato
 * inventa una gerarchia che nei dati non c'è.
 */

.tabella {
  width: 100%;
  border-collapse: collapse;
}

.tabella th {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
  vertical-align: bottom;
}

.tabella th,
.tabella td {
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 16px 14px 0;
  font-weight: 300;
  vertical-align: top;
}

.tabella td { font-size: 15px; color: var(--text); }
.tabella tbody tr:hover { background: var(--bg-alt); }

.tabella td:last-child,
.tabella th:last-child { padding-right: 0; }

/* Una riga che non conta più: annullata, ritirata, scaduta */
.tabella tr.spenta td { color: var(--muted); }
.tabella tr.spenta .quando { text-decoration: line-through; }

/* L'ultima colonna è quella delle azioni. Allineata a sinistra come il testo,
   il collegamento finiva ottanta pixel prima del filo di riga e il bordo destro
   della tabella si sfilacciava, in una tabella dove tutte le altre colonne sono
   allineate a destra. */
.tabella .azione { text-align: right; }
.tabella .azione .azioni-riga { justify-content: flex-end; }

/* I numeri si leggono incolonnati */
.tabella .cifra {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Una tabella senza intestazione divide lo spazio sul contenuto, e il risultato
   è arbitrario: sui referenti dell'allievo la colonna della posta veniva larga
   il doppio delle altre e fra l'indirizzo e il telefono restavano quattrocento
   pixel di niente. A parti uguali si legge come una griglia. `overflow-wrap`
   perché un indirizzo lungo non ha spazi da cui andare a capo. */
.tabella--parti-uguali { table-layout: fixed; }
.tabella--parti-uguali td { overflow-wrap: anywhere; }

/* Le colonne fisse dei due elenchi dei recuperi individuali — «assenze da
   recuperare» e «lezioni che sa già di perdere». Sono due tabelle identiche una
   sotto l'altra, e ognuna si calcolava le colonne sul proprio contenuto: si
   leggevano sfalsate di cinque e otto pixel. */
.tabella .colonna-ore { width: 7em; }
.tabella .colonna-azione { width: 11em; }

/* L'admin fa scorrere le sue tabelle; le nostre vanno messe qui dentro */
.scorre { overflow-x: auto; }

/* ---------- Scheda ----------
 *
 * È `.access__card` della homepage: bordo da 1px, niente raggio, niente ombra.
 */

.scheda {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 38px);
}

.scheda + .scheda { margin-top: clamp(18px, 2vw, 26px); }

.scheda__titolo {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.scheda__sottotitolo {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
}

/* ---------- Avviso ----------
 *
 * Generalizza `.login-form__message`. Nessun fondo colorato: il colore sta
 * nella barretta, e basta.
 */

.avviso {
  border-left: 2px solid var(--muted-cool);
  padding: 12px 0 12px 16px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-soft);
}

.avviso + .avviso { margin-top: 12px; }

.avviso--ok         { border-left-color: var(--green); }
.avviso--attenzione { border-left-color: var(--orange); }
.avviso--errore     { border-left-color: var(--red); }
.avviso--info       { border-left-color: var(--blue); }

.avviso__titolo {
  display: block;
  color: var(--ink);
  font-weight: 400;
}

.avviso a {
  color: var(--text-soft);
  border-bottom: 1px solid var(--line-inline);
}

.avviso a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Pillola ----------
 *
 * Lo stato, col quadratino dell'identità davanti. Stessa misura di `.dots span`.
 */

.pillola {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.pillola::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  background: var(--muted-cool);
}

.pillola--programmata::before { background: var(--blue); }
.pillola--svolta::before      { background: var(--green); }
.pillola--annullata::before   { background: var(--red); }
.pillola--attesa::before      { background: var(--orange); }
/* Come «svolta»: è la stessa cosa vista dal recupero individuale. */
.pillola--effettuata::before  { background: var(--green); }

/* ---------- Barra ----------
 *
 * La copertura del monte ore, a tre segmenti. Le ore svolte in inchiostro, le
 * programmate in grigio, e lo scoperto resta il fondo: è quello che manca.
 */

.barra {
  display: flex;
  height: 8px;
  background: var(--line-soft);
  overflow: hidden;
}

.barra__svolte      { background: var(--ink); }
.barra__programmate { background: var(--muted-cool); }

.barra__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
}

.barra__legenda b {
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ---------- Numeri ---------- */

.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numeri > li {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* Dentro una scheda i numeri seguono la sottodescrizione, e vogliono uno stacco:
   senza, il filo sopra il primo numero cade esattamente sulla sottolineatura del
   collegamento che chiude quella riga — due fili alla stessa altezza e di
   lunghezza diversa, che si leggono come un errore di stampa. */
.scheda .numeri { margin-top: 22px; }

.numeri__quanto {
  display: block;
  font-size: 32px;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.numeri__etichetta {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Azioni ---------- */

.azioni {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Il collegamento tipografico accanto a un `.btn`: annulla, torna indietro */
/* `inline-block` e non `inline`: l'imbottitura sotto e il bordo di un elemento
   in linea escono dal proprio rigo e finiscono su quello successivo. Dentro un
   paragrafo che va a capo — la sottodescrizione di una scheda, la nota
   organizzativa dell'appello — il filo **barrava** il testo della riga sotto.
   Da elemento in linea a blocco il rigo si fa alto quanto serve. In un
   contenitore `flex` (`.azioni`, `.filtri`) non cambia niente: là il `display`
   dei figli è comunque riscritto. */
.azioni__link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-mid);
  padding-bottom: 4px;
}

.azioni__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Sezione ----------
 *
 * Il titolo di sezione delle pagine su misura: l'occhiello sopra, la riga
 * spessa sotto. È l'idioma di `.features` nella homepage.
 */

.sezione { margin-top: clamp(40px, 6vh, 72px); }

.sezione__testa {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.sezione__titolo {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 200;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Il corpo di una sezione: la stessa distanza dal titolo che `.features__list`
 * tiene nella homepage. Serve perché `.numeri`, `.tabella` e gli avvisi hanno
 * margine proprio a zero — appoggerebbero sulla riga spessa del titolo. */
.sezione__corpo { margin-top: 26px; }

/* ---------- Percentuale di presenza ----------
 *
 * Il numero e, sotto, su quante lezioni è calcolato: senza, un 33% di ottobre non si
 * distingue da un 33% di maggio, e il primo è «una lezione persa su tre».
 *
 * Sotto soglia il colore è quello dell'annullamento, e non un fondo pieno: il colore
 * qui è una riga o un quadratino, mai un pannello.
 */

.percentuale {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.percentuale--sotto { color: var(--red); }

.percentuale__su {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
}

/* La riga di servizio sotto il nome: perché è uscito, quante lezioni ha comprato.
 * **Non `.quando`**, che in una riga `.spenta` viene barrata: nel calendario quel
 * barrato dice «questa data non è successa», e sul motivo dell'uscita direbbe che
 * il ritiro è stato annullato. */
.riga-nota {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

.pillola--sotto-soglia::before { background: var(--red); }

/* La riga che separa chi è ancora nel turno da chi ci è passato. */
.tabella tr.separatore td {
  padding-top: 26px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-mid);
}

/* Una scheda che non conta più: un corso di un anno chiuso, un'iscrizione ritirata.
 * Il bordo si attenua e il titolo passa al grigio; il contenuto resta leggibile,
 * perché è proprio quello che si va a rileggere. */
.scheda.spenta { border-color: var(--line-soft); }
.scheda.spenta .scheda__titolo { color: var(--muted); }

/* La matrice del riepilogo ore: dieci colonne di mesi più i nomi. Le celle dei
   numeri stanno strette, così le tre colonne di testo restano leggibili senza
   che la tabella sfondi il contenitore. */

/* Larga quanto il suo contenuto, non quanto la pagina. `.tabella` impone
   `width: 100%`, che con dodici colonne va benissimo e con due — un docente
   filtrato su un mese solo — stira la riga per mezzo schermo: il turno finisce
   a sinistra, le sue ore a destra, e in mezzo c'è il vuoto da attraversare con
   l'occhio. Se le colonne tornano tante ed eccede, `.scorre` fa il suo lavoro. */
.matrice { width: auto; }
.matrice td.cifra,
.matrice th.cifra { padding-left: 8px; padding-right: 8px; white-space: nowrap; }

/* `.tabella th` è maiuscolo con 0.26em di spaziatura: su una intestazione sola è
   una scelta di stile, su dieci di fila è una fascia che occupa mezza tabella. */
.matrice thead th.cifra { letter-spacing: 0.08em; }

/* La riga dei totali deve leggersi come un totale. Senza queste righe eredita
   `.tabella th`, cioè 11px maiuscoli e grigi: sarebbe **meno** visibile dei
   numeri che riassume. */
.matrice tfoot th {
  border-top: 2px solid var(--line-mid);
  font-size: 15px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  /* Almeno quanto i totali di riga, che sono in `<b>`: senza, il numero più
     importante della pagina — il totale dell'anno — sarebbe l'unico non marcato. */
  font-weight: 600;
}

/* La riga del selettore e del bottone, accanto al titolo della sezione. */
.filtro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* La riga dei filtri del riepilogo ore, sotto il titolo della sezione: cinque
   controlli non stanno accanto a un titolo, e a schermo stretto vanno a capo
   invece di comprimersi. */
.filtri {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 18px;
}

.filtri__voce { display: flex; flex-direction: column; gap: 4px; }

/* Il collegamento che azzera i filtri è alto quanto un campo, non quanto la sua
   parola: con `align-items: flex-end` gli si allineava il **fondo** a quello
   delle tendine, e il suo testo cadeva undici pixel sotto il loro. Alto 50px
   come `.field__input` e col testo centrato, la parola torna sulla stessa riga
   e il filo sotto resta quello dei campi accanto. */
.filtri .azioni__link {
  align-items: center;
  display: inline-flex;
  height: 50px;
  padding-bottom: 0;
}

.filtri__voce > span {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}