/* Incomanda — identità grafica condivisa con l'app del cliente:
   verde da osteria, ottone per i numeri, Bodoni per i titoli. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600&display=swap");

:root{
  --ground:#F0F2EC; --surface:#FFFFFF; --surface-2:#E8ECE3;
  --ink:#151C18; --ink-2:#4B554D; --ink-3:#7B857C;
  --line:#D6DCD0; --line-strong:#BDC5B6;
  --accent:#1E4D3C; --accent-bg:#1E4D3C; --accent-fg:#F7F9F4; --accent-soft:#E2EDE6;
  --ottone:#8C6A1F; --ottone-soft:#F3EAD4;
  --allarme:#A63328; --allarme-soft:#F8E4E1;
  --ok:#2C7A5A; --ok-soft:#E0EFE7;
  --font-d:"Bodoni Moda",Georgia,serif;
  --font-b:Archivo,"Helvetica Neue",Arial,sans-serif;
  --raggio:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111610; --surface:#1A201A; --surface-2:#242B23;
    --ink:#E9EDE5; --ink-2:#A8B2A5; --ink-3:#7C867A;
    --line:#2E362C; --line-strong:#3D473A;
    --accent:#6DB394; --accent-bg:#2F6B53; --accent-fg:#EAF3EE; --accent-soft:#1D2B24;
    --ottone:#D2A64E; --ottone-soft:#2D2516;
    --allarme:#E38173; --allarme-soft:#33201D;
    --ok:#5EAE87; --ok-soft:#1B2A22;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--font-b); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
h1,h2,h3{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ------------------------------------------------------------ intestazione */
.barra{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 16px calc(12px); background:var(--surface);
  border-bottom:1px solid var(--line);
  padding-top:calc(12px + env(safe-area-inset-top,0px));
}
.marchio{font-family:var(--font-d); font-size:21px; font-weight:600; color:var(--ink); text-decoration:none}
.menu{display:flex; gap:4px; flex-wrap:wrap}
.menu a{
  padding:6px 12px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--ink-2); text-decoration:none;
}
.menu a.qui{background:var(--accent-soft); color:var(--accent)}
.esci{margin-left:auto}
.esci button{
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-2);
  border-radius:999px; padding:6px 13px; font:inherit; font-size:13px; cursor:pointer;
}

.foglio{max-width:860px; margin:0 auto; padding-inline:16px; padding-block:26px 0}

/* ------------------------------------------------------------------ testa */
.testa{margin-bottom:22px}
.testa h1{font-family:var(--font-d); font-size:clamp(28px,6vw,38px); font-weight:600; line-height:1.05}
.guida{color:var(--ink-2); font-size:14px; margin:8px 0 0; max-width:62ch}

.avviso{
  border-radius:8px; padding:11px 14px; font-size:14px; font-weight:500; margin:0 0 18px;
  background:var(--ok-soft); color:var(--ok);
}
.avviso.err{background:var(--allarme-soft); color:var(--allarme)}

.vuoto{
  border:1px dashed var(--line-strong); border-radius:var(--raggio);
  padding:34px 18px; text-align:center; color:var(--ink-3);
}
.vuoto .grande{font-family:var(--font-d); font-size:20px; color:var(--ink-2); margin:0 0 6px}

