/* Faro — guscio e finestre del redesign grafico (ottobre 2026): solo ciò che serve alla pagina vera.
   I componenti vengono dal design system Gelaterie Duomo (copia locale in ds/gestionale/gestionale.css,
   caricato prima di questo file). Qui solo:
   - la posizione fissa delle barre (le finestre usano lo strato .gest.fisso del design system);
   - lo spazio che la pagina lascia alla barra laterale (computer) e a quella in basso (telefono);
   Modo telefono: sotto i 640 px, come .gest.tel del design system.
   Piano: docs/2026-10-06-redesign-codice/piano-1-base-guscio-home.md. */

/* ---------- guscio ---------- */
.gest.faro-g{background:transparent}
.gest.faro-g-tel{display:none}
.gest .faro-g-logo::before{display:none}
.gest .faro-g-logo img{height:30px;width:auto;display:block}
.gest .faro-g-account{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:24px}
.gest .faro-g-schede{padding:0 8px;background:var(--bianco);overflow-x:auto;scrollbar-width:none}
.gest .faro-g-schede::-webkit-scrollbar{display:none}
.gest button.bb{border:0;background:none;font-family:inherit;cursor:pointer;width:100%}
.gest .faro-g-altro .li{padding:0 4px;border-top:0}
.gest .faro-g-altro .li + .li{border-top:1px solid var(--linea-tenue)}

@media (min-width:640px){
  body.faro-guscio{padding-left:248px}
  .gest.faro-g-side{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:30;overflow-y:auto;border-right:1px solid var(--linea);background:var(--bianco)}
  .gest.faro-g-side .side{min-height:100%;width:auto;border-right:0}
}
@media (max-width:639.98px){
  .gest.faro-g-side{display:none}
  .gest.faro-g-tel{display:block}
  .faro-g-contenitore{position:sticky;top:0;z-index:30}
  body.faro-guscio{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .gest.faro-g-bbar{position:fixed;left:0;right:0;bottom:0;z-index:30}
  .gest.faro-g-bbar .bbar{position:static;padding-bottom:max(22px, env(safe-area-inset-bottom))}
  /* Nel flusso di creazione dei Turni la barra in basso non c'è (NOTE Design 3): lì comanda il piede del flusso. */
  body:has(#view-flusso.active) .gest.faro-g-bbar{display:none}
  body.faro-guscio:has(#view-flusso.active){padding-bottom:0}
}

/* Account disattivato: al posto della pagina. */
.gest.faro-g-disattivato{position:fixed;inset:0;z-index:60;overflow-y:auto;display:flex;flex-direction:column}
.gest.faro-g-disattivato .topbar{background:var(--panna);border-color:var(--linea)}
.gest.faro-g-disattivato main{width:100%;max-width:900px;margin:0 auto;padding:60px 20px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.gest.tel.faro-g-disattivato main{padding:40px 20px;align-items:stretch}

/* ---------- finestre (foglio / Modal) ---------- */
.gest.faro-dlg .sheet{max-height:92vh;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;padding-bottom:max(26px, env(safe-area-inset-bottom));transition:transform .12s ease}
.gest.faro-dlg .sheet .handle{margin-bottom:0;position:relative;flex:none;touch-action:none}
.gest.faro-dlg .handle::after{content:"";position:absolute;inset:-16px -80px}
.gest.faro-dlg .modal-wrap{overflow-y:auto;padding:72px 16px 40px}
.gest.faro-dlg .modal{max-width:100%;flex:none}
.gest.faro-dlg .modal-h .faro-dlg-titolo{font-size:30px;margin-top:4px}
.gest.faro-dlg .faro-dlg-corpo{display:flex;flex-direction:column;gap:14px}
.gest.faro-dlg .faro-dlg-testo{white-space:pre-line}
.gest.faro-dlg .faro-dlg-corpo > div:empty{display:none}
/* Pannello laterale (computer) e foglio alto col piede fisso (telefono). */
.gest.faro-dlg .drawer{max-width:100%}
.gest.faro-dlg .drawer-b{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px}
.gest.faro-dlg .drawer-f{justify-content:flex-end;align-items:center}
.gest.faro-dlg .drawer-h .faro-dlg-titolo{font-size:30px;margin-top:4px}
.gest.faro-dlg .sheet.alto{height:92vh;overflow:hidden}
.gest.faro-dlg .sheet.alto .faro-dlg-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -16px;padding:0 16px 8px}
.gest.faro-dlg .sheet.alto .faro-dlg-azioni{flex:none;margin-top:0;padding-top:12px;border-top:1px solid var(--linea-tenue)}
html.faro-dlg-aperta{overflow:hidden}
/* Scudo: le pagine non ancora ridisegnate hanno regole globali (.field, .field span, h3…) che
   dentro le finestre del guscio non devono valere (margini in più, titoletti in Bebas). */
.gest.faro-dlg .field, .gest.faro-dlg .field > span{margin:0}
.gest.faro-dlg h3.strong{font-family:var(--font-corpo);font-size:14px;letter-spacing:0;text-transform:none;line-height:1.5}
/* "Il tuo account": le due password affiancate su computer, una per riga sul telefono. */
.gest.faro-dlg .faro-acc-pw{display:grid;gap:12px;align-items:end}
.gest.faro-dlg:not(.tel) .faro-acc-pw{grid-template-columns:1fr 1fr}

/* ---------- accesso (index.html, accetta-invito.html) ---------- */
.gest .faro-login{display:flex;flex-direction:column;gap:14px}
.gest .faro-login > div:empty, .gest .scena-card > div:empty{display:none}
/* Il riquadro Cloudflare di solito resta invisibile ("interaction-only"): niente spazio vuoto al suo posto. */
.gest .faro-login #turnstileBox{margin-top:-14px}
.gest .scena-card .lnk{align-self:flex-start}
.gest .scena-card .view{display:none;flex-direction:column;gap:14px}
.gest .scena-card .view.active{display:flex}

/* ---------- stati ---------- */
.gest .faro-stato-errore{display:flex;flex-direction:column;align-items:flex-start;gap:10px}