/* Componenti riusabili del tema epc-default (F3.1c). */

/* --- Bottoni ---------------------------------------------------------- */
/* min-height/min-width = --epc-target-size (44px): supera il minimo WCAG 2.2 AA di 24px
   (2.5.8 Target Size Minimum), scelta mobile-first. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--epc-space-2);
  min-height: var(--epc-target-size);
  min-width: var(--epc-target-size);
  padding: var(--epc-space-2) var(--epc-space-5);
  border-radius: var(--epc-radius-pill);
  border: 2px solid transparent;
  font-family: var(--epc-font-family-display);
  font-size: var(--epc-font-size-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--epc-transition), border-color var(--epc-transition), color var(--epc-transition);
}

.btn-primary {
  background: var(--epc-color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--epc-color-primary-hover);
}

.btn-secondary {
  background: #fff;
  color: var(--epc-color-text);
  border-color: var(--epc-color-border);
}

.btn-secondary:hover {
  border-color: var(--epc-color-primary);
  color: var(--epc-color-primary);
}

/* --- Alert (icona + testo, mai solo colore — §11 punto 1) -------------- */
/* box-shadow (25/08/2026, non c'era): un alert è spesso il messaggio più importante della
   pagina (es. "non completabile" dopo un tentativo di conferma fallito) ma senza rilievo
   proprio si perdeva in mezzo al resto del contenuto sottostante. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--epc-space-3);
  padding: var(--epc-space-3) var(--epc-space-4);
  border-radius: var(--epc-radius-md);
  border-left: 4px solid;
  font-size: var(--epc-font-size-base);
  box-shadow: var(--epc-shadow-md);
}

.alert-icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}

.alert-info {
  background: var(--epc-color-info-bg);
  color: var(--epc-color-info-text);
  border-left-color: var(--epc-color-info-border);
}

.alert-success {
  background: var(--epc-color-success-bg);
  color: var(--epc-color-success-text);
  border-left-color: var(--epc-color-success-border);
}

.alert-warning {
  background: var(--epc-color-warning-bg);
  color: var(--epc-color-warning-text);
  border-left-color: var(--epc-color-warning-border);
}

.alert-error {
  background: var(--epc-color-error-bg);
  color: var(--epc-color-error-text);
  border-left-color: var(--epc-color-error-border);
}

/* --- Card --------------------------------------------------------------- */
.card {
  background: var(--epc-color-surface);
  border: 1px solid var(--epc-color-border);
  border-radius: var(--epc-radius-md);
  padding: var(--epc-space-4);
  box-shadow: var(--epc-shadow-md);
}

/* --- Badge di stato riusabile (icona + testo, mai solo colore — §11 punto 1) ----------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--epc-space-1);
  padding: 2px var(--epc-space-2) 2px var(--epc-space-1);
  border-radius: var(--epc-radius-pill);
  border: 1px solid;
  font-size: var(--epc-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.badge svg {
  flex-shrink: 0;
}

.badge-successo {
  background: var(--epc-color-success-bg);
  color: var(--epc-color-success-text);
  border-color: var(--epc-color-success-border);
}

.badge-avviso {
  background: var(--epc-color-warning-bg);
  color: var(--epc-color-warning-text);
  border-color: var(--epc-color-warning-border);
}

/* Previsto non e' un avviso: comunica che il questionario esiste nel piano,
   ma non e' ancora disponibile. Colore neutro + testo esplicito. */
.badge-previsto {
  background: var(--epc-color-surface);
  color: var(--epc-color-text-muted);
  border-color: var(--epc-color-border);
}

/* --- Card assegnazione (F3.7) -------------------------------------------- */
.card-assegnazione {
  margin-bottom: var(--epc-space-4);
}

.card-assegnazione .card-titolo {
  margin: 0 0 var(--epc-space-1);
  font-size: var(--epc-font-size-lg);
}

