/* =====================================================================
   Mod. MdL69 — modulo pubblico di richiesta visita medica
   =====================================================================

   Questo foglio di stile basta da solo: nessuna dipendenza, nessun build,
   nessuna risorsa esterna. La CSP del reverse proxy vieta CDN, caratteri
   remoti e stili in linea, quindi qualunque regola nuova va scritta qui,
   mai in un attributo `style` e mai in un `<style>`.

   Identità visiva: la stessa del portale prenotazioni MdL
   (`calendario_MdL`, React + Tailwind). Tailwind qui non c'è: le sue
   decisioni sono state tradotte in CSS scritto a mano.
     · marchio ECOS sempre in testa, su intestazione bianca con ombra
       leggera (nel portale: `bg-white shadow-sm`);
     · colore d'accento blu #2563eb, passaggio del mouse #1d4ed8
       (nel portale: `primary-600` / `primary-700`);
     · fondo pagina grigio chiarissimo #f9fafb (`bg-gray-50`);
     · schede bianche con angoli da 8px e ombra media
       (`rounded-lg shadow-md`);
     · pulsanti pieni con angoli arrotondati, campi con anello di fuoco
       blu (`focus:ring-2`);
     · carattere di sistema, senza alcun font scaricato: il portale usa
       `system-ui` e qui serve anche a rispettare la CSP.

   Mobile first: il modulo si compila spesso in cantiere, da telefono, con
   una mano sola. Da qui i bersagli di tocco grandi (min. 44px), il
   carattere di 16px sui campi — sotto i 16px iOS ingrandisce la pagina a
   ogni fuoco — e una sola colonna fino a 62rem.
   ===================================================================== */

:root {
  /* Accento: `primary-600` e `primary-700` del portale prenotazioni. */
  --blu-ecos: #2563eb;
  --blu-scuro: #1d4ed8;
  --blu-tenue: #eff6ff;      /* primary-50  — fondi tenui, evidenziazioni */
  --blu-tenue-marcato: #dbeafe; /* primary-100 — bordi dei fondi tenui   */
  --blu-anello: rgba(59, 130, 246, .45); /* primary-500 al 45%: anello di fuoco */

  --inchiostro: #111827;
  --inchiostro-tenue: #4b5563;
  --fondo: #f9fafb;
  --carta: #ffffff;
  --bordo: #e5e7eb;
  --bordo-marcato: #d1d5db;

  --rosso: #b91c1c;
  --rosso-fondo: #fef2f2;
  --ambra: #b45309;
  --ambra-fondo: #fffbeb;
  --verde: #15803d;
  --verde-fondo: #f0fdf4;

  --raggio: 8px;             /* rounded-lg  */
  --raggio-grande: 16px;     /* rounded-2xl */

  --ombra-lieve: 0 1px 2px 0 rgba(17, 24, 39, .06);
  --ombra: 0 4px 6px -1px rgba(17, 24, 39, .08),
           0 2px 4px -2px rgba(17, 24, 39, .06);
  --ombra-marcata: 0 12px 24px -8px rgba(17, 24, 39, .22);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

img { max-width: 100%; }

.contenitore {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Il contenitore e' largo, ma il testo da leggere no: una riga di prosa
   lunga mille pixel si legge male. Solo i campi usano tutta la larghezza. */
.premessa,
.aiuto,
.nota,
.intestazione-modulo p { max-width: 46rem; }

/* --- accessibilità di base ----------------------------------------- */

.solo-lettori-schermo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blu-ecos);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 10;
}
.salta-al-contenuto:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blu-ecos);
  outline-offset: 2px;
}

/* --- intestazione --------------------------------------------------
   Come nel portale prenotazioni: fondo bianco, ombra leggera, marchio a
   sinistra e titolo accanto. Il marchio c'è su ogni pagina, perché
   l'intestazione sta in base.html. */

.intestazione {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  box-shadow: var(--ombra-lieve);
  padding: .75rem 0;
}
.intestazione p { margin: 0; }

.intestazione-corpo {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.marchio {
  display: block;
  height: 40px;
  width: auto;
  flex: 0 0 auto;
}

.intestazione-testi { min-width: 0; }

.titolo-modulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1.2;
}
.sottotitolo-modulo {
  font-size: .85rem;
  color: var(--inchiostro-tenue);
  margin-top: .1rem !important;
}

/* --- piè di pagina -------------------------------------------------- */

.pie-pagina {
  margin-top: 2.5rem;
  padding: 1.25rem 0 2.5rem;
  border-top: 1px solid var(--bordo);
  background: var(--carta);
  color: var(--inchiostro-tenue);
  font-size: .85rem;
}
.pie-pagina p { margin: .4rem 0; }
.pie-pagina a { color: var(--blu-ecos); }

