/* SCENA (docs/scena.md): il «ponte di comando del futuro» del gestionale, dell'agenda e dello store, coerente con la Testa di vetro.
   Fondo vivo, pannelli di vetro, luce sui bottoni, movimento con senso, stati vuoti e di caricamento, telefono curato.
   Regola di costo (docs/animazioni.md): le animazioni toccano SOLO transform, opacity e filter; i bagliori sono pseudo-elementi con
   box-shadow FISSO e opacity animata. Con prefers-reduced-motion tutto diventa dissolvenza o si spegne (blocco in fondo).
   Si carica dal telaio (schermi/base.html) dopo base.css e mascotte.css, prima dei CSS di pagina. */

/* ---------- 1. il fondo vivo: campi di luce viola e ambra che si muovono lentissimi, una trama appena percettibile ---------- */
html { background: var(--fondo); }
body { isolation: isolate; }
.fondo-vivo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo-vivo i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.fondo-vivo .l1 { width: 70vmax; height: 70vmax; left: -28vmax; top: -34vmax; background: radial-gradient(circle, rgba(139, 92, 246, .26) 0%, rgba(139, 92, 246, .08) 38%, rgba(139, 92, 246, 0) 66%); animation: fondo-1 80s ease-in-out infinite alternate; }
.fondo-vivo .l2 { width: 58vmax; height: 58vmax; right: -24vmax; bottom: -28vmax; background: radial-gradient(circle, rgba(245, 165, 36, .17) 0%, rgba(245, 165, 36, .05) 40%, rgba(245, 165, 36, 0) 66%); animation: fondo-2 95s ease-in-out infinite alternate; }
.fondo-vivo .l3 { width: 46vmax; height: 46vmax; left: 38%; top: 48%; background: radial-gradient(circle, rgba(109, 59, 224, .16) 0%, rgba(109, 59, 224, 0) 64%); animation: fondo-3 70s ease-in-out infinite alternate; }
.fondo-vivo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 50%, transparent 100%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 50%, transparent 100%); }
@keyframes fondo-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 9vmax, 0) scale(1.12); } }
@keyframes fondo-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12vmax, -10vmax, 0) scale(1.18); } }
@keyframes fondo-3 { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(-10vmax, -14vmax, 0) scale(1.1); } }
html.schermo .fondo-vivo, html.vetrina .fondo-vivo { display: none; }  /* lo schermo cliente, la TV e la vetrina hanno il loro ambiente */

/* ---------- 2. vetro: due livelli di profondità (pannello, carta dentro il pannello) ---------- */
.pannello {
  background: radial-gradient(120% 70% at 0% 0%, var(--vetro-luce), transparent 55%), linear-gradient(160deg, var(--vetro), rgba(21, 17, 32, .55));
  border-color: rgba(42, 34, 56, .55);
  -webkit-backdrop-filter: blur(var(--vetro-sfocatura)) saturate(1.25); backdrop-filter: blur(var(--vetro-sfocatura)) saturate(1.25);
  box-shadow: var(--ombra-profonda);
}
.pannello::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(139, 92, 246, .6) 0%, rgba(139, 92, 246, .12) 32%, rgba(245, 165, 36, .08) 62%, rgba(245, 165, 36, .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.pannello > * { position: relative; z-index: 2; }  /* il contenuto sta sopra il bordo di luce e sotto il lampo (::after, base.css) */
.pannello::after { z-index: 3; }
.pannello.in-luce { border-color: rgba(245, 165, 36, .35); }
.pannello.in-luce::before { background: linear-gradient(135deg, rgba(245, 165, 36, .7), rgba(245, 165, 36, .15) 40%, rgba(139, 92, 246, .15) 60%, rgba(139, 92, 246, .6)); }
/* il secondo livello: carte dentro il pannello */
.carta-vetro { background: var(--vetro-2); border: 1px solid rgba(42, 34, 56, .7); border-radius: var(--raggio-piccolo); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
input, select, textarea { background: rgba(14, 11, 20, .6); transition: border-color var(--transizione), background var(--transizione); }
input:hover, select:hover, textarea:hover { border-color: rgba(139, 92, 246, .45); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ambra); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); background: rgba(14, 11, 20, .85); }