.card-assegnazione .card-corso {
  margin: 0 0 var(--epc-space-2);
  color: var(--epc-color-text-muted);
}

.card-assegnazione .card-scadenza {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--epc-space-2);
  flex-wrap: wrap;
}

/* Scaduto: colore + parola, mai il solo colore (§11 punto 1). white-space:nowrap perché a
   volte finisce in una riga stretta (accanto al testo di una domanda, F3.9a): senza,
   "Non risposto" va a capo dentro la pillola e la deforma (25/08/2026). */
.badge-scaduto {
  display: inline-block;
  padding: 0 var(--epc-space-2);
  border-radius: var(--epc-radius-pill);
  background: var(--epc-color-error-bg);
  color: var(--epc-color-error-text);
  border: 1px solid var(--epc-color-error-border);
  font-size: var(--epc-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Prima era un <p> senza margine sopra: il bottone toccava il testo della scadenza
   (25/08/2026). margin-top:auto da solo non basta come unico rimedio - se la card è
   l'unica/la più bassa della riga della griglia non c'è spazio residuo da assorbire e
   tornerebbe a 0 - quindi margine minimo fisso, con auto solo per allinearlo in fondo
   quando la riga è più alta della card. */
.card-azione {
  margin: 0;
  margin-top: auto;
  padding-top: var(--epc-space-4);
}

.card-assegnazione .card-azione-assente {
  margin: var(--epc-space-2) 0 0;
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
}

.card-assegnazione-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--epc-space-2);
}

.card-scadenza-data {
  display: inline-flex;
  align-items: center;
  gap: var(--epc-space-1);
}

.card-nota-previsto {
  flex-basis: 100%;
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
}

.card-assegnazione .card-scadenza-icona {
  flex-shrink: 0;
  color: var(--epc-color-text-muted);
}

/* Griglia responsive (era stack a colonna singola): 1 colonna sotto i 600px, 2 fra 600 e
   900, 3 da 900 in su - stessi breakpoint dei token (tokens.css). */
.assegnazioni-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--epc-space-4);
}

.assegnazioni-sintesi {
  display: flex;
  align-items: baseline;
  gap: var(--epc-space-2);
  margin: calc(-1 * var(--epc-space-2)) 0 var(--epc-space-5);
  color: var(--epc-color-text-muted);
}

.assegnazioni-sintesi strong { color: var(--epc-color-primary); }

@media (min-width: 600px) {
  .assegnazioni-griglia {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .assegnazioni-griglia {
    grid-template-columns: repeat(3, 1fr);
  }
}

.assegnazioni-griglia .card-assegnazione {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* --- Menu account nell'header (25/08/2026, era "Cambia password"/Esci in fondo ad
   Assegnazioni: solo lì, non sulle altre pagine) -------------------------------------- */
/* flex-direction:row esplicito, non scontato: .container (base.css) è flex-direction:column
   (serve a centrare .pagina-accesso in verticale nel Login) e questo div ha ANCHE la classe
   .container - senza l'override qui, la colonna vinceva e impilava logo/menu invece di
   affiancarli, con align-items:center a "centrarli" uno sopra l'altro (25/08/2026). */
.site-header-riga {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--epc-space-3);
}

.menu-utente {
  position: relative;
}

.menu-utente summary {
  display: inline-flex;
  align-items: center;
  gap: var(--epc-space-1);
  min-height: 44px;
  padding: var(--epc-space-2) var(--epc-space-3);
  border-radius: var(--epc-radius-pill);
  border: 1px solid var(--epc-color-border);
  font-size: var(--epc-font-size-sm);
  font-weight: 600;
  color: var(--epc-color-text);
  cursor: pointer;
  list-style: none;
}

/* Nome e cognome del lavoratore (25/08/2026, era il testo fisso "Account"): lunghezza
   variabile, un nome molto lungo non deve spingere il resto dell'header. */
