/* Il vestito dei dispositivi in servizio: comandiera e tablet del cameriere.
 *
 * NON e' tema.css, e non deve diventarlo. Quelli sono schermi appesi al passe
 * o tenuti in mano fra i tavoli: si guardano da tre metri, in una stanza calda
 * e luminosa, e si toccano con le mani bagnate o piene. Contrasto alto,
 * caratteri grandi, bersagli enormi, nessuna barra da cui uscire per sbaglio.
 * Sono l'opposto delle regole di una pagina che si legge seduti.
 *
 * Sta qui, in un foglio solo, perche' le due schermate condividono
 * l'ingresso -- arruolamento e tastierino -- e due copie divergerebbero: la
 * prima volta che si sistema il tastierino, si sistema su una sola.
 */

/* I caratteri, gli stessi della piattaforma e ospitati da noi (le stesse
   dichiarazioni in cima a tema.css, che qui non si carica): Tomorrow per i
   numeri dei tavoli e i titoli, Nunito Sans per il testo, IBM Plex Mono per
   etichette e cifre in colonna. Stessa origine: col wifi del locale che cade
   non si aspetta niente da un altro dominio. */
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("/static/caratteri/tomorrow-200.woff2") format("woff2"); }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/caratteri/tomorrow-300.woff2") format("woff2"); }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/caratteri/tomorrow-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/static/caratteri/nunito-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/caratteri/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/caratteri/plex-mono-500.woff2") format("woff2"); }

/* BoxGrape (26/9/2026): lo stesso mondo della piattaforma. Il nero pieno al
   posto del blu-nero, e sul fondo la griglia di fili appena accennata al
   posto della luce; carte e fili neutri, angoli vivi. Restano il contrasto
   alto e i tre colori che qui VOGLIONO dire qualcosa -- verde aperto, ambra
   pronto, rosso conto -- e resta lo scuro: niente tema chiaro in sala. La
   scelta (una scheda, una zona, un metodo) non e' uno stato del servizio:
   e' l'inchiostro pieno, come nel resto della piattaforma. */
:root {
  --fondo:       #060607;
  --carta:       #0e0e10;
  --carta-2:     #161618;
  --riga:        #2e2e30;
  --riga-forte:  #58585a;   /* il filo dei comandi: si vede da lontano */
  --testo:       #f2f1ee;
  --tenue:       #a9a8a3;
  --verde:       #43c48c;
  --verde-scuro: #123326;
  --ambra:       #e0a63a;
  --ambra-scuro: #3b2a0c;   /* il fondo dei messaggi della cucina */
  --rosso:       #e8654a;
  --rosso-scuro: #3a1712;   /* il fondo degli storni */
  --rosso-velo:  rgba(232, 101, 74, .08);
  --su-colore:   #060607;   /* la scritta sui pieni verdi, ambra e rossi */
  --superficie:  rgba(242, 241, 238, .06);  /* muri e banconi della mappa */
  --griglia:     rgba(242, 241, 238, .035); /* i fili del fondo */
  --velo:        rgba(0, 0, 0, .66);
  /* L'unica ombra: sotto a quello che sta SOPRA la schermata. */
  --ombra-alta:  0 18px 50px rgba(0, 0, 0, .6);
  --display: "Tomorrow", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Le schermate di servizio sono solo scure: lo sanno anche i controlli del
     browser (tendine, barre di scorrimento), che senza lo disegnavano chiari. */
  color-scheme: dark;
}

/* Le opzioni di una tendina col fondo pieno delle carte: l'elenco lo
   disegna il browser, e senza usciva bianco. */
select option, select optgroup { background-color: var(--carta); color: var(--testo); }

/* La freccia «indietro» (Marco, 30/10/2026): sulla barra alta delle app
   (montaScoccaApp la disegna come <a>) e, con lo stesso aspetto, in cima a
   ogni sottofinestra che si apre SOPRA la schermata -- lì è un <button> che la
   chiude. Stessa sagoma del sito (nav.css), coi colori del passe. */
