/* ============================================================
   RESTYLING 09/2026 — PAGINE MODULO
   Caricato DOPO restyling-comuni.css, e solo dalle quattro
   pagine modulo: /candidati, /iscriviti,
   /entra-in-lista-dattesa, /scarica-brochure.

   Le quattro pagine condividono un unico impianto: testata
   piena, intestazione, colonna del modulo a sinistra e scheda
   di contesto a destra. Qui dentro non c'e' niente che valga
   per una pagina sola; le differenze fra i quattro moduli sono
   solo di contenuto e di riempimento della scheda.

   I comandi sono il componente di cta.css (.cta e le sue quattro
   varianti): qui dentro non se ne ridefinisce nessuno.
   Quello che gia' esiste in restyling-comuni.css (.r-badge,
   .r-spunta, .r-spunta-icona,
   le variabili --r-*) non viene ridefinito: dove serviva una
   variante l'ho aggiunta come classe nuova accanto, non
   sovrascrivendo quella condivisa.

   Prefisso r- come negli altri fogli del restyling.

   NOMI DEI TOKEN — le due trappole gia' segnalate in
   restyling-corsi.css valgono anche qui:
     --_project-font---all-padding--left-right   (non --padding-left-right)
     --_project-font---all-padding--tm-padding   (non --tm)
   In una scorciatoia "padding: A B" basta che B sia una
   variabile non dichiarata perche' il browser scarti l'INTERA
   dichiarazione: si perde anche il valore verticale scritto
   giusto.
   ============================================================ */

:root {
  /* La testata dei moduli non e' quella delle pagine di sito:
     e' piu' bassa (76 invece di 80) perche' cambia forma, e il
     cambio di forma e' il segnale che si e' in un'altra
     modalita'. Vedi §1.4 del documento di handoff. */
  --r-testata-modulo: 76px;
  --r-testata-modulo-mobile: 64px;

  /* Il contenitore dei moduli e' piu' stretto di quello delle
     pagine di sito (1240): 680 di colonna + 40 di stacco + 380
     di scheda fanno esattamente 1100. */
  --r-larghezza-modulo: 1100px;
  --r-colonna-modulo: 680px;

  /* Altezza dei campi e del pulsante d'invio: le chiede §2.2. */
  --r-campo-altezza: 56px;

  /* Il rosso degli errori non e' fra i token del design system:
     il sito lo dichiara una volta sola, dentro la classe
     ._14-px-regular.destructive del foglio Webflow. Lo riporto
     qui come variabile invece di ripetere il valore in ogni
     regola che ne ha bisogno. Su bianco fa 4.15:1: sotto il
     4.5:1 di WCAG AA, ed e' una delle tre eccezioni gia' messe
     a verbale nel documento, perche' e' un colore del marchio.
     Per questo il colore non e' MAI l'unico segnale: accanto al
     messaggio c'e' sempre un'icona e il testo dice cosa manca. */
  --r-colore-errore: #f80e0b;
}

/* ============================================================
   1. TESTATA DELLE PAGINE MODULO
   Non e' la pillola flottante delle pagine di sito ma una barra
   piena a tutta larghezza. Contenuto: logo a sinistra (piu'
   l'etichetta del corso nelle varianti per corso) e a destra un
   solo link di ritorno. Niente menu, niente invito all'azione:
   su una pagina di conversione ogni via di fuga in piu' e' una
   conversione in meno.
   ============================================================ */
.r-testata-modulo {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--neutral-01);
  border-bottom: 1px solid var(--neutral-02);
}

.r-testata-modulo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_project-font---spacing--16);
  height: var(--r-testata-modulo);
  width: 100%;
  max-width: var(--r-larghezza-contenuto);
  margin: 0 auto;
  padding: 0 var(--_project-font---all-padding--left-right);
}

/* Logo ed etichetta del corso stanno insieme a sinistra: il
   separatore verticale dice che sono due cose diverse, perche'
   il logo e' un link e l'etichetta no. */
