/* ==========================================================================
   MensaSmart.com — Design system

   I colori vengono dal logo: petrolio #186078 e verde #48a878, campionati dai
   pixel di LOGO.png. Il petrolio fa da colore principale perché su bianco ha un
   contrasto di 7,2:1 — ampiamente oltre il minimo di legge — mentre il verde,
   che su bianco si ferma a 2,9:1, è tenuto per riempimenti e gradienti e non per
   il testo. Le sfumature scure sono state schiarite verso il petrolio, così
   anche il grigio dell'interfaccia appartiene alla stessa famiglia.
   ========================================================================== */
:root{
  --bg:#f2f6f7;
  --bg-soft:#e9f0f2;
  --surface:#ffffff;
  --surface-2:#f5f9fa;
  --border:#dde7ea;
  --border-strong:#c6d6db;
  --text:#0e2029;
  --text-2:#4d6975;
  --text-3:#7d959e;

  --accent:#186078;
  --accent-2:#48a878;
  --accent-soft:#e4f0f4;
  --accent-grad:linear-gradient(135deg,#186078 0%,#48a878 100%);

  --green:#2f8f63;  --green-soft:#e4f4ec;
  --amber:#d98200;  --amber-soft:#fff4e2;
  --red:#dc3545;    --red-soft:#fdecee;
  /* tinte di servizio per le etichette: riportate verso la famiglia del logo,
     restano distinguibili fra loro senza stonare col petrolio */
  --cyan:#2b7f96;   --cyan-soft:#e2f1f5;
  --violet:#5f6caf; --violet-soft:#ecedf7;
  --pink:#a3527f;   --pink-soft:#f8eaf1;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-sm:0 1px 2px rgba(19,26,42,.06), 0 1px 3px rgba(19,26,42,.05);
  --sh:0 4px 14px rgba(19,26,42,.07);
  --sh-lg:0 18px 46px rgba(19,26,42,.14);
  --sidebar-w:262px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0a1418;
  --bg-soft:#0f1d23;
  --surface:#132229;
  --surface-2:#1a2c34;
  --border:#254049;
  --border-strong:#31525d;
  --text:#eaf3f5;
  --text-2:#9fb8c1;
  --text-3:#7593a0;
  /* su fondo scuro il petrolio del logo sarebbe illeggibile: si schiarisce
     mantenendo la stessa tinta, e torna sopra 7:1 di contrasto */
  --accent:#5cb8d4;
  --accent-2:#6ec99a;
  --accent-soft:#14313c;
  --green:#4fb383;
  --green-soft:#0f2c22; --amber-soft:#2e2313; --red-soft:#331a1e;
  --cyan-soft:#0d2730; --violet-soft:#221c40; --pink-soft:#301425;
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh:0 6px 18px rgba(0,0,0,.35);
  --sh-lg:0 22px 50px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
/* l'attributo hidden deve sempre vincere sulle regole display dei componenti */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button,a,.check,.date-chip,.shift-card,.dish.pick,.nav-item{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* ============ LOGIN ============ */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.login-bg{position:fixed;inset:0;background:
  radial-gradient(900px 500px at 12% 8%, rgba(72,168,120,.30), transparent 60%),
  radial-gradient(800px 600px at 88% 92%, rgba(24,96,120,.28), transparent 60%),
  var(--bg);}
.login-card{
  position:relative;width:min(460px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-lg);
}
.login-brand{display:block;text-align:center;margin-bottom:24px}
/* il logo ha già i suoi colori e il fondo trasparente: nessun riquadro colorato dietro */
.login-logo{width:100%;max-width:290px;height:auto;display:block;margin:0 auto}
.login-brand h1{font-size:23px}
.login-brand p{color:var(--text-2);font-size:13.5px}
.login-form{display:grid;gap:14px}
.login-error{background:var(--red-soft);color:var(--red);padding:10px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600}
/* crediti: presenti sotto la schermata di accesso e in fondo al menu,
   discreti ma leggibili anche in tema scuro */
.credits{
  margin:16px 0 0;text-align:center;font-size:11.5px;color:var(--text-3);
  letter-spacing:.01em;
}
.sidebar-foot .credits{margin:10px 0 0;font-size:10.5px;opacity:.85}

/* ============ LAYOUT ============ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.03em}
.brand-logo{width:34px;height:34px;flex:none;object-fit:contain;display:block}
.brand-name i{font-style:normal;font-weight:600;color:var(--text-3)}

/* Icone dell'interfaccia: prendono il colore del testo, quindi seguono da sole
   il tema e lo stato attivo delle voci di menu. */
.ico-svg{width:19px;height:19px;display:block;flex:none}
.sidebar-close{display:none}
.nav{flex:1;overflow-y:auto;padding:4px 12px 12px;display:flex;flex-direction:column;gap:2px}
.nav-group{margin:14px 0 4px;padding:0 10px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9.5px 11px;border-radius:var(--r);cursor:pointer;
  color:var(--text-2);font-weight:600;font-size:13.8px;border:none;background:none;width:100%;text-align:left;transition:.14s;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
[data-theme="dark"] .nav-item.active{color:#a9b8ff}
.nav-item .ico{width:19px;display:grid;place-items:center;flex:none}
.nav-item .badge-count{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px}
.sidebar-foot{padding:12px;border-top:1px solid var(--border);display:grid;gap:9px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);background:var(--surface-2)}
.user-chip b{display:block;font-size:13px;line-height:1.25}
.user-chip small{color:var(--text-2);font-size:11.5px}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(8,12,24,.5);z-index:35}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:15px 26px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
}
.topbar-title h2{font-size:19.5px}
.topbar-title p{color:var(--text-2);font-size:12.8px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.today-pill{background:var(--surface);border:1px solid var(--border);padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.menu-toggle{display:none}
.content{padding:24px 26px 60px;max-width:1440px;width:100%}

/* ============ ATOMS ============ */
.icon-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);
  cursor:pointer;display:grid;place-items:center;font-size:15px;transition:.15s;flex:0 0 auto;
}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.icon-btn svg{width:18px;height:18px;color:var(--text-2)}
.icon-btn:hover svg{color:var(--text)}
.icon-btn.btn-x{width:32px;height:32px;font-size:12px;border-radius:9px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9.5px 16px;border-radius:var(--r);
  border:1px solid transparent;font-weight:650;font-size:13.6px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 4px 14px rgba(24,96,120,.28)}
.btn-primary:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.btn-soft{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn-soft:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-2)}
.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--surface-2)}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-danger:hover:not(:disabled){background:var(--red);color:#fff}
.btn-success{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(14,163,107,.28)}
.btn-success:hover:not(:disabled){filter:brightness(1.07)}
.btn-block{width:100%}
.btn-lg{padding:12.5px 20px;font-size:14.6px}
.btn-sm{padding:6.5px 11px;font-size:12.4px;border-radius:9px}
.btn-xl{padding:16px 34px;font-size:16.5px;font-weight:750;border-radius:15px}
.btn-primary.btn-xl{box-shadow:0 8px 24px rgba(24,96,120,.42)}
.btn-primary.btn-xl:not(:disabled){animation:cta 2.6s ease-in-out infinite}
@keyframes cta{0%,100%{box-shadow:0 8px 24px rgba(24,96,120,.42)}50%{box-shadow:0 10px 34px rgba(24,96,120,.66)}}
@media (prefers-reduced-motion:reduce){.btn-primary.btn-xl:not(:disabled){animation:none}}

/* barra di conferma prenotazione — sempre visibile mentre si scorre il menù */
.book-bar{
  position:sticky;bottom:16px;z-index:26;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-xl);
  padding:14px 16px 14px 22px;box-shadow:var(--sh-lg);
}
.book-bar-info{flex:1;min-width:190px}
.book-bar-info b{display:block;font-size:15.5px;letter-spacing:-.02em}
.book-bar-info span{color:var(--text-2);font-size:12.8px;font-weight:600}
.book-bar-info .hint{color:var(--amber);font-weight:700}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.card-head h3{font-size:17px;letter-spacing:-.025em}
.card-head .sub{color:var(--text-2);font-size:12.5px;font-weight:500}
.card-head .spacer{margin-left:auto}

.grid{display:grid;gap:16px}
/* i figli di griglie/flex devono poter scendere sotto la larghezza del contenuto,
   altrimenti tabelle e caroselli scrollabili allargano l'intera pagina su schermi stretti */
.stack,.grid,.row{min-width:0}
.stack>*,.grid>*,.main>*,.card>*{min-width:0;max-width:100%}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row-end{margin-left:auto}
.stack{display:grid;gap:16px}
.mt{margin-top:16px}
.muted{color:var(--text-2)}
.tiny{font-size:12px}
.center{text-align:center}

.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-weight:800;font-size:13.5px;color:#fff;background:var(--accent-grad);
}
.avatar.lg{width:64px;height:64px;font-size:22px}
.avatar.sm{width:30px;height:30px;font-size:11.5px}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.pill.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.pill.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.pill.red{background:var(--red-soft);color:var(--red);border-color:transparent}
.pill.cyan{background:var(--cyan-soft);color:var(--cyan);border-color:transparent}
.pill.violet{background:var(--violet-soft);color:var(--violet);border-color:transparent}
.pill.pink{background:var(--pink-soft);color:var(--pink);border-color:transparent}
.pill.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* diet & allergen chips */
.diet-chips{display:flex;flex-wrap:wrap;gap:5px}
.chip-diet{font-size:11px;font-weight:700;padding:2.5px 8px;border-radius:7px;background:var(--green-soft);color:var(--green)}
.chip-alle{font-size:11px;font-weight:700;padding:2.5px 8px;border-radius:7px;background:var(--amber-soft);color:var(--amber)}
.chip-always{font-size:11px;font-weight:700;padding:2.5px 8px;border-radius:7px;background:var(--cyan-soft);color:var(--cyan)}