a.indietro, button.indietro {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 19px/1 var(--sans); text-decoration: none;
  color: var(--tenue); background: transparent;
  border: 1px solid var(--riga-forte); border-radius: 0;
  cursor: pointer; padding: 0;
}
a.indietro:hover, button.indietro:hover { color: var(--testo); }
a.indietro:active, button.indietro:active { background: var(--carta-2); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

/* Niente zoom: qui si lavora, non si legge. `pan-x pan-y` lascia scorrere ma
   toglie pinch e doppio-tap-zoom, che durante il servizio ingrandiscono lo
   schermo per sbaglio proprio mentre si cerca di premere un tasto. La stessa
   cosa è ribadita nel <meta viewport> (turno.js) e col gesturestart per iOS. */
html { touch-action: pan-x pan-y; }
/* Niente menu di sistema al tocco lungo (copia/condividi/definisci): sono
   scivoloni che portano fuori dallo schermo di lavoro. */
* { -webkit-touch-callout: none; }

body {
  margin: 0; color: var(--testo);
  /* La griglia della piattaforma: dodici colonne sulla larghezza dello
     schermo, un filo per colonna appena accennato, ferma mentre si scorre.
     Le carte sono piene e la coprono: si vede solo nel vuoto. */
  background:
    linear-gradient(90deg, var(--griglia) 1px, transparent 1px) 0 0 / calc(100vw / 12) 100% fixed,
    var(--fondo);
  font-family: var(--sans); font-size: 17px; line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  /* Niente selezione: qui si tocca, non si copia. Una selezione accidentale
     col dito fa comparire la lente d'ingrandimento sopra la cosa che si sta
     cercando di premere. */
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ------------------------------------------------------------ schermate */
.schermo { display: none; min-height: 100vh; }
.schermo.attivo { display: block; }

.centro {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 24px;
}
.marchio {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--tenue);
}
.centro h1 {
  font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase; text-wrap: balance;
  margin: 0; text-align: center;
}
.centro p.spiega {
  margin: 0; max-width: 34ch; text-align: center; color: var(--tenue);
  font-size: 16px;
}
.avviso {
  min-height: 24px; color: var(--rosso); font-size: 16px; text-align: center;
  max-width: 34ch;
}

/* ------------------------------------------------------- arruolamento */
.codice {
  font-family: var(--mono); font-size: 34px; letter-spacing: .22em;
  text-align: center; text-transform: uppercase;
  width: 100%; max-width: 340px; padding: 18px 12px;
  background: var(--carta); color: var(--testo);
  border: 2px solid var(--riga-forte); border-radius: 0;
}
.codice:focus { outline: none; border-color: var(--testo); }

/* --------------------------------------------------------- tastierino */
.pin-vista { display: flex; gap: 14px; height: 22px; align-items: center; }
.pin-vista i {
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: 2px solid var(--riga-forte); display: block;
}
.pin-vista i.pieno { background: var(--testo); border-color: var(--testo); }

.tasti { display: grid; grid-template-columns: repeat(3, 92px); gap: 14px; }
.tasti button {
  height: 82px; font-size: 30px; font-weight: 400;
  background: var(--carta); color: var(--testo);
  border: 1px solid var(--riga); border-radius: 0;
  font-family: var(--display); cursor: pointer;
}
.tasti button:active { background: var(--testo); color: var(--fondo); border-color: var(--testo); }
.tasti button.vuoto { visibility: hidden; }
.tasti button.canc { font-size: 22px; color: var(--tenue); font-family: var(--sans); }
/* Mentre il server controlla il PIN (un secondo o due) la tastiera è ferma, e
   si vede: le cifre battute intanto si accodavano al PIN sbagliato (turno.js). */
.tasti.attesa button { opacity: .4; cursor: default; }
.tasti.attesa button:active { background: var(--carta); color: var(--testo); border-color: var(--riga); }

/* ------------------------------------------------- la lingua (turno.js) */
/* Solo sulle due schermate d'ingresso, in alto a destra: la lingua si sceglie
   quando si prende il tablet, col PIN; dopo, la testata e' gia' piena. Muto
   come i pulsanti della testata -- un filo e due lettere -- perche' non deve
   rubare l'occhio al tastierino. Il margine del notch c'e' gia': e' il
   padding del body, con env(safe-area-inset-*). */
#s-arruola, #s-pin { position: relative; }
.bt-lingua {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  min-width: 44px; min-height: 36px; padding: 6px 10px;
  background: transparent; color: var(--tenue);
  border: 1px solid var(--riga-forte); border-radius: 0;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.bt-lingua:active { background: var(--testo); color: var(--fondo); border-color: var(--testo); }
/* La sigla della lingua in uso (IT, EN, ES), e la tendina con le tre. */
.bt-lingua:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; }
.bt-lingua[hidden] { display: none; }
/* Il posto per il pulsante. Su un telefono basso (la scheda «Installa» in
   cima, poi il tastierino) il contenuto non ci sta, parte dal bordo di sopra
   e gli finirebbe sotto. Tanto sopra quanto sotto: dove lo spazio c'e', il
   centro resta dov'era. */
#s-arruola > .centro, #s-pin > .centro { padding-top: 60px; padding-bottom: 60px; }

/* La scheda «Installa l'app» e la guida per iPhone stanno in app_boxgrape.css:
   le usa anche Account > Profilo. */

.scegli-chi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.scegli-chi button {
  min-height: 52px; padding: 0 20px; font-size: 18px;
  background: var(--carta); color: var(--testo);
  border: 1px solid var(--riga-forte); border-radius: 0;
  font-family: var(--sans); cursor: pointer;
}
.scegli-chi button:active { background: var(--testo); color: var(--fondo); }

/* -------------------------------------------------------------- testata */
/* Va a capo quando non ci sta: la testata della direzione mette in fila
   reparto, nome, spia e sei pulsanti, e sul telefono (390 px) ne servivano
   piu' di 600 -- lo schermo scorreva di lato. Su tablet resta una riga. */
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; background: var(--fondo);
  border-bottom: 1px solid var(--riga);
}
header .spazio { flex: 1; }
/* .14em e non piu' .2em: il monospaziato ospitato e' un filo piu' largo di
   quello di sistema, e a 390 px la testata della comandiera scorreva di lato. */
