/* ==========================================================================
   Contatti — foglio di stile
   Standard UI Digital Support, Gruppo 3 "Strumenti Digital Support"
   (vedi ..\Design.md), con due scelte dell'utente:
   - il pannello di presentazione, e nel tema scuro anche la testata, nel blu
     notte del sito (--c-notte); nel tema chiaro testata bianca e logo classico;
   - tema chiaro predefinito (non segue il sistema), scuro solo se scelto
     con l'interruttore;
   - raggi 4 / 6 / 8 px, pillola solo per contatori;
   - font di sistema, controlli alti 44px (pagina pubblica, anche da telefono);
   - nessuna risorsa remota, nessuna emoji.
   I colori esistono solo come variabili: il chiaro è la base, lo scuro le
   ridefinisce.
   ========================================================================== */

:root {
  --c-sfondo: #F5F7FA;
  --c-superficie: #FFFFFF;
  --c-superficie-alt: #EEF2F6;
  --c-bordo: #DFE3EA;
  --c-bordo-forte: #C7CEDB;

  --c-testo: #0E1116;
  --c-testo-medio: #2B3340;
  --c-testo-tenue: #5A6472;

  --c-primario: #006BB3;
  --c-primario-hover: #005A96;
  --c-primario-tenue: #E8F5FF;
  --c-su-primario: #FFFFFF;
  /* Azzurro del logo: solo marchio e dettagli, mai testo su fondo chiaro. */
  --c-marchio: #00AAFF;

  /* Blu notte del sito: testata e pannello di presentazione, uguali nei due temi. */
  --c-notte: #010C2D;
  --c-notte-bordo: rgb(255 255 255 / 14%);
  --c-su-notte: #FFFFFF;
  --c-su-notte-tenue: #B9C6DA;
  --c-link-notte: #57BAFF;

  /* Testata: bianca con il logo classico nel chiaro, blu notte nello scuro. */
  --c-testata: var(--c-superficie);
  --c-testata-bordo: var(--c-bordo);
  --c-su-testata: var(--c-testo);
  --c-testata-controllo: var(--c-bordo-forte);

  --c-ok: #15803D;
  --c-ok-tenue: #E6F4EA;
  --c-pericolo: #B42318;
  --c-pericolo-tenue: #FDECEA;

  --ombra-lieve: 0 1px 2px rgb(14 17 22 / 6%);

  --r-mini: 4px;
  --r: 6px;
  --r-grande: 8px;
  --r-pillola: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --h-touch: 44px;

  --font-testo: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-codice: Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --transizione: 150ms ease;
  color-scheme: light;
}

.tema-scuro {
  --c-testata: var(--c-notte);
  --c-testata-bordo: var(--c-marchio);
  --c-su-testata: var(--c-su-notte);
  --c-testata-controllo: var(--c-notte-bordo);

  --c-sfondo: #0F141B;
  --c-superficie: #161D27;
  --c-superficie-alt: #1C2532;
  --c-bordo: #2A3242;
  --c-bordo-forte: #3A4356;

  --c-testo: #E8EDF3;
  --c-testo-medio: #C3CBD6;
  --c-testo-tenue: #97A1B3;

  --c-primario: #46B8FF;
  --c-primario-hover: #7ACBFF;
  --c-primario-tenue: rgb(0 170 255 / 14%);
  --c-su-primario: #06121C;

  --c-ok: #56C390;
  --c-ok-tenue: rgb(86 195 144 / 14%);
  --c-pericolo: #E8695F;
  --c-pericolo-tenue: rgb(232 105 95 / 14%);

  --ombra-lieve: 0 1px 2px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-testo);
  background: var(--c-sfondo);
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 1.25; font-weight: 700; }
h2 { font-size: 18px; line-height: 1.25; font-weight: 600; }

a { color: var(--c-primario); cursor: pointer; }
a:hover { color: var(--c-primario-hover); }

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

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

.icona {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icona-piccola { width: 16px; height: 16px; }
.icona-grande { width: 28px; height: 28px; }

.cifre {
  font-family: var(--font-codice);
  font-variant-numeric: tabular-nums;
}

.salta {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--c-superficie);
  color: var(--c-primario);
  border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r);
  font-weight: 600;
}
.salta:focus { top: var(--s-2); }

