/* ==========================================================================
   Pizza EAT — design system
   --------------------------------------------------------------------------
   File unico, nessuna dipendenza, nessun CDN. I token stanno in :root e sono
   quelli del mockup: cambiando qui cambia tutto il pannello.

   Nomenclatura BEM con prefisso .pe- :  .pe-blocco__elemento--variante

   I caratteri ORA CI SONO. Qui c'era scritto che Manrope e JetBrains Mono
   sarebbero costati file woff2 da servire in proprio, e che lo stack di
   sistema andava bene lo stesso: vero finche' esisteva un prodotto solo.
   Da quando l'app cliente li serve, quella scelta smetteva di essere una
   semplificazione e diventava l'unica cosa che faceva sembrare i due
   prodotti di due aziende diverse. I file stanno in assets/fonts/, sono gli
   stessi quattro dell'app, sono varianti VARIABILI (un file per famiglia
   copre tutti i pesi) e pesano 83 KB in tutto, presi una volta e poi in
   cache. Lo stack di sistema resta come riserva dietro a entrambi.

   ATTENZIONE a chi arriva qui dall'app cliente: i due fogli hanno 39 classi
   in comune con definizioni DIVERSE, e la peggiore e' .pe-tab — qui e' la
   tabella, di la' e' la barra di navigazione in fondo. Non si copia mai un
   blocco di regole da un foglio all'altro: si copiano i VALORI, e il
   selettore si riscrive a mano. Vale anche per i nomi dei token: le due
   rampe di testo hanno gli stessi valori con i nomi sfalsati di uno
   (--pe-testo-3 qui e' #a8a29e, di la' e' #7c736b).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Caratteri
   Un solo file per famiglia: sono varianti variabili, quindi tutti i pesi
   escono da li'. Il CSP e' 'self' e font-src permette gia' 'self': non
   servono eccezioni. Il sottoinsieme -ext copre gli accenti che le cinque
   lingue chiedono e viene scaricato solo se in pagina compare un carattere
   che ci sta dentro.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Marchio ---------------------------------------------------------- */
  --pe-verde:        #1faa32;
  --pe-verde-scuro:  #16803a;
  --pe-verde-link:   #1c8f36;

  /* Arancione: il colore del marchio, campionato dal logo. NON e' una seconda
     azione, ed e' il colore stesso a dirlo: su bianco fa 2,1:1, quindi non
     regge testo. Vive nei riempimenti, con --pe-arancio-su sopra (8,25:1), e
     nelle decorazioni che testo non ne portano — un bordo sinistro, una
     barretta. Il verde resta la sola cosa che chiede di essere premuta.
     Prima qui c'era #f28c1e, che non e' l'arancione del logo. */
  --pe-arancio:      #ff9d00;
  --pe-arancio-su:   #2b1608;
  --pe-ambra:        #f0a824;
  --pe-rosso:        #d92d20;
  --pe-blu:          #2b6cd4;
  --pe-ink:          #1c1917;

  /* --- Neutri ----------------------------------------------------------- */
  /* Neutri caldi, non grigi: sono gli stessi dell'app cliente. La luminanza
     resta dov'era (entro il 2%), cambia solo la temperatura — il pannello non
     schiarisce, si scalda. */
  /* La crema del contenuto. Schiarita di un gradino rispetto al #f2ece2 di
     prima: con la navigazione diventata scura il contrasto lo porta la
     colonna, non piu' il fondo, e un crema piu' chiaro fa staccare le card
     bianche invece di confonderle. */
  --pe-pagina:       #f6f1e9;
  --pe-fondo:        #faf6ef;
  --pe-bianco:       #ffffff;
  --pe-riga:         #faf9f7;
  --pe-chip:         #f5f0e8;
  --pe-sep:          #f4f1ec;
  --pe-bordo:        #e7e2db;
  --pe-bordo-forte:  #e0dad1;
  --pe-bordo-off:    #ddd6cd;
  --pe-disabile:     #d3ccc2;
  --pe-grigio:       #c8c2ba;
  --pe-testo-3:      #a8a29e;
  --pe-testo-2:      #7c736b;
  --pe-testo-1:      #57504a;
  --pe-testo-0:      #3f3a35;

  /* --- Superfici scure -------------------------------------------------- */
  --pe-scuro:        #1c1917;
  --pe-scuro-kds:    #14100e;
  --pe-scuro-2:      #1f1a17;
  --pe-scuro-3:      #2b2420;
  --pe-scuro-tasto:  #241f1c;
  --pe-scuro-bordo:  #3a3430;

  /* --- Navigazione scura -------------------------------------------------- */
  /* Tre gradini, non uno: la sidebar e' --pe-nav-1, la voce attiva e il piede
     staccano di poco sopra e sotto. Un solo nero avrebbe costretto a separare
     le zone con dei bordi, e sei righe di bordo dentro una colonna da 240px
     fanno una tabella, non una navigazione.
     Il testo delle voci NON e' bianco pieno: su --pe-nav-1 farebbe 17:1, e
     dodici voci a quel contrasto competono tutte con quella attiva, che e'
     l'unica che deve saltare fuori. --pe-nav-testo sta a 6,4:1 — comodo da
     leggere, silenzioso da ignorare. */
  --pe-nav-0:        #12110f;
  --pe-nav-1:        #181613;
  --pe-nav-2:        #1d1a17;
  --pe-nav-bordo:    rgba(255,255,255,.07);
  --pe-nav-hover:    rgba(255,255,255,.055);
  --pe-nav-testo:    #a8a19a;
  --pe-nav-testo-2:  #726b64;
  /* Il gradino che mancava, fra il bianco pieno e --pe-nav-testo. Serve a cio'
     che sta in barra e va LETTO ma non gridato: citta', codice sede, release.
     Con --pe-nav-testo-2 la release stava a 3,4:1 su --pe-nav-1, cioe' sotto
     il minimo per un testo piccolo — e a 10px in maiuscolo spaziato era una
     riga che si vedeva esserci e non si riusciva a leggere. Questo sta a
     10,2:1: si legge da un metro, e resta sotto al nome della pizzeria (18:1),
     che e' l'unica cosa della barra che deve saltare all'occhio. */
  --pe-nav-testo-forte: #c9c2bb;

  /* --- Stati dell'ordine -------------------------------------------------- */
  /* Un nome solo per ogni stato, in tutto il pannello. Prima lo stesso "in
     preparazione" era ambra sui tile della dashboard e arancione altrove:
     due gialli diversi per la stessa cosa, e chi guarda si chiede se siano
     due cose. Questi alias non introducono colori nuovi, danno un indirizzo
     stabile a quelli che c'erano gia'. */
  --status-new:       var(--pe-blu);
  --status-preparing: var(--pe-arancio);
  --status-ready:     var(--pe-verde);
  --status-late:      var(--pe-rosso);

  /* Ogni stato ha DUE valori, e la distinzione e' la stessa che il foglio fa
     gia' per l'arancione: quello sopra e' il colore PIENO, per pallini, bordi
     e riempimenti; questo sotto e' la versione che regge il TESTO su bianco.
     Il verde pieno su bianco fa 2,9:1 e l'arancione 2,1:1 — cifre grandi ma
     illeggibili, che e' il difetto peggiore in un numero che si guarda da tre
     metri. Le varianti -fg stanno tutte sopra il 4,5:1. */
  --status-new-fg:       #1d4ea8;
  --status-preparing-fg: #b4650a;
  --status-ready-fg:     var(--pe-verde-scuro);
  --status-late-fg:      var(--pe-err-fg);

  /* Il nero riscaldato: non e' un colore nuovo, e' --pe-scuro da cui parte la
     sfumatura della barra superiore e delle schermate di accesso, cosi'
     l'arancione del logo atterra su qualcosa che gli appartiene invece che su
     una lastra grigia. Bianco sopra fa 15,2:1, arancione sopra 7,3:1. */
  --pe-bruno:        #3a1f08;

  /* --- Coppie semantiche (fondo / testo / bordo) ------------------------- */
  --pe-info-bg:      #e8f0fd;  --pe-info-fg:  #1d4ea8;
  --pe-ok-bg:        #e8f7ea;  --pe-ok-fg:    #16803a;  --pe-ok-bd:   #bfe6c6;
  --pe-warn-bg:      #fef6e7;  --pe-warn-fg:  #8a5a06;  --pe-warn-bd: #f5e0b5;
  --pe-err-bg:       #fdeceb;  --pe-err-fg:   #a01b13;  --pe-err-bd:  #f6c6c2;
  --pe-ban-bg:       #fdf1e3;  --pe-ban-fg:   #c47f1a;
  --pe-sel-bg:       #f1f9f2;

  /* Le coppie semantiche qui sopra sono tarate su fondo chiaro: sul nero delle
     schermate di accesso un rosso #a01b13 sparisce. Queste sono le loro
     controparti per fondo scuro, schiarite fino a superare il 4.5:1 richiesto
     dalle WCAG su --pe-scuro (il rosso arriva a ~8:1). */
  --pe-err-fg-scuro:  #ff9c91;
  --pe-ok-fg-scuro:   #7fd694;
  --pe-warn-fg-scuro: #f3c46a;

  /* --- Tipografia ------------------------------------------------------- */
  --pe-font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pe-mono: 'JetBrains Mono', ui-monospace, "SF Mono", "Cascadia Mono",
             "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* --- Raggi ------------------------------------------------------------ */
  --pe-r-xs: 6px;
  --pe-r-sm: 8px;
  --pe-r-md: 11px;
  --pe-r-lg: 13px;
  --pe-r-xl: 20px;
  --pe-r-2xl: 26px;
  --pe-r-pill: 999px;
  /* Solo i due raggi grandi salgono ai valori dell'app: sono quelli che si
     vedono, le card e i fogli. I quattro piccoli restano, perche' allinearli
     vorrebbe dire toccare quindici controlli densi per comprare 2px. E
     --pe-r-lg 13px e' gia' identico al raggio dei bottoni dell'app. */

  /* --- Spaziature ------------------------------------------------------- */
  --pe-s1: 4px;
  --pe-s2: 8px;
  --pe-s3: 12px;
  --pe-s4: 16px;
  --pe-s5: 20px;
  --pe-s6: 24px;
  --pe-s7: 32px;
  --pe-s8: 48px;

  /* --- Ombre ------------------------------------------------------------ */
  /* Virate sul caldo: su un fondo color pasta un'ombra grigia legge come
     sporco. Il bruno sotto la carta la fa sembrare appoggiata li'.
     Si prende la TINTA dell'app, non la geometria: la sua ombra card e'
     0 3px 14px, giusta per quattro schede su un telefono, ma qui la stessa
     variabile sta anche su .pe-ord, e il kanban impila quelle schede a 8px
     l'una dall'altra. Venti aloni da 14px sovrapposti fanno fango. */
  --pe-omb-solido:  0 3px 0 var(--pe-verde-scuro);
  --pe-omb-scuro:   0 2px 0 rgba(0,0,0,.18);
  --pe-omb-hair:    0 0 0 1px var(--pe-bordo-forte);
  --pe-omb-card:    0 2px 8px rgba(120,72,20,.10);
  --pe-omb-alta:    0 6px 22px rgba(120,72,20,.14);
  --pe-omb-modale:  0 14px 40px rgba(120,72,20,.22);
  --pe-omb-drawer: -12px 0 40px rgba(90,54,15,.20);
  --pe-omb-toast:   0 10px 30px rgba(90,54,15,.28);

  /* --- Misure fisse ----------------------------------------------------- */
  --pe-topbar-h: 56px;
  --pe-sidebar-w: 240px;
  --pe-bottomnav-h: 62px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--pe-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--pe-ink);
  background: var(--pe-pagina);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* Su tablet il pannello e' un'app: non deve rimbalzare come una pagina. */
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--pe-verde-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Le cifre vanno in monospaziato tabellare: importi e orari in colonna
   devono allinearsi, altrimenti una lista di ordini balla. */
.pe-mono, .pe-num {
  font-family: var(--pe-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Un anello di focus visibile e coerente: sul tablet si naviga anche da
   tastiera esterna, e senza questo si perde il segno. */
:focus-visible {
  outline: 2px solid var(--pe-verde);
  outline-offset: 2px;
  border-radius: var(--pe-r-xs);
}

::selection { background: var(--pe-ok-bg); }

/* Barre di scorrimento discrete, in stile app. */
* { scrollbar-width: thin; scrollbar-color: var(--pe-bordo-off) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--pe-bordo-off); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Utility minime
   ========================================================================== */

.pe-hidden { display: none !important; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pe-center { text-align: center; }
.pe-right  { text-align: right; }
.pe-grow   { flex: 1 1 auto; min-width: 0; }
.pe-row    { display: flex; align-items: center; gap: var(--pe-s2); }
.pe-row--wrap { flex-wrap: wrap; }
.pe-col    { display: flex; flex-direction: column; gap: var(--pe-s2); }
.pe-nowrap { white-space: nowrap; }
.pe-trunc  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pe-t-1 { color: var(--pe-testo-1); }
.pe-t-2 { color: var(--pe-testo-2); }
.pe-t-3 { color: var(--pe-testo-3); }
.pe-t-ok { color: var(--pe-ok-fg); }
.pe-t-err { color: var(--pe-err-fg); }
.pe-t-warn { color: var(--pe-warn-fg); }

.pe-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pe-testo-2);
}

.pe-h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.pe-h2 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }
.pe-h3 { font-size: 15px; line-height: 1.3;  font-weight: 700; }
.pe-lead { font-size: 15px; line-height: 1.55; color: var(--pe-testo-1); }
.pe-small { font-size: 12.5px; line-height: 1.45; color: var(--pe-testo-2); }

