/* Splash / schermata di caricamento iniziale (logo IN's) */
#splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #1d4fc4 0%, #163a93 55%, #102a6e 100%);transition:opacity .5s ease}
#splash.hide{opacity:0;pointer-events:none}
.splash-in{text-align:center;padding:0 40px}
.splash-logo{width:180px;max-width:62vw;display:block;margin:0 auto;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.30);animation:spPop .55s cubic-bezier(.22,1,.36,1) both}
.splash-name{margin-top:20px;color:#fff;font-weight:800;font-size:1.7rem;letter-spacing:-.02em;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;animation:spFade .5s .18s both;opacity:0}
.splash-sub{margin-top:6px;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.14em;text-transform:uppercase;animation:spFade .5s .3s both;opacity:0}
/* Scenetta di caricamento: il carrello parte vuoto, la spesa ci salta dentro
   lungo il tragitto, e arriva in cassa per "incassare" (€ finale). */
.splash-scene{position:relative;width:300px;max-width:84vw;height:96px;margin:24px auto 0;animation:spFade .5s .35s both;opacity:0}
.sc-ground{position:absolute;left:0;right:0;bottom:16px;height:2px;background:rgba(255,255,255,.28);border-radius:2px}
.sc-cassa{position:absolute;right:0;bottom:17px;width:56px;text-align:center}
.sc-reg{width:52px;height:52px;display:block;margin:0 auto;animation:scFlash .5s 1.8s both}
.sc-eur{position:absolute;left:50%;top:-32px;font-size:22px;font-weight:800;color:#ffd200;text-shadow:0 0 12px rgba(255,210,0,.8);opacity:0;transform:translateX(-50%);animation:scEur .55s 1.82s cubic-bezier(.22,1.4,.36,1) both}
.sc-cart{position:absolute;left:2px;bottom:15px;width:44px;height:44px;animation:scGo 1.3s .45s cubic-bezier(.55,.06,.5,.94) both}
.sc-wind{position:absolute;right:100%;margin-right:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));opacity:0;animation:scWind .42s linear 3 both}
.sc-wind.w1{top:11px;width:22px;animation-delay:.5s}
.sc-wind.w2{top:21px;width:30px;animation-delay:.62s}
.sc-wind.w3{top:31px;width:16px;animation-delay:.74s}
.sc-cart .g{position:relative;z-index:2;display:block;font-size:38px;line-height:44px;transform:scaleX(-1);animation:scRoll .26s .45s linear 5,scJolt .35s 1.75s both}
.sc-it{position:absolute;top:-4px;z-index:1;font-size:15px;opacity:0;animation:scDrop .5s cubic-bezier(.5,-.2,.7,1) both}
.sc-it.i1{left:8px;animation-delay:.65s}
.sc-it.i2{left:17px;animation-delay:.98s}
.sc-it.i3{left:26px;animation-delay:1.3s}
@keyframes spPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spFade{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes scGo{from{transform:translateX(0)}to{transform:translateX(186px)}}
@keyframes scRoll{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-2px)}}
@keyframes scJolt{0%{transform:scaleX(-1) rotate(0)}40%{transform:scaleX(-1) rotate(-9deg)}100%{transform:scaleX(-1) rotate(0)}}
@keyframes scDrop{0%{opacity:0;transform:translateY(-42px) scale(.7) rotate(-20deg)}20%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes scEur{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.3)}60%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.25)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes scFlash{0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px rgba(255,210,0,.95)) brightness(1.4)}}
@keyframes scWind{0%{opacity:0;transform:translateX(12px) scaleX(.4)}30%{opacity:.9}100%{opacity:0;transform:translateX(-14px) scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-name,.splash-sub,.splash-scene{animation:none;opacity:1}
  .sc-cart{animation:none;transform:translateX(186px)}
  .sc-cart .g{animation:none}
  .sc-it{animation:none;opacity:1;transform:none}
  .sc-eur{animation:none;opacity:1;transform:translateX(-50%)}
  .sc-reg{animation:none}
  .sc-wind{animation:none;opacity:0}
}

/* ============================================================================
   presenze.css — shared design layer for the Presenze app
   ----------------------------------------------------------------------------
   ONE drop-in stylesheet for every role:
     • Admin / gestore   → index.html   (<body class="role-admin">)
     • Crew / dipendente → dip.html     (<body class="role-crew">)
     • Area manager      → index.html?ro=…  (adds .ro to the admin body)
     • Registrazione     → join.html

   It is the single source of truth for tokens + components, replacing the
   duplicated <style> blocks currently inlined in each file. Self-contained:
   no @import, no build step — copy to your repo root and link it:

       <link rel="stylesheet" href="/presenze.css">

   Tokens below are the IN's BRAND palette (blue #163a93 + yellow), aligned with
   the company colors and the design system. A calm petrol alternative is kept as
   a commented option block just below.
   ============================================================================ */

/* ============================================================
   0 · TOKENS
   ============================================================ */
:root{
  /* palette BRAND — IN's blue #163a93 + giallo, su neutri iOS (minimal Apple) */
  --bg:#f2f2f7; --card:#ffffff; --ink:#1c1c1e; --muted:#6e6e73; --line:#e4e4ea;
  --accent:#163a93; --accent-soft:#e9edf8;
  --brand:#163a93; --yellow:#ffd200; --yellow-soft:#fff7cc;
  --green:#1a8a5a; --green-soft:#e4f4ec;
  --amber:#9a6a00; --amber-soft:#fbf1d8; --amber-line:#e7c97a;
  --blue:#1f5fb0; --blue-soft:#e6eefb;
  --red:#c4362b; --red-soft:#fbe9e7;
  --gray:#6e6e73; --gray-soft:#ececed;
  --purple:#7a3da6; --purple-soft:#f2e9f8;
  --glass:rgba(242,242,247,.72);
  --r:16px; --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.05);
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.3,.5,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Letta da JS (getComputedStyle) per posizionare popover/sheet senza finire sotto il notch in
     landscape — env() non è altrimenti leggibile da script, solo applicabile via CSS. */
  --safe-l:env(safe-area-inset-left,0px);
}

/* --- OPTION: palette PETROLIO (accento calmo #356a98) ----------------------
   Decommenta per tornare all'accento petrolio attenuato al posto del blu brand.
   Cambiano solo accento/colori funzionali; il resto resta identico.
:root{
  --bg:#eef2f5; --card:#ffffff; --ink:#1b2530; --muted:#586577; --line:#e3e8ee;
  --accent:#356a98; --accent-soft:#e9f1f7;
  --green:#2f9e74; --green-soft:#e4f4ec;
  --amber:#b07d2b; --amber-soft:#f8efda;
  --blue:#356a98; --blue-soft:#e9f1f7;
  --red:#d06a5d; --red-soft:#fbeae7;
  --gray:#69788a; --gray-soft:#eceff3;
  --glass:rgba(238,242,245,.82);
  --shadow:0 1px 2px rgba(27,37,48,.05),0 4px 14px rgba(27,37,48,.06);
}
--------------------------------------------------------------------------- */

[data-theme="dark"]{
  /* dark allineato al blu brand */
  --bg:#0f161e; --card:#1a232e; --ink:#e7edf4; --muted:#94a3b5; --line:#2a3643;
  --accent:#6f9be8; --accent-soft:#1c2b46;
  --brand:#8fb0ee; --yellow:#ffd84d; --yellow-soft:#3a3416;
  --green:#3fb488; --green-soft:#122a22;
  --amber:#d6a34a; --amber-soft:#33290f; --amber-line:#5c4a1c;
  --blue:#6f9be8; --blue-soft:#1c2b46;
  --red:#e0867a; --red-soft:#3a201d;
  --gray:#94a3b5; --gray-soft:#222d39;
  --purple:#b294e0; --purple-soft:#2a2038;
  --glass:rgba(15,22,30,.82);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);
}

/* ============================================================
   1 · BASE RESETS
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Disattiva l'auto-boost del testo di iOS Safari nelle colonne strette (es. griglia orari 7 colonne):
   senza questo, il font supera la dimensione dichiarata in CSS e i numeri vengono tagliati dal box. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overflow-x:hidden}/* niente scroll orizzontale di pagina: i blocchi larghi scorrono dentro .scrollx/.fmscroll */
/* L'header resta sticky in cima: senza riservare il suo spazio, uno scrollIntoView (auto-scroll,
   tap che scorre fino a un elemento) può far finire quell'elemento PROPRIO SOTTO l'header — coperto,
   non toccabile (osservato: righe del Lineare irraggiungibili col dito dopo lo scroll). --hh = altezza
   reale dell'header (varia: nome/indirizzo negozio possono andare a capo su schermi stretti). */
html{scroll-padding-top:var(--hh,64px)}
/* admin reserves space for the fixed tab bar; pages without <nav> keep 40px */
body{padding-bottom:40px}
body:has(nav){padding-bottom:88px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* gli input ereditano il colore testo (altrimenti in dark restano neri = invisibili) */
input,select,textarea{color:var(--ink)}
/* Bug complementare (2026-07, segnalato dall'utente: testo invisibile in dark su una textarea
   fuori da un wrapper .field, es. "Le tue regole" nel dialog Genera): la regola sopra scurisce
   SOLO il testo, mai lo sfondo — i campi dentro <div class="field"> hanno già il loro sfondo
   corretto (.field textarea più sotto), ma una textarea "nuda" (fuori da .field) restava con lo
   sfondo bianco di default del browser + testo chiaro forzato = invisibile. Specificità: questa
   regola vince solo dove NON c'è già una regola più specifica (.field textarea ecc.), quindi non
   tocca nulla che oggi è già temato correttamente. Scoped a textarea (mai su checkbox/radio/altri
   controlli nativi, che non sono mai <textarea>). */
textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;font-family:inherit}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
main,.scrollx,.lin-scroll,.fmscroll,.logwrap{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* --- corporate icon set (inline SVG sprite, classe .ic) --- */
#icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.17em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic.fill{fill:currentColor;stroke:none}
/* varianti dimensione/colore */
.ic.lg{width:1.4em;height:1.4em}
.ic.sm{width:1em;height:1em}
.ic.brand{stroke:var(--brand)} .ic.green{stroke:var(--green)} .ic.amber{stroke:var(--amber)}
.ic.blue{stroke:var(--blue)} .ic.red{stroke:var(--red)} .ic.yellow{stroke:#caa400}

/* ============================================================
   2 · APP CHROME — header, nav, theme + bell, read-only banner
   ============================================================ */
header{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
/* Riga sottile SOPRA il nome negozio: annulla/ripeti/opzioni (2026-07, richiesta esplicita — prima
   erano sovrapposte in alto a destra, ora tornano in flusso normale ma in una riga propria, così
   annulla/ripeti nascosti (.ro-hide) non lasciano un vuoto fisso come con position:absolute). */
.hicons-row{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.hicon-sm{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink)}
.hicon-sm:disabled{opacity:.35}
/* Riga principale: logo+nome a sinistra, orologio grande a destra. */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
/* Altezza = pillola orologio (51px) + gap (6px) + barra Notifiche (29px) = 86px misurati: il logo
   copre l'intera colonna di destra, i due blocchi dell'header hanno la stessa statura (richiesta
   esplicita). Se cambiano padding/font della colonna va rimisurata. */
.brand-logo{height:86px;width:auto;flex:0 0 auto;border-radius:10px}
/* Rinforzo secondario alla barra Notifiche (2026-07): puntino sul logo, come il badge di un'app
   sul telefono. Solo un puntino (non un numero): il conteggio esatto sta già nella barra sotto,
   qui basta il segnale "c'è qualcosa" senza duplicare l'informazione due volte. */
.logo-wrap{position:relative;flex:0 0 auto;line-height:0}
.logo-badge{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:var(--red);border:2px solid var(--bg);display:none}
.logo-badge.on{display:block;animation:badgepop .5s var(--spring)}
@media (prefers-reduced-motion:reduce){.logo-badge.on{animation:none}}
header h1{font-size:19px;border-bottom:2px solid var(--yellow);display:inline-block;padding-bottom:1px}
.cdc{font-size:12px;color:var(--muted);margin-top:2px}
.subhead{margin-top:2px;font-size:13px;color:var(--muted)}
/* Cambio tema chiaro/scuro: azione deliberata e rara (non un poll ripetuto) — sicuro animarla ogni
   volta. Cross-fade dei colori invece dello scatto secco (classe temporanea, rimossa dopo il cambio,
   NON una transizione permanente su tutto il sito: costerebbe repaint inutili durante l'uso normale). */
.theme-transition,.theme-transition *{transition:background-color .35s var(--ease),border-color .35s var(--ease),color .25s var(--ease),box-shadow .35s var(--ease)!important}
.themebtn.spin{animation:themespin .5s var(--spring)}
@keyframes themespin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(160deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}
.themebtn{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:16px;display:grid;place-items:center}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-item:last-child{border-bottom:none}
.notif-item.unseen{background:var(--blue-soft)}
.notif-item .nx{flex:0 0 auto;font-size:18px}
.notif-item .nm{flex:1;font-size:14px;line-height:1.4}
.notif-item .nt{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.bellbtn{position:relative}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
.bellbtn.has{animation:bellpulse 2s ease-in-out infinite}
@keyframes bellpulse{0%,100%{transform:none}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}40%{transform:none}}
/* Rimbalzo a molla sul badge SOLO quando arriva qualcosa di nuovo (non ad ogni poll) — distinto
   dallo scuotimento continuo di .has, che segnala "c'è qualcosa in sospeso" senza soprassalti ripetuti. */
.bell-badge.pop,.notif-count.pop{animation:badgepop .5s var(--spring)}
@keyframes badgepop{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bell-badge.pop,.notif-count.pop{animation:none}}

main{max-width:760px;margin:0 auto;padding:16px}
.role-crew main{max-width:560px}
.view{display:none}.view.on{display:block;animation:viewin .28s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#main>*{animation:viewin .26s var(--ease)}

/* TAB BAR CHE "GALLEGGIA" A META' SCHERMO DURANTE LO SCROLL (iOS) — secondo giro, 2026-08-19.
   Primo giro: transform:translateZ(0) per forzare il proprio layer di composizione. Non e' bastato,
   l'utente lo ha rivisto ("a volte... ma non sempre"). Sospetto rimasto: il backdrop-filter.
   Un blur del retrostante su un elemento FIXED costringe Safari a ricampionare il contenuto dietro
   a ogni frame; durante lo scroll con inerzia il compositore va in ritardo e la barra si vede
   staccata dal fondo finche' lo scroll non si ferma. E' intermittente proprio perche' dipende dal
   carico: pagine lunghe e scroll veloce lo fanno emergere, una lista corta no.
   Qui il frosted viene tolto e il fondo diventa OPACO: si perde la trasparenza, si guadagna una
   barra che non si muove. Il will-change permanente e' tolto con lui (era li' a sostegno del blur,
   e tenuto per sempre costa memoria: translateZ(0) da solo basta a promuovere il layer). */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);
  border-top:1px solid var(--line);display:flex;padding:6px 6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));
  transform:translateZ(0);-webkit-transform:translateZ(0)}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--muted);font-size:11px;font-weight:600;border-radius:12px;transition:color .2s var(--ease),transform .12s var(--ease)}
nav button.on{color:var(--accent)}
nav button:active{transform:scale(.88)}
nav svg{width:23px;height:23px;transition:transform .26s var(--spring)}
nav button.on svg{transform:translateY(-1px) scale(1.08)}


