/* ============================================================
   CertoFlow — indice del corso e lezione
   Il testo va letto, spesso al telefono: colonna stretta, riga alta,
   corpo generoso. Nessun font rimpicciolito per far stare le cose.
   ============================================================ */

/* ---------- Indice ---------- */
.corso-testata {
  padding: 48px 0 34px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.corso-testata h1 { font-size: clamp(28px, 4.4vw, 40px); margin-bottom: 8px; }
.corso-sotto { font-size: 15px; color: var(--ink-3); margin-bottom: 22px; }

/* ⚠️ E' un <progress> nativo, non un div: la Content-Security-Policy
   scarta gli attributi `style` inline, quindi la vecchia barra a due div
   con `style="width:N%"` restava sempre vuota. Vestire <progress> vuole
   tre pseudo-elementi diversi -- lo sfondo e il riempimento hanno un nome
   in WebKit/Blink e un altro in Gecko, e non si possono unire in una sola
   regola: se uno dei due selettori non e' valido il browser butta via
   TUTTA la dichiarazione. Percio' stanno separati, ed e' voluto. */
.avanzamento {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 100px;
  background: var(--bg-2);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.avanzamento::-webkit-progress-bar { background: var(--bg-2); border-radius: 100px; }
.avanzamento::-webkit-progress-value { background: var(--accent); transition: width .3s; }
.avanzamento::-moz-progress-bar { background: var(--accent); }

.corso-conta { font-size: 15px; color: var(--ink-2); margin: 12px 0 0; }

.corso-corpo { padding: 34px 24px 70px; }

.moduli { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; }

.modulo-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .12s, transform .12s;
}
.modulo-link:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }

.modulo-numero {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
}

.modulo-corpo { flex: 1; display: grid; gap: 2px; }
.modulo-titolo { font-size: 18px; font-weight: 600; line-height: 1.3; }
.modulo-durata { font-size: 14px; color: var(--ink-3); }

.blocco-azione {
  padding: 28px 26px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.blocco-azione h2 { font-size: 24px; margin-bottom: 8px; }
.blocco-azione p { font-size: 16px; color: var(--ink-2); }
.blocco-azione.chiuso { background: var(--bg-2); }
.blocco-azione.fatto { background: var(--good-soft); }
.blocco-nota { margin: 14px 0 0 !important; font-size: 15px !important; }

.corso-torna { margin-top: 30px; font-size: 15px; }

/* ---------- Lezione ---------- */
.lezione {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.lezione-testata { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.lezione-testata h1 { font-size: clamp(28px, 4.4vw, 40px); margin: 8px 0 6px; }
.lezione-durata { font-size: 14px; color: var(--ink-3); margin: 0; }

/* Il testo della lezione: è la parte che si legge davvero. */
.lezione-testo { font-size: 18px; line-height: 1.68; color: var(--ink-2); }
.lezione-testo h2 {
  font-size: 27px;
  margin: 38px 0 14px;
  color: var(--ink);
}
.lezione-testo h2:first-child { margin-top: 0; }
.lezione-testo h3 {
  font-size: 21px;
  margin: 30px 0 10px;
  color: var(--ink);
}
.lezione-testo p { margin: 0 0 16px; }
.lezione-testo strong { color: var(--ink); font-weight: 600; }
.lezione-testo em { font-style: italic; }
.lezione-testo ul { margin: 0 0 18px; padding-inline-start: 24px; }
.lezione-testo li { margin-bottom: 9px; }

.lezione-fine {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.lezione-tempo { font-size: 15px; color: var(--ink-2); margin: 0 0 16px; }

.btn-attesa { opacity: .5; cursor: not-allowed; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.lezione-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 15px;
}

@media (max-width: 640px) {
  .lezione { padding: 28px 20px 60px; }
  .lezione-testo { font-size: 17px; }
  .corso-corpo { padding: 24px 20px 56px; }
  .modulo-link { padding: 16px; gap: 12px; }
}

/* ⚠️⚠️ SCORCIATOIA DI PROVA — DA RIMUOVERE ⚠️⚠️
   Riquadro fisso che salta le ore del corso, visibile solo in modalità
   dimostrativa. È deliberatamente brutto: deve dare fastidio finché c'è,
   così nessuno se ne dimentica prima di andare in produzione.
   Da togliere insieme a scorciatoiaDiProva() in viste/corso.js. */
.scorciatoia-prova {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 10px 12px;
  border: 2px dashed var(--bad);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  /* Sta ferma in un angolo e non copre niente finché non la si tocca:
     chi deve rileggere un corso non può avere un riquadro sopra il testo. */
  max-width: 240px;
  opacity: .55;
  transition: opacity .12s ease;
}
.scorciatoia-prova:hover,
.scorciatoia-prova:focus-within { opacity: 1; }
.scorciatoia-nota { display: none; }
.scorciatoia-prova:hover .scorciatoia-nota,
.scorciatoia-prova:focus-within .scorciatoia-nota { display: block; }
.scorciatoia-titolo {
  margin: 0 0 4px;
  color: var(--bad);
  font-weight: 700;
  letter-spacing: .02em;
}
.scorciatoia-nota {
  margin: 0 0 10px;
  color: var(--ink-3);
}
.scorciatoia-btn {
  width: 100%;
  border-color: var(--bad);
  color: var(--bad);
}
.scorciatoia-btn:hover { background: var(--bad); color: var(--panel); }

@media (max-width: 700px) {
  .scorciatoia-prova { right: 10px; bottom: 10px; width: 190px; }
}

/* ---------- Modulo video ---------- */
.lezione-video { margin: 0 0 28px; }
.lezione-video video {
  width: 100%;
  max-height: 60vh;
  background: var(--side);
  border-radius: 10px;
  display: block;
}
.video-avanzamento {
  height: 8px;
  margin: 10px 0 6px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.video-barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .3s ease;
}

/* L'avviso sui corsi il cui testo non copre ancora le ore dichiarate.
   Si calcola dal contenuto (lib/tempi.js, materialeMagro): compare quando
   serve e sparisce da solo quando il testo arriva. */
.corso-magro { margin: 0 0 26px; }
.corso-magro p { margin: 0; }
.corso-magro-nota { margin-top: 8px; font-size: 15px; opacity: .85; }

/* ⚠️ IL CORSO CHE NON SI FA DA SOLI (10/08/2026).
   Stessa forma dell'avviso «materiale in completamento» qui sopra: sta in
   cima al corpo, prima dei moduli, perche' chi deve sapere che le sue ore
   verranno dalla presenza deve saperlo PRIMA di leggere dodici ore di
   materiale, non dopo.
   ⚠️ `.corso-aula-quando` NON e' rimpicciolita: e' la riga che dice se la
   lezione ha una data o se va chiesta, cioe' l'unica cosa che il discente
   deve FARE. Le note si attenuano, le azioni no. */
.corso-aula { margin: 0 0 26px; }
.corso-aula p { margin: 0; }
.corso-aula-quando { margin-top: 10px; font-weight: 600; }