/* ---------- 3. luce sui bottoni: ambra = azione principale, viola = secondaria, rosso tenue = pericolo ---------- */
button, .bottone { position: relative; isolation: isolate; transition: background var(--transizione), transform 160ms var(--curva), filter 160ms ease, opacity var(--transizione), border-color var(--transizione), color var(--transizione); }
button::after, .bottone::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 220ms ease; box-shadow: var(--luce-viola); }
button:hover:not(:disabled), .bottone:hover { transform: translateY(-1px); }
button:hover:not(:disabled)::after, .bottone:hover::after { opacity: .9; }
button:active:not(:disabled), .bottone:active { transform: translateY(0) scale(.98); filter: brightness(.92); }
button.ciano, .bottone.ciano { background: linear-gradient(180deg, #FFB63D, var(--ambra)); color: #2a1d00; }
button.ciano::after, .bottone.ciano::after { box-shadow: var(--luce-ambra); opacity: .45; }
button.ciano:hover:not(:disabled), .bottone.ciano:hover { background: linear-gradient(180deg, #FFC45A, #FFB030); color: #2a1d00; }
button.ciano:hover:not(:disabled)::after, .bottone.ciano:hover::after { opacity: 1; }
button.secondario::after, .bottone.secondario::after, button.icona::after { box-shadow: 0 0 16px rgba(139, 92, 246, .35); }
button.secondario:hover:not(:disabled), .bottone.secondario:hover { border-color: rgba(139, 92, 246, .55); background: rgba(139, 92, 246, .1); }
button.icona:hover:not(:disabled) { border-color: rgba(139, 92, 246, .45); }
button.pericolo::after { box-shadow: 0 0 18px rgba(248, 113, 113, .45); }
button.pericolo:hover:not(:disabled) { border-color: rgba(248, 113, 113, .8); }
button:disabled::after { opacity: 0 !important; }
button:focus-visible, .bottone:focus-visible, a:focus-visible, .cella.libera:focus-visible, .app:focus-visible, .mese-giorno:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.slot-lista button::after { box-shadow: var(--luce-viola); }
/* il bottone grande della striscia e della scheda: più luce */
.striscia button.grande::after, .gesti .grande::after { box-shadow: 0 0 34px rgba(245, 165, 36, .55); }

/* ---------- 4. movimento con senso ---------- */
/* entrata delle sezioni a scalare (una volta sola, sul caricamento) */
html.js .contenuto > *, html.js .colonne > .colonna > *, html.js .due-colonne > .pannello, html.js .due-colonne > .colonna > *, html.js .tre-colonne > *, html.js #pannello > .cliente, html.js #pannello > .striscia, html.js .decisione > * { animation: scena-sale 560ms var(--curva) both; animation-delay: calc(var(--i, 0) * 55ms); }
html.js .contenuto > :nth-child(2), html.js .colonna > :nth-child(2), html.js .tre-colonne > :nth-child(2), html.js .decisione > :nth-child(2) { --i: 1; }
html.js .contenuto > :nth-child(3), html.js .colonna > :nth-child(3), html.js .tre-colonne > :nth-child(3), html.js .decisione > :nth-child(3) { --i: 2; }
html.js .contenuto > :nth-child(4), html.js .colonna > :nth-child(4) { --i: 3; }
html.js .contenuto > :nth-child(5), html.js .colonna > :nth-child(5) { --i: 4; }
html.js .contenuto > :nth-child(6), html.js .colonna > :nth-child(6) { --i: 5; }
html.js .contenuto > :nth-child(n + 7) { --i: 6; }
html.js .colonne > .colonna:nth-child(2) > * { --i: 2; } html.js .colonne > .colonna:nth-child(3) > * { --i: 4; }
html.js .due-colonne > .colonna > * { --i: 2; } html.js .due-colonne > .colonna > :nth-child(2) { --i: 3; } html.js .due-colonne > .colonna > :nth-child(3) { --i: 4; }
html.js .colonna > .pannello > .riga-tabella { animation-delay: calc(var(--i, 0) * 60ms + 200ms); }
@keyframes scena-appari { from { opacity: 0; } to { opacity: 1; } }
@keyframes scena-sale { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* la pagina che va via (cambio settimana/giorno/mese senza View Transitions) e quella che arriva da destra o da sinistra */
.scena-esce { animation: scena-via 200ms ease-in both !important; }
@keyframes scena-via { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -16px)); } }
html.js .scena-da-dx { animation: scena-da-dx 260ms var(--curva) both !important; }
html.js .scena-da-sx { animation: scena-da-sx 260ms var(--curva) both !important; }
@keyframes scena-da-dx { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes scena-da-sx { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* numeri che contano: tabular, un filo di luce sul numero finale */
.numero-grande { font-variant-numeric: tabular-nums; }
.numero-grande.contato { animation: scena-conta-fine 700ms ease-out both; }
@keyframes scena-conta-fine { 0% { filter: brightness(1); } 35% { filter: brightness(1.6) drop-shadow(0 0 12px rgba(245, 165, 36, .55)); } 100% { filter: brightness(1); } }
/* il passo corrente della striscia pulsa piano; la luce che viaggia da un passo all'altro */
.striscia .passo.corrente::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(139, 92, 246, .55), 0 0 22px rgba(139, 92, 246, .6); animation: scena-pulsa 2.4s ease-in-out infinite; pointer-events: none; }
.striscia .passo { position: relative; }
.striscia .passo.acceso { animation: scena-accendi 700ms var(--curva-scatto) both; }
@keyframes scena-accendi { 0% { transform: scale(.92); filter: brightness(1); } 45% { transform: scale(1.1); filter: brightness(1.5); } 100% { transform: scale(1.04); filter: brightness(1); } }
@keyframes scena-pulsa { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
.striscia .passi { position: relative; }
.striscia .luce-viaggia { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 26px var(--ambra), 0 0 48px var(--ambra); pointer-events: none; z-index: 5; will-change: transform, opacity; }
/* toast di vetro, in basso al centro, entra e esce */
.toast { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); background: rgba(27, 22, 38, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgba(139, 92, 246, .45); box-shadow: var(--ombra-profonda), 0 0 32px rgba(139, 92, 246, .25); border-radius: 999px; padding: .7rem 1.15rem .7rem .95rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; transform: translate(-50%, 14px) scale(.96); transition: opacity 240ms ease, transform 320ms var(--curva); z-index: 80; }
.toast::before { content: "✓"; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ok); color: #05261a; font-size: .8rem; font-weight: 800; flex: none; }
.toast.visibile { transform: translate(-50%, 0) scale(1); }
.toast.errore { border-color: rgba(248, 113, 113, .6); box-shadow: var(--ombra-profonda), 0 0 32px rgba(248, 113, 113, .25); }
.toast.errore::before { content: "!"; background: var(--errore); color: #2a0606; }
/* skeleton: luccica con un gradiente mosso solo con transform */
.scheletro { position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); border-radius: var(--raggio-piccolo); color: transparent !important; min-height: 1em; }
.scheletro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .09) 50%, transparent 100%); transform: translateX(-100%); animation: scena-luccica 1.5s ease-in-out infinite; }
@keyframes scena-luccica { to { transform: translateX(100%); } }
.scheletro.riga { height: .9em; margin: .35em 0; width: 100%; }
.scheletro.riga.corta { width: 55%; } .scheletro.riga.media { width: 78%; }
.scheletro.pillola { display: inline-block; width: 4.6rem; height: 2rem; border-radius: 999px; margin: 0 .3rem .3rem 0; }
.scheletro.blocco { height: 3.2rem; border-radius: var(--raggio-piccolo); margin: .5rem 0; }
.scheletro.tondo { width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-block; vertical-align: middle; }
/* stati vuoti disegnati: la Testa di vetro spenta, a tratto, poi il testo */
.vuoto { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem 1rem; color: var(--grigio); }
.vuoto .vuoto-segno { width: 3.6rem; height: 3.6rem; opacity: .8; animation: scena-galleggia 6s ease-in-out infinite; }
.vuoto .vuoto-testo { max-width: 34ch; line-height: 1.4; }
.vuoto .vuoto-testo strong { color: var(--testo-2); font-weight: 600; }
.vuoto.piccolo { padding: .8rem; gap: .4rem; } .vuoto.piccolo .vuoto-segno { width: 2.4rem; height: 2.4rem; }
/* gli stati vuoti costruiti dal JS (pannello.js): lo stesso segno, come sfondo */
.vuoto:not(:has(.vuoto-segno))::before { content: ""; width: 3rem; height: 3rem; opacity: .75; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cpath d='M50 22V10' stroke='%239A94AB' stroke-width='4'/%3E%3Ccircle cx='50' cy='7' r='4.5' fill='%23F5A524' fill-opacity='.7'/%3E%3Crect x='7' y='45' width='8' height='18' rx='4' fill='%238B5CF6' fill-opacity='.55'/%3E%3Crect x='85' y='45' width='8' height='18' rx='4' fill='%238B5CF6' fill-opacity='.55'/%3E%3Crect x='16' y='22' width='68' height='62' rx='19' stroke='%23C9C3D6' stroke-opacity='.6' stroke-width='2.6'/%3E%3Cpath d='M22 66h56' stroke='%238B5CF6' stroke-opacity='.6' stroke-width='2' stroke-dasharray='4 5'/%3E%3Ccircle cx='37' cy='47' r='6' stroke='%23F5A524' stroke-opacity='.8' stroke-width='2.5'/%3E%3Ccircle cx='63' cy='47' r='6' stroke='%23F5A524' stroke-opacity='.8' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; animation: scena-galleggia 6s ease-in-out infinite; }
@keyframes scena-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* il colpo di scena: a tutto schermo, prima di andare al pannello */
.colpo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 60%, rgba(27, 22, 38, .98), rgba(6, 4, 10, .99)); opacity: 0; animation: scena-colpo-fondo 320ms ease both; }
.colpo .colpo-centro { position: relative; display: grid; place-items: center; gap: 1.2rem; padding: 2rem; }
.colpo .mascotte { width: 11rem; filter: drop-shadow(0 0 2rem rgba(139, 92, 246, .55)); animation: scena-colpo-mascotte 900ms var(--curva-scatto) both; }
.colpo .anello { position: absolute; left: 50%; top: 5.5rem; width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; border-radius: 50%; border: 2px solid var(--ambra); opacity: 0; box-shadow: 0 0 40px rgba(245, 165, 36, .5), inset 0 0 30px rgba(245, 165, 36, .2); animation: scena-anello 1100ms var(--curva) 120ms both; pointer-events: none; }
.colpo .anello.secondo { border-color: var(--viola); box-shadow: 0 0 40px rgba(139, 92, 246, .5); animation-delay: 320ms; }
.colpo .occhiello { color: var(--ambra); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; animation: scena-sale 500ms var(--curva) 350ms both; }
.colpo h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -.03em; margin: 0; max-width: 20ch; line-height: 1.1; }
.colpo .colpo-sotto { color: var(--testo-2); font-size: 1.05rem; animation: scena-sale 500ms var(--curva) 750ms both; }
.colpo.via { animation: scena-colpo-via 260ms ease-in both; }
@keyframes scena-colpo-fondo { to { opacity: 1; } }
@keyframes scena-colpo-via { to { opacity: 0; } }
@keyframes scena-colpo-mascotte { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes scena-anello { 0% { opacity: 0; transform: scale(.25); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
/* riga «adesso» dell'agenda: punto pulsante con alone (il colore viene da agenda.css) */
.adesso::before, .adesso-giorno::before { animation: scena-punto 1.8s ease-in-out infinite; }
.adesso::after, .adesso-giorno::after { content: ""; position: absolute; left: -11px; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ambra); opacity: .35; animation: scena-alone 1.8s ease-out infinite; }
@keyframes scena-punto { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes scena-alone { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- 5. tipografia e ritmo ---------- */
h1 { letter-spacing: -.035em; line-height: 1.05; }
h2 { letter-spacing: -.025em; }
h3 { letter-spacing: .12em; font-size: .78rem; }
.contenuto { padding: var(--s5) var(--s5) var(--s7); }
.intesta { margin-bottom: var(--s5); }
.num, .tabella td, .numero-grande, .riga-ora, .oggi-ora strong, .app-ora { font-variant-numeric: tabular-nums; }
.tabella tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.tabella tbody tr:hover td { background: rgba(139, 92, 246, .08); }
.tabella td { position: relative; transition: background var(--transizione); }
.tabella td.chiave::before { content: ""; position: absolute; left: .15rem; right: .15rem; top: .3rem; bottom: .3rem; border-radius: .3rem; background: linear-gradient(90deg, rgba(139, 92, 246, .35), rgba(245, 165, 36, .25)); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform 900ms var(--curva) 250ms; opacity: .85; pointer-events: none; }
.tabella td.chiave > span { position: relative; }
.spia { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.riga-tabella { transition: background var(--transizione); }
.pannello > .riga-tabella:hover, .pannello > .tabella-persone > .riga-tabella:hover { background: linear-gradient(90deg, rgba(139, 92, 246, .08), transparent 80%); }

/* ---------- 6. la mascotte nel menu: viva, economica ---------- */
.marchio .mascotte-testata { width: 2.2rem; height: 2.2rem; flex: none; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .45)); transition: filter 500ms ease; }
.marchio:hover .mascotte-testata, .marchio .mascotte-testata[data-stato="felice"] { filter: drop-shadow(0 0 10px rgba(245, 165, 36, .7)); }
.mascotte .m-occhio-tondo { transition: transform 180ms ease-out; }
.testata { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(14, 11, 20, .72), rgba(14, 11, 20, .5)); border-bottom-color: rgba(42, 34, 56, .6); position: sticky; top: 0; z-index: 40; }
.testata nav a { padding: .3rem .1rem; border-radius: .3rem; transition: color var(--transizione); }
.testata nav a:hover { color: var(--testo); text-decoration: none; }
.testata nav a.attiva { position: relative; }
.testata nav a.attiva::after { content: ""; position: absolute; left: .1rem; right: .1rem; bottom: -.15rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--viola), var(--ambra)); }