.r-testata-marchio {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.r-testata-modulo-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.r-testata-modulo-logo img {
  width: 172px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

.r-testata-separatore {
  flex: none;
  width: 1px;
  height: 28px;
  margin: 0 16px;
  background-color: var(--neutral-02);
}

/* L'etichetta del corso e' testo, non un link: serve a dire su
   quale corso si sta compilando, non a portare altrove. */
.r-testata-corso {
  color: var(--neutral-04);
  white-space: nowrap;
  margin: 0;
}

/* Il ritorno e' l'unica azione della testata, ed e' una terziaria:
   forma, altezza (44px, l'area di tocco minima) e colore arrivano da
   .cta.cta--terziaria.cta--s in cta.css. Qui resta solo quello che
   dipende dalla testata: non si stringe e non va a capo. */
.r-testata-ritorno {
  flex: none;
  white-space: nowrap;
}

.r-testata-ritorno svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Niente riempimento al passaggio del mouse: una terziaria che si
   riempie diventa un pulsante. Le cresce il filo sotto, che sta in
   cta.css. */
.r-testata-modulo-logo:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Finche' il JavaScript non ha letto l'indirizzo, l'etichetta
   del corso e il suo separatore non esistono in pagina: sono
   nel markup con l'attributo hidden, cosi' la variante generica
   e' quella che si vede anche a JavaScript spento. */
.r-testata-marchio [hidden] {
  display: none;
}

/* ============================================================
   2. INTESTAZIONE DELLA PAGINA
   Titolo e riga di spiegazione. Il titolo porta il gradiente
   solo sulle parole chiave, come in tutto il resto del sito.
   ============================================================ */
.r-modulo-intestazione {
  width: 100%;
  max-width: var(--r-larghezza-modulo);
  margin: 0 auto;
  padding: 64px var(--_project-font---all-padding--left-right) 0;
}

.r-modulo-intestazione h1 {
  margin: 0 0 var(--_project-font---spacing--16);
  max-width: 760px;
}

.r-modulo-intestazione p {
  margin: 0;
  max-width: 760px;
}

/* ============================================================
   3. IMPIANTO A DUE COLONNE
   Colonna del modulo 680 a sinistra, scheda di contesto 380
   sticky a destra, stacco 40. Sotto i 992px la scheda va SOPRA
   il modulo, a larghezza piena: e' la prima cosa che si legge
   su un telefono, e dice che cosa si sta per fare.
   ============================================================ */
.r-modulo-griglia {
  display: flex;
  align-items: flex-start;
  gap: var(--_project-font---spacing--40);
  width: 100%;
  max-width: var(--r-larghezza-modulo);
  margin: 0 auto;
  padding: 48px var(--_project-font---all-padding--left-right) 96px;
}

.r-modulo-colonna {
  flex: 1 1 var(--r-colonna-modulo);
  min-width: 0;
}

/* La scheda di destra cambia funzione da pagina a pagina ma non
   posizione. Il fondo e' neutral-02 salvo dove la scheda deve
   staccarsi dalla colonna: allora diventa bianca col bordo. */
.r-modulo-scheda {
  flex: none;
  width: var(--r-colonna-box);
  position: sticky;
  top: calc(var(--r-testata-modulo) + var(--_project-font---all-padding--card-padding));
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--24);
  padding: var(--_project-font---all-padding--tm-padding);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-02);
}

.r-modulo-scheda.chiara {
  background-color: var(--neutral-01);
  border: 1px solid var(--neutral-02);
  box-shadow: var(--r-ombra-box);
}

/* La scheda e' una colonna flessibile: senza questo, il badge
   si stira per tutta la larghezza e smette di sembrare un badge. */
.r-modulo-scheda > .r-badge {
  align-self: flex-start;
}

.r-modulo-scheda h2 {
  margin: 0;
}

.r-modulo-scheda > p {
  margin: 0;
}

/* Righe etichetta/valore della scheda: stesse voci, stesso
   ordine in tutte e quattro le pagine, cosi' chi confronta due
   moduli trova le informazioni allo stesso posto. */
.r-scheda-dati {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  margin: 0;
}

.r-scheda-dati > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-scheda-dati dt {
  color: var(--neutral-03);
  margin: 0;
}