/* ==========================================================================
   Guscio dell'applicazione
   Lo scorrimento e' interno al contenitore, non sul body: cosi' topbar e
   navigazione restano ferme come in un'app nativa.
   ========================================================================== */

.pe-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--pe-pagina);
}

.pe-app__corpo {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.pe-app__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--pe-s5) var(--pe-s6) var(--pe-s8);
  /* Rispetta la barra gesti su iPhone e i tablet con notch. */
  padding-bottom: calc(var(--pe-s8) + env(safe-area-inset-bottom));
}

.pe-app__main--scuro {
  background: var(--pe-scuro-kds);
  color: #fff;
}

/* --- Barra superiore ------------------------------------------------------ */

/* La barra e' piatta e dello stesso nero della colonna: insieme formano una
   L scura continua attorno alla crema del contenuto, che e' l'impianto del
   mockup.
   La barra resta a tutta larghezza e la colonna comincia sotto: e' la
   struttura che c'era, e cambiarla avrebbe voluto dire rifare il guscio in
   app_apri.php PIU' quello che impostazioni.php si costruisce da solo quando
   la licenza e' scaduta (topbar senza sidebar). Con lo stesso nero sui due
   pezzi la giunzione non si vede comunque: quello che si legge e' la L. */
.pe-topbar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  padding: 0 var(--pe-s5) 0 0;
  background: var(--pe-nav-1);
  border-bottom: 1px solid var(--pe-nav-bordo);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--pe-topbar-h) + env(safe-area-inset-top));
}

/* La zona del marchio e' larga quanto la sidebar e finisce col suo stesso
   bordo: e' il trucco che salda i due pezzi in una L sola senza toccare la
   struttura del guscio. Sotto i 760px la sidebar non c'e' e la zona torna
   larga quanto il logo. */
.pe-topbar__marchio {
  position: relative;
  overflow: hidden;
  flex: 0 0 var(--pe-sidebar-w);
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--pe-s4);
  border-right: 1px solid var(--pe-nav-bordo);
}
/* L'alone caldo dietro al marchio: e' quel che resta della sfumatura bruna
   che la barra aveva prima. Serviva a far atterrare l'arancione del logo su
   qualcosa che gli appartiene invece che su una lastra grigia, e quel motivo
   vale ancora — solo che adesso gli basta l'angolo. */
.pe-topbar__marchio::before {
  content: '';
  position: absolute;
  top: -70px; left: -40px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,157,0,.20), transparent 70%);
  pointer-events: none;
}
.pe-topbar__logo { position: relative; height: 27px; width: auto; }

/* La zona marchio e' larga quanto la sidebar per allinearsi ad essa. Quando la
   sidebar non c'e' — impostazioni.php con la licenza scaduta monta la topbar
   da sola — quella larghezza diventa un vuoto di 240px e il bordo destro un
   trattino sospeso a meta' schermo. */
.pe-app:not(:has(.pe-sidebar)) .pe-topbar__marchio {
  flex: 0 0 auto;
  border-right: 0;
}

/* Selettore della pizzeria. Oggi apre le impostazioni: e' un bersaglio solo,
   ma e' gia' il posto giusto per il cambio sede quando ci sara' piu' di una. */
.pe-topbar__tenant {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  margin-left: -9px;
  border-radius: var(--pe-r-sm);
  color: #fff;
  transition: background .16s ease;
}
.pe-topbar__tenant:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.pe-topbar__tenant svg {
  width: 13px; height: 13px;
  stroke: var(--pe-nav-testo); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

.pe-topbar__nome {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Citta' e codice sono contorno, non titolo: peso normale, grigio caldo.
   Devono dire «sei sulla sede giusta» e poi sparire — ma sparire vuol dire
   smettere di chiedere attenzione, non diventare illeggibili. Erano tarati
   sulla scala di grigi della sidebar, dove pero' il testo e' 13px e sta su
   fondo pieno: in barra, a 11,5px e in mezzo a un bianco in grassetto, lo
   stesso grigio si legge come un'ombra. */
.pe-topbar__meta {
  font-size: 13px;
  color: var(--pe-nav-testo-forte);
  white-space: nowrap;
}
.pe-topbar__codice {
  font-family: var(--pe-mono);
  font-size: 12px;
  color: var(--pe-nav-testo-forte);
  white-space: nowrap;
}

/* La release la legge chi chiama l'assistenza, al telefono, dettandola: e' il
   solo momento in cui serve e va letta al primo colpo. Il maiuscoletto
   spaziato del mono a 10px era gia' al limite; con --pe-nav-testo-2 sotto
   spariva del tutto. */
.pe-topbar__rel {
  font-family: var(--pe-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pe-nav-testo);
  white-space: nowrap;
}

.pe-topbar__sep { width: 1px; height: 20px; background: var(--pe-nav-bordo); }

/* --- Interruttore aperto / chiuso ---------------------------------------- */

/* Pillole chiare su barra scura, come nel mockup: sono le due informazioni di
   stato che devono saltare fuori dal nero senza gridare. Le coppie semantiche
   del foglio (--pe-ok-bg / --pe-ok-fg) sono tarate proprio per questo — fondo
   quasi bianco, testo scuro — e qui tornano utili sul nero invece che sulla
   crema, con lo stesso contrasto. */
.pe-aperto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border: 0;
  border-radius: var(--pe-r-pill);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.09);
  color: #fff;
  cursor: pointer;
  /* La barra e' alta 52px fissi: se questa scritta va a capo, si rompe. */
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.pe-aperto:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.pe-aperto__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pe-nav-testo-2); flex: 0 0 auto; }
.pe-aperto--si { background: var(--pe-ok-bg); color: var(--pe-ok-fg); }
.pe-aperto--si:hover { background: #ddf2e1; }
.pe-aperto--si .pe-aperto__dot { background: var(--pe-verde); animation: pe-ring 2s ease-in-out infinite; }

@keyframes pe-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,106,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,106,0); }
}

/* --- Badge licenza -------------------------------------------------------- */

.pe-lic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--pe-r-pill);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.09);
  color: #fff;
  white-space: nowrap;
  transition: filter .16s ease, background .16s ease;
}
.pe-lic:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.pe-lic--ok     { background: var(--pe-ok-bg);   color: var(--pe-ok-fg); }
.pe-lic--avviso { background: var(--pe-warn-bg); color: var(--pe-warn-fg); }
.pe-lic--errore { background: var(--pe-err-bg);  color: var(--pe-err-fg); }
.pe-lic--ok:hover, .pe-lic--avviso:hover, .pe-lic--errore:hover { filter: brightness(.96); }
.pe-lic__cta { font-weight: 600; opacity: .75; text-decoration: underline; }
/* Il pallino di stato della licenza: stesso vocabolario della pillola aperto/
   chiuso, cosi' le due in barra si leggono come una coppia. */
.pe-lic__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* --- Barra laterale ------------------------------------------------------- */

/* La colonna e' scura come la barra e come l'app cliente: il pannello e' un
   unico prodotto, e la crema resta tutta al contenuto. Lo scorrimento e' solo
   sul blocco dei gruppi, non su tutta la colonna, altrimenti con dodici voci
   su un portatile basso il piede con l'operatore scorreva via — ed e' il posto
   da cui si esce e si blocca il turno. */
.pe-sidebar {
  flex: 0 0 var(--pe-sidebar-w);
  width: var(--pe-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pe-nav-1);
  border-right: 1px solid var(--pe-nav-bordo);
}

.pe-sidebar__voci {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--pe-s2);
  /* La barra di scorrimento chiara su fondo scuro e' una striscia bianca
     lungo il bordo: si assottiglia e si scurisce. */
  scrollbar-width: thin;
  scrollbar-color: #3a3430 transparent;
}
.pe-sidebar__voci::-webkit-scrollbar { width: 6px; }
.pe-sidebar__voci::-webkit-scrollbar-thumb { background: #3a3430; border-radius: 3px; }

.pe-sidebar__gruppo { padding: var(--pe-s3) var(--pe-s3) var(--pe-s1); }
.pe-sidebar__titolo {
  padding: 0 var(--pe-s2) var(--pe-s2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pe-nav-testo-2);
}

.pe-navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 1px;
  border-radius: var(--pe-r-md);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pe-nav-testo);
  transition: background .16s ease, color .16s ease;
}
.pe-navitem:hover { background: var(--pe-nav-hover); color: #fff; text-decoration: none; }

/* L'icona e' un tratto, non un blocco pieno: eredita currentColor e cambia
   con lo stato della voce senza una seconda regola per ogni colore. */
.pe-navitem__ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.pe-navitem:hover .pe-navitem__ic { opacity: 1; }

/* La voce attiva: fondo arancione appena acceso, icona arancione piena, testo
   bianco. L'arancione non porta testo — regola del foglio, su bianco fa 2,1:1
   — qui infatti colora solo il tratto dell'icona e un velo di fondo. */
.pe-navitem--attivo,
.pe-navitem--attivo:hover {
  background: rgba(255,157,0,.13);
  color: #fff;
}
.pe-navitem--attivo .pe-navitem__ic { color: var(--pe-arancio); opacity: 1; }

/* La barretta arancione a sinistra e' la stessa della testa di sezione: dice
   «sei qui» anche a chi distingue male il velo di fondo. */
.pe-navitem--attivo::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 var(--pe-r-pill) var(--pe-r-pill) 0;
  background: var(--pe-arancio);
}

/* Il tasto rapido resta: e' una funzione viva (pe.js ascolta i tasti 1-9 su
   .pe-navitem[data-tasto]). Cambia solo posto — a destra, in sordina — e si
   accende quando il puntatore entra nella colonna, cosi' si scopre senza
   occupare la riga a tempo pieno. */
.pe-navitem__tasto {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: var(--pe-r-xs);
  font-family: var(--pe-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--pe-nav-testo-2);
  background: rgba(255,255,255,.05);
  opacity: 0;
  transition: opacity .16s ease;
}
.pe-navitem__tasto:empty { display: none; }
.pe-sidebar:hover .pe-navitem__tasto,
.pe-navitem:focus-visible .pe-navitem__tasto { opacity: 1; }
.pe-navitem--attivo .pe-navitem__tasto { color: rgba(255,255,255,.55); }

.pe-navitem__badge {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--pe-r-pill);
  font-family: var(--pe-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--pe-blu);
}
/* Nessuna delle due varianti e' applicata oggi: js/realtime.js scrive solo il
   testo dentro [data-badge]. Restano perche' il giorno che servissero devono
   essere gia' giuste — e quella arancione, col bianco che aveva prima, sarebbe
   arrivata a 2,08:1. */
.pe-navitem__badge--rosso  { background: var(--pe-rosso); }
.pe-navitem__badge--arancio{ background: var(--pe-arancio); color: var(--pe-arancio-su); }

/* Il piede non scorre con le voci: e' fuori da .pe-sidebar__voci e resta
   incollato in basso. Fondo di un gradino piu' scuro, cosi' si stacca senza
   bisogno di un bordo marcato. */
.pe-sidebar__piede {
  flex: 0 0 auto;
  padding: var(--pe-s3);
  border-top: 1px solid var(--pe-nav-bordo);
  background: var(--pe-nav-0);
}
.pe-sidebar__op { display: flex; align-items: center; gap: 10px; width: 100%; }
.pe-sidebar__nome { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.pe-sidebar__ruolo { display: block; font-size: 11.5px; color: var(--pe-nav-testo-2); }

/* I due comandi del turno (blocca, esci) stanno dentro un menu che si apre
   verso l'alto: erano due bottoni sempre a vista, cioe' due terzi del piede
   spesi per azioni che si usano due volte a sera. */
.pe-sidebar__acc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pe-r-sm);
  color: var(--pe-nav-testo);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.pe-sidebar__acc:hover { background: rgba(255,255,255,.08); color: #fff; }
.pe-sidebar__acc svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.pe-sidebar__menu {
  display: none;
  margin-bottom: var(--pe-s2);
  padding: 5px;
  border-radius: var(--pe-r-md);
  background: var(--pe-nav-2);
  border: 1px solid var(--pe-nav-bordo);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.pe-sidebar__menu--aperto { display: block; }
.pe-sidebar__menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--pe-r-sm);
  background: transparent;
  color: var(--pe-nav-testo);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.pe-sidebar__menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.pe-sidebar__menu svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* --- Navigazione mobile --------------------------------------------------- */

/* Scura come la colonna che sostituisce: sul telefono questa E' la
   navigazione, e lasciarla bianca sotto una barra nera spezzava in due il
   prodotto proprio dove si vede di piu'. */
.pe-bottomnav {
  display: none;
  flex: 0 0 auto;
  background: var(--pe-nav-1);
  border-top: 1px solid var(--pe-nav-bordo);
  padding-bottom: env(safe-area-inset-bottom);
}

.pe-bottomnav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--pe-bottomnav-h);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pe-nav-testo);
  position: relative;
  transition: color .16s ease;
}
.pe-bottomnav__item span:not(.pe-bottomnav__pt) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-bottomnav__item--attivo { color: #fff; }

.pe-bottomnav__ic {
  width: 21px; height: 21px;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.pe-bottomnav__item--attivo .pe-bottomnav__ic { color: var(--pe-arancio); opacity: 1; }

/* La barretta arancione sopra la voce attiva: sul telefono il colore
   dell'icona da solo si perde con lo schermo al sole. */
.pe-bottomnav__item--attivo::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 2.5px;
  border-radius: 0 0 var(--pe-r-pill) var(--pe-r-pill);
  background: var(--pe-arancio);
}

/* Il pallino di prima resta per chi lo usa ancora, ma nel guscio nuovo
   l'icona ha preso il suo posto. */
.pe-bottomnav__pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.pe-bottomnav__item--attivo .pe-bottomnav__pt { opacity: 1; background: var(--pe-arancio); }

/* ==========================================================================
   Avatar
   ========================================================================== */

.pe-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pe-verde);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.pe-avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.pe-avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.pe-avatar--xl { width: 76px; height: 76px; font-size: 26px; }