.menu-utente-etichetta {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-utente summary::-webkit-details-marker {
  display: none;
}

.menu-utente[open] summary {
  border-color: var(--epc-color-primary);
  color: var(--epc-color-primary);
}

.menu-utente nav {
  position: absolute;
  right: 0;
  top: calc(100% + var(--epc-space-2));
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--epc-color-border);
  border-radius: var(--epc-radius-md);
  box-shadow: var(--epc-shadow-lg);
  padding: var(--epc-space-2);
  z-index: 20;
}

.menu-utente nav form {
  margin: 0;
}

.menu-utente nav a,
.menu-utente nav button {
  display: flex;
  align-items: center;
  gap: var(--epc-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--epc-space-2) var(--epc-space-3);
  border: none;
  border-radius: var(--epc-radius-sm);
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--epc-color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-utente nav a:hover,
.menu-utente nav button:hover {
  background: var(--epc-color-surface);
}

/* --- Informativa (F3.7) --------------------------------------------------- */
.informativa-versione {
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
}

/* Il markup del testo arriva dal CRUD del gestionale, ma è ridotto a una whitelist sicura
   lato server prima del rendering; i ritorni a capo residui restano leggibili. */
.informativa-testo {
  white-space: pre-wrap;
  background: var(--epc-color-surface);
  border: 1px solid var(--epc-color-border);
  border-radius: var(--epc-radius-md);
  padding: var(--epc-space-4);
  margin-bottom: var(--epc-space-5);
  max-height: 60vh;
  overflow-y: auto;
}

/* Sottotitolo con il nome del corso, sotto il titolo del tipo di questionario: un
   lavoratore può avere più questionari sullo stesso corso (Annualita, stepCP) e deve sempre
   vedere senza ambiguità quale sta compilando, non solo nell'elenco assegnazioni. */
.pagina-corso {
  margin: 0 0 var(--epc-space-4);
  color: var(--epc-color-text-muted);
}

/* --- Compilazione (F3.8) --------------------------------------------------
 * Step indicator con connettori (25/08/2026, era una fila di pillole piatte tutte uguali):
 * ogni area è un cerchio con etichetta; le aree già superate hanno un segno di spunta e un
 * connettore blu verso la successiva, quella corrente un anello evidenziato, quelle non
 * ancora visitate un numero. "Superata" = indice minore di quella corrente: è solo un
 * indicatore di posizione nel percorso (le aree restano comunque tutte raggiungibili via
 * link, F3.8), non una validazione di completezza - quella vive nel Riepilogo. */
.compilazione-aree-nav ol {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0 0 var(--epc-space-5);
}

.compilazione-aree-nav li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.compilazione-aree-nav li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 21px);
  right: calc(-50% + 21px);
  height: 2px;
  background: var(--epc-color-border);
}

.compilazione-aree-nav li.step-superata:not(:last-child)::after {
  background: var(--epc-color-primary);
}

.compilazione-aree-nav a,
.compilazione-aree-nav .step-corrente {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--epc-space-2);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.step-cerchio {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--epc-color-border);
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
  font-weight: 700;
}

/* max-width, non width: un'etichetta breve ("area 1") resta compatta e centrata; una lunga
   ("Area 3 - Esperienza e trasferimento nella pratica") non sborda nella colonna accanto -
   senza questo vincolo un flex item senza larghezza esplicita può eccedere il max-content e
   non andare a capo (visto nel pilota sull'etichetta dell'area corrente, F3.8). */
.step-etichetta {
  max-width: 100%;
  font-size: var(--epc-font-size-sm);
  color: var(--epc-color-text-muted);
}

.compilazione-aree-nav li.step-superata .step-cerchio {
  background: var(--epc-color-primary);
  border-color: var(--epc-color-primary);
  color: #fff;
}

.compilazione-aree-nav li.step-superata .step-etichetta {
  color: var(--epc-color-text);
  font-weight: 600;
}