.r-scheda-dati dd {
  color: var(--neutral-04);
  margin: 0;
}

/* Elenco numerato dentro la scheda (lista d'attesa). */
.r-scheda-passi {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.r-scheda-passi li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.r-scheda-passi li::before {
  counter-increment: passo;
  content: counter(passo);
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--100);
  background-color: var(--neutral-01);
  color: var(--primary-color);
  font-size: var(--_project-font---all-paragraph--body-14);
  font-weight: var(--_project-font---font-weight--semibold);
  line-height: 1;
}

/* Elenco di spunte dentro la scheda (brochure). Riusa la
   .r-spunta-icona condivisa: qui cambia solo il fondo del
   cerchietto, perche' la scheda e' gia' neutral-02 e un
   cerchietto neutral-02 sparirebbe. */
.r-scheda-elenco {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-modulo-scheda .r-spunta-icona {
  background-color: var(--neutral-01);
}

.r-modulo-scheda.chiara .r-spunta-icona {
  background-color: var(--r-tinta-primaria);
}

/* ============================================================
   4. IL MODULO
   ============================================================ */
.r-modulo {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

/* I campi si raggruppano per argomento. Il fieldset non porta
   la sua cornice: il raggruppamento lo fa la legenda, e la
   cornice del browser non appartiene al disegno del sito. */
.r-gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--20);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.r-gruppo legend {
  padding: 0;
  margin: 0 0 4px;
  color: var(--neutral-03);
}

.r-gruppo > p {
  margin: 0;
  color: var(--neutral-03);
}

/* Due campi affiancati: nome/cognome, email/telefono. */
.r-campi-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--20);
}

/* Campo stretto: la fascia di eta' a larghezza piena sarebbe
   un menu a tendina lungo 680px per scegliere fra sei voci. */
.r-campo-stretto {
  max-width: 330px;
}

.r-campo-blocco {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Il "display: flex" qui sopra scavalca il "display: none" che il
   browser da' da solo agli elementi con l'attributo hidden, perche'
   una classe pesa piu' di un attributo. Senza questa riga i campi
   della fattura aziendale restano in pagina anche da nascosti. */
.r-campo-blocco[hidden] {
  display: none;
}

/* L'etichetta sta SEMPRE sopra il campo, mai dentro. Il
   segnaposto sparisce appena si scrive, e su un modulo con
   allegati chi torna indietro a controllare non ritroverebbe
   piu' il nome del campo. */
.r-etichetta {
  display: block;
  margin-bottom: 6px;
  color: var(--neutral-04);
}

.r-obbligatorio {
  color: var(--primary-color);
}

.r-facoltativo {
  color: var(--neutral-03);
  font-weight: var(--_project-font---font-weight--regular);
}

/* Riga di aiuto sotto l'etichetta: formati ammessi, peso
   massimo, vincoli. Sta prima del campo, non dopo: dopo si
   legge quando si e' gia' sbagliato. */
.r-aiuto {
  display: block;
  margin: -2px 0 10px;
  color: var(--neutral-03);
}

/* Riga di spiegazione SOTTO il campo. La uso per i campi
   bloccati e per quelli che aspettano un dato che non c'e'
   ancora: un campo grigio senza spiegazione sembra un difetto. */
.r-nota-campo {
  display: block;
  margin-top: 8px;
  color: var(--neutral-03);
}

.r-nota-campo[hidden] {
  display: none;
}

.r-campo {
  width: 100%;
  height: var(--r-campo-altezza);
  padding: 0 20px;
  border: 1.5px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--16);
  background-color: var(--neutral-01);
  color: var(--neutral-04);
  font-family: var(--_project-font---project-font--font-family);
  font-size: var(--_project-font---all-paragraph--body-16);
  line-height: 1.4;
  /* Webflow mette un margine in fondo a ogni campo: qui lo
     spazio lo decide il "gap" del gruppo, non il campo. */
  margin: 0;
}

.r-campo::placeholder {
  color: var(--neutral-03);
  opacity: 1;
}