/* ==========================================================================
   Bottoni
   Il primario ha l'ombra "solida" del mockup: sembra un tasto fisico, e su
   un tablet unto in pizzeria si trova a colpo d'occhio.
   ========================================================================== */

.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pe-s2);
  padding: 11px 18px;
  border-radius: var(--pe-r-lg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pe-ink);
  background: var(--pe-bianco);
  border: 1.5px solid var(--pe-bordo-forte);
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
  user-select: none;
}
.pe-btn:hover { text-decoration: none; background: var(--pe-riga); }
.pe-btn:active { transform: translateY(1px); }
.pe-btn[disabled], .pe-btn--off {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.pe-btn--primario {
  background: var(--pe-verde);
  border-color: var(--pe-verde);
  color: #fff;
  box-shadow: var(--pe-omb-solido);
}
.pe-btn--primario:hover { background: #1cb336; }
.pe-btn--primario:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pe-verde-scuro); }

.pe-btn--scuro {
  background: var(--pe-ink);
  border-color: var(--pe-ink);
  color: #fff;
  box-shadow: var(--pe-omb-scuro);
}
.pe-btn--scuro:hover { background: #2a2522; }

/* CTA del marchio: arancione pieno, testo quasi nero.
   Il foglio dice che l'arancione non regge testo, e per il BIANCO e' vero —
   su #ff9d00 fa 2,1:1. Con --pe-arancio-su sopra fa 8,25:1, cioe' piu' del
   verde primario col suo bianco. La regola vera non e' «niente testo
   sull'arancione», e' «niente testo CHIARO sull'arancione», e questa variante
   la rispetta.
   Vive in barra e basta: l'azione piu' battuta della serata deve essere il
   punto piu' caldo dello schermo. Il verde resta il primario dei form, dove
   «premi qui» vuol dire «salva» e non «apri una comanda». */
.pe-btn--marchio {
  background: var(--pe-arancio);
  border-color: var(--pe-arancio);
  color: var(--pe-arancio-su);
  box-shadow: 0 2px 0 #c87c00;
}
.pe-btn--marchio:hover { background: #ffab26; }
.pe-btn--marchio:active { transform: translateY(1px); box-shadow: 0 1px 0 #c87c00; }

/* Secondario su fondo scuro: il .pe-btn bianco, in barra, sarebbe una lastra
   luminosa accanto a una CTA — e vincerebbe lei lo sguardo. */
.pe-btn--suscuro {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: #fff;
  box-shadow: none;
}
.pe-btn--suscuro:hover { background: rgba(255,255,255,.12); }

/* I bottoni in barra sono piu' bassi del corpo pagina: 52px di barra meno
   due margini non lasciano spazio ai 44px del bottone pieno. */
.pe-topbar .pe-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: var(--pe-r-md);
  /* La barra e' alta 56px fissi: un'etichetta che va a capo la sfonda. In una
     riga flex questi bottoni si lasciano comprimere fino a spezzare il testo,
     e "Nuova comanda" diventava due righe gia' a 800px. */
  white-space: nowrap;
}
.pe-topbar .pe-btn svg {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

.pe-btn--pericolo { color: var(--pe-err-fg); border-color: var(--pe-err-bd); background: var(--pe-err-bg); }
.pe-btn--pericolo:hover { background: #fbdedb; }

.pe-btn--fantasma { background: transparent; border-color: transparent; }
.pe-btn--fantasma:hover { background: var(--pe-chip); }

.pe-btn--blocco { width: 100%; }
.pe-btn--grande { padding: 15px 22px; font-size: 15.5px; border-radius: var(--pe-r-xl); }
.pe-btn--piccolo { padding: 7px 12px; font-size: 12.5px; border-radius: var(--pe-r-md); }

/* Filo di caricamento sul bottone premuto. */
.pe-btn--carica { position: relative; color: transparent !important; pointer-events: none; }
.pe-btn--carica::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pe-gira .6s linear infinite;
  color: #fff;
}
.pe-btn:not(.pe-btn--primario):not(.pe-btn--scuro).pe-btn--carica::after { color: var(--pe-ink); }

@keyframes pe-gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   Campi
   ========================================================================== */

.pe-campo { display: block; margin-bottom: var(--pe-s4); }

.pe-campo__label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pe-testo-2);
}

.pe-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--pe-r-md);
  border: 1.5px solid var(--pe-bordo-forte);
  background: var(--pe-bianco);
  font-size: 15px;
  color: var(--pe-ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pe-input::placeholder { color: var(--pe-testo-3); }
.pe-input:focus {
  outline: none;
  border-color: var(--pe-verde);
  box-shadow: 0 0 0 3px rgba(31,170,50,.14);
}
.pe-input--errore { border-color: var(--pe-err-bd); background: var(--pe-err-bg); }
.pe-input--errore:focus { border-color: var(--pe-rosso); box-shadow: 0 0 0 3px rgba(217,45,32,.12); }

/* Le quattro cifre di un PIN. La casella e' corta apposta: larga quanto il
   modulo prometterebbe un contenuto lungo quanto un indirizzo email, e chi
   compila si ferma a chiedersi quanto deve scrivere.
   `text-indent` recupera lo spazio che `letter-spacing` aggiunge in coda,
   altrimenti le cifre risultano spostate a sinistra. */
.pe-input--pin {
  max-width: 150px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .45em;
  text-indent: .45em;
}

/* Una casella riempita dall'AI e NON ancora salvata.
   Il colore dell'avviso, non quello della conferma: finche' resta cosi', quel
   testo non e' a database e nessun cliente lo legge. Sparisce al salvataggio,
   che e' il momento in cui una proposta diventa una traduzione della pizzeria. */
.pe-input--proposta { border-color: var(--pe-warn-bd); background: var(--pe-warn-bg); }

textarea.pe-input { min-height: 84px; resize: vertical; }

.pe-campo__errore {
  display: none;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pe-err-fg);
}
.pe-campo--ko .pe-campo__errore { display: block; }
.pe-campo--ko .pe-input { border-color: var(--pe-err-bd); background: var(--pe-err-bg); }

/* L'asterisco dei campi obbligatori.
   Segue l'attributo `required` invece di essere scritto dentro l'etichetta:
   cosi' un campo non puo' avere l'asterisco senza essere davvero obbligatorio,
   ne' essere obbligatorio senza dirlo — sono la stessa informazione, scritta
   una volta sola. Vale anche per i moduli costruiti dal JS al volo, che sono
   quasi tutti.
   `:has()` e' gia' usato altrove in questo foglio. */
.pe-campo:has(input[required], select[required], textarea[required]) > .pe-campo__label::after {
  content: ' *';
  color: var(--pe-err-fg);
  font-weight: 900;
}

/* Su fondo scuro i colori semantici del pannello chiaro danno 2,2:1: un
   asterisco che non si vede. Vedi la nota sui colori dentro .pe-scena. */
.pe-scena .pe-campo:has(input[required], select[required], textarea[required]) > .pe-campo__label::after {
  color: var(--pe-err-fg-scuro);
}

.pe-campo__aiuto { margin-top: 5px; font-size: 12px; color: var(--pe-testo-2); }

/* Campo con bottone interno (mostra/nascondi password). */
.pe-campo__wrap { position: relative; }
.pe-campo__azione {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  padding: 6px 9px;
  border-radius: var(--pe-r-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--pe-testo-2);
}
.pe-campo__azione:hover { background: var(--pe-chip); }

/* --- Interruttore --------------------------------------------------------- */

.pe-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex: 0 0 auto;
}
.pe-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pe-switch__slider {
  position: absolute; inset: 0;
  background: var(--pe-bordo-off);
  border-radius: var(--pe-r-pill);
  transition: background .15s ease;
}
.pe-switch__slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.pe-switch input:checked + .pe-switch__slider { background: var(--pe-verde); }
.pe-switch input:checked + .pe-switch__slider::before { transform: translateX(22px); }
.pe-switch input:focus-visible + .pe-switch__slider { outline: 2px solid var(--pe-verde); outline-offset: 2px; }

/* ==========================================================================
   Card e sezioni
   ========================================================================== */

/* Il contenuto e' sollevato, i controlli sono piatti e contornati: e' la
   regola dell'app cliente, e questa e' la riga che la porta qui. La card
   aveva bordo E ombra, cioe' diceva due volte la stessa cosa in due
   linguaggi diversi. Resta l'ombra. Il bordo NON si toglie a .pe-ord: li'
   il border-left di 4px porta il colore di stato, ed e' portante. */
.pe-card {
  background: var(--pe-bianco);
  border-radius: var(--pe-r-xl);
  padding: var(--pe-s4) var(--pe-s5);
  box-shadow: var(--pe-omb-card);
}
.pe-card--stretta { padding: var(--pe-s3) var(--pe-s4); }
.pe-card--vuota { padding: 0; overflow: hidden; }

.pe-card__testa {
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  margin-bottom: var(--pe-s3);
}
.pe-card__titolo { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }

.pe-sezione { margin-bottom: var(--pe-s6); }
.pe-sezione__testa {
  display: flex;
  align-items: flex-end;
  gap: var(--pe-s3);
  margin-bottom: var(--pe-s4);
}

/* La barretta arancione dell'app cliente. Altezza in em, cosi' segue il corpo
   del carattere invece di restare indietro. Volutamente ristretta alla testa
   di sezione: sui titoli dentro le card (impostazioni ne ha venti) sarebbe
   rumore, e sulle schermate scure di accesso non c'entra nulla. */
.pe-sezione__testa .pe-h1::before,
.pe-sezione__testa .pe-h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: .72em;
  margin-right: 10px;
  border-radius: var(--pe-r-pill);
  background: var(--pe-arancio);
}

.pe-griglia { display: grid; gap: var(--pe-s4); }
.pe-griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe-griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pe-griglia--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Le due fasce della dashboard. Le proporzioni non sono estetiche: il grafico
   ha bisogno di larghezza per non schiacciare sei fasce orarie, la lista delle
   prenotazioni no; e fra le tre card in fondo quella degli ordini porta cinque
   colonne di dati, la classifica due. */
.pe-griglia--55 { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.pe-griglia--dash3 { grid-template-columns: minmax(0, 32fr) minmax(0, 42fr) minmax(0, 26fr); }
/* Quando una delle due card in fondo manca per permessi, le rimaste si
   dividono lo spazio invece di lasciare un buco a destra. */
.pe-griglia--dash3:has(> :last-child:nth-child(2)) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.pe-griglia--dash3:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Badge, chip, pillole
   ========================================================================== */

.pe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--pe-r-xs);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--pe-chip);
  color: var(--pe-ink);
  /* Un badge che va a capo diventa alto il doppio e sfonda la riga che lo
     ospita: "In preparazione" lo faceva in ogni lista stretta. */
  white-space: nowrap;
}
.pe-badge--info { background: var(--pe-info-bg); color: var(--pe-info-fg); }
.pe-badge--ok   { background: var(--pe-ok-bg);   color: var(--pe-ok-fg); }
.pe-badge--warn { background: var(--pe-warn-bg); color: var(--pe-warn-fg); }
.pe-badge--err  { background: var(--pe-err-bg);  color: var(--pe-err-fg); }
.pe-badge--ban  { background: var(--pe-ban-bg);  color: var(--pe-ban-fg); }

.pe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--pe-r-md);
  border: 1.5px solid var(--pe-bordo-forte);
  background: var(--pe-bianco);
  font-size: 13px;
  font-weight: 600;
  color: var(--pe-testo-0);
  transition: all .12s ease;
}
.pe-chip:hover { background: var(--pe-riga); text-decoration: none; }
.pe-chip--attivo { background: var(--pe-ink); border-color: var(--pe-ink); color: #fff; }
.pe-chip--attivo:hover { background: var(--pe-ink); }

/* L'arancione dei chip attivi dell'app arriva SOLO sulle linguette, e la
   distinzione non e' estetica: .pe-chip--attivo qui porta due significati
   diversi. Su una linguetta vuol dire «dove sono» — la scheda impostazioni,
   il periodo delle statistiche, la categoria in comanda: una sola alla volta,
   ed e' esattamente il lavoro che l'arancione fa nell'app. Altrove vuol dire
   «questo l'ho scelto»: aggiunte, rimozioni, allergeni, multi-selezione. Sei
   aggiunte accese tutte arancioni fanno del compositore ordini un albero di
   Natale, e l'arancione smette di voler dire qualcosa. Quelle restano scure.

   Il selettore e' role="tab" e NON role="tablist" x: dentro #com-categorie,
   che e' un tablist, vive anche il chip «mezza e mezza», che e' un modo di
   comporre e non una categoria — resta acceso INSIEME a una categoria, e due
   arancioni nella stessa striscia rimetterebbero l'ambiguita' che questa
   regola serve a togliere. Il ruolo lo porta gia' il markup, quindi lo stato
   lo decide il markup e non una classe accesa in JS.
   #2b1608 su #ff9d00 fa 8,25:1. */
[role="tab"].pe-chip--attivo,
[role="tab"].pe-chip--attivo:hover {
  background: var(--pe-arancio);
  border-color: var(--pe-arancio);
  color: var(--pe-arancio-su);
}

.pe-chips { display: flex; flex-wrap: wrap; gap: var(--pe-s2); }

.pe-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pe-r-pill);
  font-family: var(--pe-mono);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--pe-chip);
  color: var(--pe-testo-0);
}

/* ==========================================================================
   Avvisi
   ========================================================================== */

