/* =============================================================================
   Trust Anatomy - Agenda appuntamenti | foglio di stile unico
   Progetto grafico: Picasso (UX Designer), 19 agosto 2026
   Marca: Midnight Navy #0D1B2A, Deep Slate #1A2A3F, Champagne Gold #E8C96A,
   Ivory White #F0EAD6, Steel Blue #B8CBD8. Titoli Georgia, corpo stack di sistema.
   Vincoli CSP: nessun font esterno, nessuna libreria, nessuna immagine, nessun CDN.
   Tema chiaro = carta avorio + inchiostro navy; tema scuro = navy + oro.
   Ogni colore e' esplicito: niente default del browser, niente testo in trasparenza.
   NOTA PER CHI IMPLEMENTA: [hidden] e' forzato a display:none !important perche'
   molti blocchi qui sono flex o grid e app.js li nasconde con l'attributo hidden.
   Non rimuovere quella regola.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. VARIABILI - TEMA CHIARO (base)
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette di marca, invariata nei due temi */
  --navy: #0D1B2A;
  --slate: #1A2A3F;
  --oro: #E8C96A;
  --oro-antico: #C9A84C;
  --oro-brunito: #A87B2A;
  --avorio: #F0EAD6;
  --acciaio: #B8CBD8;
  --polvere: #8FA8BC;

  /* Superfici */
  --sfondo: #F2EEE3;
  --sfondo-trama:
    radial-gradient(900px 380px at 50% -150px, #FDFBF4 0%, rgba(253, 251, 244, 0) 72%);
  --carta: #FFFDF8;
  --carta-2: #F8F4E9;
  --campo: #FFFFFF;
  --campo-attivo: #FFFFFF;

  /* Bordi e fili */
  --bordo: #DED7C6;
  --bordo-forte: #C8BEA8;
  --bordo-hover: #A89C82;
  --filo-oro: #E3D2A6;
  --filo-oro-forte: #C9A84C;

  /* Testo */
  --testo: #0D1B2A;
  --tenue: #46596B;
  --lieve: #5F6E7E;
  --marchio: #7A5A16;

  /* Accento: riempimenti primari e link */
  --accento: #12283C;
  --accento-hover: #1D3A54;
  --accento-bordo: #12283C;
  --accento-chiaro: #F5EFDD;
  --accento-bordo-tenue: #E0D3AC;
  --su-accento: #FBF7EC;
  --link: #7A5A16;
  --link-hover: #5E4512;

  /* Stati */
  --ok: #1F6E4A;
  --ok-sfondo: #E9F2EC;
  --ok-bordo: #A9CBB8;
  --errore: #8E2626;
  --errore-sfondo: #FBEDEA;
  --errore-bordo: #D2A198;
  --avviso-testo: #5E4A17;
  --avviso-sfondo: #FBF2DC;
  --avviso-bordo: #C9A84C;
  --avviso-bordo-tenue: #E5D3A3;
  --occupato: #8C2F2F;
  --occupato-sfondo: #F7E9E6;
  --occupato-bordo: #DFB6AE;
  --prenotato: #6E4F12;
  --prenotato-sfondo: #F6EDD9;
  --prenotato-bordo: #C9A84C;
  --passato: #5A6675;
  --passato-sfondo: #ECEAE1;
  --passato-bordo: #D5CFC0;

  /* Disabilitato (esente dal requisito di contrasto, ma tenuto leggibile) */
  --spento-sfondo: #EAE5D8;
  --spento-testo: #5F6E7E;
  --spento-bordo: #D6CFBD;

  /* Fuoco: l'anello sta sempre fuori dall'elemento, quindi resta visibile
     sia sui riempimenti pieni sia sulle superfici chiare */
  --focus: #0D1B2A;
  --focus-alone: rgba(13, 27, 42, 0.16);

  /* Ombre */
  --ombra: 0 1px 2px rgba(13, 27, 42, 0.05), 0 14px 34px -18px rgba(13, 27, 42, 0.22);
  --ombra-alta: 0 2px 4px rgba(13, 27, 42, 0.07), 0 18px 40px -20px rgba(13, 27, 42, 0.28);
  --ombra-bottone: 0 1px 2px rgba(13, 27, 42, 0.14);

  /* Tipografia */
  --font-titoli: Georgia, "Times New Roman", "Nimbus Roman", "Liberation Serif", serif;
  --font-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Spaziature */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 30px;
  --s7: 42px;

  /* Raggi */
  --raggio: 14px;
  --raggio-s: 10px;
  --raggio-xs: 7px;
  --raggio-pillola: 999px;

  /* Movimento */
  --t: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-lento: 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   2. VARIABILI - TEMA SCURO (identita' Trust Anatomy piena)
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --sfondo: #0A1420;
    --sfondo-trama:
      radial-gradient(700px 260px at 50% -110px, rgba(232, 201, 106, 0.10) 0%, rgba(232, 201, 106, 0) 70%),
      radial-gradient(1000px 460px at 50% -180px, #16304A 0%, rgba(22, 48, 74, 0) 72%);
    --carta: #122134;
    --carta-2: #17293E;
    --campo: #0E1C2C;
    --campo-attivo: #101F31;

    --bordo: #26405A;
    --bordo-forte: #33506D;
    --bordo-hover: #4A6B89;
    --filo-oro: #6E5A28;
    --filo-oro-forte: #E8C96A;

    --testo: #F0EAD6;
    --tenue: #B8CBD8;
    --lieve: #8FA8BC;
    --marchio: #E8C96A;

    --accento: #E8C96A;
    --accento-hover: #F3DA92;
    --accento-bordo: #C9A84C;
    --accento-chiaro: #1D2E44;
    --accento-bordo-tenue: #2E4560;
    --su-accento: #0D1B2A;
    --link: #E8C96A;
    --link-hover: #F3DA92;

    --ok: #7FD1A8;
    --ok-sfondo: #12291F;
    --ok-bordo: #2F5C46;
    --errore: #F0A79C;
    --errore-sfondo: #2C1A19;
    --errore-bordo: #6E3630;
    --avviso-testo: #EBD9A6;
    --avviso-sfondo: #2A2213;
    --avviso-bordo: #A87B2A;
    --avviso-bordo-tenue: #4A3D1C;
    --occupato: #F0A79C;
    --occupato-sfondo: #2C1A19;
    --occupato-bordo: #6E3630;
    --prenotato: #E8C96A;
    --prenotato-sfondo: #26200F;
    --prenotato-bordo: #7A6226;
    --passato: #8FA8BC;
    --passato-sfondo: #152232;
    --passato-bordo: #2A4159;

    --spento-sfondo: #1A2B3E;
    --spento-testo: #8194A6;
    --spento-bordo: #2A4159;

    --focus: #E8C96A;
    --focus-alone: rgba(232, 201, 106, 0.22);

    --ombra: 0 1px 0 rgba(232, 201, 106, 0.06), 0 22px 50px -26px rgba(0, 0, 0, 0.75);
    --ombra-alta: 0 1px 0 rgba(232, 201, 106, 0.10), 0 26px 60px -26px rgba(0, 0, 0, 0.85);
    --ombra-bottone: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
}

/* -----------------------------------------------------------------------------
   3. RESET E BASE
   -------------------------------------------------------------------------- */

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background-color: var(--sfondo);
  background-image: var(--sfondo-trama);
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 20px 14px 56px;
  background-color: transparent;
  color: var(--testo);
  font-family: var(--font-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: var(--focus-alone);
}

/* Serve perche' avvisi, passi e bottoni nascosti usano l'attributo hidden
   mentre qui molti di quei blocchi diventano flex o grid. */
[hidden] { display: none !important; }

::selection {
  background-color: var(--accento-chiaro);
  color: var(--testo);
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t);
}
a:hover { color: var(--link-hover); }

/* -----------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--testo);
  text-wrap: balance;
}

h1 {
  margin: 0 0 var(--s2);
  font-size: clamp(25px, 6.2vw, 33px);
  line-height: 1.18;
  letter-spacing: 0.002em;
}

h2 {
  margin: 0 0 var(--s4);
  font-size: clamp(19px, 4.6vw, 22px);
  line-height: 1.3;
}

h3 {
  margin: 0 0 var(--s2);
  font-size: 16px;
  line-height: 1.35;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

.sottotitolo {
  margin: 0;
  color: var(--tenue);
  font-size: 15.5px;
  line-height: 1.55;
}

.nota,
.fuso,
.facoltativo {
  color: var(--tenue);
}

.nota {
  margin: var(--s3) 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.fuso {
  margin: 0 0 var(--s3);
  font-size: 13.5px;
}

.facoltativo { font-weight: 400; }

.caricamento {
  color: var(--tenue);
  font-size: 14px;
  padding: var(--s3) 0;
}

code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 1px 6px;
  color: var(--testo);
  background-color: var(--accento-chiaro);
  border: 1px solid var(--accento-bordo-tenue);
  border-radius: var(--raggio-xs);
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   5. LA SCHEDA - contenitore unico di tutte le pagine
   -------------------------------------------------------------------------- */

.scheda {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 28px;
  background-color: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* Filo d'oro superiore: firma della marca, sfumato ai lati */
.scheda::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background-image: linear-gradient(
    90deg,
    var(--carta) 0%,
    var(--filo-oro) 20%,
    var(--filo-oro-forte) 50%,
    var(--filo-oro) 80%,
    var(--carta) 100%
  );
}

/* -----------------------------------------------------------------------------
   6. INTESTAZIONE E MARCHIO
   -------------------------------------------------------------------------- */

.intestazione {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--bordo);
}