.riferimenti {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--inchiostro);
}
.marchio-piccolo {
  height: 22px;
  width: auto;
  flex: 0 0 auto;
}

.informativa { max-width: 52rem; }
.revisione { color: var(--inchiostro-tenue); }

/* --- barra di avanzamento ------------------------------------------ */

.avanzamento-barra {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  box-shadow: var(--ombra-lieve);
  padding: .6rem 0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.avanzamento-testo {
  margin: 0 0 .35rem;
  font-size: .9rem;
  font-weight: 600;
}
.avanzamento-nota { font-weight: 400; color: var(--inchiostro-tenue); }

progress.avanzamento {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--bordo);
  appearance: none;
  -webkit-appearance: none;
}
progress.avanzamento::-webkit-progress-bar {
  background: var(--bordo);
  border-radius: 999px;
}
progress.avanzamento::-webkit-progress-value {
  background: var(--blu-ecos);
  border-radius: 999px;
}
progress.avanzamento::-moz-progress-bar {
  background: var(--blu-ecos);
  border-radius: 999px;
}

/* --- scheda -------------------------------------------------------- */

.scheda {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.25rem 1rem 1.5rem;
  margin: 1.25rem 0;
}

h1 { font-size: 1.4rem; margin: 0 0 .6rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.scheda > h2:first-child { margin-top: 0; }

.premessa { color: var(--inchiostro-tenue); margin-top: 0; }
.nota { font-size: .88rem; color: var(--inchiostro-tenue); }

/* Collegamenti dentro il testo: blu d'accento, non il blu del browser.
   Selettori volutamente stretti, per non colorare anche i pulsanti (che
   sono `<a class="pulsante">`) né i link rossi del riquadro incompleto. */
.elenco-informativo a,
.premessa a,
.nota a,
.aiuto a { color: var(--blu-ecos); }

.elenco-informativo { padding-left: 1.2rem; margin: 0; }
.elenco-informativo li { margin-bottom: .5rem; }
.elenco-informativo li:last-child { margin-bottom: 0; }

/* --- pagina di apertura --------------------------------------------
   Non un blocco di testo unico: un riquadro di apertura con il pulsante
   subito visibile (il riquadro blu del portale prenotazioni), e sotto due
   schede che sugli schermi larghi stanno affiancate. */

.apertura { margin: 1.25rem 0; }

.apertura-intro {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blu-scuro) 100%);
  color: #fff;
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra-marcata);
  padding: 1.5rem 1.25rem;
}
.apertura-intro h1 {
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: .5rem;
}
.apertura-intro .premessa {
  color: rgba(255, 255, 255, .92);
  max-width: 42rem;
}
.apertura-intro .azioni { margin-top: 1.5rem; }

