/* Varianti definitive della scheda modulo. */
:root {
  --variante-ufficiale: #1f5f4a;
  --variante-lettera: #2a4f8f;
  --variante-disdetta: #8a4b08;
  --variante-errore: #9b1c1c;
}

.variante-nascosto, .variante [hidden] { display: none !important; }

/* Scheda 1: documento prima */
.tipo-documento {
  display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.6rem;
  border: 2px solid currentColor; border-radius: 0.25rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tipo-ufficiale { color: var(--variante-ufficiale); }
.tipo-lettera { color: var(--variante-lettera); }
.tipo-disdetta { color: var(--variante-disdetta); }

.sintesi { margin: 1rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--linea); border-left: 6px solid var(--accento); border-radius: 0.25rem; }
.variante-scheda1 .tipo-ufficiale ~ .sintesi { border-left-color: var(--variante-ufficiale); }
.variante-scheda1 .tipo-lettera ~ .sintesi { border-left-color: var(--variante-lettera); }
.variante-scheda1 .tipo-disdetta ~ .sintesi { border-left-color: var(--variante-disdetta); }
.sintesi h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.sintesi ul { margin: 0; padding-left: 1.1rem; }
.sintesi li { margin-bottom: 0.4rem; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 1.5rem; }
.bottone-grande { padding: 0.75rem 1.5rem; font-weight: 700; font-size: 1.125rem; }
.cta-privacy { font-size: 0.9375rem; }

details.sezione { border-top: 1px solid var(--linea); }
details.sezione > summary { cursor: pointer; list-style: none; padding: 0.25rem 0; min-height: 2.75rem; display: flex; align-items: center; }
details.sezione > summary::-webkit-details-marker { display: none; }
details.sezione > summary h2 { margin: 0.5rem 0; flex: 1; }
details.sezione > summary::after { content: "+"; font-size: 1.5rem; padding: 0 0.5rem; }
details.sezione[open] > summary::after { content: "\2212"; }
details.sezione > summary:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* Compilazione 3: gruppi brevi */
.avanzamento { margin: 1rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--linea); border-radius: 0.25rem; }
.avanzamento-testo { margin: 0 0 0.25rem; font-weight: 700; }
.avanzamento ol { margin: 0; padding-left: 1.25rem; }
.avanzamento li { padding: 0.15rem 0; }
.avanzamento a { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }
.avanzamento-stato { font-size: 0.9375rem; }
.avanzamento li[data-completo="si"] .avanzamento-stato { color: var(--accento); font-weight: 700; }
.avanzamento li[data-completo="si"] .avanzamento-stato::before { content: "\2713 "; }

fieldset.gruppo { margin: 0 0 1.5rem; padding: 0.5rem 1rem 0.25rem; border: 1px solid var(--linea); border-radius: 0.25rem; background: #fff; }
.gruppo-titolo { padding: 0 0.5rem; font-size: 1.15rem; font-weight: 700; }
.gruppo-n { display: inline-block; min-width: 1.6rem; margin-right: 0.25rem; text-align: center; border-radius: 50%; background: var(--accento); color: #fff; }

.riepilogo-errori { margin: 1rem 0; padding: 0.75rem 1rem; border: 3px solid var(--variante-errore); background: #fff; border-radius: 0.25rem; }
.riepilogo-errori h3 { margin: 0 0 0.25rem; color: var(--variante-errore); font-size: 1.1rem; }
.riepilogo-errori ul { margin: 0; padding-left: 1.1rem; }
.riepilogo-errori li { margin: 0.1rem 0; }
.riepilogo-errori a { color: var(--variante-errore); display: block; padding: 0.4rem 0; font-weight: 700; }
.riepilogo-errori:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.riepilogo-errori[hidden] { display: none; }

/* Compilazione 1: una domanda per volta */
.domanda-testa { margin: 1rem 0 0.5rem; }
.domanda-passo { margin: 0 0 0.25rem; font-weight: 700; }
.domanda-testa progress { width: 100%; height: 0.75rem; accent-color: var(--accento); }
.variante-comp1 .campo { padding: 1rem; background: #fff; border: 1px solid var(--linea); border-radius: 0.25rem; }
.variante-comp1 .campo label { font-size: 1.2rem; }
.domanda-comandi { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.revisione { margin: 1rem 0; }
.revisione-lista { margin: 0; }
.revisione-voce { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); }
.revisione-voce dt { grid-column: 1 / -1; font-weight: 700; }
.revisione-voce dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.revisione-voce dd.vuoto { font-style: italic; color: #5a5f6b; }
.revisione-azione { align-self: center; }
.risposte-mancanti a { display: block; padding: 0.2rem 0; }

/* Telefono: la sintesi si stringe perche' il pulsante «Compila il modulo» resti nella prima schermata (360x800). */
@media (max-width: 39.99rem) {
  .variante-scheda1 h1 { margin-bottom: 0.5rem; }
  .variante-scheda1 .tipo-documento { margin-bottom: 0.25rem; }
  .sintesi { margin: 0.5rem 0; padding: 0.5rem 0.75rem; font-size: 0.9375rem; line-height: 1.4; }
  .sintesi h2 { font-size: 1rem; }
  .sintesi li { margin-bottom: 0.25rem; }
  .cta { margin: 0.75rem 0 1rem; }
}

/* Telefono, una domanda per volta: titolo, testo breve e prima domanda con «Avanti» nella prima schermata. */
@media (max-width: 39.99rem) {
  .variante-comp1 h1 { margin-bottom: 0.5rem; }
  .variante-comp1 h2 { margin-top: 1rem; }
  .variante-comp1 > p { margin: 0.5rem 0; }
  .variante-comp1 .domanda-testa { margin-top: 0.5rem; }
  .variante-comp1 .campo { padding: 0.75rem; margin-bottom: 0.75rem; }
}