/* ==========================================================================
   Pizza EAT — le schermate ricostruite delle tre app.

   Non sono fotografie: sono l'interfaccia ridisegnata in HTML e CSS. Costano
   due kilobyte invece di trecento, restano nitide su qualsiasi schermo, e
   soprattutto SI TRADUCONO — un visitatore tedesco vede il pannello in
   tedesco, cosa che uno screenshot non potra' mai fare.

   Ogni scena ridefinisce i propri token sul contenitore. I colori sono quelli
   veri, campionati dai tre CSS del prodotto: e' cio' che le rende
   riconoscibili a chi il pannello lo ha gia' visto.

   LA MISURA: ogni scena e' un container, e tutto dentro e' espresso in `em`
   con `font-size` calcolato in `cqw`. Cosi' la stessa schermata sta bene a
   1100 px nell'apertura e a 300 px dentro una griglia a tre colonne, senza
   media query e senza sfocarsi come farebbe uno `scale()`.
   ========================================================================== */

.scena-wrap { container-type: inline-size; width: 100%; }

.scena {
  font-family: var(--font);
  font-size: 1.35cqw;
  line-height: 1.45;
  color: var(--s-testo);
  background: var(--s-sfondo);
  overflow: hidden;
  user-select: none;
}
/* Sotto una certa larghezza il testo diventerebbe illeggibile: si ferma li',
   e il contenitore scorre. Meglio una schermata tagliata ma leggibile che una
   completa e indecifrabile. */
@container (max-width: 30rem) { .scena { font-size: .42rem; } }
@container (min-width: 62rem) { .scena { font-size: .84rem; } }

/* Se il browser non conosce i container query (Safari vecchi), si ripiega su
   una misura fissa: la scena resta usabile, solo meno elastica. */
@supports not (container-type: inline-size) {
  .scena { font-size: .62rem; }
}

/* --- Palette: Pannello Pizzeria (chiaro caldo) ---------------------------- */
.scena--pannello {
  --s-sfondo:  #F6F1E9;
  --s-carta:   #FFFFFF;
  --s-riga:    #FAF9F7;
  --s-chip:    #F5F0E8;
  --s-bordo:   #E7E2DB;
  --s-testo:   #1C1917;
  --s-testo-2: #57504A;
  --s-testo-3: #7C736B;
  --s-verde:   #1FAA32;
  --s-arancio: #FF9D00;
  --s-ambra:   #F0A824;
  --s-rosso:   #D92D20;
  --s-blu:     #2B6CD4;
  --s-nav:     #12110F;
  --s-nav-2:   #1D1A17;
}

/* --- Palette: Monitor cucina (scuro) -------------------------------------- */
.scena--cucina {
  --s-sfondo:  #14100E;
  --s-carta:   #1F1A17;
  --s-carta-2: #2B2420;
  --s-bordo:   #3A3430;
  --s-testo:   #F6F1E9;
  --s-testo-2: #B9B1A8;
  --s-testo-3: #8B837B;
  --s-verde:   #2FBF4A;
  --s-arancio: #FF9D00;
  --s-rosso:   #FF5C4D;
}

/* --- Palette: App Cliente (nero pieno) ------------------------------------ */
.scena--cliente {
  --s-sfondo:  #090A09;
  --s-carta:   #171817;
  --s-carta-2: #1D1E1D;
  --s-bordo:   #262726;
  --s-testo:   #FFFFFF;
  --s-testo-2: #B0B0B0;
  --s-testo-3: #7B7C7B;
  --s-arancio: #FF9800;
  --s-arancio-su: #23140A;
  --s-verde:   #2FBF4A;
  --s-bruno:   #3A1F08;
  --s-rosso:   #FF5C4D;
}

/* --- Palette: App Consegne (scuro) ---------------------------------------- */
.scena--rider {
  --s-sfondo:  #0E0F0E;
  --s-carta:   #1A1B1A;
  --s-carta-2: #212321;
  --s-bordo:   #323632;
  --s-testo:   #FFFFFF;
  --s-testo-2: #D6D8D6;
  --s-testo-3: #A5A5A5;
  --s-verde:   #22C55E;
  --s-verde-bg: rgba(34,197,94,.16);
  --s-verde-fg: #6EE7A3;
  --s-arancio: #FF9800;
  --s-arancio-bg: rgba(255,152,0,.16);
  --s-arancio-fg: #FFB74D;
  --s-arancio-ink: #2B1800;
  --s-rosso:   #F87171;
}

/* ==========================================================================
   Cornici
   ========================================================================== */

.cornice { position: relative; }

/* --- Browser -------------------------------------------------------------- */

.cornice--browser {
  border-radius: 14px;
  overflow: hidden;
  background: #E7E2DB;
  border: 1px solid rgba(28,25,23,.14);
  box-shadow: var(--ombra-3);
}
.sez--scura .cornice--browser, #hero .cornice--browser {
  background: #2B2420;
  border-color: rgba(255,255,255,.12);
}

.cromo {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .75rem;
  background: #EFEAE2;
  border-bottom: 1px solid rgba(28,25,23,.1);
}
.sez--scura .cromo, #hero .cromo { background: #241F1C; border-bottom-color: rgba(255,255,255,.08); }

.cromo__punti { display: flex; gap: .3rem; flex: none; }
.cromo__punti i { width: 9px; height: 9px; border-radius: 50%; background: rgba(28,25,23,.16); }
.sez--scura .cromo__punti i, #hero .cromo__punti i { background: rgba(255,255,255,.16); }

