/* ============================================================
   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;

  /* Il verde non e' inventato: e' l'ultima fermata del gradiente del
     marchio (#48bf90 in .gradient-text). Il suo gemello piu' acceso,
     #51fd7a, su un bordo griderebbe. */
  --r-colore-ok: #48bf90;

  /* Lo stesso tempo dei pulsanti in cta.css. Un secondo linguaggio
     per i campi li farebbe sentire di un altro sito. */
  --r-transizione-stato: .25s ease;
}

/* ============================================================
   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. */
/* /iscriviti: dati, ordine e partecipanti compaiono dopo la
   scelta del soggetto. */
.r-dopo-soggetto {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
[data-dopo-soggetto][hidden] {
  display: none !important;
}
[data-dopo-soggetto]:not([hidden]) {
  animation: r-compare 0.4s ease both;
}
@keyframes r-compare {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-dopo-soggetto]:not([hidden]) { animation: none; }
}

.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 {
  /* Gli stati non scattano: sfumano. Il bordo che cambia colore di
     botto si nota come un difetto; lo stesso bordo che ci arriva in un
     quarto di secondo si sente come una risposta.

     background-color e' nella lista per il campo bloccato. Non ci
     mettiamo background-image: il gradiente del fuoco non si
     interpola, e provarci lo farebbe lampeggiare. Ci pensa il bordo,
     che sfumando da opaco a trasparente scopre il gradiente sotto. */
  transition:
    border-color var(--r-transizione-stato),
    box-shadow var(--r-transizione-stato),
    background-color var(--r-transizione-stato);

  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;
}

/* ------------------------------------------------------------
   IL CAMPO RIEMPITO DAL BROWSER

   Chrome dipinge di suo i campi che riempie automaticamente - un
   giallo pallido che non e' nostro e che su un modulo di pagamento
   fa pensare che qualcosa non vada. Lo sfondo non si puo'
   sovrascrivere con background-color: Chrome lo rimette. Si copre
   con un'ombra interna grande quanto il campo, che e' il modo che
   funziona da dieci anni.

   La transizione lunghissima e' l'altra meta' del trucco: Chrome
   ridipinge lo sfondo con una transizione, e rimandarla di una vita
   vuol dire che non arriva mai.

   Il testo si forza con -webkit-text-fill-color, perche' color da
   solo su un campo riempito non basta. */
.r-campo:-webkit-autofill,
.r-campo:-webkit-autofill:hover,
.r-campo:-webkit-autofill:focus,
.r-campo:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--neutral-01) inset;
  -webkit-text-fill-color: var(--neutral-04);
  caret-color: var(--neutral-04);
  transition: background-color 600000s 0s;
}

/* Il campo bloccato ha il suo fondo e lo tiene anche se riempito. */
.r-campo:disabled:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--neutral-02) inset;
}

/* Il passaggio del mouse: il bordo si scurisce di un passo, niente
   di piu'. Dentro (hover: hover) perche' su telefono l'hover resta
   incollato dopo il tocco, e un campo appena toccato resterebbe
   evidenziato finche' non se ne tocca un altro.

   Non durante il fuoco: li' comanda il fuoco. */
@media (hover: hover) {
  .r-campo:hover:not(:disabled):not(:focus) {
    /* Il primario molto diluito, non il grigio: il grigio dice "sono
       un bordo", il primario dice "sono tuo". L'alone e' un anello di
       3px ancora piu' diluito - si vede col mezzo tono, non si nota
       guardando la pagina intera. */
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 7%, transparent);
  }
}

/* Il campo compilato bene.

   :user-valid e non :valid - :valid e' vero anche su un campo
   facoltativo mai toccato, e all'avvio tingerebbe di verde mezzo
   modulo. :user-valid aspetta che la persona ci abbia messo mano.

   Sta PRIMA del fuoco e dell'errore di proposito: a parita' di peso
   vince l'ultima scritta, e l'ordine giusto e' valido, poi fuoco,
   poi errore. Un campo sbagliato deve restare rosso anche se e'
   stato toccato; uno a fuoco deve mostrare il fuoco.

   Da solo nella sua regola: un browser che non conosce :user-valid
   butta via l'intera regola in cui compare, e qui non c'e' altro da
   perdere. */
.r-campo:user-valid {
  border-color: var(--r-colore-ok);
}