textarea.r-campo {
  height: auto;
  min-height: 120px;
  padding: 16px 20px;
  resize: vertical;
  line-height: var(--_project-font---line-height--xxl);
}

select.r-campo {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
}

.r-campo:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-color: var(--primary-color);
}

/* Campo bloccato: succede quando il corso arriva dall'indirizzo
   (?corso=...) ed e' gia' deciso. Resta leggibile, cambia solo
   il fondo, e una riga sotto spiega perche' non si tocca. */
.r-campo:disabled {
  background-color: var(--neutral-02);
  color: var(--neutral-04);
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: var(--neutral-04);
}

.r-guscio-select {
  position: relative;
  display: block;
}

.r-guscio-select .r-freccia {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--neutral-03);
  pointer-events: none;
}

/* Stato di errore. Il bordo rosso e' il segnale di colore, il
   messaggio e' il segnale di testo: dice cosa manca, non
   "campo non valido". Il messaggio e' legato al campo con
   aria-describedby e il campo porta aria-invalid. */
.r-campo[aria-invalid="true"] {
  border-color: var(--r-colore-errore);
}

.r-errore {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  color: var(--r-colore-errore);
}

.r-errore svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.r-errore[hidden] {
  display: none;
}

/* Spunta di consenso: 22px, etichetta cliccabile accanto. */
.r-consenso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.r-consenso input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.r-consenso input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.r-consenso label {
  color: var(--neutral-04);
  cursor: pointer;
}

.r-consenso a {
  color: var(--primary-color);
  text-decoration: underline;
}

.r-consenso a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Blocco finale: consenso, pulsante, legenda degli obbligatori. */
.r-modulo-chiusura {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--20);
}

/* Il pulsante d'invio e' una primaria grande: forma, altezza, colori,
   fuoco e stato occupato stanno in cta.css. A larghezza piena solo
   sotto i 992px (.cta--piena.solo-mobile): sul desktop un pulsante
   largo quanto la colonna smette di leggersi come pulsante. Qui resta
   la misura dell'icona, che il componente non conosce. */
@media screen and (min-width: 992px) {
  /* Il blocco finale e' una colonna, e una colonna stira i figli:
     senza questo il pulsante resterebbe largo quanto il modulo anche
     dove il componente gli ha gia' rimesso la larghezza automatica. */
  .r-modulo-chiusura .cta--piena.solo-mobile {
    align-self: flex-start;
  }
}

.r-modulo-invio svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Comando spento (il pagamento di /iscriviti): e' .cta--spenta col
   suo .cta-badge. Il comando RESTA AL SUO POSTO e conserva il fuoco
   da tastiera (aria-disabled, non l'attributo disabled): chi naviga
   con la tastiera deve poter arrivare al badge che spiega perche'
   non succede niente. */

.r-legenda {
  color: var(--neutral-03);
  margin: 0;
}

.r-legenda .r-obbligatorio {
  color: var(--primary-color);
}

/* Riga con il lucchetto sotto il pulsante di pagamento. */
.r-nota-sicurezza {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--neutral-03);
  margin: 0;
}

.r-nota-sicurezza svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

/* Avviso di esito: compare solo dopo un invio, e oggi dice che
   il modulo non ha ancora una destinazione. */
.r-modulo-avviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--_project-font---all-padding--20px);
  border-radius: var(--_project-font---border-radius--16);
  border: 1px solid var(--neutral-02);
  background-color: var(--neutral-02);
  color: var(--neutral-04);
}

.r-modulo-avviso[hidden] {
  display: none;
}

.r-modulo-avviso svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--primary-color);
}

/* ============================================================
   5. INDICATORE A TRE PASSI (solo /iscriviti)
   Dice dove si e' nel percorso di pagamento. Il passo corrente
   e' l'unico pieno: gli altri due sono la strada che resta.
   ============================================================ */
.r-passi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-passi li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.r-passo-numero {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--100);
  background-color: var(--neutral-02);
  color: var(--neutral-03);
  font-size: var(--_project-font---all-paragraph--body-14);
  font-weight: var(--_project-font---font-weight--semibold);
  line-height: 1;
}

