/* ============================================================
   CertoFlow — accesso e area personale
   Il discente è un lavoratore, non un tecnico: pochi elementi, grandi,
   ben distanziati, e una sola risposta in cima alla pagina.
   ============================================================ */

/* ---------- Accesso ---------- */
.accesso {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
}

.accesso-riquadro {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 36px;
}

.accesso-riquadro h1 { font-size: 32px; margin-bottom: 10px; }
.accesso-testo { font-size: 16px; color: var(--ink-2); margin-bottom: 26px; }

.modulo { display: grid; gap: 18px; }

.campo { display: grid; gap: 7px; }

.campo-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}

.campo-input {
  min-height: var(--ctl-h);
  padding: 11px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: 400 17px/1.3 var(--font);
  width: 100%;
}
.campo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.modulo-invia { width: 100%; margin-top: 6px; }

.avviso {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  margin: 0 0 20px;
}
.avviso-bad { background: var(--bad-soft); color: var(--bad-ink); }
.avviso-ok { background: var(--good-soft); color: var(--good-ink); }
/* ⚠️ `.avviso-warn` era usata in dieci punti — pannello di piattaforma,
   deleghe, aula, integrazioni, informativa privacy — e non è mai stata
   definita: quegli avvisi uscivano come testo nudo, indistinguibili da
   un paragrafo qualunque. Un avviso che non si vede come avviso non è
   un avviso. I colori sono gli stessi del badge `.b-warn`, così le due
   cose che dicono «attenzione» si somigliano davvero. */
.avviso-warn { background: var(--warn-soft); color: var(--warn-ink); }
/* ⚠️ Informativo, non allarmante: e' l'avviso sui dati sanitari in cima al
   modulo di segnalazione. Deve farsi leggere PRIMA che uno scriva, non
   spaventare -- chi si spaventa davanti a un modulo di sicurezza smette
   di compilarlo, e una segnalazione persa non torna. Percio' azzurro e
   non arancione. */
.avviso-info { background: var(--info-soft); color: var(--info-ink); }

/* Il campo che ha fatto scattare il controllo: si vede subito quale
   riscrivere senza rileggere tutto il modulo. */
.campo-segnalato .campo-input { border-color: var(--bad); }
.campo-segnalato .campo-label { color: var(--bad-ink); }

.demo-nota {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.demo-nota p { margin: 0; font-size: 14px; }
.demo-nota .eyebrow { margin-bottom: 6px; }
.demo-nota .code { font-size: 14px; }

.accesso-privacy {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------- Area personale ---------- */
.area-testata {
  padding: 56px 0 44px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-top: 6px solid var(--ink-4);
}
.area-ok { border-top-color: var(--good); }
.area-ok h1 { color: var(--good-ink); }
/* Niente arancione nell'intestazione (direttiva 30/07): quando c'è qualcosa
   da fare la barra è un grigio neutro, e il titolo resta in inchiostro.
   Il verde si tiene solo per "tutto a posto": è l'unico stato che merita colore. */
.area-attenzione { border-top-color: var(--ink-3); }
.area-attenzione h1 { color: var(--ink); }

.area-testata h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 10px; }

.area-corpo { padding: 40px 24px 72px; }

.blocco { margin-bottom: 44px; }

.blocco-titolo {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  font-family: var(--font);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

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

.corso, .attestato-voce {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.corsi-quieti .corso { background: transparent; box-shadow: none; }

.corso-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.corso-titolo {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  flex: 1;
}

.corso-meta {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.corso-norma { font-size: 13px; color: var(--ink-4); margin: 0; }

/* Le azioni di una riga stanno su una fila con dello spazio in mezzo:
   senza, due link si incollano e sembrano una parola sola. */
.corso-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 0;
}

.corso-attestato {
  font-size: 15px;
  font-weight: 700;
}

.esci { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .accesso-riquadro { padding: 30px 24px; }
  .corso-testa { flex-direction: column; gap: 8px; }
  .area-corpo { padding: 28px 20px 56px; }
}

/* ---------- Registrazione ----------
   Stessi componenti dell'accesso, riquadro più largo: i campi sono
   sei e affiancarne due (nome e cognome) evita una colonna lunghissima.
   Nessun font più piccolo: si compatta con la larghezza. */
.accesso-largo { align-items: flex-start; }
.accesso-riquadro-largo { max-width: 620px; }

.campi-affiancati {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* L'errore sta ATTACCATO al campo che l'ha causato: chi compila non
   deve tornare in cima a cercare cosa non andava. */
.campo-errore {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bad-ink);
}
.campo-aiuto {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
}
.campo-ko .campo-input { border-color: var(--bad); }
.campo-ko .campo-input:focus { box-shadow: 0 0 0 4px var(--bad-soft); }

fieldset.campo { border: 0; margin: 0; padding: 0; }
fieldset.campo legend { padding: 0; }

/* Le tre forme di account: si scelgono leggendo un esempio, non una
   definizione. Riquadri grandi, bersaglio ampio anche sul telefono. */
.scelte { display: grid; gap: 10px; }

.scelta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--panel);
}
.scelta:hover { border-color: var(--ink-4); }
.scelta:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.scelta input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.scelta-corpo { display: grid; gap: 2px; }
.scelta-titolo { font-weight: 700; font-size: 16px; }
.scelta-testo { font-size: 15px; color: var(--ink-2); }

.spunta {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.spunta input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* "Che cosa succede dopo": si dice PRIMA di premere il pulsante.
   Una sorpresa scoperta dopo è una telefonata all'assistenza. */
.reg-cosa-succede {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.reg-cosa-succede ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.reg-cosa-succede li { font-size: 15px; line-height: 1.5; }

.passi { margin: 22px 0 28px; padding-left: 22px; display: grid; gap: 10px; }
.passi li { font-size: 16px; line-height: 1.5; }

@media (max-width: 560px) {
  .campi-affiancati { grid-template-columns: 1fr; }
}