/* Ordino — stile. Tema chiaro su azzurro, tutte le forme arrotondate. */
:root {
  color-scheme: light;
  --bg:#c6e6f9; --surface:#ffffff; --soft:#b0d7ee; --ink:#1f3a5c; --muted:#4f6b88; --line:#a6cde6;
  --accent:#1d82da; --accent-ink:#ffffff; --accent-soft:#e3f2fc;
  --ok:#17895c; --ok-soft:#d8f3e7; --warn:#a96300; --warn-soft:#fff0cf; --bad:#b3261e; --bad-soft:#fde3e1;
  --prep:#1d82da;
  --r-lg:24px; --r-md:18px; --r-pill:999px;
  --ombra:0 2px 10px rgba(29,130,218,.1);
  --f-display:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; padding-inline:16px; padding-block:14px 120px; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.4; min-height:100vh; }
button, select, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
h1, h2, h3 { font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; }
p { margin:0; }
a { color:var(--accent); font-weight:700; }
.tnum { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
[hidden] { display:none !important; }
.cont { max-width:1100px; margin:0 auto; }
.tel { max-width:440px; margin:0 auto; }
.pila { display:grid; gap:12px; }

/* ----- campi e pulsanti ----- */
.campo { display:grid; gap:6px; }
.campo > span { font-weight:800; font-size:13px; color:var(--muted); letter-spacing:.02em; }
.campo input, .campo textarea, .campo select { width:100%; padding:13px 18px; border-radius:var(--r-pill); border:2px solid var(--line); background:var(--surface); }
.campo textarea { border-radius:20px; min-height:76px; resize:vertical; }
.campo input::placeholder, .campo textarea::placeholder { color:var(--muted); opacity:.8; }
.btn { border:0; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink); padding:15px 24px; font-weight:800; font-size:16px; box-shadow:0 6px 16px rgba(29,130,218,.3); display:inline-flex; gap:10px; align-items:center; justify-content:center; }
.btn.pieno { width:100%; }
.btn.spazi { justify-content:space-between; }
.btn.chiaro { background:var(--surface); color:var(--accent); box-shadow:0 2px 8px rgba(29,130,218,.18); }
.btn.tenue { background:var(--soft); color:var(--ink); box-shadow:none; }
.btn.rosso { background:var(--bad); box-shadow:none; }
.btn.piccolo { padding:9px 16px; font-size:14px; }
.link { border:0; background:none; color:var(--muted); padding:10px; font-weight:700; }
.chiudi { border:0; background:var(--surface); border-radius:var(--r-pill); padding:9px 18px; font-weight:800; color:var(--muted); }
.errore-box { background:var(--bad-soft); color:var(--bad); border-radius:var(--r-md); padding:10px 16px; font-weight:700; }

/* ----- etichette ----- */
.eti { display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); padding:4px 12px; font-size:12px; font-weight:800; background:var(--soft); color:var(--ink); white-space:nowrap; }
.eti.ok { background:var(--ok-soft); color:var(--ok); }
.eti.avviso { background:var(--warn-soft); color:var(--warn); }
.eti.rosso { background:var(--bad-soft); color:var(--bad); }
.eti.blu { background:var(--accent-soft); color:var(--accent); }
.pallino { width:9px; height:9px; border-radius:50%; background:currentColor; }

/* ----- schede e interruttori ----- */
.scheda { background:var(--surface); border-radius:var(--r-lg); padding:16px; box-shadow:var(--ombra); display:grid; gap:12px; }
.interruttore { width:52px; height:30px; border-radius:var(--r-pill); border:0; background:var(--soft); position:relative; padding:0; flex:none; transition:background .15s; }
.interruttore::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.interruttore[aria-checked="true"] { background:var(--ok); }
.interruttore[aria-checked="true"]::after { transform:translateX(22px); }
@media (prefers-reduced-motion: reduce) { .interruttore, .interruttore::after { transition:none; } }