.r-passi li.attivo .r-passo-numero {
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

.r-passi li.attivo .r-passo-testo {
  color: var(--neutral-04);
}

.r-passi .r-passo-testo {
  color: var(--neutral-03);
  white-space: nowrap;
}

/* L'etichetta del secondo passo ha due forme: "Pagamento su
   Stripe" quando c'e' spazio, "Stripe" sul telefono. Su 375px
   la forma lunga spinge il terzo passo fuori dallo schermo, e un
   indicatore di percorso che mostra due passi su tre non indica
   piu' niente. */
.r-passo-breve {
  display: none;
}

.r-passi-filo {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background-color: var(--neutral-02);
}

/* ============================================================
   6. RIEPILOGO DELL'ORDINE (solo /iscriviti)
   ============================================================ */
.r-riepilogo-voce {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_project-font---spacing--16);
}

.r-riepilogo-voce p {
  margin: 0;
}

.r-riepilogo-totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--_project-font---spacing--16);
  padding: var(--_project-font---all-padding--20px) 0;
  border-top: 1px solid var(--neutral-02);
  border-bottom: 1px solid var(--neutral-02);
}

.r-riepilogo-totale p {
  margin: 0;
}

.r-riepilogo-cifra {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Il netto sotto il totale: serve a chi compra con partita IVA, ma
   non deve competere con la cifra grande, che e' quella che si paga. */
.r-riepilogo-netto {
  margin: 8px 0 0;
}

/* Sul telefono il totale torna sul pulsante: a quel punto il
   riepilogo e' scorso via da un pezzo, e nessuno paga un
   importo che non vede. */
.r-barra-pagamento {
  display: none;
}

/* ============================================================
   7. CARICAMENTO FILE (solo /candidati)
   Niente bordo tratteggiato: nel design system il tratteggio
   viola e' gia' il componente "segnaposto", cioe' contenuto non
   ancora consegnato. Una zona di caricamento tratteggiata si
   leggerebbe come una sezione non finita.
   ============================================================ */
.r-carico {
  border: 1.5px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--16);
  background-color: var(--neutral-01);
}

/* Stato vuoto: colonna centrata, cerchio con la freccia in su,
   riga di invito e pulsante profilato. */
.r-carico-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  text-align: center;
}

.r-carico-cerchio {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--100);
  background-color: var(--neutral-02);
  color: var(--neutral-04);
}

.r-carico-cerchio svg {
  width: 20px;
  height: 20px;
}

/* Il pulsante "Scegli un file" e' piu' basso dei pulsanti
   grandi del sito: dentro un riquadro alto 100px un pulsante da
   60 mangerebbe tutto. Resta sopra i 44px di area premibile. */
.r-carico-pulsante {
  height: 48px;
  padding: 0 22px;
  background-color: var(--neutral-01);
  font-family: var(--_project-font---project-font--font-family);
  font-size: var(--_project-font---all-paragraph--body-16);
  font-weight: var(--_project-font---font-weight--semibold);
  cursor: pointer;
}

/* Il campo file vero resta invisibile ma NON display:none:
   deve poter ricevere il fuoco da tastiera, perche' e' lui il
   comando, e il pulsante visibile e' solo la sua etichetta. */
.r-carico-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Il fuoco si vede sull'etichetta, che e' la parte visibile del
   comando. Il selettore deve scavalcare il blocco dello stato
   vuoto: l'etichetta non e' un fratello dell'input ma un suo
   nipote, e con il "+" non veniva raggiunta. */
.r-carico-input:focus-visible ~ .r-carico-vuoto .r-carico-etichetta {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.r-carico-etichetta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--primary-color);
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--neutral-01);
  color: var(--primary-color);
  cursor: pointer;
}

@media (hover: hover) {
  .r-carico-etichetta:hover {
    border-color: var(--primary-color-hover);
    color: var(--primary-color-hover);
  }
}

/* Stato "file scelto": bordo primario, nome e peso del file,
   comando per toglierlo. */
.r-carico.pieno {
  border-color: var(--primary-color);
}