.compilazione-aree-nav li[aria-current="step"] .step-cerchio {
  background: var(--epc-color-info-bg);
  border: 3px solid var(--epc-color-primary);
  color: var(--epc-color-primary);
}

.compilazione-aree-nav li[aria-current="step"] .step-etichetta {
  color: var(--epc-color-primary);
  font-weight: 700;
}

@media (max-width: 600px) {
  .compilazione-aree-nav {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--epc-space-4));
    padding-inline: var(--epc-space-4);
    scrollbar-width: thin;
  }

  .compilazione-aree-nav ol {
    min-width: 520px;
  }

  .compilazione-aree-nav .step-etichetta {
    display: block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .step-cerchio {
    width: 36px;
    height: 36px;
  }

  .compilazione-aree-nav li:not(:last-child)::after {
    top: 17px;
    left: calc(50% + 21px);
    right: calc(-50% + 21px);
  }
}

/* Card con più profondità (era un fieldset senza bordo/sfondo): niente `border` sul
   fieldset apposta - un <legend> con un bordo reale davanti "straddla" la linea del bordo
   (comportamento nativo HTML), risultato scomposto una volta che il fieldset diventa una
   card. Il contorno è simulato con box-shadow (non soggetto a quella regola). */
.domanda {
  border: none;
  padding: 0;
  margin: 0 0 var(--epc-space-5);
  border-radius: var(--epc-radius-md);
  background: var(--epc-color-surface);
  box-shadow: 0 0 0 1px var(--epc-color-border), var(--epc-shadow-md);
}

/* Domanda obbligatoria ancora senza risposta (25/08/2026): anello ambra al posto di quello
   grigio, così si vede a colpo d'occhio quali restano da fare senza dover leggere ogni
   riquadro - stesso principio del popup di attenzione, pubblico non "digitale" (vedi memoria
   di progetto). Rimossa via JS non appena il salvataggio automatico va a buon fine
   (compilazione.js), niente bisogno di ricaricare la pagina. */
.domanda.domanda-da-rispondere {
  box-shadow: 0 0 0 2px var(--epc-color-warning-border), var(--epc-shadow-md);
}

/* Il testo della domanda NON è più il <legend> visibile (25/08/2026): il posizionamento di
   <legend> è speciale e non del tutto controllabile via CSS anche con `border:none` - a
   volte l'ultima riga finiva a ridosso/dentro il bordo del riquadro sottostante. <legend>
   resta nel markup solo per l'accessibilità (raggruppa il fieldset, sr-only), il testo
   visibile è un paragrafo normale dentro .domanda-corpo, senza le stranezze di legend. */
.domanda legend {
  padding: 0;
  margin: 0;
}

/* domanda-intestazione: testo (con numero) a sinistra, badge "Obbligatoria" a destra (era un
   semplice asterisco - 25/08/2026, si perdeva nello stesso nero grassetto della domanda). */
.domanda-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--epc-space-2);
  margin: 0 0 var(--epc-space-3);
}

.domanda-testo {
  display: flex;
  align-items: baseline;
  gap: var(--epc-space-2);
  font-weight: 600;
  margin: 0;
}

.domanda-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--epc-color-bg);
  border: 1px solid var(--epc-color-border);
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
  font-weight: 700;
}

.badge-info {
  background: var(--epc-color-info-bg);
  color: var(--epc-color-info-text);
  border-color: var(--epc-color-info-border);
}

.domanda-corpo {
  padding: var(--epc-space-4) var(--epc-space-5);
}

.domanda .opzione {
  display: flex;
  align-items: center;
  min-height: var(--epc-target-size);
  padding: var(--epc-space-2) var(--epc-space-3);
  margin-bottom: var(--epc-space-2);
  border: 2px solid var(--epc-color-border);
  border-radius: var(--epc-radius-sm);
  background: var(--epc-color-bg);
  transition: border-color var(--epc-transition), background-color var(--epc-transition);
}