.pe-avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--pe-s3);
  padding: var(--pe-s3) var(--pe-s4);
  border-radius: var(--pe-r-lg);
  border: 1px solid var(--pe-bordo);
  background: var(--pe-bianco);
  font-size: 13.5px;
  line-height: 1.5;
}
.pe-avviso--info { background: var(--pe-info-bg); border-color: #c9dcf8; color: var(--pe-info-fg); }
.pe-avviso--ok   { background: var(--pe-ok-bg);   border-color: var(--pe-ok-bd);   color: var(--pe-ok-fg); }
.pe-avviso--warn { background: var(--pe-warn-bg); border-color: var(--pe-warn-bd); color: var(--pe-warn-fg); }
.pe-avviso--err  { background: var(--pe-err-bg);  border-color: var(--pe-err-bd);  color: var(--pe-err-fg); }
.pe-avviso__titolo { font-weight: 800; margin-bottom: 2px; }
/* La riga di spiegazione sotto il titolo. Rimpicciolisce e basta: il COLORE
   lo eredita dal riquadro, e non e' un dettaglio. Con `.pe-small` diventerebbe
   il grigio del testo secondario, che sul fondo verde chiaro sta a 4,2:1 —
   sotto la soglia leggibile, proprio sulla riga che spiega a cosa serve il
   codice. I colori semantici del riquadro sono gia' tarati sul loro sfondo. */
.pe-avviso__nota { font-size: 12.5px; line-height: 1.45; }

/* --- Foto proposte dall'AI ------------------------------------------------
   Griglia che si adatta da sola: `auto-fill` con un minimo di 180px riempie
   la riga con quante ne stanno, senza breakpoint scritti a mano. Su un
   telefono fa due colonne, sul tablet al banco quattro o cinque.

   Il riquadro ha un'altezza fissa (3:2) perche' qui si decide si/no a colpo
   d'occhio e riquadri di altezza diversa non si confrontano. Ma dentro sta
   `contain`, non `cover`: le foto generate NASCONO 3:2 (vedi
   `ai.foto_dimensione`) e quindi lo riempiono esatte, e chi ha ancora in
   sala d'attesa le vecchie quadrate le vede intere con due bande invece che
   tagliate. La stessa scelta della scheda prodotto. */
.pe-fotogriglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--pe-s4);
}
.pe-fotoprop {
  margin: 0;
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-lg);
  overflow: hidden;
  background: var(--pe-bianco);
}
.pe-fotoprop img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--pe-chip);
}
.pe-fotoprop__nome {
  padding: 8px 10px 0 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.pe-fotoprop__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 10px 10px;
}
/* Il «Scarta» accanto al «Conferma» verde spariva: il bottone neutro su fondo
   bianco e' quasi invisibile, e su una griglia dove le due scelte hanno lo
   stesso peso quella che non si vede non e' una scelta. Bordo pieno e testo
   scuro: resta secondario nel colore, non nella leggibilita'. */
/* `flex: 1 1 0` da solo sfondava la scheda a destra: la base e' zero, ma
   `min-width: auto` impedisce comunque a un bottone di rimpicciolirsi sotto la
   sua etichetta, e "Conferma" + "Scarta" con i loro padding chiedono piu' dei
   ~160px di colonna. In tedesco ("Bestatigen"/"Verwerfen") sarebbe peggio.
   Base `auto` + `flex-wrap`: se stanno in riga si dividono lo spazio, se non ci
   stanno vanno a capo uno sotto l'altro. Una colonna piu' stretta o una lingua
   piu' lunga cambiano l'impaginazione, non fanno uscire niente dal bordo. */
.pe-fotoprop__azioni .pe-btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding-inline: 10px;
}
.pe-fotoprop__azioni .pe-btn:not(.pe-btn--primario) {
  /* `--pe-bordo-forte` (#e0dad1) e' pensato per separare, non per delimitare
     un bersaglio da premere: accanto al verde pieno sparisce. Qui serve il
     grigio della palette, che e' il primo tono che si vede davvero. */
  border-color: var(--pe-grigio);
  color: var(--pe-testo-0);
}
.pe-fotoprop__azioni .pe-btn:not(.pe-btn--primario):hover {
  background: var(--pe-chip);
  border-color: var(--pe-testo-3);
}

/* ==========================================================================
   Stato vuoto e caricamento
   ========================================================================== */

.pe-vuoto {
  padding: var(--pe-s8) var(--pe-s5);
  text-align: center;
  color: var(--pe-testo-2);
}
.pe-vuoto__titolo { font-size: 15px; font-weight: 700; color: var(--pe-testo-1); margin-bottom: 4px; }

.pe-spinner {
  width: 22px; height: 22px;
  margin: var(--pe-s6) auto;
  border: 2.5px solid var(--pe-bordo-off);
  border-top-color: var(--pe-verde);
  border-radius: 50%;
  animation: pe-gira .7s linear infinite;
}

.pe-skeleton {
  background: linear-gradient(90deg, var(--pe-chip) 25%, var(--pe-sep) 37%, var(--pe-chip) 63%);
  background-size: 400% 100%;
  animation: pe-brilla 1.3s ease infinite;
  border-radius: var(--pe-r-sm);
}
@keyframes pe-brilla { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   Toast
   ========================================================================== */

.pe-toast-area {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  /* SOPRA A TUTTO, drawer (95) e modale (100) compresi.
     Stava a 90, cioe' sotto a entrambi: un errore sollevato da dentro una
     scheda aperta — e la meta' degli errori del pannello nasce li' — compariva
     dietro al pannello e non lo vedeva nessuno. Chi premeva il bottone vedeva
     solo che non succedeva niente. Un avviso che si puo' coprire non e' un
     avviso: e' l'ultima cosa che deve restare visibile. */
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pe-s2);
  pointer-events: none;
}

.pe-toast {
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: var(--pe-r-lg);
  background: var(--pe-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--pe-omb-toast);
  animation: pe-su .2s ease-out;
}
.pe-toast--ok  { background: var(--pe-verde-scuro); }
.pe-toast--err { background: #a01b13; }

@keyframes pe-su {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Modale
   ========================================================================== */

.pe-modale {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pe-s4);
  background: rgba(28,25,23,.55);
  animation: pe-dissolvi .18s ease-out;
}
.pe-modale__box {
  width: 100%;
  max-width: 760px;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--pe-bianco);
  border-radius: var(--pe-r-2xl);
  padding: var(--pe-s6);
  box-shadow: var(--pe-omb-modale);
  animation: pe-su .2s ease-out;
}
.pe-modale__box--stretto { max-width: 460px; }
/* Via di mezzo fra 460 e 760: un riquadro che deve contenere due blocchi in
   risalto e restare leggibile al centro dello schermo. A 460 i codici finivano
   stretti fra i bordi, a 760 il testo corto galleggiava. */
.pe-modale__box--medio   { max-width: 580px; }

/* Un codice che si legge una volta e si ricopia: cifre grandi, spaziate e
   selezionabili. Il monospazio non basta — sono le lettere staccate a far
   distinguere 0 da O quando qualcuno lo detta al telefono. */
.pe-codicione {
  font-family: var(--pe-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  margin: 6px 0;
  user-select: all;
}

/* L'icona dentro un avatar tondo: tratto piu' grosso del solito perche' qui
   e' sola e grande, e a 1.7 su 76px sembrerebbe sbiadita. */
.pe-avatar__ic {
  width: 38px;
  height: 38px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes pe-dissolvi { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Tastierino numerico (OTP e PIN)
   ========================================================================== */

/* Stessa larghezza del tastierino sotto: le due file si incolonnano invece di
   sembrare due blocchi scollegati. Le caselle si dividono lo spazio, cosi' la
   riga da 4 cifre del PIN e quella da 6 dell'OTP restano entrambe in asse. */
.pe-otp {
  display: flex;
  gap: var(--pe-s2);
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin: var(--pe-s5) auto;
}
.pe-otp__box {
  flex: 1 1 0;
  max-width: 56px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pe-r-md);
  border: 2px solid var(--pe-scuro-bordo);
  background: var(--pe-scuro-tasto);
  font-family: var(--pe-mono);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.pe-otp__box--pieno { border-color: var(--pe-verde); }
.pe-otp__box--errore { border-color: var(--pe-rosso); animation: pe-scuoti .3s ease; }

@keyframes pe-scuoti {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* width:100% non e' ridondante con max-width, e' obbligatorio.
   Il tastierino sta dentro un contenitore flex in colonna, e in flexbox i
   margini automatici sull'asse trasversale ANNULLANO align-items:stretch:
   senza una larghezza esplicita la griglia collassa sul contenuto e i tasti
   diventano striscioline da 25 px. */
.pe-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pe-s3);
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.pe-keypad__tasto {
  height: 62px;
  border-radius: var(--pe-r-md);
  background: var(--pe-scuro-tasto);
  border: 1px solid var(--pe-scuro-bordo);
  color: #fff;
  font-family: var(--pe-mono);
  font-size: 21px;
  font-weight: 700;
  transition: background .1s ease, transform .06s ease;
}
.pe-keypad__tasto:hover { background: var(--pe-scuro-3); }
.pe-keypad__tasto:active { transform: scale(.96); background: var(--pe-scuro-bordo); }
.pe-keypad__tasto--vuoto { background: transparent; border-color: transparent; pointer-events: none; }

/* ==========================================================================
   Schermate scure (accesso, onboarding, cucina)
   ========================================================================== */

/* Qui la scatola e' alta tutto lo schermo, quindi la sfumatura dell'app va
   bene com'e': 160deg, bruno che sfuma nel nero al 62%. E' la stessa testata
   che il cliente vede aprendo l'app — chi accede al pannello arriva nello
   stesso posto. */
.pe-scena {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--pe-bruno), var(--pe-scuro) 62%);
  color: #fff;
  padding: env(safe-area-inset-top) var(--pe-s4) calc(var(--pe-s6) + env(safe-area-inset-bottom));
}
.pe-scena::before {
  content: '';
  position: absolute;
  top: -70px; right: -50px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,157,0,.42), transparent 68%);
  pointer-events: none;
}
.pe-scena > * { position: relative; }

/* Il KDS usa la stessa scatola ma non la stessa aria: e' un monitor guardato
   da due metri mentre si lavora, e in alto a destra non deve esserci niente
   che competa con le comande. Prima questo fondo era uno style= in linea su
   cucina.php, che vinceva sulla sfumatura ma NON spegneva l'alone: sarebbe
   comparso un disco arancione sopra la prima colonna di ordini. */
.pe-scena--kds {
  background: var(--pe-scuro-kds);
  padding-left: var(--pe-s5);
  padding-right: var(--pe-s5);
}
.pe-scena--kds::before { display: none; }

.pe-scena__testa {
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  padding: var(--pe-s5) 0;
}

/* Il marchio, lo stesso file dell'app cliente. Prima qui c'era l'icona
   quadrata piu' la scritta «Pizza EAT» rifatta a mano con tre style= in
   linea per pagina: quattro copie di un logo che il logo ce l'aveva. */
.pe-scena__logo { height: 30px; width: auto; }

.pe-scena__corpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--pe-s5) 0;
}