/* E il suo gemello. Senza, un campo scritto bene si tingeva subito e
   uno scritto male restava neutro fino all'invio: il modulo parlava
   solo quando aveva buone notizie.

   :user-invalid, come :user-valid, aspetta che la persona ci abbia
   messo mano: all'apertura nessun campo obbligatorio e' rosso. */
.r-campo:user-invalid {
  border-color: var(--r-colore-errore);
}

/* ------------------------------------------------------------
   IL CAMPO A FUOCO

   Prima erano DUE contorni: il bordo che cambiava colore piu' un
   outline staccato di 2px. Due righe concentriche intorno a ogni
   campo, che su venti campi diventano rumore.

   Adesso e' uno solo, e si muove: il bordo diventa trasparente e
   sotto ci passa un gradiente conico del colore primario che gira.
   Il campo resta del suo colore perche' sopra c'e' un secondo
   sfondo, ritagliato sul riquadro interno; il gradiente si vede
   solo nei due pixel del bordo.

   --angolo e' dichiarato con @property perche' una variabile
   normale il browser non sa interpolarla: senza, la rotazione
   salterebbe da 0 a 360 invece di girare.

   Chi non conosce @property non anima niente e vede un bordo
   sfumato fermo, che e' comunque un contorno solo e visibile. */
@property --angolo {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes r-gira {
  to { --angolo: 360deg; }
}

.r-campo:focus-visible {
  border-color: transparent;
  transition:
    border-color var(--r-transizione-stato),
    box-shadow var(--r-transizione-stato);
  background-image:
    linear-gradient(var(--neutral-01), var(--neutral-01)),
    conic-gradient(
      from var(--angolo),
      var(--primary-color),
      color-mix(in srgb, var(--primary-color) 25%, transparent) 35%,
      var(--primary-color) 70%,
      color-mix(in srgb, var(--primary-color) 25%, transparent) 85%,
      var(--primary-color)
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: r-gira 3s linear infinite;

  /* Trasparente, ma non inutile: nelle modalita' a contrasto forzato
     il sistema lo ridipinge di suo, e li' il gradiente non si vede.
     Senza questa riga, chi usa quelle modalita' perderebbe il fuoco. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: none;
}

/* Chi chiede meno movimento perde la ROTAZIONE, non la sfumatura: un
   colore che cambia in un quarto di secondo non e' movimento, e
   toglierlo renderebbe il modulo piu' brusco senza aiutare nessuno.
   Quello che da' fastidio e' una cosa che gira, e quella si ferma. */
@media (prefers-reduced-motion: reduce) {
  .r-campo:focus-visible {
    animation: none;
  }
}

/* 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;
}

/* 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;
  }
}

/* ------------------------------------------------------------
   CHI SOSTIENE LA SPESA
   Tre schede e non un menu a tendina: qui le opzioni SONO la
   domanda, e una tendina le nasconde finche' non la apri. Con
   tre sole voci costano lo stesso spazio.
   Nessuna preselezionata: una scelta fiscale non si decide per
   default.
   ------------------------------------------------------------ */
.r-soggetti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--_project-font---spacing--8);
}

.r-soggetto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 88px;
  padding: 20px;
  border: 1.5px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--16);
  cursor: pointer;
}

/* Il radio vero resta nel DOM e raggiungibile da tastiera: si
   toglie solo dalla vista. Niente display:none, che lo
   toglierebbe anche alla tabulazione e ai lettori di schermo. */
.r-soggetto input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Il passaggio del mouse solo dove esiste un mouse: sul tocco
   :hover resta "appiccicato" all'ultima scheda toccata. */
@media (hover: hover) {
  .r-soggetto:hover { border-color: var(--primary-color); }
}

.r-soggetto:has(input:checked) {
  border-color: var(--primary-color);
  background-color: #3c28f90a;
}

/* Il contorno del fuoco sta sulla scheda, non sul radio
   invisibile: senza, chi naviga con le frecce non vede dov'e'. */
.r-soggetto:has(input:focus-visible) {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Il segnale della scelta che non e' colore: un cerchio davanti
   al nome, vuoto se la scheda non e' scelta, pieno se lo e'.
   Il selettore passa dal fratello (input:checked + ...) e non da
   :has(), cosi' funziona anche dove :has() non c'e'. */
.r-soggetto-nome::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 1.5px solid var(--neutral-03);
  border-radius: 50%;
}

.r-soggetto input:checked + .r-soggetto-nome::before {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  box-shadow: inset 0 0 0 3px var(--neutral-01);
}