.domanda .opzione:last-child {
  margin-bottom: 0;
}

.domanda .opzione:has(input:checked) {
  border-color: var(--epc-color-primary);
  background: var(--epc-color-info-bg);
}

.domanda .opzione label {
  display: flex;
  align-items: center;
  gap: var(--epc-space-2);
  width: 100%;
  cursor: pointer;
}

.domanda .opzione input[type="radio"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.domanda-stato-salvataggio {
  display: inline-block;
  margin-top: var(--epc-space-1);
  font-size: var(--epc-font-size-sm);
  color: var(--epc-color-text-muted);
  min-height: 1.2em;
}

/* "Salva e continua più tardi" a sinistra, Area precedente/successiva a destra (25/08/2026,
   era un link semplice sotto ai bottoni - non un'azione di pari peso). */
.compilazione-navigazione {
  display: flex;
  flex-wrap: wrap;
  gap: var(--epc-space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--epc-space-5);
}

.compilazione-navigazione-avanti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--epc-space-3);
  align-items: center;
}

/* --- Riepilogo / ricevuta (F3.9a) ----------------------------------------- */
.ricevuta dt {
  font-weight: 600;
  margin-top: var(--epc-space-3);
}

.ricevuta dd {
  margin: 0;
  color: var(--epc-color-text-muted);
}

/* Codice ricevuta (25/08/2026): monospace perché è pensato per essere letto/riscritto a
   mano da chi lo comunica al supporto - una "Q" e sei cifre si confondono meno facilmente
   in un font a spaziatura fissa che nel corpo del testo normale. */
.ricevuta-codice {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--epc-font-size-lg);
  font-weight: 700;
  color: var(--epc-color-text);
  letter-spacing: 0.05em;
}

/* Layout a due colonne su schermi larghi (25/08/2026, era colonna singola stretta):
   contenuto + sidebar con progresso/indice/conferma. Sotto i 900px (stesso breakpoint del
   container in base.css) la sidebar scende sotto il contenuto invece di stare a fianco. */
.riepilogo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--epc-space-5);
  align-items: start;
}

@media (min-width: 900px) {
  .riepilogo-layout {
    grid-template-columns: 1fr 320px;
  }
}

.riepilogo-area {
  background: var(--epc-color-surface);
  border-radius: var(--epc-radius-md);
  box-shadow: 0 0 0 1px var(--epc-color-border), var(--epc-shadow-sm);
  padding: var(--epc-space-4) var(--epc-space-5);
  margin-bottom: var(--epc-space-4);
}

.riepilogo-area-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--epc-space-2);
  margin-bottom: var(--epc-space-3);
}

.riepilogo-area-intestazione h2 {
  margin: 0;
  font-size: var(--epc-font-size-lg);
}

.riepilogo-area-azioni {
  display: flex;
  align-items: center;
  gap: var(--epc-space-3);
}

/* Dal riepilogo si può tornare a compilare/correggere una singola area (25/08/2026, prima
   non c'era modo di farlo se non tornando indietro alla prima area e riavanzando): stessa
   rotta di Compilazione.cshtml, area passata come query string (asp-route-area). */
.riepilogo-modifica {
  display: inline-flex;
  align-items: center;
  gap: var(--epc-space-1);
  font-size: var(--epc-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Ogni domanda + risposta è un blocco unico (25/08/2026, prima dt e dd galleggiavano senza
   un confine visivo fra una domanda e la successiva). */
.riepilogo-domande {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--epc-space-3);
}

.riepilogo-domanda-riga {
  border: 1px solid var(--epc-color-border);
  border-radius: var(--epc-radius-sm);
  padding: var(--epc-space-3);
}

.riepilogo-domande dt {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--epc-space-2);
  margin: 0 0 var(--epc-space-1);
}

.riepilogo-domande dd {
  margin: 0;
  color: var(--epc-color-text-muted);
}