/* pasto dell'ultimo minuto: chi non ha prenotato */
.banner.lastminute{background:var(--amber-soft);color:var(--amber);border:1px solid rgba(217,130,0,.28)}
.lm-card{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.banner.reminder{align-items:center}
.banner.reminder .btn{margin-left:auto}

/* prenotazione registrata per un ospite esterno */
.ospite-card{
  border:1px solid var(--border);border-left:4px solid var(--pink);border-radius:var(--r-lg);
  background:var(--surface-2);padding:13px 15px;
}
.chip-warn{background:var(--red-soft);color:var(--red)}

/* forms */
.field{display:grid;gap:6px}
.field>span{font-size:12.5px;font-weight:700;color:var(--text-2)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=email],select,textarea{
  width:100%;padding:10px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface-2);
  transition:.15s;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
textarea{resize:vertical;min-height:74px}

/* nota per la cucina, nel riepilogo della prenotazione.
   Piu' bassa di una textarea normale: e' una riga o due, non un tema, e a
   piena altezza rubava spazio al riepilogo che sta sopra. */
.nota-pasto{margin-top:4px}
.nota-pasto textarea{min-height:52px}
.nota-pasto>span i{font-style:normal;font-weight:600;color:var(--text-3);text-transform:none}

/* anteprima dell'ordine alla cucina: e' testo semplice allineato con gli
   spazi, quindi serve un carattere a larghezza fissa. Scorre DENTRO il proprio
   riquadro (convenzione 5): senza overflow:auto una riga lunga allargherebbe
   la finestra e con lei tutta la pagina. */
.ordine-testo{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;white-space:pre;overflow:auto;max-height:52vh;
  margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2);color:var(--text);
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b94a8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.check{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);cursor:pointer;font-size:13px;font-weight:600}
.check input{accent-color:var(--accent);width:16px;height:16px}
.check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:3px;gap:3px}
.seg button{border:none;background:none;padding:6.5px 13px;border-radius:9px;font-size:12.8px;font-weight:650;color:var(--text-2);cursor:pointer}
.seg button.active{background:var(--surface);color:var(--text);box-shadow:var(--sh-sm)}

/* ============ KPI ============ */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:92px;height:92px;border-radius:50%;background:var(--accent-soft);opacity:.7}
.kpi>*{position:relative}
.kpi .kpi-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--accent-soft);margin-bottom:11px}
.kpi .kpi-val{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.kpi .kpi-lab{color:var(--text-2);font-size:12.6px;font-weight:600;margin-top:2px}
.kpi .kpi-delta{margin-top:9px;font-size:11.8px;font-weight:700}
.kpi .kpi-delta.up{color:var(--green)} .kpi .kpi-delta.down{color:var(--red)}

/* ============ TABLE ============ */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:13.4px;min-width:560px}
thead th{
  text-align:left;padding:11px 14px;background:var(--surface-2);color:var(--text-2);
  font-size:11.4px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;white-space:nowrap;
}
tbody td{padding:12px 14px;border-top:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ============ DISH CARD ============ */
.dish{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:.16s;display:flex;flex-direction:column}
.dish:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.dish-photo{aspect-ratio:16/10;background:var(--surface-2);position:relative;overflow:hidden}
.dish-photo img{width:100%;height:100%;object-fit:cover}
.dish-photo .cat-tag{position:absolute;left:9px;top:9px;background:rgba(10,14,26,.72);color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;backdrop-filter:blur(6px)}
/* kcal nel corpo della card, accanto alle azioni */
.kcal-pill{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12.2px;font-weight:750;color:var(--amber);background:var(--amber-soft);
  padding:4.5px 11px;border-radius:99px;
}

/* cuore preferiti */
.fav-btn{
  position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);font-size:16px;line-height:1;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(10,14,26,.28);transition:.15s;padding:0;
}
.fav-btn:hover{transform:scale(1.12);background:#fff}
.fav-btn.on{background:#fff}

/* indicatore affluenza sulla home */
.affluenza{border-left:5px solid var(--green)}
.affluenza.amber{border-left-color:var(--amber)}
.affluenza.red{border-left-color:var(--red)}
.aff-dot{width:13px;height:13px;border-radius:50%;background:var(--green);flex:0 0 auto;box-shadow:0 0 0 5px var(--green-soft)}
.affluenza.amber .aff-dot{background:var(--amber);box-shadow:0 0 0 5px var(--amber-soft)}
.affluenza.red .aff-dot{background:var(--red);box-shadow:0 0 0 5px var(--red-soft)}
.affluenza .aff-dot{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.affluenza .aff-dot{animation:none}}
.dish-body{padding:13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.dish-body h4{font-size:14.6px;line-height:1.3}
.dish-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-3);
}
.dish-desc{color:var(--text-2);font-size:12.4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish-foot{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:4px}

/* selectable dish (booking) */
.pick{cursor:pointer;position:relative;border:2px solid var(--border)}
.pick:hover{border-color:var(--border-strong)}
.pick.selected{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pick.selected .dish-photo::after{
  content:"✓";position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800;
  box-shadow:0 3px 10px rgba(10,14,26,.35);
}
.pick.blocked{opacity:.55}

/* ============ MISC ============ */
.progress{height:7px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:99px;background:var(--accent-grad);transition:width .4s}
.progress.green>span{background:var(--green)} .progress.amber>span{background:var(--amber)} .progress.red>span{background:var(--red)}

.macro-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--bg-soft)}
.macro-bar i{display:block;height:100%}
.macro-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.8px;font-weight:600;color:var(--text-2)}
.macro-legend s{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

.date-strip{display:flex;gap:9px;overflow-x:auto;padding:3px 3px 9px;max-width:100%}
.date-chip{
  flex:0 0 auto;min-width:78px;padding:10px 12px;border-radius:var(--r);border:1.5px solid var(--border);
  background:var(--surface);cursor:pointer;text-align:center;transition:.15s;
}
.date-chip:hover{border-color:var(--border-strong)}
.date-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.date-chip.disabled{opacity:.4;cursor:not-allowed}
.date-chip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.date-chip small{display:block;font-size:10.8px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text-3)}
.date-chip.active small{color:var(--accent)}
.date-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--green);margin:4px auto 0}
/* giornata di chiusura: resta visibile ma inequivocabilmente non selezionabile */
.date-chip.chiusa{
  border-style:dashed;border-color:var(--red);background:var(--red-soft);color:var(--red);opacity:.85;
}
.date-chip.chiusa b{text-decoration:line-through;opacity:.8}
.date-chip.chiusa small{color:var(--red);font-weight:800}

/* elenco chiusure nelle impostazioni */
.chiusura-riga{
  gap:10px;padding:9px 12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border);
}
.chiusura-riga.passata{opacity:.55}
.giorno-chiuso{
  border-color:var(--red) !important;background:var(--red-soft);
  display:flex;flex-direction:column;gap:8px;
}

/* ---- procedura guidata di prenotazione ----
   La barra dei pallini di avanzamento (`.stepper` / `.step-dot`) è stata tolta
   il 3 settembre 2026, con le sue regole: su telefono gli otto riquadri
   scorrevano di lato e se ne vedevano tre e mezzo, una fila di numeri tagliata
   a metà sopra la domanda vera. A che punto si è lo dice `.step-head` qui
   sotto, a parole. */
.step-head{margin-bottom:20px}
.step-head .step-count{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:99px;margin-bottom:11px;
}
.step-head h2{display:flex;align-items:center;gap:11px;font-size:29px;letter-spacing:-.035em;line-height:1.15}
.step-head h2 .em{font-size:32px;line-height:1}
.step-head p{color:var(--text-2);font-size:14.5px;margin-top:6px;max-width:62ch}