.reparto {
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--testo); font-weight: 500;
}
/* «scritta alle 20:41 senza rete» sotto la testa del tagliando (3/10/2026):
   un'informazione, non un allarme. Grigia, come i coperti. */
.tag-rete {
  padding: 7px 14px; border-top: 1px solid var(--riga); background: var(--carta-2);
  color: var(--tenue); font-family: var(--mono); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
/* «Sola lettura»: la direzione guarda la cucina e non la cambia (Marco,
   3/10/2026), e la fascia dice come si fa a segnare: col PIN di chi lavora
   in cucina o al bar («nei locali piccoli usa la zona cucina e non la
   direzione»). Sotto la testata, in ambra: si legge prima di toccare. */
.sola {
  margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--ambra);
  background: var(--ambra-scuro); color: var(--ambra); font-size: 15px; line-height: 1.4;
}
.sola b {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; margin-right: 10px;
}
.sola[hidden] { display: none; }
.chi { color: var(--tenue); font-size: 14px; }
.polso {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde);
  transition: background .3s; flex: none;
}
/* Rosso quando il server non risponde. In sala il wifi cade davvero, e uno
   schermo che non lo dice fa credere che non ci siano comande. */
.polso.muto { background: var(--rosso); }
/* Ambra: c'e' qualcosa in coda che non e' ancora partito. */
.polso.coda { background: var(--ambra); }

header button, .bt-testa {
  background: transparent; border: 1px solid var(--riga-forte); color: var(--testo);
  border-radius: 0; padding: 8px 13px; font-size: 14px;
  font-family: var(--sans); cursor: pointer;
}
header button:active, .bt-testa:active { background: var(--testo); color: var(--fondo); }

/* Sul telefono la testata va in ordine (Marco, 27/9/2026: «devo scorrere per
   vederlo, deve essere tutto ordinato»). In alto reparto, nome, spia ed Esci;
   sotto gli altri pulsanti, larghi uguali, tre per riga. Il nome si accorcia
   coi puntini invece di spingere Esci a capo. Sul tablet resta una riga. */