.cromo__url {
  flex: 1; min-width: 0;
  padding: .2rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-family: var(--mono); font-size: .6875rem; color: #7C736B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sez--scura .cromo__url, #hero .cromo__url { background: rgba(0,0,0,.35); color: #8B837B; }

/* --- Telefono -------------------------------------------------------------- */

.cornice--telefono {
  border-radius: 2.2rem;
  padding: .42rem;
  background: linear-gradient(160deg, #3A3430, #14100E);
  box-shadow: var(--ombra-3), inset 0 0 0 1px rgba(255,255,255,.09);
  /* `width: 100%` NON e' ridondante accanto a `max-width`.
     Con i soli margini automatici la cornice si dimensiona sul contenuto, e
     un'immagine che non ha ancora misure la fa collassare a nulla. Trappola
     gia' pagata anche nel pannello. */
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}
.cornice--telefono .scena-wrap { border-radius: 1.85rem; overflow: hidden; }

.barra-stato {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5em 1.4em .2em;
  font-size: .78em; font-weight: 700;
  color: var(--s-testo);
}
.barra-stato__seg { display: flex; align-items: center; gap: .35em; }
.barra-stato__seg i {
  display: block; width: .95em; height: .62em; border-radius: .12em;
  border: .1em solid currentColor; opacity: .8;
}
.barra-stato__seg i:last-child { width: 1.5em; }

/* La tacca. Disegnata, non un'immagine: si adatta con la scena. */
.notch {
  position: absolute; top: .42rem; left: 50%; transform: translateX(-50%);
  width: 32%; height: 1.5rem;
  background: linear-gradient(160deg, #2B2420, #14100E);
  border-radius: 0 0 1rem 1rem;
  z-index: 3;
}
.cornice--telefono .presa {
  height: .9em; display: grid; place-items: center;
  background: var(--s-sfondo);
}
.cornice--telefono .presa::after {
  content: ''; width: 32%; height: .18em; border-radius: 999px;
  background: var(--s-testo); opacity: .28;
}

/* --- Tablet ---------------------------------------------------------------- */

.cornice--tablet {
  border-radius: 1.1rem; padding: .55rem;
  background: linear-gradient(160deg, #3A3430, #14100E);
  box-shadow: var(--ombra-3), inset 0 0 0 1px rgba(255,255,255,.08);
}
.cornice--tablet .scena-wrap { border-radius: .7rem; overflow: hidden; }

/* ==========================================================================
   Cornici che ospitano una FOTOGRAFIA invece di un disegno

   Le schermate ricostruite si dimensionano da sole con i container query;
   una foto no, ha le sue proporzioni e vanno rispettate — altrimenti si
   riconosce subito che e' stata stirata, ed e' il tipo di dettaglio che fa
   sembrare improvvisato tutto il resto.
   ========================================================================== */

.schermata-img { display: block; width: 100%; height: auto; }

/* Tre misure per una schermata al centro della scheda.
   `grande` per il pannello (piu' densa, vuole tutta la riga), `medio` per il
   tablet della cucina, `telefono` per le due app. Sempre una sola: due
   schermate affiancate sono due francobolli. */

.schermo-grande { width: 100%; }
/* Deborda di poco sui grandi schermi: e' quel tanto che la fa leggere come
   «la cosa importante di questa sezione» invece che come un'illustrazione. */
@media (min-width: 1100px) {
  .schermo-grande { width: calc(100% + 4rem); margin-inline: -2rem; }
}

.schermo-medio   { width: min(100%, 62rem); margin-inline: auto; }
.schermo-telefono { width: min(100%, 26rem); margin-inline: auto; }
.schermo-telefono .cornice--telefono { max-width: none; }

/* Su schermo stretto una schermata da computer resta illeggibile comunque:
   invece di rimpicciolirla ancora, si lascia scorrere in orizzontale dentro
   il proprio contenitore — il corpo della pagina non si muove mai. */
@media (max-width: 620px) {
  .schermo-grande, .schermo-medio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .schermo-grande > .cornice, .schermo-medio > .cornice { min-width: 34rem; }
}

.cornice--foto .scena-wrap { background: #0E0F0E; line-height: 0; }

/* Nella cornice del telefono la foto si porta dietro la propria barra di
   stato e la propria presa: la cornice mette solo il bezel e la tacca.

   LA PROPORZIONE E' FISSA, e non e' un vezzo. Gli scatti veri arrivano da
   telefoni diversi — 852x1846 uno, 831x1615 l'altro — e due telefoni
   affiancati di altezza diversa non sembrano due modelli: sembrano un
   errore. La cornice li porta tutti a 9:19,5 e riempie l'avanzo con il
   fondo di quella app, che essendo quasi nero non si vede. */
.cornice--telefono.cornice--foto .scena-wrap {
  border-radius: 1.85rem;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #0B0B0B;
}
.cornice--telefono.cornice--foto .schermata-img {
  width: 100%;
  height: 100%;
  /* `contain` e non `cover`: tagliare i lati di uno scatto di interfaccia
     mangerebbe le schede, e si vedrebbe. Meglio due bande dello stesso
     colore del fondo. */
  object-fit: contain;
  border-radius: 1.85rem;
}

/* Il riempimento prende il fondo vero di ciascuna app. */
.cornice--telefono.cornice--cliente .scena-wrap { background: #090A09; }
.cornice--telefono.cornice--rider   .scena-wrap { background: #0E0F0E; }

.cornice--browser.cornice--foto .scena-wrap { border-radius: 0; }

/* ==========================================================================
   Pezzi comuni alle scene
   ========================================================================== */

.scena * { box-sizing: border-box; }
.scena b { font-weight: 700; }

.s-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.s-chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .18em .6em; border-radius: 999px;
  font-size: .82em; font-weight: 700; white-space: nowrap;
}

.s-punto { width: .5em; height: .5em; border-radius: 50%; flex: none; }

/* ==========================================================================
   Scena: Pannello — gli ordini a cartellini
   ========================================================================== */

.pann { display: grid; grid-template-columns: 11em 1fr; min-height: 26em; }

.pann__lato {
  background: var(--s-nav); color: #EDE7DF;
  padding: 1em .8em; display: flex; flex-direction: column; gap: 1.1em;
}
.pann__marchio { display: flex; align-items: center; gap: .5em; font-weight: 800; font-size: 1em; }
.pann__marchio i {
  width: 1.5em; height: 1.5em; border-radius: .4em; flex: none;
  background: var(--s-arancio);
}
.pann__gruppo { font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6E6660; margin-bottom: .5em; }
.pann__voce {
  display: flex; align-items: center; gap: .55em;
  padding: .42em .6em; border-radius: .5em;
  font-size: .92em; color: #C9C2BA;
}
.pann__voce--on { background: var(--s-nav-2); color: #fff; font-weight: 700; }
.pann__voce--on::before { content: ''; width: .2em; height: 1.1em; border-radius: 999px; background: var(--s-verde); margin-left: -.35em; }
.pann__voce i { width: .95em; height: .95em; border-radius: .25em; background: currentColor; opacity: .45; flex: none; }
.pann__voce--on i { opacity: .9; }
.pann__badge { margin-left: auto; background: var(--s-arancio); color: #2B1608; border-radius: 999px; padding: 0 .45em; font-size: .78em; font-weight: 800; }

.pann__corpo { padding: 1em 1.1em; display: flex; flex-direction: column; gap: .9em; min-width: 0; }

.pann__testa { display: flex; align-items: center; gap: .8em; }
.pann__titolo { font-size: 1.25em; font-weight: 800; letter-spacing: -.02em; }
.pann__aperto {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4em;
  background: rgba(31,170,50,.14); color: #157A26;
  padding: .25em .7em; border-radius: 999px; font-size: .82em; font-weight: 700;
}

.pann__kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55em; }
.kpi {
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-radius: .6em; padding: .6em .7em;
}
.kpi__t { font-size: .76em; color: var(--s-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__v { font-family: var(--mono); font-size: 1.3em; font-weight: 700; letter-spacing: -.03em; }
.kpi__d { font-size: .74em; font-weight: 700; color: #157A26; }

.pann__colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; align-items: start; min-height: 0; }
.col__testa {
  display: flex; align-items: center; gap: .45em;
  font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--s-testo-3); padding: 0 .15em .5em;
}
.col__n {
  background: var(--s-chip); color: var(--s-testo-2);
  border-radius: 999px; padding: 0 .5em; font-family: var(--mono); font-size: .95em;
}
.col__lista { display: grid; gap: .45em; }

.cartellino {
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-left: .22em solid var(--s-bordo);
  border-radius: .5em; padding: .55em .65em;
  display: grid; gap: .3em;
  box-shadow: 0 1px 2px rgba(28,25,23,.05);
}
.cartellino--domicilio { border-left-color: var(--s-blu); }
.cartellino--asporto   { border-left-color: var(--s-ambra); }
.cartellino--tavolo    { border-left-color: var(--s-verde); }
.cartellino--ritardo   { border-left-color: var(--s-rosso); background: #FFF8F7; }

.cartellino__r1 { display: flex; align-items: center; gap: .45em; }
.cartellino__n { font-family: var(--mono); font-weight: 700; font-size: .95em; }
.cartellino__ora { margin-left: auto; font-family: var(--mono); font-size: .82em; color: var(--s-testo-3); }
.cartellino__cli { font-size: .88em; color: var(--s-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartellino__r3 { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.cartellino__tot { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: .92em; }

.tag {
  font-size: .74em; font-weight: 700; padding: .1em .45em; border-radius: .3em;
  background: var(--s-chip); color: var(--s-testo-2);
}
.tag--dom { background: rgba(43,108,212,.13); color: #2050A8; }
.tag--asp { background: rgba(240,168,36,.18); color: #7A5405; }
.tag--tav { background: rgba(31,170,50,.14); color: #157A26; }
.tag--rit { background: rgba(217,45,32,.12); color: #A81E14; }

@container (max-width: 40rem) {
  .pann { grid-template-columns: 1fr; }
  .pann__lato { display: none; }
  .pann__kpi { grid-template-columns: repeat(2, 1fr); }
  .pann__colonne { grid-template-columns: repeat(2, 1fr); }
  .pann__colonne > :nth-child(3) { display: none; }
}

/* ==========================================================================
   Scena: Monitor cucina
   ========================================================================== */

.cuc { padding: .9em 1em; display: flex; flex-direction: column; gap: .8em; min-height: 22em; }
.cuc__testa { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.cuc__titolo { font-size: 1.15em; font-weight: 800; }
.cuc__ora { margin-left: auto; font-family: var(--mono); font-size: 1.05em; font-weight: 700; }

.cuc__reparti { display: flex; gap: .4em; flex-wrap: wrap; }
.reparto {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .75em; border-radius: 999px;
  border: 1px solid var(--s-bordo); background: var(--s-carta);
  font-size: .85em; font-weight: 700; color: var(--s-testo-2);
}
.reparto--on { background: var(--s-arancio); border-color: transparent; color: #2B1608; }
.reparto b { font-family: var(--mono); }

.cuc__colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; align-items: start; }
.cuc__col { display: grid; gap: .45em; }
.cuc__col-t { font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-testo-3); }

.riga-c {
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-radius: .5em; padding: .55em .65em; display: grid; gap: .28em;
}
.riga-c--lavoro { border-color: var(--s-arancio); background: var(--s-carta-2); }
.riga-c--ritardo { border-color: var(--s-rosso); }
.riga-c__r1 { display: flex; align-items: baseline; gap: .45em; }
.riga-c__q { font-family: var(--mono); font-weight: 700; color: var(--s-arancio); font-size: 1.05em; }
.riga-c__n { font-weight: 700; font-size: 1em; }
.riga-c__t { margin-left: auto; font-family: var(--mono); font-size: .85em; color: var(--s-testo-3); }
.riga-c--ritardo .riga-c__t { color: var(--s-rosso); font-weight: 700; }
.riga-c__mod { font-size: .82em; color: var(--s-testo-2); }
.riga-c__mod i { font-style: normal; color: var(--s-verde); }
.riga-c__mod s { color: var(--s-rosso); text-decoration-thickness: 1px; }
.riga-c__ord { font-family: var(--mono); font-size: .76em; color: var(--s-testo-3); }

.cuc__fatto {
  margin-top: auto; align-self: flex-start;
  background: var(--s-verde); color: #05230F;
  padding: .45em 1em; border-radius: 999px; font-weight: 800; font-size: .9em;
}

@container (max-width: 34rem) {
  .cuc__colonne { grid-template-columns: repeat(2, 1fr); }
  .cuc__colonne > :nth-child(3) { display: none; }
}

/* ==========================================================================
   Scena: Consegne
   ========================================================================== */

.cons { padding: 1em 1.1em; display: flex; flex-direction: column; gap: .9em; min-height: 24em; }
.cons__testa { display: flex; align-items: center; gap: .7em; }
.cons__titolo { font-size: 1.2em; font-weight: 800; }
.cons__smista {
  margin-left: auto; background: var(--s-verde); color: #fff;
  padding: .35em .9em; border-radius: 999px; font-size: .85em; font-weight: 700;
}

.cons__colonne { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: .6em; align-items: start; }
.cons__col-t { font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-testo-3); margin-bottom: .5em; }
.cons__lista { display: grid; gap: .45em; }

.consegna {
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-radius: .5em; padding: .55em .65em; display: grid; gap: .3em;
}
.consegna__r1 { display: flex; align-items: center; gap: .4em; }
.consegna__n { font-family: var(--mono); font-weight: 700; font-size: .92em; }
.consegna__km { margin-left: auto; font-family: var(--mono); font-size: .8em; color: var(--s-testo-3); }
.consegna__ind { font-size: .85em; color: var(--s-testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.soldi-chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .16em .55em; border-radius: .35em;
  font-size: .8em; font-weight: 800; font-family: var(--mono);
}
.soldi-chip--incassa { background: var(--s-arancio); color: #2B1608; }
.soldi-chip--pagato  { background: rgba(31,170,50,.16); color: #157A26; }

/* Il countdown della proposta: la barra e' una transizione di larghezza,
   non un timer in JavaScript. */
.countdown { height: .3em; border-radius: 999px; background: var(--s-chip); overflow: hidden; }
.countdown i { display: block; height: 100%; border-radius: 999px; background: var(--s-arancio); width: var(--q, 65%); }

.rider-r {
  display: flex; align-items: center; gap: .5em;
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-radius: .5em; padding: .5em .6em;
}
.rider-r__a {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .8em; font-weight: 800; color: #fff;
}
.rider-r__n { font-size: .88em; font-weight: 700; }
.rider-r__d { font-size: .76em; color: var(--s-testo-3); }
.rider-r__c { margin-left: auto; text-align: right; }
.rider-r__c b { display: block; font-family: var(--mono); font-size: .9em; }
.rider-r__c span { font-size: .72em; color: var(--s-testo-3); }

@container (max-width: 40rem) {
  .cons__colonne { grid-template-columns: 1fr 1fr; }
  .cons__colonne > :nth-child(3) { display: none; }
}

/* ==========================================================================
   Scena: App Cliente
   ========================================================================== */

.cli { display: flex; flex-direction: column; min-height: 34em; }

.cli__hero {
  position: relative; padding: 1.1em 1.1em 1em;
  background: linear-gradient(180deg, var(--s-bruno), #150B03 72%, var(--s-sfondo));
}
.cli__testa { display: flex; align-items: center; gap: .5em; }
.cli__nome { font-size: 1.15em; font-weight: 800; }
.cli__stato {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35em;
  background: rgba(47,191,74,.18); color: #6EE7A3;
  padding: .18em .6em; border-radius: 999px; font-size: .76em; font-weight: 700;
}
.cli__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: 1em; }
.cli__info div {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  border-radius: .5em; padding: .4em .5em; text-align: center;
}
.cli__info span { display: block; font-size: .7em; color: var(--s-testo-3); }
.cli__info b { font-family: var(--mono); font-size: .92em; }

.cli__cerca {
  margin: .8em 1.1em 0; display: flex; align-items: center; gap: .5em;
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-radius: 999px; padding: .5em .9em;
  font-size: .85em; color: var(--s-testo-3);
}

.cli__cat { display: flex; gap: .4em; padding: .8em 1.1em 0; overflow: hidden; }
.cli__cat span {
  padding: .3em .8em; border-radius: 999px; font-size: .82em; font-weight: 700;
  background: var(--s-carta); color: var(--s-testo-2); white-space: nowrap;
}
.cli__cat span.on { background: var(--s-arancio); color: var(--s-arancio-su); }

.cli__lista { padding: .8em 1.1em; display: grid; gap: .55em; }
.prod {
  display: grid; grid-template-columns: 3.4em 1fr; gap: .7em;
  background: var(--s-carta); border-radius: .7em; padding: .55em; align-items: center;
}
.prod__f {
  width: 3.4em; height: 3.4em; border-radius: .5em; flex: none;
  background: linear-gradient(145deg, #4A2C10, #2A1808);
  position: relative; overflow: hidden;
}
.prod__f::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8A33C, #C2611B 60%, #8A3D10);
}
.prod__c { min-width: 0; display: grid; gap: .15em; }
.prod__n { font-size: .95em; font-weight: 700; display: flex; align-items: center; gap: .4em; }
.prod__d { font-size: .78em; color: var(--s-testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__r { display: flex; align-items: center; gap: .5em; }
.prod__p { font-family: var(--mono); font-weight: 700; font-size: .95em; color: var(--s-arancio); }
.prod__b { margin-left: auto; background: var(--s-arancio); color: var(--s-arancio-su); border-radius: 999px; padding: .12em .6em; font-size: .8em; font-weight: 800; }
.prod--out { opacity: .45; }
.prod__amata { background: var(--s-arancio); color: var(--s-arancio-su); font-size: .68em; font-weight: 800; padding: .05em .4em; border-radius: .25em; }
.prod__mezza { border: 1px solid var(--s-bordo); color: var(--s-testo-3); font-size: .68em; padding: .05em .35em; border-radius: .25em; }

.cli__barra {
  margin-top: auto; display: flex; align-items: center; gap: .6em;
  margin: auto 1.1em .3em; padding: .6em .8em;
  background: var(--s-arancio); color: var(--s-arancio-su);
  border-radius: .8em; font-weight: 800; font-size: .9em;
}
.cli__barra span:last-child { margin-left: auto; font-family: var(--mono); }

.cli__tab {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--s-bordo); padding: .5em 0 .3em;
}
.cli__tab div { display: grid; justify-items: center; gap: .2em; font-size: .68em; color: var(--s-testo-3); }
.cli__tab div.on { color: var(--s-arancio); }
.cli__tab i { width: 1.15em; height: 1.15em; border-radius: .3em; background: currentColor; opacity: .75; }

/* Stato dell'ordine */
.cli__stato-p { padding: 1.1em; display: grid; gap: .9em; }
.tappe { display: grid; gap: 0; }
.tappa-o { display: grid; grid-template-columns: 1.5em 1fr; gap: .6em; }
.tappa-o__p { display: grid; justify-items: center; }
.tappa-o__p i { width: .85em; height: .85em; border-radius: 50%; background: var(--s-bordo); }
.tappa-o__p b { width: 1.5px; flex: 1; background: var(--s-bordo); min-height: 1.3em; }
.tappa-o--ok .tappa-o__p i { background: var(--s-verde); }
.tappa-o--ok .tappa-o__p b { background: var(--s-verde); }
.tappa-o--ora .tappa-o__p i { background: var(--s-arancio); box-shadow: 0 0 0 .25em rgba(255,152,0,.2); }
.tappa-o__c { padding-bottom: .9em; }
.tappa-o__t { font-size: .9em; font-weight: 700; }
.tappa-o__o { font-family: var(--mono); font-size: .78em; color: var(--s-testo-3); }
.tappa-o:not(.tappa-o--ok):not(.tappa-o--ora) .tappa-o__t { color: var(--s-testo-3); font-weight: 500; }

/* ==========================================================================
   Scena: App Consegne
   ========================================================================== */

.rid { display: flex; flex-direction: column; min-height: 34em; }

.rid__testa { padding: .9em 1.1em .7em; display: flex; align-items: center; gap: .6em; }
.rid__t { font-size: 1.15em; font-weight: 800; }
.rid__a { margin-left: auto; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--s-arancio); color: var(--s-arancio-ink); display: grid; place-items: center; font-size: .78em; font-weight: 800; }

.rid__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; padding: 0 1.1em; }
.rid__kpi div { background: var(--s-carta); border: 1px solid var(--s-bordo); border-radius: .55em; padding: .5em; text-align: center; }
.rid__kpi span { display: block; font-size: .7em; color: var(--s-testo-3); }
.rid__kpi b { font-family: var(--mono); font-size: 1.05em; }
.rid__kpi div.contante b { color: var(--s-arancio-fg); }

.rid__ritira {
  margin: .8em 1.1em 0; padding: .55em .8em; border-radius: .6em;
  background: var(--s-verde-bg); border: 1px solid rgba(34,197,94,.3);
  display: flex; align-items: center; gap: .5em; font-size: .85em;
}
.rid__ritira b { margin-left: auto; color: var(--s-verde-fg); font-weight: 800; }

.rid__lista { padding: .8em 1.1em; display: grid; gap: .5em; }

.fermata {
  background: var(--s-carta); border: 1px solid var(--s-bordo);
  border-left: .25em solid var(--s-bordo);
  border-radius: .6em; padding: .6em .7em; display: grid; gap: .3em;
}
.fermata--incassa { border-left-color: var(--s-arancio); }
.fermata--pagato  { border-left-color: var(--s-verde); }
.fermata--ritardo { border-left-color: var(--s-rosso); }
.fermata__r1 { display: flex; align-items: center; gap: .45em; }
.fermata__n { font-family: var(--mono); font-weight: 700; font-size: .9em; }
.fermata__km { margin-left: auto; font-family: var(--mono); font-size: .78em; color: var(--s-testo-3); }
.fermata__ind { font-size: .88em; font-weight: 600; }
.fermata__cli { font-size: .78em; color: var(--s-testo-3); }
.fermata__r3 { display: flex; align-items: center; gap: .4em; margin-top: .15em; }

.soldi {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2em .6em; border-radius: .4em;
  font-family: var(--mono); font-size: .84em; font-weight: 800;
}
.soldi--incassa { background: var(--s-arancio-bg); color: var(--s-arancio-fg); }
.soldi--pagato  { background: var(--s-verde-bg); color: var(--s-verde-fg); }

.fermata__az { margin-left: auto; display: flex; gap: .3em; }
.fermata__az i { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--s-carta-2); border: 1px solid var(--s-bordo); }

/* La proposta con il conto alla rovescia */
.offerta {
  margin: auto 1.1em .8em; padding: .8em;
  background: var(--s-carta); border: 1px solid var(--s-arancio);
  border-radius: .8em; display: grid; gap: .5em;
}
.offerta__t { font-size: .95em; font-weight: 800; display: flex; align-items: center; gap: .5em; }
.offerta__s { margin-left: auto; font-family: var(--mono); color: var(--s-arancio-fg); font-weight: 800; }
.offerta__b { height: .3em; border-radius: 999px; background: var(--s-carta-2); overflow: hidden; }
.offerta__b i { display: block; height: 100%; background: var(--s-arancio); border-radius: 999px; width: var(--q, 60%); }
.offerta__az { display: grid; grid-template-columns: 1fr auto; gap: .4em; }
.offerta__si { background: var(--s-verde); color: #05230F; border-radius: .5em; padding: .45em; text-align: center; font-weight: 800; font-size: .85em; }
.offerta__no { border: 1px solid var(--s-bordo); color: var(--s-testo-3); border-radius: .5em; padding: .45em .8em; font-size: .85em; }

.rid__tab {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--s-bordo); padding: .5em 0 .3em;
}
.rid__tab div { display: grid; justify-items: center; gap: .2em; font-size: .7em; color: var(--s-testo-3); }
.rid__tab div.on { color: var(--s-arancio); }
.rid__tab i { width: 1.15em; height: 1.15em; border-radius: .3em; background: currentColor; opacity: .75; }

/* ==========================================================================
   L'esplicativo dell'importazione con l'AI

   Vive dentro una sezione scura, quindi legge i token della sezione
   (--superficie, --linea, --testo-2) invece di avere i propri colori: se un
   giorno la sezione diventasse chiara, questo si adeguerebbe da solo.
   ========================================================================== */

.demo {
  border: 1px solid var(--linea);
  border-radius: var(--r4);
  background: var(--superficie);
  overflow: hidden;
}

.demo__passi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--linea);
}
.demo__passo {
  display: grid; gap: .15rem; justify-items: start;
  padding: var(--s4) var(--s4);
  text-align: left; color: var(--testo-3);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.demo__passo + .demo__passo { border-left: 1px solid var(--linea); }
.demo__passo[aria-selected="true"] {
  color: var(--testo); border-bottom-color: var(--arancio);
  background: color-mix(in srgb, var(--arancio) 8%, transparent);
}
.demo__n { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; color: var(--accento); }
.demo__t { font-size: .875rem; font-weight: 700; line-height: 1.3; }

@media (max-width: 700px) {
  .demo__passi { grid-template-columns: repeat(2, 1fr); }
  .demo__passo:nth-child(3) { border-left: 0; }
  .demo__passo:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
  .demo__t { font-size: .8125rem; }
}

.demo__scena { padding: var(--s6); min-height: 24rem; }
.demo__pan[hidden] { display: none; }
.demo__due { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 860px) { .demo__due { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.demo__piede { padding: var(--s4) var(--s6); border-top: 1px solid var(--linea); }

/* --- Passo 1: le pagine del menu --------------------------------------- */

.demo__scelte { display: flex; flex-wrap: wrap; gap: var(--s3); }
.demo__scelta {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border: 1.5px solid var(--linea); border-radius: var(--pillola);
  font-size: .875rem; font-weight: 700; color: var(--testo-2);
  transition: border-color .15s ease, color .15s ease;
}
.demo__scelta--on { border-color: var(--arancio); color: var(--arancio); }

/* La carta vera, leggermente storta come una foto scattata al volo.

   Il contenitore resta un BLOCCO e la foto si centra con `margin-inline`.
   Con `display: grid; place-items: center` il contenitore si dimensiona sul
   contenuto, e li' dentro una `width: 100%` su un `<img>` non ancora
   scaricata risolve a zero: la foto spariva. E' lo stesso difetto delle
   cornici dei telefoni, vedi il commento in `schermata_img()`. */
.demo__carte { display: block; }
.carta-foto {
  width: 100%; max-width: 24rem; height: auto;
  margin-inline: auto;
  border-radius: var(--r2);
  box-shadow: var(--ombra-3);
  transform: rotate(-1.5deg);
}
/* --- Passo 2: la lettura ------------------------------------------------- */

.demo__avanz { display: grid; gap: var(--s2); }
.demo__barra { height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.demo__barra i { display: block; height: 100%; border-radius: 999px; background: var(--arancio); width: 0; }

.demo__json {
  font-family: var(--mono); font-size: .75rem; line-height: 1.6;
  background: #0F0D0C; color: #C9C2BA;
  border: 1px solid var(--linea); border-radius: var(--r2);
  padding: var(--s4); overflow-x: auto;
  /* L'altezza e' fissa: se crescesse mentre il testo si scrive, tutta la
     sezione sotto ballerebbe a ogni carattere. */
  min-height: 18rem; white-space: pre;
}

/* --- Passo 3: la revisione ------------------------------------------------ */

.demo__filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.demo__spunta { display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; color: var(--testo-2); cursor: pointer; }
.demo__spunta input { width: 18px; height: 18px; accent-color: var(--arancio); }

.tab-ai { width: 100%; min-width: 44rem; font-size: .8125rem; }
.tab-ai th {
  text-align: left; padding: var(--s2) var(--s3);
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-3); border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tab-ai td { padding: var(--s3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tab-ai tbody tr[hidden] { display: none; }

/* La casella incerta. Il colore da solo non basterebbe: c'e' anche il bordo
   tratteggiato, perche' un daltonico deve vedere quale cella controllare. */
.cella-bassa {
  background: color-mix(in srgb, var(--arancio) 16%, transparent);
  border: 1.5px dashed var(--arancio);
  border-radius: var(--r1);
  cursor: text;
}
.cella-bassa--corretta {
  background: color-mix(in srgb, var(--verde) 16%, transparent);
  border-color: var(--verde); border-style: solid;
}

.all-chip, .prezzo-chip {
  display: inline-block; padding: .1rem .4rem; border-radius: var(--r1);
  font-size: .6875rem; margin-right: .2rem;
  background: color-mix(in srgb, var(--testo) 10%, transparent);
  color: var(--testo-2);
}
.prezzo-chip { font-family: var(--mono); }

.conf { display: inline-block; width: 3rem; height: 5px; border-radius: 999px; background: var(--linea); overflow: hidden; vertical-align: middle; margin-right: var(--s2); }
.conf i { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
tr[data-bassa="1"] .conf i { background: var(--arancio); }

/* --- Passo 4: il catalogo -------------------------------------------------- */

.demo__catalogo { display: grid; gap: var(--s2); }
.cat-riga {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--linea); border-radius: var(--r2);
  background: color-mix(in srgb, var(--testo) 4%, transparent);
  opacity: .25; transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.cat-riga--entrata { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.cat-riga--agg     { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--arancio) 55%, transparent); }
.cat-riga__n { font-weight: 700; font-size: .9375rem; }
.cat-riga__p { font-weight: 700; }

/* ==========================================================================
   Scontrino 80 mm
   ========================================================================== */

.scontrino-wrap { display: grid; gap: var(--s4); justify-items: center; }

/* La foto dello scontrino, nella scheda «Su carta».

   Niente ombra e niente bordo strappato disegnati da qui: la fotografia si
   porta dietro i suoi, veri. Aggiungerne altri sopra darebbe due strappi e due
   ombre, che e' il modo piu' rapido per far sembrare finta una foto vera.

   L'angolo appena smussato serve a una cosa sola: il fondo dello scatto
   (#F3F1EE) e il crema della pagina (#FAF6EF) non sono lo stesso colore, e uno
   spigolo netto disegnerebbe il rettangolo. Con 12px di raggio lo stacco
   diventa il bordo di una fotografia, che e' quello che e'. */
.scontrino-foto { width: 100%; max-width: 25rem; }
.scontrino-foto img { width: 100%; height: auto; border-radius: var(--r2); }

.scontrino {
  /* 48 caratteri e' la larghezza vera di una termica da 80 mm. Non e' un
     numero scelto per estetica: e' quanto ci sta sulla carta.

     Il margine interno va SOMMATO ai 48 caratteri, non sottratto: con il
     `box-sizing: border-box` del progetto, `width: 48ch` secco lasciava al
     testo 48ch meno 2,2rem, cioe' una quarantina di caratteri. Le righe
     andavano a capo dove sulla carta non vanno, e quel poco che sporgeva
     tirava fuori le barre di scorrimento. */
  --sc-pad: 1.1rem;
  width: calc(48ch + var(--sc-pad) * 2);
  max-width: 100%;
  font-family: var(--mono);
  font-size: clamp(.62rem, .45rem + .5vw, .78rem);
  line-height: 1.55;
  white-space: pre-wrap;
  /* Niente puo' sporgere, quindi non serve nessuna barra: su un pezzo di
     carta finto una barra di scorrimento rompe l'illusione e basta. */
  overflow-wrap: anywhere;
  background: #FDFCFA;
  color: #1C1917;
  padding: 1.6rem var(--sc-pad) 2.2rem;
  box-shadow: var(--ombra-2);
  position: relative;
}
/* Il bordo strappato in basso e in alto: due maschere a zig-zag. */
.scontrino::before, .scontrino::after {
  content: ''; position: absolute; left: 0; right: 0; height: 8px;
  background: #FDFCFA;
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
}
.scontrino::before { top: -7px; }
.scontrino::after  { bottom: -7px; }

/* Variante «a video»: la stessa identica impaginazione dentro il pannello.
   E' il punto della sezione — l'anteprima e la carta coincidono. */
.scontrino--video {
  background: var(--scuro-2); color: var(--su-scuro);
  border: 1px solid var(--scuro-bordo); border-radius: var(--r2);
  box-shadow: none; padding: 1.1rem;
}
.scontrino--video::before, .scontrino--video::after { display: none; }

.scontrino b { font-weight: 700; }
.scontrino .grande { font-size: 1.5em; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.scontrino .centrato { display: block; text-align: center; }
.scontrino .copia { color: var(--rosso); font-weight: 700; }


/* ==========================================================================
   I riquadri che aprono la schermata, e la lente che la mostra a tutto schermo.

   Il riquadro resta un <article> normale con dentro un link: il bersaglio
   pero' e' la scheda intera, allargata con uno pseudo-elemento. Su un telefono
   tre parole in fondo a un riquadro sono un bersaglio che si sbaglia.
   ========================================================================== */

.scheda--apre {
  position: relative;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  /* In colonna per poter spingere il link in fondo: le spiegazioni hanno
     lunghezze diverse, e senza questo «Guarda la schermata» sta a un'altezza
     diversa in ogni riquadro della stessa riga. */
  display: flex;
  flex-direction: column;
}
/* Stessa specificita' di `.scheda > * + *`, che vince sul margine normale
   perche' questo foglio arriva dopo `sito.css`. */
.scheda--apre > .scheda__apri { margin-top: auto; padding-top: var(--s4); }
.scheda--apre:hover {
  border-color: color-mix(in srgb, var(--accento) 45%, var(--linea));
  box-shadow: var(--ombra-2);
}
@media (prefers-reduced-motion: no-preference) {
  .scheda--apre:hover { transform: translateY(-2px); }
}

.scheda__apri {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--accento); font-weight: 700; font-size: .875rem;
  text-decoration: none;
}
/* Lo strato invisibile che porta il clic su tutta la scheda. C'e' un solo
   link per riquadro, quindi non copre niente di cliccabile. */
.scheda__apri::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r3);
}

/* Il fuoco va segnato sulla scheda, non sulle tre parole: e' quella la zona
   che si attiva premendo Invio. Dove `:has()` non c'e' resta il contorno
   normale del link, che e' comunque visibile. */
@supports selector(:has(*)) {
  .scheda--apre:has(.scheda__apri:focus-visible) {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
  }
  .scheda__apri:focus-visible { outline: none; }
}

/* --- La lente ------------------------------------------------------------ */

/* Nessun `position` qui: una finestra modale la posiziona il browser, e
   metterci mano vuol dire ritrovarsela in un angolo.

   Il `margin: auto` invece serve, e non e' un vezzo: e' cosi' che una modale
   si centra dentro `inset: 0`, e l'azzeramento dei margini in cima a
   `sito.css` lo porta via insieme a tutti gli altri. Senza, la lente si apre
   incollata all'angolo in alto a sinistra. */
.lente {
  width: min(96vw, 1400px);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--su-scuro);
  overflow: visible;
}
.lente::backdrop { background: rgba(28, 25, 23, .84); }

/* Le schermate del pannello sono larghe, quelle delle due app di telefono sono
   alte. Una verticale dentro una finestra da 1400 px sarebbe una striscia in
   mezzo al nero: la classe la mette `lente.js` guardando le proporzioni.

   Qui la misura la detta l'ALTEZZA: la larghezza si ricava dal rapporto vero
   della foto, che `lente.js` passa in `--rapporto`. NON si usa `width: auto`
   per lasciar stringere il browser sul contenuto — dentro un contenitore che
   si dimensiona sul contenuto un `<img>` risolve a zero e si porta dietro
   tutta la finestra. E' lo stesso difetto gia' pagato con le cornici dei
   telefoni, vedi il commento in `schermata_img()`. */
.lente--verticale { width: min(92vw, calc(84dvh * var(--rapporto, .52))); }

.lente__figura { margin: 0; }

.lente__img {
  display: block;
  width: 100%; height: auto;
  max-height: 84vh;
  max-height: 84dvh;
  /* Con il `max-height` che morde, l'altezza si accorcia ma la larghezza
     resta: `contain` rimette la proporzione, e quello che avanza lo riempie
     il fondo scuro — che sopra questo sfondo non si vede. */
  object-fit: contain;
  border-radius: var(--r3);
  background: var(--scuro-2);
  box-shadow: var(--ombra-3);
}

.lente__nome {
  margin-top: var(--s3);
  text-align: center;
  font-size: .9375rem; font-weight: 700;
  color: var(--su-scuro);
}

/* Fisso allo schermo e non alla finestra: la finestra sta nello strato in
   cima, quindi `fixed` lo disegna comunque sopra lo sfondo scurito, e il
   bottone non se ne va se l'immagine e' piu' alta dello schermo. */
.lente__chiudi {
  position: fixed; top: var(--s4); right: var(--s4); z-index: 2;
  width: 44px; height: 44px; border-radius: var(--pillola);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(28, 25, 23, .72);
  color: #fff;
  cursor: pointer;
}
.lente__chiudi:hover { background: var(--ink); }

/* La pagina sotto non deve scorrere mentre la lente e' aperta. */
.lente-aperta, .lente-aperta body { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .lente[open] { animation: lente-entra .18s ease-out; }
  @keyframes lente-entra {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
  }
}