.riepilogo-riga{gap:12px;border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 13px;background:var(--surface-2)}
.riepilogo-riga.vuota{border-style:dashed;background:transparent}
.riepilogo-riga img{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.riepilogo-riga .cat-lab{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
}
.riepilogo-riga b{display:block;font-size:15px;letter-spacing:-.02em}

/* ==========================================================================
   FOGLIO DATI — tabella ordinabile con filtri di colonna
   ========================================================================== */
.foglio{min-width:1330px}
.foglio thead th{padding:0;vertical-align:middle;position:sticky;top:0;z-index:2;background:var(--surface-2)}
.foglio .th-sort{
  width:100%;display:flex;align-items:center;gap:6px;justify-content:space-between;
  border:none;background:none;cursor:pointer;padding:11px 12px;
  font-size:11.4px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
}
.foglio .th-sort:hover{color:var(--text);background:var(--bg-soft)}
.foglio .th-sort i{font-style:normal;font-size:10px;opacity:.45}
.foglio .th-sort.on{color:var(--accent)}
.foglio .th-sort.on i{opacity:1}
.foglio .riga-filtri th{padding:6px 7px;background:var(--surface);border-bottom:1px solid var(--border);top:41px}
.foglio .riga-filtri input,.foglio .riga-filtri select{
  width:100%;min-height:0;padding:6px 9px;font-size:12.2px;border-radius:8px;background:var(--surface-2);
}
.foglio .riga-filtri select{padding-right:24px;background-position:right 7px center}
.foglio tbody td{white-space:nowrap;font-size:12.8px}
.foglio tbody td.tiny{white-space:normal}

@media (max-width:820px){
  .foglio .riga-filtri input,.foglio .riga-filtri select{font-size:16px;padding:9px 10px}
  .foglio .riga-filtri select{padding-right:26px}
  .foglio .riga-filtri th{top:43px}
}

/* ==========================================================================
   HOME DIPENDENTE — priorità alla prenotazione
   ========================================================================== */

/* separatore delle sezioni secondarie */
.sec-title{
  display:flex;align-items:center;gap:12px;margin:14px 0 -4px;
  color:var(--text-3);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* scheda di oggi: unica, grande, con l'azione a destra */
.oggi-card{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-radius:var(--r-xl);padding:24px 26px;border:2px solid var(--border);background:var(--surface);
}
.oggi-card .oggi-main{flex:1;min-width:250px}
.oggi-card .lab{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:7px;
}
.oggi-card h2{font-size:23px;letter-spacing:-.03em;line-height:1.2}
.oggi-card p{color:var(--text-2);font-size:14.5px;margin-top:7px;max-width:60ch}
.oggi-card .oggi-side{display:grid;gap:9px;align-content:center}
.oggi-card .oggi-side .btn{white-space:nowrap}

.oggi-card.daprenotare{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.oggi-card.daprenotare .lab{color:var(--accent)}
.oggi-card.lastminute{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft);background:var(--amber-soft)}
.oggi-card.lastminute .lab{color:var(--amber)}
.oggi-card.lastminute p b{color:var(--amber)}
.oggi-card.chiuso{border-style:dashed;opacity:.9}

.oggi-card.prenotato{
  border-color:transparent;background:var(--accent-grad);color:#fff;
  box-shadow:0 14px 34px rgba(24,96,120,.28);
}
.oggi-card.prenotato .lab{color:rgba(255,255,255,.85)}
.oggi-card.prenotato .oggi-code{
  font-size:44px;font-weight:800;letter-spacing:.05em;line-height:1.05;font-variant-numeric:tabular-nums;
}
.oggi-card.prenotato .oggi-turno{font-size:16px;font-weight:700;opacity:.95;margin-top:2px}
.oggi-card.prenotato .oggi-piatti{font-size:13.8px;opacity:.9;margin-top:9px}
.oggi-card.prenotato .oggi-side{justify-items:stretch}

/* calendario della settimana */
.week-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.day-card{
  border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:15px;display:flex;flex-direction:column;gap:10px;min-height:210px;transition:.15s;
}
.day-card:hover{border-color:var(--border-strong);box-shadow:var(--sh)}
.day-card.today{border-color:var(--accent)}
.day-card.ok{border-color:var(--green);background:var(--green-soft)}
.day-card.todo{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.day-card .dc-top{display:flex;align-items:baseline;gap:9px}
.day-card .dc-top b{font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1}
.day-card .dc-top span{
  font-size:12.5px;font-weight:700;color:var(--text-2);display:flex;flex-direction:column;line-height:1.25;
}
.day-card .dc-top span i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.day-card .oggi-tag{
  margin-left:auto;font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  background:var(--accent);color:#fff;padding:3px 8px;border-radius:99px;
}
.day-card .dc-stato{font-size:12.5px;font-weight:750;display:flex;align-items:center;gap:7px}
.day-card .dc-stato span{margin-left:auto;font-weight:700;opacity:.8}
.day-card .dc-stato.ok{color:var(--green)}
.day-card .dc-stato.todo{color:var(--amber)}
.day-card .dc-stato.off{color:var(--text-3);font-weight:600}
.day-card .dc-menu{display:grid;gap:3px}
.day-card .dc-azione{margin-top:auto}

/* indicatori compatti delle sezioni secondarie */
.mini-stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:13px 15px;display:grid;gap:1px;
}
.mini-stat .ico{font-size:15px;opacity:.75}
.mini-stat b{font-size:21px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.mini-stat .lab{color:var(--text-2);font-size:12.2px;font-weight:600}

@media (max-width:620px){
  .oggi-card{padding:19px 17px;gap:16px}
  .oggi-card h2{font-size:20px}
  .oggi-card .oggi-side{width:100%}
  .oggi-card .oggi-side .btn{width:100%}
  .oggi-card.prenotato .oggi-code{font-size:38px}
  .week-grid{grid-template-columns:1fr}
  .day-card{min-height:0}
}

/* ---- schermata finale di conferma ---- */
.done-wrap{max-width:620px;margin:0 auto;width:100%}
.done-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:34px 28px 28px;box-shadow:var(--sh);text-align:center;
}
.done-check{
  width:76px;height:76px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:40px;font-weight:800;
  box-shadow:0 10px 28px rgba(14,163,107,.36);animation:pop-in .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-in{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.done-check{animation:none}}
.done-panel h2{font-size:27px;letter-spacing:-.035em}
.done-panel>p{color:var(--text-2);font-size:14.5px;margin-top:5px}

.done-ticket{
  margin:22px 0;padding:20px;border-radius:var(--r-lg);background:var(--accent-grad);color:#fff;
  display:grid;gap:3px;box-shadow:0 12px 30px rgba(24,96,120,.3);
}
.done-ticket .lab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.done-ticket .code{font-size:46px;font-weight:800;letter-spacing:.05em;line-height:1.05;font-variant-numeric:tabular-nums}
.done-ticket .turno{font-size:15px;font-weight:700;opacity:.95}
.done-ticket .nota{font-size:12px;font-weight:600;opacity:.8;margin-top:6px}

.done-dishes{display:grid;gap:9px;text-align:left}
.done-dish{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border)}
.done-dish img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.done-dish span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.done-dish b{display:block;font-size:14.5px;letter-spacing:-.02em}
.done-kcal{margin-top:11px;color:var(--text-2);font-size:13.5px;font-weight:700}

.done-actions{display:grid;gap:10px;margin-top:22px}
.done-actions .btn-xl{min-height:60px;font-size:17.5px}

@media (max-width:620px){
  .done-panel{padding:26px 18px 22px}
  .done-panel h2{font-size:23px}
  .done-ticket .code{font-size:40px}
  .done-actions .btn-xl{min-height:62px}
  .done-actions .row .btn{min-height:48px}
}

/* ---- turni: l'orario è l'informazione principale ---- */
.shift-card{
  border:2px solid var(--border);border-radius:var(--r-lg);padding:16px 17px;cursor:pointer;
  background:var(--surface);transition:.15s;display:grid;gap:8px;
}
.shift-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--sh)}
.shift-card.active{border-color:var(--accent);background:var(--accent-soft)}
.shift-card.full{opacity:.5;cursor:not-allowed}
.shift-card.full:hover{transform:none;box-shadow:none;border-color:var(--border)}
.shift-time{
  font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:6px;
}
.shift-time i{font-style:normal;font-size:.62em;color:var(--text-3);font-weight:700}
.shift-card.active .shift-time{color:var(--accent)}
.shift-name{font-size:15px;font-weight:700;color:var(--text-2)}
.shift-card.active .shift-name{color:var(--accent)}
.shift-seats{font-size:12.8px;color:var(--text-2);font-weight:600}
.shift-seats b{color:var(--green)}
.shift-seats b.full{color:var(--red)}

.empty{display:grid;place-items:center;gap:10px;padding:52px 20px;text-align:center;color:var(--text-2)}
.empty .em{font-size:44px;opacity:.65}
.empty h3{font-size:16px;color:var(--text)}

.ticket{
  border-radius:var(--r-lg);padding:18px;color:#fff;background:var(--accent-grad);
  box-shadow:0 12px 30px rgba(24,96,120,.3);position:relative;overflow:hidden;
}
.ticket::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.ticket .code{font-size:34px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* queue */
.queue-card{border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:var(--r-lg);background:var(--surface);padding:14px 16px;display:flex;gap:14px;align-items:center;box-shadow:var(--sh-sm)}
.queue-card.warn{border-left-color:var(--amber)}
.queue-card.late{border-left-color:var(--red)}
.queue-card.done{border-left-color:var(--green);opacity:.62}
.queue-num{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:15px;flex:0 0 auto}
.queue-main{flex:1;min-width:0}
.queue-main b{font-size:14.8px}
.queue-items{color:var(--text-2);font-size:12.4px;margin-top:3px;overflow:hidden;text-overflow:ellipsis}

/* charts */
.chart{width:100%;overflow:visible}
.chart text{font-family:var(--font);fill:var(--text-3);font-size:10.5px;font-weight:600}
.chart .axis-line{stroke:var(--border);stroke-width:1}
.chart .grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4;opacity:.75}
.chart .bar{fill:url(#gradAccent);transition:.2s}
.chart .bar:hover{opacity:.82}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.2px;font-weight:600;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}

/* ============ AZIONI MULTIPLE (amministratore) ============ */
.bulk-bar{
  position:sticky;top:74px;z-index:22;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r-lg);background:var(--accent-soft);
  border:1.5px solid var(--accent);box-shadow:var(--sh);
}
.bulk-bar b{color:var(--accent);font-size:14px}
/* .sel-all è stato tolto insieme alla casella nell'intestazione della tabella
   delle consegne: ora «Seleziona tutte» è un pulsante normale nella barra in
   alto. Regola rimossa per non lasciare stile senza markup, che al prossimo
   giro fa cercare un elemento che non esiste. */
tbody tr.riga-sel{background:var(--accent-soft)}
tbody tr.riga-sel:hover{background:var(--accent-soft)}

/* le portate scritte per esteso, una per riga, nella lista del bancone */
.pasto-elenco{display:flex;flex-direction:column;gap:2px}
.pasto-elenco span{font-size:13px;line-height:1.35;white-space:nowrap}
/* i riquadri per turno si distinguono a colpo d'occhio scorrendo la pagina */
.turno-blocco+.turno-blocco{margin-top:0}
.turno-blocco .card-head h3{font-size:16px}
.turno-blocco .pill.muted{background:var(--bg-soft);color:var(--text-3)}
@media (max-width:820px){ .bulk-bar{top:0} }