/* Il fuoco anche senza :has(): sul cerchio, che e' quello che si
   vede. Dove :has() c'e', il contorno sta sulla scheda intera. */
.r-soggetto input:focus-visible + .r-soggetto-nome::before {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.r-soggetto-nota { color: var(--neutral-03); }

/* La zona dei campi del ramo, finche' e' vuota (ramo Privato o
   nessuna scelta), non deve occupare posto: un elemento vuoto fa
   comunque il suo gap dentro il fieldset. */
[data-campi-soggetto]:empty { display: none; }

/* I campi montati sono figli di un <div>, non del fieldset: il gap
   del fieldset vale solo fra la zona e i suoi fratelli, non fra i
   pezzi che ci finiscono dentro. Senza questo i messaggi d'errore
   toccano l'etichetta del campo sotto. */
[data-campi-soggetto] {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
}

/* Ogni partecipante e' un fieldset con la sua legenda: chi usa un
   lettore di schermo sente "Partecipante 2" prima dei campi e sa
   dove si trova. */
[data-partecipanti]:empty { display: none; }

.r-partecipante {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  min-width: 0;
  margin-top: var(--_project-font---spacing--16);
  padding: var(--_project-font---all-padding--card-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--16);
}

.r-partecipante legend {
  padding: 0 8px;
  color: var(--neutral-04);
}

/* Una casella che non si puo' cambiare non deve avere il cursore a
   manina: prometterebbe un comando che non c'e'. Vale per
   aria-disabled e non per disabled, perche' disabled la toglierebbe
   dalla navigazione da tastiera. */
.r-consenso input[aria-disabled="true"],
.r-consenso:has(input[aria-disabled="true"]) {
  cursor: default;
}

/* ==============================================================
   LA RIGA DEL RITORNO DA STRIPE

   Si appoggia a .r-modulo-avviso per cornice, colori e icona: e'
   lo stesso tipo di oggetto, un messaggio che compare sopra il
   modulo. Qui si aggiunge solo quello che l'avviso non ha, cioe'
   i due comandi.

   I comandi vanno a capo sotto il testo e non di fianco: su un
   telefono due pulsanti accanto a una frase diventano due
   bersagli stretti, e questo e' il punto in cui si decide se
   buttare via quello che si e' scritto.
   ============================================================== */
.r-ripresa-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-ripresa-testo {
  margin: 0;
}

.r-ripresa-comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Alti 44 px: e' la misura sotto la quale un bersaglio diventa
   difficile da centrare col dito. */
.r-ripresa-si,
.r-ripresa-no {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--_project-font---border-radius--16);
  cursor: pointer;
  font-family: inherit;
}

.r-ripresa-si {
  border: 1px solid var(--neutral-04);
  background-color: var(--neutral-04);
  color: var(--neutral-01);
}

/* "Ricomincia da capo" butta via dei dati, quindi non si traveste
   da scelta principale: nessun riempimento, solo il contorno. */
.r-ripresa-no {
  border: 1px solid var(--neutral-03);
  background-color: transparent;
  color: var(--neutral-04);
}

.r-ripresa-si:hover,
.r-ripresa-no:hover {
  opacity: 0.85;
}

/* L'avviso quando qualcosa non e' riuscito.

   .r-modulo-avviso da solo e' grigio neutro: va bene per informare,
   non per dire che un pagamento non e' partito. Chi ha appena premuto
   "Vai al pagamento" deve riconoscere a colpo d'occhio che si tratta
   di un errore, senza doverlo dedurre leggendo.

   Stessi colori delle righe d'errore dei campi, cosi' il modulo parla
   una lingua sola. */
/* Quando il fuoco va su un campo sbagliato, il browser ci scorre
   sopra. Chrome tiene conto da se' della testata appiccicata, ma e'
   una sua cortesia e non una regola nostra: su un motore che non la
   fa, il campo finirebbe sotto la testata e sembrerebbe che non sia
   successo niente. Stessa misura di .r-blocco in restyling-corsi.css. */
.r-campo,
.r-soggetto,
.r-consenso {
  scroll-margin-top: calc(var(--r-ingombro-testata) + 28px);
}

.r-modulo-avviso--errore {
  border-color: var(--r-colore-errore);
  background-color: color-mix(in srgb, var(--r-colore-errore) 8%, transparent);
  color: var(--r-colore-errore);
}