@media (max-width: 640px) {
  header .chi { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header .chi ~ .spazio { display: none; }
  header #bt-esci, header [data-esci] { order: 1; }
  /* L'a capo dopo Esci: senza, il primo pulsante saliva accanto a lui e il
     nome si accorciava a «Ni…». Solo dove sotto c'e' qualcosa da mettere. */
  header:has(> button:not(#bt-esci):not([data-esci]):not(.bt-testa))::after {
    content: ""; flex-basis: 100%; height: 0; order: 2;
  }
  header button:not(#bt-esci):not([data-esci]):not(.bt-testa) { order: 3; flex: 1 1 28%; padding-inline: 8px; }
}

/* --------------------------------------------------------- vuoto e note */
.vuota {
  grid-column: 1 / -1; text-align: center; color: var(--tenue);
  padding: 90px 20px; font-size: 19px;
}

/* ------------------- la finestra «Messaggio alla sala» (scrivi.js) */
.msg-velo {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: var(--velo);
}
.msg-foglio {
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  background: var(--carta); border: 1px solid var(--riga-forte); border-radius: 0;
  box-shadow: var(--ombra-alta);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  -webkit-user-select: text; user-select: text;
}
.msg-foglio h2 {
  margin: 0; font-family: var(--display); font-size: 22px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
.msg-foglio select, .msg-foglio textarea {
  width: 100%; background: var(--fondo); color: var(--testo);
  border: 1px solid var(--riga-forte); border-radius: 0; padding: 12px;
  font: 17px var(--sans);
}
.msg-foglio select:focus, .msg-foglio textarea:focus { outline: none; border-color: var(--testo); }
.msg-foglio textarea { min-height: 84px; resize: vertical; }
.frasi { display: flex; flex-wrap: wrap; gap: 8px; }
.frasi button {
  border: 1px solid var(--riga-forte); background: var(--carta-2); color: var(--testo);
  border-radius: 0; padding: 9px 14px; font: 15px var(--sans); cursor: pointer;
}
.frasi button:active { background: var(--testo); color: var(--fondo); }
.msg-azioni { display: flex; gap: 10px; justify-content: flex-end; }
.msg-azioni button {
  border-radius: 0; padding: 12px 18px; font: 600 16px var(--sans); cursor: pointer;
  border: 1px solid var(--riga-forte); background: transparent; color: var(--testo);
}
.msg-azioni .manda { background: var(--verde); border-color: var(--verde); color: var(--su-colore); }
.msg-per { color: var(--tenue); font-size: 14px; margin: -6px 0 0; }
.msg-per b { color: var(--testo); }
.frasi-testa { display: flex; align-items: center; justify-content: space-between; }
.frasi-testa span {
  color: var(--tenue); font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.frasi-testa button, .frase-edit button, .frasi-edit-azioni button {
  border: 1px solid var(--riga-forte); background: transparent; color: var(--testo);
  border-radius: 0; padding: 6px 12px; font: 14px var(--sans); cursor: pointer;
}
.frasi-edit { display: flex; flex-direction: column; gap: 8px; }
.frase-edit { display: flex; gap: 8px; }
.frase-edit input {
  flex: 1; min-width: 0; background: var(--fondo); color: var(--testo);
  border: 1px solid var(--riga-forte); border-radius: 0; padding: 10px; font: 16px var(--sans);
}
.frase-edit input:focus { outline: none; border-color: var(--testo); }
.frasi-edit-azioni { display: flex; gap: 8px; justify-content: flex-end; }
.frasi-edit-azioni .salva { background: var(--verde); border-color: var(--verde); color: var(--su-colore); font-weight: 700; }
.msg-conta {
  color: var(--tenue); font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: right; margin-top: -8px;
}
.msg-errore { color: var(--rosso); font-size: 15px; min-height: 0; margin: 0; }
.msg-storia { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--riga); }
.msg-storia li { padding: 10px 0; border-bottom: 1px solid var(--riga); font-size: 15px; }
.msg-storia small { display: block; color: var(--tenue); font-family: var(--mono); font-size: 13px; margin-top: 2px; }
.msg-storia .ok { color: var(--verde); }

/* ------------- lo storico delle comande: comandiera e direzione
   (static/storico_comande.js). Si consulta da vicino, non dal fondo della
   cucina: più fitto della lavagna, e sulle righe non c'è niente da toccare. */
.st-filtri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--riga);
}
.st-stati { display: flex; flex-wrap: wrap; border: 1px solid var(--riga-forte); }
.st-stati button {
  background: transparent; border: 0; border-radius: 0; color: var(--tenue); cursor: pointer;
  padding: 9px 13px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
}
.st-stati button + button { border-left: 1px solid var(--riga-forte); }
.st-stati button.qui { background: var(--testo); color: var(--fondo); }
.st-stati b { font-weight: 500; margin-left: 7px; font-variant-numeric: tabular-nums; }
.st-campo {
  background: var(--carta); color: var(--testo); border: 1px solid var(--riga-forte);
  border-radius: 0; padding: 9px 12px; font: 16px var(--sans);
}
#st-cerca { flex: 1; min-width: 150px; }
.st-lista {
  display: grid; gap: 12px; padding: 14px 14px 40px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.st-tag { background: var(--carta); border: 1px solid var(--riga); }
.st-testa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 12px; background: var(--carta-2);
}
.st-testa .spazio { flex: 1; }
.st-tavolo { font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: .02em; }
.st-info {
  color: var(--tenue); font-family: var(--mono); font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
}
.st-info.st-cliente { color: var(--verde); }
.st-righe { list-style: none; margin: 0; padding: 0; }
.st-righe li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--riga);
}
.st-qta {
  font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--verde);
  min-width: 2.2ch; font-variant-numeric: tabular-nums;
}
.st-voce { flex: 1; min-width: 0; }
.st-nome { font-size: 16px; font-weight: 500; }
.st-var { color: var(--tenue); font-size: 14px; }
.st-nota { display: block; color: var(--ambra); font-size: 14px; font-style: italic; margin-top: 2px; }
.st-giro, .st-rep { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.st-rep { text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--riga-forte); padding: 0 4px; }
/* Lo stato a parole E a colori: in cucina si legge di sfuggita. */
.st-stato {
  flex: none; max-width: 45%; text-align: right; font-family: var(--mono); font-size: 13px;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.st-stato small { display: block; color: var(--tenue); font-family: var(--sans); letter-spacing: 0; }
li.st-pronta .st-stato { color: var(--verde); }
li.st-da_fare .st-stato { color: var(--ambra); }
li.st-annullata .st-stato { color: var(--rosso); }
li.st-annullata .st-nome { text-decoration: line-through; color: var(--tenue); }
li.st-annullata .st-qta { color: var(--tenue); }
/* «Rimetti da fare» (3/10/2026): piccolo, sotto l'ora d'uscita. Si tocca di
   rado, e solo per rimediare. */
.st-rimetti {
  display: block; margin: 6px 0 0 auto; padding: 6px 10px; cursor: pointer;
  background: transparent; color: var(--testo); border: 1px solid var(--riga-forte);
  border-radius: 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.st-rimetti:active { background: var(--testo); color: var(--fondo); }
.st-rimetti[disabled] { opacity: .5; }
/* Mentre si guarda lo storico sono arrivate comande: il ritorno lo dice. */
#st-torna.nuove { border-color: var(--ambra); color: var(--ambra); }

/* ------------- i messaggi della cucina: sala e direzione (fascia, busta) */
.dalla-cucina {
  /* Appiccicata e non sovrapposta: spinge giù la pianta invece di coprire
     la prima fila di tavoli, e resta in vista scorrendo. */
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--fondo); pointer-events: none;
}
.dalla-cucina:empty { display: none; }
/* Due fasce, la cucina e i tavoli, appiccicate INSIEME: due elementi
   appiccicati ognuno per conto suo finirebbero uno sopra l'altro. */
.fasce { position: sticky; top: 0; z-index: 30; pointer-events: none; }
.fasce .dalla-cucina { position: static; }
.fasce .dalla-cucina:not(:empty) + .dalla-cucina { padding-top: 0; }
/* Gli ordini dal telefono: stesso disegno dei messaggi, in verde -- non è un
   avviso ma una domanda, e la risposta di solito è sì. */
.msg-cucina.dal-cliente { background: var(--verde-scuro); border-color: var(--verde); align-items: flex-start; }
.msg-cucina.dal-cliente .cosa b { color: var(--verde); }
.msg-cucina.dal-cliente .cosa i { color: var(--tenue); }
.msg-cucina .scelte { display: flex; flex-direction: column; gap: 8px; }
.msg-cucina.dal-cliente button { background: var(--verde); }
.msg-cucina.dal-cliente button.no { background: transparent; color: var(--testo); border: 1px solid var(--riga-forte); }
.msg-cucina button[disabled] { opacity: .5; }
/* Ambra piena di bordo e velata di fondo: e' il colore di «c'e' qualcosa
   che ti aspetta». Niente ombra: il filo doppio basta a staccarla. */
.msg-cucina {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 0;
  background: var(--ambra-scuro); border: 2px solid var(--ambra);
  animation: scende .3s ease-out;
}
@keyframes scende { from { transform: translateY(-10px); opacity: 0; } }
.msg-cucina .cosa { flex: 1; font-size: 17px; line-height: 1.3; }
.msg-cucina .cosa b { color: var(--ambra); }
.msg-cucina .cosa small { display: block; color: var(--tenue); font-family: var(--mono); font-size: 13px; margin-top: 2px; }
/* La busta della cucina sul tavolo: la vede tutta la sala, finché qualcuno
   prende in carico il messaggio. */
.tav .busta {
  align-self: flex-start; background: var(--ambra); color: var(--su-colore);
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; border-radius: 0; padding: 2px 6px;
}
/* Sulla mappa e' una spia: un tondo, come i tavoli. */
.mtav .mbusta {
  position: absolute; top: -7px; left: -7px; background: var(--ambra);
  color: var(--su-colore); border-radius: 50%; width: 22px; height: 22px;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--fondo);
}
.msg-tavolo { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 0; }
.msg-tavolo:empty { display: none; }
.msg-tavolo .msg-cucina { box-shadow: none; animation: none; }
.msg-cucina button {
  border: 0; border-radius: 0; padding: 12px 18px; cursor: pointer;
  background: var(--ambra); color: var(--su-colore); font: 700 16px var(--sans);
}