.marchio {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.occhiello {
  margin: 0;
  color: var(--marchio);
  font-family: var(--font-corpo);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   7. I PASSI DEL FLUSSO
   -------------------------------------------------------------------------- */

.passo {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--bordo);
}

.passo:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.passo-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.passo-testa h2 { margin-bottom: 0; }

/* Diamante del logo come marcatore di sezione */
.passo h2,
.riquadro > h2 {
  position: relative;
  padding-left: 19px;
}

.passo h2::before,
.riquadro > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  background-color: var(--filo-oro-forte);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Bottone testuale ("Cambia tipo di incontro", "Esci"...) */
button.link {
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--link);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t);
}
button.link:hover { color: var(--link-hover); }

/* -----------------------------------------------------------------------------
   8. PASSO 1 - SCELTA DEL SERVIZIO
   -------------------------------------------------------------------------- */

.servizi {
  display: grid;
  gap: var(--s3);
}

.servizio {
  position: relative;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 16px 46px 16px 18px;
  text-align: left;
  cursor: pointer;
  color: var(--testo);
  background-color: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--t), background-color var(--t),
    box-shadow var(--t), transform var(--t);
}

.servizio strong {
  display: block;
  font-family: var(--font-titoli);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
}

.servizio .dettagli {
  display: block;
  color: var(--tenue);
  font-size: 14px;
}