.pe-scena .pe-input {
  background: var(--pe-scuro-tasto);
  border-color: var(--pe-scuro-bordo);
  color: #fff;
}
.pe-scena .pe-input::placeholder { color: #6f665f; }
.pe-scena .pe-input:focus { border-color: var(--pe-verde); box-shadow: 0 0 0 3px rgba(31,170,50,.2); }
.pe-scena .pe-campo__label { color: #8a817a; }
/* Anche l'aiuto sotto il campo: --pe-testo-2 e' tarato sul pannello chiaro e
   qui sotto darebbe una riga da 12px al limite del leggibile. Se e' la frase
   che spiega perche' quel campo esiste, deve leggersi. */
.pe-scena .pe-campo__aiuto { color: #8a817a; }
.pe-scena .pe-campo__azione { color: #8a817a; }
.pe-scena .pe-campo__azione:hover { background: var(--pe-scuro-3); }

/* Messaggi di stato su fondo nero.
   I colori semantici standard sono tarati per il pannello, che e' chiaro:
   riusarli qui produce un rosso scuro su nero, cioe' un errore che l'utente
   non legge — e un errore che non si legge non e' un errore, e' un blocco
   senza spiegazione. */
.pe-scena .pe-campo__errore,
.pe-scena .pe-t-err   { color: var(--pe-err-fg-scuro); }
.pe-scena .pe-t-ok    { color: var(--pe-ok-fg-scuro); }
.pe-scena .pe-t-warn  { color: var(--pe-warn-fg-scuro); }

/* Il campo sbagliato si segnala con il bordo, non ridipingendolo di rosa
   chiaro: su una schermata scura sarebbe una macchia luminosa. */
.pe-scena .pe-campo--ko .pe-input {
  background: var(--pe-scuro-tasto);
  border-color: var(--pe-rosso);
}
.pe-scena .pe-campo--ko .pe-input:focus {
  border-color: var(--pe-err-fg-scuro);
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .25);
}
.pe-scena .pe-btn { background: var(--pe-scuro-tasto); border-color: var(--pe-scuro-bordo); color: #fff; }
.pe-scena .pe-btn:hover { background: var(--pe-scuro-3); }
.pe-scena .pe-btn--primario { background: var(--pe-verde); border-color: var(--pe-verde); }
.pe-scena .pe-btn--primario:hover { background: #1cb336; }

.pe-scena__punti {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pe-s3) var(--pe-s4);
  margin-top: var(--pe-s6);
}
.pe-scena__punto {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b8b0a8;
}
.pe-scena__punto::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pe-verde);
  flex: 0 0 auto;
}

/* Griglia dei volti in "Chi sta lavorando?" */
.pe-volti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--pe-s3);
}
.pe-volto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: var(--pe-s5) var(--pe-s3);
  border-radius: var(--pe-r-xl);
  background: var(--pe-scuro-tasto);
  border: 1px solid var(--pe-scuro-bordo);
  transition: background .12s ease, transform .06s ease;
}
.pe-volto:hover { background: var(--pe-scuro-3); text-decoration: none; }
.pe-volto:active { transform: scale(.98); }
.pe-volto__nome { font-size: 14px; font-weight: 700; color: #fff; }
.pe-volto__ruolo { font-size: 11.5px; color: #8a817a; }

/* ==========================================================================
   Selettore lingua
   ========================================================================== */

.pe-lingue { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--pe-r-sm); background: rgba(255,255,255,.06); }
.pe-lingue__b {
  padding: 4px 8px;
  border-radius: var(--pe-r-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a817a;
}
.pe-lingue__b:hover { color: #fff; text-decoration: none; }
.pe-lingue__b--attiva { background: rgba(255,255,255,.14); color: #fff; }

.pe-lingue--chiaro { background: var(--pe-chip); }
.pe-lingue--chiaro .pe-lingue__b { color: var(--pe-testo-2); }
.pe-lingue--chiaro .pe-lingue__b:hover { color: var(--pe-ink); }
.pe-lingue--chiaro .pe-lingue__b--attiva { background: var(--pe-bianco); color: var(--pe-ink); box-shadow: var(--pe-omb-card); }

/* ==========================================================================
   Metriche
   ========================================================================== */

/* La cifra non va MAI a capo. Quattro card in riga su un portatile da 1200
   lasciano 176px utili, e un incasso a cinque cifre ne chiede di piu': senza
   questa regola «12.345,67 €» si spezzava su due righe, la card cresceva e la
   fila di KPI perdeva l'allineamento — proprio sul numero che si guarda per
   primo. Non e' un difetto dei caratteri nuovi: succedeva identico con quelli
   di sistema, che sono appena il 2% piu' stretti.
   La misura scende con la finestra invece di spezzare, e sopra i ~1580px e'
   di nuovo 30px come prima. clamp() e' l'unico punto del foglio con una
   dimensione fluida, ed e' voluto: qui il testo e' un numero di lunghezza
   ignota dentro una colonna di larghezza nota. */
.pe-kpi__valore {
  font-family: var(--pe-mono);
  font-size: clamp(23px, 1.9vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.pe-kpi__label { font-size: 12px; color: var(--pe-testo-2); margin-top: 2px; }
.pe-kpi__delta { font-size: 12px; font-weight: 700; }
.pe-kpi__delta--su { color: var(--pe-ok-fg); }
.pe-kpi__delta--giu { color: var(--pe-err-fg); }

/* Tile della pipeline in dashboard. */
.pe-tile {
  display: block;
  padding: var(--pe-s3) var(--pe-s4);
  border-radius: var(--pe-r-lg);
  border: 1px solid var(--pe-bordo);
  background: var(--pe-bianco);
  text-align: left;
  transition: border-color .12s ease, transform .06s ease;
}
.pe-tile:hover { border-color: var(--pe-bordo-off); text-decoration: none; }
.pe-tile:active { transform: translateY(1px); }
/* `display: block` sui figli, e non e' un dettaglio di stile: sono `<span>`,
   quindi di natura in linea, e senza questo l'etichetta e il numero finivano
   attaccati sulla stessa riga — «Libero12». Il `margin-top: 2px` stava gia' su
   `__t` e non si vedeva: su un elemento in linea il margine verticale non fa
   niente, ed e' il segno che questi due sono sempre stati pensati impilati.
   Il margine ora sta fra i due in qualunque ordine li metta il markup: in
   sala e in statistiche viene prima l'etichetta, altrove prima il numero. */
.pe-tile__n { display: block; font-family: var(--pe-mono); font-size: 26px; font-weight: 700; line-height: 1.1; }
.pe-tile__t { display: block; font-size: 12px; font-weight: 700; }
.pe-tile__s { display: block; font-size: 11.5px; color: var(--pe-testo-2); }
.pe-tile__t + .pe-tile__n,
.pe-tile__n + .pe-tile__t,
.pe-tile__n + .pe-tile__s { margin-top: 2px; }
/* Gli stessi quattro colori della pipeline in dashboard, dalle stesse
   variabili: sala e statistiche riusano queste varianti come vocabolario di
   stato, e due arancioni diversi per «in lavorazione» erano il caso da
   togliere. Qui e' testo, quindi le varianti -fg. */
.pe-tile--nuovo .pe-tile__n { color: var(--status-new-fg); }
.pe-tile--forno .pe-tile__n { color: var(--status-preparing-fg); }
.pe-tile--pronto .pe-tile__n { color: var(--status-ready-fg); }
.pe-tile--ritardo .pe-tile__n { color: var(--status-late-fg); }

/* Istogramma a barre in CSS: nessuna libreria di grafici. */
.pe-barre { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.pe-barre__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.pe-barre__b { width: 100%; background: var(--pe-verde); border-radius: 5px 5px 0 0; min-height: 3px; }
.pe-barre__b--tenue { background: #c9e6cd; }
/* La settimana o il mese coperti solo in parte — il primo e l'ultimo secchiello
   del periodo. Righe diagonali invece di un verde piu' chiaro: il chiaro qui
   significa gia' «zero» (`--tenue`), e due significati sullo stesso colore
   sono un modo di non dirne nessuno. La barra resta piena e leggibile, si vede
   solo che e' fatta di un tessuto diverso. */
.pe-barre__b--parziale {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .55) 0 3px,
    rgba(255, 255, 255, 0) 3px 7px
  );
}
.pe-barre__x { font-family: var(--pe-mono); font-size: 10.5px; color: var(--pe-testo-3); }

/* ==========================================================================
   Dashboard
   Il cruscotto del servizio. Le classi qui sotto sono nuove e NON sostituiscono
   .pe-tile e .pe-barre, che restano vive in sala, clienti e statistiche.
   ========================================================================== */

.pe-dash__testa { margin-bottom: var(--pe-s5); }
.pe-dash__saluto { display: flex; align-items: center; gap: 10px; }
/* La mano e' decorazione, non un'icona: le icone del pannello sono tratti
   SVG. Sta in un elemento suo per non ereditare la spaziatura del titolo. */
.pe-dash__mano { font-size: .82em; line-height: 1; }

/* --- I quattro numeri ----------------------------------------------------- */

.pe-kpi {
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  padding: var(--pe-s4);
}
.pe-kpi__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--pe-r-md);
}
.pe-kpi__ic svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Il colore della pastiglia e' decorativo e cambia per card solo per dare a
   ognuna una faccia riconoscibile a colpo d'occhio. NON e' semantico: qui
   dentro il verde non vuol dire «bene» e il rosso non vuol dire «male», quel
   vocabolario e' riservato agli stati dell'ordine. */
.pe-kpi__ic--verde   { background: var(--pe-ok-bg);   color: var(--pe-ok-fg); }
.pe-kpi__ic--arancio { background: #fdf0e0;           color: #b4650a; }
.pe-kpi__ic--ambra   { background: var(--pe-warn-bg); color: var(--pe-warn-fg); }
.pe-kpi__ic--rosa    { background: #fdecef;           color: #b02546; }

/* L'etichetta sta SOPRA la cifra, al contrario di prima. Si legge la card in
   un ordine solo — cos'e', quanto fa — invece di incontrare un numero nudo e
   dover scendere per sapere di cosa parla. */
.pe-kpi .pe-kpi__label { margin: 0 0 1px; }
.pe-kpi .pe-kpi__valore { font-size: clamp(21px, 1.65vw, 27px); }

/* --- Pipeline ------------------------------------------------------------- */

.pe-pipe { display: flex; }
.pe-pipe__v {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--pe-s4) var(--pe-s5);
  border-left: 1px solid var(--pe-sep);
  color: var(--pe-ink);
  transition: background .16s ease;
}
.pe-pipe__v:first-child { border-left: 0; }
.pe-pipe__v:hover { background: var(--pe-riga); text-decoration: none; }

.pe-pipe__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pe-pipe__t { font-size: 13.5px; font-weight: 600; color: var(--pe-testo-1); }
.pe-pipe__n {
  font-family: var(--pe-mono);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pe-pipe__go {
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke: var(--pe-testo-3); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.pe-pipe__v:hover .pe-pipe__go { opacity: 1; transform: translateX(2px); }

/* Un nome solo per stato, in tutto il pannello: i quattro alias di :root. */
.pe-pipe__v--nuovo   .pe-pipe__dot { background: var(--status-new); }
.pe-pipe__v--forno   .pe-pipe__dot { background: var(--status-preparing); }
.pe-pipe__v--pronto  .pe-pipe__dot { background: var(--status-ready); }
.pe-pipe__v--ritardo .pe-pipe__dot { background: var(--status-late); }
.pe-pipe__v--nuovo   .pe-pipe__n { color: var(--status-new-fg); }
.pe-pipe__v--forno   .pe-pipe__n { color: var(--status-preparing-fg); }
.pe-pipe__v--pronto  .pe-pipe__n { color: var(--status-ready-fg); }
.pe-pipe__v--ritardo .pe-pipe__n { color: var(--status-late-fg); }

/* Il ritardo a zero e' una buona notizia e non deve sembrare un allarme: il
   rosso resta solo quando c'e' davvero qualcosa in ritardo. La classe la mette
   il JS, perche' il numero lo conosce solo lui. */
.pe-pipe__v--ritardo.pe-pipe__v--spento .pe-pipe__n   { color: var(--pe-testo-3); }
.pe-pipe__v--ritardo.pe-pipe__v--spento .pe-pipe__dot { background: var(--pe-grigio); }

/* --- Card in colonna con piede -------------------------------------------- */

/* Le card della stessa fascia sono alte uguali (la griglia le stira) ma i
   contenuti no: senza questo il link in fondo galleggia a meta' card. */
.pe-card--col { display: flex; flex-direction: column; }

.pe-card__piede {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: var(--pe-s3) calc(var(--pe-s5) * -1) calc(var(--pe-s4) * -1);
  padding: 11px var(--pe-s5);
  border-top: 1px solid var(--pe-sep);
  border-radius: 0 0 var(--pe-r-xl) var(--pe-r-xl);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pe-testo-1);
  transition: background .16s ease, color .16s ease;
}
.pe-card__piede:hover { background: var(--pe-riga); color: var(--pe-ink); text-decoration: none; }
.pe-card__piede svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .7;
}

/* --- Grafico del carico ---------------------------------------------------- */

/* Area + linea in SVG scritto a mano. Il disegno si allarga con la card
   (preserveAspectRatio="none") mentre i tratti restano di 1px grazie a
   vector-effect: senza, allargando la card la linea diventerebbe una fascia.
   Pallini ed etichette NON stanno nell'SVG: stirati diventerebbero ellissi e
   testo schiacciato. Sono elementi HTML posizionati in percentuale. */
.pe-graf { display: flex; flex-direction: column; gap: 7px; min-height: 188px; }
.pe-graf__tela { position: relative; flex: 1 1 auto; min-height: 140px; }

/* L'area di disegno e' un elemento SUO, non l'imbottitura sinistra della tela.
   Con il padding, il `left: 16.67%` di un pallino si risolveva sulla larghezza
   PIENA della tela mentre l'SVG partiva 26px piu' in la': punti e curva
   scivolavano di 21px sul primo e tornavano in bolla solo sull'ultimo, e
   l'ora sotto il picco non era quella del picco. Dentro un contenitore
   posizionato che copre esattamente il piano, SVG, pallini e tratteggio
   parlano tutti dello stesso sistema di coordinate. */
.pe-graf__piano { position: absolute; inset: 0 0 0 26px; }
.pe-graf__piano svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.pe-graf__area { fill: url(#pe-graf-sfuma); }
.pe-graf__linea {
  fill: none;
  stroke: var(--pe-arancio);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pe-graf__rete {
  stroke: var(--pe-sep);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pe-graf__y {
  position: absolute;
  left: 0;
  width: 22px;
  text-align: right;
  transform: translateY(-50%);
  font-family: var(--pe-mono);
  font-size: 10px;
  color: var(--pe-testo-3);
}

.pe-graf__pt {
  position: absolute;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--pe-bianco);
  border: 2px solid var(--pe-arancio);
}

/* Il momento presente. E' il BORDO SINISTRO del grafico e non il centro:
   stats_carico() restituisce solo i prossimi 30 minuti, sei fasce da cinque.
   Metterlo a meta' come nel mockup vorrebbe dire disegnare un passato che
   quella query non ha mai chiesto. */
.pe-graf__adesso {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1.5px dashed var(--pe-arancio);
  opacity: .55;
}
.pe-graf__adesso span {
  position: absolute;
  top: -2px; left: 4px;
  padding: 2px 7px;
  border-radius: var(--pe-r-pill);
  background: var(--pe-arancio);
  color: var(--pe-arancio-su);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pe-graf__x {
  display: flex;
  padding-left: 26px;
  font-family: var(--pe-mono);
  font-size: 10px;
  color: var(--pe-testo-3);
}
/* Allineate a DESTRA, non centrate: i punti stanno a (i+1)/n della larghezza,
   cioe' sul bordo destro della loro cella. Centrandole ogni etichetta cadeva
   mezza cella prima del suo punto — l'ora sotto al picco non era quella del
   picco. */
.pe-graf__x span { flex: 1 1 0; text-align: right; min-width: 0; }

/* --- Righe di lista -------------------------------------------------------- */

/* Un solo mattone per le quattro liste della dashboard: prenotazioni, venduti,
   ordini, consegne. Il margine negativo fa arrivare l'evidenziazione del
   passaggio del mouse fino ai bordi della card, che altrimenti si fermerebbe
   a meta' dell'imbottitura e sembrerebbe un errore. */
.pe-lr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(var(--pe-s5) * -1);
  padding: 9px var(--pe-s5);
  border-bottom: 1px solid var(--pe-sep);
  color: var(--pe-ink);
  transition: background .16s ease;
}
.pe-lr:last-child { border-bottom: 0; }
a.pe-lr:hover { background: var(--pe-riga); text-decoration: none; }
a.pe-lr .pe-lr__go {
  width: 14px; height: 14px; flex: 0 0 auto;
  stroke: var(--pe-testo-3); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
a.pe-lr:hover .pe-lr__go { opacity: 1; transform: translateX(2px); }

.pe-lr__t  { font-size: 13.5px; font-weight: 600; }
.pe-lr__s  { font-size: 11.5px; color: var(--pe-testo-2); }
.pe-lr__n  { font-family: var(--pe-mono); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pe-lr__ora { font-family: var(--pe-mono); font-size: 12px; color: var(--pe-testo-2); white-space: nowrap; }

/* Le colonne di una lista devono incolonnarsi davvero, altrimenti l'occhio
   non puo' scendere in verticale e deve rileggere ogni riga da capo. Codice e
   badge hanno una larghezza minima: senza, il nome del cliente cominciava a
   un'ascissa diversa a ogni riga, decisa dalla lunghezza dello stato. */
.pe-lr__cod {
  flex: 0 0 auto;
  min-width: 54px;
  font-family: var(--pe-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pe-testo-2);
}
.pe-lr .pe-badge {
  flex: 0 0 auto;
  /* 108px = il piu' lungo dei cinque dizionari con un margine: l'italiano
     "In preparazione" ne chiede 102, le altre quattro lingue stanno sotto.
     Sotto questa misura la colonna del cliente partiva da un'ascissa diversa
     sulla riga in preparazione. */
  min-width: 108px;
  justify-content: center;
  /* Nelle liste il maiuscoletto spaziato e' rumore: sono quattro stati che si
     ripetono a ogni riga, e in tondo occupano un terzo in meno. */
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Prenotazioni: il conteggio e' il dato, la data e' l'indirizzo. */
.pe-lr__ic {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  stroke: var(--pe-testo-3); stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Piu' venduti: posizione, foto, nome, quanto. */
.pe-vend__pos {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--pe-chip);
  color: var(--pe-testo-1);
  font-family: var(--pe-mono);
  font-size: 10.5px;
  font-weight: 700;
}
/* Solo il podio si colora, e solo il primo prende l'arancione pieno: se tutte
   e cinque le posizioni fossero accese, la classifica smetterebbe di avere una
   cima. */
.pe-vend__pos--1 { background: var(--pe-arancio); color: var(--pe-arancio-su); }
.pe-vend__pos--2, .pe-vend__pos--3 { background: #fbe8cd; color: #8a5a06; }

.pe-vend__foto {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--pe-r-sm);
  object-fit: cover;
  background: var(--pe-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--pe-testo-3);
}

/* La barra di confronto: dice a colpo d'occhio quanto stacca la prima dalle
   altre, che e' l'unica cosa che interessa di una classifica. */
.pe-vend__pista {
  height: 4px;
  margin-top: 5px;
  border-radius: var(--pe-r-pill);
  background: var(--pe-chip);
  overflow: hidden;
}
.pe-vend__barra { height: 100%; border-radius: var(--pe-r-pill); background: var(--pe-arancio); }

/* Consegne: il rider si riconosce dal colore delle sue iniziali, lo stesso
   che porta sulla board. */
.pe-cons__ind { font-size: 11.5px; color: var(--pe-testo-2); }
.pe-cons__tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--pe-verde-scuro);
  background: var(--pe-ok-bg);
  transition: filter .16s ease;
}
.pe-cons__tel:hover { filter: brightness(.95); text-decoration: none; }
.pe-cons__tel svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Stato vuoto della dashboard ------------------------------------------ */

/* .pe-vuoto resta com'e': la usano dieci file di JS. Questa e' la versione
   con icona e sottotitolo, che si sceglie riga per riga. */
.pe-vuoto--ric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--pe-s5) var(--pe-s4);
  text-align: center;
}
.pe-vuoto__ic {
  width: 30px; height: 30px;
  margin-bottom: var(--pe-s1);
  stroke: var(--pe-grigio); stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.pe-vuoto__t { font-size: 13px; font-weight: 700; color: var(--pe-testo-1); }
.pe-vuoto__s { font-size: 11.5px; color: var(--pe-testo-2); max-width: 30ch; }

/* ==========================================================================
   Tabelle sobrie
   Il pannello non e' un gestionale a griglie: le tabelle servono dove i dati
   sono davvero tabellari (listino, revisione dell'import).
   ========================================================================== */

.pe-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pe-tab th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pe-testo-2);
  border-bottom: 1px solid var(--pe-bordo);
  white-space: nowrap;
}
.pe-tab td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--pe-sep);
  vertical-align: middle;
}
.pe-tab tr:last-child td { border-bottom: 0; }
.pe-tab tbody tr:hover { background: var(--pe-riga); }
.pe-tab__num { font-family: var(--pe-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Contenitore che scorre in orizzontale invece di far scorrere la pagina. */
.pe-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Selettore dei giorni (Kanban: ieri + i prossimi quattordici)
   ========================================================================== */

.pe-giorni {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pe-giorni::-webkit-scrollbar { display: none; }

.pe-giorno {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 7px 10px;
  border-radius: var(--pe-r-md);
  border: 1.5px solid var(--pe-bordo-forte);
  background: var(--pe-bianco);
  text-align: center;
  line-height: 1.15;
  transition: all .12s ease;
}
.pe-giorno:hover { background: var(--pe-riga); text-decoration: none; }
.pe-giorno--attivo { background: var(--pe-ink); border-color: var(--pe-ink); color: #fff; }
.pe-giorno__g { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pe-testo-2); }
.pe-giorno--attivo .pe-giorno__g { color: rgba(255,255,255,.6); }
.pe-giorno__n { display: block; font-family: var(--pe-mono); font-size: 17px; font-weight: 700; }
.pe-giorno__b {
  display: inline-block;
  min-width: 16px;
  margin-top: 2px;
  padding: 0 4px;
  border-radius: var(--pe-r-pill);
  font-family: var(--pe-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--pe-chip);
  color: var(--pe-testo-1);
}
.pe-giorno--attivo .pe-giorno__b { background: rgba(255,255,255,.18); color: #fff; }

/* Il giorno che ha ordini si vede da lontano: e' l'unico modo per accorgersi
   di una prenotazione presa per la settimana prossima senza aprire i quindici
   giorni uno per uno. Il giorno SELEZIONATO resta scuro — dove sto guardando
   viene prima di cosa c'e' dentro — ma tiene il pallino verde. */
.pe-giorno--pieno {
  border-color: var(--pe-ok-bd);
  background: var(--pe-ok-bg);
}
.pe-giorno--pieno:hover { background: #dcf2e1; }
.pe-giorno--pieno .pe-giorno__b { background: var(--pe-verde); color: #fff; }
.pe-giorno--attivo.pe-giorno--pieno { background: var(--pe-ink); border-color: var(--pe-ink); }

/* ==========================================================================
   Kanban degli ordini
   Quattro colonne che scorrono ognuna per conto suo: la colonna "Arrivati"
   puo' essere lunghissima senza trascinare giu' le altre tre.
   ========================================================================== */

.pe-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pe-s3);
  align-items: start;
}

.pe-kcol {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  max-height: calc(100dvh - 250px);
  background: var(--pe-fondo);
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-xl);
  overflow: hidden;
}
.pe-kcol__testa {
  display: flex;
  align-items: center;
  gap: var(--pe-s2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--pe-bordo);
  background: var(--pe-bianco);
}
.pe-kcol__titolo { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pe-kcol__n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--pe-r-pill);
  font-family: var(--pe-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: var(--pe-chip);
}
.pe-kcol__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--pe-s2);
  display: flex;
  flex-direction: column;
  gap: var(--pe-s2);
}
.pe-kcol--nuovi  .pe-kcol__n { background: var(--pe-info-bg); color: var(--pe-info-fg); }
.pe-kcol--forno  .pe-kcol__n { background: var(--pe-warn-bg); color: var(--pe-warn-fg); }
.pe-kcol--pronti .pe-kcol__n { background: var(--pe-ok-bg);   color: var(--pe-ok-fg); }

/* --- Scheda ordine -------------------------------------------------------- */

.pe-ord {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--pe-r-lg);
  border: 1px solid var(--pe-bordo);
  border-left: 4px solid var(--pe-grigio);
  background: var(--pe-bianco);
  text-align: left;
  box-shadow: var(--pe-omb-card);
  transition: transform .06s ease, border-color .12s ease;
}
.pe-ord:hover { border-color: var(--pe-bordo-off); text-decoration: none; }
.pe-ord:active { transform: translateY(1px); }
.pe-ord--domicilio { border-left-color: var(--pe-blu); }
.pe-ord--asporto   { border-left-color: var(--pe-verde); }
.pe-ord--sala      { border-left-color: var(--pe-arancio); }
.pe-ord--bancone   { border-left-color: var(--pe-ambra); }
.pe-ord--ritardo   { border-left-color: var(--pe-rosso); background: #fffaf9; }

.pe-ord__testa { display: flex; align-items: baseline; gap: var(--pe-s2); }
.pe-ord__codice { font-family: var(--pe-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pe-ord__ora { font-family: var(--pe-mono); font-size: 12px; color: var(--pe-testo-2); }
.pe-ord__nome { font-size: 13px; font-weight: 600; margin-top: 2px; }

/* Chi ha annullato e perche'. Sta sotto ai badge, in coda alla scheda, e pesa
   meno di tutto il resto: e' una nota scritta di corsa da chi era al telefono,
   non un dato della testata.
   DUE RIGHE, non una. Quando qui c'era il solo motivo una riga bastava; adesso
   la frase comincia con «Annullato da Nome Cognome» e a una riga sola il motivo
   — cioe' la parte che si legge davvero — verrebbe tagliato via quasi tutto.
   Due si possono concedere perche' questo e' l'ULTIMO elemento della scheda:
   allunga il riquadro e non sposta niente. Il tetto resta, altrimenti una nota
   da 190 caratteri farebbe una scheda alta il doppio delle altre. */
.pe-ord__motivo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--pe-testo-3);
}
.pe-ord__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pe-ord__tot { font-family: var(--pe-mono); font-size: 13.5px; font-weight: 700; }
.pe-ord__rit {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: var(--pe-r-xs);
  font-family: var(--pe-mono);
  font-size: 10.5px;
  font-weight: 800;
  background: var(--pe-err-bg);
  color: var(--pe-err-fg);
}

/* ==========================================================================
   Drawer laterale (dettaglio ordine)
   ========================================================================== */

.pe-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  justify-content: flex-end;
  background: rgba(28,25,23,.45);
  animation: pe-dissolvi .16s ease-out;
}
.pe-drawer__box {
  width: min(460px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--pe-fondo);
  box-shadow: var(--pe-omb-drawer);
  animation: pe-entra .2s ease-out;
  padding: var(--pe-s5);
  padding-bottom: calc(var(--pe-s8) + env(safe-area-inset-bottom));
}
@keyframes pe-entra { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }

.pe-drawer__testa {
  display: flex;
  align-items: flex-start;
  gap: var(--pe-s3);
  margin-bottom: var(--pe-s4);
}

/* ==========================================================================
   Nuova comanda
   Due colonne: il listino a sinistra, la comanda a destra sempre visibile.
   La colonna di destra non scorre via: e' il totale, e va guardato mentre si
   compone l'ordine, non dopo.
   ========================================================================== */

.pe-comanda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--pe-s4);
  align-items: start;
}

.pe-prodotti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--pe-s2);
}