/* ----- finestre dal basso ----- */
.velo { position:fixed; inset:0; z-index:30; background:rgba(31,58,92,.45); display:flex; align-items:flex-end; justify-content:center; }
.foglio { background:var(--bg); width:100%; max-width:480px; max-height:92%; overflow:auto; border-radius:32px 32px 0 0; padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px)); display:grid; gap:12px; align-content:start; }
.foglio.largo { max-width:640px; }
.foglio h2 { font-size:24px; margin-inline:4px; }
.foglio h3 { font-size:17px; margin:4px 4px 0; }
.testa-foglio { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.totale { display:flex; justify-content:space-between; font-weight:800; font-size:17px; padding:4px 6px; }

/* ----- avvisi ----- */
.avvisi { position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; display:grid; justify-items:center; gap:8px; pointer-events:none; padding-inline:16px; }
.avviso { background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:12px 22px; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:440px; text-align:center; }
.avviso.errore { background:var(--bad); }

/* ----- intestazione generale ----- */
.alto { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin:0 auto 14px; max-width:1100px; }
.marchio { font-family:var(--f-display); font-weight:600; font-size:26px; color:var(--accent); }
.marchio small { font-family:var(--f-body); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-left:8px; }
.tabs { display:flex; background:var(--soft); border-radius:var(--r-pill); padding:4px; gap:4px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.tabs button { border:0; background:transparent; padding:10px 18px; border-radius:var(--r-pill); font-weight:800; color:var(--muted); display:flex; gap:8px; align-items:center; white-space:nowrap; }
.tabs button[aria-selected="true"] { background:var(--surface); color:var(--accent); box-shadow:0 2px 6px rgba(29,130,218,.18); }
.conta { background:var(--accent); color:var(--accent-ink); border-radius:var(--r-pill); min-width:22px; height:22px; padding:0 7px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }

/* ----- accesso ----- */
.accesso { max-width:420px; margin:6vh auto 0; display:grid; gap:18px; }
.accesso h1 { font-size:32px; }
.accesso .marchio { font-size:34px; }
.prova { background:var(--surface); border-radius:var(--r-md); padding:12px 16px; font-size:13px; display:grid; gap:4px; }
.prova b { font-weight:800; }
.prova code { background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 10px; font-weight:700; }

/* ----- cliente ----- */
.loc { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 2px 10px; }
.loc h1 { font-size:28px; }
.pill { background:var(--accent); color:var(--accent-ink); padding:6px 14px; border-radius:var(--r-pill); font-weight:800; font-size:14px; white-space:nowrap; }
.cats { position:sticky; top:env(safe-area-inset-top,0px); z-index:3; background:var(--bg); display:flex; gap:8px; overflow-x:auto; padding-block:8px; margin-bottom:4px; scrollbar-width:none; }
.cats button { border:0; background:var(--surface); border-radius:var(--r-pill); padding:9px 18px; white-space:nowrap; font-weight:700; box-shadow:0 1px 4px rgba(29,130,218,.12); }
.cats button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.sez { scroll-margin-top:64px; display:grid; gap:10px; margin-bottom:18px; }
.sez h2 { font-size:21px; margin:10px 4px 2px; }
.voce { background:var(--surface); border-radius:var(--r-lg); padding:12px 14px 12px 12px; display:flex; gap:12px; align-items:center; box-shadow:var(--ombra); }
.voce.esaurito .foto, .voce.esaurito .t { opacity:.5; }
.foto { flex:none; width:68px; height:68px; border-radius:22px; background:var(--accent-soft); overflow:hidden; }
.foto svg, .foto img { display:block; width:100%; height:100%; }
.foto img { object-fit:cover; }
.voce .t { flex:1; min-width:0; }
.voce b { display:block; font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.voce small { display:block; color:var(--muted); margin-top:2px; }
.voce .p { margin-top:6px; font-weight:800; color:var(--accent); }
.step { display:flex; align-items:center; gap:6px; }
.step button { width:40px; height:40px; border-radius:50%; border:0; background:var(--soft); font-size:22px; font-weight:700; line-height:1; display:grid; place-items:center; padding:0; }
.step .piu { background:var(--accent); color:var(--accent-ink); }
.step span { min-width:18px; text-align:center; font-weight:800; }
.barra { position:fixed; left:0; right:0; bottom:0; z-index:5; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(rgba(198,230,249,0), var(--bg) 35%); pointer-events:none; }
.barra > div { max-width:440px; margin:0 auto; pointer-events:auto; }
.linea { background:var(--surface); border-radius:var(--r-md); padding:12px 14px; display:grid; gap:8px; box-shadow:0 2px 8px rgba(29,130,218,.08); }
.linea .rg { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.linea .rg b { font-weight:800; overflow-wrap:anywhere; }
.linea .pr { color:var(--accent); font-weight:800; margin-left:auto; }
.togli { border:0; background:var(--soft); color:var(--muted); width:32px; height:32px; border-radius:50%; font-size:18px; line-height:1; padding:0; flex:none; }
.linea input { width:100%; padding:11px 16px; border-radius:var(--r-pill); border:2px solid var(--line); background:var(--bg); font-size:14px; }
.esito { text-align:center; display:grid; gap:14px; padding:28px 8px; justify-items:center; }
.esito h2 { font-size:30px; }
.stato { border:2px solid var(--line); border-radius:var(--r-pill); padding:11px 22px; font-weight:800; background:var(--surface); }
.stato.nuovo { border-color:var(--warn); color:var(--warn); }
.stato.in_preparazione { border-color:var(--prep); color:var(--prep); }
.stato.pronto, .stato.consegnato { border-color:var(--ok); color:var(--ok); }
.passi { display:flex; gap:6px; width:100%; max-width:320px; }
.passi i { flex:1; height:8px; border-radius:var(--r-pill); background:var(--line); }
.passi i.on { background:var(--ok); }

/* ----- cucina / gestione ----- */
.strumenti { max-width:1100px; margin:0 auto 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.strumenti h2 { font-size:22px; }
.colonne { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:start; }
.col h2 { font-size:15px; letter-spacing:.06em; text-transform:uppercase; display:flex; justify-content:space-between; margin:0 6px 10px; }
.col.nuovo h2 { color:var(--warn); } .col.in_preparazione h2 { color:var(--prep); } .col.pronto h2 { color:var(--ok); }
.lista { display:grid; gap:12px; }
.ordine { background:var(--surface); border-radius:var(--r-lg); padding:16px; display:grid; gap:12px; box-shadow:var(--ombra); border-top:6px solid var(--line); }
.col.nuovo .ordine { border-top-color:var(--warn); } .col.in_preparazione .ordine { border-top-color:var(--prep); } .col.pronto .ordine { border-top-color:var(--ok); }
.ordine header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ordine .tav { font-family:var(--f-display); font-size:30px; font-weight:600; }
.ordine .ora { color:var(--muted); font-size:13px; font-weight:700; }
.righe { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:17px; font-weight:700; }
.righe li b { display:inline-block; min-width:34px; color:var(--accent); font-weight:800; }
.nota-riga { display:block; margin:4px 0 0 34px; background:var(--warn-soft); color:#6b4300; border-radius:12px; padding:6px 12px; font-size:14px; font-weight:600; width:fit-content; max-width:calc(100% - 34px); }
.az { border:0; border-radius:var(--r-pill); padding:14px; font-weight:800; color:#fff; width:100%; }
.col.nuovo .az { background:var(--prep); } .col.in_preparazione .az { background:var(--ok); } .col.pronto .az { background:#4f6b88; }
.vuoto { background:var(--soft); border-radius:var(--r-lg); padding:24px; text-align:center; color:var(--muted); font-weight:600; }
.connessione { font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; }
.connessione.ok { color:var(--ok); } .connessione.no { color:var(--bad); }

/* cronologia */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--surface); border-radius:var(--r-pill); padding:9px 16px; display:flex; gap:8px; align-items:baseline; box-shadow:0 2px 8px rgba(29,130,218,.1); }
.chip b { font-family:var(--f-display); font-weight:600; font-size:18px; }
.chip span { color:var(--ok); font-weight:800; font-size:13px; }
.seg { justify-self:start; }
.elenco { display:grid; gap:8px; }
.att { display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; background:var(--surface); border-radius:var(--r-md); padding:10px 16px; }
.att .h { color:var(--muted); font-weight:700; font-size:13px; }
.att .id { color:var(--muted); font-size:13px; font-weight:700; }
.sto { background:var(--surface); border-radius:var(--r-lg); padding:14px 16px; display:grid; gap:10px; }
.sto header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sto header b { font-family:var(--f-display); font-weight:600; font-size:22px; }
.sto .fine { display:flex; justify-content:space-between; color:var(--muted); font-weight:700; font-size:14px; }

/* menu del titolare */
.riga-piatto { background:var(--surface); border-radius:var(--r-lg); padding:12px 14px 12px 12px; display:flex; gap:12px; align-items:center; box-shadow:var(--ombra); }
.riga-piatto .t { flex:1; min-width:0; }
.riga-piatto b { display:block; font-weight:800; overflow-wrap:anywhere; }
.riga-piatto small { color:var(--muted); display:block; }
.riga-piatto .p { color:var(--accent); font-weight:800; }
.riga-piatto .az2 { display:grid; gap:8px; justify-items:end; }
.tile-piu { border:3px dashed var(--accent); background:rgba(255,255,255,.45); color:var(--accent); border-radius:var(--r-lg); padding:22px; font-weight:800; font-size:17px; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.tile-piu .piu-grande { width:48px; height:48px; border-radius:50%; background:var(--accent); color:#fff; font-size:32px; line-height:1; display:grid; place-items:center; padding-bottom:4px; }
.anteprima { display:flex; gap:14px; align-items:center; }
.anteprima .foto { width:96px; height:96px; border-radius:28px; }
.anteprima .az3 { display:grid; gap:8px; }
.codice { font-family:var(--f-display); font-size:44px; letter-spacing:.14em; text-align:center; background:var(--surface); border-radius:var(--r-lg); padding:14px; color:var(--accent); }
.url-riga { display:flex; gap:8px; align-items:center; justify-content:space-between; background:var(--surface); border-radius:var(--r-pill); padding:6px 6px 6px 18px; font-weight:700; }
.url-riga code { overflow-wrap:anywhere; font-size:13px; }

/* CEO */
.riepi { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; max-width:1100px; margin:0 auto 14px; }
.riepi > div { background:var(--surface); border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--ombra); }
.riepi b { display:block; font-family:var(--f-display); font-weight:600; font-size:34px; line-height:1.1; color:var(--accent); }
.riepi span { color:var(--muted); font-weight:700; font-size:13px; }
.ristoranti { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; align-items:start; }
.rist .testa { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.rist h3 { font-size:22px; }
.rist .stat { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.rist .stat > div { background:var(--accent-soft); border-radius:var(--r-md); padding:8px 4px; }
.rist .stat b { display:block; font-family:var(--f-display); font-weight:600; font-size:20px; }
.rist .stat span { font-size:12px; color:var(--muted); font-weight:700; }
.rist .azioni { display:flex; flex-wrap:wrap; gap:8px; }
.credenziali { background:var(--surface); border-radius:var(--r-lg); padding:6px 16px; display:grid; }
.credenziali > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
.credenziali > div:last-child { border-bottom:0; }
.credenziali span { color:var(--muted); font-weight:700; font-size:13px; }
.credenziali b { font-weight:800; overflow-wrap:anywhere; text-align:right; }

/* demo */
.demobar { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; margin:-14px -16px 14px; padding:10px 16px; background:var(--surface); color:var(--ink); display:flex; flex-wrap:wrap; gap:8px; align-items:center; box-shadow:0 2px 10px rgba(29,130,218,.15); }
.demobar b { font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-right:4px; color:var(--muted); }
.demobar button { border:0; border-radius:var(--r-pill); padding:8px 14px; font-weight:800; font-size:13px; background:var(--soft); color:var(--ink); }
.demobar button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }

/* vetrina cliente */
.copertina { height:150px; border-radius:var(--r-lg); overflow:hidden; margin:2px 0 6px; background:var(--accent-soft); }
.copertina img { display:block; width:100%; height:100%; object-fit:cover; }
.novita { background:var(--accent-soft); border-radius:var(--r-lg); padding:14px 16px; margin:4px 0 12px; display:grid; gap:4px; }
.novita small { font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.novita b { font-size:18px; } .novita p { margin:0; }
.cop-ante { height:130px; border-radius:var(--r-lg); overflow:hidden; background:var(--accent-soft); display:grid; place-items:center; }
.cop-ante img { width:100%; height:100%; object-fit:cover; }
.scheda textarea { width:100%; border-radius:var(--r-md,18px); border:2px solid var(--line); padding:12px 14px; font:inherit; resize:vertical; }
.spunta { display:flex; gap:10px; align-items:center; font-weight:700; margin:6px 0; }
.stesso-tavolo { background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:13px; border-radius:999px; padding:6px 12px; justify-self:start; }