.riepilogo-domanda-riga.riepilogo-domanda-mancante {
  border-color: var(--epc-color-error-border);
}

.riepilogo-domanda-riga.riepilogo-domanda-mancante dt {
  color: var(--epc-color-error-text);
}

.riepilogo-domanda-riga.riepilogo-domanda-mancante dd {
  color: var(--epc-color-error-text);
  font-style: italic;
}

.riepilogo-barra-laterale {
  position: sticky;
  top: var(--epc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--epc-space-4);
}

@media (max-width: 900px) {
  .riepilogo-barra-laterale {
    position: static;
  }
}

.riepilogo-stato-card {
  background: #fff;
  border: 1px solid var(--epc-color-border);
  border-radius: var(--epc-radius-md);
  box-shadow: var(--epc-shadow-lg);
  padding: var(--epc-space-5);
}

.riepilogo-stato-card h3 {
  margin: 0 0 var(--epc-space-4);
  font-size: var(--epc-font-size-lg);
}

.riepilogo-progresso-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--epc-space-2);
  margin-bottom: var(--epc-space-2);
  font-size: var(--epc-font-size-sm);
}

.riepilogo-progresso-riga strong {
  font-size: var(--epc-font-size-sm);
}

.riepilogo-barra-progresso {
  height: 8px;
  border-radius: var(--epc-radius-pill);
  background: var(--epc-color-border);
  overflow: hidden;
  margin-bottom: var(--epc-space-5);
}

.riepilogo-barra-progresso > div {
  height: 100%;
  background: var(--epc-color-primary);
  border-radius: var(--epc-radius-pill);
}

.riepilogo-indice-aree {
  list-style: none;
  margin: 0 0 var(--epc-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--epc-space-3);
}

.riepilogo-indice-aree a {
  display: flex;
  align-items: center;
  gap: var(--epc-space-2);
  font-size: var(--epc-font-size-sm);
  color: var(--epc-color-text);
  text-decoration: none;
}

.riepilogo-indice-aree a:hover {
  text-decoration: underline;
}

.riepilogo-indice-aree svg {
  flex-shrink: 0;
}

.riepilogo-icona-successo {
  color: var(--epc-color-success-border);
}

.riepilogo-icona-avviso {
  color: var(--epc-color-warning-border);
}

.riepilogo-stato-card form {
  margin: 0;
}

.riepilogo-stato-card .btn {
  width: 100%;
}

.riepilogo-nota {
  margin: var(--epc-space-3) 0 0;
  font-size: var(--epc-font-size-sm);
  color: var(--epc-color-text-muted);
  text-align: center;
}

.riepilogo-salva-piu-tardi {
  width: 100%;
}

/* --- Popup di attenzione (25/08/2026) --------------------------------------
 * <dialog> nativo: centrato dal browser, ::backdrop scurisce il resto della pagina, Esc e
 * focus trap già gestiti. Testo grande e diretto, un solo bottone grande: pensato per un
 * pubblico che include lavoratori poco avvezzi al digitale (vedi memoria di progetto). */
.popup-attenzione {
  width: min(90vw, 420px);
  padding: var(--epc-space-6) var(--epc-space-5) var(--epc-space-5);
  border: none;
  border-radius: var(--epc-radius-lg);
  box-shadow: var(--epc-shadow-lg);
  text-align: center;
}

.popup-attenzione::backdrop {
  background: rgba(26, 31, 38, 0.6);
}

.popup-attenzione-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--epc-space-4);
  border-radius: 50%;
  background: var(--epc-color-error-bg);
  color: var(--epc-color-error-border);
}

.popup-attenzione h2 {
  margin: 0 0 var(--epc-space-3);
  font-size: var(--epc-font-size-xl);
}

.popup-attenzione p {
  margin: 0 0 var(--epc-space-5);
  font-size: var(--epc-font-size-lg);
  color: var(--epc-color-text-muted);
}