/* Freccetta disegnata con i bordi: nessun glifo, nessuna icona esterna */
.servizio::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bordo-hover);
  border-top: 2px solid var(--bordo-hover);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color var(--t), right var(--t);
}

.servizio:hover,
.servizio:focus-visible {
  border-color: var(--accento-bordo);
  background-color: var(--accento-chiaro);
  box-shadow: var(--ombra-alta);
  transform: translateY(-1px);
}

.servizio:hover::after,
.servizio:focus-visible::after {
  border-color: var(--filo-oro-forte);
  right: 17px;
}

.servizio:active { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   9. PASSO 2 - CALENDARIO E ORARI
   -------------------------------------------------------------------------- */

.navigazione-settimane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  font-size: 14px;
}

.navigazione-settimane span {
  color: var(--tenue);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.navigazione-settimane button {
  min-height: 40px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--testo);
  background-color: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.navigazione-settimane button:not(:disabled):hover {
  border-color: var(--accento-bordo);
  background-color: var(--accento-chiaro);
}

.navigazione-settimane button:disabled {
  color: var(--spento-testo);
  background-color: var(--spento-sfondo);
  border-color: var(--spento-bordo);
  cursor: not-allowed;
}

.calendario {
  display: grid;
  gap: var(--s3);
}

.giorno,
.giorno-anteprima {
  padding: 14px 16px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}

.giorno h3,
.giorno-anteprima h3 {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--bordo);
  color: var(--tenue);
  font-family: var(--font-corpo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.giorno.vuoto {
  background-color: var(--passato-sfondo);
  border-style: dashed;
}

.giorno .nessuno {
  margin: 0;
  color: var(--tenue);
  font-size: 14px;
}

.orari {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Pulsante-orario: quattro stati distinti, tutti leggibili in AA */
.orario {
  min-width: 86px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--testo);
  background-color: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-xs);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t), border-color var(--t), color var(--t),
    box-shadow var(--t), transform var(--t);
}