/* ---------- 8. accesso e invito: la prima scena che un dipendente vede ---------- */
.accesso { min-height: calc(100vh - 2rem); display: grid; place-items: center; padding: 1rem; }
.accesso-scena { width: min(26rem, 100%); display: grid; gap: 1.4rem; justify-items: center; position: relative; }
.accesso-scena .mascotte-media { width: 8.5rem; filter: drop-shadow(0 0 1.8rem rgba(139, 92, 246, .5)); animation: scena-colpo-mascotte 900ms var(--curva-scatto) both; }
.accesso-anello { position: absolute; left: 50%; top: 4.2rem; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; border: 2px solid var(--ambra); opacity: 0; pointer-events: none; animation: scena-anello 1400ms var(--curva) 200ms both; box-shadow: 0 0 40px rgba(245, 165, 36, .45); }
.accesso-anello.secondo { border-color: var(--viola); animation-delay: 500ms; box-shadow: 0 0 40px rgba(139, 92, 246, .45); }
.accesso-nome { text-align: center; animation: scena-sale 600ms var(--curva) 300ms both; }
.accesso-nome .nome { font-size: 1.9rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.accesso-nome .sottomarchio { display: block; margin-top: .35rem; color: var(--ambra); font-size: .72rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.accesso .pannello { width: 100%; padding: 1.5rem; animation: scena-sale 600ms var(--curva) 450ms both; }
.accesso .pannello h1 { font-size: 1.35rem; margin-bottom: .25rem; }
.accesso .campo { margin: 1rem 0; }
.accesso .piede { margin-top: .6rem; text-align: center; animation: scena-sale 600ms var(--curva) 650ms both; }
.accesso .errore { padding: .55rem .8rem; border-radius: var(--raggio-piccolo); background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .4); font-size: .9rem; }

/* ---------- 9. rifiniture: layout stabili ---------- */
.maniglia { display: none; }  /* la maniglia del foglio dal basso c'è solo sul telefono */
.scheda-corpo { display: grid; gap: var(--s4); }
.riga-oggi .spia { justify-self: start; }
.riga-oggi .bottoni-riga form { display: contents; }
.testata nav a { white-space: nowrap; }
.badge { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--ambra); color: #2a1d00; font-size: .72rem; font-weight: 800; box-shadow: 0 0 12px rgba(245, 165, 36, .5); animation: badge-sale 420ms var(--curva) both; }
[hidden].badge, .badge[hidden] { display: none; }
@keyframes badge-sale { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* la tabella dei dipendenti entra nel pannello a 1440 senza tagliare l'ultima colonna */
.tabella.dipendenti th { letter-spacing: .03em; padding-left: .25rem; padding-right: .25rem; }
.tabella.dipendenti td { padding-left: .25rem; padding-right: .25rem; }
.tabella.dipendenti thead tr:first-child th:not(:first-child):not(:last-child) { letter-spacing: .12em; }
.tabella.dipendenti td.persona { min-width: 8.5rem; }
.tabella td { word-spacing: .14em; }  /* «05/10 19:12»: il carattere ha lo spazio stretto */
.tabella-scorri { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }
/* il colpo d'occhio della supervisione: quattro numeri che contano */
.colpo-occhio { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.colpo-occhio > div { position: relative; padding: var(--s4); border-radius: var(--raggio); overflow: hidden; }
.colpo-occhio h3 { margin: 0 0 .4rem; }
.colpo-occhio .numero-grande { font-size: 2.4rem; }
.colpo-occhio .didascalia { margin-top: .3rem; }
.colpo-occhio > div::after { content: ""; position: absolute; right: -2rem; top: -2rem; width: 6rem; height: 6rem; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 70%); pointer-events: none; }
.colpo-occhio > div:nth-child(even)::after { background: radial-gradient(circle, rgba(245, 165, 36, .22), transparent 70%); }

/* la guida: i cinque passi come una linea di luce con i numeri accesi */
.guida .passi-guida { list-style: none; padding: 0; margin: .4rem 0 0; counter-reset: passo; }
.guida .passi-guida li { counter-increment: passo; position: relative; padding-left: 3.1rem; margin: 0 0 1.1rem; }
.guida .passi-guida li::before { content: counter(passo); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--viola), var(--viola-scuro)); box-shadow: 0 0 18px rgba(139, 92, 246, .55); }
.guida .passi-guida li:not(:last-child)::after { content: ""; position: absolute; left: 1.02rem; top: 2.2rem; bottom: -1rem; width: 2px; background: linear-gradient(180deg, rgba(139, 92, 246, .55), rgba(139, 92, 246, .04)); }
.guida .passi-guida li:last-child::before { background: linear-gradient(135deg, var(--ambra), var(--ambra-scura)); color: #2a1d00; box-shadow: 0 0 18px rgba(245, 165, 36, .55); }

/* ---------- 7. telefono: barra delle azioni in basso, tocchi grandi, niente scroll orizzontale ---------- */
@media (max-width: 700px) {
  :root { --vetro-sfocatura: 10px; }
  .fondo-vivo .l3 { display: none; }
  .contenuto { padding: var(--s4) var(--s4) calc(var(--s7) + 3.5rem); }
  /* testata: marchio e «Esci» sulla prima riga, le voci su una striscia che scorre sotto */
  .testata { position: relative; flex-wrap: wrap; gap: .1rem .6rem; padding: .55rem .9rem .2rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .testata nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; font-size: .9rem; scrollbar-width: none; margin: 0 -.9rem; padding: .25rem .9rem .45rem; -webkit-overflow-scrolling: touch; }
  .testata nav::-webkit-scrollbar { display: none; }
  .testata nav > * { flex: none; }
  .testata nav > span:not(.filo) { display: none; }  /* il nome utente non serve sul telefono: c'è «Esci» */
  .testata nav form { position: absolute; top: .65rem; right: .9rem; }
  .testata nav a { padding: .45rem .05rem; }
  .testata nav a.attiva::after { bottom: .1rem; }
  button:not(.icona), .bottone { min-height: 2.75rem; }
  button.icona { min-height: 2.25rem; }
  .intesta h1 { font-size: 1.55rem; }
  .toast { max-width: calc(100vw - 2rem); }
  body:has(.agenda-pagina) .toast, body:has(.barra-passo:not([hidden])) .toast { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }  /* sopra la barra delle azioni */
  .vuoto .vuoto-segno { width: 3rem; height: 3rem; }
  /* le righe di elenco: il nome sopra, poi spia e bottoni sulla riga sotto */
  .riga-tabella:not(.riga-oggi) { display: flex !important; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
  .riga-tabella:not(.riga-oggi) > :first-child { flex: 1 1 100%; min-width: 0; }
  .riga-tabella:not(.riga-oggi) > .bottone, .riga-tabella:not(.riga-oggi) > button { flex: 1 1 auto; justify-content: center; }
  .riga-oggi { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .riga-oggi .spia, .riga-oggi .bottoni-riga { grid-column: 2; }
  .riga-oggi .bottoni-riga { width: 100%; }
  .riga-oggi .bottoni-riga > * { flex: 1 1 auto; justify-content: center; }
  /* la barra delle azioni: i due gesti dell'agenda e il bottone grande del passo stanno a portata di pollice, su una sfumatura */
  .agenda-pagina::after, body:has(.barra-passo:not([hidden]))::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(5.2rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(14, 11, 20, .9) 60%); pointer-events: none; z-index: 34; }
  .agenda-pagina .comandi #b-nuovo, .agenda-pagina .comandi #b-walkin, .barra-passo:not([hidden]) { position: fixed; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 35; min-height: 3rem; justify-content: center; font-size: .95rem; box-shadow: var(--ombra-profonda); }
  .contenuto.agenda-pagina { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }  /* collaudo: l'ultima riga del giorno (spesso «+ libero») finiva sotto la barra fissa */
  .agenda-pagina .comandi #b-nuovo { left: .75rem; width: 9.2rem; }
  .agenda-pagina .comandi #b-walkin { left: 10.45rem; right: .75rem; padding-left: .6rem; padding-right: .6rem; }
  section.striscia#striscia, section.striscia#striscia-azione { -webkit-backdrop-filter: none; backdrop-filter: none; }  /* semplice2: i passi in due pezzi, il bottone fisso sta nel secondo */  /* un backdrop-filter farebbe da blocco contenitore al bottone fisso (gestione.css viene dopo: serve più specificità) */
  /* lo stesso vale per un transform che resta applicato a fine animazione: chi contiene un bottone fisso entra solo con la dissolvenza */
  html.js .agenda-intesta, html.js #pannello > .striscia { animation-name: scena-appari; }
  .agenda-intesta, #pannello > .striscia { position: relative; z-index: 36; }  /* i bottoni fissi stanno sopra tutto ciò che scorre dopo di loro */
  .barra-passo:not([hidden]) { left: .75rem; right: .75rem; width: auto; }  /* semplice3 (12/10/2026): la barra fissa è LA barra, non più il solo bottone */
  body:has(.barra-passo:not([hidden])) #pannello { padding-bottom: 4.5rem; }
  .agenda-pagina .comandi #b-nuovo::after, .agenda-pagina .comandi #b-walkin::after, .striscia #b-prossimo::after, .barra-passo #b-prossimo::after { opacity: .6; }
  /* dialog e scheda = foglio dal basso con la maniglia */
  dialog.dialogo { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 1.25rem 1.25rem 0 0; border-bottom: 0; padding-top: 0; overflow: auto; overscroll-behavior: contain; }
  .maniglia { display: block; position: sticky; top: 0; z-index: 5; height: 1.7rem; margin-bottom: -.25rem; touch-action: none; cursor: grab; background: linear-gradient(180deg, rgba(27, 22, 38, .98) 55%, rgba(27, 22, 38, 0)); }
  .maniglia::before { content: ""; position: absolute; left: 50%; top: .55rem; width: 2.8rem; height: .32rem; margin-left: -1.4rem; border-radius: 999px; background: rgba(201, 195, 214, .5); }
  dialog.dialogo[open] { animation: scena-foglio-sale 300ms var(--curva) both; }
  dialog.dialogo.chiude { animation: scena-foglio-scende 220ms ease-in both; }
  dialog.dialogo.trascina { transition: none; animation: none; }
  @keyframes scena-foglio-sale { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  @keyframes scena-foglio-scende { to { opacity: 0; transform: translateY(60%); } }
  .scheda { border-radius: 0; border-top-width: 3px; }
  form.inline.filtri { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .7rem; align-items: center; width: 100%; }
  form.inline.filtri label { margin: 0; }
  form.inline.filtri select { width: 100%; min-width: 0; }
  form.inline.filtri .spunta { grid-column: 1 / -1; }  /* collaudo4 (11/10/2026) */
  /* tabella dei dipendenti = una carta per persona: i numeri chiave in vista, il resto si apre toccando la carta */
  .tabella-scorri { margin: 0; padding: 0; overflow: visible; }
  .tabella.dipendenti, .tabella.dipendenti tbody { display: block; }
  .tabella.dipendenti thead { display: none; }
  .tabella.dipendenti tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: .8rem .7rem .7rem; margin: 0 0 .65rem; background: var(--vetro-2); border: 1px solid rgba(42, 34, 56, .8); border-radius: var(--raggio-piccolo); }
  .tabella.dipendenti td { display: block; text-align: left; border: 0; padding: .4rem .5rem; background: rgba(255, 255, 255, .035) !important; border-radius: .4rem; white-space: normal; font-size: 1.05rem; font-weight: 700; min-width: 0; }
  .tabella.dipendenti td:not(.persona):not(.k) { display: none; }
  .tabella.dipendenti tr.aperta td:not(.persona) { display: block; }
  .tabella.dipendenti td::before, .tabella.dipendenti td.chiave::before { content: attr(data-l); position: static; display: block; margin: 0 0 .15rem; padding: 0; background: none; opacity: 1; transform: none; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabella.dipendenti td.persona { grid-column: 1 / -1; background: none !important; padding: 0 1.8rem .15rem 0; font-size: 1rem; position: relative; cursor: pointer; }
  .tabella.dipendenti td.persona::before { content: none; }
  .tabella.dipendenti td.persona::after { content: "▾"; position: absolute; right: .3rem; top: 0; font-size: .9rem; color: var(--grigio); transition: transform 240ms var(--curva); }
  .tabella.dipendenti tr.aperta td.persona::after { transform: rotate(180deg); color: var(--ambra); }
  .tabella.dipendenti td.persona .spia { display: inline-block; margin: 0 0 0 .4rem; }
  .tabella.dipendenti td.ultimo { font-size: .85rem; font-weight: 500; color: var(--testo-2); }
  .tabella.dipendenti td.chiave > span { position: static; }
  /* gli orari del negozio (semplice3, 12/10/2026): una riga per giorno — nome e interruttore «chiuso» e «Modifica» sopra, le fasce come testo sotto; i campi di un giorno si aprono con «Modifica» */
  .og-testa { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "giorno chiuso modifica" "fasce fasce fasce"; row-gap: 0; min-height: 0; padding: .3rem 0 .4rem; }
  .og-modifica { min-height: 2.25rem; }
  .og-giorno { grid-area: giorno; } .og-chiuso { grid-area: chiuso; } .og-modifica { grid-area: modifica; } .og-fasce { grid-area: fasce; font-size: .88rem; }
  .og-campi .fascia { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem; flex: 1 1 100%; }
  .og-campi .fascia input { width: 100%; min-width: 0; }
  .og-campi .fascia.seconda::before { grid-column: 1 / -1; }
}

/* ---------- movimento ridotto: tutto spento o dissolvenze ---------- */
@media (prefers-reduced-motion: reduce) {
  .fondo-vivo i, .vuoto .vuoto-segno, .vuoto::before, .adesso::before, .adesso::after, .adesso-giorno::before, .adesso-giorno::after, .striscia .passo.corrente::after, .scheletro::after, .colpo .anello, .accesso-anello { animation: none !important; }
  .adesso::after, .adesso-giorno::after { display: none; }
  .striscia .passo.corrente::after { opacity: .8; }
  html.js .contenuto > *, html.js .colonne > .colonna > *, html.js .due-colonne > .pannello, html.js .due-colonne > .colonna > *, html.js .tre-colonne > *, html.js #pannello > .cliente, html.js #pannello > .striscia, html.js .decisione > *, html.js .scena-da-dx, html.js .scena-da-sx, .accesso-nome, .accesso .pannello, .accesso .piede, .colpo .occhiello, .colpo .colpo-sotto { animation: scena-dissolvi 240ms ease both !important; }
  .scena-esce { animation: scena-dissolvi-via 120ms ease both !important; }
  .numero-grande.contato, .striscia .passo.acceso { animation: none; }
  .tabella td.chiave::before { transition: none; }
  .badge { animation: scena-dissolvi 240ms ease both; }
  .colpo .mascotte, .accesso-scena .mascotte-media { animation: scena-dissolvi 300ms ease both; }
  button:hover:not(:disabled), .bottone:hover { transform: none; }
  .toast { transition: opacity 200ms ease; transform: translate(-50%, 0); }
  dialog.dialogo[open] { animation: scena-dissolvi 200ms ease both; }
  @keyframes scena-dissolvi { from { opacity: 0; } to { opacity: 1; } }
  @keyframes scena-dissolvi-via { to { opacity: 0; } }
}

/* --- Schermo v2 (cantiere schermo, 06/10/2026): pannello · la scaletta di domande (docs/schermi.md «La scaletta») ---------------------------------------------------- */
#sezione-scaletta[hidden] { display: none; }
.scaletta-testata { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.scaletta-tappe { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.scaletta-tappe li { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .22rem .6rem; border-radius: 999px; border: 1px solid var(--bordo); color: var(--grigio); transition: border-color 300ms ease, color 300ms ease, background 300ms ease; }
.scaletta-tappe li b { font-weight: 800; color: inherit; }
.scaletta-tappe li.fatta { border-color: rgba(245, 165, 36, .5); color: var(--testo-2); }
.scaletta-tappe li.corrente { border-color: var(--ambra); color: #fff; background: rgba(245, 165, 36, .12); }
.scaletta-settore { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--grigio); margin: 0; flex-wrap: wrap; max-width: 100%; }  /* collaudo4 (11/10/2026): sul telefono la frase accanto al settore («non ancora capito: …») andava a capo parola per parola; ora va sotto */
@media (max-width: 700px) { .scaletta-settore .didascalia { flex: 1 1 100%; } }
.scaletta-settore select { width: auto; padding: .25rem .5rem; font-size: .85rem; }
.scaletta-prossima textarea { width: 100%; margin-top: .35rem; font-size: 1rem; font-weight: 600; line-height: 1.35; resize: vertical; min-height: 4.4rem; }
.scaletta-prossima.finita textarea { opacity: .5; }
.scaletta-chip { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 .4rem; }
.scaletta-etichetta-chip { font-size: .8rem; padding: .22rem .65rem; border-radius: 999px; border: 1px solid rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .12); color: #d9ccff; }
.scaletta-perche { font-size: .85rem; line-height: 1.4; color: var(--ambra); font-style: italic; min-height: 1.2rem; }
.scaletta-gesti { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.scaletta-elenco { margin-top: .9rem; }
.scaletta-elenco summary { cursor: pointer; color: var(--grigio); font-size: .88rem; }
.scaletta-elenco ol { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; max-height: 19rem; overflow: auto; }
.scaletta-elenco li { display: grid; grid-template-columns: 1.3rem 1.8rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; font-size: .85rem; padding: .3rem 0; border-top: 1px solid var(--bordo); }
.scaletta-elenco li:first-child { border-top: 0; }
.scaletta-elenco .tappa-s { color: var(--grigio); font-size: .72rem; letter-spacing: .06em; }
.scaletta-elenco .stato-coperta, .scaletta-elenco .stato-fatta { color: var(--grigio); }
.scaletta-elenco .stato-coperta .segno-s, .scaletta-elenco .stato-fatta .segno-s { color: var(--ok); }
.scaletta-elenco .stato-in_corso { color: var(--ambra); }
.scaletta-elenco .stato-saltata { opacity: .55; }
.scaletta-elenco .stato-saltata .testo-s { text-decoration: line-through; }
@media (max-width: 1000px) { .scaletta-elenco li { grid-template-columns: 1.3rem minmax(0, 1fr) auto; } .scaletta-elenco .tappa-s { display: none; } }
/* --- fine Schermo v2 ------------------------------------------------------------------------------------------------------------------------------------------------- */