.ro-banner{background:var(--brand);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px 10px}
.am-switch{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);font-size:15px}
.am-switch select{flex:1;min-width:0;min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px;font-weight:650}
.am-switch .am-lab{flex:0 0 auto;color:var(--muted);font-size:13px;font-weight:600}
.linkbtn{border:none;background:none;color:var(--accent);font-weight:650;font-size:13px;cursor:pointer;padding:6px 4px;min-height:44px}

/* ============================================================
   3 · SURFACES — cards, section heads, week bar, misc
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;transition:box-shadow .22s var(--ease)}
.card.pad{padding:14px 16px}
.role-crew .card{padding:16px}
.sec{display:flex;align-items:center;gap:10px;margin:18px 2px 8px}
.sec h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650}
.sectitle,.role-crew .sec{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650;margin:18px 2px 8px}
/* Dashboard dipendente (2026-07) */
.dash-row{display:flex;gap:14px}
.dash-stat{flex:1;text-align:center}
.dash-num{font-size:26px;font-weight:700;line-height:1.1}
.dash-num.warn{color:var(--amber)}
.dash-den{font-size:15px;font-weight:600;color:var(--muted)}
.dash-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.dash-trend{display:flex;align-items:flex-end;gap:8px;height:118px;overflow-x:auto;padding:0 6px 2px}
.dash-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 0 22px;overflow:visible}
.dash-bar-wrap.tap{cursor:pointer}
.dash-bar-wrap.tap:active .dash-bar{background:var(--accent-2,var(--accent));opacity:.7}
.dash-bar-h{font-size:9px;font-weight:650;color:var(--muted);margin-bottom:3px;white-space:nowrap;width:30px;text-align:center;flex:0 0 auto}
.dash-bar{width:12px;min-height:4px;border-radius:4px 4px 0 0;background:var(--accent)}
.dash-bar-lbl{font-size:9px;color:var(--muted);margin-top:4px;writing-mode:vertical-rl;transform:rotate(180deg)}
.dash-gauge{position:relative;height:16px;margin-top:22px}
.dash-gauge-bar{position:absolute;inset:0;border-radius:8px;background:linear-gradient(to right,#4f9d68 0%,#6fae72 25%,#e3c878 45%,#dd9a72 55%,#cf6a63 75%,#c85c5c 100%)}
.dash-gauge-arrow{position:absolute;top:100%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1}
.dash-gauge-arrow.now .dash-gauge-tip{color:var(--ink)}
.dash-gauge-arrow.avg{opacity:.62}
.dash-gauge-tip{font-size:12px;margin-top:-2px}
.dash-gauge-tag{font-size:10px;font-weight:650;color:var(--muted);white-space:nowrap;margin-top:1px}
.dash-gauge-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:2px}
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.weekbar .wk{font-weight:650;font-size:16px}
.weekbar .wsub{font-size:13px;color:var(--muted)}
.arrowbtn{width:40px;height:40px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow);transition:transform .14s var(--ease),box-shadow .18s var(--ease)}
.arrowbtn:active{transform:scale(.96)}.arrowbtn:hover{box-shadow:0 2px 10px rgba(16,21,28,.12)}
.arrowbtn:disabled{opacity:.32;box-shadow:none;cursor:default}.arrowbtn:disabled:active{transform:none}
.empty,.err{text-align:center;color:var(--muted);padding:30px 16px;font-size:14px}
.err{padding:60px 20px}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.riep-leg{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin:8px 2px 0}
.riep-leg span{display:inline-flex;align-items:center;gap:5px}
.riep-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.riep-leg .rl-note{color:var(--muted);opacity:.8;font-style:italic}
/* colori ore per tipo (Riepilogo): in negozio / trasferta out / trasferta in */
.t-out{color:var(--amber)} .t-loc{color:var(--green)} .t-in{color:var(--blue)}
.legend span b{font-weight:700}
.savedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:6px;vertical-align:middle;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--spring)}
.savedot.show{opacity:1;transform:scale(1.25)}
.daytot{font-size:12px;color:var(--muted);text-align:right}

/* ============================================================
   4 · BUTTONS & ACTIONS
   ============================================================ */