.r-carico-pieno {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.r-carico-pieno[hidden],
.r-carico-vuoto[hidden] {
  display: none;
}

.r-carico-icona {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--100);
  background-color: var(--r-tinta-primaria);
  color: var(--primary-color);
}

.r-carico-icona svg {
  width: 18px;
  height: 18px;
}

.r-carico-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.r-carico-nome > span:first-child {
  overflow-wrap: anywhere;
}

/* Togliere il file e' un'azione distruttiva, e in questo design
   system le azioni distruttive non hanno un pulsante rosso: il rosso
   del marchio sul bianco sta sotto la soglia di contrasto per il
   testo a 16px. E' quindi una terziaria scura sottolineata con
   l'icona esplicita e la parola scritta (.cta--terziaria
   .cta--distruttiva .cta--s), non una crocetta muta. */
.r-carico-togli {
  flex: none;
}

.r-carico-togli svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Trascinamento in corso. */
.r-carico.sopra {
  border-color: var(--primary-color);
  background-color: var(--r-tinta-primaria);
}

.r-carico.errore {
  border-color: var(--r-colore-errore);
}

/* ============================================================
   8. BLOCCO DELLA RESIDENZA (solo /candidati)
   Sta fra i due allegati. Senza di lui la voce
   "Autocertificazione di residenza - facoltativo" e'
   incomprensibile e non la compila nessuno.
   ============================================================ */
.r-blocco-residenza {
  display: flex;
  align-items: flex-start;
  gap: var(--_project-font---spacing--16);
  padding: var(--_project-font---all-padding--card-padding);
  border-radius: var(--_project-font---border-radius--16);
  background-color: var(--neutral-02);
}

.r-blocco-residenza > svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--primary-color);
}

.r-blocco-residenza-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.r-blocco-residenza-testo p {
  margin: 0;
}

/* Il pulsante di scarico del modulo e' una misura M (.cta--m): sta
   dentro un riquadro, non e' l'azione della pagina. E' spento col
   badge finche' il PDF non esiste. Qui resta solo la misura
   dell'icona. */
.r-blocco-residenza .cta svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ============================================================
   9. PUNTI DI ROTTURA
   991 / 767 / 479, gli stessi del resto del sito.
   ============================================================ */
@media screen and (max-width: 991px) {
  /* La scheda di contesto passa SOPRA il modulo, a larghezza
     piena. Sta dopo il modulo nel DOM perche' l'ordine di
     tabulazione deve arrivare prima ai campi: la scheda non
     contiene comandi, quindi spostarla con "order" non crea
     nessuno scarto fra quello che si vede e quello che si
     raggiunge con la tastiera. */
  .r-modulo-griglia {
    flex-direction: column;
    gap: var(--_project-font---spacing--24);
    padding-top: 32px;
    padding-bottom: 64px;
  }

  .r-modulo-scheda {
    order: -1;
    position: static;
    width: 100%;
    border-radius: var(--_project-font---border-radius--24);
    padding: var(--_project-font---all-padding--card-padding);
  }

  .r-modulo-colonna {
    flex: 1 1 auto;
    width: 100%;
  }

  .r-modulo-intestazione {
    padding-top: 40px;
  }
}