.orario:not(:disabled):hover {
  border-color: var(--accento-bordo);
  background-color: var(--accento-chiaro);
  transform: translateY(-1px);
}

/* Selezionato: riempimento pieno + anello, riconoscibile anche senza colore */
.orario[aria-pressed="true"] {
  color: var(--su-accento);
  background-color: var(--accento);
  border-color: var(--accento-bordo);
  box-shadow: 0 0 0 3px var(--focus-alone);
  transform: none;
}

.orario[aria-pressed="true"]:hover {
  background-color: var(--accento-hover);
  color: var(--su-accento);
}

.orario:disabled,
.orario[aria-disabled="true"] {
  color: var(--spento-testo);
  background-color: var(--spento-sfondo);
  border-color: var(--spento-bordo);
  border-style: dashed;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   10. PASSO 3 - MODULO DATI
   -------------------------------------------------------------------------- */

.scelta-riepilogo {
  margin: 0 0 var(--s4);
  padding: 13px 16px;
  background-color: var(--accento-chiaro);
  border: 1px solid var(--accento-bordo-tenue);
  border-left: 3px solid var(--filo-oro-forte);
  border-radius: var(--raggio-xs);
  color: var(--testo);
  font-size: 15.5px;
  font-weight: 600;
}

form { display: block; }

label {
  display: block;
  margin: var(--s4) 0 6px;
  color: var(--testo);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--testo);
  background-color: var(--campo);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  font-family: inherit;
  font-size: 16px; /* 16px evita lo zoom automatico su iOS */
  line-height: 1.45;
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}

textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.55;
}

input:hover,
select:hover,
textarea:hover { border-color: var(--bordo-hover); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accento-bordo);
  background-color: var(--campo-attivo);
  box-shadow: 0 0 0 3px var(--focus-alone);
}

::placeholder {
  color: var(--lieve);
  opacity: 1;
}

/* Errore solo dopo l'interazione: mai campi rossi appena si apre la pagina */
input:user-invalid,
textarea:user-invalid { border-color: var(--errore-bordo); }

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accento);
  cursor: pointer;
}

.consenso {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: var(--s5) 0 0;
  padding: 14px 16px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  transition: border-color var(--t), background-color var(--t);
}

.consenso input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.consenso label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.consenso:has(input:checked) {
  border-color: var(--accento-bordo-tenue);
  background-color: var(--accento-chiaro);
}

/* Trappola per i bot: resta fuori dallo schermo */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   11. BOTTONI PRINCIPALI
   -------------------------------------------------------------------------- */

button.principale,
.scheda form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 50px;
  margin-top: var(--s5);
  padding: 13px 26px;
  cursor: pointer;
  color: var(--su-accento);
  background-color: var(--accento);
  border: 1px solid var(--accento-bordo);
  border-radius: var(--raggio-s);
  box-shadow: var(--ombra-bottone);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}

button.principale:not(:disabled):hover,
.scheda form button[type="submit"]:not(:disabled):hover {
  background-color: var(--accento-hover);
  box-shadow: var(--ombra-alta);
  transform: translateY(-1px);
}

button.principale:active,
.scheda form button[type="submit"]:active { transform: translateY(0); }

