/* Il Gattopardo — widget di prenotazione (/prenota/), caricato dopo style.css.
   Anche l'app /gestione/ lo carica: ne riusa calendario, moduli e messaggi d'errore. */
.eroe-bassa { min-height: 52svh; }
.prenota-scheda {
  max-width: 760px; margin-inline: auto;
  background: var(--bianco-caldo);
  border: 1px solid color-mix(in srgb, var(--oro) 38%, transparent);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  display: grid; gap: clamp(1.6rem, 4vw, 2.4rem);
}
.prenota-passo .occhiello { margin-bottom: .9rem; }
.modulo-piano { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.persone-scelta { display: flex; flex-wrap: wrap; gap: .5rem; }
.persone-opzione, .fascia, .cella {
  font: inherit; cursor: pointer; color: var(--inchiostro);
  background: transparent; border: 1px solid color-mix(in srgb, var(--inchiostro) 22%, transparent);
  transition: border-color var(--transizione), background var(--transizione), color var(--transizione), transform var(--transizione);
}
.persone-opzione { min-width: 3rem; padding: .7rem .9rem; font-weight: 500; }
.persone-opzione:hover, .fascia:not(:disabled):hover, .cella.aperto:hover { border-color: var(--oro); }
.persone-opzione.scelta, .fascia.scelta, .cella.scelta {
  background: var(--oro); border-color: var(--oro); color: var(--notte); font-weight: 700;
}
.calendario { max-width: 460px; }
.calendario-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.calendario-mese { font-family: var(--f-display); font-size: 1.38rem; text-transform: capitalize; }
.calendario-nav {
  width: 2.4rem; height: 2.4rem; border: 1px solid color-mix(in srgb, var(--inchiostro) 22%, transparent);
  background: var(--carta); color: var(--inchiostro); cursor: pointer; font-size: .85rem;
  transition: border-color var(--transizione);
}
.calendario-nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .calendario-nav:not(:disabled):hover { border-color: var(--oro); } }
@media (pointer: coarse) { .calendario-nav { width: 2.75rem; height: 2.75rem; } } /* almeno 44 px sotto il dito */
.calendario-giorni, .calendario-celle { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.calendario-giorni span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bruno); text-align: center; padding-bottom: .2rem; }
.cella { aspect-ratio: 1; display: grid; place-items: center; font-weight: 500; padding: 0; }
.cella.vuota { border: 0; background: transparent; }
.cella:disabled { cursor: default; color: rgba(43,30,21,.3); background: transparent; border-color: transparent; }
.cella.chiuso { text-decoration: line-through; }
.cella.oggi { box-shadow: inset 0 0 0 2px var(--oro-chiaro); }
.cella.aperto { background: var(--bianco-caldo); border-color: rgba(192,138,62,.5); }
.cella.aperto.scelta { background: var(--oro); border-color: var(--oro); color: #fff; }
.prenota-passo { scroll-margin-top: 0; } /* l'aria sotto la testata la dà già scroll-padding-top di <html> (96px): contata due volte, ogni passo arrivava a 192px */
.prenota-passo .occhiello.campo-pieno { justify-self: center; } /* «4 · I tuoi dati» centrato come i passi 1-3 */
.prenota-giorno-scelto { font-family: var(--f-display); font-size: 1.32rem; margin: 0 0 .8rem; }
.prenota-giorno-scelto::first-letter { text-transform: uppercase; } /* «Domenica 11 ottobre»: capitalize metteva la maiuscola anche al mese */
.fasce-servizio + .fasce-servizio { margin-top: 1.2rem; }
.fasce-titolo { margin: 0 0 .6rem; font-weight: 700; }
.fasce-titolo span { font-weight: 400; color: var(--bruno); font-size: .9rem; }
.fasce-riga { display: flex; flex-wrap: wrap; gap: .5rem; }
.fascia { padding: .65rem 1rem; font-variant-numeric: tabular-nums; position: relative; }
.fascia.piena { color: rgba(43,30,21,.35); text-decoration: line-through; cursor: default; background: transparent; }
.fascia.ultimi:not(.scelta)::after {
  content: "ultimi posti"; position: absolute; top: -.55rem; right: -.3rem;
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--terracotta); color: #fff; padding: .15rem .4rem;
}
.prenota-riepilogo { margin: 0; padding: .9rem 1.1rem; background: var(--carta-scura); }
/* la modifica col link della mail: la prenotazione com'è adesso, in testa ai passi */
.prenota-modifica { display: grid; gap: .4rem; padding: 1.1rem 1.3rem; background: var(--carta-scura); border-top: 2px solid var(--oro); }
.prenota-modifica p { margin: 0; }
.prenota-modifica-attuale { font-family: var(--f-display); font-size: var(--t-titoletto); }
.prenota-riepilogo i { color: var(--oro-scuro); margin-right: .3rem; }
.modulo-errore { margin: 0; color: var(--terracotta); font-weight: 500; }
.prenota-fatto { text-align: center; padding-block: 1rem; }
.prenota-fatto .card-icona { margin-inline: auto; }
.prenota-fatto h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: .8rem 0 .6rem; }
.prenota-fatto h2:focus { outline: none; }
.prenota-fatto-azioni { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.prenota-sotto { text-align: center; color: var(--bruno); margin-top: 2rem; }
.prenota-sotto i { color: var(--oro-scuro); }
@media (max-width: 600px) {
  .prenota-scheda .modulo { grid-template-columns: 1fr; }
  .prenota-scheda .campo { grid-column: 1 / -1; }
}
.prenota-scheda { text-align: center; }
.prenota-scheda .persone-scelta, .prenota-scheda .fasce-riga { justify-content: center; }
.prenota-scheda .calendario { margin-inline: auto; }
.prenota-scheda .campo { text-align: left; }
.prenota-scheda .modulo .bottone { justify-self: center; }
.cella.pieno { text-decoration: none; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(150,80,45,.16) 4px 6px); color: rgba(43,30,21,.45); border-color: transparent; }
/* 10/10/2026 (Carlo): il giorno al completo si tocca (aria-disabled) e risponde con l'avviso; la legenda sotto il calendario
   usa gli stessi segni delle celle, in piccolo. Le celle della legenda non sono bottoni spenti: il grigio va scritto (.spenta) */