.pe-prod {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 74px;
  padding: 10px 12px;
  border-radius: var(--pe-r-lg);
  border: 1.5px solid var(--pe-bordo-forte);
  background: var(--pe-bianco);
  text-align: left;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.pe-prod:hover { border-color: var(--pe-verde); background: var(--pe-sel-bg); text-decoration: none; }
.pe-prod:active { transform: scale(.98); }
.pe-prod__nome { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.pe-prod__prezzo { font-family: var(--pe-mono); font-size: 13px; color: var(--pe-testo-1); margin-top: auto; }
.pe-prod__tag { font-size: 10.5px; color: var(--pe-testo-3); }
.pe-prod--off { opacity: .45; pointer-events: none; }
.pe-prod--meta { border-color: var(--pe-arancio); background: var(--pe-ban-bg); }

/* --- La comanda in composizione ------------------------------------------ */

.pe-carrello {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
  background: var(--pe-bianco);
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-xl);
  overflow: hidden;
  box-shadow: var(--pe-omb-card);
}
.pe-carrello__testa {
  display: flex;
  align-items: center;
  gap: var(--pe-s2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--pe-sep);
}
.pe-carrello__corpo { flex: 1 1 auto; overflow-y: auto; padding: var(--pe-s2) var(--pe-s3); }
.pe-carrello__piede { border-top: 1px solid var(--pe-sep); padding: 12px 14px; background: var(--pe-riga); }

.pe-criga { display: flex; gap: var(--pe-s2); padding: 9px 0; border-bottom: 1px solid var(--pe-sep); }
.pe-criga:last-child { border-bottom: 0; }
.pe-criga__q {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pe-r-sm);
  background: var(--pe-ink);
  color: #fff;
  font-family: var(--pe-mono);
  font-size: 12px;
  font-weight: 700;
}
.pe-criga__nome { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.pe-criga__sotto { font-size: 11.5px; color: var(--pe-testo-2); line-height: 1.35; }
.pe-criga__p { font-family: var(--pe-mono); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pe-criga__x { padding: 2px 6px; border-radius: var(--pe-r-xs); color: var(--pe-testo-3); font-size: 15px; line-height: 1; }
.pe-criga__x:hover { background: var(--pe-err-bg); color: var(--pe-err-fg); }

.pe-tot { display: flex; align-items: baseline; gap: var(--pe-s2); font-size: 13px; padding: 2px 0; }
.pe-tot__v { margin-left: auto; font-family: var(--pe-mono); font-variant-numeric: tabular-nums; }
.pe-tot--grande { font-size: 15px; font-weight: 800; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--pe-bordo); }
.pe-tot--grande .pe-tot__v { font-size: 21px; }

/* Contatore dei tocchi: il mockup chiede una comanda in meno di 8 tocchi,
   e un obiettivo che non si misura non si rispetta. */
.pe-tocchi {
  font-family: var(--pe-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--pe-r-pill);
  background: var(--pe-chip);
  color: var(--pe-testo-2);
}
.pe-tocchi--troppi { background: var(--pe-warn-bg); color: var(--pe-warn-fg); }

/* ==========================================================================
   Monitor di cucina
   Fondo scuro, caratteri grandi: si legge da due metri, con le mani in pasta.
   ========================================================================== */

.pe-kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pe-s3); }