/* ============ PRENOTA PER ALTRI ============ */
.team-list{display:grid;gap:7px;max-height:420px;overflow-y:auto;padding-right:3px}
.team-riga{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:.12s;
}
.team-riga:hover{border-color:var(--border-strong)}
.team-riga.on{border-color:var(--accent);background:var(--accent-soft)}
.team-riga.gia{opacity:.55;cursor:default}
.team-riga.gia:hover{border-color:var(--border)}
.team-riga b{font-size:13.6px}
.team-check{
  width:24px;height:24px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;
  border:2px solid var(--border-strong);font-size:14px;font-weight:800;color:transparent;background:var(--surface);
}
.team-riga.on .team-check{background:var(--accent);border-color:var(--accent);color:#fff}
.team-riga.gia .team-check{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:620px){
  .team-list{max-height:none}
  .team-riga{padding:12px}
  .team-check{width:28px;height:28px}
}

/* ============ REGISTRAZIONE, PRIVACY, POSTA ============ */
.login-registrati{
  margin-top:13px;text-align:center;font-size:13px;color:var(--text-2);
}
.login-privacy{margin-top:14px;text-align:center;font-size:12px}
.login-privacy .link-btn{color:var(--text-3);font-weight:600}
.link-btn{
  background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.link-btn:hover{opacity:.8}

/* riquadro scorrevole dell'informativa: il testo è lungo per natura */
.privacy-box{
  max-height:190px;overflow-y:auto;padding:13px 15px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;line-height:1.65;color:var(--text-2);white-space:pre-wrap;
}
.pwd-temp{
  padding:16px;border-radius:var(--r-lg);background:var(--accent-soft);text-align:center;
  border:1px dashed var(--accent);
}
.pwd-temp span{
  display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}
.pwd-temp b{
  display:block;font-size:30px;font-weight:800;letter-spacing:.02em;color:var(--text);
  line-height:1.25;word-break:break-word;
}
.pwd-temp i{
  display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--text-2);
}

/* campo password con il pulsante “mostra” accanto */
.pwd-riga{display:flex;gap:8px;align-items:stretch}
.pwd-riga input{flex:1;min-width:0}
.pwd-occhio{flex:none;white-space:nowrap;font-size:13px;padding:0 13px}

/* riquadro di aiuto alla scelta della password: testo grande e leggibile,
   il pubblico di questa app non è fatto di informatici */
.pwd-aiuto{
  padding:14px 16px;border-radius:var(--r-lg);background:var(--surface-2);
  border:1px solid var(--border);font-size:14px;line-height:1.6;color:var(--text-2);
}
.pwd-aiuto b{color:var(--text)}
.pwd-aiuto p{margin:7px 0 0}
.pwd-aiuto i{font-style:normal;font-weight:700;color:var(--accent)}

.posta-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.posta-lista{max-height:520px;overflow-y:auto}
.posta-voce{
  display:block;width:100%;text-align:left;padding:11px 15px;border:none;background:none;
  border-bottom:1px solid var(--border);cursor:pointer;font-family:inherit;transition:.12s;
}
.posta-voce:hover{background:var(--surface-2)}
.posta-voce.attiva{background:var(--accent-soft)}
.posta-voce b{display:block;font-size:13px;color:var(--text)}
.posta-voce span{display:block;font-size:12px;color:var(--text-2);margin:2px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posta-voce i{font-style:normal;font-size:11px;color:var(--text-3)}
.posta-corpo{
  margin:0;padding:15px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);font-size:12.5px;line-height:1.7;color:var(--text);
  white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  max-height:420px;overflow-y:auto;
}
@media (max-width:820px){
  .posta-grid{grid-template-columns:1fr}
  .posta-lista{max-height:260px}
}

/* ============ FOGLIO PRESENZE ============
   Prospetto mensile per società: molte colonne strette, una per giorno.
   Scorre dentro .table-wrap, quindi non allarga mai la pagina. */
.presenze{font-size:12.5px;border-collapse:collapse}
.presenze th,.presenze td{border:1px solid var(--border);padding:4px 6px}
.presenze thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  font-size:11px;text-transform:none;letter-spacing:0;
}
.presenze .pres-g{width:26px;min-width:26px;text-align:center;padding:3px 0;line-height:1.15}
.presenze .pres-g b{display:block;font-size:12px;font-weight:750}
.presenze .pres-g i{display:block;font-style:normal;font-size:9px;color:var(--text-3);text-transform:uppercase}
.presenze .pres-nome{min-width:170px;white-space:nowrap}
.presenze .pres-mat{width:64px;color:var(--text-2);font-variant-numeric:tabular-nums}
.presenze .pres-tot{width:52px;background:var(--surface-2)}
.presenze .pres-c{
  width:26px;min-width:26px;text-align:center;font-weight:750;
  font-variant-numeric:tabular-nums;color:var(--text-3);
}
.presenze .pres-c.consegnata{color:var(--green)}
.presenze .pres-c.prenotata,.presenze .pres-c.in_coda{color:var(--accent)}
.presenze .pres-c.no_show{color:var(--red)}
.presenze .pres-c.multi{color:var(--amber);background:var(--amber-soft)}
.presenze td.festivo,.presenze th.festivo{background:var(--surface-2)}
.presenze tbody tr:hover td{background:var(--accent-soft)}
.presenze .pres-gruppo td{
  background:var(--accent-soft);color:var(--accent);font-weight:750;font-size:12.5px;
  position:sticky;left:0;
}
.presenze .pres-somma td{background:var(--surface-2);font-weight:700}
.presenze .pres-totale td{
  background:var(--text);color:var(--surface);font-weight:800;font-size:13px;
}
.presenze .pres-totale td.festivo{background:var(--text)}
@media (max-width:820px){
  .presenze .pres-nome{min-width:130px}
}

/* ============ SCHEDE DELLE IMPOSTAZIONI ============
   flex-wrap e non scorrimento orizzontale: su telefono le schede vanno a capo,
   così la pagina non sborda mai in larghezza */
.imp-tabs{
  display:flex;flex-wrap:wrap;gap:7px;padding:5px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border);
}
.imp-tab{
  display:flex;align-items:center;gap:7px;padding:9px 14px;min-height:42px;
  border:1px solid transparent;border-radius:var(--r);background:transparent;
  color:var(--text-2);font-size:13.5px;font-weight:650;cursor:pointer;transition:.14s;
  font-family:inherit;
}
.imp-tab .ico{font-size:15px;line-height:1}
.imp-tab:hover{background:var(--surface);color:var(--text)}
.imp-tab.active{
  background:var(--surface);color:var(--accent);border-color:var(--border);
  box-shadow:0 1px 3px rgba(17,24,45,.07);
}
@media (max-width:820px){
  .imp-tabs{gap:5px;padding:4px}
  .imp-tab{flex:1 1 auto;justify-content:center;padding:9px 10px;font-size:12.5px}
}

/* diagnostica del lettore, in impostazioni */
.badge-prova{
  padding:16px;border-radius:var(--r-lg);background:var(--surface-2);
  border:2px dashed var(--border-strong);text-align:center;min-height:96px;
  display:grid;place-items:center;gap:6px;
}
.badge-prova .code{font-size:30px;font-weight:800;letter-spacing:.1em;font-variant-numeric:tabular-nums;word-break:break-all}
.badge-prova .attesa{font-size:15px;color:var(--text-3);font-weight:600}

@media (max-width:620px){
  .badge-prova .code{font-size:24px}
}

/* ============ MONITOR BANCONE (postazione addetto) ============ */
.banco-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:16px;align-items:start}

.serving{
  background:var(--surface);border:2px solid var(--accent);border-radius:var(--r-xl);
  box-shadow:0 0 0 4px var(--accent-soft);overflow:hidden;
}
.serving.vuoto{
  border-color:var(--border);box-shadow:none;display:grid;place-items:center;
  gap:8px;padding:70px 24px;text-align:center;color:var(--text-2);
}
.serving.vuoto .em{font-size:52px;opacity:.6}
.serving.vuoto h3{font-size:18px;color:var(--text)}
.serving-head{padding:20px 22px;border-bottom:1px solid var(--border);background:var(--accent-soft)}
.serving-head .lab{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
/* il nome ha preso il posto del codice come informazione principale del bancone */
.serving-name{
  font-size:clamp(24px,3.4vw,40px);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;color:var(--accent);
}

.serving-dishes{padding:16px 22px;display:grid;gap:10px}
.serve-row{
  display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border);
}
.serve-row.warn{border-color:var(--red);background:var(--red-soft)}
.serve-row img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.serve-row .cat{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
}
.serve-row b{display:block;font-size:clamp(16px,1.9vw,20px);letter-spacing:-.02em;line-height:1.25}

.serving-actions{
  padding:16px 22px 20px;display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);
}
.serving-actions .btn-xl{flex:1;min-width:210px}

/* prossimi in fila, versione compatta */
.queue-mini{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border)}
.queue-mini .pos{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text-2);
}
.queue-mini b{font-size:13.5px;font-variant-numeric:tabular-nums}

/* memoria dell'ultima consegna */
.last-served{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-radius:var(--r-lg);background:var(--surface-2);
  border:1px dashed var(--border-strong);
}
.last-served.vuoto{opacity:.75}
.last-served .ls-lab{
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.last-served .ls-code{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--green)}
.last-served .ls-name{font-size:13.2px;font-weight:700}
.last-served .ls-dishes{font-size:12.3px;color:var(--text-2);flex:1;min-width:140px}
.last-served .ls-time{font-size:12.3px;color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .banco-grid{grid-template-columns:1fr}
  .serving-actions .btn-xl{min-width:100%}
}