.popup-attenzione form {
  margin: 0;
}

.popup-attenzione .btn {
  width: 100%;
}

/* --- Campo di form -------------------------------------------------------
 * Pattern per F3.6/F3.8 (login, cambio password, compilazione): non ancora cablato a un
 * componente/TagHelper perché non esiste ancora un form reale da cui derivarlo — qui c'è
 * solo lo stile. Markup atteso, per soddisfare §11 punto 1 (label associate, errori
 * annunciati non solo dal colore):
 *
 *   <div class="field has-error">
 *     <label for="Password">Password</label>
 *     <input id="Password" type="password" autocomplete="current-password"
 *            aria-describedby="Password-help Password-error" aria-invalid="true" />
 *     <span id="Password-help" class="field-help">Minimo 8 caratteri.</span>
 *     <span id="Password-error" class="field-error" role="alert">Password errata.</span>
 *   </div>
 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--epc-space-1);
  margin-bottom: var(--epc-space-4);
}

.field label {
  font-weight: 600;
}

/* Le opzioni del progetto mantengono radio e nome affiancati. `.field input` applica
   dimensioni e padding da campo di testo: qui ripristiniamo la resa nativa del radio. */
.scelta-progetto .scelta-progetto-opzione label {
  display: flex;
  align-items: center;
  gap: var(--epc-space-2);
  min-height: var(--epc-target-size);
  cursor: pointer;
}

.scelta-progetto .scelta-progetto-opzione input[type="radio"] {
  flex: 0 0 auto;
  width: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin: 0;
  padding: 0;
}

.field input,
.field select,
.field textarea {
  min-height: var(--epc-target-size);
  padding: var(--epc-space-2) var(--epc-space-3);
  border: 2px solid var(--epc-color-border);
  border-radius: var(--epc-radius-sm);
  font-family: inherit;
  font-size: var(--epc-font-size-base);
  color: var(--epc-color-text);
  background: var(--epc-color-bg);
}

.field .field-help {
  color: var(--epc-color-text-muted);
  font-size: var(--epc-font-size-sm);
}

.field .field-error {
  color: var(--epc-color-error-text);
  font-size: var(--epc-font-size-sm);
  font-weight: 600;
}

.field.has-error input {
  border-color: var(--epc-color-error-border);
}

/* --- Pagina di accesso (25/08/2026) -----------------------------------------
 * Login/CambiaPassword/PasswordDimenticata/ResetPassword condividono lo stesso pattern
 * .field, ma solo Login usa .pagina-accesso: le altre restano nel container pieno perché
 * non sono la prima cosa che un lavoratore vede.
 * margin:auto (non "0 auto"): .container è ora una colonna flex a tutta altezza (base.css),
 * quindi margin:auto su questo unico figlio lo centra anche in verticale, non solo in
 * orizzontale - stesso trucco, senza JS né altezze calcolate a mano. */
.pagina-accesso {
  width: 100%;
  max-width: 420px;
  margin: auto;
}

.pagina-accesso-card {
  padding: var(--epc-space-5);
  margin-bottom: var(--epc-space-4);
  background: #fff;
  box-shadow: var(--epc-shadow-lg);
}

.pagina-accesso-logo {
  display: block;
  width: min(180px, 60%);
  height: auto;
  margin: 0 auto var(--epc-space-5);
}

.pagina-accesso-card h1 {
  text-align: center;
  margin-bottom: var(--epc-space-5);
}

.pagina-accesso-card .alert {
  margin-bottom: var(--epc-space-4);
}

.pagina-accesso-card form {
  margin: 0;
}

.pagina-accesso-card .field:last-of-type {
  margin-bottom: var(--epc-space-5);
}

.pagina-accesso-card .btn {
  width: 100%;
}

.pagina-accesso-link {
  margin: 0;
  text-align: center;
}