.pe-kcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--pe-r-xl);
  background: var(--pe-scuro-2);
  border: 1px solid var(--pe-scuro-bordo);
  border-top: 5px solid var(--pe-verde);
  overflow: hidden;
}
/* Gli stessi quattro stati della dashboard, dalle stesse variabili: qui e'
   un bordo, quindi il colore pieno e non la variante da testo. */
.pe-kcard--attesa  { border-top-color: var(--status-new); }
.pe-kcard--forno   { border-top-color: var(--status-preparing); }
.pe-kcard--ritardo { border-top-color: var(--status-late); }
.pe-kcard--pronto  { border-top-color: var(--status-ready); opacity: .72; }

.pe-kcard__testa { display: flex; align-items: baseline; gap: var(--pe-s2); padding: 11px 14px 7px; }
.pe-kcard__codice { font-family: var(--pe-mono); font-size: 22px; font-weight: 700; color: #fff; }
.pe-kcard__meta { font-size: 11.5px; color: #8a817a; }
.pe-kcard__ora { margin-left: auto; font-family: var(--pe-mono); font-size: 13px; color: #b8b0a8; }
.pe-kcard__ora--ritardo { color: var(--pe-err-fg-scuro); font-weight: 700; }
.pe-kcard__corpo { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.pe-kcard__piede { padding: 10px 12px; border-top: 1px solid var(--pe-scuro-bordo); display: flex; gap: var(--pe-s2); }

.pe-kriga {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--pe-r-md);
  background: var(--pe-scuro-tasto);
  border: 1px solid transparent;
  text-align: left;
  transition: background .1s ease;
}
.pe-kriga:hover { background: var(--pe-scuro-3); }
.pe-kriga__q {
  flex: 0 0 auto;
  font-family: var(--pe-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--pe-ambra);
  min-width: 24px;
}
.pe-kriga__nome { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.pe-kriga__mod { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.pe-kriga__agg { color: var(--pe-ok-fg-scuro); }
.pe-kriga__rim { color: var(--pe-err-fg-scuro); }
.pe-kriga__nota { color: var(--pe-warn-fg-scuro); font-style: italic; }
.pe-kriga--lavorazione { border-color: var(--pe-ambra); }
.pe-kriga--pronto { opacity: .4; }
.pe-kriga--pronto .pe-kriga__nome { text-decoration: line-through; }

/* Chip dei reparti su fondo scuro. Il conteggio non cambia col filtro
   attivo: un numero che dipende da cosa stai guardando non serve a decidere
   dove guardare. */
.pe-kchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--pe-r-md);
  border: 1.5px solid var(--pe-scuro-bordo);
  background: var(--pe-scuro-2);
  color: #d6d0ca;
  font-size: 13.5px;
  font-weight: 700;
}
.pe-kchip:hover { background: var(--pe-scuro-3); text-decoration: none; }
.pe-kchip--attivo { background: #fff; border-color: #fff; color: var(--pe-ink); }
.pe-kchip__n {
  font-family: var(--pe-mono);
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: var(--pe-r-pill);
  background: rgba(255,255,255,.1);
}
.pe-kchip--attivo .pe-kchip__n { background: var(--pe-chip); }

/* ==========================================================================
   Editor del menu
   ========================================================================== */

.pe-mriga {
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--pe-sep);
}
.pe-mriga:last-child { border-bottom: 0; }
.pe-mriga:hover { background: var(--pe-riga); }
/* `display: block` non e' un dettaglio estetico: senza, questi due sono
   `<span>` dentro un elemento flex — che e' un ELEMENTO, non un contenitore —
   e restano in linea. Il risultato e' il titolo incollato al sottotitolo:
   "Quando parte il riderRicevuta per il rider". Vale per ogni elenco del
   pannello che usa `pe-mriga`, non solo per le regole di stampa. */
.pe-mriga__nome { display: block; font-size: 14px; font-weight: 700; }
.pe-mriga__sotto { display: block; font-size: 12px; color: var(--pe-testo-2); }
.pe-mriga--off .pe-mriga__nome { color: var(--pe-testo-3); }

/* Maniglia di trascinamento.

   `touch-action: none` non e' un dettaglio: senza, il dito che parte da qui
   scrolla la pagina invece di trascinare la riga, e su tablet la funzione non
   esiste proprio. `user-select: none` evita che il trascinamento selezioni il
   testo delle righe accanto, che e' l'aspetto tipico di una cosa rotta.

   L'area e' 28px: sotto i 24 un dito non la prende. */
.pe-maniglia {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  align-self: stretch;
  margin: -4px 2px -4px -4px;
  color: var(--pe-testo-3);
  font-size: 15px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pe-maniglia:active { cursor: grabbing; color: var(--pe-testo-1); }

/* Anteprima del QR. Il fondo bianco e il bordo chiaro non sono decorazione:
   un QR su fondo colorato o a filo di un bordo scuro perde la zona di
   silenzio e i lettori faticano. `image-rendering: pixelated` tiene i moduli
   a spigolo vivo invece di sfumarli quando il browser lo ridimensiona. */
.pe-qr {
  flex: 0 0 auto;
  width: 290px;
  height: 290px;
  background: #fff;
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-md);
  image-rendering: pixelated;
}

/* Intestazione di categoria dentro l'elenco prodotti. Appiccicosa: scorrendo
   un listino lungo si deve sapere in quale categoria si sta trascinando. */
.pe-gruppo__testa {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px var(--pe-s4) 6px;
  background: var(--pe-bianco);
  border-bottom: 1px solid var(--pe-bordo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pe-testo-2);
}

.pe-mriga--presa {
  background: var(--pe-sel-bg);
  opacity: .75;
  box-shadow: var(--pe-omb-alta);
  border-radius: var(--pe-r-sm);
}

/* Foto del prodotto.
   `flex: 0 0 auto` non e' decorativo: dentro una riga flex un'immagine si
   lascia schiacciare dal testo accanto, e la miniatura diventerebbe una
   fettina verticale su ogni nome un po' lungo.

   `object-fit: contain` e non `cover`: le foto arrivano dal telefono, in
   orizzontale o in verticale, e `cover` ne taglierebbe i lati per riempire il
   quadrato. Meglio due bande di fondo che un piatto tagliato a meta' — chi ha
   scattato la foto aveva gia' deciso cosa ci doveva stare dentro. */
.pe-mini {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--pe-r-sm);
  object-fit: contain;
  background: var(--pe-riga);
}
.pe-mriga--off .pe-mini { opacity: .45; }

.pe-fotoprod {
  flex: 0 0 auto;
  width: 124px;
  height: 92px;
  border-radius: var(--pe-r-md);
  overflow: hidden;
  background: var(--pe-riga);
  box-shadow: var(--pe-omb-hair);
}
.pe-fotoprod img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pe-fotoprod--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--pe-bordo-forte);
  box-shadow: none;
  color: var(--pe-testo-3);
  font-size: 26px;
  line-height: 1;
}

.pe-fam {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--pe-r-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--pe-chip);
  color: var(--pe-testo-0);
}
.pe-fam__pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Cella incerta nella revisione dell'import: si vede subito dove guardare. */
.pe-incerta { background: var(--pe-warn-bg); box-shadow: inset 3px 0 0 var(--pe-ambra); }

.pe-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pe-s2);
  padding: var(--pe-s7) var(--pe-s5);
  border: 2px dashed var(--pe-bordo-off);
  border-radius: var(--pe-r-xl);
  background: var(--pe-riga);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pe-dropzone:hover, .pe-dropzone--sopra { border-color: var(--pe-verde); background: var(--pe-sel-bg); }

.pe-miniatura {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--pe-r-md);
  border: 1px solid var(--pe-bordo);
  background: var(--pe-bianco);
}

/* ==========================================================================
   Sala — la pianta del locale
   Il colore dice lo stato e si legge da lontano: chi sta all'ingresso guarda
   questa schermata di sfuggita, non la studia.
   ========================================================================== */

.pe-sala {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--pe-s3);
}

.pe-tavolo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 108px;
  padding: var(--pe-s3);
  border: 2px solid var(--pe-bordo);
  border-radius: var(--pe-r-lg);
  background: var(--pe-bianco);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pe-tavolo:hover  { transform: translateY(-2px); box-shadow: var(--pe-omb-alta); }
.pe-tavolo:active { transform: none; }

.pe-tavolo__n     { font-size: 26px; font-weight: 800; line-height: 1.1; }
.pe-tavolo__s     { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pe-tavolo__sotto { font-size: 12px; color: var(--pe-testo-2); }
.pe-tavolo__tot   { font-size: 13px; font-weight: 700; font-family: var(--pe-mono); }
.pe-tavolo__ora   { font-size: 11px; color: var(--pe-testo-3); font-family: var(--pe-mono); }

/* La prossima prenotazione di un tavolo che intanto si usa.
   Piu' piccola e piu' spenta di tutto il resto del riquadro, di proposito: non
   e' lo stato del tavolo adesso — quello lo dicono il colore e la parola grande
   — e' un impegno per un altro giorno. Su una riga sola e con i puntini, cosi'
   un nome lungo non allarga il riquadro e la pianta della sala resta una
   griglia. */
.pe-tavolo__pren {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pe-testo-3);
  font-family: var(--pe-mono);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il pallino con gli ordini ancora in lavorazione: e' il motivo per cui un
   tavolo non si puo' chiudere, e va visto prima di premere.
   Il testo sopra l'arancione e' scuro, non bianco: bianco su #ff9d00 fa
   2,08:1, cioe' un numero che va visto prima di premere e non si legge. */
.pe-tavolo__badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border-radius: var(--pe-r-pill);
  background: var(--pe-arancio);
  color: var(--pe-arancio-su);
  font-size: 11.5px; font-weight: 800;
}

.pe-tavolo--libero    { border-color: var(--pe-bordo); background: var(--pe-bianco); }
.pe-tavolo--libero .pe-tavolo__s { color: var(--pe-testo-3); }

.pe-tavolo--occupato  { border-color: var(--pe-ok-bd); background: var(--pe-ok-bg); }
.pe-tavolo--occupato .pe-tavolo__s { color: var(--pe-ok-fg); }

.pe-tavolo--prenotato { border-color: #bcd0f2; background: var(--pe-info-bg); }
.pe-tavolo--prenotato .pe-tavolo__s { color: var(--pe-info-fg); }

.pe-tavolo--conto     { border-color: var(--pe-warn-bd); background: var(--pe-warn-bg); }
.pe-tavolo--conto .pe-tavolo__s { color: var(--pe-warn-fg); }

/* "Pulire" e' tratteggiato: non e' libero e non e' occupato, e' in mezzo.
   Senza questo stato due gruppi finiscono sullo stesso tavolo. */
.pe-tavolo--pulire {
  border-style: dashed;
  border-color: var(--pe-grigio);
  background: var(--pe-riga);
}
.pe-tavolo--pulire .pe-tavolo__s { color: var(--pe-testo-2); }

/* ==========================================================================
   Consegne
   ========================================================================== */

.pe-consegne {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: var(--pe-s4);
  align-items: start;
}

.pe-rider {
  background: var(--pe-bianco);
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-lg);
  padding: var(--pe-s3);
}

.pe-ridercard {
  padding: var(--pe-s3) 0;
  border-bottom: 1px solid var(--pe-sep);
}
.pe-ridercard:last-child { border-bottom: 0; }
.pe-ridercard--turno .pe-ridercard__nome { color: var(--pe-ok-fg); }
.pe-ridercard__nome  { display: block; font-size: 13.5px; font-weight: 700; }
.pe-ridercard__sotto { display: block; font-size: 11.5px; color: var(--pe-testo-2); }

.pe-kanban--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pe-cons {
  display: block;
  width: 100%;
  padding: var(--pe-s3);
  margin-bottom: var(--pe-s2);
  border: 1px solid var(--pe-bordo);
  border-left: 3px solid var(--pe-bordo-forte);
  border-radius: var(--pe-r-md);
  background: var(--pe-bianco);
  text-align: left;
}
.pe-cons--attesa     { border-left-color: var(--pe-blu); }
.pe-cons--ritirato   { border-left-color: var(--pe-arancio); }
.pe-cons--consegnato { border-left-color: var(--pe-ok-fg); opacity: .7; }
.pe-cons--fallito    { border-left-color: var(--pe-err-fg); opacity: .7; }
.pe-cons--ritardo    { background: var(--pe-err-bg); }

