/* ============================================================
   Case Bianche — App Ospiti (design: docs/design/app-ospiti-reception.md §3, §5)
   Due parti:
   A) html.in-app  -> SOLO quando il sito e' aperto come app: intestazione fissa + barra in basso a 5 voci.
   B) .app-foglio  -> invito a installare (foglio iPhone / scheda Android), solo nel browser del telefono.
   Sul computer, senza app, questo foglio non cambia nulla.
   Colori: gli stessi del sito (blu pieno #041729, blu linea #1E466A, testo #3A3F44, testo secondario #66727F).
   Misure: intestazione 56 px, barra 64 px (+ area sicura dell'iPhone), pulsanti almeno 44 px.
   ============================================================ */

/* Area sicura (iPhone con notch): sui lati si lascia spazio quando il telefono e' girato. Con il telefono dritto vale 0. */
body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ---------- A) APP APERTA DALLA HOME ---------- */
html.in-app{
  --app-testata: calc(56px + env(safe-area-inset-top, 0px));
  --app-barra: calc(64px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;                                  /* fondo bianco gia' nel primo istante: nessun lampo di colore */
  scroll-padding-top: calc(var(--app-testata) + 8px);
}
@media (orientation: landscape) and (max-height: 500px){
  html.in-app{ --app-barra: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
html.in-app body{
  padding-top: var(--app-testata);
  padding-bottom: var(--app-barra);
}
/* I tre tasti a sinistra (Home, Area personale, Contatti) e il tasto "Rivedi" li sostituisce la barra */
html.in-app .tasti-sx, html.in-app .rivedi-apertura{ display: none !important; }
/* WhatsApp: resta in basso a sinistra ma sopra la barra (e sopra l'invito, se c'e') */
html.in-app body .whatsapp-flottante{ bottom: calc(var(--app-barra) + 16px); }
html.in-app.app-invito body .whatsapp-flottante{ bottom: calc(var(--app-barra) + var(--app-invito-h, 0px) + 28px); }

.app-testata{
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  box-sizing: border-box; height: var(--app-testata); padding: env(safe-area-inset-top, 0px) calc(8px + env(safe-area-inset-right, 0px)) 0 calc(20px + env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.97); border-bottom: 1px solid #DCE2E8;
}
/* Eccezione (richiesta di Luca 2026-10-15, vedi v3.css): qui c'e' il nome
   proprio "CASE BIANCHE" (testo fisso in js/app-ospiti.js), quindi resta nel
   font del marchio. Tutto il resto dell'app (sotto) e' tornato al font
   normale del sito, Century Gothic con ripiego Questrial. */
.app-testata__marchio{
  font-family: "Bodoni MT", "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-weight: 700; font-size: calc(15px * var(--s, 1)); letter-spacing: .24em;
  color: var(--c-titoli, #041729); text-decoration: none; white-space: nowrap; min-height: 44px; display: flex; align-items: center;
}
.app-testata__indietro{
  display: flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding: 0 12px 0 8px;
  background: none; border: 0; cursor: pointer; color: var(--c-titoli, #041729);
  font-family: "Century Gothic", Questrial, Arial, sans-serif; font-weight: 700; font-size: calc(16px * var(--s, 1));
}
.app-testata__indietro svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-testata__az{ display: flex; align-items: center; gap: 0; position: relative; }
.app-testata__btn{
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: 0; color: var(--c-titoli, #041729);
}
.app-testata__btn svg{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-testata__lingua{ border: 1px solid var(--blu-linea, #1E466A); margin: 0 4px; font: 700 calc(13px * var(--s, 1))/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .02em; }
.app-testata__btn:focus-visible, .app-testata__indietro:focus-visible, .app-testata__marchio:focus-visible,
.app-barra__voce:focus-visible, .app-pannello__voce:focus-visible, .app-lingue__voce:focus-visible{ outline: 2px solid var(--blu-pieno, #041729); outline-offset: -4px; }

/* Scelta della lingua: tre voci da 44 px sotto il riquadro */
.app-lingue{ position: relative; }
.app-lingue__scelte{
  position: absolute; top: 100%; right: 4px; margin-top: 6px; z-index: 5; min-width: 64px;
  background: #FFFFFF; border: 1px solid var(--blu-linea, #1E466A); display: flex; flex-direction: column; padding: 0;
}
.app-lingue__scelte[hidden]{ display: none; }
.app-lingue .app-lingue__voce{
  width: 100%; min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; background: #FFFFFF; color: var(--c-titoli, #041729); border-radius: 0; cursor: pointer;
  font: 700 calc(14px * var(--s, 1))/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .02em; text-align: center;
}
.app-lingue .app-lingue__voce[aria-current="true"]{ background: var(--blu-pieno, #041729); color: #FFFFFF; }
.app-lingue .app-lingue__voce + .app-lingue__voce{ border-top: 1px solid #DCE2E8; }

/* Menu: le pagine che non stanno nella barra */
.app-pannello{
  position: fixed; left: 0; right: 0; top: var(--app-testata); bottom: var(--app-barra); z-index: 590; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #FFFFFF; padding: 16px calc(20px + env(safe-area-inset-right, 0px)) 24px calc(20px + env(safe-area-inset-left, 0px));
}
.app-pannello[hidden]{ display: none; }
.app-pannello__titolo{ margin: 0 0 8px; font: 700 calc(13px * var(--s, 1))/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--blu-linea, #1E466A); }
.app-pannello__lista{ list-style: none; margin: 0; padding: 0; }
.app-pannello__voce{
  display: flex; align-items: center; min-height: 56px; padding: 0 4px; border-bottom: 1px solid #DCE2E8; text-decoration: none; color: var(--c-titoli, #041729);
  font-family: "Century Gothic", Questrial, Arial, sans-serif; font-size: calc(19px * var(--s, 1));
}
.app-pannello__voce[aria-current="page"]{ font-weight: 700; }
button.app-pannello__voce{ width: 100%; background: none; border: 0; border-bottom: 1px solid #DCE2E8; text-align: left; cursor: pointer; }
.app-pannello__sep{ height: 20px; border: 0; }
html.app-menu-aperto body{ overflow: hidden; }

.app-barra{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; box-sizing: border-box;
  height: var(--app-barra); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr); background: #FFFFFF; border-top: 1px solid #DCE2E8;
}
.app-barra__voce{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 0 2px;
  border-top: 3px solid transparent; margin-top: -1px; text-decoration: none; text-align: center; color: var(--testo, #3A3F44); background: transparent;
  font-family: "Century Gothic", Questrial, Arial, sans-serif; font-weight: 700; font-size: calc(12.5px * var(--s, 1)); line-height: 1.15; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.app-barra__voce span{ max-width: 100%; overflow-wrap: anywhere; }
.app-barra__voce svg{ width: 26px; height: 26px; stroke: var(--blu-linea, #1E466A); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-barra__voce:active{ background: #F3F6F9; }
.app-barra__voce[aria-current="page"]{ border-top-color: var(--blu-pieno, #041729); color: var(--c-titoli, #041729); }
.app-barra__voce[aria-current="page"] svg{ stroke: var(--c-titoli, #041729); stroke-width: 1.9; }

/* ---------- B) INVITO A INSTALLARE (browser del telefono) ---------- */
.app-foglio{
  position: fixed; z-index: 700; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; max-width: 520px; margin: 0 auto; max-height: 90vh; overflow-y: auto;
  background: #FFFFFF; border: 1px solid var(--blu-linea, #1E466A); box-shadow: 0 6px 18px -12px rgba(4,23,41,.35); padding: 18px 18px 14px;
  font-family: "Century Gothic", Questrial, Arial, sans-serif; color: var(--testo, #3A3F44);
}
html.in-app .app-foglio{ display: none; }
.app-foglio__titolo{ margin: 0 0 6px; font-size: calc(21px * var(--s, 1)); font-weight: 500; line-height: 1.25; color: var(--c-titoli, #041729); }
.app-foglio__intro{ margin: 0 0 14px; font-size: calc(16px * var(--s, 1)); line-height: 1.45; }
.app-foglio__passi{ list-style: none; margin: 0 0 12px; padding: 0; }
.app-foglio__passi li{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.app-foglio__n{ flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--blu-linea, #1E466A); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 calc(14px * var(--s, 1))/1 system-ui, -apple-system, sans-serif; color: var(--c-titoli, #041729); }
.app-foglio__passi p{ margin: 0; font-size: calc(16px * var(--s, 1)); line-height: 1.4; }
.app-foglio__passi small{ display: block; margin-top: 2px; font-size: calc(15px * var(--s, 1)); color: var(--testo-secondario, #66727F); }
.app-foglio__ico{ width: 20px; height: 20px; vertical-align: -4px; stroke: var(--blu-linea, #1E466A); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-foglio__nota{ margin: 0 0 14px; padding-top: 12px; border-top: 1px solid #DCE2E8; font: calc(15px * var(--s, 1))/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--testo-secondario, #66727F); }
.app-foglio__az{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-foglio__riga{ display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.app-foglio__riga .app-foglio__titolo{ font-size: calc(19px * var(--s, 1)); margin-bottom: 2px; }
.app-foglio__riga .app-foglio__intro{ margin: 0; font-size: calc(15px * var(--s, 1)); }
.app-foglio__icona{ flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #DCE2E8; }
.app-btn{
  min-height: 44px; padding: 0 28px; background: var(--blu-pieno, #041729); color: #FFFFFF; border: 0; border-radius: 0; cursor: pointer;
  font: 700 calc(14px * var(--s, 1))/1 "Century Gothic", Questrial, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.app-link{
  min-height: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer; color: var(--c-titoli, #041729); text-decoration: underline; text-underline-offset: 3px;
  font: calc(16px * var(--s, 1))/1 "Century Gothic", Questrial, Arial, sans-serif;
}
.app-foglio__mai{ display: block; margin: 4px auto 0; color: var(--testo-secondario, #66727F); font-size: calc(15px * var(--s, 1)); }
.app-btn:focus-visible, .app-link:focus-visible{ outline: 2px solid var(--blu-pieno, #041729); outline-offset: 2px; }
/* freccetta: indica il pulsante Condividi di Safari (in basso al centro) */
.app-freccia{ position: fixed; z-index: 701; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px) - 8px); width: 14px; height: 14px; margin-left: -7px; background: #FFFFFF; border-right: 1px solid #1E466A; border-bottom: 1px solid var(--blu-linea, #1E466A); transform: rotate(45deg); pointer-events: none; }
html.in-app .app-freccia{ display: none; }
@media (orientation: landscape) and (max-height: 500px){ .app-foglio{ max-height: calc(100vh - 24px); } }

/* "Per il personale: usa l'app CB Reception" (al posto del tasto dell'area riservata, solo nell'App Ospiti): nota semplice, senza collegamento */
.area-staff__app{ margin: 0; font-size: calc(15px * var(--s, 1)); line-height: 1.4; color: var(--testo-secondario, #66727F); }

/* App: l'apertura della Home sta esattamente tra intestazione e barra */
html.in-app .apertura, html.in-app .apertura__centro{ min-height: calc(100vh - var(--app-testata) - var(--app-barra)); min-height: calc(100svh - var(--app-testata) - var(--app-barra)); }
/* App: pulsante "Prenota" sotto il titolo della Home. Compare dopo il sottotitolo (stessa attesa); con "meno animazioni" e' subito li' */
html.in-app .app-prenota{ min-width: 200px; min-height: 48px; margin-top: 6px; opacity: 0; animation: app-comparsa .9s ease 4.24s forwards; }
@keyframes app-comparsa{ to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ html.in-app .app-prenota{ animation: none; opacity: 1; } }

/* ---------- C) FUNZIONI DEL TELEFONO (solo app per lo store; js/app-nativo.js) ---------- */
.app-cal{ margin: 0 0 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-cal__stato{ font: calc(15px * var(--s, 1))/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--testo-secondario, #66727F); }
.app-blocco-voce{ display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; font-size: calc(16px * var(--s, 1)); cursor: pointer; }
.app-blocco-voce input{ width: 24px; height: 24px; flex: 0 0 24px; }
.area-piede small{ display: block; margin: 0 0 4px 36px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario, #66727F); }
/* Area coperta finche' non si sblocca: sopra tutto, anche sopra intestazione e barra dell'app */
.app-blocco{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center; background: #FFFFFF; color: var(--testo, #3A3F44);
  font-family: "Century Gothic", Questrial, Arial, sans-serif;
}
.app-blocco h2{ margin: 0; font-size: calc(26px * var(--s, 1)); font-weight: 500; color: var(--c-titoli, #041729); }
.app-blocco p{ margin: 0; max-width: calc(32ch * var(--larg, 1)); font-size: calc(17px * var(--s, 1)); line-height: 1.45; }
.app-blocco__errore{ min-height: 1.4em; color: #8A1C1C; }
html.app-bloccata body{ overflow: hidden; }