@media screen and (max-width: 767px) {
  .r-testata-modulo-interno {
    height: var(--r-testata-modulo-mobile);
  }

  .r-testata-modulo-logo img {
    width: 140px;
    height: 36px;
  }

  /* Con l'etichetta del corso accanto, il logo si stringe:
     altrimenti su 375px logo, separatore, etichetta e ritorno
     non ci stanno e qualcosa va a capo. */
  .r-testata-marchio.con-corso .r-testata-modulo-logo img {
    width: 104px;
    height: 34px;
  }

  .r-testata-marchio.con-corso .r-testata-separatore {
    height: 24px;
    margin: 0 10px;
  }

  /* Idem per il ritorno: quando c'e' l'etichetta del corso
     resta solo la freccia, con l'etichetta accessibile
     nell'aria-label. */
  .r-testata-marchio.con-corso ~ .r-testata-ritorno {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .r-testata-marchio.con-corso ~ .r-testata-ritorno .r-testata-ritorno-testo {
    display: none;
  }

  .r-modulo-scheda {
    top: calc(var(--r-testata-modulo-mobile) + var(--_project-font---spacing--16));
  }

  .r-modulo-intestazione {
    padding-top: 28px;
  }

  .r-modulo {
    gap: 36px;
  }

  .r-gruppo {
    gap: var(--_project-font---spacing--16);
  }

  /* Due campi affiancati su 375px sono due campi da 160px:
     nome e cognome vanno in colonna. */
  .r-campi-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-campo-stretto {
    max-width: none;
  }

  /* "Scarica il modulo di autocertificazione" piu' il badge non
     stanno su una riga sola dentro un riquadro largo 290px: il
     pulsante lascia andare a capo invece di sbordare. L'altezza
     diventa un minimo, e resta quella della misura M: 52 qui, 48
     sotto i 767 come vuole lo scalino del telefono. */
  .r-blocco-residenza .cta {
    height: auto;
    min-height: 52px;
    padding: 10px 18px;
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.3;
  }

  .r-passi {
    gap: 8px;
  }

  .r-passi .r-passo-testo {
    font-size: var(--_project-font---all-paragraph--body-14);
  }

  .r-passo-lungo {
    display: none;
  }

  .r-passo-breve {
    display: inline;
  }

  .r-passo-numero {
    width: 26px;
    height: 26px;
  }

  /* BARRA DI PAGAMENTO DEL TELEFONO (solo /iscriviti).
     Sta in fondo, fissa, col totale ripetuto sul pulsante.
     Nel DOM va DOPO il modulo, cosi' la tabulazione non ci
     inciampa prima di aver compilato i campi. */
  .r-barra-pagamento {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px var(--_project-font---all-padding--left-right) 22px;
    background-color: var(--r-fondo-barra-mobile);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--neutral-02);
  }

  /* Il pallino del banner cookie e' fisso in basso a sinistra e
     sta sopra tutto (#cookiescript_badge, 36x36 a 10px dal bordo,
     z-index 99999). Cade esattamente sulla riga del lucchetto e ne
     copre le prime parole.

     Si rientra il nostro testo invece di spostare il pallino:
     spostarlo vorrebbe dire combattere con lo stile in linea di uno
     script che non controlliamo, e al primo aggiornamento loro si
     tornerebbe punto e a capo. 42px = 46 (bordo destro del pallino)
     meno 12 (dove comincia la nota) piu' 8 di respiro. Se un giorno
     il pallino cambia misura, il numero da rifare e' questo. */
  .r-barra-pagamento .r-nota-sicurezza {
    padding-left: 42px;
  }

  /* Su 375px l'etichetta col totale e il badge accanto non stanno
     su una riga sola. Invece di accorciare il totale - che e' la
     ragione per cui la barra esiste - il pulsante lascia andare a
     capo e cresce in altezza. */
  .r-barra-pagamento .r-modulo-invio {
    height: auto;
    min-height: 56px;
    padding: 10px 18px;
    flex-wrap: wrap;
    line-height: 1.3;
  }

  /* La barra copre la fine della pagina: il piede pagina deve
     avere spazio sotto per non finirci dietro. */
  .con-barra-pagamento .footer-section {
    padding-bottom: 170px;
  }

  /* Quando c'e' la barra in basso, il pulsante nel modulo e' un
     doppione che confonde: resta uno solo. */
  .con-barra-pagamento .r-modulo-chiusura .r-modulo-invio,
  .con-barra-pagamento .r-modulo-chiusura .r-nota-sicurezza {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .r-blocco-residenza .cta {
    min-height: var(--r-pulsante-medio);
  }
}

@media screen and (max-width: 479px) {
  .r-testata-modulo-logo img {
    width: 116px;
    height: 32px;
  }

  .r-modulo-intestazione h1 {
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   10. RIDUZIONE DEL MOVIMENTO
   In queste pagine non c'e' nessuna animazione di stato: il
   solo movimento possibile e' lo scorrimento morbido verso il
   campo sbagliato dopo un invio. Chi chiede meno movimento
   arriva al campo senza scorrimento animato.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}