/* riservata.css — quello che nafasi.css non ha.
 *
 * Il sito pubblico è fatto di pagine da leggere: non ha un sistema di form,
 * perché non ne aveva bisogno. L'area riservata è fatta di moduli da compilare.
 *
 * Regola che questo foglio si dà: **nessun valore letterale**. Ogni colore,
 * spazio, dimensione e raggio viene dalle variabili di nafasi.css. È il motivo
 * per cui il tema scuro funziona qui senza una sola riga di media query: i
 * token cambiano da soli e questi stili li seguono.
 *
 * nafasi.css non è stato modificato. Appartiene a un altro agente.
 */

/* --------------------------------------------------------------------------
 * Barra dell'area riservata
 * Sta sotto la testata del sito e sopra il contenuto. Stessa grammatica della
 * .banda-nav pubblica: filetto sotto, voce corrente in blu.
 * -------------------------------------------------------------------------- */
.barra-riservata {
  background: var(--sfondo-tenue);
  border-bottom: var(--filo) solid var(--bordo);
}

.barra-riservata .telaio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
}

.barra-riservata__voci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.barra-riservata__voci a {
  font-size: var(--t-piccolo);
  font-weight: 600;
  text-decoration: none;
  color: var(--testo-tenue);
  padding-block: var(--s1);
  border-bottom: 2px solid transparent;
}

.barra-riservata__voci a:hover {
  color: var(--accento);
}

.barra-riservata__voci a[aria-current="page"] {
  color: var(--accento);
  border-bottom-color: var(--accento);
}

.barra-riservata__utente {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-micro);
}

.barra-riservata__esci {
  margin: 0;
}

/* Un bottone che deve sembrare un link: serve perché uscire è una POST con
 * token, non un GET. Un logout raggiungibile con un GET lo può far scattare
 * l'immagine di un altro sito. */
.collegamento-finto {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--accento);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.collegamento-finto:hover {
  color: var(--accento-scuro);
}

/* --------------------------------------------------------------------------
 * Moduli
 * -------------------------------------------------------------------------- */
.modulo {
  max-width: var(--telaio-prosa);
}

.modulo--stretto {
  max-width: 30rem;
}

.campo-form {
  margin-top: var(--s5);
}

.campo-form:first-child {
  margin-top: 0;
}

.campo-form > label,
.campo-form__etichetta {
  display: block;
  font-weight: 700;
  font-size: var(--t-piccolo);
  margin-bottom: var(--s2);
  color: var(--testo);
}

/* Il segno di campo obbligatorio. Il testo "obbligatorio" resta comunque
 * scritto per esteso nell'aiuto: un asterisco da solo non lo legge nessuno
 * e non lo annuncia nessun lettore di schermo. */
.campo-form__obbligo {
  color: var(--urgenza);
  font-weight: 700;
}

.campo-form input[type="text"],
.campo-form input[type="email"],
.campo-form input[type="password"],
.campo-form input[type="search"],
.campo-form input[type="number"],
.campo-form input[type="date"],
.campo-form input[type="file"],
.campo-form select,
.campo-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  background: var(--sfondo-rilievo);
  color: var(--testo);
  border: var(--filo) solid var(--bordo-forte);
  border-radius: var(--raggio);
  transition: border-color 0.15s var(--curva);
}

.campo-form textarea {
  min-height: 7rem;
  line-height: var(--lh-corpo);
  resize: vertical;
}

.campo-form input:hover,
.campo-form select:hover,
.campo-form textarea:hover {
  border-color: var(--accento);
}

/* Il campo file non ha un'altezza sensata di suo e il bottone interno non è
 * stilabile in modo portabile: si tratta come un riquadro tratteggiato, che è
 * anche il segnale visivo giusto per "qui si trascina un documento". */
.campo-form input[type="file"] {
  padding: var(--s3);
  border-style: dashed;
  cursor: pointer;
}

/* Stato di errore. Non solo il colore: il bordo raddoppia di spessore, così la
 * differenza si vede anche a chi non distingue il rosso. */
