/* ============================================================
   CertoFlow — area azienda e fascicolo del corso
   Il fascicolo si stampa: è un documento, non una schermata.
   ============================================================ */

/* ---------- Cruscotto ---------- */
.gest-testata {
  padding: 48px 0 36px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-top: 6px solid var(--ink-4);
}
.gest-ok { border-top-color: var(--good); }
/* Grigio neutro, non arancione: vedi area.css. */
.gest-attenzione { border-top-color: var(--ink-3); }
.gest-testata h1 { font-size: clamp(28px, 4.4vw, 40px); margin-bottom: 26px; }
.gest-attenzione h1 { color: var(--ink); }
/* Un'azienda appena creata non e' "in regola": e' vuota. Barra neutra,
   nessun verde rassicurante su un dato che ancora non esiste. */
.gest-neutra { border-top-color: var(--ink-3); }
.gest-neutra h1 { color: var(--ink); }

.kpi-riga {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
/* ⚠️ La riga dei numeri è nata dentro la testata, dov'è sempre l'ultima
   cosa e lo spazio sotto glielo dà la testata. Messa in mezzo a una
   pagina si incollava al titolo successivo. Lo spazio se lo prende da
   sola, ma solo quando serve: dentro la testata è ancora l'ultima, e la
   regola non la tocca. */
.kpi-riga:not(:last-child) { margin-bottom: 32px; }

.kpi {
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kpi-ok   { background: var(--good-soft); }
.kpi-warn { background: var(--warn-soft); }
.kpi-bad  { background: var(--bad-soft); }

.kpi-valore { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.kpi-etichetta {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin-top: 4px;
}

.gest-corpo { padding: 38px 24px 72px; }

.edizioni, .persone { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.edizione-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.edizione-link:hover { border-color: var(--accent); text-decoration: none; }

.edizione-corpo { display: grid; gap: 3px; }
.edizione-titolo { font-size: 17px; font-weight: 600; }
.edizione-meta { font-size: 14px; color: var(--ink-3); }

.persona {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.persona-nome { font-size: 16px; font-weight: 600; }
.persona-mansione { font-size: 14px; color: var(--ink-3); }

/* ---------- Fascicolo ---------- */
.fascicolo {
  max-width: 900px;
  margin: 24px auto;
  padding: 34px 32px 60px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.fascicolo-testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 26px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.fascicolo-testa h1 { font-size: clamp(24px, 3.6vw, 32px); margin: 6px 0 8px; }
.fascicolo-meta { font-size: 14px; color: var(--ink-3); margin: 0 0 3px; }

.fascicolo-conserva {
  flex: none;
  text-align: right;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: var(--seal-soft);
  border-radius: var(--radius-sm);
}
.fascicolo-conserva strong { font-family: var(--font-mono); font-size: 17px; }

/* Le lacune per prime: se il fascicolo è incompleto, meglio saperlo qui. */
.lacune {
  margin: 24px 0 34px;
  padding: 22px 24px;
  background: var(--warn-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lacune.completo { background: var(--good-soft); }
.lacune h2 { font-size: 21px; margin-bottom: 6px; }
.lacune p { font-size: 15px; margin-bottom: 10px; }
.lacune ul { margin: 0; padding-inline-start: 22px; font-size: 15px; }
.lacune li { margin-bottom: 5px; }

/* ---------- Quello che sta a schermo e non sulla carta ----------
   ⚠️ Nel fascicolo l'elenco delle lacune portava la classe
   `no-print-forse`: un nome che prometteva un comportamento in stampa e
   non lo faceva — il «forse» diceva che chi l'ha scritta non aveva
   deciso. Deciso ora, e implementato.

   L'elenco delle lacune NON è parte del fascicolo: è uno strumento della
   piattaforma che dice all'azienda che cosa le manca. Il fascicolo si
   stampa per essere conservato o consegnato, e stampare in coda l'elenco
   delle proprie mancanze non serve a nessuno degli scopi per cui lo si
   stampa. Resta a schermo, dove serve, e la riga sotto lo dichiara: non
   sparisce di nascosto.
   Il riquadro «fascicolo completo» invece si stampa, perché è un'
   informazione sul documento e non sull'azienda. */
.solo-a-schermo::after {
  content: attr(data-nota-stampa);
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-3);
}

@media print {
  .solo-a-schermo { display: none; }
}

.documento-fascicolo {
  margin-bottom: 40px;
  page-break-inside: avoid;
}

.doc-testa { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }

.doc-numero {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

.doc-titolo { font-size: 22px; margin: 0 0 2px; }
.doc-sotto { font-size: 13px; color: var(--ink-3); margin: 0; }

.doc-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-tab th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--line);
}
.doc-tab td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.doc-tab .si { color: var(--good-ink); font-weight: 600; }
.doc-tab .no { color: var(--bad-ink); font-weight: 600; }

.doc-vuoto { font-size: 15px; color: var(--ink-3); font-style: italic; }
.doc-totale { font-size: 14px; color: var(--ink-2); margin: 12px 0 0; }

.fascicolo-piede {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

@media print {
  .site-head, .no-print { display: none; }
  .fascicolo { box-shadow: none; border: 0; margin: 0; padding: 0; max-width: none; }
  .lacune { border: 1px solid #000; background: transparent; }
  .doc-tab { font-size: 11px; }
}

@media (max-width: 720px) {
  .fascicolo { padding: 22px 18px 40px; margin: 0; border-radius: 0; border-inline: 0; }
  .fascicolo-testa { flex-direction: column; }
  .fascicolo-conserva { text-align: left; }
  .persona { grid-template-columns: 1fr; gap: 4px; }
  .edizione-link { flex-direction: column; align-items: flex-start; }
  /* Le tabelle del fascicolo scorrono da sole, non si rimpiccioliscono. */
  .doc-tab { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Segnalazioni ---------- */
.segnalazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.segn-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.segn-link:hover { border-color: var(--accent); text-decoration: none; }

.segn-corpo { display: grid; gap: 4px; min-width: 0; }

.segn-codice {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.segn-testo { font-size: 16px; line-height: 1.4; }
.segn-meta { font-size: 13px; color: var(--ink-3); }

.segn-descrizione {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin: 0;
}

/* ---------- Azioni correttive ---------- */
.azioni { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }

.azione-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-left-color: var(--warn);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.azione-riga.fatta { border-left-color: var(--good); }

.azione-corpo { display: grid; gap: 3px; min-width: 0; }
.azione-testo { font-size: 16px; }
.azione-meta { font-size: 13px; color: var(--ink-3); }

/* ---------- Edizione: docenti e presenze ---------- */
.ed-testata {
  padding: 44px 0 30px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.ed-testata h1 { font-size: clamp(24px, 3.8vw, 34px); margin: 6px 0 6px; }
.ed-corpo { padding: 34px 24px 72px; }


.doc-elenco, .pres-elenco { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }

.doc-riga, .pres-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.doc-riga form, .pres-riga form { margin: 0; }

.doc-riga-corpo { display: grid; gap: 2px; min-width: 0; }
.doc-riga-nome { font-size: 16px; font-weight: 600; }
.doc-riga-meta { font-size: 13px; color: var(--ink-3); }

/* ============================================================
   IL VERBALE DELLA PROVA PRATICA — 11/08/2026
   ------------------------------------------------------------
   ⚠️ Una persona per volta, dentro un `<details>` che si apre da solo
   quando la prova NON è ancora verbalizzata e resta chiuso quando lo è:
   il docente vede a colpo d'occhio chi manca, e non deve chiudere venti
   pannelli per trovarne uno.
   ⚠️ `<details>` nativo e non un pannello aperto da JavaScript: la CSP
   sta su 'self' e senza inline, e un pannello che si apre solo col JS è
   un pannello che un giorno non si apre. Stessa scelta di `<progress>`
   per le barre e di `<dialog>` per i modali.
   ============================================================ */
.prove-elenco { display: grid; gap: 10px; margin-bottom: 20px; }

.prova-persona {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 18px;
}
.prova-sommario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
}
.prova-nome { font-size: 16px; font-weight: 600; }
.prova-persona[open] .prova-sommario { border-bottom: 1px solid var(--line); }
.prova-persona .modulo { padding: 16px 0 20px; }

.pres-nome { font-size: 16px; font-weight: 600; flex: 1; }
.pres-ore { font-size: 14px; color: var(--ink-3); }
.sessione-titolo { font-size: 18px; margin-bottom: 12px; }

.presenti { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.presenti legend { padding: 0; margin-bottom: 4px; }

.campo-testo { min-height: 130px; resize: vertical; font-family: var(--font); line-height: 1.5; }
.opzione-anonima { align-items: flex-start; }
.opzione-nota { font-size: 14px; color: var(--ink-3); }

@media (max-width: 640px) {
  .segn-link, .azione-riga, .doc-riga, .pres-riga { flex-direction: column; align-items: flex-start; }
  .ed-corpo { padding: 24px 20px 56px; }
}

/* ---------- Modulo segnalazione: campi affiancati e aiuti ---------- */
.campo-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-aiuto { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-bottom: 2px; }
.cause-elenco { margin: 0; padding-inline-start: 22px; font-size: 16px; color: var(--ink-2); }
.cause-elenco li { margin-bottom: 5px; }
.doc-riga.spenta { opacity: .55; }
.doc-riga.spenta .doc-riga-nome { text-decoration: line-through; }
.gest-azioni { margin: 20px 0 0; }

@media (max-width: 640px) { .campo-coppia { grid-template-columns: 1fr; } }

/* ---------- Cambio azienda ----------
   Sta in cima, sempre visibile: scrivere le ore di un corso nell'azienda
   sbagliata è un difetto che si scopre mesi dopo, ad attestato consegnato. */
.cambia-azienda { margin-top: 22px; max-width: 520px; }
.cambia-azienda .campo-label { display: block; margin-bottom: 7px; }
.cambia-azienda-riga { display: flex; gap: 10px; align-items: stretch; }
.cambia-azienda-riga .campo-input { flex: 1; min-width: 0; }
.cambia-azienda-riga .btn { flex: none; }

.aziende { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.azienda {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.azienda-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.azienda-nome { font-size: 18px; font-weight: 600; margin: 0; }
.azienda-meta { font-size: 15px; color: var(--ink-2); margin: 4px 0 0; }
.azienda-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.modulo-stretto { max-width: 620px; }

@media (max-width: 560px) {
  .cambia-azienda-riga { flex-direction: column; }
}

/* Quello che manca per emettere: si dice PRIMA, e si dice perché serve.
   Barra neutra, non rossa: non è un errore, è un lavoro da finire. */
.riquadro-lacune {
  margin-bottom: 28px;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: var(--radius-sm);
}
.riquadro-lacune p { margin: 0 0 6px; font-size: 15px; }
.riquadro-lacune ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.riquadro-lacune li { font-size: 15px; line-height: 1.5; }

/* ---------- Persone ---------- */
.persona-riga { padding: 0; }
.persona-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  text-decoration: none;
  color: inherit;
}
.persona-link:hover { background: var(--bg-2); }
.persona-link .persona-nome { flex: 1; min-width: 0; }

.obblighi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.obbligo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.obbligo-titolo { font-size: 16px; }

/* La password provvisoria si vede una volta sola: deve saltare all'occhio
   e deve essere leggibile al telefono, quindi grande e spaziata. */
.riquadro-consegna {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--good-soft);
  border: 1px solid var(--good);
  border-radius: var(--radius-sm);
}
.riquadro-consegna p { margin: 0 0 8px; }
.consegna-credenziali { margin: 14px 0; line-height: 2; }
.code-grande {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  user-select: all;
}
.consegna-nota { font-size: 15px; color: var(--good-ink); }

/* Gli avvisi dentro il riquadro di consegna: la persona e' stata creata,
   ma con dati incompleti. E' il momento in cui vanno letti, non dopo. */
.consegna-avvisi {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}
.consegna-avvisi p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.consegna-avvisi p:last-child { margin-bottom: 0; }

/* ---------- Pannello di piattaforma ---------- */
.tenant-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tenant {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.tenant-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tenant-nome { font-size: 18px; font-weight: 600; margin: 0; }
.tenant-meta { font-size: 15px; color: var(--ink-2); margin: 5px 0 0; }
.tenant-numeri { font-size: 14px; color: var(--ink-3); margin: 3px 0 0; }
.tenant-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.riga-prova { display: flex; gap: 8px; align-items: stretch; }
.campo-mini { width: 90px; }
.riga-nota { margin-top: 14px; }
.riga-nota .campo-label { display: block; margin-bottom: 6px; }

/* ---------- Aula virtuale ---------- */
.invito-link {
  margin: 14px 0;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.presenze-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.presenza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.presenza-nome { flex: 1; min-width: 0; font-weight: 600; }
.presenza-minuti { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.aula-stato { margin: 14px 0 0; font-size: 17px; }
.aula-dentro { font-weight: 700; color: var(--good-ink); }
.aula-esci { margin-top: 14px; }
.aula-verifica-aperta {
  border: 1px solid var(--good);
  background: var(--good-soft);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.scelte-fitte { gap: 6px; }
.scelte-fitte .spunta { padding: 8px 10px; border-radius: var(--radius-sm); }
.scelte-fitte .spunta:hover { background: var(--bg-2); }

/* ---------- Piani e fatture ---------- */
.piani { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.piano {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.piano-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.piano-nome { font-size: 19px; font-weight: 600; margin: 0; }
.piano-prezzo { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.piano-periodo { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.piano-testo { font-size: 16px; margin: 8px 0 0; }
.piano-limiti { font-size: 15px; color: var(--ink-2); margin: 6px 0 0; }
.piano-iva { font-size: 14px; color: var(--ink-3); margin: 4px 0 0; }
.piano-azione { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.fatture { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fattura-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
.fattura-link:hover { background: var(--bg-2); }
.fattura-numero { font-weight: 700; }
.fattura-data { flex: 1; color: var(--ink-2); }
.fattura-totale { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Il logo del cliente: si vede su fondo chiaro E su fondo scuro, perché
   l'attestato si stampa e si guarda a schermo. */
.logo-anteprima {
  display: inline-block;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.logo-anteprima img { display: block; max-width: 260px; max-height: 110px; height: auto; }
.logo-carica { margin-top: 18px; }

/* ---------- Avvisi e recuperi ----------
   Organizzato per AZIENDA, non per persona: la stessa forma che hanno gli
   invii. Chi guarda deve vedere con gli occhi che i dati di un'impresa
   non si mescolano con quelli di un'altra. */
.azienda-blocco {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--panel);
}
.persone-avviso { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.persona-avviso {
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}
.persona-avviso-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.persona-avviso-conto { font-size: 15px; margin: 6px 0 0; }
.persona-avviso-recupero { font-size: 15px; color: var(--ink-2); margin: 4px 0 10px; }
.avvisi-invio { margin-bottom: 28px; }

/* Quando i messaggi sono finiti su file invece che nella posta di
   qualcuno, il riquadro cambia colore: e' una cosa che si deve vedere
   senza leggere. */
.consegna-simulata { background: var(--warn-soft); border-color: var(--warn); }

/* ============================================================
   Il pannello di piattaforma: navigazione, schede, tabelle
   ------------------------------------------------------------
   Nato il 06/08/2026, quando `/super` è passato da una schermata sola a
   sei. Sei pagine hanno bisogno di due cose che una non aveva: un modo
   per passare dall'una all'altra, e un modo per assomigliarsi.
   ============================================================ */

/* ---------- La navigazione ---------- */
.pan-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.pan-voce {
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.pan-voce:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.pan-voce:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* La pagina in cui si è: fondo pieno, non solo un colore diverso del
   testo. Un colore da solo non si vede a colpo d'occhio, e non si vede
   affatto se chi guarda non distingue quei due colori. */
.pan-voce-qui {
  background: var(--ink);
  color: var(--panel);
}
.pan-voce-qui:hover { background: var(--ink); color: var(--panel); }

.pan-torna { margin: -18px 0 24px; font-size: 15px; }

/* ---------- Le schede della configurazione ---------- */
.schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Tutta la scheda è il bersaglio, non il titolo dentro. Un bersaglio
   grande si prende al primo colpo anche col pollice. */
.schede .scheda {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 22px 24px;
}
.schede .scheda:hover { border-color: var(--accent); text-decoration: none; }
.schede .scheda:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.scheda-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.scheda-titolo { font-size: 18px; font-weight: 600; line-height: 1.3; }
/* Il badge non si allarga e non si stringe: la larghezza è la sua, e il
   titolo si prende tutto il resto. Senza questa riga una pastiglia lunga
   mangia metà scheda e manda il titolo a capo. */
.scheda-testa .badge { flex: none; }
.scheda-spiega { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Una riga con un pulsante e il suo stato ---------- */
.riga-azione { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 4px; }

/* ---------- Tabella ---------- */
/* ⚠️ Si usa una `<table>` vera, non righe finte fatte di `div`. Qui i
   dati SONO una tabella — cliente per riga, stessa domanda per colonna —
   e chi legge con uno screen reader sente «riga 4, colonna Stato» solo
   se la tabella è una tabella. */
.tab-scorre { overflow-x: auto; }

.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tab th, .tab td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.tab thead th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.tab tbody th { font-weight: 600; color: var(--ink); }
.tab tbody tr:last-child th, .tab tbody tr:last-child td { border-bottom: 0; }
.tab-azione { text-align: end; white-space: nowrap; }

/* Quello che c'è ma non conta: «mai», «—», «nessuno». */
.tenue { color: var(--ink-3); }

@media (max-width: 620px) {
  .pan-nav { gap: 2px; }
  .pan-voce { padding: 8px 12px; }
}

/* ---------- Una scelta che non si può più fare ---------- */
/* ⚠️ Chi è già iscritto a un corso resta in elenco, spento. Nasconderlo
   lascerebbe chi guarda con la domanda «e Mario, che fine ha fatto?», e
   la risposta più naturale a quella domanda è assegnargli il corso una
   seconda volta.

   Spento vuol dire attenuato, non illeggibile: il nome deve restare
   leggibile — serve proprio a essere letto — e a scendere è il contrasto
   della riga, non del testo. Per questo si agisce sullo sfondo e su una
   opacità moderata, non su `color`. */
.spunta-spenta {
  opacity: .62;
  cursor: default;
  background: var(--bg-2);
}
.spunta-spenta:hover { background: var(--bg-2); }
.spunta-spenta input { cursor: default; }

/* ============================================================
   Le richieste al consulente
   ------------------------------------------------------------
   Stessa forma delle segnalazioni (`.segn-link`) e delle aziende
   (`.azienda`): riquadro con filetto, testa con badge a destra, riga di
   contorno sotto. Non è pigrizia — sono tre elenchi che rispondono alla
   stessa domanda («che cosa c'è da guardare»), e tre disegni diversi
   costringerebbero chi li usa a reimparare ogni volta.
   ============================================================ */
.richieste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.richiesta {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.richiesta-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.richiesta-testa .badge { flex: none; }

.richiesta-oggetto { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.35; }
.richiesta-meta { font-size: 14px; color: var(--ink-3); margin: 5px 0 0; line-height: 1.5; }
.richiesta-azioni { margin-top: 12px; }

/* ⚠️ Rosso, e non «un po' più scuro». Una richiesta ferma da una
   settimana è il segnale che il canale ha smesso di funzionare, ed è
   l'unica cosa in questa pagina che deve dare fastidio. */
.richiesta-vecchia { color: var(--bad-ink); font-weight: 600; }

/* ---------- Le risposte, dentro il foglio ---------- */
.risposta {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--line-2);
}
/* Le proprie si distinguono dal filetto, non dall'allineamento: una
   colonna di messaggi sfalsati come in una chat farebbe sembrare questo
   una chat, che è esattamente quello che non è. */
.risposta-mia { border-left-color: var(--accent); }

.risposta-chi {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.risposta p:last-child { margin-bottom: 0; }

/* ============================================================
   Frequenza: chi ha le ore, e a chi ne mancano
   ------------------------------------------------------------
   Una riga per persona, con la barra delle ore fatte. Il colore della
   barra e' quello del badge accanto, cosi' il colpo d'occhio sulla
   colonna dice quante persone sono indietro senza leggere un numero.
   ============================================================ */
.freq-elenco { list-style: none; margin: 0; padding: 0; }

.freq-riga {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.freq-riga:last-child { border-bottom: 0; }

.freq-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.freq-nome { font-weight: 600; }

/* ⚠️ <progress> nativo: la CSP scarta gli `style` inline, quindi la
   larghezza non si puo' scrivere nell'HTML. Vedi .avanzamento in
   corso.css -- stessa ragione, stessa forma. I due pseudo-elementi
   restano separati perche' un selettore non valido farebbe scartare
   l'intera regola. */
.freq-barra {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 100px;
  background: var(--bg-2);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.freq-barra::-webkit-progress-bar { background: var(--bg-2); border-radius: 100px; }
.freq-barra::-webkit-progress-value { background: var(--good); }
.freq-barra::-moz-progress-bar { background: var(--good); }

.freq-barra.b-warn::-webkit-progress-value { background: var(--warn); }
.freq-barra.b-warn::-moz-progress-bar { background: var(--warn); }
.freq-barra.b-bad::-webkit-progress-value { background: var(--bad); }
.freq-barra.b-bad::-moz-progress-bar { background: var(--bad); }
.freq-barra.b-neutro::-webkit-progress-value { background: var(--ink-3); }
.freq-barra.b-neutro::-moz-progress-bar { background: var(--ink-3); }

.freq-conto { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; }
.freq-manca { color: var(--bad); font-weight: 600; margin-inline-start: 6px; }

.freq-altrove {
  font-size: 15px;
  color: var(--ink-2);
  margin: 6px 0 0;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--line);
}

.freq-azioni { margin-top: 10px; }