button.principale:disabled,
.scheda form button[type="submit"]:disabled {
  color: var(--spento-testo);
  background-color: var(--spento-sfondo);
  border-color: var(--spento-bordo);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* -----------------------------------------------------------------------------
   12. AVVISI, ERRORI, ESITO
   -------------------------------------------------------------------------- */

.avviso {
  margin: 0 0 var(--s5);
  padding: 12px 16px;
  color: var(--avviso-testo);
  background-color: var(--avviso-sfondo);
  border: 1px solid var(--avviso-bordo-tenue);
  border-left: 3px solid var(--avviso-bordo);
  border-radius: var(--raggio-xs);
  font-size: 14px;
  line-height: 1.55;
}

.errore-modulo {
  margin: var(--s4) 0 0;
  padding: 11px 14px;
  color: var(--errore);
  background-color: var(--errore-sfondo);
  border: 1px solid var(--errore-bordo);
  border-left: 3px solid var(--errore);
  border-radius: var(--raggio-xs);
  font-size: 14px;
  font-weight: 600;
}

.attenzione {
  color: var(--errore);
  font-weight: 700;
}

/* Esito positivo: sobrio, non festaiolo */
.passo.esito {
  margin-top: var(--s5);
  padding: 22px;
  background-color: var(--ok-sfondo);
  border: 1px solid var(--ok-bordo);
  border-radius: var(--raggio);
}

.passo.esito h2 { margin-bottom: var(--s3); }
.passo.esito h2::before { background-color: var(--ok); }

/* -----------------------------------------------------------------------------
   13. PAGINE DI ESITO SERVITE DAL SERVER
   -------------------------------------------------------------------------- */

.pagina-esito .scheda { max-width: 560px; }

.riepilogo {
  margin: 0 0 var(--s6);
  padding: var(--s4) var(--s4) 2px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}

.riepilogo dt {
  margin: 0 0 2px;
  color: var(--tenue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.riepilogo dd {
  margin: 0 0 var(--s4);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pagina-esito button,
.pagina-esito form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: var(--s2);
  padding: 13px 26px;
  cursor: pointer;
  color: #FBF7EC;
  border: 1px solid transparent;
  border-radius: var(--raggio-s);
  box-shadow: var(--ombra-bottone);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}

body.pagina-esito button.ok {
  background-color: #1F6E4A;
  border-color: #2E8A60;
}
body.pagina-esito button.ok:hover { background-color: #185B3D; }

body.pagina-esito button.no {
  background-color: #9B2C2C;
  border-color: #B94A44;
}
body.pagina-esito button.no:hover { background-color: #832424; }

body.pagina-esito button:hover {
  box-shadow: var(--ombra-alta);
  transform: translateY(-1px);
}
body.pagina-esito button:active { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   14. PANNELLO IMPOSTAZIONI (/admin)
   -------------------------------------------------------------------------- */

.pannello .scheda { max-width: 920px; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--bordo);
  font-size: 14px;
}

.menu a {
  padding: 7px 13px;
  color: var(--link);
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--testo);
  background-color: var(--accento-chiaro);
  border-color: var(--accento-bordo);
}

.riquadro {
  margin: 0 0 var(--s5);
  padding: 18px 18px 20px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}

.riquadro > h2 {
  margin-top: 0;
  font-size: 19px;
}

.riquadro h3 {
  margin: var(--s6) 0 var(--s3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bordo);
  color: var(--tenue);
  font-family: var(--font-corpo);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.riga-giorno,
.riga-regola {
  display: grid;
  gap: 6px var(--s4);
  align-items: center;
  margin: 0 0 var(--s3);
  grid-template-columns: 1fr;
  font-weight: 400;
}

.riga-giorno > span,
.riga-regola > span {
  color: var(--testo);
  font-size: 14px;
  font-weight: 700;
}

.riga-regola small {
  grid-column: 1 / -1;
  color: var(--tenue);
  font-size: 13px;
  line-height: 1.5;
}

.filtri {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.blocco-servizio {
  margin: 0 0 var(--s4);
  padding: 14px 16px 18px;
  background-color: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}

.blocco-servizio legend {
  padding: 0 var(--s2);
  color: var(--marchio);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.blocco-servizio.nuovo {
  border-style: dashed;
  border-color: var(--accento-bordo-tenue);
  background-color: var(--accento-chiaro);
}

.blocco-servizio label { font-size: 13px; }

.riga-elimina {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-weight: 400;
}

.riga-elimina input { width: auto; }

/* Bottoni secondari del pannello */
.pannello button:not(.link) {
  min-height: 44px;
  margin-top: var(--s2);
  padding: 10px 18px;
  cursor: pointer;
  color: var(--testo);
  background-color: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}

.pannello button:not(.link):hover {
  border-color: var(--accento-bordo);
  background-color: var(--accento-chiaro);
}

.pannello button.principale {
  width: auto;
  color: var(--su-accento);
  background-color: var(--accento);
  border-color: var(--accento-bordo);
}

.pannello button.principale:hover { background-color: var(--accento-hover); }

.elenco {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elenco li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: 11px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.elenco li:last-child { border-bottom: 0; }

.etichetta {
  padding: 2px 8px;
  color: var(--avviso-testo);
  background-color: var(--avviso-sfondo);
  border: 1px solid var(--avviso-bordo);
  border-radius: var(--raggio-pillola);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.in-linea { display: inline; }
.in-linea button { margin: 0; }

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tabella th,
.tabella td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--bordo);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tabella th {
  color: var(--tenue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabella small {
  color: var(--tenue);
  font-size: 13px;
}

.note-riga td {
  padding-top: 0;
  color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
}

.link-condiviso {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--testo);
  background-color: var(--campo);
  border: 1px solid var(--accento-bordo-tenue);
  cursor: text;
  user-select: all;
}

.esci {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
}

/* -----------------------------------------------------------------------------
   15. ANTEPRIMA DISPONIBILITA' - griglia, celle, legenda
   Ogni stato si distingue per colore E per forma (bordo, tratteggio, peso):
   resta leggibile anche a chi non distingue i colori.
   -------------------------------------------------------------------------- */

.legenda {
  display: block;
  margin: 0 0 var(--s4);
  padding: 11px 14px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-xs);
  color: var(--tenue);
  font-size: 13px;
  line-height: 2;
}

.pallino {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 6px 2px 14px;
  border: 1px solid var(--bordo-forte);
  border-radius: 50%;
  vertical-align: middle;
}

.legenda .pallino:first-child { margin-left: 0; }

.pallino.libero {
  background-color: var(--ok);
  border-color: var(--ok);
}

.pallino.occupato {
  background-color: var(--occupato);
  border-color: var(--occupato);
}

.pallino.prenotato {
  background-color: var(--prenotato);
  border-color: var(--prenotato-bordo);
}

.pallino.preavviso {
  background-color: var(--carta);
  border-color: var(--bordo-hover);
  border-style: dashed;
}

.pallino.passato {
  background-color: var(--passato-sfondo);
  border-color: var(--passato);
  border-style: dashed;
}

.griglia-slot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.cella {
  padding: 8px 4px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-xs);
  color: var(--testo);
  background-color: var(--carta);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: help;
}

.cella.libero {
  color: var(--ok);
  background-color: var(--ok-sfondo);
  border-color: var(--ok-bordo);
  border-left-width: 3px;
}

.cella.occupato {
  color: var(--occupato);
  background-color: var(--occupato-sfondo);
  border-color: var(--occupato-bordo);
  border-style: solid;
  text-decoration: line-through;
}

.cella.prenotato {
  color: var(--prenotato);
  background-color: var(--prenotato-sfondo);
  border-color: var(--prenotato-bordo);
  border-left-width: 3px;
}

/* Non prenotabile per regola (preavviso minimo, tetto giornaliero): non e' un
   impegno in agenda, e non deve sembrarlo. */
.cella.preavviso {
  color: var(--tenue);
  background-color: var(--carta);
  border-color: var(--bordo-hover);
  border-style: dashed;
  font-weight: 400;
}

.cella.passato {
  color: var(--passato);
  background-color: var(--passato-sfondo);
  border-color: var(--passato-bordo);
  border-style: dashed;
  font-weight: 400;
  text-decoration: line-through;
}

/* -----------------------------------------------------------------------------
   16. RESPONSIVE (mobile-first: qui si allarga)
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .riepilogo {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0 var(--s4);
    align-items: baseline;
    padding: var(--s4) var(--s5);
  }
  .riepilogo dt { margin-top: var(--s2); }
  .riepilogo dd { margin: var(--s2) 0 var(--s3); }
  .riepilogo dt:first-of-type { margin-top: 0; }
  .riepilogo dd:first-of-type { margin-top: 0; }
}

@media (min-width: 560px) {
  body { padding: 32px 20px 72px; }

  .scheda { padding: 32px 34px 36px; }

  button.principale,
  .scheda form button[type="submit"],
  .pagina-esito button,
  .pagina-esito form button {
    width: auto;
    min-width: 240px;
  }
}

@media (min-width: 620px) {
  .riga-giorno { grid-template-columns: 210px 1fr; }
  .riga-regola { grid-template-columns: 340px 130px; }
}

@media (min-width: 640px) {
  body { padding: 40px 24px 80px; }

  .scheda { padding: 38px 40px 42px; }

  /* Squadrette agli angoli: rigore e precisione della marca.
     Solo da 640px: su mobile affollerebbero la scheda. */
  .scheda::after {
    content: "";
    position: absolute;
    inset: 11px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro)),
      linear-gradient(var(--filo-oro), var(--filo-oro));
    background-size:
      16px 1px, 1px 16px,
      16px 1px, 1px 16px,
      16px 1px, 1px 16px,
      16px 1px, 1px 16px;
    background-position:
      left top, left top,
      right top, right top,
      left bottom, left bottom,
      right bottom, right bottom;
  }

  .riquadro { padding: 22px 24px 24px; }
}

@media (min-width: 800px) {
  /* Due colonne di giornate: meno scorrimento, sguardo d'insieme sulla settimana */
  .calendario { grid-template-columns: 1fr 1fr; }

  .griglia-slot { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* =============================================================================
   17. MARCHIO E DISEGNI ANIMATI
   Solo CSS e SVG inline: nessuna libreria, nessun file esterno.
   ============================================================================= */

/* --- logo orizzontale ----------------------------------------------------- */

.ta-logo {
  display: block;
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  color: var(--testo);
}
.ta-logo__mark { color: var(--filo-oro-forte); }
.ta-logo__rule { stroke: var(--filo-oro-forte); }
.ta-logo__word { fill: currentColor; }
.ta-logo__word2 { opacity: 0.72; }

/* --- motore di disegno: pathLength="100" normalizza le lunghezze ---------- */

.ta-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ta-trace { to { stroke-dashoffset: 0; } }
@keyframes ta-gem-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 0.9; transform: scale(1); } }
@keyframes ta-tip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ta-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes ta-seal { from { opacity: 0.35; transform: scale(0.78); } to { opacity: 0; transform: scale(1.22); } }

.ta-art { color: var(--filo-oro-forte); }

/* --- intestazione: l'arco di protezione si compone ------------------------ */

.ta-arc-build {
  display: block;
  width: 132px;
  height: auto;
  flex: 0 0 auto;
}

.ta-b1 { animation: ta-trace 1.3s 0.05s; }
.ta-b2 { animation: ta-trace 1.2s 0.40s; }
.ta-b3 { animation: ta-trace 1.1s 0.75s; }
.ta-b4 { animation: ta-trace 1.0s 1.00s; }
.ta-b5 { animation: ta-trace 0.8s 1.45s; }
.ta-b6 { animation: ta-trace 0.6s 1.75s; }
.ta-b7 { animation: ta-trace 0.6s 1.95s; }

.ta-gem {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ta-gem-in 0.9s 2.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ta-tip { opacity: 0; animation: ta-tip-in 0.7s 2.45s ease-out forwards; }

/* Versione ferma, per il pannello: chi lo apre dieci volte al giorno non deve
   rivedere l'animazione ogni volta. */
.ta-arc-build--still .ta-draw { stroke-dashoffset: 0; animation: none; }
.ta-arc-build--still .ta-gem { opacity: 0.9; animation: none; }
.ta-arc-build--still .ta-tip { opacity: 1; animation: none; }

/* --- attesa: orbita lenta attorno al diamante ---------------------------- */

.ta-wait {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tenue);
  font-size: 14px;
  padding: var(--s3) 0;
}

.ta-spinner {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.ta-spinner__run {
  stroke-dasharray: 22 78;
  animation: ta-orbit 2.4s linear infinite;
}

/* --- conferma: il sigillo ------------------------------------------------ */

.ta-confirm {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 0 var(--s3);
}

.ta-c-dome { animation: ta-trace 0.70s 0.05s; }
.ta-c-check { animation: ta-trace 0.60s 0.70s; }
.ta-c-dot { opacity: 0; animation: ta-tip-in 0.35s 0.60s ease-out forwards; }
.ta-confirm__seal {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ta-seal 0.9s 1.00s ease-out forwards;
}

/* -----------------------------------------------------------------------------
   18. MOVIMENTO RIDOTTO
   I disegni restano visibili e finiti: fermarli non vuol dire nasconderli.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .servizio:hover,
  .servizio:focus-visible,
  .orario:not(:disabled):hover,
  button.principale:not(:disabled):hover,
  .scheda form button[type="submit"]:not(:disabled):hover,
  body.pagina-esito button:hover {
    transform: none;
  }

  .servizio:hover::after,
  .servizio:focus-visible::after { right: 20px; }

  .ta-draw,
  .ta-b1, .ta-b2, .ta-b3, .ta-b4, .ta-b5, .ta-b6, .ta-b7,
  .ta-c-dome, .ta-c-check,
  .ta-gem, .ta-tip, .ta-c-dot,
  .ta-confirm__seal,
  .ta-spinner__run {
    animation: none !important;
  }

  .ta-draw { stroke-dashoffset: 0 !important; }
  .ta-gem { opacity: 0.9 !important; transform: none !important; }
  .ta-tip,
  .ta-c-dot { opacity: 1 !important; }
  .ta-confirm__seal { opacity: 0 !important; }
  .ta-spinner__run { stroke-dasharray: 22 78 !important; stroke-dashoffset: 0 !important; }
}

/* -----------------------------------------------------------------------------
   19. ALTO CONTRASTO DI SISTEMA E STAMPA
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .scheda,
  .riquadro,
  .giorno,
  .giorno-anteprima,
  .servizio,
  .orario,
  .cella,
  .consenso { border: 1px solid CanvasText; }

  .orario[aria-pressed="true"] { forced-color-adjust: none; }

  .scheda::before,
  .scheda::after { display: none; }

  :focus-visible { outline: 3px solid Highlight; }
}

@media print {
  html,
  body {
    background: #FFFFFF;
    color: #000000;
  }

  .scheda {
    max-width: none;
    border: 1px solid #999999;
    box-shadow: none;
  }

  .scheda::before,
  .scheda::after,
  .menu,
  .navigazione-settimane,
  .ta-arc-build,
  button,
  .esci { display: none !important; }
}

/* -----------------------------------------------------------------------------
   20. SCELTA DEGLI SLOT (/admin/slot)
   Le caselle spuntate sono gli orari offerti. Gli orari occupati non hanno la
   casella: non sono spuntabili, e si vede a colpo d'occhio perche'.
   -------------------------------------------------------------------------- */

.giorno-slot {
  margin: 0 0 var(--s5);
  padding: 16px 18px 18px;
  background-color: var(--carta-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}

.giorno-slot__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--bordo);
}

.giorno-slot__testa h3 {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}

.stato-giorno {
  color: var(--marchio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.griglia-scelta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
}

/* La casella e' l'intera cella: bersaglio comodo anche col dito */
.cella.scegli {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 7px 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--tenue);
  background-color: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-style: dashed;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.cella.scegli input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
}

.cella.scegli:hover {
  border-color: var(--accento-bordo);
  background-color: var(--accento-chiaro);
}

/* Spuntata = offerto: pieno, solido, in evidenza */
.cella.scegli:has(input:checked) {
  color: var(--ok);
  background-color: var(--ok-sfondo);
  border-color: var(--ok-bordo);
  border-style: solid;
  border-left-width: 3px;
  font-weight: 700;
}

.cella.scegli:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.pallino.chiuso-scelta {
  background-color: var(--carta);
  border-color: var(--bordo-hover);
  border-style: dashed;
}

.azioni-giorno {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.azioni-giorno button.principale { margin-top: 0; }