.btn{padding:11px 16px;border-radius:11px;font-weight:650;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-in{background:var(--green);color:#fff}
.btn-out{background:var(--red);color:#fff}
.btn-ghost{background:var(--bg);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;padding:10px 14px;min-height:44px}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.action{padding:12px 16px;border-radius:12px;font-weight:650;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:8px;min-height:46px;justify-content:center}
.action.sec2{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.action.wide{width:100%}
.action.danger{color:var(--red);border-color:#e7b0ab}
.bigbtn{flex:1;padding:18px;border-radius:14px;font-weight:750;font-size:19px;color:#fff;border:none}
.bigbtn.in{background:var(--green)}.bigbtn.out{background:var(--red)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.actbtn{display:block;width:100%;margin-top:8px;padding:13px;border-radius:12px;font-weight:650;font-size:15px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.actbtn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.timb-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.toolchip{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.toolchip.danger{color:var(--red);border-color:var(--red-soft)}
.addseg{margin-top:2px;align-self:flex-start;font-size:13px;font-weight:600;color:var(--accent);padding:4px 0}
[data-theme="dark"] .actbtn.primary,[data-theme="dark"] .bigbtn{color:#0f161e}
/* shared press feedback */
.action,.btn,.btn-ghost,.modebtn,.chip,.addseg,.seg .t,.fp .ok,.fp .no,.bigbtn,.actbtn,.toolchip{
  transition:transform .14s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),filter .18s var(--ease)}
.action:active,.btn:active,.btn-ghost:active,.chip:active,.modebtn:active,.addseg:active,.fp .ok:active,.fp .no:active,.bigbtn:active,.actbtn:active{transform:scale(.96)}
.action:hover{filter:saturate(1.05) brightness(1.02)}
.bigbtn:active{filter:brightness(.95)}

/* ============================================================
   5 · STATUS, BADGES, AVATAR
   ============================================================ */
.avatar{flex:0 0 42px;height:42px;width:42px;border-radius:50%;display:grid;place-items:center;font-weight:650;color:#fff;font-size:16px}
.role{font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--gray-soft);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.role.mgr{background:var(--blue-soft);color:var(--blue)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-top:6px;padding:3px 9px;border-radius:99px}
.status .dot{width:8px;height:8px;border-radius:50%}
.st-off{background:var(--gray-soft);color:var(--gray)} .st-off .dot{background:var(--gray)}
.st-on{background:var(--green-soft);color:var(--green)} .st-on .dot{background:var(--green);animation:pulse 1.8s infinite}
.st-done{background:var(--blue-soft);color:var(--blue)} .st-done .dot{background:var(--blue)}
.st-abs{background:var(--amber-soft);color:var(--amber)} .st-abs .dot{background:var(--amber)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,124,90,.45)}70%{box-shadow:0 0 0 7px rgba(14,124,90,0)}100%{box-shadow:0 0 0 0 rgba(14,124,90,0)}}
/* crew app uses slightly larger status + segments (one-handed, on the floor) */
.role-crew .status{margin-top:8px;padding:4px 10px}

/* ============================================================
   6 · TIMBRATURE (admin) — employee rows + time segments
   ============================================================ */
.emp{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:background-color .2s var(--ease)}
.emp.rest{opacity:.62}
.emp-main{flex:1;min-width:0}
.emp-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.emp-name{font-weight:600;font-size:16px}
.plan-line{font-size:13px;color:var(--muted);margin-top:3px}
.emp-act{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.segs{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.seg{display:flex;align-items:center;gap:8px;font-size:14px}
.seg .t{padding:2px 6px;border-radius:8px;background:var(--bg);border:1px solid var(--line);cursor:pointer}
.seg .arr{color:var(--muted)}
.seg .h{margin-left:auto;color:var(--muted);font-size:13px}
.seg .del{color:var(--red);font-size:13px;padding:2px 6px}
.seg .t.ro{cursor:default}
.seg-pending{outline:1.5px solid var(--amber);outline-offset:1px;border-radius:9px}
.seg-flag{font-size:12px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:5px}
.seg-flag.est{color:var(--muted);background:var(--bg)}
.seg-approve{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--amber-soft);border:1px solid var(--amber);border-radius:10px;padding:7px 10px;margin:2px 0 4px}
.seg-approve .action{min-height:34px;padding:6px 12px;font-size:13px}
.ch-reminder{margin-top:12px;padding:11px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);font-weight:700;text-align:center;cursor:pointer}
.ch-note{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-weight:600;font-size:13px}
.role-crew .segs{margin-top:12px;gap:6px}
.role-crew .seg{gap:10px;font-size:16px}
.role-crew .seg .t{padding:4px 10px;border-radius:9px}
.role-crew .seg .h{font-size:14px}
.role-crew .seg .del{padding:4px 8px}
.datepick{margin-top:4px;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.autobanner{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:600;cursor:pointer}
.vday{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:650;color:var(--accent)}
.vday.done{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.vday .action{min-height:40px;padding:9px 14px}
.vday .vlink{background:none;border:none;color:inherit;font-weight:650;text-decoration:underline;cursor:pointer;padding:4px}
.kpibar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.kpi-inps{display:flex;gap:8px;flex-wrap:wrap}
.kpi-inps label{display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted)}
.kpi-inps input{width:96px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.kpi-inps.locked input{opacity:.7}
.kpi-lock{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);border:1px solid #bfe3d2;border-radius:9px;padding:6px 10px;margin-bottom:6px}
.kpi-lock .action{margin-left:auto;padding:5px 10px;min-height:0;font-size:12px}
.kpi-vals{display:flex;gap:16px;flex-wrap:wrap}
.kpi{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:10.5px;font-weight:600;color:var(--muted)}
.kpi b{font-size:15px;color:var(--ink);font-weight:800}
.kpi b.over{color:var(--amber)} .kpi b.under{color:var(--green)}
.emp-tasks{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.emp-task{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 7px}
.emp-task.done{color:var(--green);background:var(--green-soft);text-decoration:line-through}
.emp-task.rim{color:var(--amber);background:var(--amber-soft)}
.emp-task .et-f{font-weight:700;opacity:.85}
.reqrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.reqact{display:flex;gap:6px;flex-shrink:0}
.reqrow .ok{color:#fff;background:var(--green);border-radius:9px;padding:6px 11px;font-weight:650;font-size:13px;border:none}
.reqrow .no{color:var(--red);background:var(--red-soft);border-radius:9px;padding:6px 11px;font-weight:650;font-size:13px;border:none}
.logwrap{max-height:60vh;overflow:auto;margin-bottom:12px}
.logrow{display:flex;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
.logrow:last-child{border-bottom:none}
.logt{flex:0 0 86px;color:var(--muted)}
.log-auto{background:var(--amber-soft);border-radius:8px;color:var(--amber);font-weight:600}

/* ============================================================
   7 · TURNI — planner (griglia + lineare) & objectives
   ============================================================ */
.genbar{display:flex;gap:8px;margin-bottom:12px}
.genbtn{flex:1;padding:11px 14px;border-radius:12px;font-weight:650;font-size:14px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.genbtn.ghost{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.genbtn:active{transform:scale(.96)}
/* Barra generatore ridisegnata: impostazioni raggruppate + unica CTA, distruttivo fuori */
.genwrap{margin-bottom:12px}
.gensetup{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);margin-bottom:8px}
.gensetup-lbl{font-size:12px;font-weight:600;color:var(--muted)}
.gensetup-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.setupchip{flex:1;min-width:96px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;min-height:42px}
.setupchip:active{transform:scale(.96)}
.gencta{width:100%;font-size:16px;min-height:50px}
/* Azione alternativa al CTA (es. "Racconta gli orari"): stessa geometria, gerarchia secondaria (ghost) e respiro dal primario */
.genbtn.gensec{width:100%;margin-top:8px;font-size:15px;min-height:46px;background:var(--card);border:1px solid var(--line);color:var(--accent)}
/* Orologio "timbracartellino": pannello scuro A TUTTA LARGHEZZA in testa alla card (stile lock-screen
   + tabellone Solari): data dentro il pannello, cifre enormi responsive, secondi gialli a foglia */
.fclock{display:flex;flex-direction:column;align-items:center;gap:10px;margin:-16px -16px 14px;padding:20px 10px 18px;background:linear-gradient(180deg,#1d47ab,#163a93);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* La data è larga ESATTAMENTE quanto la riga delle tessere: parole giustificate da bordo a bordo */
.fc-in{display:inline-flex;flex-direction:column;gap:10px;max-width:100%}
.fc-date{align-self:stretch;text-align:justify;text-align-last:justify;-moz-text-align-last:justify;font-size:12.5px;color:rgba(255,255,255,.75);text-transform:uppercase;font-weight:700;letter-spacing:.08em;padding:0 2px}
.fc-row{display:flex;align-items:center;justify-content:center;gap:8px}
.ftile{position:relative;display:inline-block;flex:0 1 auto;min-width:2.05ch;padding:12px 10px;text-align:center;background:rgba(255,255,255,.12);color:#fff;border-radius:14px;font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(46px,16.5vw,66px);line-height:1;letter-spacing:.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);backface-visibility:hidden}
.ftile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(10,26,66,.45)}
.ftile.fsec{font-size:clamp(24px,8.5vw,34px);padding:10px 8px;background:#ffd200;color:#163a93;border-radius:11px}
.ftile.fsec::after{background:rgba(22,58,147,.25)}
.fc-sep{font-size:clamp(34px,12vw,50px);font-weight:800;color:rgba(255,255,255,.5);margin-top:-6px}
.ftile.flap{animation:fcflap .22s ease-in-out}
@keyframes fcflap{0%{transform:perspective(500px) rotateX(0)}50%{transform:perspective(500px) rotateX(-88deg)}100%{transform:perspective(500px) rotateX(0)}}
@keyframes ledblink{0%,49%{opacity:1}50%,100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ftile.flap{animation:none}}
/* Orologio GRANDE accanto al logo (2026-07, richiesta esplicita: "a destra mettiamo l'orologio in
   grande con sotto la data" — sostituisce la barra .mini a tutta larghezza). Pillola scura propria
   (non tocca i bordi dell'header: qui condivide la riga col blocco brand, non è più da sola). */
.fclock.big{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;
  background:linear-gradient(180deg,#1d47ab,#163a93);border-radius:12px;padding:6px 12px}
.fclock.big .fc-row{display:flex;align-items:center;gap:2px}
.fclock.big .ftile{background:none;box-shadow:none;padding:0;min-width:auto;border-radius:0;
  font-size:26px;letter-spacing:.02em;color:#ffd200;text-shadow:0 0 5px rgba(255,210,0,.65),0 0 11px rgba(255,180,0,.35)}
.fclock.big .ftile::after{display:none}
.fclock.big .ftile.fsec{font-size:13px;padding:0 0 0 2px;opacity:.8;align-self:flex-end;margin-bottom:3px}
.fclock.big .fc-sep{font-size:22px;margin-top:0;color:#ffd200;text-shadow:0 0 5px rgba(255,210,0,.65);animation:ledblink 2s step-end infinite}
.fclock.big .fc-date{font-size:9.5px;color:rgba(255,255,255,.8);text-transform:uppercase;font-weight:700;letter-spacing:.05em;text-align:center;text-align-last:center;-moz-text-align-last:center;white-space:nowrap}
/* Colonna orologio+Notifiche (2026-07, HMI richiesta utente): la barra Notifiche NON è più
   edge-to-edge ma esattamente sotto l'orologio e della SUA stessa larghezza — Gestalt "regione
   comune"/prossimità: le due pillole si leggono come un unico blocco elegante a destra, speculare
   al blocco brand (logo + 3 righe) a sinistra. */
.hclock-col{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.notif-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:10px;
  background:var(--gray-soft);color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.notif-bar .notif-count{background:var(--card);color:var(--ink);border-radius:8px;padding:1px 8px;font-weight:800;font-variant-numeric:tabular-nums}
.notif-bar.has{background:var(--red);color:#fff;animation:notifpulse 1.8s ease-in-out infinite}
.notif-bar.has .notif-count{background:rgba(255,255,255,.28);color:#fff}
@keyframes notifpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
/* Banner "nuova versione" — non invasivo: sticky appena sotto l'header (non un popup/alert), un tasto
   Aggiorna fa il reload sul posto (niente uscire e rientrare dall'app), una ✕ per rimandare. */
.verbanner{display:none;align-items:center;gap:8px;position:sticky;top:var(--hh,64px);z-index:25;
  background:var(--accent-soft);color:var(--accent);padding:9px 14px;font-size:13px;font-weight:600;
  border-bottom:1px solid var(--line)}
.verbanner.show{display:flex;animation:verbannerin .4s var(--spring)}
.verbanner span{flex:1;min-width:0}
.verbanner-go{background:var(--accent);color:#fff;border:none;border-radius:99px;padding:6px 14px;font-weight:700;font-size:12.5px;cursor:pointer;flex:0 0 auto}
.verbanner-x{background:transparent;border:none;color:var(--accent);opacity:.65;font-size:15px;cursor:pointer;padding:2px 4px;line-height:1;flex:0 0 auto}
@keyframes verbannerin{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.verbanner.show{animation:none}}
/* Griglia squadra (dip.html): riusa il Lineare; nome+orario su due righe, riga "io" evidenziata */
.lin-name.tg-name{flex:0 0 96px;min-width:96px;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:3px 6px}
.tg-name .tg-n{font-weight:650;font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-io{font-size:9px;font-weight:800;color:#fff;background:var(--accent);border-radius:5px;padding:1px 4px;vertical-align:1px}
.tg-hrs{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:-.02em;max-width:100%;line-height:1.25}
.tg-me .lin-name{background:var(--accent-soft)}
.lin-c.tg-c{cursor:default;height:26px}
.tg-none{padding:10px 12px;font-size:12.5px;color:var(--muted)}
/* Striscia "Adesso" in Timbrature: stato del negozio a colpo d'occhio */
.now-strip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;display:flex;flex-direction:column;gap:5px}
.now-line{font-size:13.5px;display:flex;align-items:center;gap:6px;color:var(--ink);min-width:0}
.now-line b{font-weight:650}
.now-line.g .ic{color:var(--green)}
.now-line.r{color:#c62828;font-weight:600}
[data-theme="dark"] .now-line.r{color:#ff6b60}
.now-line.b .ic{color:var(--accent)}
.now-line.m{color:var(--muted)}
/* Righe sottili (assenti / non previsti) in Timbrature */
.emp-slim{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:8px;font:inherit;color:var(--ink);cursor:pointer}
.emp-slim .avatar{width:28px;height:28px;font-size:13px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700}
.emp-slim .es-n{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-slim .es-l{font-size:12.5px;color:var(--muted)}
.emp-slim.abs .es-l{color:var(--amber);font-weight:600}
.emp-slim .ic{color:var(--muted)}
.nudge-x{margin-left:auto;background:none;border:0;color:inherit;font-size:14px;padding:2px 6px;cursor:pointer}
/* Console god: righe compatte, dot di stato, chips riepilogo (progressive disclosure: azioni nello sheet) */
.godwrap{position:fixed;inset:0;overflow:auto;background:var(--bg);z-index:80;padding:18px 16px calc(40px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.godwrap .god-inner{max-width:620px;margin:0 auto}
.god-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:8px;font:inherit;color:var(--ink);cursor:pointer}
.god-row:active{transform:scale(.985)}
.god-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.god-dot.g{background:var(--green,#34c759)}
.god-dot.a{background:var(--amber,#ff9f0a)}
.god-dot.x{background:#c7c7cc}
.god-main{flex:1;min-width:0}
.god-main .tm-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.god-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}
.god-chip{font-size:12.5px;font-weight:650;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.god-chip b{font-weight:800}
/* Finestra consegna (+4h) nel Lineare: banda grigio chiaro sotto le celle + tacca nell'intestazione ore */
.lin-c.dlv:not(.on):not(.blk){background:rgba(120,120,128,.14)}
.lin-h.dlv{box-shadow:inset 0 -3px 0 rgba(120,120,128,.5)}
.lin-dlv-tag{font-size:11px;font-weight:650;color:var(--muted);background:rgba(120,120,128,.14);border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
/* Riga CTA compatta: Genera (primario) e Racconta (secondario) affiancati */
.genrow{display:flex;gap:8px}
.genrow .gencta{flex:1.7;width:auto}
.genrow .gensec{flex:1;width:auto;margin-top:0;font-size:14px;min-height:50px}
.genwrap .gensetup-chips{margin:0 0 8px}
/* Griglia 2 colonne per gruppi di azioni: il primo .wide occupa tutta la riga */
.rowbtns.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rowbtns.grid2 .wide{grid-column:1/-1}
.dangerzone{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line)}
/* Il rosso era fisso (#b42318) su un fondo --card che di notte diventa blu scuro: illeggibile.
   Col token --red il colore si schiarisce da solo nel tema scuro. Idem per gli ambra qui sotto. */
.danger-btn{background:var(--card);border:1px solid rgba(180,35,24,.4);color:var(--red)}
/* Genera orari (2026-07, HMI): il dialog era un'unica lista piatta di checkbox — "muro di opzioni",
   niente raggruppamento visivo (Gestalt: prossimità), stancante da scorrere. Ogni gruppo tematico
   (modalità, regole, budget, stile) è ora una card a sé con un titolo muto sopra — stesso trattamento
   visivo di `.card` già in uso nell'app, non un componente nuovo — pausa visiva tra un tema e l'altro
   invece di un flusso ininterrotto di controlli. */
.gensec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.gensec-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.gensec .field:last-child{margin-bottom:0}
/* <details class="gensec"> nel foglio Consegne (2026-07): stesso guscio card di .gensec, ma
   collassabile — riduce il muro di campi della schermata "incasinata" segnalata dall'utente a
   una lista di titoli, aperti solo su richiesta. Il triangolo nativo del browser basta, niente
   icona custom. */
details.gensec>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
details.gensec[open]>summary{margin-bottom:10px}
.pallet-result{margin-top:10px;font-size:15px}
.pallet-result b{font-size:20px;color:var(--accent)}
.pallet-pending{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--amber-soft);color:var(--ink)}
.gen-target-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.gen-target-chips .chip{padding:7px 12px;font-size:13px}
.genmode{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.genmode-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.genmode-opt small{color:var(--muted)}
.ord-list{display:flex;flex-direction:column;gap:8px}
.ord-row{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.ord-top{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.ord-on{flex:1;min-width:120px;display:flex;align-items:center;gap:6px}
.ord-top input[type=time]{padding:3px 5px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.ord-top input[type=number]{width:54px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.ord-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ord-day{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--muted)}
.gen-caps{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.gen-caps summary{font-size:13px;font-weight:600;cursor:pointer}
.caps-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cap-row{display:flex;align-items:center;gap:8px;font-size:13px}
.cap-name{flex:1}
.cap-h{width:60px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.cap-none{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.te-head.gen-in,.ls-item.gen-in,.lin-row.gen-in .lin-name{background:rgba(180,96,26,.10)}
.loan-cta{margin-left:auto;font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;border:1px solid rgba(180,96,26,.45);background:var(--card);color:var(--amber);min-height:34px}
/* Guardia di sicurezza: colore dedicato (viola) per distinguerla a colpo d'occhio dal resto della squadra. */
.te-head.guard-row,.ls-item.guard-row,.lin-row.guard-row .lin-name{background:var(--purple-soft)}
.te-head.guard-row .guard-tag,.lin-name .guard-tag{color:var(--purple);font-weight:700;font-size:11px;margin-left:4px}
.te-cell.guard-work{background:var(--purple-soft);border-color:var(--purple)}
.te-cell.guard-work .tm{background:var(--purple);color:#fff}
.te-cell.guard-work .tm i{color:#f2e9f8}
.lin-c.on.guard{background:var(--purple);box-shadow:inset 0 0 0 1.5px var(--purple)}
.loan-cta.sm{padding:3px 8px;min-height:0}
.loan-cta:active{transform:scale(.96)}
.loan-shifts{margin:6px 0 12px;padding-left:18px;font-size:13px;color:var(--ink);max-height:180px;overflow:auto}
.loan-shifts li{margin:2px 0}
.cons-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.cons-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.cons-row span{flex:1;font-weight:600}
.cons-row input[type=time]{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
/* Piano camion della settimana (tab Consegne). Una riga per consegna prevista: giorno e ora
   effettivi a sinistra, cosa e' cambiato rispetto alla regola fissa a destra. */
.cons-wknav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cons-wknav .btn-ghost{min-width:38px;font-size:20px;line-height:1;padding:4px 10px}
.cons-wklbl{flex:1;text-align:center;line-height:1.25}
.cons-wklbl b{display:block}
.cons-wklbl span{font-size:12.5px;color:var(--muted)}
.cons-plan{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cons-day{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:'when ora note' 'act act act';gap:6px 10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.cons-banc{grid-area:ora;text-align:center;line-height:1.1}
.cons-banc b{font-size:20px;font-variant-numeric:tabular-nums}
.cons-banc span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.cons-tot{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding:10px;border-radius:12px;background:var(--accent-soft)}
.cons-tot span{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.cons-tot b{font-size:18px;color:var(--accent);font-variant-numeric:tabular-nums}
.cons-tot i{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--muted)}
.cons-hint-gen{font-size:12.5px;line-height:1.4;color:var(--muted);background:var(--accent-soft);border-radius:10px;padding:8px 10px;margin-top:8px}
.gen-fonte{font-size:12.5px;line-height:1.4;color:var(--muted);background:var(--gray-soft);border-radius:10px;padding:8px 10px;margin-top:12px}
.gen-fonte-warn{background:var(--amber-soft);color:var(--ink);border-left:3px solid var(--amber)}
.gen-fonte-warn .btn-ghost{color:var(--accent);padding-left:0}
/* Fasce di consegna: due giri da due passaggi. I quattro bottoni stanno su due righe
   etichettate, cosi' si legge "che giro" prima di "che ora". */
.cons-slot{font-size:12.5px;color:var(--muted)}
.cons-slot b{color:var(--ink);font-variant-numeric:tabular-nums}
.pc-fasce{display:flex;flex-direction:column;gap:8px}
.pc-giro{display:flex;align-items:center;gap:6px}
.pc-giro>span{flex:0 0 64px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pc-giro .modebtn{flex:1;display:flex;flex-direction:column;gap:1px;padding:8px 6px;line-height:1.15;font-size:11.5px}
.pc-giro .modebtn b{font-size:14px;font-variant-numeric:tabular-nums}
.cons-when{grid-area:when;line-height:1.2}
.cons-when span{display:block;font-size:12px;color:var(--muted)}
.cons-ora{grid-area:ora;font-weight:800;font-variant-numeric:tabular-nums}
.cons-note{grid-area:note;text-align:right;min-width:0}
.cons-notetx{font-size:12.5px;color:var(--muted);margin-top:3px}
.cons-act{grid-area:act;display:flex;gap:8px;justify-content:flex-end}
/* Promemoria e avvisi (Opzioni). I campi di un avviso restano visibili ma spenti quando
   l'interruttore e' off: sparire farebbe saltare il layout a ogni tocco. */
.av-sub{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0 34px}
.av-sub.av-off{opacity:.45}
.av-sub .obj-hint{flex-basis:100%;margin:2px 0 0}
.av-num{width:76px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:16px}
.av-time{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:16px}
.av-suf{font-size:13.5px;color:var(--muted)}
.av-prom{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.av-prom:last-of-type{border-bottom:none}
.av-prom.av-off{opacity:.5}
.av-ptx{flex:1;min-width:0;line-height:1.25}
.av-ptx b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-ptx span{font-size:12.5px;color:var(--muted)}
/* Statistiche colli e bancali (tab Consegne). I KPI riusano lo stile della stampa, ma qui
   servono a schermo: sfondo tenue invece del bordo nero del PDF. */
.st-kpi>div{background:var(--gray-soft);border:none;border-radius:10px;padding:8px 10px}
.st-kpi span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.st-kpi b{font-size:18px;font-variant-numeric:tabular-nums}
.st-reps{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.st-rtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px}
.st-rtop span{color:var(--muted);font-size:12px;text-align:right}
.st-bar{height:7px;border-radius:999px;background:var(--gray-soft);overflow:hidden;margin-top:4px}
.st-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.st-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.st-row:last-child{border-bottom:none}
.st-rd{font-weight:700;min-width:86px}
.st-rv{flex:1;color:var(--muted)}
.straord-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;background:var(--card)}
.straord-q{font-weight:650;margin-bottom:6px}
.straord-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px}
.straord-opt input{width:18px;height:18px}
.modebar{display:flex;gap:6px;background:var(--gray-soft);padding:4px;border-radius:11px;margin-bottom:12px}
.modebtn{flex:1;padding:9px;border-radius:8px;font-weight:600;font-size:14px;color:var(--muted)}
/* Sotto-tab di sezione: fino a 5 voci (HACCP) — scorrono in orizzontale invece di stringersi
   fino a diventare illeggibili sul telefono. */
.subnav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav .modebtn{flex:1 0 auto;white-space:nowrap;padding:9px 12px}
.sn-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:6px;padding:0 4px;border-radius:9px;background:var(--gray-soft);color:var(--muted);font-size:11px;font-weight:700;vertical-align:1px}
.modebtn.on .sn-count{background:rgba(255,255,255,.28);color:#fff}
[data-theme="dark"] .modebtn.on .sn-count{background:rgba(0,0,0,.22);color:#0f161e}
.sn-count.warn{background:var(--red,#b42318);color:#fff}
/* Selezione MARCATA (2026-08-19, segnalazione dell'utente: "l'illuminazione del tasto quando si
   seleziona non si vede bene"). Prima era il segmented control iOS — bianco su grigio chiaro: a
   schermo, di giorno, la differenza col non selezionato era quasi invisibile. Ora il selezionato
   e' pieno d'accento, come gia' faceva .modebtn.linedit.on. */
.modebtn.on{background:var(--accent);color:#fff;box-shadow:var(--shadow);font-weight:700}
/* In tema scuro l'accento e' chiaro: il testo sopra deve tornare scuro, come per .linedit.on. */
[data-theme="dark"] .modebtn.on{background:var(--accent);color:#0f161e}
.obj-card{margin-bottom:12px;padding:12px 14px}
.obj-card summary{font-weight:600;font-size:14px;cursor:pointer}
.obj-hint{color:var(--muted);font-weight:400;font-size:12px}
.ora-list{display:flex;flex-direction:column;gap:10px}
.ora-row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.ora-chk{display:flex;align-items:center;gap:8px;font-size:15px}
.ora-fields{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)}
.ora-fields input[type=time]{color:var(--ink);padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.ora-fields span{margin-left:4px}
.ora-fields.off{opacity:.35;pointer-events:none}
.ora-head{display:flex;align-items:center;gap:12px}
.ora-chk.small{font-size:12px;color:var(--muted)}
.ora-copy{margin-left:auto;font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent)}
.ora-copy:active{transform:scale(.96)}
.ora-pub2grp{display:none;align-items:center;gap:6px}
.ora-row.split .ora-pub2grp{display:inline-flex}
.ora-row.split .ora-publbl::after{content:' (matt.)';color:var(--muted)}
#genOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:saturate(120%) blur(4px);-webkit-backdrop-filter:saturate(120%) blur(4px)}
.gen-card{background:var(--card);border-radius:20px;padding:26px 22px;width:min(360px,86vw);box-shadow:0 18px 50px rgba(0,0,0,.3);text-align:center}
.gen-phrase{font-size:18px;font-weight:700;color:var(--ink);min-height:26px}
.gen-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:16px 0 10px}
.gen-bar>span{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#5b8def);animation:genslide 1.3s ease-in-out infinite}
@keyframes genslide{0%{margin-left:-40%}50%{margin-left:60%}100%{margin-left:100%}}
.gen-sub{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.gen-bar>span{animation:none;width:100%}}
.lav-h{margin:18px 0 4px;font-size:14px;font-weight:700}
.lav-grid{display:flex;gap:10px;flex-wrap:wrap}
.lav-grid .field{flex:1;min-width:140px}
.pallet-cats{display:flex;gap:10px;flex-wrap:wrap}
.pallet-cats .field{flex:1;min-width:130px}
.lav-grid .field input{width:70px}
.lav-reps{display:flex;flex-direction:column;gap:6px}
.lav-rep{display:flex;align-items:center;gap:8px;font-size:13px}
.lav-rep span{flex:1}
.lav-rep input{width:64px}
.lav-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lav-day{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.fab-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0;font-size:13px}
.fab-brush{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);font-weight:700}
.fab-brush.on{outline:2px solid var(--accent);outline-offset:1px}
.fab-act{margin-left:4px;font-size:12px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent)}
.fab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;padding:4px;touch-action:pan-x pan-y}
.fab-wrap.painting{touch-action:none}
.fab-act.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ext-head td{background:rgba(180,96,26,.08);font-weight:600;font-size:12px;color:var(--amber);padding-top:8px}
.ext-row td{color:var(--muted);font-style:italic}
.ext-tag{font-size:10px;font-weight:700;font-style:normal;background:rgba(180,96,26,.14);color:var(--amber);padding:1px 6px;border-radius:6px;margin-left:4px}
.riepnote-card{margin-bottom:12px}
.riepnote-card summary{font-weight:600;font-size:14px;cursor:pointer}
.riepnote-list{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.5}
.riepnote-ev{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px}
.riepnote-add{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:12px;color:var(--muted)}
.riepnote-add input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.inc-tbl{margin-top:0}
.inc-in{width:62px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-size:13px;color:var(--ink);text-align:right}
.inc-src{display:inline-block;margin-left:3px;font-size:9px;font-weight:700;color:var(--muted);vertical-align:top}
.inc-pend{margin-bottom:12px;border:1px solid rgba(26,138,90,.35)}
.inc-pend-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.inc-pend-row .ipr-d{flex:1;min-width:140px}
.inc-pend-row .action{padding:6px 12px;min-height:36px}
.action.sec3{background:var(--ok,#1a8a5a);color:#fff}
.fab-row{display:flex;gap:1px}
.fab-daylbl{flex:0 0 34px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.fab-h{flex:0 0 18px;font-size:9px;text-align:center;color:var(--muted)}
.fab-c{flex:0 0 18px;height:24px;display:flex;align-items:center;justify-content:center;font-size:10px;border-radius:3px;cursor:pointer;user-select:none;border:1px solid var(--line)}
.fab-head .fab-c{cursor:default}
.obj-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.obj-row label{flex:0 0 38px;font-size:12px;color:var(--muted);font-weight:600}
.obj-row input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:16px;background:var(--bg)}
.te-emp{padding:12px 14px;border-bottom:1px solid var(--line)}
.te-emp:last-child{border-bottom:none}
.te-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;min-width:0}
.te-head .cohrs{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.reqmerge{margin-top:6px}
.reqmerge select{width:100%;padding:8px;border:1px solid var(--line);border-radius:9px;font-size:16px;background:var(--bg);color:var(--ink)}
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:var(--card);box-shadow:0 3px 12px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);opacity:0;transition:opacity .2s var(--ease,ease);z-index:9000;pointer-events:none}
.ptr .pi{display:block;line-height:1}
.ptr.spin{opacity:1!important}
.ptr.spin .pi{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.yearfilter{display:flex;gap:8px;margin:0 0 10px}
.yearfilter .yf{flex:1;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-weight:700;font-size:14px}
.yearfilter .yf.on{background:var(--accent,#0e7c5a);color:#fff;border-color:transparent}
.yeartoggle{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px}
.yeartoggle .yt-y{font-size:20px;font-weight:800;min-width:72px;text-align:center;font-variant-numeric:tabular-nums}
.yeartoggle .yt-arrow{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow)}
.yeartoggle .yt-arrow:disabled{opacity:.35}
.pubbar{margin:10px 0}
.pubbar .pub{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.pubbar .pub>span{font-size:13px;color:var(--muted);font-weight:600}
.pubbar .pub.on{background:var(--green-soft);border-color:#bfe3d2}
.pubbar .pub.on>span{color:var(--green)}
.te-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:10px}
.te-day{text-align:center;min-width:0;display:flex;flex-direction:column}
.te-day .dl{font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;line-height:1.15}
.te-day .dl .dnum{display:block;font-size:11px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.te-cell{border:1px solid var(--line);border-radius:10px;padding:7px 1px;min-height:50px;flex:1;background:var(--bg);width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;overflow:hidden;text-align:center;transition:background-color .12s var(--ease),box-shadow .12s var(--ease)}
.te-cell .tm,.te-cell .cd,.te-cell .trbadge{max-width:100%}
.te-cell .empty-d{color:var(--muted);font-size:15px}
.te-cell .tm{display:block;width:fit-content;max-width:100%;margin:1px auto;background:var(--green-soft);border-radius:7px;padding:2px 3px;font-variant-numeric:tabular-nums;font-weight:700;font-size:11px;letter-spacing:-.03em;line-height:1.2;color:var(--green)}
.te-cell .tm i{display:block;font-style:normal;font-weight:600;font-size:10px;letter-spacing:-.03em;color:#3a8d6b}
.te-cell .cd{font-weight:800;font-size:15px;letter-spacing:.02em}
.te-cell.code-R{background:var(--gray-soft)} .te-cell.code-R .cd{color:var(--gray)}
.te-cell.code-F{background:var(--blue-soft)} .te-cell.code-F .cd{color:var(--blue)}
.te-cell.code-M{background:var(--red-soft)} .te-cell.code-M .cd{color:var(--red)}
.te-cell.code-P{background:var(--amber-soft)} .te-cell.code-P .cd{color:var(--amber)}
.te-cell.code-V{background:var(--accent-soft)} .te-cell.code-V .cd{color:var(--accent)}
.te-cell.work{background:var(--card);border-color:#bfe3d2}
.te-cell.work.tr{background:var(--card);border-color:var(--amber-line)}
.te-cell.work.tr .tm{color:var(--amber)} .te-cell.work.tr .tm i{color:#b07d12}
.te-cell.work.tr-in{background:var(--card);border-color:#eab8b3}
.te-cell.work.tr-in .tm{color:var(--red)} .te-cell.work.tr-in .tm i{color:#8a2018}
.te-cell .trbadge{display:block;font-size:8.5px;font-weight:700;color:var(--amber);margin-top:1px;line-height:1.1}
.te-cell .trbadge.in{color:var(--red)}
/* trasferta PER FASCIA: pillola colorata sul singolo segmento orario */
.te-cell .tm.tr{background:var(--amber-soft);border-radius:7px;padding:2px 6px}
.te-cell .tm.tr,.te-cell .tm.tr i{color:var(--amber)}
.te-cell .tm.tr-in{background:var(--red-soft);border-radius:7px;padding:2px 6px}
.te-cell .tm.tr-in,.te-cell .tm.tr-in i{color:var(--red)}
.te-cell:active{transform:scale(.97)}
.trsw{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.trsw input{width:20px;height:20px}
.lin-summary{position:sticky;top:var(--hh,64px);z-index:6;background:var(--bg);display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ls-item{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;box-shadow:var(--shadow)}
.ls-n{font-weight:650}.ls-h{color:var(--muted)}
.ls-d{font-weight:800;padding:1px 6px;border-radius:7px}
.ls-d.over{color:var(--amber);background:var(--amber-soft)}
.ls-d.under{color:var(--red);background:var(--red-soft)}
.ls-d.ok{color:var(--green);background:var(--green-soft)}
.lin-day-block{margin-bottom:16px}
.lin-day-title{font-size:14px;font-weight:650;margin:0 0 6px 2px}
.lin-day-title span{color:var(--muted);font-weight:400;font-size:13px}
/* Squadra (dipendente): giorno di oggi evidenziato, l'app apre già scrollata lì. */
/* Rosso FISSO (non legato al tema): in dark mode --accent diventa un blu chiaro tenue e sparisce —
   qui serve un colore che esalti sempre, uguale in chiaro/scuro. Marca l'INTERA riga del giorno. */
.tg-today{scroll-margin:14px;background:rgba(255,59,48,.12);border-left:4px solid #ff3b30;border-radius:10px;padding:8px 6px 2px 9px;margin-left:-9px;margin-right:-6px}
.tg-todaytag{background:#ff3b30;color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.03em;vertical-align:middle;margin-right:2px}
.lin-grid{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.lin-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.lin-row:last-child{border-bottom:none}
.lin-name{flex:0 0 100px;min-width:100px;background:var(--card);border-right:1px solid var(--line);font-size:12px;font-weight:600;text-align:left;padding:0 6px;display:flex;align-items:center;gap:4px;overflow:hidden}
/* Nota privata del gestore su quel giorno×dipendente: solo un cenno visivo passivo (niente nuovo
   elemento nel flusso, la colonna è già stretta) — striscia ambra a sinistra della colonna nome. */
.lin-row.has-note .lin-name{box-shadow:inset 3px 0 0 var(--amber)}
/* In modifica compare anche il selettore codice (R/F/M/P/V) nella stessa colonna: senza più
   spazio il nome si schiacciava fino a una sola lettera ("B", "M"…), illeggibile per capire
   chi si sta modificando. Colonna più larga SOLO in modalità modifica. */
#turniEditor.editing .lin-name{flex-basis:150px;min-width:150px}
/* Colonna NOME e colonna ORE affiancate (non impilate): il nome tronca con l'ellissi se serve,
   ma le ore hanno SEMPRE la loro larghezza riservata — non vengono mai schiacciate via. */
.lin-nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lin-name .lh{flex:0 0 auto;margin-left:0;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.lin-head{height:20px}.lin-head .lin-name{background:var(--bg)}
.lin-cells{display:flex;flex:1;min-width:0;touch-action:pan-y}/* default: scorri la pagina; si dipinge solo in modalità modifica */
#turniEditor.editing .lin-cells{touch-action:none}
.lin-editbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:6px 2px;border-radius:12px;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
/* Modalità modifica ATTIVA: segnale marcato e inequivocabile (2026-07, richiesta esplicita) — non solo
   il pallino/testo piccolo di prima, ma una barra piena colorata (stesso trattamento di un banner di
   stato), il pulsante flottante che pulsa, e un contorno più netto sulle griglie dei giorni. */
#turniEditor.editing .lin-editbar{background:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.18);padding:10px 14px}
#turniEditor.editing .lin-edithint{color:#fff;font-weight:700}
[data-theme="dark"] #turniEditor.editing .lin-edithint{color:#0f161e}
/* pulsante modifica galleggiante, sempre a portata di mano mentre si scorre */
.editfab{position:fixed;right:16px;bottom:calc(100px + env(safe-area-inset-bottom));z-index:35;height:50px;padding:0 20px;border-radius:25px;background:var(--accent);color:#fff;font-weight:750;font-size:15px;box-shadow:0 8px 22px rgba(0,0,0,.28);display:flex;align-items:center;gap:8px}
.editfab.on{background:var(--green);animation:editfabpulse 1.8s ease-in-out infinite}
@keyframes editfabpulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 0 rgba(20,150,80,.45)}50%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 9px rgba(20,150,80,0)}}
@media (prefers-reduced-motion: reduce){.editfab.on{animation:none}}
.editfab:active{transform:scale(.95)}
[data-theme="dark"] .editfab{color:#0f161e}
.modebtn.linedit{border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft)}
.modebtn.linedit.on{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .modebtn.linedit.on{color:#0f161e}
.lin-edithint{font-size:12px;color:var(--muted);flex:1;min-width:140px;transition:color .2s var(--ease)}
#turniEditor.editing .lin-c{cursor:cell}
#turniEditor.editing .lin-grid{box-shadow:0 0 0 2.5px var(--accent)}
#turniEditor:not(.editing) .lin-c{cursor:default}
.lin-c{flex:1;min-width:0;height:30px;border-right:1px solid var(--line);cursor:pointer;transition:background-color .12s var(--ease),box-shadow .12s var(--ease)}
.lin-c:last-child{border-right:none}
.lin-c.hr{border-left:1px solid #cfd5dc}
.lin-c.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lin-c.on.tr{background:var(--amber-soft);box-shadow:inset 0 0 0 1.5px var(--amber)}
.lin-c.on.tr-in{background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px var(--blue)}
.lin-c.blk{background:repeating-linear-gradient(45deg,#fde2e0,#fde2e0 3px,#fff 3px,#fff 6px)}
.lin-c.on.blk{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--red)}
/* EFFETTIVO (timbrature reali) nelle tabelle turno: verde PIENO = realtà, distinto dal previsto (tenue/contornato).
   Griglia: cella verde piena + pallino; Lineare: barre verdi piene. Il previsto resta il riferimento in modifica. */
.te-cell.work.eff{border-color:var(--green);background:var(--green-soft)}
.te-cell.work.eff .tm{background:var(--green);color:#fff}
.te-cell.work.eff .tm i{color:#eafaf2}
.te-cell .eff-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;margin:0 auto 1px}
.te-cell .tm .open{color:var(--yellow);font-weight:700;background:var(--brand);border-radius:5px;padding:0 3px}
.te-cell .tm.pend{outline:1.5px dashed var(--amber);outline-offset:1px}
.te-cell .prev-hint{display:block;font-size:8.5px;color:var(--muted);font-weight:600;margin-top:1px;letter-spacing:-.02em;line-height:1.15}
.te-head .hdone{color:var(--green)}
.lin-c.on.eff{background:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.lin-name .lh.eff{color:var(--green);font-weight:700}
.lin-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.lin-legend .lg{width:12px;height:12px;border-radius:3px;display:inline-block;vertical-align:middle}
.lin-legend .lg-prev{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lin-legend .lg-eff{background:var(--green);margin-left:8px}
/* riga Lineare: nome (bottone) + selettore codice assenza */
/* Colonna nome + colonna ore affiancate dentro il pulsante (HMI: due colonne separate, non
   testo impilato) — la larghezza delle ore è riservata (.lh flex:0 0 auto) e non si schiaccia
   mai via, il nome tronca con l'ellissi se serve più spazio. */
.lin-nbtn{flex:1;min-width:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ink);text-align:left;padding:0;display:flex;flex-direction:row;align-items:center;gap:4px;overflow:hidden;cursor:pointer}
.lin-code{flex:0 0 auto;font-size:10px;line-height:1;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--muted);padding:1px;max-width:36px}
#turniEditor:not(.editing) .lin-code{display:none}
.lin-cells.lin-codespan{align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
/* riga intera tinta quando c'è un codice o è "staccato dal piano" */
.lin-row.code-R{background:var(--gray-soft)} .lin-row.code-R .lin-codespan{color:var(--gray)}
.lin-row.code-F{background:var(--blue-soft)} .lin-row.code-F .lin-codespan{color:var(--blue)}
.lin-row.code-M{background:var(--red-soft)} .lin-row.code-M .lin-codespan{color:var(--red)}
.lin-row.code-P{background:var(--amber-soft)} .lin-row.code-P .lin-codespan{color:var(--amber)}
.lin-row.code-V{background:var(--accent-soft)} .lin-row.code-V .lin-codespan{color:var(--accent)}
.lin-row.lin-staccato{background:var(--amber-soft)} .lin-row.lin-staccato .lin-codespan{color:var(--amber)}
/* Squadra dipendente: chi non ha turno né codice assenza oggi non sparisce più (prima "perché non
   vedo X?"), riga minimale e defilata invece della barra oraria colorata delle colleghe in turno. */
.lin-row.tg-off{opacity:.62} .lin-row.tg-off .lin-codespan{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none}
.lin-row.code-R .lin-name,.lin-row.code-F .lin-name,.lin-row.code-M .lin-name,.lin-row.code-P .lin-name,.lin-row.code-V .lin-name,.lin-row.lin-staccato .lin-name{background:transparent}
/* riga compiti (mansioni con fascia) sotto gli orari */
/* Riga trasferta: destinazione/provenienza su riga propria a tutta larghezza, mai incollata alla
   stretta colonna ore (prima "Kezia → 449 Fratti" ci finiva tutto assieme e il nome si troncava). */
.lin-trasfrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.lin-taskrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.lin-task{font-size:10.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 6px}
.lin-task.ed{cursor:pointer}
.lin-addtask{font-size:10.5px;font-weight:650;color:var(--muted);background:none;border:1px dashed var(--line);border-radius:6px;padding:1px 6px;cursor:pointer}
.lin-h{flex:1;min-width:0;font-size:9px;color:var(--muted);position:relative;text-align:center}
.lin-h.hr{border-left:1px solid #cfd5dc}
.lin-h span{position:absolute;left:0;top:5px;transform:translateX(-50%);white-space:nowrap}

/* ============================================================
   8 · TABLES — riepilogo + registro
   ============================================================ */
.scrollx{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
/* Colonna nomi VERA e fissa fuori dallo scroll orizzontale — non più position:sticky su un <td>.
   Due tentativi CSS (border-collapse:separate, poi overflow-y+layer dedicato+prefisso webkit) non
   hanno risolto su Safari/iOS reale (bug del motore, mai realmente affidabile per sticky dentro una
   tabella scrollabile). Soluzione strutturale: due <table> affiancate in un flex — una piccola FISSA
   con solo la colonna nomi, una che scorre con tutti i dati — stesse altezze riga "gratis" perché
   entrambe usano lo stesso padding/font-size, nessun testo multi-riga. .tsplit avvolge le due
   tabelle di ciascun Riepilogo/Registro/calendario Ferie; .tfix è quella non scrollabile. */
.tsplit{display:flex;overflow:hidden}
.tsplit>.tfix{flex:0 0 auto;border-right:1px solid var(--line)}
.tsplit>.scrollx{flex:1;min-width:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
/* Nella tabella fissa width:100% si riferisce alla larghezza LIBERA nel flex, non al contenuto:
   la spingerebbe a occupare quasi tutto lo spazio (flex-basis risolto da width) lasciando la
   tabella scorrevole a 0px. Qui deve restare larga solo quanto il suo contenuto (nome). */
.tbl.tfix{width:auto}
.tbl th,.tbl td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line)}
.tbl th{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:650;letter-spacing:.03em}
.tbl td.name,.tbl th.name{text-align:left;font-weight:600;background:var(--card);max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tr.tot td{font-weight:700;border-top:2px solid var(--line)}
.diff-pos{color:var(--green)} .diff-neg{color:var(--red)}
.reg{border-collapse:separate;border-spacing:0;font-size:12px}
.reg.tfix{min-width:0} .tsplit .reg:not(.tfix){min-width:820px}
.reg th,.reg td{border:1px solid var(--line);padding:0;text-align:center;white-space:nowrap}
.reg thead th{background:var(--gray-soft);font-size:9.5px;text-transform:uppercase;font-weight:700;color:var(--muted);padding:5px 6px;line-height:1.15}
.reg thead .grp{background:var(--blue-soft);color:var(--blue);font-size:9px;letter-spacing:.03em}
.reg td.wk{font-weight:700;padding:6px 8px;background:var(--card)}
.reg td.auto{background:var(--accent-soft);font-weight:700;color:var(--ink);padding:6px 8px;font-variant-numeric:tabular-nums}
.reg td.straor{background:var(--amber-soft);color:var(--amber);font-weight:800}
.reg td.man input{width:54px;border:none;background:transparent;text-align:center;padding:6px 2px;font:inherit;font-variant-numeric:tabular-nums}
.reg td.man input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--card);border-radius:4px}
.reg td.man.autorol{background:var(--accent-soft)}
.reg td.man.autorol input::placeholder{color:var(--accent);opacity:1;font-weight:700}
.reg td.valcell{padding:5px 7px;white-space:normal}
.reg td.wkval.done{background:var(--green-soft);color:var(--green)}
.vbtn{padding:6px 11px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.vbtn.done{background:var(--green-soft);color:var(--green);border:1px solid var(--green)}
.vdrift{font-size:10px;color:var(--amber);margin-top:3px;max-width:130px;line-height:1.25}
.vlink{color:var(--accent);font-weight:700;text-decoration:underline;font-size:10px}

/* ============================================================
   9 · FERIE — pending rows + year calendar
   ============================================================ */
.fp{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.fp:last-child{border-bottom:none}
.fp-main{flex:1}.fp-main .sub{font-size:12px;color:var(--muted)}
.fp .ok{color:#fff;background:var(--green);border-radius:9px;padding:7px 12px;font-weight:650;font-size:13px}
.fp .no{color:var(--red);background:var(--red-soft);border-radius:9px;padding:7px 12px;font-weight:650;font-size:13px}
.fmonth{margin-bottom:14px}
.fmtitle{font-weight:700;font-size:14px;margin:0 0 6px 2px;text-transform:capitalize}
.fmscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--card)}
/* Calendario ferie interattivo: stesso split fisso+scorrevole di .tbl/.reg sopra, il bordo/raggio
   "da card" che prima stava su .fmscroll ora avvolge le due tabelle insieme. */
.fmwrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.fmwrap .scrollx{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.fcal{border-collapse:separate;border-spacing:0;font-size:11px}
.fcal th,.fcal td{border:1px solid var(--line);text-align:center;min-width:23px;width:23px;height:27px;padding:0}
.fcal th .wl{display:block;font-size:8px;color:var(--muted);font-weight:500}
.fcal th.wkh{font-size:8.5px;font-weight:800;color:var(--accent);background:var(--accent-soft);letter-spacing:.02em;height:16px}
.fcal th.we,.fcal td.we{background:var(--bg)}
.fcal td.nm,.fcal th.nm{background:var(--card);text-align:left;padding:0 8px;min-width:96px;width:96px;max-width:96px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcal td.c{cursor:pointer}
.fcal td.app{background:var(--green);color:#fff;font-weight:800}
.fcal td.req{background:var(--amber);color:#fff;font-weight:800}
.fcal td.tot,.fcal th.tot{font-weight:700;background:var(--gray-soft);min-width:32px}

/* ============================================================
   10 · TEAM — roster rows
   ============================================================ */
.tm{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.tm:last-child{border-bottom:none}
.tm-main{flex:1}.tm-sub{font-size:13px;color:var(--muted)}

/* ============================================================
   11 · SHEET / MODAL + form fields + chips
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(16,21,28,.4);z-index:90;display:none;align-items:flex-end;justify-content:center;transition:background .25s var(--ease)}
.scrim.on{display:flex}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));animation:sheetup .32s var(--spring);max-height:88vh;overflow:auto}
/* Popover della campanella: nasce dal pulsante bell (alto a destra), non un foglio da basso schermo. */
.bell-scrim{position:fixed;inset:0;background:rgba(16,21,28,.22);z-index:68;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.bell-scrim.on{opacity:1;pointer-events:auto}
.bell-pop{position:fixed;top:64px;right:12px;z-index:69;
  width:min(440px,calc(100vw - 20px));max-height:min(80vh,660px);overflow:auto;
  background:var(--card);border-radius:16px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);
  transform-origin:top right;transform:scale(.92) translateY(-4px);opacity:0;pointer-events:none;
  transition:transform .18s var(--ease),opacity .15s var(--ease)}
.bell-pop.on{transform:scale(1) translateY(0);opacity:1;pointer-events:auto;
  /* Entrata a molla più lenta e vivace; l'uscita (regola sopra, applicata quando .on viene tolta)
     resta rapida — un popover che si chiude di scatto si percepisce più reattivo di uno che indugia. */
  transition:transform .34s var(--spring),opacity .2s var(--ease)}
@media (min-width:600px){.bell-pop{width:min(480px,calc(100vw - 20px))}}
.bell-pop::before{content:'';position:absolute;top:-6px;right:18px;width:12px;height:12px;background:var(--card);transform:rotate(45deg);border-radius:2px}
.bell-pop h3{font-size:17px;margin-bottom:12px}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.sheet h3{font-size:18px;margin-bottom:14px}
.field{margin-bottom:12px}
.field.deleg-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);color:var(--ink);font-family:inherit;box-sizing:border-box}
.field textarea{resize:vertical;min-height:64px}
.bc-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px}
.bc-card{background:var(--card);border-radius:16px;padding:20px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:bcpop .34s var(--spring)}
@keyframes bcpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.bc-card .bc-h{font-weight:800;font-size:17px;margin-bottom:10px}
.bc-card .bc-body{font-size:15px;line-height:1.5;color:var(--ink);margin-bottom:16px;white-space:pre-wrap}
.bc-banner{background:var(--accent,#0e7c5a);color:#fff;border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px;margin-bottom:12px;cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s var(--ease)}
.bc-banner:active{transform:scale(.98)}
/* Note del turno precedente: tint d'attenzione (ambra), distinto dal messaggio del responsabile (accent) */
.bc-banner.nota{background:var(--amber-soft);color:var(--amber);box-shadow:var(--shadow)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.field .trsw input{width:20px;height:20px;padding:0;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trow{display:flex;gap:10px;margin-bottom:10px;align-items:center}
.trow input{padding:12px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);color:var(--ink)}
.trow input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.trow .pl-tn{flex:1;min-width:0}
.trow .pl-tf{width:112px;text-align:center}
.trow .pl-th{width:72px;text-align:center}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:600}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-prev{width:64px;height:48px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--bg);font-size:10px;color:var(--muted)}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
/* crew chiusura form fields */
.cf{margin:10px 0}.cf label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
/* Spiegazione sotto un campo della chiusura turno: i due importi (incasso del turno vs totale
   della giornata) sembravano intercambiabili e non lo sono — solo il secondo arriva al gestore. */
.cf-hint{display:block;font-size:12px;line-height:1.35;color:var(--muted);font-weight:400;margin-top:4px}
.cf input,.cf textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--bg);color:var(--ink)}
.cfck{display:flex;align-items:center;gap:8px;font-size:15px;margin:6px 0}.cfck input{width:20px;height:20px}

/* ============================================================
   12 · AUTH GATE
   ============================================================ */
#authGate{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top))}
.auth-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px;text-align:center}
.auth-logo{height:46px;margin-bottom:10px}
.auth-card h2{font-size:19px;margin-bottom:4px}
.auth-card input{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);margin-top:10px}
.auth-card input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.auth-err{color:var(--red);font-size:13px;min-height:16px;margin-top:8px}

/* ============================================================
   13 · CREW (dip.html) — today plan, week, tasks, history, disp
   ============================================================ */
.oggi-plan{font-size:14px;color:var(--muted)} .oggi-plan b{color:var(--ink)}
.seg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.segchip{font-weight:700;font-size:14px;color:var(--green);background:var(--green-soft);border:1px solid #bfe3d2;border-radius:9px;padding:4px 10px;font-variant-numeric:tabular-nums}
.segchip.tr{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.segchip.tr-in{color:var(--blue);background:var(--blue-soft);border-color:#9db8e6}
.segchip b{font-weight:800}
/* slide-to-punch: timbra trascinando come il cartellino */
.slidepunch{position:relative;height:62px;margin-top:14px;border-radius:15px;overflow:hidden;background:var(--bg);border:1px solid var(--line);user-select:none;touch-action:none;isolation:isolate}
.sp-in{background:var(--green-soft);border-color:#bfe3d2}
.sp-out{background:var(--red-soft);border-color:#e7b0ab}
/* Sfumatura reattiva: si illumina progressivamente verso il pollice man mano che trascini (2026-07,
   scelta dal gestore tra 3 varianti provate su un artifact interattivo — "trascinamento reattivo" +
   "conferma con carattere" insieme). Il gradiente dà la sensazione di "caricare" il gesto, non solo
   di spostare un tasto; l'opacità/ombra vengono poi animate via JS in base alla % di trascinamento
   (initSlide in dip.html), qui solo i colori base.
*/
.sp-fill{position:absolute;top:0;bottom:0;width:0;opacity:.45;transition:width .04s linear}
.sp-in .sp-fill{left:0;background:linear-gradient(90deg,var(--green),#5fd3a5)}
.sp-out .sp-fill{right:0;background:linear-gradient(90deg,#f0a89d,var(--red))}
.slidepunch.dragging .sp-fill{transition:none}
.sp-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink);pointer-events:none;padding:0 10px;text-align:center}
.sp-thumb{position:absolute;top:5px;width:52px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#fff;box-shadow:var(--shadow);touch-action:none;transition:box-shadow .1s linear,transform .18s var(--spring)}
.sp-in .sp-thumb{left:5px;background:var(--green)} .sp-out .sp-thumb{right:5px;background:var(--red)}
.slidepunch.done .sp-label{opacity:0}
.slidepunch.done .sp-thumb{transform:scale(1.1)}
/* Anello che si espande dal centro del pollice al completamento — il "click" meccanico della conferma. */
.sp-ring{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;opacity:0}
.sp-in .sp-ring{background:var(--green)}
.sp-out .sp-ring{background:var(--red)}
.slidepunch.done .sp-ring{animation:spRing .65s var(--ease) forwards}
@keyframes spRing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(11)}}
/* Conferma "wow" della timbratura: azione più frequente e più importante dell'app dipendente,
   merita il tocco più curato. Spunta a molla al posto della sola etichetta che sparisce. */
.sp-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;opacity:0;pointer-events:none;animation:checkpop .55s .12s var(--spring) forwards}
.sp-check svg{width:26px;height:26px}
@keyframes checkpop{0%{opacity:0;transform:scale(.35)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.slidepunch.done .sp-ring{animation:none}.slidepunch.done .sp-thumb{transform:none}}
/* tab bar dipendente in basso */
/* Stesso trattamento della nav gestore: niente backdrop-filter su un elemento fixed. */
.dipnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);
  border-top:1px solid var(--line);display:flex;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;
  transform:translateZ(0);-webkit-transform:translateZ(0)}
.dipnav .ni{font-size:21px;line-height:1}
/* Tab attivo: pillola col bordo verde (accento proprio dell'app dipendente, non il blu admin —
   replica del mockup fornito dall'utente). Scoped a .dipnav: l'app gestore non è toccata. */
.dipnav button.on{color:var(--green);margin:0 3px;border:1.5px solid var(--green);border-radius:14px;background:var(--card)}
.dipnav button:not(.on){border:1.5px solid transparent;margin:0 3px}
.wk-day{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.wk-day:last-child{border-bottom:none}
.wk-d{flex:0 0 64px}.wk-d .n{font-weight:650;font-size:14px}.wk-d .dt{font-size:12px;color:var(--muted)}
.wk-orari{flex:1}.wk-orari .tm{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.trtag{display:inline-block;font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-soft);border-radius:6px;padding:1px 6px;margin-left:2px}
.trtag.in{color:var(--blue);background:var(--blue-soft)}
.oggi-plan .trtag{font-size:12px}
.wk-orari .cd{font-weight:700;padding:2px 8px;border-radius:7px;font-size:13px}
.cd-R{background:var(--gray-soft);color:var(--gray)} .cd-F{background:var(--blue-soft);color:var(--blue)}
.cd-M{background:var(--red-soft);color:var(--red)} .cd-P{background:var(--amber-soft);color:var(--amber)} .cd-V{background:var(--accent-soft);color:var(--accent)}
.wk-obj{font-size:12px;color:var(--muted);margin-top:2px}
.wk-today{background:var(--green-soft)}
/* Bacheca (report/foto dal gestore), sola lettura in home dipendente. */
.news-item{padding:12px 14px;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none}
.news-photo{width:100%;max-height:200px;object-fit:cover;border-radius:10px;margin-bottom:8px;display:block}
.news-text{font-size:13px;color:var(--muted);margin-top:3px;white-space:pre-wrap}
.news-date{font-size:11px;color:var(--muted);margin-top:6px}
/* Arrivo dalla notifica in campanella: breve sfondo evidenziato sulla riga esatta (post bacheca o
   riga cambio turno), così si capisce quale delle tante è quella appena notificata (altrimenti si
   finisce nel mezzo di una lista senza sapere quale riga guardare). Selettore generico (non più
   scoped a .news-item): riusato anche per le righe .hday del Cambio turno. */
.news-flash{animation:newsflash 1.6s var(--ease)}
@keyframes newsflash{0%,100%{background:transparent}15%{background:var(--accent-soft)}}
.compiti{margin-top:12px;background:var(--blue-soft);border-radius:11px;padding:10px 12px}
.ctitle{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.crow{display:flex;align-items:center;gap:8px;font-size:15px;padding:5px 0;transition:background-color .12s var(--ease)}
.crow .cn{flex:1}
.crow.cdone .cn{text-decoration:line-through;color:var(--muted)}
.crow .core{color:var(--muted);font-weight:600;font-size:13px}
/* Il quadratino restava di 26px, ma l'area toccabile ora arriva a 44px con un padding trasparente
   (min iOS/Material): spuntare un compito col pollice non deve richiedere mira. */
.tck{width:26px;height:26px;flex:0 0 26px;border-radius:7px;border:2px solid var(--blue);background:var(--card);color:#fff;font-weight:800;font-size:15px;line-height:1;
  position:relative}
.tck::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.tck.on{background:var(--green);border-color:var(--green)}
.tck.tckpop{animation:tckpop .4s var(--spring)}
@keyframes tckpop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
/* Conferma "Copiato ✓" (link invito, link god/supervisore, testo Riepilogo): piccolo rimbalzo sul
   pulsante invece del solo cambio di testo — si sente che l'azione è andata a buon fine. */
.copied{animation:copiedpop .4s var(--spring)}
@keyframes copiedpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.rimbtn{border:1px solid var(--amber);color:var(--amber);background:var(--amber-soft);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600}
.rimb{color:var(--amber);font-size:12px;font-weight:700}
.fw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
.fw:last-child{border-bottom:none}.fw input{width:20px;height:20px}
.r{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em;line-height:1.4}
.fw .r{margin-left:auto}
.r-app{background:var(--green-soft);color:var(--green)} .r-req{background:var(--amber-soft);color:var(--amber)} .r-no{background:var(--red-soft);color:var(--red)}
/* variante per frasi lunghe (es. "Maria si offre · attende gestore"): stessi colori, niente
   maiuscolo/tracking — l'uppercase del badge è pensato per etichette corte, non per prose */
.r.r-long{text-transform:none;letter-spacing:normal;border-radius:7px;padding:2px 8px;font-weight:700}
.hday{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.hday:last-child{border-bottom:none}.hday .d{flex:0 0 54px;color:var(--muted)}
.hweek{font-weight:700;padding:10px 12px 4px}
/* accordion ore fatte */
.acc{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.acc-sum{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;list-style:none;font-weight:650}
.acc-sum::-webkit-details-marker{display:none}
.acc-t{font-size:15px}
.acc-y{color:var(--muted);font-weight:500;font-size:12px;margin-left:6px}
.acc-reg{margin-left:8px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:7px;padding:2px 7px}
.acc-tot{margin-left:auto;font-weight:800;color:var(--green);background:var(--green-soft);border-radius:8px;padding:3px 10px;font-size:13px}
.acc-chev{color:var(--muted);font-size:12px;transition:transform .22s var(--ease)}
.acc[open] .acc-chev{transform:rotate(180deg)}
.acc-body{border-top:1px solid var(--line)}
/* Aggiungi indisponibilità: form a chip giorno + Tutto il giorno/Fascia oraria (2026-07, sostituisce
   la griglia a mezz'ora — replica del design "Non posso lavorare" già pronto in precedenza). */
.adp-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.adp-day{flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink);text-align:center;cursor:pointer;text-transform:capitalize}
.adp-day span{display:block;font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.adp-day.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.adp-day.on span{color:var(--accent)}
.adp-day:active{transform:scale(.96)}

/* ============================================================
   14 · READ-ONLY (area manager / osservatore) — body.ro
   ============================================================ */
body.ro .emp-act,body.ro .addseg,body.ro #timbToday .rowbtns,body.ro #v-oggi>.rowbtns,
body.ro .timb-tools,body.ro .vday,body.ro .autobanner,body.ro .pubbar,
body.ro .obj-card,body.ro .fp .ok,body.ro .fp .no,
body.ro #v-team .rowbtns,body.ro .tm .btn-ghost,
body.ro .admin-only,body.ro .ro-hide,body.ro .bellbtn,body.ro .notif-bar{display:none!important}
body.ro .te-cell,body.ro .lin-c,body.ro .lin-name,body.ro .seg .t,body.ro .seg .del,
body.ro .fcal td.c,body.ro .reg .man input,body.ro #v-team input,body.ro .datepick{pointer-events:none}
body.ro .reg .man input,body.ro #v-team input{background:transparent;border-color:transparent}

/* ============================================================
   15 · DELEGA CONSOLE (vice/dipendente delegato) — body.deleg
   Solo Turni + Timbrature: a differenza di RO, l'editing NON è disabilitato
   (deve poter fare orari/timbrature), spariscono solo tab/pulsanti fuori scope.
   ============================================================ */
body.deleg .deleg-hide{display:none!important}

/* ============================================================
   15 · MOTION fallback
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   15b · RESPONSIVE — niente overflow orizzontale su telefono
   ============================================================ */
@media (max-width:420px){
  main{padding:12px}
  .te-emp{padding:10px 8px}
  .te-days{gap:3px}
  .te-cell{padding:6px 0;min-height:46px}
  .te-cell .tm{font-size:10px;letter-spacing:-.03em;padding:1px 4px}
  .te-cell .tm i{font-size:9.5px;letter-spacing:-.03em}
  .te-cell .tm.tr,.te-cell .tm.tr-in{padding:1px 4px}
  .te-cell .cd{font-size:13px}
  .te-cell .empty-d{font-size:13px}
  .te-day .dl{font-size:9px}
  .lin-name{flex-basis:88px;min-width:88px;font-size:11px}
  #turniEditor.editing .lin-name{flex-basis:132px;min-width:132px}
}
@media (max-width:360px){
  main{padding:10px}
  .te-emp{padding:9px 6px}
  .te-cell .tm{font-size:9px}
  .te-cell .tm i{font-size:9px}
}

/* ============================================================
   16 · PRINT — only #printArea (orario / riepilogo / ferie PDF)
   ============================================================ */
#printArea{display:none}
@media print{
  @page{size:landscape;margin:8mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff;margin:0;padding:0}
  /* La classe esisteva già in uso (es. hint incassi) ma senza una regola reale — printRiep()
     clona l'innerHTML delle righe live in #printArea, quindi una cella con .noprint (es. il
     pulsante Report, azione live non un dato da archiviare) va nascosta esplicitamente anche lì. */
  .noprint{display:none!important}
  body>*{display:none!important}
  #printArea{display:block!important;font-family:Arial,Helvetica,sans-serif;color:#111}
  .po-brand{display:flex;align-items:center;gap:14px;margin-bottom:8px}
  .po-logo{height:52px;width:auto;object-fit:contain}
  .po-titlebox{flex:1;border:2px solid #163a93;border-radius:6px;padding:8px 14px;text-align:center;border-bottom:4px solid #ffd200}
  .po-titlebox h2{font-size:20px;font-weight:800;color:#163a93;margin:0}
  .po-sub{font-size:11px;color:#444;margin-top:3px}
  .po-when{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-size:12px}
  .po-when b{font-weight:700}
  .po-when .band{background:#fff14d;padding:3px 10px;border:1px solid #b9a800;border-radius:3px;font-weight:700}
  .po-page{page-break-inside:auto}
  .po-break{page-break-before:always}
  .po{width:100%;border-collapse:collapse;border:1.5px solid #4b5563;font-size:10.5px;table-layout:fixed;margin-bottom:8px}
  .po th,.po td{border:1px solid #6b7280;padding:3px 4px;text-align:center;vertical-align:top;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .po tbody tr{border-bottom:1px solid #6b7280;page-break-inside:avoid;break-inside:avoid}
  .po thead{display:table-header-group}
  .po-kpi{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .po-kpi>div{flex:1 1 30%;border:1px solid #6b7280;border-radius:4px;padding:5px 9px;min-width:120px}
  .po-kpi span{display:block;font-size:8.5px;color:#444;text-transform:uppercase;font-weight:700;letter-spacing:.02em}
  .po-kpi b{font-size:13px;color:#163a93;font-weight:800}
  .po thead th{background:#e7ebf1;font-size:9.5px;text-transform:uppercase;font-weight:800;color:#163a93}
  .po thead th .d{display:block;font-weight:500;color:#444;font-size:9px}
  /* Sezione Guasti del registro: colonne di testo lungo (descrizione, intervento, azione
     preventiva) allineate a sinistra, con la riga di dettaglio sotto in piccolo. */
  .po tbody td .d{display:block;font-weight:500;color:#444;font-size:9px;margin-top:2px}
  .po td.po-txt{text-align:left}
  .po col.c-name{width:120px}.po col.c-tot{width:52px}
  .po td.po-name{background:#d6e3f7;text-align:left;font-weight:800;white-space:nowrap;color:#11233f}
  .po td.po-name .n{color:#5b6b85;font-weight:700;margin-right:5px}
  .po td .po-time{display:block;font-weight:700;color:#11233f;line-height:1.35}
  .po td .ore-row{display:block;margin-top:4px}
  .po td .ore{display:inline-block;padding:1px 7px;border-radius:4px;background:#eef2f9;color:#163a93;font-weight:700;font-size:9px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .po td.po-empty{color:#9aa3b0}
  .po td.po-hastr{background:#fff4e2}
  .po .po-tr{display:inline-block;color:#9a5a00;font-weight:800}
  .po td.rest{background:#cdebd6;font-weight:800;color:#15633a}
  .po td.abs{background:#eef0f3;font-weight:700;color:#444}
  .po td.po-tot{font-weight:800;background:#f3f5f8}
  .po tr.obj td{background:#fbfbf5;font-style:italic;font-size:9px;color:#333;font-weight:600}
  /* Riepilogo: colori ore per tipo anche in stampa (espliciti, non da var) */
  .po .t-out{color:#9a6a00!important;font-weight:700}
  .po .t-loc{color:#1a8a5a!important;font-weight:700}
  .po .t-in{color:#1f5fb0!important;font-weight:700}
  .po-leg{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:9px;color:#333;margin:6px 0 10px}
  .po-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
  .po tr.obj td.po-name{font-style:normal;background:#eef2f9;color:#11233f}
  .po tr.foot td{font-weight:800;background:#eef2f9;border-top:2px solid #163a93}
  .po-foot-note{margin-top:6px;font-size:9px;color:#666}
  .fmonth{margin-bottom:8px;page-break-inside:avoid}
  .fmtitle{font-weight:700;font-size:12px;margin:6px 0 2px;text-transform:capitalize}
  .fmscroll{overflow:visible;border:none}
  .fcal{border-collapse:collapse;font-size:8px}
  .fcal th,.fcal td{border:1px solid #999;width:15px;height:15px;text-align:center}
  .fcal th .wl{display:block;font-size:6px;color:#666}
  .fcal td.nm,.fcal th.nm{text-align:left;font-weight:700;white-space:nowrap;padding:0 4px;min-width:74px}
  .fcal td.app{background:#0e7c5a;color:#fff}
  .fcal td.we,.fcal th.we{background:#eee}
  .fcal td.tot,.fcal th.tot{background:#f0f0f0;font-weight:700}
}

/* Toast "capsula" (stile Dynamic Island): pillola scura glossy IN ENTRAMBI I TEMI (contrasto
   massimo, identità unica), chip icona colorato che poppa dopo l'atterraggio, entra a molla
   dall'alto (non copre mai tab bar / slide di timbratura), esce verso l'alto più rapida
   dell'entrata. Dismiss: tap, swipe-up o timeout. */
.toastwrap{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 10px);z-index:130;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 14px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:11px;max-width:430px;background:rgba(16,19,28,.9);backdrop-filter:saturate(1.6) blur(22px);-webkit-backdrop-filter:saturate(1.6) blur(22px);color:#fff;border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:9px 18px 9px 9px;box-shadow:0 12px 36px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);font-size:14.5px;line-height:1.42;font-weight:500;letter-spacing:.01em;animation:toastin .52s var(--spring);white-space:pre-line;word-break:break-word;touch-action:pan-x;cursor:pointer}
.toast .t-ic{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;font-style:normal;background:#56617a}
.toast.ok .t-ic{background:linear-gradient(135deg,#34b47e,#1f9663)}
.toast.warn .t-ic{background:linear-gradient(135deg,#f2b21c,#e08c00)}
.toast.err .t-ic{background:linear-gradient(135deg,#e05252,#c23434)}
.toast.info .t-ic{background:linear-gradient(135deg,#4d7ee8,#2f56c0)}
.toast .t-ic{animation:tipop .5s var(--spring) .14s backwards;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.toast.out{animation:toastout .2s var(--ease) forwards}
@keyframes toastin{0%{opacity:0;transform:translateY(-115%) scale(.86)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(-24px) scale(.9)}}
@keyframes tipop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.toast,.toast.out,.toast .t-ic{animation:none}}

/* Ferie e disponibilità (app dipendente, 2026-07): card riepilogo ferie/permessi + righe
   indisponibilità con pallino di stato — replica di un mockup fornito dall'utente. */
.fd-sum{display:flex;align-items:flex-start;gap:16px}
.fd-col{flex:1}
.fd-right{text-align:right}
.fd-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650;margin-bottom:4px}
.fd-big{font-size:28px;font-weight:800;color:var(--ink);line-height:1}
.fd-unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px}
.fd-permval{font-size:20px;font-weight:800;color:var(--amber)}
.fd-disprow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.fd-disprow:last-child{border-bottom:none}
.fd-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%}
.fd-x{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:16px;padding:6px;line-height:1;cursor:pointer;border-radius:8px}
.fd-x:active{background:var(--bg)}

/* Conferma personalizzata (dialog centrale, scrim + spring pop) — sostituisce confirm() nativo
   nell'app dipendente. Icona che pulsa per le azioni distruttive (mockup "1a" fornito dall'utente). */
.pzc-scrim{position:fixed;inset:0;z-index:110;background:rgba(16,21,28,.4);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.pzc-scrim.on{opacity:1;pointer-events:auto}
.pzc-scrim.out{opacity:0}
.pzc-box{position:fixed;left:50%;top:50%;z-index:111;width:min(320px,calc(100vw - 48px));
  background:var(--card);border-radius:18px;padding:22px 20px 18px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  transform:translate(-50%,-50%) scale(.88);opacity:0;pointer-events:none;
  transition:transform .3s var(--spring),opacity .2s var(--ease)}
.pzc-box.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.pzc-box.out{transform:translate(-50%,-50%) scale(.94);opacity:0}
.pzc-ic{width:44px;height:44px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue)}
.pzc-ic svg{width:22px;height:22px}
.pzc-ic.danger{background:var(--red-soft);color:var(--red)}
.pzc-ic.pulse{animation:pzcpulse 1.6s ease-out infinite}
.pzc-msg{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;white-space:pre-line;margin-bottom:18px}
.pzc-btns{display:flex;gap:10px}
.pzc-btns button{flex:1;padding:11px;border-radius:12px;font-weight:650;font-size:15px;border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:transform .12s var(--ease)}
.pzc-btns button:active{transform:scale(.96)}
.pzc-ok{background:var(--green);border-color:var(--green);color:#fff}
.pzc-ok.danger{background:var(--red);border-color:var(--red)}
@keyframes pzcpulse{0%{box-shadow:0 0 0 0 rgba(180,35,24,.28)}70%{box-shadow:0 0 0 14px rgba(180,35,24,0)}100%{box-shadow:0 0 0 0 rgba(180,35,24,0)}}
@media (prefers-reduced-motion:reduce){.pzc-box,.pzc-scrim,.pzc-ic.pulse{animation:none;transition:none}}

/* Card "turno di oggi": link sotto per aprire lo sheet "Turni di oggi". */
.oggi-alllink{display:block;width:100%;text-align:center;border:0;background:none;color:var(--muted);font-size:12px;font-weight:650;padding:10px 0 0;cursor:pointer;font-family:inherit}

/* "Turno di oggi" in grande (replica del mockup): etichetta+pill affiancate, poi l'orario a cifre
   grandi, poi pausa/ore/colleghi — sopra i compiti, invece dei piccoli segchip di prima. */
.oggi-hdrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oggi-hdrow .status{margin-top:0;flex:0 0 auto}
.oggi-toplbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.oggi-bigtime{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:6px;color:var(--ink)}
.oggi-substat{font-size:13px;color:var(--muted);margin-top:3px}

/* Sheet dipendente: maniglia trascinabile + pulsante ✕ sempre visibili — prima non c'era un modo
   chiaro per uscire (segnalato dall'utente). Scoped a #dipSheetScrim, non tocca .sheet/.sheet h3
   condivisi con l'admin (che li usa senza questo wrapper). */
.sheet-handle{width:38px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 14px;cursor:grab;touch-action:none}
.sheet-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sheet-hdr h3{margin-bottom:0}
.sheet-x{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:var(--bg);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s var(--ease)}
.sheet-x:active{transform:scale(.9)}
.sheet-x svg{width:16px;height:16px}

/* Telefono in ORIZZONTALE (2026-07, richiesta esplicita: poco spazio verticale per il Lineare mentre
   si fanno gli orari — l'intestazione a tutta larghezza + tab bar in basso mangiano altezza preziosa
   in un viewport già basso). header+nav diventano UNA colonna fissa a sinistra (intestazione sopra,
   tab sotto, stesso ordine visivo di sempre) — main prende tutta la larghezza restante, niente più
   centrato a 760px (il punto della richiesta è più spazio per il Lineare, non un layout "a rivista").
   Scoped a (orientation:landscape) + un tetto di altezza: un iPad/desktop in landscape ha comunque
   altezza abbondante, non deve attivarsi lì — solo sul telefono, dove l'altezza vera scarseggia.
   Esteso all'app dipendente (2026-07, richiesta esplicita "la stessa modalità orizzontale falla
   per l'app dei dipendenti"): header/nav/brand condividono la stessa struttura HTML tra le due
   app (stesse classi .hicons-row/.hrow/.brand/.notif-bar), quindi lo stesso blocco si applica a
   entrambe senza scoping — l'unica differenza reale sono gli id di Annulla/Ripeti (gestore:
   #undoBtn/#redoBtn, dipendente: #empUndoBtn/#empRedoBtn), gestita esplicitamente sotto. */
@media (orientation:landscape) and (max-height:500px){
  body{padding-bottom:0}
  header{position:fixed;top:0;left:0;bottom:0;width:148px;height:100vh;z-index:25;
    display:flex;flex-direction:column;align-items:center;overflow-y:auto;
    padding:calc(8px + env(safe-area-inset-top)) 6px 8px calc(6px + env(safe-area-inset-left));
    border-bottom:0;border-right:1px solid var(--line)}
  /* Annulla/ripeti: restano usabili da tastiera (Ctrl/Cmd+Z, già documentato), tolti dalla colonna
     per non mangiare altezza preziosa a 3 icone impilate — resta solo Opzioni. */
  .hicons-row{flex-direction:column;justify-content:flex-start;margin-bottom:4px;gap:5px}
  .hicons-row #undoBtn,.hicons-row #redoBtn,.hicons-row #empUndoBtn,.hicons-row #empRedoBtn{display:none}
  .hrow{flex-direction:column;gap:6px;width:100%}
  .brand{flex-direction:column;text-align:center;gap:3px;width:100%}
  .brand-logo{height:34px}
  /* Nome negozio: niente più troncamento né sillabazione (segnalato: "è brutto") — colonna
     abbastanza larga da tenerlo intero, su una o due righe naturali (andata a capo solo tra parole
     vere, mai dentro una parola). */
  header h1{font-size:11px;line-height:1.25;max-width:136px;white-space:normal;overflow:visible;word-break:keep-all;overflow-wrap:normal;hyphens:none}
  /* Indirizzo/CDC e orologio grande: non essenziali mentre si lavora sui turni, tolti per lasciare
     spazio — restano raggiungibili da Opzioni/orologio in pillola più piccolo altrove nell'app. */
  .brand .cdc{display:none}
  .fclock.big{display:none}
  .hclock-col{width:100%;gap:4px}
  /* Notifiche: una riga sola (icona + "Notifiche" + numero), non più impilata su 3 righe — richiesta
     esplicita. La colonna ora è larga abbastanza (148px) da farceli stare tutti affiancati. */
  .notif-bar{padding:6px 8px;flex-direction:row;flex-wrap:nowrap;gap:5px;font-size:10px;white-space:nowrap}
  .notif-bar span:not(.notif-count){font-size:10px}
  /* nav: da riga orizzontale in basso a colonna, incollata subito sotto l'intestazione nella STESSA
     larghezza — visivamente un'unica barra laterale, anche se restano due elementi fixed distinti
     (nessun wrapper comune nell'HTML da poter usare come flex/grid container). Offset ridotto al
     minimo (richiesta esplicita: restava un margine vuoto sotto Notifiche) ora che l'intestazione è
     più compatta (Notifiche su una riga sola) — overflow-y:auto resta come rete di sicurezza se la
     stima fosse ancora per difetto (non verificabile in un browser reale in questa sessione). */
  /* nav,.dipnav: nell'app dipendente la tab bar ha classe .dipnav (position:fixed;right:0;
     max-width:560px;margin:0 auto per il suo aspetto normale da tab bar in basso, centrata) — più
     specifica di un semplice "nav", quindi senza ripeterla qui .dipnav vince e la nav resta
     centrata/flottante invece di agganciarsi a sinistra come colonna (bug riscontrato: screenshot
     con la nav "in mezzo, un riquadro fluttuante" invece che a sinistra). Stesso trucco già usato
     per main/.role-crew main sopra. */
  nav,.dipnav{position:fixed;left:0;right:auto;top:148px;bottom:0;width:148px;max-width:148px;margin:0;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px;overflow-y:auto;
    border-top:0;border-right:1px solid var(--line);
    padding:8px 6px 8px calc(6px + env(safe-area-inset-left))}
  /* Etichette SEMPRE intere, su una riga sola: niente troncamento, niente sillabazione, niente
     spezzatura a metà parola (segnalato due volte: prima "Timbra"/"ture" senza trattino, poi anche
     col trattino "è brutto" — la richiesta esplicita è non tagliare/spezzare MAI la parola). L'unica
     strada davvero sicura è dare abbastanza larghezza perché il testo ci stia per intero: colonna
     148px (contro i 96-108px dei giri precedenti, insufficienti) + font 10.5px (più leggibile del
     9.5/8.5px tentato prima) + white-space:nowrap, nessun wrap/break/hyphen consentito. */
  nav button,.dipnav button{flex:0 0 auto;width:100%;padding:7px 2px;gap:3px;margin:0}
  /* .dipnav button.on/:not(.on) (fuori da questo media query) impostano margin:0 3px con specificità
     0,2,1 — pari alla riga sopra ma dichiarati prima nel file: senza ripeterli qui vincerebbero loro
     per via dei margini laterali, disallineando i bottoni dalla larghezza piena della colonna. */
  .dipnav button.on,.dipnav button:not(.on){margin:0}
  nav button,.dipnav button{font-size:10.5px;line-height:1.15;white-space:nowrap;overflow:visible;word-break:keep-all;overflow-wrap:normal;hyphens:none;text-align:center}
  nav svg,.dipnav svg{width:19px;height:19px}
  /* .role-crew main{max-width:560px} (fuori da questo media query) ha specificità maggiore di un
     semplice "main" — senza ripeterlo qui vincerebbe lui e romperebbe il layout in landscape per
     l'app dipendente. */
  main,.role-crew main{margin:0 0 0 148px;max-width:none;padding:12px calc(12px + env(safe-area-inset-right)) 12px 12px}
}

/* Overlay fotocamera per lo scan barcode (2026-07) — a tutto schermo, sopra qualunque sheet */
.barcode-overlay{position:fixed;inset:0;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:14px}
.barcode-overlay video{width:100%;max-width:480px;border-radius:12px;background:#111}
.barcode-overlay p{color:#fff;font-size:14px;font-weight:600;margin:0}
.barcode-overlay .rowbtns{width:100%;max-width:480px}
.barcode-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80%,420px);height:120px;border:3px solid var(--green);border-radius:12px;pointer-events:none;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}

/* Cornice elegante per il barcode mostrato in cassa (2026-07) — raggruppamento visivo chiaro
   (prossimità/contenimento, principi Gestalt): bordo sottile, angoli arrotondati, ombra leggera,
   padding generoso perché il codice non tocchi mai il bordo (leggibilità per lo scanner). */
.barcode-card{background:#fff;border:1.5px solid #d8dce2;border-radius:16px;padding:18px 14px 14px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin:0 auto 18px;max-width:320px}
.barcode-card .bc-qty{color:#111;font-weight:700;margin-top:8px;font-size:15px}
.barcode-card .bc-fallback{color:#000;font-size:22px;font-weight:700;letter-spacing:2px;font-family:monospace}
.barcode-card .bc-fallback-note{color:#666;font-size:11px;margin-top:6px}

/* Tutorial interattivo con spotlight (2026-07, richiesta esplicita: "illumina la zona quando parla
   della funzionalità") — scrim scuro + l'elemento evidenziato sale sopra con un alone bianco, invece
   di un semplice sheet testuale scollegato dall'interfaccia reale. */
.tut-scrim{position:fixed;inset:0;background:rgba(10,12,16,.6);z-index:9990;backdrop-filter:blur(1px)}
/* NIENTE `position` qui: su un elemento già posizionato (la nav è fixed in fondo allo schermo)
   forzare `relative` lo rimetteva nel flusso, mandandolo in fondo al documento — e il popup, che si
   posiziona sul rettangolo del target, finiva fuori dalla viewport: restava solo lo scrim sfocato,
   senza card né "Avanti" (segnalazione utente 2026-08). Il `relative` lo aggiunge tutRenderStep()
   con la classe .tut-spot-rel, ma solo se l'elemento è davvero statico. */
.tut-spot-rel{position:relative}
.tut-spot{z-index:9995;box-shadow:0 0 0 5px #fff,0 0 0 9px rgba(255,255,255,.35),0 0 30px 6px rgba(255,255,255,.4);border-radius:14px;transition:box-shadow .3s var(--ease);pointer-events:none}
.tut-card{position:fixed;left:50%;transform:translateX(-50%);max-width:340px;width:calc(100% - 32px);background:var(--card);color:var(--ink);border-radius:16px;padding:18px;box-shadow:0 12px 44px rgba(0,0,0,.4);z-index:9996}
.tut-card.tut-center{top:50%;transform:translate(-50%,-50%)}
.tut-card h4{margin:0 0 8px;font-size:17px}
.tut-card p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tut-dots{text-align:center;margin-bottom:14px;display:flex;justify-content:center;gap:6px}
.tut-dot{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}
.tut-dot.on{background:var(--accent)}
.tut-skip{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--bg);border:0;color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Pop-up rosso d'emergenza per il conflitto indisponibilità/turno (2026-07) — stessa struttura
   .bc-ov/.bc-card del resto dei pop-up bloccanti, variante d'allarme più vistosa (bordo/testo rossi,
   piccola vibrazione d'ingresso) per farlo notare subito rispetto ai pop-up informativi normali. */
.bc-card.danger{border:2.5px solid var(--red,#c0392b)}
.bc-card.danger .bc-h{color:var(--red,#c0392b)}
@keyframes bcshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.bc-card.danger{animation:bcpop .34s var(--spring),bcshake .4s .34s}
@media (prefers-reduced-motion:reduce){.bc-card.danger{animation:none}}

/* ===== Frigoriferi e guasti (app gestore) ===== */
#frigoBtn{position:relative}
.fg-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--card)}
.fg-card{margin-bottom:10px}
.fg-card.fg-bad{border:1.5px solid var(--red)}
.fg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.fg-name{font-weight:700}
.fg-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.fg-chip{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.fg-chip.green{background:var(--green-soft);color:var(--green)}
.fg-chip.red{background:var(--red-soft);color:var(--red)}
.fg-chip.amber{background:var(--amber-soft);color:var(--amber)}
.fg-chip.gray{background:var(--gray-soft);color:var(--gray)}
.fg-entry{display:flex;gap:8px;margin-top:10px}
.fg-entry input{flex:1;min-width:0}
/* Rotellina temperatura (2026-08, segnalazione utente: il vecchio campo di testo faceva zoomare
   la pagina su iPhone al tocco). Scala scorrevole con aggancio al mezzo grado, cursore fisso al
   centro, fascia verde = dentro le soglie del frigo. */
.tw-wrap{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.tw-row{display:flex;align-items:center;gap:10px}
.tw-step{flex:0 0 44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;font-weight:700;line-height:1}
.tw-val{flex:1;text-align:center;font-size:26px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tw-val.bad{color:var(--red)}
.tw-box{position:relative}
.tw{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:6px 0;border-radius:12px;background:var(--gray-soft);touch-action:pan-x}
.tw::-webkit-scrollbar{display:none}
.tw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tw-track{display:flex;padding:0 calc(50% - 23px)}
.tw-t{flex:0 0 46px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:46px;font-size:13px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;position:relative;padding-bottom:4px}
.tw-t::before{content:'';width:2px;height:12px;border-radius:1px;background:var(--line);margin-bottom:6px}
.tw-t.whole::before{height:20px;background:var(--gray)}
.tw-t.ok::before{background:var(--green)}
.tw-t.on{color:var(--accent);font-weight:750}
.tw-cursor{position:absolute;left:50%;top:2px;bottom:20px;width:2px;margin-left:-1px;border-radius:2px;background:var(--accent);pointer-events:none}
.fg-hist{display:flex;flex-direction:column;gap:6px;max-height:45vh;overflow-y:auto}
.fg-hrow{display:flex;align-items:center;gap:8px}
.fg-hwhen{flex:1;font-size:13px;color:var(--muted)}
.fg-hx{width:26px;height:26px;border-radius:50%;background:var(--gray-soft);color:var(--muted);font-size:12px;flex:none}
.fg-hcp{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);flex:none;display:flex;align-items:center;justify-content:center}
.fg-gcard{margin-bottom:10px}
.fg-gcard.fg-gdone{opacity:.62}
.fg-grow1{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fg-gcat{font-size:12.5px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-gwhen{font-size:12.5px;color:var(--muted)}
.fg-gtitle{font-weight:700}
.fg-gdescr{font-size:14px;white-space:pre-line;margin-top:2px}
.fg-gfotos{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.fg-gfotos img{width:74px;height:74px;object-fit:cover;border-radius:10px;cursor:pointer}
/* Chiusura di un guasto (ISO 9001): come è stato risolto, azione preventiva, documento
   dell'intervento. Riquadro verde a filo, uno per ogni intervento nello storico. */
.fg-gfix{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--green-soft);border-left:3px solid var(--green)}
.fg-gfix+.fg-gfix{margin-top:6px}
.fg-gfixhd{font-size:12.5px;font-weight:700;color:var(--green);margin-bottom:4px}
.fg-gfixlab{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.fg-gfixtxt{font-size:14px;white-space:pre-line}
.fg-fwrap{position:relative;display:inline-block}
.fg-fwrap .fg-hx{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff}
.fg-gbtns{display:flex;gap:8px;margin-top:10px}
.fg-gbtns .action{flex:1}
.fg-gbtns a.action{text-decoration:none}
/* Manutenzione programmata: la card e' la to-do list (scadute e in scadenza in cima), quindi
   quelle in regola restano attenuate come i guasti risolti. */
.fg-mcard{margin-bottom:10px}
.fg-mcard.fg-mok{opacity:.7}
.fg-mditta{font-size:13.5px;color:var(--muted);margin-top:2px}
.fg-mditta a{color:var(--accent);font-weight:650}
.fg-mlast{font-size:13px;color:var(--muted);margin-top:8px}
.fg-mhist{margin-top:8px}
.fg-mhist>summary{font-size:13px;color:var(--accent);font-weight:650;cursor:pointer;list-style:none}
.fg-mhist>summary::-webkit-details-marker{display:none}
.fg-mhist>summary::before{content:'▸ '}
.fg-mhist[open]>summary::before{content:'▾ '}

/* ===== Nav a sezioni (app gestore, 2026-08): Orari · Squadra · Operatività · Inventario ===== */
nav button{position:relative}
nav .fg-dot{top:2px;right:calc(50% - 19px)}
.hubrow{display:flex;align-items:center;gap:12px;padding:16px 14px;margin-bottom:10px;cursor:pointer;transition:transform .12s var(--ease)}
.hubrow:active{transform:scale(.98)}
.hub-ico{font-size:26px;line-height:1}
.hub-txt{flex:1;min-width:0}
.hub-t{font-weight:700}
.hub-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.hub-chev{color:var(--muted);font-size:22px;font-weight:600;line-height:1}

/* HACCP: righe checklist sanificazione/task */
.hz-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hz-row .hz-txt{flex:1;min-width:0;cursor:pointer}
.hz-row.hz-done{border:1.5px solid var(--green-soft)}
.hz-row .action{flex:none;white-space:nowrap}
/* Campo lotto appena compilato dalla scansione: lampeggio breve, così si vede cos'è cambiato. */
.lt-filled{animation:ltFill 1.4s var(--ease)}
@keyframes ltFill{0%{background:var(--green-soft);border-color:var(--green)}100%{background:var(--bg);border-color:var(--line)}}
/* Pulsante in attesa di risposta dal server: non cliccabile e visibilmente "occupato". */
.action.busy,.btn.busy{opacity:.65;pointer-events:none;position:relative}

/* ============================================================================
   MAI lo zoom automatico sui campi (iOS) — regola trasversale, richiesta esplicita
   ----------------------------------------------------------------------------
   Safari su iPhone ingrandisce la pagina da solo quando un campo di testo con
   font-size < 16px riceve il focus, e poi la lascia zoomata: toccare una casella
   per compilarla sballa tutta la vista. L'unico rimedio affidabile è che NESSUN
   controllo di input scenda sotto i 16px.
   `!important` è voluto: vale anche sugli style inline, così la regola tiene
   pure per il codice scritto in futuro senza doversene ricordare ogni volta.
   NON si usa `maximum-scale=1` / `user-scalable=no` nel viewport: iOS li ignora
   dalla 10 e in più toglierebbe il pinch-zoom a chi ne ha bisogno per leggere.
   Esclusi i controlli che non aprono tastiera (checkbox/radio/range/color) e i
   file input, dove il font non c'entra nulla con lo zoom.
   ========================================================================== */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
select,
textarea{font-size:16px !important}
/* Campi "densi" che stavano stretti col testo piccolo: con 16px servono un filo
   di larghezza in più, altrimenti il numero viene tagliato. */
.ord-top input[type=number]{width:66px}
.ord-top input[type=time],.ora-fields input[type=time]{padding:4px 6px}

/* Conta cassaforte: riga taglio | quantità | + | totale.
   Il tasto + serve perché il tastierino numerico dell'iPhone non ha il segno più,
   e la quantità si scrive spesso come somma di più conteggi ("13+43"). */
.cassa-row{display:grid;grid-template-columns:58px 1fr 38px 92px;gap:7px;align-items:center}
.cassa-plus{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);
  font-size:19px;font-weight:600;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.cassa-plus:active{background:var(--line)}
@media (max-width:380px){.cassa-row{grid-template-columns:52px 1fr 34px 84px;gap:5px}}
/* Riga scontrino della nota spese: descrizione | importo | foto | saldato | elimina */
.cassa-sc{display:grid;grid-template-columns:1fr 96px 38px 38px 34px;gap:6px;align-items:center;margin-bottom:6px}
.cassa-sc .sc-nota{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin:-2px 0 4px 2px}
.cassa-sc.saldato input{opacity:.5;text-decoration:line-through}
@media (max-width:380px){.cassa-sc{grid-template-columns:1fr 84px 34px 34px 30px;gap:4px}}

/* Pulsante d'azione con icona (2026-08).
   `.actbtn` è `display:block`: l'icona resta appesa alla baseline del testo, così ingrandendola
   sborda dal pulsante e non è allineata alla scritta (segnalato dall'utente). Qui il pulsante
   diventa una riga flex — icona e testo condividono lo stesso asse ottico centrale, con l'icona
   dimensionata in proporzione al testo (1.5×) invece che in pixel fissi. */
.actbtn.scan{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;font-size:16px;font-weight:700;line-height:1;text-align:center}
.actbtn.scan .ic{width:1.5em;height:1.5em;vertical-align:0;flex:0 0 auto}
/* Stessa cosa per l'app gestore, che usa `.action` invece di `.actbtn` */
.action.scan{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;font-size:16px;font-weight:700;line-height:1}
.action.scan .ic{width:1.5em;height:1.5em;vertical-align:0;flex:0 0 auto}

/* Barra in basso a 5 schede (2026-08): sotto i 360px l'etichetta "Sett. NN" andava a capo e
   quella scheda restava più alta delle altre — allineamento rotto proprio dove si nota.
   Testo un filo più piccolo e niente a capo: tutte le etichette su una riga sola. */
@media (max-width:359px){
  .dipnav button{font-size:10.5px;letter-spacing:-.2px}
  .dipnav button{white-space:nowrap}
  .dipnav .ni{font-size:19px}
}

/* ===== Vendite del giorno (app gestore) =====
   Segnalazione dell'utente: "compilare le vendite non è immediato o visibile". Prima l'unico modo
   era un input minuscolo dentro la tabella Incassi del Riepilogo, raggiungibile solo scorrendo in
   orizzontale fino alla colonna del giorno. Qui l'azione ha una card sua: un campo, un pulsante,
   e lo stato scritto a parole. Da compilare = bordo ambra (attira); compilata = verde e spenta. */
/* Il bordo era un colore scritto a mano, come in altri 4 punti dell'app: fuori dalla palette e
   identico in chiaro e scuro. Ora è il token --amber-line, che nel tema scuro si smorza. */
.vend-card{margin:10px 0;padding:14px 16px;border-radius:var(--r);border:1px solid var(--amber-line);background:var(--amber-soft);box-shadow:var(--shadow)}
.vend-card.done{border-color:var(--line);background:var(--card)}
.vend-head{display:flex;align-items:center;gap:8px;font-size:15px}
.vend-head .ic{width:1.15em;height:1.15em;flex:none}
.vend-head b{flex:1}
.vend-state{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--amber)}
.vend-card.done .vend-state{color:var(--green)}
.vend-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.vend-eur{font-size:20px;font-weight:700;color:var(--muted)}
/* 22px: mai sotto i 16px, altrimenti iOS zooma al focus. */
.vend-in{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  font-size:22px;font-weight:750;text-align:right;background:var(--bg);color:var(--ink)}
.vend-save{flex:none;white-space:nowrap}
.vend-sugg{display:block;width:100%;margin-top:9px;padding:9px 12px;border-radius:11px;border:1px dashed var(--accent);
  background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}
.vend-hint{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45}
.vend-ro{margin-top:8px;font-size:22px;font-weight:750}

/* Vendite: scontrini e scarti F16 sulla stessa card dell'incasso */
.vend-two{display:flex;gap:10px;margin-top:10px}
.vend-sub{flex:1;min-width:0;display:block}
.vend-sub>span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px}
.vend-in2{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;
  font-size:17px;font-weight:700;text-align:right;background:var(--bg);color:var(--ink)}
.vend-medio{margin-top:9px;font-size:13px;color:var(--muted)}

/* ===== Statistiche vendite ===== */
.vend-bar{display:flex;gap:6px;margin-bottom:10px}
.vend-bar .modebtn{flex:1}
/* Gerarchia: le vendite sono IL numero della schermata, gli altri cinque lo spiegano. Prima erano
   sei riquadri identici e l'occhio non sapeva dove posarsi (Gestalt: la dimensione dice l'importanza). */
/* Nomi con prefisso v-: `.kpi` esisteva gia' (barra KPI dei Turni, riga ~384) e riusarlo aveva
   aggiunto bordo, fondo bianco e ombra a quelle celle senza che c'entrassero nulla. */
.vkpigrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:12px 0}
.vkpi.lead{grid-column:1 / -1;border-color:var(--accent);background:var(--accent-soft)}
.vkpi.lead .vkpi-v{font-size:34px}
.vkpi.lead .vkpi-t{color:var(--accent);font-weight:700}
.vkpi{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);min-width:0}
.vkpi-t{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3}
.vkpi-v{font-size:23px;font-weight:800;margin-top:4px;letter-spacing:-.01em;overflow-wrap:anywhere}
.vkpi-d{font-size:12px;font-weight:700;margin-top:3px}
.vkpi-d.up{color:var(--green)}.vkpi-d.down{color:var(--red)}.vkpi-d.flat{color:var(--muted);font-weight:600}
.vbars{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.vbar-row{display:flex;align-items:center;gap:9px;margin:5px 0;font-size:13px}
.vbar-l{flex:none;width:52px;color:var(--muted);font-weight:600}
.vbar-t{flex:1;min-width:0;height:11px;border-radius:6px;background:var(--line);overflow:hidden}
.vbar-t i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.vbar-v{flex:none;width:62px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:340px){.vkpigrid{grid-template-columns:1fr}}

/* Modulo unico di compilazione + pastiglie dei giorni (tab Statistiche) */
.vend-date{width:100%;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  font-size:16px;font-weight:600;background:var(--bg);color:var(--ink)}
.vend-dlbl{margin-top:5px;font-size:13px;font-weight:600;color:var(--muted);text-transform:capitalize}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.vchip{flex:1 1 auto;min-width:44px;padding:7px 4px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-align:center;line-height:1.2;
  transition:transform .14s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.vchip:active:not(:disabled){transform:scale(.96)}   /* stesso ritorno al tocco degli altri bottoni */
.vchip .vc-d{display:block;font-size:12px;font-weight:700}
.vchip .vc-s{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.vchip.ok{border-color:var(--green)}
.vchip.ok .vc-s{color:var(--green);font-weight:700}
.vchip.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.vchip.fut{opacity:.35;cursor:default}

/* Riga compatta al posto del modulo quando la giornata è già registrata: chi apre Statistiche per
   guardare i numeri non deve scavalcare un modulo di inserimento già assolto (minimalismo + il tab
   si chiama Statistiche, quindi le statistiche vengono prima). Un tocco lo riapre per correggere. */
.vend-mini{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:transform .14s var(--ease),border-color .18s var(--ease)}
.vend-mini:active{transform:scale(.99)}
.vend-mini .ic{width:1.15em;height:1.15em;flex:none;color:var(--green)}
.vend-mini b{flex:1;min-width:0;font-weight:650}
.vend-mini .vm-go{flex:none;font-size:13px;font-weight:700;color:var(--accent)}

/* Task HACCP: la data del titolo È il selettore. Il campo nativo resta nel DOM (serve il suo
   calendario) ma invisibile sopra il titolo, così il bersaglio da toccare è tutta la riga. */
.taskbar .taskday{position:relative;flex:1;min-width:0;display:block;padding:2px 4px;border:0;
  background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer;border-radius:12px;
  transition:transform .14s var(--ease),background-color .18s var(--ease)}
.taskbar .taskday:active{transform:scale(.98);background:var(--accent-soft)}
.taskbar .taskday .wk,.taskbar .taskday .wsub{display:block}
.taskbar .taskday input[type="date"]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;margin:0;background:transparent;cursor:pointer;font-size:16px}

/* Giorni festivi nella schermata Turni: si vedono e si correggono mentre si fanno gli orari */
.fest-bar{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow)}
.fest-tit{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:9px}
.fest-tit b{color:var(--amber)}
.fest-none{color:var(--muted);font-weight:600}
.fest-chips{display:flex;gap:6px}
.fest-chip{flex:1 1 0;min-width:0;padding:7px 3px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-align:center;line-height:1.15;
  transition:transform .14s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.fest-chip:active:not(:disabled){transform:scale(.96)}
.fest-chip .fc-g{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.fest-chip .fc-n{display:block;font-size:15px;font-weight:800}
.fest-chip .fc-l{display:block;font-size:9px;font-weight:600;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fest-chip.on{background:var(--amber-soft);border-color:var(--amber-line)}
.fest-chip.on .fc-g,.fest-chip.on .fc-n,.fest-chip.on .fc-l{color:var(--amber)}
/* Il puntino dice che quel giorno l'hai deciso tu, non il calendario */
.fest-chip.man{position:relative}
.fest-chip.man::after{content:'';position:absolute;top:4px;right:4px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.fest-hint{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.fest-tag{margin-left:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;
  background:var(--amber-soft);color:var(--amber);vertical-align:middle}