/* ------------------------------------------------------------- categorie */
.categoria{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--raggio);
  margin-bottom:18px; overflow:hidden;
}
.categoria.spenta{opacity:.62}
.cat-testa{
  display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  padding:15px 16px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.cat-testa h2{font-family:var(--font-d); font-size:22px; font-weight:600}
.cat-testa h2 .en{font-family:var(--font-b); font-size:12px; font-weight:500; color:var(--ink-3); margin-left:9px}
.cat-info{margin:3px 0 0; font-size:12.5px; color:var(--ink-3)}
.cat-azioni{margin-left:auto; display:flex; gap:6px; align-items:flex-start}
.cat-azioni form{margin:0}

button, .bottone{font:inherit; cursor:pointer}
.mini{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  border-radius:7px; padding:6px 11px; font-size:12.5px; font-weight:500;
}
.mini.acceso{background:var(--accent-bg); color:var(--accent-fg); border-color:var(--accent-bg)}
summary.mini{list-style:none; display:inline-block}
summary::-webkit-details-marker{display:none}

/* ---------------------------------------------------------------- piatti */
ul.piatti{list-style:none; margin:0; padding:0}
ul.piatti li{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
ul.piatti li:last-child{border-bottom:0}
ul.piatti li.finito{background:var(--allarme-soft)}
.interruttore{margin:0}
.interruttore button{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--surface); font-size:13px; line-height:1; padding:0;
}
.interruttore button.si{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-soft)}
.interruttore button.no{background:var(--allarme); color:#fff; border-color:var(--allarme)}
.p-corpo{flex:1; min-width:0}
.p-nome{font-weight:600; text-decoration:none; color:var(--ink)}
.p-nome:hover{color:var(--accent)}
.p-desc{display:block; font-size:13px; color:var(--ink-2); margin-top:3px}
.p-all{display:block; font-size:11px; color:var(--allarme); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.p-prezzo{font-family:var(--font-d); font-size:17px; font-weight:600; color:var(--ottone); white-space:nowrap; font-variant-numeric:tabular-nums}
.pill{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ottone-soft); color:var(--ottone); padding:2px 7px; border-radius:4px; margin-left:7px;
}
.pill.finito{background:var(--allarme); color:#fff}
.aggiungi{
  display:block; padding:12px 16px; font-size:13.5px; font-weight:600;
  color:var(--accent); text-decoration:none; border-top:1px solid var(--line);
}
.aggiungi:hover{background:var(--accent-soft)}

/* ----------------------------------------------------------------- form */
.riquadro, .scheda{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--raggio);
  padding:18px; display:grid; gap:14px; margin-top:12px;
}
label{display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
input[type=text], input:not([type]), input[type=password], input[type=number], select, textarea{
  width:100%; margin-top:7px; font:inherit; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px;
}
textarea{resize:vertical}
.due{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:620px){ .due{grid-template-columns:1fr} }
label.spunta{
  display:flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:500; color:var(--ink);
}
label.spunta input{width:auto; margin:0}
.conval{display:flex; align-items:center; gap:0; margin-top:7px}
.conval .eur{
  font-family:var(--font-d); font-size:18px; font-weight:600; color:var(--ottone);
  border:1px solid var(--line-strong); border-right:0; border-radius:8px 0 0 8px;
  padding:9px 12px; background:var(--surface-2);
}
.conval input{margin-top:0; border-radius:0 8px 8px 0; max-width:160px; font-variant-numeric:tabular-nums}

.primario{
  border:0; background:var(--accent-bg); color:var(--accent-fg);
  border-radius:8px; padding:11px 18px; font-weight:600; font-size:14.5px;
}
.primario.largo{display:block; width:100%; text-align:center}
.pericolo{
  border:1px solid var(--allarme); background:transparent; color:var(--allarme);
  border-radius:8px; padding:11px 16px; font-weight:600; font-size:14px;
}
.bottone{
  display:inline-block; border:1px solid var(--line-strong); background:transparent; color:var(--ink);
  border-radius:8px; padding:11px 16px; font-weight:600; font-size:14px; text-decoration:none;
}
.fila{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.fila.fondo{border-top:1px solid var(--line); padding-top:16px}

fieldset.allergeni{border:1px solid var(--line); border-radius:8px; padding:14px; margin:0}
fieldset.allergeni legend{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:0 6px;
}
.caselle{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-top:10px}
label.casella{
  display:flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:400; color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:9px 11px; cursor:pointer;
}
label.casella input{width:auto; margin:0}
label.casella:has(input:checked){background:var(--allarme-soft); border-color:var(--allarme); color:var(--allarme); font-weight:600}

.nuova-cat{margin-top:22px}
.nuova-cat summary{list-style:none}

/* --------------------------------------------------------------- tavoli */
.tavoli{display:flex; flex-wrap:wrap; gap:8px; padding:15px 16px}
.tavolo{
  display:flex; align-items:center; gap:9px; margin:0;
  border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; background:var(--ground);
}
.tavolo .etichetta{font-family:var(--font-d); font-size:17px; font-weight:600}
.tavolo .posti{font-size:11.5px; color:var(--ink-3)}
.tavolo .x{border:0; background:transparent; color:var(--allarme); font-size:16px; line-height:1; padding:0 2px}
.riga-nuova{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:0 16px 16px; margin:0;
}
.riga-nuova input{margin-top:0; width:auto; flex:1; min-width:120px}
.riga-nuova input[type=number]{max-width:90px; flex:0 0 auto}

/* -------------------------------------------------------------- entrata */
.entrata{max-width:380px; margin:8vh auto 0}
.entrata h1{font-family:var(--font-d); font-size:34px; font-weight:600}