/* ------ senza rete / in coda: la pillola in basso (fuori_rete.js), sulle tre
   schermate di servizio. Un'etichetta, a spigolo vivo: sta sopra la
   schermata, e ha l'ombra di quello che sta sopra.
   Un'etichetta e NON un pulsante: i tocchi le passano attraverso. Il 1/10,
   senza rete, copriva «Aggiungi» e «Invia» della sala (e «Preconto» in
   direzione): il tocco cadeva su di lei e la comanda non entrava in coda.
   In più fuori_rete.js la tiene sopra la barra in basso. */
.rete {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25;
  padding: 9px 14px; border-radius: 0; font-family: var(--mono); font-size: 14px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--carta-2); color: var(--testo); border: 1px solid var(--riga-forte);
  box-shadow: var(--ombra-alta); max-width: calc(100vw - 24px); pointer-events: none;
}
.rete.giu { background: var(--ambra-scuro); border-color: var(--ambra); color: var(--ambra); }
.rete[hidden] { display: none; }

/* ------------------------------------------------- le prenotazioni */
/* Chi arriva stasera, in ordine d'ora. Si guarda di sfuggita dal banco:
   l'ora grande, il nome, quanti sono; sotto, i gesti. */
.pren-conti { margin: 0; padding: 12px 16px 0; color: var(--tenue); font-family: var(--mono);
              font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
/* Dal 26/10/2026 la lista è a gruppi per turno, a righe strette
   (static/prenota_gruppi.js): una colonna, non più una griglia di schede. */
.pren-lista { padding: 12px 14px 40px; }
.pren-carta { background: var(--carta); border: 1px solid var(--riga); padding: 12px 14px; }
.pren-carta.fatta { opacity: .6; }
.pren-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pren-ora { font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums; }
.pren-chi { font-size: 18px; font-weight: 600; }
.pren-quanti { color: var(--tenue); font-size: 16px; }
.pren-stato { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
              border: 1px solid var(--riga-forte); padding: 1px 6px; color: var(--tenue); }
.pren-stato.arrivata { color: var(--verde); border-color: var(--verde); }
.pren-stato.non_venuta, .pren-stato.cancellata { color: var(--rosso); border-color: var(--rosso); }
.pren-dett { color: var(--tenue); font-size: 14px; margin-top: 4px; }
.pren-dett a { color: var(--testo); }
.pren-note { color: var(--ambra); font-style: italic; font-size: 15px; margin-top: 4px; }
.pren-fare { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pren-fare button, .pren-tavoli button {
  background: transparent; border: 1px solid var(--riga-forte); color: var(--testo); border-radius: 0;
  padding: 9px 12px; font: 14px var(--sans); cursor: pointer;
}
.pren-fare button.pieno { background: var(--verde); border-color: var(--verde); color: var(--su-colore); font-weight: 700; }
.pren-tavoli { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px;
               border-top: 1px solid var(--riga); }
.pren-tavoli p { width: 100%; margin: 0 0 4px; color: var(--tenue); font-size: 14px; }
.pren-tavoli button { min-width: 52px; font-family: var(--display); font-size: 17px; }
.pren-poi { font-family: var(--mono); font-size: 12px; color: var(--ambra); }
/* «Prenotazioni · 2»: ci sono richieste da accettare (prenota_attesa.js). */
#bt-prenotazioni.in-attesa { border-color: var(--ambra); color: var(--ambra); }
/* Oggi / Domani: il filo chiaro dell'inchiostro, come le viste del direttore. */
#s-prenotazioni header .qui { border-color: var(--testo); color: var(--testo);
                              box-shadow: inset 0 0 0 1px var(--testo); }

/* La riga delle sezioni in stile sito è stata tolta dalle case delle app
   (Marco, 20/10/2026: «non voglio la dashboard come sul sito»). Le funzioni si
   aprono da dentro: nel Magazzino per zona, nell'Accoglienza e nella Direzione
   dai pulsanti della schermata. (static/sezioni_app.js rimosso.) */