.calendario-avviso { max-width: 460px; margin: .9rem auto 0; padding: .75rem 1rem; color: var(--inchiostro); font-size: .95rem; line-height: 1.5;
  background: color-mix(in srgb, var(--terracotta) 7%, var(--bianco-caldo)); border: 1px solid color-mix(in srgb, var(--terracotta) 35%, transparent); }
.calendario-legenda { list-style: none; max-width: 460px; margin: .9rem auto .3rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.1rem; font-size: .82rem; color: var(--bruno); }
.calendario-legenda li { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.calendario-legenda .cella { width: 1.75rem; font-size: .75rem; cursor: default; }
.cella.spenta, .calendario-legenda .cella.chiuso { color: rgba(43,30,21,.3); background: transparent; border-color: transparent; }
.prenota-calendario { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: .4rem 0 0; }
.prenota-calendario { display:block; margin-top:1rem; }
.prenota-calendario .occhiello { margin-bottom:.6rem; }
.prenota-calendario-bottoni { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:0; }
.prenota-calendario-bottoni .bottone { padding:.6rem 1rem; font-size:.85rem; }

/* Pagina di esito delle prenotazioni (annullo dal link della mail, link corto): functions/_lib/pagina.js */
body.pagina-esito { background: var(--carta); min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--gutter); }
.esito { width: min(100%, 34rem); text-align: center; padding: clamp(2rem, 6vw, 3.2rem) clamp(1.4rem, 5vw, 2.8rem); background: var(--bianco-caldo); border: 1px solid color-mix(in srgb, var(--oro) 38%, transparent); border-top: 2px solid var(--oro); }
.esito-logo { display: block; width: max-content; margin: 0 auto 1.4rem; }
.esito-logo img { display: block; width: 128px; height: auto; }
.esito h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 500; margin: .4rem 0 .8rem; text-wrap: balance; }
.esito-testo { color: var(--bruno); max-width: 40ch; margin: 0 auto; text-wrap: pretty; }
.esito-azioni { margin-top: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.esito-azioni form { margin: 0; }
.esito-contatto { margin: 1.8rem 0 0; font-size: .9rem; color: var(--bruno); }

/* «Hai già un tavolo con noi»: la domanda prima di una seconda prenotazione con lo stesso telefono ed email (07/10/2026) */
.prenota-gia { display: grid; gap: .8rem; padding: 1.2rem 1.3rem; background: var(--carta); border: 1px solid color-mix(in srgb, var(--oro) 38%, transparent); border-top: 2px solid var(--oro); text-align: left; }
.prenota-gia p { margin: 0; }
.prenota-gia-titolo { font-family: var(--f-display); font-size: var(--t-titoletto); }
.prenota-gia-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--inchiostro) 12%, transparent); }
.prenota-gia-riga span { font-weight: 500; }
.prenota-gia .link-filo { justify-self: start; background: none; border: 0; padding: .4rem 0; cursor: pointer; }