/* --- Testata e piede -------------------------------------------------------- */
.testata {
  background: var(--c-testata);
  border-bottom: 1px solid var(--c-testata-bordo);
  padding-top: env(safe-area-inset-top, 0px);
}
.testata-interno {
  max-width: 1080px;
  margin: 0 auto;
  height: 56px;
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.marchio { display: flex; align-items: center; }
.marchio img { display: block; height: 44px; width: auto; }
.logo-notte { display: none !important; }
.tema-scuro .logo-giorno { display: none !important; }
.tema-scuro .logo-notte { display: block !important; }

.btn-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-touch);
  height: var(--h-touch);
  padding: 0;
  border: 1px solid var(--c-testata-controllo);
  border-radius: var(--r);
  background: transparent;
  color: var(--c-su-testata);
  cursor: pointer;
  transition: background-color var(--transizione);
}
.btn-icona:hover { background: var(--c-superficie-alt); }
.tema-scuro .btn-icona:hover { background: var(--c-notte-bordo); }

/* Icona del tema: la luna nel chiaro, il sole nello scuro. */
.icona-tema-sole { display: none; }
.tema-scuro .icona-tema-luna { display: none; }
.tema-scuro .icona-tema-sole { display: inline-flex; }

.pagina {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
}

.piede {
  border-top: 1px solid var(--c-bordo);
  color: var(--c-testo-tenue);
  font-size: 12px;
}
.piede-interno {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

/* --- Disposizione ------------------------------------------------------------ */
.disposizione {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) {
  .disposizione {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
  }
  .presentazione { position: sticky; top: var(--s-5); }
  .pagina { padding-top: var(--s-6); }
}

.scheda {
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r);
  box-shadow: var(--ombra-lieve);
  padding: var(--s-5) var(--s-4);
}
@media (min-width: 600px) {
  .scheda { padding: var(--s-5); }
}

.etichetta-sezione {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primario);
  margin-bottom: var(--s-2);
}

/* --- Pannello di presentazione (blu notte del sito) --------------------------- */
.presentazione {
  background: var(--c-notte);
  color: var(--c-su-notte);
  border-radius: var(--r);
  padding: var(--s-5) var(--s-4);
}
@media (min-width: 600px) {
  .presentazione { padding: var(--s-6) var(--s-5); }
}
.presentazione .etichetta-sezione { color: var(--c-marchio); }
.presentazione h1 { color: var(--c-su-notte); }
.presentazione a { color: var(--c-link-notte); }
.presentazione a:hover { color: var(--c-su-notte); }

.introduzione {
  margin-top: var(--s-3);
  color: var(--c-su-notte-tenue);
}

.passi {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.passi li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.passi strong { display: block; font-weight: 600; }
.passi span:not(.passo-numero) { display: block; font-size: 14px; color: var(--c-su-notte-tenue); }
.passo-numero {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-marchio);
  border-radius: 50%;
  color: var(--c-marchio);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-codice);
}

.nota-clienti {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-notte-bordo);
  font-size: 14px;
  color: var(--c-su-notte-tenue);
}
.nota-clienti .icona { color: var(--c-marchio); margin-top: 1px; }
.nota-clienti strong { color: var(--c-su-notte); font-weight: 600; display: block; }

/* Su telefono la presentazione resta breve: i passi si leggono dopo. */
@media (max-width: 599px) {
  .passi { gap: var(--s-3); }
}

/* --- Modulo ------------------------------------------------------------------ */
.modulo-scheda h2 { margin-bottom: var(--s-4); }

form { display: grid; gap: var(--s-4); }

.griglia-campi {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 600px) {
  .griglia-campi { grid-template-columns: 1fr 1fr; }
}

.campo { display: grid; gap: 6px; min-width: 0; }
fieldset.campo { border: 0; margin: 0; padding: 0; }