/* I tre passi - "I tuoi dati", "Pagamento su Stripe", "Conferma" -
   stanno in riga e non si restringono (flex: none, voluto: un numero
   dentro un cerchio schiacciato non si legge). Sotto i 360px pero' la
   riga non ci sta e si porta dietro la barra orizzontale.

   Li' vanno a capo invece di sforare. Si perde una riga di altezza su
   uno schermo che ne ha poca, ma e' meglio di una pagina che scorre di
   lato su un modulo di pagamento. */
@media screen and (max-width: 359px) {
  .r-passi {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* /iscriviti: le caselle dei T&C, una sotto l'altra (05/10/2026). */
.r-caselle {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.r-caselle .r-consenso[hidden] {
  display: none !important;
}

/* /recedere-dal-contratto (05/10/2026) */
.r-recesso { display: flex; flex-direction: column; gap: 40px; max-width: 760px; }
.r-recesso .r-consenso { align-items: flex-start; }
.r-recesso-fatto { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--neutral-02); }
.r-recesso-fatto[hidden], #modulo-recesso[hidden] { display: none !important; }
.r-riepilogo-voce[hidden], [data-riepilogo-nota][hidden] { display: none !important; }
.r-domanda-nominativi { display: flex; flex-direction: column; gap: 8px; }
.r-domanda-nominativi[hidden], [data-partecipanti][hidden] { display: none !important; }
.r-domanda-scelte { display: flex; gap: 24px; }
.r-consenso[hidden] { display: none !important; }
.r-domanda-scelte .r-consenso { align-items: center; }

/* ------------------------------------------------------------
   IL RIEPILOGO MENTRE SI RICALCOLA

   Il totale di /iscriviti non e' scritto in pagina: lo chiede la
   dashboard a ogni cambio di soggetto, posti o codice, perche' la
   cifra mostrata dev'essere quella che si paga. Fra la modifica e la
   risposta passa un viaggio di rete, e in quel tempo le cifre vecchie
   restavano li', identiche a cifre buone.

   Si smorzano, e basta: nessuna parola che compare, nessuna
   girandola, nessun riquadro. Sono tutte cose che allargherebbero la
   scheda a ogni battuta nel campo del codice, e una scheda che
   sobbalza mentre si scrive e' peggio di un numero vecchio.

   Lo 0,45 e' scelto per essere leggibile ma non autorevole: la cifra
   si legge ancora - serve, perche' spesso cambia di pochi euro - ma
   non si legge come definitiva.

   Chi usa un lettore di schermo non vede l'opacita' e riceve invece
   aria-busy, che js/condizioni.js mette sullo stesso elemento.
   ------------------------------------------------------------ */
.r-modulo-scheda[data-ricalcolo] [data-riga-prezzo],
.r-modulo-scheda[data-ricalcolo] [data-riga-sconto],
.r-modulo-scheda[data-ricalcolo] .r-riepilogo-totale,
.r-modulo-scheda[data-ricalcolo] [data-riepilogo-iva] {
  opacity: .45;
}

/* L'entrata e l'uscita non sono simmetriche, ed e' voluto. Smorzare
   e' immediato - dire "questo numero non vale piu'" non puo'
   aspettare - mentre tornare pieni prende un quarto di secondo,
   perche' il numero nuovo deve farsi notare arrivando. */
.r-modulo-scheda [data-riga-prezzo],
.r-modulo-scheda [data-riga-sconto],
.r-modulo-scheda .r-riepilogo-totale,
.r-modulo-scheda [data-riepilogo-iva] {
  transition: opacity .25s ease;
}

.r-modulo-scheda[data-ricalcolo] [data-riga-prezzo],
.r-modulo-scheda[data-ricalcolo] [data-riga-sconto],
.r-modulo-scheda[data-ricalcolo] .r-riepilogo-totale,
.r-modulo-scheda[data-ricalcolo] [data-riepilogo-iva] {
  transition: opacity 0s;
}

/* Lo smorzamento non e' un'animazione decorativa: e' l'unico segnale
   visivo che la cifra non e' aggiornata, quindi resta anche a chi ha
   chiesto meno movimento. Si toglie solo la transizione. */
@media (prefers-reduced-motion: reduce) {
  .r-modulo-scheda [data-riga-prezzo],
  .r-modulo-scheda [data-riga-sconto],
  .r-modulo-scheda .r-riepilogo-totale,
  .r-modulo-scheda [data-riepilogo-iva] {
    transition: none;
  }
}