.pe-cons__ind     { display: block; font-size: 12.5px; color: var(--pe-testo-1); }
.pe-cons__azioni  { margin-top: var(--pe-s2); }

/* Iniziali e nome del rider restano attaccati: sono una cosa sola, e il gap
   della riga li separa dai badge che vengono dopo. `min-width: 0` serve al
   `pe-trunc` che sta dentro — senza, un nome lungo allarga la scheda invece
   di accorciarsi. */
.pe-cons__rider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pe-testo-1);
}

/* L'importo da incassare e' il dato piu' importante della scheda: si legge
   prima del nome, perche' chiedere soldi a chi ha gia' pagato costa piu' di
   qualunque altro errore del giro. */
.pe-cons__inc {
  font-family: var(--pe-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--pe-ink);
}
.pe-cons__inc--pagato {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pe-ok-fg);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pe-input--rider { flex: 1 1 120px; min-width: 110px; padding: 6px 8px; font-size: 12.5px; }

.pe-offerta {
  display: flex;
  align-items: center;
  gap: var(--pe-s2);
  margin-top: var(--pe-s2);
  padding: 6px 8px;
  border-radius: var(--pe-r-sm);
  background: var(--pe-info-bg);
  color: var(--pe-info-fg);
  font-size: 12px;
}
.pe-offerta--scaduta { background: var(--pe-chip); color: var(--pe-testo-2); }
.pe-offerta__n {
  font-family: var(--pe-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Clienti
   ========================================================================== */

.pe-clir {
  display: flex;
  align-items: center;
  gap: var(--pe-s3);
  width: 100%;
  padding: var(--pe-s3) 0;
  border: 0;
  border-bottom: 1px solid var(--pe-sep);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pe-clir:last-child { border-bottom: 0; }
.pe-clir:hover { background: var(--pe-riga); }

.pe-clir__nome   { display: block; font-size: 14px; font-weight: 700; }
.pe-clir__sotto  { display: block; font-size: 12px; color: var(--pe-testo-2); }
.pe-clir__stat   { min-width: 76px; text-align: right; }
.pe-clir__n      { display: block; font-size: 13.5px; font-weight: 700; }
.pe-clir__l      { display: block; font-size: 10.5px; color: var(--pe-testo-3); text-transform: uppercase; letter-spacing: .04em; }
.pe-clir__ultimo { min-width: 92px; text-align: right; font-size: 12px; color: var(--pe-testo-2); }

/* Suggerimenti del telefono in comanda */
.pe-suggerimenti {
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-md);
  overflow: hidden;
  margin-bottom: var(--pe-s2);
}
.pe-sugg {
  display: flex;
  align-items: center;
  gap: var(--pe-s2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--pe-sep);
  background: var(--pe-bianco);
  font: inherit;
  font-size: 12.5px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pe-sugg:last-child { border-bottom: 0; }
.pe-sugg:hover { background: var(--pe-sel-bg); }

/* ==========================================================================
   Fasce orarie
   ========================================================================== */

.pe-fasce { display: flex; flex-wrap: wrap; gap: var(--pe-s2); }

.pe-fascia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-md);
  background: var(--pe-bianco);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pe-fascia__h { font-family: var(--pe-mono); font-size: 13.5px; font-weight: 700; }
.pe-fascia__n { font-size: 10.5px; color: var(--pe-testo-2); }

.pe-fascia--attiva {
  border-color: var(--pe-verde, #1faa32);
  background: var(--pe-sel-bg);
}
/* Una fascia piena non si preme: barrata e opaca, cosi' non serve provare per
   scoprirlo. */
.pe-fascia--chiusa {
  background: var(--pe-chip);
  color: var(--pe-testo-3);
  cursor: not-allowed;
  text-decoration: line-through;
}
.pe-fascia--chiusa .pe-fascia__n { text-decoration: none; }

/* ==========================================================================
   Stampa — anteprima a monospazio
   Deve coincidere carattere per carattere con cio' che esce dalla carta:
   e' l'unico modo per tarare un layout senza sprecare rotoli.
   ========================================================================== */

.pe-carta {
  font-family: var(--pe-mono);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
  padding: var(--pe-s3);
  border: 1px solid var(--pe-bordo);
  border-radius: var(--pe-r-sm);
  background: var(--pe-riga);
  color: var(--pe-ink);
  max-height: 60vh;
}

/* ==========================================================================
   Responsive
   Le soglie sono quelle del mockup: sotto 760 mobile, sotto 1180 tablet.
   ========================================================================== */

/* La release e' la prima a togliersi il disturbo: serve all'assistenza, non
   al servizio. Poi l'etichetta del monitor cucina, che ha un'icona parlante. */
@media (max-width: 1500px) {
  .pe-topbar__rel { display: none !important; }
}

@media (max-width: 1360px) {
  .pe-topbar .pe-btn--suscuro span { display: none; }
  .pe-topbar .pe-btn--suscuro { padding: 8px 10px; }
  .pe-lic__cta { display: none; }

  /* Tre card da 26fr sotto i 1100px di contenuto diventano tre colonne
     strette: meglio due larghe, con le consegne a tutta riga sotto. */
  .pe-griglia--dash3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pe-griglia--dash3 > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .pe-app__main { padding: var(--pe-s4) var(--pe-s4) var(--pe-s7); }
  .pe-griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-griglia--55 { grid-template-columns: minmax(0, 1fr); }

  /* La colonna si stringe alle sole icone. Non sparisce: su un tablet in
     pizzeria le dodici destinazioni servono ancora, e la barra in basso ne
     porta cinque. L'etichetta resta raggiungibile come tooltip (title) e
     leggibile dai lettori di schermo, che il testo ce l'hanno ancora. */
  :root { --pe-sidebar-w: 66px; }
  .pe-sidebar__titolo { display: none; }
  .pe-sidebar__gruppo { padding: var(--pe-s2) 10px; }
  .pe-sidebar__gruppo + .pe-sidebar__gruppo { border-top: 1px solid var(--pe-nav-bordo); padding-top: var(--pe-s3); }
  .pe-navitem { justify-content: center; padding: 11px 0; gap: 0; }
  .pe-navitem > .pe-grow,
  .pe-navitem__tasto { display: none; }
  .pe-navitem--attivo::before { left: -10px; }
  /* Il badge non ha piu' una riga su cui stare: si appoggia all'icona. */
  .pe-navitem__badge {
    position: absolute;
    top: 4px; right: 6px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 9.5px;
  }
  /* Nome e ruolo se ne vanno, avatar e menu NO: da qui si blocca il turno e
     si esce, ed e' l'unica strada per farlo. Si impilano invece di sparire. */
  .pe-sidebar__piede { position: relative; padding: var(--pe-s2); }
  .pe-sidebar__op { flex-direction: column; gap: 6px; }
  .pe-sidebar__op > .pe-grow { display: none; }

  /* A 66px il menu non ci sta: esce di fianco alla colonna. */
  .pe-sidebar__menu {
    position: absolute;
    left: calc(100% + 6px);
    bottom: var(--pe-s2);
    width: 172px;
    margin: 0;
    z-index: 30;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
  }

  /* La comanda passa a una colonna sola: il carrello scende sotto il listino
     e smette di essere appiccicato, altrimenti su un tablet in verticale
     mangerebbe meta' schermo. */
  .pe-comanda { grid-template-columns: minmax(0, 1fr); }
  .pe-carrello { position: static; max-height: none; }
}

@media (max-width: 980px) {
  /* Il Kanban diventa una striscia che scorre di lato: quattro colonne su
     760 px sono quattro colonne illeggibili. */
  .pe-kanban {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--pe-s2);
    -webkit-overflow-scrolling: touch;
  }
  .pe-kcol { flex: 0 0 260px; max-height: none; }
  .pe-kcol__corpo { max-height: 62vh; }

  /* I rider passano sopra le colonne: su un tablet in verticale una colonna
     laterale da 224 px toglie spazio proprio alle schede che si devono
     leggere. */
  .pe-consegne { grid-template-columns: minmax(0, 1fr); }

  /* La pipeline si piega in due per due: quattro segmenti su una riga stretta
     mandano a capo le etichette, e una fila di numeri disallineati e' proprio
     cio' che questa barra doveva evitare. */
  .pe-pipe { flex-wrap: wrap; }
  .pe-pipe__v { flex: 1 1 46%; }
  .pe-pipe__v:nth-child(3) { border-left: 0; }
  .pe-pipe__v:nth-child(n+3) { border-top: 1px solid var(--pe-sep); }

  .pe-griglia--dash3,
  .pe-griglia--dash3 > :nth-child(3) { grid-template-columns: minmax(0, 1fr); grid-column: auto; }
}

@media (max-width: 760px) {
  .pe-sidebar { display: none; }
  .pe-bottomnav { display: flex; }
  .pe-app__main { padding: var(--pe-s3) var(--pe-s3) var(--pe-s6); }
  /* minmax(0, 1fr) e NON 1fr: "1fr" vale "minmax(auto, 1fr)", e una traccia
     con minimo `auto` non scende sotto la larghezza minima del contenuto.
     Bastava una riga con codice (54px) e badge (108px) perche' la card si
     allargasse a 459px su uno schermo da 375, uscendo dallo schermo — invisibile
     perche' .pe-app__main ritaglia l'eccedenza invece di farla scorrere. */
  .pe-griglia--2, .pe-griglia--3, .pe-griglia--4,
  .pe-griglia--55, .pe-griglia--dash3 { grid-template-columns: minmax(0, 1fr); }

  /* Sul telefono le liste sono una colonna sola: incolonnare i badge non
     serve piu' a niente e costa 108px su 375. */
  .pe-lr .pe-badge, .pe-lr__cod { min-width: 0; }
  .pe-h1 { font-size: 24px; }
  .pe-topbar { gap: var(--pe-s2); padding: 0 var(--pe-s3) 0 0; }
  .pe-solo-desktop { display: none !important; }

  /* Senza la colonna a fianco la zona del marchio non ha piu' niente con cui
     allinearsi: torna larga quanto il logo. */
  .pe-topbar__marchio { flex: 0 0 auto; padding: 0 var(--pe-s3); border-right: 0; }
  .pe-topbar__marchio::before { display: none; }

  /* Sul telefono le quattro caselle stanno una sopra l'altra: in fila
     sarebbero quattro colonne da 80px, cioe' quattro etichette a capo. */
  .pe-pipe { flex-direction: column; }
  .pe-pipe__v { flex: 1 1 auto; border-left: 0; padding: var(--pe-s3) var(--pe-s4); }
  .pe-pipe__v + .pe-pipe__v { border-top: 1px solid var(--pe-sep); }
  /* Sul telefono non c'e' il puntatore: la freccia resta accesa, altrimenti
     nulla direbbe che la casella si puo' premere. */
  .pe-pipe__go { opacity: 1; }
  a.pe-lr .pe-lr__go { opacity: 1; }
  .pe-modale__box { padding: var(--pe-s4); border-radius: var(--pe-r-xl); }

  .pe-prodotti { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .pe-kds { grid-template-columns: 1fr; }
  .pe-drawer__box { width: 100%; padding: var(--pe-s4); }

  .pe-sala { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .pe-tavolo { min-height: 92px; }
  .pe-tavolo__n { font-size: 22px; }

  /* Sul telefono le colonne dei numeri sparirebbero comunque: si tiene solo
     l'ultimo ordine, che e' il dato con cui si riconosce un cliente. */
  .pe-clir__stat { display: none; }
  .pe-clir__ultimo { min-width: 72px; }
}

@media (min-width: 761px) {
  .pe-solo-mobile { display: none !important; }
}

/* Stampa: il pannello non e' pensato per la carta, ma se qualcuno stampa
   una schermata almeno non deve uscire un rettangolo nero. */
@media print {
  .pe-topbar, .pe-sidebar, .pe-bottomnav, .pe-toast-area { display: none !important; }
  .pe-app, .pe-app__main { height: auto; overflow: visible; background: #fff; }
}

/* --- Carico cucina: la scelta della finestra ------------------------------- */

/* I chip stanno fra il titolo e il grafico, e sopra al grafico c'e' la
   pastiglia «ADESSO» che sporge in alto: senza questo stacco le due cose si
   sovrappongono, e il numero piu' alto dell'asse Y finisce sotto un bottone. */
.pe-graf-finestre { margin: 2px 0 14px; }

/* Sulla giornata intera i punti vanno da bordo a bordo, quindi le etichette
   dell'asse X non possono piu' essere celle uguali allineate a destra: si
   ancorano alla stessa percentuale del punto. Le due agli estremi si
   appoggiano al bordo invece di sporgere fuori dalla card. */
/* `margin-left` al posto del `padding-left` della classe base, e non e' lo
   stesso: un figlio in posizione assoluta risolve `left: 0%` sul PADDING box
   dell'antenato, cioe' PRIMA dei 26px di padding. Con il padding, ogni
   etichetta cadeva 26px a sinistra del suo pallino e la prima usciva dalla
   card. Con il margine il riquadro di riferimento comincia dove comincia il
   piano del grafico, e i due sistemi di coordinate tornano a coincidere. */
.pe-graf__x--ancorata {
  position: relative;
  display: block;
  height: 14px;
  padding-left: 0;
  margin-left: 26px;
}
.pe-graf__x--ancorata span { position: absolute; top: 0; flex: none; text-align: left; white-space: nowrap; }

/* Con «adesso» oltre i tre quarti l'etichetta uscirebbe dalla card. */
.pe-graf__adesso--sinistra span { left: auto; right: 4px; }