/* ============ MONITOR SALA ============ */
.monitor{display:grid;gap:18px}
.mon-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mon-clock{margin-left:auto;font-size:clamp(28px,4vw,46px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.mon-top{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.mon-now{
  background:var(--accent-grad);color:#fff;border-radius:var(--r-xl);padding:clamp(22px,4vw,44px);
  text-align:center;position:relative;overflow:hidden;display:grid;align-content:center;gap:4px;
}
.mon-now::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.mon-now>*{position:relative}
.mon-now .lab{font-size:clamp(12px,1.4vw,16px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
/* qui ora c'è un nome, non più un codice a cifre: serve una misura che regga
   anche "Alessandro B." senza sfondare il riquadro */
.mon-now .code{
  font-size:clamp(34px,6.4vw,86px);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;word-break:break-word;
}
.mon-now .who{font-size:clamp(15px,2vw,24px);font-weight:700;opacity:.95}
.lab-next{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.mon-next{display:grid;gap:9px;align-content:start}
.mon-next-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 16px;display:flex;align-items:center;gap:14px;
}
.mon-next-item.first{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mon-next-item b{font-size:clamp(20px,2.4vw,29px);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mon-next-item span{font-size:14px;font-weight:600;color:var(--text-2)}
.mon-empty{padding:30px;text-align:center;color:var(--text-2);font-weight:600;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.mon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mon-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(16px,2.4vw,26px);text-align:center}
.mon-stat b{display:block;font-size:clamp(32px,5vw,60px);font-weight:800;line-height:1;letter-spacing:-.04em}
.mon-stat b i{font-size:.42em;font-style:normal;font-weight:700;margin-left:3px;color:var(--text-3)}
.mon-stat span{color:var(--text-2);font-size:clamp(11px,1.2vw,14px);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mon-stat.green b{color:var(--green)} .mon-stat.amber b{color:var(--amber)} .mon-stat.red b{color:var(--red)}
.mon-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 20px}
.mon-menu-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.mon-dish{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 14px 5px 5px;font-size:13.5px;font-weight:600}
.mon-dish img{width:28px;height:28px;border-radius:50%;object-fit:cover}
/* schermo intero: via cornice dell'app */
body.mon-full .sidebar,body.mon-full .topbar,body.mon-full .sidebar-backdrop{display:none !important}
body.mon-full .content{padding:22px;max-width:none}
body.mon-full .mon-head .btn{display:none}
@media (max-width:900px){
  .mon-top{grid-template-columns:1fr}
  .mon-stats{grid-template-columns:repeat(2,1fr)}
}

/* modal */
.modal-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.55);backdrop-filter:blur(3px)}
.modal{
  position:relative;background:var(--surface);border-radius:var(--r-xl);width:min(720px,100%);max-height:88vh;
  display:flex;flex-direction:column;box-shadow:var(--sh-lg);border:1px solid var(--border);animation:pop .18s ease-out;
}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:17px;flex:1}
.modal-body{padding:22px;overflow-y:auto}
.modal-foot{padding:15px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.modal-foot:empty{display:none}
.modal.wide{width:min(980px,100%)}

/* toast */
.toast-root{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:10px}
.toast{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r);
  padding:12px 16px;box-shadow:var(--sh-lg);font-size:13.4px;font-weight:600;min-width:250px;animation:slide .2s ease-out;
}
.toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--red)} .toast.warn{border-left-color:var(--amber)}
@keyframes slide{from{transform:translateX(24px);opacity:0}}

/* Valori nutrizionali — RIMPICCIOLITI il 3 settembre 2026, su telefono e su PC.

   Erano sei riquadri alti, su due righe: nel riepilogo della prenotazione
   occupavano più spazio dei piatti scelti, che sono la cosa da guardare. Sono
   un'informazione di contorno e devono somigliare a una nota, non a un
   cruscotto.

   Il valore e la sua etichetta stanno ora sulla STESSA riga ("970 kcal"): è il
   modo in cui si leggono comunque, e fa una cella alta 30px invece di 62.
   Le tre misure che pesano davvero — proteine, carboidrati, grassi — restano
   anche nella barra qui sotto, con i colori: chi guarda quelle non perde
   niente.

   La misura delle celle non è a occhio: "137 g carboidrati" è la voce più
   larga, e le tre colonne sono dimensionate perché ci stia in UNA riga anche
   su un telefono da 375px. Allargando la scritta di mezzo punto le etichette
   vanno a capo, e sei celle su due righe tornano a occupare quanto prima. */
/* `align-content:start` non è un dettaglio: nel riepilogo questa griglia sta
   dentro una .stack che è a sua volta una griglia, e senza di lui le righe si
   stiravano per riempire l'altezza della colonna accanto — celle da 64px al
   posto di 30, cioè il rimpicciolimento annullato proprio da PC. */
.nutri-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:5px;align-content:start;
}
.nutri-cell{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:4px 6px;display:flex;align-items:baseline;justify-content:center;gap:4px;
}
.nutri-cell b{font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.nutri-cell small{color:var(--text-2);font-size:10px;font-weight:600}

.ing-list{display:flex;flex-wrap:wrap;gap:6px}
.ing{background:var(--surface-2);border:1px solid var(--border);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600}

.banner{padding:12px 15px;border-radius:var(--r);font-size:13px;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.banner.warn{background:var(--amber-soft);color:var(--amber)}
.banner.err{background:var(--red-soft);color:var(--red)}
.banner.info{background:var(--accent-soft);color:var(--accent)}
.banner.ok{background:var(--green-soft);color:var(--green)}

.photo-drop{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:18px;text-align:center;cursor:pointer;background:var(--surface-2);transition:.15s}
.photo-drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.photo-prev{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);border:1px solid var(--border)}

.day-cell{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:13px;display:grid;gap:9px;min-height:150px}
.day-cell.today{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.day-cell .dc-head{display:flex;align-items:baseline;gap:7px}
.day-cell .dc-head b{font-size:17px;letter-spacing:-.03em}
.day-cell .dc-head span{font-size:11.5px;text-transform:uppercase;font-weight:700;color:var(--text-3);letter-spacing:.05em}
.mini-dish{font-size:12.2px;color:var(--text-2);display:flex;gap:6px;align-items:center}
.mini-dish s{width:6px;height:6px;border-radius:2px;background:var(--accent);flex:0 0 auto;}

/* ============ BARRA INFERIORE (mobile) ============ */
.tabbar{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){ .g-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:980px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr !important}
}

@media (max-width:820px){
  /* --- struttura --- */
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--sh-lg);width:min(300px,86vw)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .sidebar-backdrop{display:block}
  .sidebar-close{display:grid}
  .menu-toggle{display:grid}
  .topbar{padding:11px 14px}
  .today-pill{display:none}
  .content{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}

  /* --- barra di navigazione inferiore --- */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:34;
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);box-shadow:0 -4px 22px rgba(19,26,42,.09);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .app.nav-open .tabbar{display:none}
  .tabbar button{
    flex:1;min-width:0;min-height:54px;display:grid;gap:3px;justify-items:center;align-content:center;
    border:none;background:none;border-radius:13px;cursor:pointer;padding:6px 3px;
    color:var(--text-3);font-size:10.5px;font-weight:750;
  }
  .tabbar button .ico{line-height:1;position:relative;display:grid;place-items:center}
  .tabbar button .ico-svg{width:22px;height:22px}
  .tabbar button .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar button.active{color:var(--accent);background:var(--accent-soft)}
  .tabbar button:active{transform:scale(.94)}
  .tb-badge{
    position:absolute;top:-4px;right:-11px;background:var(--red);color:#fff;font-style:normal;
    font-size:9.5px;font-weight:800;min-width:16px;height:16px;border-radius:99px;
    display:grid;place-items:center;padding:0 4px;
  }

  /* --- bersagli tattili --- */
  body{font-size:15.5px}
  .btn{min-height:46px;padding:12px 18px;font-size:15px;border-radius:13px}
  .btn-sm{min-height:40px;padding:9px 14px;font-size:13.6px;border-radius:11px}
  .btn-lg,.btn-xl{min-height:54px;font-size:16.5px}
  .icon-btn{width:44px;height:44px;font-size:17px}
  .icon-btn.btn-x{width:42px;height:42px;font-size:14px}
  .btn:active,.icon-btn:active{transform:scale(.96)}

  /* 16px evita lo zoom automatico dei campi su iOS */
  input[type=text],input[type=password],input[type=number],input[type=date],
  input[type=time],input[type=email],select,textarea{font-size:16px;padding:13px 14px;min-height:48px}
  .check{min-height:48px;padding:12px 14px;font-size:14.4px}
  .check input{width:21px;height:21px}
  .field>span{font-size:13px}

  .seg{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{min-height:42px;padding:9px 16px;font-size:14px;white-space:nowrap}

  .nav-item{min-height:50px;font-size:15.2px;padding:12px 13px}
  .nav-item .ico{width:22px}
  .nav-item .ico-svg{width:21px;height:21px}

  /* --- componenti --- */
  .card-head{padding:14px 16px}
  .card-pad{padding:16px}
  .fav-btn{width:44px;height:44px;font-size:19px;right:7px;top:7px}
  .kcal-pill{font-size:13px;padding:6px 12px}
  .date-strip{scroll-snap-type:x mandatory;gap:10px;padding-bottom:10px}
  .date-chip{min-width:92px;padding:13px 14px;scroll-snap-align:start}
  .date-chip b{font-size:22px}
  /* LA BARRA DEI COMANDI DEVE STARE SOPRA LA NAVIGAZIONE IN BASSO.
     `bottom:16px` la incollava a 16px dal fondo dello schermo, cioe' dentro i
     65px occupati dalla tabbar, che essendo `fixed` con z-index piu' alto le
     finiva sopra: il pulsante "Avanti" c'era, era disegnato, e non si vedeva.
     Segnalato dall'utente il 31 agosto 2026.
     L'altezza della tabbar e' 5 + 54 + 5 piu' la tacca del telefono, e va
     tenuta in conto anche qui: senza env(), sugli iPhone recenti il problema
     tornerebbe identico solo su quei modelli. */
  .book-bar{bottom:calc(72px + env(safe-area-inset-bottom))}

  .shift-card{padding:17px 18px}
  .shift-time{font-size:34px}
  .shift-name{font-size:16px}
  .shift-seats{font-size:13.5px}
  /* la procedura guidata: intestazioni ben leggibili anche su schermo stretto */
  .step-head h2{font-size:25px}
  .step-head h2 .em{font-size:28px}
  .step-head p{font-size:14.2px}
  .step-head .step-count{font-size:11.5px;padding:5px 12px}
  tbody td{padding:14px}
  .modal-body{padding:18px}
  .empty{padding:40px 18px}
}

@media (max-width:620px){
  .g-2,.g-3{grid-template-columns:1fr}
  /* gli indicatori restano a due colonne: impilarli allungherebbe troppo la pagina */
  .g-4{grid-template-columns:repeat(2,1fr)}
  .kpi{padding:15px}
  .kpi .kpi-val{font-size:23px}
  .kpi .kpi-ico{width:34px;height:34px;font-size:16px;margin-bottom:9px}

  .toast-root{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom))}
  .book-bar{padding:14px;bottom:calc(74px + env(safe-area-inset-bottom))}
  .book-bar .btn-xl{width:100%;order:5}
  .book-bar .btn-danger{width:100%;order:6}
  .book-bar .book-bar-info{flex:1 1 100%}
  .book-bar .btn-soft,.book-bar .btn-ghost{flex:1 1 40%;min-height:46px}
  .riepilogo-riga img{width:46px;height:46px}

  /* i filtri diventano a tutta larghezza invece di comprimersi */
  .card-pad>.row>input,.card-pad>.row>select,.card-pad>.row>.field,
  .row>input[type=text],.row>select{max-width:100% !important;width:100%}
  .card-head{flex-wrap:wrap}

  /* finestre di dialogo come pannello che sale dal basso */
  .modal-root{padding:0;place-items:end stretch}
  .modal{width:100%;max-height:94vh;border-radius:22px 22px 0 0;animation:sheet .22s ease-out}
  @keyframes sheet{from{transform:translateY(100%)}}
  .modal::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:99px;background:var(--border-strong);
  }
  .modal-head{position:sticky;top:0;z-index:2;background:var(--surface);padding-top:22px;border-radius:22px 22px 0 0}
  .modal-foot{
    position:sticky;bottom:0;z-index:2;background:var(--surface);flex-wrap:wrap;
    padding-bottom:calc(15px + env(safe-area-inset-bottom));
  }
  .modal-foot .btn{flex:1 1 140px}
  .modal-foot>div[style*="flex:1"]{display:none}

  /* tabelle marcate .table-cards: una scheda per riga */
  .table-cards{min-width:0}
  .table-cards thead{display:none}
  .table-cards tbody tr{display:block;padding:13px 15px;border-top:1px solid var(--border)}
  .table-cards tbody tr:first-child{border-top:none}
  .table-cards tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:4px 0;border:none;text-align:right;
  }
  .table-cards tbody td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  }

  /* postazione bancone e monitor su schermo stretto */
  .serving-head,.serving-dishes,.serving-actions{padding-left:16px;padding-right:16px}
  .serve-row img{width:50px;height:50px}
  .last-served{gap:9px}
  .last-served .ls-dishes{flex:1 1 100%;order:5}
  .mon-stats{gap:12px}
}