.campo label:not(.spunta):not(.scelta),
.campo legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-testo-medio);
  padding: 0;
}
.campo legend { margin-bottom: 6px; }
.facoltativo {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--c-testo-tenue);
  margin-left: var(--s-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: var(--h-touch);
  padding: 10px var(--s-3);
  font: inherit;
  font-size: 16px;
  color: var(--c-testo);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r);
  transition: border-color var(--transizione);
}
textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--c-testo-tenue); }
input:hover, select:hover, textarea:hover { border-color: var(--c-testo-tenue); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-marchio);
  outline-offset: 0;
  border-color: var(--c-primario);
}
[aria-invalid="true"] { border-color: var(--c-pericolo); }

.campo-stretto { max-width: 320px; }

.campo-nota {
  font-size: 12px;
  color: var(--c-testo-tenue);
}
.campo-errore {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-pericolo);
}

/* Scelta dell'esigenza: riquadri con icona, uno solo selezionabile. */
.scelte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}
.scelta { position: relative; cursor: pointer; }
.scelta input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.scelta-corpo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--h-touch);
  height: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r);
  background: var(--c-superficie);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-testo-medio);
  transition: border-color var(--transizione), background-color var(--transizione);
}
.scelta-corpo .icona { color: var(--c-primario); }
.scelta:hover .scelta-corpo { border-color: var(--c-primario); }
.scelta input:checked + .scelta-corpo {
  border-color: var(--c-primario);
  background: var(--c-primario-tenue);
  color: var(--c-testo);
  box-shadow: inset 0 0 0 1px var(--c-primario);
}
.scelta input:focus-visible + .scelta-corpo {
  outline: 3px solid var(--c-marchio);
  outline-offset: 2px;
}
fieldset[aria-invalid="true"] .scelta-corpo { border-color: var(--c-pericolo); }

.spunta {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 14px;
  color: var(--c-testo-medio);
  cursor: pointer;
}
.spunta input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--c-primario);
  cursor: pointer;
}
.spunta input[aria-invalid="true"] { outline: 2px solid var(--c-pericolo); outline-offset: 2px; }

.trappola {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.azioni {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.azioni-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-testo-tenue);
}
@media (min-width: 600px) {
  .azioni { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4); }
}

/* --- Pulsanti ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--h-touch);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione);
}
.btn-primario {
  background: var(--c-primario);
  color: var(--c-su-primario);
  width: 100%;
}
.btn-primario:hover { background: var(--c-primario-hover); color: var(--c-su-primario); }
.btn-primario:disabled { opacity: 0.7; cursor: progress; }
@media (min-width: 600px) {
  .btn-primario { width: auto; min-width: 220px; }
}
.btn-neutro {
  background: var(--c-superficie);
  color: var(--c-testo);
  border-color: var(--c-bordo-forte);
}
.btn-neutro:hover { background: var(--c-superficie-alt); color: var(--c-testo); }

/* --- Avvisi ------------------------------------------------------------------ */
.avviso {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
  font-size: 14px;
}
.avviso-errore {
  background: var(--c-pericolo-tenue);
  border: 1px solid var(--c-pericolo);
  color: var(--c-testo);
}
.avviso-errore .icona { color: var(--c-pericolo); }

/* --- Conferma ---------------------------------------------------------------- */
.disposizione-centrata { display: flex; justify-content: center; }
.conferma {
  max-width: 520px;
  width: 100%;
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.conferma-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-ok-tenue);
  color: var(--c-ok);
}
.conferma p { color: var(--c-testo-medio); }
.conferma-contatti {
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-bordo);
  width: 100%;
  display: grid;
  gap: var(--s-2);
  font-size: 14px;
  color: var(--c-testo-medio);
}
.conferma-contatti li { display: flex; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }
.conferma-contatti .icona { color: var(--c-testo-tenue); }

/* --- Testo lungo (informativa) ---------------------------------------------- */
.testo-lungo { max-width: 760px; margin: 0 auto; }
.testo-lungo h1 { margin-bottom: var(--s-2); }
.testo-lungo h2 { margin: var(--s-5) 0 var(--s-2); }
.testo-lungo p { color: var(--c-testo-medio); }
.testo-lungo .torna { margin-top: var(--s-5); }

/* --- Modalità incorporata nel sito ------------------------------------------ */
.embed body { background: transparent; min-height: 0; }
.embed .pagina { max-width: none; padding: var(--s-1); }
.embed .disposizione { display: block; }

/* --- Movimento ridotto ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}