/* Sul fondo blu i pulsanti si invertono: pieno bianco quello principale. */
.apertura-intro .pulsante-principale {
  background: #fff;
  color: var(--blu-scuro);
}
.apertura-intro .pulsante-principale:hover { background: var(--blu-tenue); }
.apertura-intro .pulsante-secondario {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.apertura-intro .pulsante-secondario:hover { background: rgba(255, 255, 255, .12); }
.apertura-intro :focus-visible { outline-color: #fff; }

.apertura-griglia { display: block; }

.apertura-griglia .scheda { margin: 1.25rem 0 0; }

.nota-rilievo {
  max-width: none;
  margin: 1.25rem 0 0;
  padding: .8rem 1rem;
  background: var(--blu-tenue);
  border: 1px solid var(--blu-tenue-marcato);
  border-radius: var(--raggio);
  color: var(--inchiostro);
  font-size: .92rem;
}

/* --- messaggi ------------------------------------------------------ */

.messaggio {
  border-radius: var(--raggio);
  padding: .75rem .9rem;
  margin: 0 0 1rem;
  border-left: 4px solid;
}
.messaggio-errore {
  background: var(--rosso-fondo);
  border-color: var(--rosso);
  color: var(--rosso);
}
.messaggio-avviso {
  background: var(--ambra-fondo);
  border-color: var(--ambra);
  color: var(--ambra);
}

.riquadro-incompleto {
  background: var(--rosso-fondo);
  border: 1px solid var(--rosso);
  border-radius: var(--raggio);
  padding: .75rem .9rem;
  margin-bottom: 1.25rem;
}
.riquadro-incompleto a { color: var(--rosso); font-weight: 600; }
.riquadro-incompleto ul { padding-left: 1.1rem; margin: .3rem 0; }

/* --- campi --------------------------------------------------------- */

.campo { margin: 0 0 1.5rem; }

.campo-in-errore {
  border-left: 4px solid var(--rosso);
  padding-left: .75rem;
  margin-left: -.75rem;
}

.etichetta,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.obbligatorio { color: var(--rosso); }

.aiuto {
  margin: .1rem 0 .5rem;
  font-size: .88rem;
  color: var(--inchiostro-tenue);
}

.campo-testo {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;          /* sotto i 16px iOS ingrandisce la pagina */
  padding: .65rem .7rem;
  border: 1px solid var(--bordo-marcato);
  border-radius: var(--raggio);
  background: #fff;
  color: var(--inchiostro);
  min-height: 46px;
}
/* Anello di fuoco blu: il `focus:ring-2` del portale prenotazioni. */
.campo-testo:focus,
.campo-file:focus {
  border-color: var(--blu-ecos);
  outline: none;
  box-shadow: 0 0 0 3px var(--blu-anello);
}
[aria-invalid="true"] { border-color: var(--rosso); background: #fffafa; }

textarea.campo-testo { min-height: 7rem; resize: vertical; }
.campo-data { max-width: 14rem; }

.campo-file {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: .6rem;
  border: 1px dashed var(--bordo-marcato);
  border-radius: var(--raggio);
  background: #fff;
}

/* Scelte: bersagli grandi, tutta la riga è cliccabile. */
.scelta {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .7rem;
  margin-bottom: .35rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  cursor: pointer;
  min-height: 44px;
}
.scelta:hover { border-color: var(--bordo-marcato); }
.scelta:has(input:checked) {
  border-color: var(--blu-ecos);
  background: var(--blu-tenue);
}
.scelta input {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--blu-ecos);
}
.scelta-esclusiva { border-style: dashed; }
.scelta-dichiarazione { align-items: flex-start; background: var(--fondo); }

/* --- scelte in linea ------------------------------------------------
   Un gruppo di poche opzioni brevi (M / F, Sì / No) incolonnato occupa due
   o tre righe per niente: va in linea, e va a capo da solo se non ci sta.

   Due strade:
     1. `scelte-in-linea` sul `fieldset` — è la via esplicita, ed è quella
        che sezione.html usa per i campi marcati `compatto` in form_spec.py
        (oggi: il sesso). Chi aggiunge un campo decide lì, non qui;
     2. un ripiego automatico: un `fieldset` che non è un elenco di caselle
        di catalogo (`data-gruppo-caselle`), non contiene la dichiarazione
        lunga e ha al massimo due opzioni. Serve a non lasciare incolonnata
        una domanda «Sì / No» che nessuno ha marcato.
   Le due regole sono separate perché i browser senza `:has()` scartano la
   seconda per intero: in quel caso vale solo la classe esplicita, e i
   gruppi non marcati restano incolonnati come prima. */

fieldset.scelte-in-linea > .scelta {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 5.5rem;
  margin-right: .5rem;
}

fieldset:not([data-gruppo-caselle]):not(:has(> .scelta-dichiarazione)):not(:has(> label:nth-of-type(3))) > .scelta {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 5.5rem;
  margin-right: .5rem;
}

/* --- segnalazioni sotto al campo ----------------------------------- */

.errore-campo,
.avviso-campo {
  list-style: none;
  margin: .3rem 0 .5rem;
  padding: .5rem .7rem;
  border-radius: var(--raggio);
  font-size: .92rem;
}
.errore-campo {
  background: var(--rosso-fondo);
  color: var(--rosso);
  border-left: 3px solid var(--rosso);
}
.avviso-campo {
  background: var(--ambra-fondo);
  color: var(--ambra);
  border-left: 3px solid var(--ambra);
}

/* --- pulsanti ------------------------------------------------------ */

.pulsante {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: .75rem 1.2rem;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  min-height: 46px;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.pulsante-principale {
  background: var(--blu-ecos);
  color: #fff;
  box-shadow: var(--ombra-lieve);
}
.pulsante-principale:hover { background: var(--blu-scuro); }
.pulsante-secondario {
  background: #fff;
  color: var(--blu-ecos);
  border-color: var(--bordo-marcato);
}
.pulsante-secondario:hover { background: var(--fondo); }
.pulsante[disabled] { opacity: .6; cursor: progress; }

.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

.navigazione {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
}
.navigazione .pulsante-principale { flex: 1 1 12rem; }

/* --- conferma ed errore -------------------------------------------- */

.segno-conferma {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--verde);
  margin: 0 0 .25rem;
}
.numero-richiesta {
  background: var(--blu-tenue);
  border: 1px solid var(--blu-tenue-marcato);
  border-radius: var(--raggio);
  padding: .8rem 1rem;
  font-size: 1.05rem;
}
.numero-richiesta strong { font-size: 1.35rem; letter-spacing: .03em; }
.scheda-errore h1 { color: var(--rosso); }

/* --- honeypot ------------------------------------------------------
   Nascosto con il posizionamento fuori schermo e non con `display:none`:
   alcuni bot compilano solo i campi visibili secondo il CSS ma ignorano il
   posizionamento, e questo è esattamente il comportamento che si vuole
   intercettare. Mai nascosto con uno stile in linea: la CSP lo bloccherebbe e
   il campo diventerebbe visibile all'utente vero, che lo compilerebbe. */

.campo-esca {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- schermi più larghi -------------------------------------------- */

@media (min-width: 40rem) {
  body { font-size: 17px; }
  .scheda { padding: 1.75rem 2rem 2rem; }
  h1 { font-size: 1.7rem; }
  .navigazione .pulsante-principale { flex: 0 0 auto; min-width: 12rem; }

  .intestazione { padding: .9rem 0; }
  .marchio { height: 48px; }
  .titolo-modulo { font-size: 1.35rem; }
  .sottotitolo-modulo { font-size: .9rem; }

  .apertura-intro { padding: 2.25rem 2rem; }
  .apertura-intro h1 { font-size: 2rem; }
}

/* --- stampa --------------------------------------------------------- */

@media print {
  .avanzamento-barra, .navigazione, .azioni, .salta-al-contenuto { display: none; }
  body { background: #fff; }
  .scheda { border: 0; box-shadow: none; }
  .intestazione { box-shadow: none; }
  .apertura-intro {
    background: #fff;
    color: #000;
    box-shadow: none;
    border: 1px solid #000;
  }
  .apertura-intro h1 { color: #000; }
  .apertura-intro .premessa { color: #000; }
}


/* ------------------------------------------------------------------ */
/* Schermi larghi: due colonne.                                        */
/*                                                                     */
/* Su telefono il modulo resta a colonna singola, che e' l'unico modo   */
/* sensato di compilarlo con una mano. Da 62rem in su i campi corti     */
/* (nome, sesso, data di nascita, telefono) stanno affiancati: senza,   */
/* meta' schermo resta vuota e la sezione 2 diventa un elenco lunghis-  */
/* simo da scorrere.                                                   */
/*                                                                     */
/* Restano a tutta larghezza i campi che non si possono stringere:      */
/* gli elenchi di caselle delle domande 26/27/28, i gruppi di scelta    */
/* lunghi, la dichiarazione, le descrizioni lunghe, l'allegato e la     */
/* barra dei pulsanti.                                                  */
/*                                                                     */
/* Fanno eccezione i gruppi marcati `scelte-in-linea` (in form_spec.py: */
/* `Campo(compatto=True)`, cioe' il sesso): stanno in mezza colonna, su */
/* una riga sola. Prima erano «un fieldset qualsiasi» e si prendevano   */
/* tutta la riga per due lettere.                                       */
/* ------------------------------------------------------------------ */
@media (min-width: 62rem) {
  .modulo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.25rem;
    align-items: start;
  }

  .modulo > .campo { margin-bottom: 1.6rem; }

  .modulo > .campo:has(fieldset:not(.scelte-in-linea)),
  .modulo > .campo:has(textarea),
  .modulo > .campo:has(input[type="file"]),
  .modulo > .navigazione,
  .modulo > .nota,
  .modulo > .messaggio,
  .modulo > .riquadro-avvisi {
    grid-column: 1 / -1;
  }

  /* La pagina di apertura ha una misura di lettura sua: il riquadro blu
     resta largo, le due schede informative si affiancano. */
  .apertura-griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
    margin-top: 1.25rem;
  }
  .apertura-griglia .scheda { margin: 0; height: 100%; }
}

/* ------------------------------------------------------------------ */
/* Note dei campi: dal 21/08/2026 stanno SOTTO il controllo.           */
/*                                                                     */
/* Con la nota sopra, note di lunghezza diversa spingevano le caselle  */
/* a quote diverse: su due colonne le schede si vedevano storte. La    */
/* misura originale di `.aiuto` era pensata per stare sopra, quindi    */
/* qui si corregge lo spazio quando la nota segue il campo.            */
/* ------------------------------------------------------------------ */
.campo-testo + .aiuto,
.campo-file + .aiuto,
.campo-data + .aiuto,
fieldset .aiuto:last-child {
  margin: .4rem 0 0;
}

/* Nel campo allegato ci sono due note di seguito: la spiegazione fissa
   e il riscontro sul file scelto. La seconda si stacca dalla prima. */
.aiuto + .aiuto[data-esito-file] { margin-top: .25rem; }