.campo-form input[aria-invalid="true"],
.campo-form select[aria-invalid="true"],
.campo-form textarea[aria-invalid="true"] {
  border-color: var(--urgenza);
  border-width: 2px;
}

.campo-form__aiuto {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--testo-tenue);
  line-height: 1.45;
}

.campo-form__errore {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--urgenza);
}

/* Riga di campi affiancati su schermi larghi. */
.campo-riga {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (min-width: 40rem) {
  .campo-riga--due { grid-template-columns: 1fr 1fr; }
  .campo-riga--tre { grid-template-columns: repeat(3, 1fr); }
  .campo-riga .campo-form { margin-top: 0; }
}

/* --------------------------------------------------------------------------
 * Consensi
 *
 * Riquadrati e distanziati di proposito. Tre consensi appiccicati uno sotto
 * l'altro si spuntano tutti e tre senza leggerli, ed è esattamente ciò che un
 * consenso separato dovrebbe impedire.
 * -------------------------------------------------------------------------- */
fieldset {
  border: var(--filo) solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--s4);
  margin-top: var(--s5);
}

legend {
  font-weight: 700;
  font-size: var(--t-piccolo);
  padding-inline: var(--s2);
  color: var(--testo);
}

.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s4);
  margin-top: var(--s4);
  border: var(--filo) solid var(--bordo);
  border-left: 4px solid var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--sfondo-tenue);
}

.consenso:first-of-type {
  margin-top: 0;
}

.consenso--obbligatorio {
  border-left-color: var(--accento);
  background: var(--sfondo-blu);
}

.consenso--particolare {
  border-left-color: var(--attenzione);
  background: var(--attenzione-sfondo);
}

.consenso input[type="checkbox"],
.consenso input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--accento);
  cursor: pointer;
}

.consenso__testo {
  font-size: var(--t-piccolo);
  line-height: var(--lh-corpo);
  cursor: pointer;
}

.consenso__testo strong {
  display: block;
  margin-bottom: var(--s1);
}

.consenso__nota {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--testo-tenue);
}

/* Casella singola fuori da un gruppo di consensi. */
.spunta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: center;
}

.spunta input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accento);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Avvisi che nafasi.css non ha: errore e riuscita.
 * Costruiti sui token esistenti, stessa forma di .avviso--verifica.
 * -------------------------------------------------------------------------- */
.avviso--errore {
  border-left-color: var(--urgenza);
  background: var(--urgenza-sfondo);
}

.avviso--errore .avviso__cap {
  color: var(--urgenza);
}

.avviso--riuscito {
  border-left-color: var(--conferma);
  background: var(--conferma-sfondo);
}

.avviso--riuscito .avviso__cap {
  color: var(--conferma);
}

/* --------------------------------------------------------------------------
 * Bottoni: stati che mancano
 * -------------------------------------------------------------------------- */
.bottone[disabled],
.bottone[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Azione distruttiva: cancellare il curriculum, chiudere l'account. Rossa e
 * mai per prima nella riga, così non è quella che si preme per inerzia. */
.bottone--pericolo {
  background: var(--urgenza);
  border-color: var(--urgenza);
  color: var(--bianco);
}

.bottone--pericolo:hover {
  background: var(--urgenza);
  filter: brightness(0.9);
}

/* --------------------------------------------------------------------------
 * Esiti di ammissibilità
 *
 * Alias parlanti delle etichette che nafasi.css ha già. Non ridefiniscono
 * niente: aggiungono il nome giusto per questo dominio.
 * -------------------------------------------------------------------------- */
.esito {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: var(--filo) solid var(--bordo);
  border-top: 4px solid var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--sfondo-rilievo);
  margin-top: var(--s4);
}

.esito--ammissibile { border-top-color: var(--conferma); }
.esito--incerto     { border-top-color: var(--attenzione); }
.esito--escluso     { border-top-color: var(--urgenza); }

.esito__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  justify-content: space-between;
}

.esito__titolo {
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: var(--lh-titolo);
  margin: 0;
}

.esito__titolo a {
  color: inherit;
}