@media (max-width:380px){
  .tabbar button .lbl{font-size:9.5px}
  .content{padding-left:11px;padding-right:11px}
  .g-4{grid-template-columns:1fr}
}
/* il foglio di servizio esiste nel documento ma si vede solo in stampa */
.foglio-stampa{display:none}

@media print{
  .sidebar,.topbar,.toast-root,.tabbar,.book-bar,.no-print{display:none !important}
  .content{padding:0}
  body{background:#fff}

  /* STAMPA DI UN TURNO SOLO.
     Il pulsante «Stampa i pasti» marca il suo riquadro e mette una classe sul
     body; qui si nasconde tutto il resto della pagina. Niente finestra nuova e
     niente contenuto ricostruito per la stampa: sul foglio esce esattamente
     quello che si vede a schermo, e non c'è una seconda copia che col tempo
     diverge da quella vera. */
  body.stampa-un-turno .turno-blocco{display:none !important}
  body.stampa-un-turno .turno-blocco.stampa-questo{display:block !important}
  /* via il filtro, i riquadri di riepilogo e la barra delle selezioni:
     sul foglio del bancone servono i nomi e i piatti, non i comandi */
  body.stampa-un-turno #view > .stack > .card:not(.turno-blocco),
  body.stampa-un-turno #view > .stack > .grid,
  body.stampa-un-turno .bulk-bar{display:none !important}

  /* FOGLIO ORIZZONTALE, UNA RIGA PER PERSONA.
     Con 50 persone a turno la tabella dello schermo — riga alta, piatti
     incolonnati, orari di check-in — riempirebbe sei o sette fogli verticali
     per un turno solo. In orizzontale, una riga a testa, ce ne stanno una
     venticinquina per foglio. */
  @page{size:A4 landscape;margin:9mm}

  .turno-blocco{box-shadow:none !important;border:none !important;background:none !important}
  /* a stampare va il foglio, non la schermata */
  .turno-blocco>.card-head,
  .turno-blocco>.table-wrap{display:none !important}
  .foglio-stampa{display:block !important}

  .fs-testa{
    display:flex;align-items:baseline;gap:14px;
    border-bottom:2.5px solid #000;padding-bottom:5px;margin-bottom:7px;
  }
  .fs-testa h2{font-size:19pt;letter-spacing:-.02em;color:#000}
  .fs-testa span{font-size:10.5pt;color:#000;font-weight:600}

  .fs-tab{width:100%;border-collapse:collapse;table-layout:fixed}
  /* l'intestazione si ripete su ogni foglio: dal secondo in poi, senza, non
     si saprebbe piu' quale colonna e' il secondo e quale il contorno */
  .fs-tab thead{display:table-header-group}
  .fs-tab th,.fs-tab td{
    border:1px solid #666;padding:2px 3.5px;font-size:8.4pt;line-height:1.18;
    text-align:left;vertical-align:top;color:#000;word-wrap:break-word;
  }
  .fs-tab th{font-size:7.4pt;text-transform:uppercase;letter-spacing:.04em;background:none}
  .fs-tab tr{break-inside:avoid}
  /* Le colonne fisse sono strette apposta: ogni millimetro tolto qui va alle
     portate, che sono quelle che vanno a capo e fanno crescere la riga. Una
     riga su due linee costa quasi il doppio di una su una sola, e con 50
     persone la differenza e' un foglio intero. */
  .fs-tab .fs-mat{width:16mm;font-variant-numeric:tabular-nums}
  .fs-tab .fs-nome{width:39mm;font-weight:700}
  .fs-tab .fs-note{width:29mm}
  .fs-tab .fs-stato{width:18mm}
}

/* ==========================================================================
   HOME DEL DIPENDENTE — quattro riquadri, niente altro

   Bersagli grandi e a posizione fissa. Le misure non sono estetiche: 132px di
   altezza minima e 21px di titolo servono a chi ha la vista lunga e il dito
   poco fermo, che è buona parte di chi usa questa mensa.
   ========================================================================== */
/* DUE COLONNE FISSE, non auto-fit. Con quattro riquadri l'auto-fit dava 3+1:
   una riga piena e una spaiata, brutta e — cosa che conta di più — con la
   quarta voce in un posto che cambia a seconda della larghezza della finestra.
   Due per due sono quattro quadranti sempre uguali, e la posizione si impara. */
.home-tiles{
  display:grid;gap:20px;
  grid-template-columns:repeat(2,1fr);
  max-width:820px;margin:10px auto 0;
}
.home-tile{
  display:flex;align-items:center;gap:18px;text-align:left;
  min-height:150px;padding:24px 26px;
  background:var(--surface);border:2px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);color:var(--text);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.home-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--accent)}
.home-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.home-tile .ht-ico{
  flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);
}
.home-tile .ht-ico .ico-svg{width:34px;height:34px}
.home-tile .ht-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-tile .ht-txt b{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.home-tile .ht-txt small{font-size:13.5px;color:var(--text-2);line-height:1.35}

/* il comando principale si distingue senza gridare: è quello che si usa ogni giorno */
.home-tile.primaria{border-color:transparent;background:var(--accent-grad);color:#fff}
.home-tile.primaria .ht-ico{background:rgba(255,255,255,.2);color:#fff}
.home-tile.primaria .ht-txt small{color:rgba(255,255,255,.9)}
.home-tile.primaria:hover{border-color:transparent}

/* uscire è un'azione a sé: si vede, ma non compete con le altre tre */
.home-tile.uscita .ht-ico{background:var(--red-soft);color:var(--red)}
.home-tile.uscita:hover{border-color:var(--red)}

/* I turni: colonne larghe almeno 250px, una sola su telefono (@media 640).
   Stava nell'attributo style del div. È stato portato qui perché una regola
   scritta in linea non si può scavalcare da un media query, e su telefono la
   scheda dei turni cambia forma. */
.turno-schede{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* ==========================================================================
   PRENOTA — i piatti da scegliere, al centro

   La griglia generica (.g-auto) usa `auto-fill`: crea le colonne per tutta la
   larghezza disponibile anche quando i piatti sono pochi, e con un piatto solo
   la scheda finisce incollata a sinistra con mezzo schermo vuoto accanto.
   Qui invece `auto-fit` più `justify-content:center`: le colonne vuote
   collassano e quello che resta si dispone al centro. La larghezza massima
   tiene le schede raggruppate anche su schermi molto larghi — su un monitor da
   ufficio, cinque schede sparse da bordo a bordo si leggono peggio di cinque
   schede vicine.
   ========================================================================== */
.dish-grid{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  max-width:1200px;margin-inline:auto;
}
/* Flex e non grid, e il motivo e' l'ULTIMA RIGA. Con `grid` le schede si
   incolonnano dall'inizio: quattro piatti su tre colonne lasciavano il quarto
   solo, appiccicato a sinistra, con mezzo schermo vuoto accanto. Con `flex` +
   `justify-content:center` si centra ogni riga, compresa quella spaiata.
   Le schede non crescono (`flex:0 1`): allargarsi fino a riempire la riga le
   renderebbe enormi quando sono poche, che e' il difetto opposto. */
.dish-grid>.dish{flex:0 1 262px;max-width:276px}



/* ==========================================================================
   PRENOTA · PASSO 1 — la scelta del giorno
   ========================================================================== */
.step-head.grande h2{font-size:34px}
.step-head.grande p{font-size:16px}

.giorni-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.giorno-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:20px 14px 16px;min-height:168px;justify-content:center;
  background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);
  color:var(--text);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.giorno-card:not(.off):hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--accent)}
.giorno-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.giorno-card.active{border-color:var(--accent);background:var(--accent-soft)}
.giorno-card .gc-dow{font-size:14px;font-weight:700;color:var(--text-2);letter-spacing:.01em}
.giorno-card .gc-num{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1.02}
.giorno-card .gc-mese{font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.giorno-card .gc-stato{
  margin-top:10px;font-size:12.5px;font-weight:700;line-height:1.3;text-align:center;
  color:var(--text-2);
}
.giorno-card.libero .gc-stato{color:var(--accent)}
.giorno-card.prenotato .gc-stato{color:var(--green)}
.giorno-card.lastminute .gc-stato{color:var(--amber)}
.giorno-card.chiusa .gc-stato{color:var(--red)}
.giorno-card .gc-oggi{
  position:absolute;top:9px;right:9px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:99px;
}
/* i giorni non prenotabili restano VISIBILI: sparire lascerebbe chi guarda a
   chiedersi perché manca il giovedì */
.giorno-card.off{opacity:.5;cursor:not-allowed;background:var(--surface-2)}
.giorno-card.off .gc-num{color:var(--text-3)}

/* il giorno scelto, dal passo 2 in poi */
.giorno-scelto{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 18px;background:var(--accent-soft);border:2px solid transparent;
  border-radius:var(--r-lg);color:var(--text);
}
.giorno-scelto:hover{border-color:var(--accent)}
.giorno-scelto:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.giorno-scelto .gs-ico{font-size:26px;line-height:1;flex:0 0 auto}
.giorno-scelto .gs-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.giorno-scelto .gs-txt small{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.giorno-scelto .gs-txt b{font-size:19px;letter-spacing:-.02em}
.giorno-scelto .gs-cambia{
  flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--accent);
  border-bottom:2px solid currentColor;padding-bottom:1px;
}

@media (max-width:820px){
  .home-tiles{grid-template-columns:1fr;gap:14px;max-width:none}
  .home-tile{min-height:104px;padding:18px 18px;gap:15px}
  .home-tile .ht-ico{width:54px;height:54px;border-radius:17px}
  .home-tile .ht-ico .ico-svg{width:29px;height:29px}
  .home-tile .ht-txt b{font-size:19px}

  .step-head.grande h2{font-size:26px}
  .step-head.grande p{font-size:15px}
  .giorni-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:11px}
  .giorno-card{min-height:146px;padding:16px 10px 13px}
  .giorno-card .gc-num{font-size:42px}
  .giorno-scelto{padding:12px 14px;gap:11px;flex-wrap:wrap}
  .giorno-scelto .gs-txt b{font-size:17px}
}


/* ==========================================================================
   POSTAZIONE BANCONE — il PC dietro il bancone

   Si guarda in piedi, di sfuggita, mentre si riempie un vassoio. Tutto è
   dimensionato per quello: chi si sta servendo occupa mezzo schermo, i due
   dopo sono piccoli ma leggibili, e il pulsante di consegna è il bersaglio
   più grande della pagina — si preme senza doverlo cercare.
   ========================================================================== */
.bancone{gap:14px}

.bn-testa{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);
}
.bn-turno b{display:block;font-size:17px;letter-spacing:-.02em}
.bn-turno span{font-size:12.5px;color:var(--text-2);font-weight:600}
.bn-ora{
  font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--accent);margin-left:auto;
}
.bn-conta{text-align:center;min-width:76px}
.bn-conta b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bn-conta span{font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bn-conta.amber b{color:var(--amber)} .bn-conta.red b{color:var(--red)} .bn-conta.green b{color:var(--green)}
.bn-lettore{
  padding:9px 14px;border-radius:var(--r);background:var(--green-soft);
  border:1px solid transparent;min-width:210px;
}
.bn-lettore b{display:block;font-size:13px;color:var(--green)}
.bn-lettore span{font-size:11.5px;color:var(--text-2)}
.bn-lettore.impara{background:var(--amber-soft);border-color:var(--amber)}
.bn-lettore.impara b{color:var(--amber)}

/* l'esito dell'ultima tessera passata */
.bn-esito{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:15px 18px;border-radius:var(--r-lg);border:2px solid;
}
.bn-esito.ok{background:var(--green-soft);border-color:var(--green)}
.bn-esito.attenzione{background:var(--amber-soft);border-color:var(--amber)}
.bn-esito.ko{background:var(--red-soft);border-color:var(--red)}
.bn-esito-ico{font-size:30px;line-height:1;flex:0 0 auto}
.bn-esito-txt{flex:1;min-width:0}
.bn-esito-txt b{display:block;font-size:19px;letter-spacing:-.02em}
.bn-esito-txt span{font-size:13.5px;color:var(--text-2)}
.bn-esito-timer{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:800;color:var(--text-3);font-variant-numeric:tabular-nums;
}

/* chi si sta servendo adesso */
.bn-servizio{
  background:var(--surface);border:2px solid var(--accent);border-radius:var(--r-xl);
  box-shadow:var(--sh);overflow:hidden;
}
.bn-serv-testa{padding:20px 24px 16px;background:var(--accent-soft)}
.bn-lab{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.bn-serv-testa h2{font-size:38px;letter-spacing:-.035em;line-height:1.05;margin-top:3px}
.bn-meta{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:9px;
  font-size:13px;color:var(--text-2);font-weight:600;
}
.bn-mat{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;
  background:var(--surface);padding:2px 10px;border-radius:7px;color:var(--accent);
}
.bn-allergie{
  margin-top:11px;padding:9px 13px;border-radius:var(--r);
  background:var(--red-soft);color:var(--red);font-size:14.5px;font-weight:700;
}
.bn-nota{margin-top:8px;font-size:13.5px;color:var(--text-2)}

.bn-vassoio{
  display:grid;gap:11px;padding:18px 24px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.bn-portata{
  padding:12px 15px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);
}
.bn-portata .bn-cat{
  display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:3px;
}
.bn-portata b{font-size:17px;letter-spacing:-.02em;line-height:1.25}
.bn-portata.vuota{border-style:dashed;background:transparent}

.bn-azioni{display:flex;gap:12px;flex-wrap:wrap;padding:0 24px 22px;align-items:stretch}
.bn-avanti{
  flex:1 1 340px;flex-direction:column;gap:2px;
  padding:19px 26px;border-radius:var(--r-lg);
}
.bn-avanti-t{font-size:23px;font-weight:800;letter-spacing:-.02em}
.bn-avanti-s{font-size:12px;font-weight:600;opacity:.86;text-transform:uppercase;letter-spacing:.06em}

/* i due dopo */
.bn-prossimi{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bn-next{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
}
.bn-pos{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);color:var(--text-2);font-weight:800;font-size:15px;
}
.bn-next-txt{flex:1;min-width:0}
.bn-next-txt b{display:block;font-size:17px;letter-spacing:-.02em}
.bn-next-txt span{
  font-size:12.5px;color:var(--text-2);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bn-alle{font-size:11.5px;font-weight:800;color:var(--red);white-space:nowrap}

.bn-nascosti{
  text-align:center;font-size:13.5px;color:var(--text-2);
  padding:10px;border-radius:var(--r);background:var(--bg-soft);
}
.bn-comandi{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.bn-vuoto{
  text-align:center;padding:56px 20px;background:var(--surface);
  border:2px dashed var(--border-strong);border-radius:var(--r-xl);
}
.bn-vuoto .em{font-size:52px;opacity:.5}
.bn-vuoto h2{font-size:26px;margin-top:8px;letter-spacing:-.03em}
.bn-vuoto p{color:var(--text-2);margin-top:5px}

/* ==========================================================================
   SCHERMO PER LA SALA — il monitor davanti al bancone

   Si legge da lontano e in piedi. La matricola è il numero grande; il nome sta
   sotto, più piccolo, con la sola iniziale del cognome (convenzione 21).
   Fondo scuro perché è uno schermo acceso tutto il giorno in una stanza
   illuminata: il bianco pieno stanca e da lontano si legge peggio.
   ========================================================================== */
.sala{
  min-height:calc(100vh - 120px);display:flex;flex-direction:column;
  background:linear-gradient(160deg,#0d2029 0%,#123240 100%);
  border-radius:var(--r-xl);padding:26px 30px;color:#eaf3f5;gap:18px;
}
.sala-testa{display:flex;align-items:center;gap:18px}
.sala-turno b{display:block;font-size:21px;letter-spacing:-.02em;color:#fff}
.sala-turno span{font-size:14px;color:#9fc3ce;font-weight:600}
.sala-ora{
  margin-left:auto;font-size:clamp(30px,4vw,52px);font-weight:800;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#7fd6ea;
}
.sala-full{background:rgba(255,255,255,.12);color:#eaf3f5;border-color:transparent}

.sala-centro{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;
}
.sala-lab{
  font-size:clamp(13px,1.6vw,18px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#7fd6ea;
}
.sala-mat{
  font-size:clamp(88px,20vw,240px);font-weight:800;line-height:.95;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#fff;
}
.sala-mat.vuoto{color:#3f6b7a}
.sala-nome{font-size:clamp(20px,3.4vw,44px);font-weight:700;color:#cfe6ed;letter-spacing:-.02em}

.sala-coda{
  border-top:1px solid rgba(255,255,255,.16);padding-top:14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.sala-coda-lab{
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fd6ea;
}
.sala-mats{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.sala-mats span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;font-weight:700;color:#cfe6ed;
  background:rgba(255,255,255,.09);padding:4px 11px;border-radius:8px;
}
.sala-mats.vuota{color:#7d9aa5;font-size:14px}
.sala-attesa{font-size:13.5px;color:#9fc3ce;font-weight:600}

@media (max-width:820px){
  .bn-serv-testa h2{font-size:27px}
  .bn-ora{font-size:24px}
  .bn-avanti{flex-basis:100%;padding:16px 20px}
  .bn-avanti-t{font-size:19px}
  .bn-testa{gap:12px;padding:12px 14px}
  .bn-lettore{min-width:0;flex:1 1 100%}
  .sala{padding:18px;min-height:calc(100vh - 150px)}
}

/* Questo blocco sta IN FONDO al foglio di proposito: le regole a 820px
   che lo precedono toccano gli stessi elementi con la stessa specificita',
   e a parita' di peso vince l'ultima scritta. Messo piu' in alto, meta'
   di queste righe non avrebbe alcun effetto - e senza dare nessun errore,
   il che e' il modo peggiore di sbagliare un foglio di stile. */
/* --------------------------------------------------------------------------
   SUL TELEFONO LE SCHEDE DIVENTANO RIGHE

   In verticale la scheda con la foto grande occupa quasi tutto lo schermo: si
   vedeva mezzo piatto e basta, e per sapere che cosa c'era bisognava scorrere
   alla cieca. Scegliere fra cose che non si vedono insieme non e' scegliere.

   Qui la foto diventa un quadratino a sinistra e il testo gli sta accanto:
   ogni piatto sta in un centinaio di pixel e se ne vedono almeno tre, spesso
   quattro. Sparisce la descrizione (resta sotto "Dettagli") e sparisce il
   codice del piatto, che serve al catalogo e non a chi sceglie il pranzo.
   RESTANO le pastiglie di dieta e allergene e l'avviso rosso: quelle non si
   toccano, sono l'informazione per cui si guarda la scheda.

   Vale solo per la griglia della prenotazione (.dish-grid): il catalogo
   dell'amministratore tiene le schede intere, perche' li' la foto e la
   descrizione sono proprio il lavoro che si sta facendo.

   La soglia e' 640px e non gli 820px del resto dell'app: fra i 640 e gli 820
   la griglia dispone gia' due colonne, le schede si vedono, e trasformarle in
   righe larghissime le peggiorerebbe.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  /* Lo spazio si recupera dai margini, NON dai bersagli tattili: il pulsante
     "Dettagli" resta a 46px come tutti gli altri (regola a riga ~1118).
     Rimpicciolire quello che si deve toccare, con questo pubblico, è il modo
     più veloce per rendere l'app inutilizzabile. */
  .content{padding-top:10px}
  #view>.stack{gap:10px}

  /* SU TELEFONO le schede dei turni tornano — 3 settembre 2026, su richiesta.

     C'era stata una tendina: cinque schede da 121px fanno 665px, e sembrava
     troppo. La tendina però nasconde tutto quello che serve per scegliere —
     orario, nome del turno e quanti posti restano — dietro un tocco in più, e
     con questo pubblico un elenco che si vede tutto batte un elenco elegante.

     Lo spazio si recupera cambiando la FORMA della scheda, non togliendola:
     l'orario passa a sinistra e nome, riempimento e posti liberi gli stanno
     accanto invece che sotto. Da 121px a ~70px, e restano cinque bersagli
     grandi, sempre visibili. Il pulsante «Avanti» non era comunque il problema:
     la sua barra è `position:sticky`, sta in fondo allo schermo da sé. */
  .turno-schede{grid-template-columns:1fr}
  .shift-card{
    grid-template-columns:auto 1fr;column-gap:13px;row-gap:5px;
    padding:11px 13px;
  }
  .shift-time{grid-column:1;grid-row:1/4;align-self:center;font-size:24px}
  .shift-name{font-size:14.5px}
  .shift-seats{font-size:11.8px}
  .shift-card .progress{height:5px}

  .dish-grid{gap:7px;max-width:none}
  /* su telefono ogni riga e' una scheda sola, larga quanto lo schermo */
  .dish-grid>.dish{flex:1 1 100%;max-width:none}

  .dish-grid .dish{flex-direction:row;align-items:stretch}
  .dish-grid .dish-photo{aspect-ratio:auto;width:98px;flex:0 0 98px}
  /* l'etichetta della categoria ripeteva il titolo del passo ("Primo piatto") */
  .dish-grid .dish-photo .cat-tag{display:none}
  .dish-grid .fav-btn{width:26px;height:26px;font-size:12px;right:4px;top:4px;box-shadow:none}
  /* la spunta di selezione sta stretta in un angolo: si porta al centro della foto */
  .dish-grid .pick.selected .dish-photo::after{
    width:26px;height:26px;font-size:14px;right:auto;bottom:auto;
    left:50%;top:50%;transform:translate(-50%,-50%);
  }

  .dish-grid .dish-body{padding:7px 11px;gap:4px;justify-content:center}
  .dish-grid .dish-body h4{font-size:14.8px}
  .dish-grid .dish-code,
  .dish-grid .dish-desc{display:none}
  /* `margin-top:auto` spingeva il piede in fondo lasciando un vuoto sopra:
     nella riga compatta non serve, il corpo è già centrato */
  .dish-grid .dish-foot{margin-top:0;padding-top:0;gap:6px}
  .dish-grid .dish-foot .btn{padding:4px 9px;font-size:11.8px;border-radius:8px}
  .dish-grid .kcal-pill{font-size:11.2px;padding:3px 8px}

  /* Le pastiglie su una riga sola. Erano la voce piu' cara della scheda: in un
     corpo largo 217px andavano a capo tre volte, 73px per piatto. Restano
     visibili le prime, e quelle che contano — allergene del proprio profilo e
     avviso rosso — non dipendono da questa riga. */
  .dish-grid .diet-chips{
    gap:4px;flex-wrap:nowrap;overflow:hidden;
    max-height:20px;mask-image:linear-gradient(to right,#000 80%,transparent);
  }
  .dish-grid .diet-chips>*{flex:0 0 auto}
  /* l'avviso allergeni: stessa sostanza, meno ingombro */
  .dish-grid .banner.err{padding:5px 8px !important;font-size:11px !important;line-height:1.25}

  /* ------------------------------------------------------------------------
     LO SPAZIO SOPRA E SOTTO I PIATTI

     Rimpicciolire le schede non bastava: su uno schermo da 812px la griglia
     cominciava a 489 e la barra in fondo ne prendeva altri 211, lasciando ai
     piatti 47px in tutto. Si vedeva mezzo piatto perche' mezzo piatto era
     tutto lo spazio che restava.
     Qui si recupera il resto, e solo dentro la prenotazione.
     ------------------------------------------------------------------------ */

  /* il giorno scelto: UNA riga, non tre. Il `nowrap` è il punto: senza,
     «Cambia giorno» scende sotto e la data va a capo, 97px per una frase */
  .giorno-scelto{padding:7px 12px;gap:10px;flex-wrap:nowrap}
  .giorno-scelto .gs-ico{font-size:18px}
  .giorno-scelto .gs-txt small{font-size:9.5px;letter-spacing:.04em}
  .giorno-scelto .gs-txt b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .giorno-scelto .gs-cambia{font-size:12px;border-bottom-width:1px}

  /* la scheda del passo: meno cornice, più contenuto */
  .card.passo>.card-pad{padding:12px}
  /* la riga del filtro sopra i piatti */
  .card.passo>.card-pad>.row{margin-bottom:9px !important}
  .card.passo .check{padding-top:6px;padding-bottom:6px;font-size:12.8px}

  /* intestazione del passo: il titolo resta grande, la spiegazione no —
     la barra in fondo la ripete gia' */
  /* l'intestazione dei passi della prenotazione: titolo leggibile, contorno
     stretto. La spiegazione sparisce perche' la barra in fondo la ripete */
  .step-head.turno{margin-bottom:10px}
  .step-head.turno .step-count{margin-bottom:2px;padding:2px 8px;font-size:9.5px}
  .step-head.turno h2{font-size:19px;gap:7px}
  .step-head.turno h2 .em{font-size:21px}
  .step-head.turno p{font-size:13px;margin-top:4px}

  .step-head.portata{margin-bottom:8px}
  .step-head.portata .step-count{margin-bottom:2px;padding:2px 8px;font-size:9.5px}
  .step-head.portata h2{font-size:19px;gap:7px}
  .step-head.portata h2 .em{font-size:21px}
  .step-head.portata p{display:none}

  /* barra in fondo: tutto su una riga, senza andare a capo */
  /* niente `bottom` qui: lo fissa il blocco a 820px, che deve scavalcare la
     barra di navigazione. Riscriverlo lo rimetterebbe sotto */
  .book-bar{
    gap:9px;padding:10px 12px;flex-wrap:nowrap;
    border-radius:var(--r-lg);
  }
  /* Il riquadro informativo SPARISCE, non si stringe: in 353px diviso con due
     o tre pulsanti restava «Scegli un tur…» e «Tocca una delle …», cioe' un
     testo troncato a meta' che non dice niente a nessuno. E' anche l'unico
     pezzo davvero ridondante della schermata: il turno scelto sta gia' nel
     campo qui sopra, le portate scelte gia' nel riepilogo.
     Lo spazio va ai pulsanti, che cosi' diventano bersagli piu' larghi. */
  .book-bar-info{display:none}
  .book-bar{justify-content:stretch}
  .book-bar>.btn{flex:1 1 auto}
  .book-bar>.btn-xl{flex:2 1 auto}
  .book-bar .btn{padding-left:13px;padding-right:13px;white-space:nowrap}
  .book-bar .btn-xl{font-size:14.5px;padding-top:11px;padding-bottom:11px}
}