.esito__ente {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

.esito__motivo {
  font-size: var(--t-piccolo);
  line-height: var(--lh-corpo);
  padding-left: var(--s3);
  border-left: 2px solid var(--bordo);
  margin: 0;
}

.esito__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--t-micro);
  color: var(--testo-tenue);
}

/* --------------------------------------------------------------------------
 * Riepiloghi numerici
 * -------------------------------------------------------------------------- */
.riquadro {
  padding: var(--s5);
  border: var(--filo) solid var(--bordo);
  border-top: 4px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--sfondo-rilievo);
}

.riquadro + .riquadro {
  margin-top: var(--s5);
}

/* Il riquadro di un'azione irreversibile. Il filetto rosso in cima è il
 * segnale, ma non l'unico: dentro c'è anche un .avviso--errore che lo dice a
 * parole, perché il colore da solo non lo vede tutto il mondo. */
.riquadro--pericolo {
  border-top-color: var(--urgenza);
}

/* Impronta del file: monospaziata e più piccola, non deve competere con il
 * resto della scheda. */
.impronta {
  font-size: 0.8em;
  word-break: break-all;
}

.riquadro__titolo {
  font-size: var(--t-h4);
  margin: 0 0 var(--s3);
}

/* Coppie etichetta/valore in colonna, per i riepiloghi di sola lettura. */
.coppie {
  margin: 0;
}

.coppie > div {
  display: grid;
  gap: var(--s1) var(--s4);
  padding-block: var(--s3);
  border-bottom: var(--filo) solid var(--bordo);
}

.coppie > div:last-child {
  border-bottom: 0;
}

@media (min-width: 34rem) {
  .coppie > div { grid-template-columns: 13rem 1fr; }
}

.coppie dt {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--testo-tenue);
}

.coppie dd {
  margin: 0;
  font-size: var(--t-piccolo);
}

/* --------------------------------------------------------------------------
 * Il wizard del profilo
 * -------------------------------------------------------------------------- */

/* Avanzamento: tacche invece di una percentuale.
 * Una barra che dice «43%» non aiuta nessuno; sette tacche di cui tre piene
 * dicono quanto manca in un colpo d'occhio. È decorativa e infatti è
 * aria-hidden: il conteggio vero sta scritto in lettere sopra, «Passo 3 di 7»,
 * che è quello che sente chi usa un lettore di schermo. */
.avanzamento {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.avanzamento__tacca {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--bordo);
}

.avanzamento__tacca--fatta {
  background: var(--accento);
}

/* Scelta grande: per il livello di studio servono tre bottoni su cui non si
 * può sbagliare mira, non tre radio da 13 pixel. Tutta l'area del riquadro è
 * cliccabile perché il radio sta dentro il <label>. */
.scelte {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s3);
}

.scelta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s5);
  border: var(--filo) solid var(--bordo);
  border-left: 4px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo-rilievo);
  cursor: pointer;
  transition: border-color 0.15s var(--curva), background 0.15s var(--curva);
}

.scelta:hover {
  border-color: var(--accento);
  border-left-color: var(--accento);
}

.scelta--attiva {
  border-color: var(--accento);
  border-left-color: var(--accento);
  background: var(--sfondo-blu);
}

.scelta input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--accento);
  cursor: pointer;
}

.scelta__testo strong {
  display: block;
  font-size: var(--t-h4);
  line-height: var(--lh-titolo);
}

.scelta__nota {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  line-height: var(--lh-corpo);
}

/* Sezione che si apre: per le province, che sono cinquantacinque e non devono
 * spaventare chi vuole solo scegliere una regione e andare avanti. */
.dettaglio {
  margin-top: var(--s5);
  border: var(--filo) solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--s4);
}

.dettaglio > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-piccolo);
  color: var(--accento);
}

.dettaglio[open] > summary {
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--filo) solid var(--bordo);
}

/* --------------------------------------------------------------------------
 * Utility mancanti
 * -------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--s2); }
.mb-4 { margin-bottom: var(--s4); }

.riga-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s5);
}

.divisorio {
  border: 0;
  border-top: var(--filo) solid var(--bordo);
  margin-block: var(--s6);
}