@import url('font.css');

/* ---------------------------------------------------------------- token --
   Antracite, verde e nude vengono da mobile/src/theme/variables.css: sono i
   colori che gli agenti hanno già davanti ogni giorno. Cambia come si usano.
   Il verde è un SEGNALE, non una superficie: acido su grandi campiture, e su
   un tablet in luce esterna diventa sgradevole.                            */

:root {
   /* LA COLONNA DELLA QUANTITA'. 224px e' il gruppo meno-numero-piu' (120)
      piu' il pulsante «Aggiorna»: e' la misura che serve a chi NON ha
      JavaScript, l'unico a cui quel pulsante resta. Quando c'e', `portale.js`
      lo toglie e stringe questa a 134 — i 90 che si liberano vanno al nome
      dell'articolo, che e' la colonna elastica. */
   --colonna-qta: 224px;
   --inchiostro:      #2a3439;   /* testo, barre, bottoni pieni */
   --inchiostro-nav:  #222c31;   /* la seconda fascia della testata */
   --inchiostro-60:   #5f6d73;   /* dati e micro-etichette — 5,3:1 su bianco */
   --inchiostro-50:   #6b787d;   /* didascalie secondarie */
   --inchiostro-35:   #9fb0b6;   /* voce di navigazione spenta, su fondo scuro */
   --segnaposto:      #b6bfc2;   /* SOLO i segnaposto delle foto, mai un dato */

   --linea:           rgba(42, 52, 57, .09);   /* filo fra le righe di tabella */
   --linea-blocco:    rgba(42, 52, 57, .14);   /* bordo dei blocchi bianchi */
   --linea-campo:     #b9c1c4;                 /* bordo dei campi */
   --linea-forte:     #c6cdcf;                 /* bordo dei bottoni secondari */

   /* QUANTO E' LARGA LA FOTOGRAFIA DEL COLORE nella sua riga. E' una variabile
      perche' e' un numero che si guarda a video e si corregge: il colore e'
      meta' di quello che un ottico sceglie, e a 52px — la misura con cui era
      nata — un nero e un blu si distinguevano solo leggendo il nome.

      L'altezza NON e' un secondo numero: la riquadratura segue le proporzioni
      delle fotografie, che sono 900x601. Nel quadrato che era prima l'occhiale
      riempiva poco piu' di meta' del riquadro e il resto era bianco sopra e
      sotto — cioe' altezza di riga spesa per non mostrare niente. */
   --miniatura:       120px;

   /* La colonna di destra sotto la tabella d'ordine — il riepilogo, e sotto i
      comandi di chiusura — e lo stacco dalla colonna di sinistra. Sono qui e
      non nelle due regole perche' devono restare uguali: e' quello che tiene i
      bordi dei due blocchi sulla stessa verticale. */
   --colonna-conti:   340px;
   --stacco-conti:    20px;

   --carta:           #ffffff;
   --fondo:           #eaeded;
   --servizio:        #f6f8f8;   /* intestazioni di tabella e zone secondarie */

   --segnale:         #8db600;   /* SOLO stato e contatore del carrello */
   --segnale-scuro:   #6d8d00;

   /* IL VERDE DEI PULSANTI, ed e' piu' scuro di quello del marchio per una
      ragione sola: ci va sopra il TESTO BIANCO. Su #8db600 il bianco fa
      2,4:1 ed e' illeggibile; su questo 4,9:1, sopra il 4,5 che serve. E' lo
      stesso verde, portato all'ombra che lo rende usabile come superficie. */
   /* IL COLORE DEI RICHIAMI COMMERCIALI — «Promo», «New Model», «New Color».
      Non sono stati da controllare come «Non Disponibile», che e' rosso, ne'
      cose da premere: sono etichette che l'azienda mette per far notare
      qualcosa, e vanno viste senza sembrare un comando.

      Un'avvertenza per chi lo cambia: ha quasi la stessa luminanza del verde
      delle azioni (1,03:1 fra loro), quindi in bianco e nero i due colori
      coincidono. A distinguerli e' la FORMA — i richiami stanno in contorno,
      le azioni sono piene — e quella distinzione non si puo' togliere. */
   --richiamo:        #8a6a00;

   /* L'ARANCIONE DEL «NON L'HAI ANCORA PREMUTO». E' l'unico colore del portale
      che serve a farsi guardare, non a dire cosa una cosa e': sta sul pulsante
      di una riga in cui l'agente ha scritto un numero e non l'ha applicato, e
      da li' se ne va appena lo preme. Col bianco fa 4,97:1, e stacca dal fondo
      della pagina di 4,2:1 — abbastanza da vedersi in fondo a un elenco lungo. */
   --urgente:         #c9400d;
   --urgente-cupo:    #a83309;

   /* IL COLORE DEI RICAMBI (04/11/2026). Serve a far vedere, scorrendo
      l'elenco dei colori, QUALI ne hanno: prima la fascia era grigia come
      un'intestazione di tabella e si notava solo leggendola.
      Perche' un colore nuovo e non uno di quelli che ci sono: il verde e il
      rosso sono gia' il verso dei comandi di quantita', l'arancione e' il
      «non l'hai ancora premuto», e `--richiamo` e' dell'azienda — «Promo»,
      «New Color» — e su una riga che ha entrambi i due significati si
      confonderebbero. Questo e' un petrolio spento, della stessa famiglia
      fredda dei grigi del portale: 5,9:1 su bianco. */
   --ricambi:         #2f6d7a;

   --azione:          #5e7a00;
   --azione-cupa:     #4f6800;   /* quando ci si passa sopra */
   --allerta:         #9e2b25;   /* scaduto e azioni distruttive — 7,4:1 su bianco */

   --testo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --dato:  'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

   --gutter: clamp(16px, 4vw, 32px);
}

/* Il NUDE `#ae847e`, terzo colore dell'impianto originale, è stato scartato dal
   cliente nella revisione della veste (17/09/2026) e sostituito dal rosso
   mattone: serviva a segnalare, e un rosa caldo non segnala niente accanto a un
   importo scaduto. Non va reintrodotto. */

/* --------------------------------------------------------------- basi --- */

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

/* `hidden` DEVE nascondere, sempre.
   L'attributo vale quanto un `display: none` dell'user agent, quindi qualunque
   regola nostra che imposti `display` su quell'elemento lo batte per
   specificità: `.riga-ordine .prezzi .senza-prezzo { display: block }` faceva
   comparire «Da concordare» accanto al prezzo su ogni riga, pur essendo
   l'attributo impostato correttamente. Da quando le pagine si aggiornano senza
   ricaricare, scoprire e nascondere elementi è il modo normale di lavorare: la
   regola vale per tutti, non solo per questo caso. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
   margin: 0;
   background: var(--fondo);
   color: var(--inchiostro);
   font-family: var(--testo);
   font-size: 16px;
   line-height: 1.45;
   font-synthesis-weight: none;
}

a { color: inherit; }

:focus-visible {
   outline: 2px solid var(--segnale-scuro);
   outline-offset: 2px;
   border-radius: 2px;
}

/* Le pagine che mostrano PRODOTTI stanno su bianco puro.
   Non è neutralità grafica: un fondo caldo o grigio falsa l'acetato havana e
   il cristallo, e il colore della montatura è metà di quello che l'ottico
   sceglie. Le pagine di servizio — ordine, scadenziario, cliente — restano
   sul grigio freddo, dove i blocchi bianchi si staccano. */
body.catalogo { background: var(--carta); }

/* ------------------------------------------------- scheda prodotto ---
   La schermata su cui si vende, e l'unica dove l'impaginazione è una scelta
   di merito e non di gusto.
   
   IL PROBLEMA: foto, misure, varianti e ricambi in una colonna sola. L'agente
   gira il tablet verso l'ottico per far vedere la montatura, poi deve scorrere
   per prendere l'ordine, e mentre scorre la montatura sparisce dallo schermo.
   
   LA SOLUZIONE: due colonne con mestieri diversi. A sinistra l'IDENTITÀ —
   quello che si mostra al cliente e che resta fermo — a destra l'AZIONE, dove
   si scorre e si preme. La colonna sinistra è fissa a 392px perché una
   fotografia che cambia larghezza da un modello all'altro fa sembrare gli
   occhiali di misure diverse.                                              */

.prodotto {
   display: grid;
   grid-template-columns: 392px minmax(0, 1fr);
   align-items: start;
   background: var(--carta);
}

.prodotto > .identita {
   border-right: 1px solid var(--linea-blocco);
   padding: 4px 30px 34px 0;
}

/* ------------------------------------- l'intestazione della scheda prodotto
   COMPATTA. Marchio, nome, descrizione e calibro inciso sono quattro righe di
   servizio prima della cosa per cui la scheda si apre — la fotografia e
   l'elenco dei colori — e con le misure del titolo di una pagina qualunque si
   mangiavano il primo terzo di schermo: il nome grande quanto un titolo, venti
   pixel sotto, altri quattordici prima della fascia, e nove dentro.

   Qui il nome resta il piu' grande della colonna, ma di poco: quello che deve
   saltare all'occhio e' l'occhiale, non come si chiama.                     */
.prodotto .identita > .etichetta { margin: 0 0 5px; }

.prodotto .identita .insegna {
   font-size: clamp(22px, 2.6vw, 27px);
   letter-spacing: .08em;
   margin: 0 0 6px;
}

.prodotto .identita .occhiello { margin: 0 0 10px; font-size: 13px; }

.prodotto .identita .fascia-calibro {
   padding: 6px 0;
   margin-top: 0;
}
.prodotto .identita .fascia-calibro .marcatura { font-size: 17px; }
.prodotto .identita .fascia-calibro .didascalia { line-height: 1.25; }

/* e la fotografia comincia subito sotto, invece che dopo un altro stacco */
.prodotto .identita-corpo { margin-top: 16px; }

/* Sotto i 900px le due colonne diventano una: la fotografia sopra, l'ordine
   sotto. È la larghezza dove 392px di colonna fissa lascerebbero all'elenco
   delle varianti meno spazio di quanto ne serve al prezzo e al pulsante. */
@media (max-width: 900px) {
   .prodotto { grid-template-columns: minmax(0, 1fr); }

   /* LA FOTOGRAFIA NON SI PRENDE TUTTA LA PRIMA SCHERMATA.
      A colonna singola il ritratto è largo quanto la pagina, e con le sue
      proporzioni fisse diventa alto in proporzione: su un tablet in verticale
      occupava quasi tutta la videata, e per arrivare alle varianti — cioè alla
      ragione per cui si apre la scheda — bisognava scorrere. Qui l'altezza la
      decide lo schermo, non la larghezza; l'immagine resta intera perché è
      `object-fit: contain`. */
   .prodotto .ritratto { aspect-ratio: auto; height: min(26vh, 280px); }

   /* PRIMA I COLORI DA ORDINARE, POI LE CARATTERISTICHE.
      Impilata, la colonna di sinistra metteva fra la fotografia e le varianti
      la tabella di genere, montatura, stile e materiali: sette righe da
      scorrere per arrivare a quello per cui la scheda si apre davanti al
      cliente, che è scegliere il colore e metterlo nell'ordine. Quella tabella
      si legge una volta per capire com'è fatta la montatura; i colori si
      toccano a ogni ordine.

      `display: contents` scioglie i due contenitori di sinistra, così i loro
      pezzi diventano celle della stessa griglia e si possono riordinare: le
      varianti salgono sopra, le caratteristiche scendono in fondo. Sopra i
      900px non cambia niente — le due colonne stanno affiancate e si vede
      tutto insieme.

      Il bordo che separava le due metà non può restare sull'elemento sciolto,
      che non disegna più nulla: passa alla striscia dei colori, che a quel
      punto è l'ultima cosa prima delle varianti. */
   .prodotto > .identita,
   .prodotto .identita-corpo { display: contents; }

   .prodotto > .azione { order: 1; }
   .prodotto .dossier { order: 2; padding-top: 22px; }

   .prodotto .colori {
      border-bottom: 1px solid var(--linea-blocco);
      padding-bottom: 22px;
      margin-bottom: 4px;
   }
   .prodotto .ritratto { margin-bottom: 18px; }
}

/* La fascia del calibro: il numero inciso dentro l'asta, trattato come
   l'iscrizione che è — grande, monospaziato, fra due fili. */
/* LA RIGA SOTTO IL NOME DEL MODELLO: descrizione e richiamo.
   Il bollo seguiva la parola separato da un solo spazio, e a quella misura —
   maiuscoletto dentro un riquadro — si incollava alla lettera precedente e
   cadeva fuori asse rispetto al testo accanto. Una riga flex con la BASE
   comune li mette sulla stessa linea e lo stacco e' un vero margine. */
.occhiello {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 3px 9px;
}

.fascia-calibro {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   border-top: 1px solid var(--inchiostro);
   border-bottom: 1px solid var(--inchiostro);
   padding: 9px 0;
   margin-top: 14px;
}
.fascia-calibro .marcatura {
   font-family: var(--dato);
   font-size: 19px;
   letter-spacing: .05em;
   color: var(--inchiostro);
}
.fascia-calibro .didascalia {
   /* 11px e non 8,5: sotto gli 11 un testo non si legge su un tablet in mano */
   font-size: 11px;
   font-weight: 500;
   letter-spacing: .16em;
   text-transform: uppercase;
   text-align: right;
   line-height: 1.5;
   color: var(--inchiostro-50);
}

/* La striscia dei colori sotto la foto: un colpo d'occhio su quanti ne
   esistono. Dove la variante ha una fotografia propria si mostra quella;
   dove non c'è, resta la sigla — nel gestionale il colore è un NOME, non un
   valore, quindi un campione cromatico vero non è ricavabile. */
/* quando il modello non ha né misure né scheda tecnica: lo si dice, invece
   di lasciare la colonna vuota e far pensare a un errore di caricamento */
.dossier .senza-dettagli {
   margin: 0;
   padding: 18px;
   font-size: 13px;
   color: var(--inchiostro-60);
   border: 1px dashed var(--linea-forte);
}

.colori {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
   gap: 12px 10px;
   margin-top: 16px;
}
/* La tessera del colore: la fotografia SOPRA e il nome SOTTO, non l'una al
   posto dell'altro. Quattro montature in fila si somigliano tutte — un nero e
   un blu scuro sono lo stesso rettangolino — e il nome e' l'unica cosa che
   dice quale sia il C03. Per questo il nome si legge INTERO e va a capo:
   troncato a «MATT BR…» non distingueva «Matt Brown» da «Matt Bronze».
   Le tessere riempiono la larghezza della colonna invece di restare piccole
   in un angolo (02/10/2026). */
.colori a {
   display: grid;
   grid-template-rows: auto auto;
   /* le righe in cima: in una riga di tessere dove un nome va a capo la
      tessera si allunga, e lo spazio in più finiva nel riquadro della foto,
      che per tenere le proporzioni si allargava oltre la colonna e toccava il
      vicino (02/10/2026) */
   align-content: start;
   gap: 5px;
   min-width: 0;
   text-decoration: none;
   font-family: var(--dato);
   font-size: 10.5px;
   line-height: 1.25;
   text-align: center;
   color: var(--inchiostro-60);
}

/* il riquadro e' intorno alla SOLA fotografia: prendendo anche il nome, la
   tessera cresceva in altezza e il bordo di quella scelta si leggeva come un
   campo di testo */
.colori a::before {
   content: '';
   grid-row: 1;
   grid-column: 1;
   width: 100%;
   aspect-ratio: 3 / 2;
   border: 1px solid rgba(42, 52, 57, .22);
   background: var(--carta);
}
.colori img {
   grid-row: 1;
   grid-column: 1;
   width: 100%;
   aspect-ratio: 3 / 2;
   height: auto;
   padding: 4px;
   box-sizing: border-box;
   object-fit: contain;
   mix-blend-mode: multiply;
}
.colori .quale {
   grid-row: 2;
   overflow-wrap: anywhere;
}

/* quella gia' nell'ordine: il bordo marcato sta sulla fotografia, e il nome
   si fa scuro — a quaranta pixel un bordo di un pixel in piu' non basta */
.colori a.presente::before { border-color: var(--inchiostro); border-width: 2px; }
.colori a.presente .quale { color: var(--inchiostro); font-weight: 700; }

/* La barra del totale, ancorata in fondo alla colonna d'azione: quanto c'è
   nell'ordine e quanto costa, senza doverlo andare a cercare. */
.barra-totale {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
   border-top: 2px solid var(--inchiostro);
   background: var(--servizio);
   padding: 20px 26px;
   margin-top: auto;
}
.barra-totale .quanti-pezzi {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .2em;
   text-transform: uppercase;
}
.barra-totale .quanti-pezzi::before {
   content: '';
   width: 10px;
   height: 10px;
   background: var(--segnale);
}
.barra-totale .somma {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-left: auto;
}
.barra-totale .somma .importo {
   font-family: var(--dato);
   font-size: 20px;
   color: var(--inchiostro);
}

/* --------------------------------------------- intestazione di pagina ---
   Titolo a sinistra, conteggio a destra, un filo forte sotto a chiudere.
   Compare in otto schermate su nove, ed è il pezzo che dà alle pagine la
   stessa impaginazione: prima il conteggio stava sotto i filtri, dove lo si
   leggeva dopo aver già guardato i risultati.                              */

.intestazione {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   border-bottom: 2px solid var(--inchiostro);
   padding-bottom: 10px;
   margin-bottom: 18px;
}

.intestazione > :first-child { min-width: 0; }
.intestazione .insegna { margin: 6px 0 0; }
.intestazione .etichetta { margin: 0; }

/* il conteggio è un DATO: monospaziato, come ogni numero del portale */
.conteggio {
   font-family: var(--dato);
   font-size: 13px;
   color: var(--inchiostro);
   margin: 0;
   white-space: nowrap;
}

/* --------------------------------------------------------- tipografia --- */

/* Eco del logo: maiuscolo largo, peso leggero, molta spaziatura. */
.insegna {
   font-size: 19px;
   font-weight: 350;
   font-stretch: 118%;
   letter-spacing: .15em;
   text-transform: uppercase;
   margin: 0 0 20px;
}

/* IL GRIGIO ERA QUELLO DEL FONDO SCURO. `--inchiostro-35` nasce per la
   testata antracite; qui queste etichette stanno su bianco e su #f6f8f8, dove
   fanno 2,2:1 — misurato il 04/11/2026: «Colore», «Prezzo», «Pezzi» sopra
   l'elenco delle varianti e ogni voce della scheda tecnica erano sotto la
   soglia di leggibilita'. `--inchiostro-60` ne fa 5,3. La pagina di accesso,
   che ha il fondo scuro, si riprende il grigio chiaro poco piu' sotto. */
.etichetta {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
}

/* Il percorso di risalita in cima alla pagina («Marchi · MARCA»): è un comando
   che si preme, non una didascalia, e alla misura della micro-etichetta non si
   leggeva. Più grande e più scuro — il grigio di `.etichetta` è pensato per il
   fondo scuro della testata e su bianco sta sotto il contrasto minimo.
   Chiesto il 03/11/2026, per tutte le pagine che hanno il percorso. */
.etichetta.percorso {
   font-size: 14px;
   letter-spacing: .1em;
   color: var(--inchiostro-60);
}

.etichetta.percorso a {
   color: inherit;
   text-decoration: none;
}

.etichetta.percorso a:hover,
.etichetta.percorso a:focus-visible {
   text-decoration: underline;
}

/* La marcatura: come è incisa dentro l'asta — 52□18 140. */
.dato {
   font-family: var(--dato);
   font-size: 13px;
   letter-spacing: -.01em;
   color: var(--inchiostro-60);
}

.tenue { color: var(--inchiostro-60); }

/* ------------------------------------------------------------ insegna --- */

/* Il marchio è l'IMMAGINE dell'azienda, non una sua imitazione tipografica.
 *
 * Fino al 17/09/2026 «OMRI OPTICAL» era composto con il carattere del portale:
 * si scalava bene e non costava niente da scaricare, ma restava una copia
 * somigliante — spaziature e disegno delle lettere non sono quelli del logo
 * vero. Ora si usa il file, in bianco su trasparente perché tutti i posti dove
 * compare hanno il fondo antracite.
 *
 * Le regole tipografiche qui sotto restano: servono ancora se in una pagina il
 * marchio va scritto invece che mostrato. */
.logotipo {
   display: inline-grid;
   justify-items: stretch;
   line-height: 1;
   text-decoration: none;
   font-weight: 300;
   font-stretch: 105%;
}
.logotipo img {
   display: block;
   height: 38px;             /* quanto occupava il marchio composto */
   width: auto;
}
.logotipo.grande img { height: 74px; }
.logotipo b {
   font-size: 21px;
   font-weight: 300;
   letter-spacing: .06em;
}
.logotipo i {
   font-size: 10.5px;
   font-style: normal;
   letter-spacing: .385em;
   margin-top: 3px;
   text-indent: .385em;
   text-align: justify;
}

.logotipo i { text-align-last: justify; }

.logotipo.grande b { font-size: 38px; letter-spacing: .04em; }
.logotipo.grande i { font-size: 17px; letter-spacing: .44em; text-indent: .44em; margin-top: 6px; }

/* ------------------------------------------------- avanzamento di un lavoro ---
   La barra e la frase insieme: la frase dice quanti megabyte su quanti — che su
   una linea lenta e' l'unico modo di capire se sta andando avanti o si e'
   fermato — la barra dice a colpo d'occhio a che punto e'.                  */

.avanzamento-zona { margin: 0 0 18px; }

.avanzamento-barra {
   display: block;
   width: 100%;
   height: 8px;
   margin-bottom: 7px;
   border: 0;
   border-radius: 4px;
   background: var(--linea-blocco);
   appearance: none;
   overflow: hidden;
}

/* i due motori dei browser vogliono due selettori diversi, e non si possono
   unire in una regola sola: uno sconosciuto invalida tutta la dichiarazione */
.avanzamento-barra::-webkit-progress-bar { background: var(--linea-blocco); }
.avanzamento-barra::-webkit-progress-value {
   background: var(--azione);
   transition: width .2s ease-out;
}
.avanzamento-barra::-moz-progress-bar { background: var(--azione); }

/* SENZA `value` SI ANIMA DA SOLA: e' lo stato in cui il server sta ancora
   preparando l'archivio e una percentuale non esiste. I browser la disegnano
   gia' cosi' per conto loro, ma su fondo chiaro l'animazione predefinita quasi
   non si vede: qui e' una striscia che scorre. */
.avanzamento-barra:not([value]) {
   background: linear-gradient(90deg,
      var(--linea-blocco) 0%, var(--azione) 40%, var(--azione) 60%, var(--linea-blocco) 100%);
   background-size: 220% 100%;
   animation: aspetta 1.3s linear infinite;
}
.avanzamento-barra:not([value])::-webkit-progress-bar { background: none; }
.avanzamento-barra:not([value])::-moz-progress-bar { background: none; }

@keyframes aspetta {
   from { background-position: 110% 0; }
   to   { background-position: -110% 0; }
}

@media (prefers-reduced-motion: reduce) {
   .avanzamento-barra:not([value]) { animation: none; }
}

.avanzamento { margin: 0; font-size: 13px; color: var(--inchiostro-60); }

/* ------------------------------------------------------- informazioni ---
   La pagina che si apre quando qualcosa non va. Tutto centrato e in colonna,
   come nell'applicazione in uso: i due numeri sono la ragione per cui la si
   apre, e devono essere la prima cosa che si legge.                        */

.informazioni {
   text-align: center;
   padding-top: 4vh;
}

.informazioni .logotipo.grande { margin-bottom: 26px; }
.informazioni .insegna { margin: 0 0 24px; }

.recapiti {
   display: grid;
   gap: 10px;
   margin: 0 0 26px;
}

/* IL NUMERO E' UN BOTTONE, non un testo con sotto un link: lo si tocca col
   pollice mentre si tiene il tablet con l'altra mano, e un numero di telefono
   scritto in riga e' un bersaglio alto quindici pixel. */
.recapito {
   display: grid;
   gap: 3px;
   padding: 14px 18px;
   text-decoration: none;
   color: var(--inchiostro);
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-radius: 3px;
}
.recapito:hover { border-color: var(--inchiostro); }

.recapito .come {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
}
.recapito .numero {
   font-family: var(--dato);
   font-size: 19px;
}

.informazioni .nota { margin: 0 0 14px; }
.informazioni .versione { margin: 0 0 40px; font-size: 13px; color: var(--inchiostro-60); }

/* Chi ha fatto il programma. In fondo e in piccolo, come nell'app: e'
   un'attribuzione, non un'informazione di cui l'agente abbia bisogno. */
.firma {
   display: grid;
   gap: 8px;
   justify-items: center;
   padding-top: 26px;
   border-top: 1px solid var(--linea);
}
.firma .come {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--inchiostro-35);
}
.firma img { display: block; height: 34px; width: auto; }

/* --------------------------------------------------------------- barra -- */

.barra {
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   gap: 20px;
   min-height: 60px;
   padding: 8px var(--gutter);
   background: var(--carta);
   border-bottom: 1px solid var(--linea);
}

.barra .spazio { flex: 1 1 auto; }

.barra .contesto {
   display: flex;
   align-items: baseline;
   gap: 10px;
   min-width: 0;
}

.barra .cliente {
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 42vw;
}

.barra a.minuta {
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--inchiostro-35);
   text-decoration: none;
   padding: 10px 2px;
}
.barra a.minuta:hover { color: var(--inchiostro); }

/* ------------------------------------------------------------ impianto -- */

main {
   max-width: 1040px;
   margin: 0 auto;
   padding: 28px var(--gutter) 72px;
}

main.stretta { max-width: 380px; padding-top: 12vh; }

/* UNA PAGINA DA COMPILARE, non da scorrere: resta stretta e CENTRATA anche
   dove il resto del portale si allarga. Sono venti campi in quattro riquadri, e
   a tutta larghezza su un tablet finivano incollati al bordo sinistro con
   quattrocento pixel di vuoto a destra — la pagina sembrava storta. */
main.media { max-width: 900px; }

/* Fino alla larghezza di un tablet il contenuto occupa tutto lo schermo: i
   1040px qui sopra sono la misura comoda per LEGGERE su un monitor grande,
   dove una riga larga tutto lo schermo si segue male, ma su un 1280 in mano
   all'agente diventano due fasce vuote ai lati e un catalogo piu' stretto di
   quanto potrebbe essere. Sopra i 1400 il limite torna, che e' il caso del
   desktop in ufficio. */
@media (max-width: 1400px) {
   main:not(.stretta):not(.media) { max-width: none; }
}

/* Le pagine con una tabella hanno bisogno di piu' spazio dei 1040px pensati
   per la lettura: con sei colonne, i nomi lunghi venivano troncati e il
   pulsante finiva oltre il bordo, costringendo a scorrere di lato. */
main.larga { max-width: 1440px; }

/* TUTTA LA LARGHEZZA DELLO SCHERMO, senza limite. La usano le pagine con una
   TABELLA — carrello, dettaglio ordine, i due storici, scadenziario, elenco
   clienti, carrelli in sospeso: colonne di numeri incolonnati non si «leggono»
   come un testo, si scorrono con l'occhio in verticale, quindi la ragione per
   cui esiste un limite (una riga lunga si segue male) qui non vale. A 1440 su
   un monitor grande restavano 480 pixel di vuoto per parte mentre le colonne
   si stringevano, e su un tablet la tabella andava scorsa di lato.
   Il catalogo e le statistiche restano «larga»: li' si guarda, non si legge
   una riga per volta. */
main.piena { max-width: none; }

/* e il margine laterale si stringe: su una tabella quei trentadue pixel per
   parte sono spazio tolto ai dati, mentre su un testo servivano a non farlo
   correre da un bordo all'altro */
@media (min-width: 900px) {
   main.larga,
   main.piena { padding-left: 16px; padding-right: 16px; }
}

/* -------------------------------------------------------------- elenco -- */

.elenco {
   background: var(--carta);
   border: 1px solid var(--linea);
}
.elenco .voce:last-child { border-bottom: 0; }

.voce {
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   min-height: 60px;
   padding: 13px 16px;
   border: 0;
   border-bottom: 1px solid var(--linea);
   background: none;
   font: inherit;
   color: inherit;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
}
.voce:hover { background: var(--servizio); }
.voce .nome { font-size: 16px; font-weight: 500; }
.voce .sotto { display: block; margin-top: 2px; }
.voce .coda { margin-left: auto; padding-left: 12px; white-space: nowrap; }

/* ------------------------------------------------------------- marchi --- */

/* Le tessere sono separate da un FILO, non da spazio: il fondo della griglia
   è la linea, le celle ci stanno sopra con un pixel di distacco. Su un fondo
   bianco lo stacco si legge lo stesso e il catalogo sta insieme come una
   tavola invece che come tante schede sparse.

   Il bordo esterno lo dà la griglia, così dove le tessere non riempiono
   l'ultima riga non resta un rettangolo grigio a metà. */
/* I fili fra le tessere li porta OGNI TESSERA, con un'ombra piatta di un
   pixel, e non piu' il fondo della griglia che traspariva dallo spazio fra
   loro. Quel trucco disegnava i fili solo dove c'era una tessera a coprire il
   resto: quando l'ultima riga era incompleta — nove marchi su quattro colonne
   ne lasciano tre vuote — le celle rimaste scoperte si vedevano come rettangoli
   grigi pieni, e con le pagine a tutta larghezza capita piu' spesso.
   L'ombra non occupa spazio, quelle di due tessere vicine si sovrappongono e
   restano un filo solo, e dove tessere non ce ne sono non c'e' niente da
   vedere. */
.griglia {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
   gap: 0;
}

/* Le due parti della tessera stanno alla loro altezza NATURALE: la fotografia
   quella del suo rapporto, il piede quella del suo contenuto.
   
   Con `1fr` sulla fotografia era il piede a comandare: dove c'era il badge
   «promo» il piede cresceva di nove pixel, la fotografia si accorciava
   altrettanto, e in una riga di tre tessere quell'occhiale risultava più
   piccolo degli altri due. Lo spazio che avanza resta in fondo alla tessera,
   dove è bianco e non si vede. */
/* NEL CATALOGO IL RIQUADRO E IL SUO COLLEGAMENTO SONO DUE COSE, da quando
   sopra la vetrina c'e' anche il comando della lente: dentro un `<a>` non ci
   va un altro `<a>`, quindi li' la tessera e' un contenitore e il
   collegamento alla scheda sta dentro, in `.apri-prodotto`. Dove la lente non
   serve — i marchi, la ricerca — la tessera resta un collegamento sola, e per
   questo le due cose hanno le stesse regole di impaginazione. */
.tessera,
.tessera .apri-prodotto {
   display: grid;
   grid-template-rows: auto auto;
   align-content: start;
   min-width: 0;
   text-decoration: none;
   color: inherit;
}
.tessera {
   background: var(--carta);
   position: relative;
   box-shadow: 0 0 0 1px var(--linea-blocco);
}

/* LA LENTE NELL'ANGOLO DELLA VETRINA. Sta sopra la fotografia e non accanto
   al nome: e' la fotografia che ingrandisce, e in mezzo a ventiquattro
   tessere un comando fuori dall'immagine non si lega a niente. Quando le
   fotografie sono piu' di una lo dice il numero, perche' da fuori non si
   vede che dietro ce ne sono altre tre. */
.tessera .apri-lente {
   position: absolute;
   top: 8px;
   right: 8px;
   display: flex;
   align-items: center;
   gap: 4px;
   min-width: 32px;
   min-height: 32px;
   padding: 0 7px;
   justify-content: center;
   color: var(--inchiostro);
   background: color-mix(in srgb, var(--carta) 86%, transparent);
   border: 1px solid var(--linea-blocco);
   border-radius: 2px;
   text-decoration: none;
   opacity: .78;
}
.tessera .apri-lente svg {
   width: 15px;
   height: 15px;
}
.tessera .apri-lente .quanti {
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
}
.tessera .apri-lente:hover,
.tessera .apri-lente:focus-visible {
   opacity: 1;
   background: var(--carta);
}

/* Le croci di riscontro agli angoli, come i segni di taglio di una stampa:
   sono il segno che tiene insieme il catalogo con la scheda prodotto, dove
   incorniciano la foto grande. Solo due angoli, in diagonale: quattro
   sarebbero una cornice, e una cornice attorno a un occhiale è rumore. */
.tessera .vetrina::before,
.tessera .vetrina::after {
   content: '';
   position: absolute;
   width: 11px;
   height: 11px;
   border: 1px solid rgba(42, 52, 57, .3);
   pointer-events: none;
}
.tessera .vetrina::before {
   top: 14px; left: 14px;
   border-right: 0; border-bottom: 0;
}
.tessera .vetrina::after {
   right: 14px; bottom: 14px;
   border-left: 0; border-top: 0;
}

.tessera .vetrina {
   display: grid;
   place-items: center;
   aspect-ratio: 5 / 3;
   padding: 24px 22px;
   min-width: 0;
   overflow: hidden;
   position: relative;
}
/* width/height al 100% con contain: max-width da solo non basta a contenere
   l'immagine dentro una cella con aspect-ratio, e i logotipi sforavano. */
.tessera .vetrina img {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   object-fit: contain;
   mix-blend-mode: multiply;
}
.tessera .vetrina .ripiego {
   font-size: 17px;
   font-weight: 350;
   font-stretch: 115%;
   letter-spacing: .1em;
   text-transform: uppercase;
   text-align: center;
   color: var(--inchiostro);
}
/* Il piede della tessera è diviso dalla foto da un filo FORTE: sopra c'è
   l'oggetto, sotto quello che si legge. */
.tessera .targhetta {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 16px 15px;
   border-top: 1px solid var(--inchiostro);
   min-width: 0;
   min-height: 58px;      /* uguale per tutte, badge o non badge */
}
.tessera .targhetta .sigla {
   font-family: var(--dato);
   font-size: 14px;
   color: var(--inchiostro);
}
.tessera .targhetta .nome {
   font-size: 13.5px;
   color: var(--inchiostro);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Nel catalogo il nome del modello è il titolo, e sotto ci va il calibro: due
   righe, non una riga sola con tutto in fila.

   L'altezza è FISSA, e non è un dettaglio: il piede cresce dove c'è il badge
   «promo», e siccome la fotografia sopra prende lo spazio che avanza, in una
   riga di tre tessere quella col badge aveva l'occhiale più piccolo e il nome
   più in alto delle altre due. Con l'altezza fissa il badge ci sta dentro e
   tutte le fotografie restano della stessa misura. */
.tessera .targhetta.impilata {
   display: grid;
   gap: 5px;
   /* in ALTO e non centrato: il badge «promo» è più alto del testo, e
      centrando il contenuto il nome scendeva di cinque pixel nelle sole
      tessere che ce l'hanno — in una riga di tre si vedeva */
   align-content: start;
}
.tessera .targhetta.impilata .riga {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 22px;
   min-width: 0;
}

/* Nel piede di una tessera il badge è più compatto: a padding pieno è alto
   ventinove pixel contro i diciannove del nome, e faceva scendere di sei
   pixel il titolo delle sole tessere in promozione. Il corpo resta a 10px,
   che è il minimo sotto cui l'handoff non scende. */
.tessera .targhetta .bollo {
   padding: 2px 7px;
   line-height: 1.3;
}
.tessera .targhetta.impilata .sigla {
   font-family: var(--testo);
   font-size: 13.5px;
   font-weight: 500;
   letter-spacing: .1em;
}

/* --------------------------------------------------------------- form --- */

.campo {
   width: 100%;
   min-height: 46px;
   padding: 11px 13px;
   font: inherit;
   color: inherit;
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-radius: 3px;
}
.campo:focus { border-color: var(--inchiostro); }

select.campo {
   appearance: none;
   background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro-60) 50%),
                     linear-gradient(135deg, var(--inchiostro-60) 50%, transparent 50%);
   background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
   background-size: 5px 5px, 5px 5px;
   background-repeat: no-repeat;
}

.bottone {
   display: inline-block;
   min-height: 46px;
   padding: 11px 22px;
   text-align: center;
   text-decoration: none;
   font: inherit;
   font-weight: 500;
   letter-spacing: .04em;
   color: var(--carta);
   background: var(--azione);
   border: 1px solid var(--azione);
   border-radius: 3px;
   cursor: pointer;
}
.bottone:hover { background: var(--azione-cupa); border-color: var(--azione-cupa); }

/* ----------------------------------------------------------- LA GERARCHIA ---
   QUATTRO PESI, e ognuno vuol dire una cosa sola.

     PRIMARIO     verde pieno, testo bianco     l'azione che CONCLUDE il blocco
     SECONDARIO   antracite pieno, testo bianco un'azione vera, ma non l'ultima
     OUTLINE      contorno                      servizio, navigazione, annulla
     DISTRUTTIVO  contorno rosso                quello che butta via

   Il PRIMARIO e' il default: `class="bottone"` e' gia' quello. Non c'e' una
   classe da ricordarsi per l'azione principale — c'e' da dichiarare quando un
   comando vale meno, che e' la cosa su cui si ragiona davvero.

   Il SECONDARIO e' pieno e non in contorno perche' resta un'azione: «Aggiorna»
   cambia l'ordine come «Aggiungi», e metterlo in contorno accanto a un verde
   lo faceva leggere come un comando di servizio. Pieno, ma di un colore che
   nel portale non significa «premi qui» — l'antracite e' il colore del testo
   e delle barre, e in mezzo al verde si legge per quello che e': il secondo.

   La distanza fra i tre si vede senza leggere le parole, ed e' il punto: un
   agente che scorre ventiquattro righe non legge ventiquattro pulsanti.     */

/* `.primario` non aggiunge nulla a `.bottone`, che e' gia' primario: esiste
   per poterlo scrivere dove un `{% if %}` deve dire esplicitamente
   l'alternativa. */
.bottone.primario {
   color: var(--carta);
   background: var(--azione);
   border-color: var(--azione);
}

.bottone.secondario {
   color: var(--carta);
   background: var(--inchiostro);
   border-color: var(--inchiostro);
}
.bottone.secondario:hover { background: #1d262a; border-color: #1d262a; }

.cerca { display: flex; gap: 8px; margin: 0 0 22px; }
.cerca .campo { flex: 1 1 auto; }

/* --------------------------------------------------------------- stati -- */

.avviso {
   padding: 11px 13px;
   margin-bottom: 18px;
   font-size: 14px;
   border: 1px solid var(--allerta);
   border-left-width: 3px;
   border-radius: 3px;
   background: #fdf8f7;
}

.niente {
   padding: 40px 0;
   color: var(--inchiostro-60);
}

.coda-elenco {
   margin: 14px 0 0;
   font-size: 13px;
   color: var(--inchiostro-35);
}

@media (prefers-reduced-motion: reduce) {
   * { transition: none !important; }
}

/* ------------------------------------------------------------ setaccio --
   La colonna dei filtri a sinistra della griglia (`_setaccio.html`). Prima era
   una fila di tendine sopra i risultati; le tendine aperte si sovrapponevano
   alla griglia, qui invece le caratteristiche si aprono in colonna e spingono
   giù solo le altre caratteristiche (02/10/2026). */

.catalogo-filtrato {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: 28px;
   align-items: start;
}
/* LA COLONNA SCORRE PER CONTO SUO, indipendente dalla griglia.
   L'altezza la fissa `filtri.js` sullo spazio che resta visibile sotto di lei:
   con un `100vh` fisso, all'apertura della pagina la colonna — che parte sotto
   il titolo, non sotto la testata — finiva oltre il bordo dello schermo, e su
   tablet per vedere gli ultimi filtri bisognava scorrere tutta la pagina
   (02/10/2026). `overscroll-behavior` impedisce che, arrivati in fondo ai
   filtri, il dito si porti dietro la pagina. */
/* SU TABLET la colonna un po' più larga: con il dito le voci si toccano
   meglio, e i nomi lunghi dei valori — «Mostra anche le promozioni» — non
   vanno a capo. Si riconosce dal puntatore grossolano (il dito), non dalla
   larghezza: un tablet in orizzontale è largo quanto un portatile
   (02/10/2026). */
@media (pointer: coarse) and (min-width: 901px) {
   .catalogo-filtrato { grid-template-columns: 290px minmax(0, 1fr); }
}

.colonna-risultati { min-width: 0; }
.colonna-risultati > .intestazione,
.colonna-risultati > .insegna { margin-top: 0; }

.colonna-filtri {
   position: sticky;
   top: 130px;               /* sotto la testata fissa */
   max-height: calc(100dvh - 150px);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: 4px;       /* la barra di scorrimento non tocca le caselle */
}

.setaccio { margin-bottom: 0; }
.setaccio .cerca { margin-bottom: 18px; }
/* nella colonna il campo e il pulsante uno sotto l'altro: affiancati in 250px
   il campo mostrava «Codice o descr» e l'invito non si leggeva */
.colonna-filtri .cerca { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.colonna-filtri .cerca .campo { width: 100%; }

.titolo-filtri {
   display: none;            /* serve solo su schermo stretto, vedi sotto */
}

.caratteristiche {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--linea-blocco);
}

.caratteristica { border-bottom: 1px solid var(--linea-blocco); }

.caratteristica > summary {
   display: flex;
   align-items: center;
   gap: 7px;
   min-height: 44px;
   padding: 10px 2px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   list-style: none;
   cursor: pointer;
   user-select: none;
}
.caratteristica > summary::-webkit-details-marker { display: none; }
.caratteristica > summary::after {
   content: '';
   margin-left: auto;
   width: 6px; height: 6px;
   border-right: 1px solid var(--inchiostro-60);
   border-bottom: 1px solid var(--inchiostro-60);
   transform: rotate(45deg) translate(-2px, -2px);
}
.caratteristica[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

.caratteristica .conteggio,
.titolo-filtri .conteggio:not(:empty) {
   font-family: var(--dato);
   font-size: 11px;
   line-height: 1;
   padding: 3px 5px;
   letter-spacing: 0;
   color: var(--inchiostro);
   background: color-mix(in srgb, var(--segnale) 30%, white);
   border-radius: 2px;
}

.caratteristica .valori { padding: 0 0 10px; }

.colonna-filtri .azzera { display: inline-block; margin-top: 14px; }

/* MENTRE LA GRIGLIA SI AGGIORNA dopo una spunta: si attenua invece di
   sparire, così non salta la pagina, e in cima a quello che si vede compare
   «Aggiorno i risultati…» con la rotella. Senza, su linea lenta la spunta
   sembrava non aver fatto niente e si tornava a toccarla (02/10/2026). */
.risultati[aria-busy="true"] > :not(.caricamento) { opacity: .4; transition: opacity .15s; }
.caricamento {
   position: sticky;
   top: 140px;               /* sotto la testata fissa, anche a pagina scesa */
   z-index: 4;
   display: flex;
   align-items: center;
   gap: 10px;
   width: max-content;
   margin: 0 auto -44px;     /* sopra la griglia, senza spingerla giù */
   padding: 10px 16px;
   font-size: 13px;
   color: #fff;
   background: var(--inchiostro);
   border-radius: 3px;
   box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}
.caricamento .giro {
   width: 14px;
   height: 14px;
   border: 2px solid rgb(255 255 255 / .35);
   border-top-color: #fff;
   border-radius: 50%;
   animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* SCHERMO STRETTO, cioè il tablet in verticale: la colonna toglierebbe metà
   della larghezza alla griglia. I filtri vanno sopra, chiusi dietro un
   pulsante «Filtri» che dice quanti ne sono attivi. */
@media (max-width: 900px) {
   .catalogo-filtrato { grid-template-columns: minmax(0, 1fr); gap: 18px; }
   .colonna-filtri { position: static; max-height: none; overflow: visible; }
   .titolo-filtri {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      list-style: none;
      cursor: pointer;
      border: 1px solid var(--linea-forte);
      border-radius: 3px;
      background: var(--carta);
   }
   .titolo-filtri::-webkit-details-marker { display: none; }
   .titolo-filtri::after {
      content: '';
      margin-left: auto;
      width: 6px; height: 6px;
      border-right: 1px solid var(--inchiostro-60);
      border-bottom: 1px solid var(--inchiostro-60);
      transform: rotate(45deg) translate(-2px, -2px);
   }
   .pannello-filtri[open] > .titolo-filtri::after { transform: rotate(-135deg) translate(-1px, -1px); }
   /* sopra la griglia il campo torna accanto al pulsante: c'è lo spazio */
   .colonna-filtri .cerca { grid-template-columns: minmax(0, 1fr) auto; }
   .pannello-filtri[open] > .titolo-filtri { border-color: var(--inchiostro); margin-bottom: 8px; }
}

.valore {
   display: flex;
   align-items: center;
   gap: 9px;
   min-height: 40px;
   padding: 6px 4px;
   font-size: 14px;
   white-space: normal;
   line-height: 1.3;
   cursor: pointer;
}
.valore:hover { background: var(--servizio); }
.valore input { width: 17px; height: 17px; accent-color: var(--segnale-scuro); }

/* IL CONTORNO SI DEVE VEDERE. `--linea-forte` (#c6cdcf) e' il grigio dei bordi
   dei campi: su un campo va bene, perche' quello che lo fa riconoscere e' la
   casella vuota dentro, ma su un pulsante — che e' solo una parola dentro un
   rettangolo — quel filo smorto lo fa sembrare disattivato. Chi lo guarda non
   capisce che si puo' premere, e su un tablet in luce esterna sparisce del
   tutto.

   Il contorno resta per i comandi SECONDARI: quelli che concludono qualcosa
   sono pieni. Ma secondario non vuol dire invisibile. */
.bottone.chiaro {
   color: var(--inchiostro);
   background: var(--carta);
   border-color: var(--inchiostro-50);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
}
.bottone.chiaro:hover {
   border-color: var(--inchiostro);
   background: var(--servizio);
}

/* --------------------------------------------------------------- bolli -- */

/* I badge sono ANTRACITE, non colorati.
   Il colore nel portale ha un mestiere solo — segnalare uno stato — e un
   badge che dice «promo» o «nota di credito» non è un allarme: è
   un'etichetta. Lasciarli tutti colorati significa che quando compare il
   mattone dello scaduto non si distingue da niente. */
.bollo {
   display: inline-block;
   padding: 6px 9px;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--carta);
   background: var(--inchiostro);
   /* bordo TRASPARENTE, non assente: senza, un badge in contorno accanto a uno
      pieno risulta due pixel più alto e la colonna sembra storta */
   border: 1px solid transparent;
   white-space: nowrap;
}

/* LO STATO SCRITTO SULL'ARTICOLO, accanto al suo codice.
   Piu' piccolo del bollo normale perche' sta dentro una riga d'elenco, non in
   testa a una scheda. In contorno e non pieno: sono tre etichette su una
   pagina di ventiquattro righe, e ventiquattro rettangoli neri sarebbero la
   prima cosa che si vede invece dei colori. */
.bollo.stato-articolo {
   padding: 2px 6px;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: var(--inchiostro-60);
   background: none;
   border-color: var(--linea-forte);
   vertical-align: middle;
}

/* «Non Disponibile» e' l'unico dei tre che sia un avvertimento — gli altri due
   («New Color», «Promo») sono richiami — e va visto senza doverlo leggere. */
.bollo.stato-articolo.manca {
   color: var(--allerta);
   border-color: var(--allerta);
}

/* I RICHIAMI: in contorno e non pieni. Da quando l'antracite e' il colore dei
   pulsanti secondari, un bollo antracite pieno accanto a un titolo si legge
   come un pulsante — e questo non si preme. */
.bollo.richiamo {
   /* COMPATTO: e' un'etichetta accanto a una descrizione, non un'intestazione.
      Con l'imbottitura del bollo pieno — sei pixel sopra e sotto, nove ai lati,
      e le lettere spaziate — una parola di cinque caratteri diventava un
      rettangolo alto quanto due righe di testo, e su un nome corto pesava piu'
      del nome. Sono le stesse misure dello stato dell'articolo nelle righe, che
      fa lo stesso mestiere. */
   padding: 2px 6px;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: var(--richiamo);
   background: none;
   border-color: var(--richiamo);
}

.stato { font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.stato.disponibile { color: var(--segnale-scuro); font-weight: 500; }
.stato.disponibile::before {
   content: '';
   width: 7px; height: 7px;
   border-radius: 50%;
   background: var(--segnale);
}

/* -------------------------------------------------------------- scheda -- */

.scheda {
   display: grid;
   grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
   gap: 32px;
   align-items: start;
}

/* Nel dettaglio di un ordine i due riquadri sono due letture della stessa
   cosa — cosa è stato ordinato e a quali condizioni — e di altezze diverse
   sembravano due blocchi scollegati, con l'elenco delle righe che si
   attaccava sotto al più corto. Qui vanno pari, e l'elenco si stacca. */
.scheda.pari { align-items: stretch; }
.scheda.pari > * { display: flex; flex-direction: column; }
.scheda.pari .specifiche { flex: 1 0 auto; align-content: start; }

.scheda.pari + .elenco { margin-top: 34px; }

/* la riga di chiusura dell'elenco: è un totale, non un articolo, e si legge
   come tale — fondo più tenue e nessun nome di prodotto a sinistra */
.chiusura-righe {
   background: var(--fondo);
   border-top: 1px solid var(--linea);
   min-height: 52px;
}

.ripeti { margin-top: 26px; }
@media (max-width: 720px) {
   .scheda { grid-template-columns: 1fr; gap: 20px; }
}

.ritratto {
   display: grid;
   place-items: center;
   aspect-ratio: 4 / 3;
   padding: 26px;
   background: var(--carta);
   border: 1px solid var(--linea);
   overflow: hidden;
}
.ritratto img {
   width: 100%; height: 100%;
   min-width: 0; min-height: 0;
   object-fit: contain;
   mix-blend-mode: multiply;
}
.ritratto .ripiego {
   font-size: 17px;
   font-stretch: 115%;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--inchiostro-35);
}

/* `minmax(0, ...)` su tutte e due le colonne, e non `max-content 1fr`: una
   traccia `1fr` non scende mai sotto la parola piu' lunga che contiene, e qui
   dentro ci finiscono email, IBAN e codici fiscali scritti a caratteri fissi.
   Dove il contenitore ha larghezza decisa da fuori — i due blocchi della
   scheda cliente, che stanno in una griglia a colonne pari — la tabella
   diventava piu' larga del riquadro e il testo usciva dal bordo di trenta
   pixel. Con il minimo a zero la colonna puo' stringersi, e `anywhere` manda
   a capo la parola invece di farla sporgere. */
/* SENZA CORNICE: sono coppie nome-valore, non una tabella. Il riquadro con i
   bordi su tutti i lati, attorno a sette righe, pesava piu' del dato che
   conteneva; restano i fili fra una riga e l'altra, che e' quello che serve a
   leggerle in colonna. */
.specifiche {
   display: grid;
   grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
   gap: 0;
   margin: 0;
}
.specifiche dt {
   padding: 9px 22px 9px 0;
   border-bottom: 1px solid var(--linea);
}
.specifiche dd {
   margin: 0;
   padding: 9px 0;
   font-size: 15px;
   border-bottom: 1px solid var(--linea);
   overflow-wrap: anywhere;
}
.specifiche dt:nth-last-of-type(1),
.specifiche dd:nth-last-of-type(1) { border-bottom: 0; }

/* --------------------------------------------------------------- pagine -- */

/* Il piede: a sinistra dove si è, a destra dove si va.
   Al centro erano tre cose in fila che si leggevano tutte insieme; qui il
   dato sta da una parte e i comandi dall'altra, come nell'intestazione. */
.pagine {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   margin-top: 28px;
}
.pagine .dato {
   font-family: var(--dato);
   font-size: 12px;
   color: var(--inchiostro-60);
}
.pagine .comandi {
   display: flex;
   gap: 10px;
   margin-left: auto;
}

/* --------------------------------------------------------- testata scura -
   La barra piena è quello che toglie al portale l'aria di foglio bianco:
   antracite come una montatura in metallo scuro, e il marchio in negativo. */

.barra.scura {
   background: var(--inchiostro);
   border-bottom: 0;
   color: var(--carta);
}
.barra.scura .logotipo,
.barra.scura .cliente { color: var(--carta); }
.barra.scura .dato { color: rgb(255 255 255 / .5); }
.barra.scura a.minuta { color: rgb(255 255 255 / .62); }
.barra.scura a.minuta:hover { color: var(--carta); }
.barra.scura :focus-visible { outline-color: var(--segnale); }

/* ----------------------------------------------------------- marcatura --- */

.targhetta.impilata { display: grid; align-content: center; gap: 3px; }
.targhetta.impilata .riga { display: flex; align-items: center; gap: 8px; min-width: 0; }

.marcatura {
   font-family: var(--dato);
   font-size: 12px;
   letter-spacing: -.02em;
   color: var(--inchiostro-60);
}

/* ------------------------------------------------------ disegno quotato -- */

.quotato { margin: 0 0 26px; }

.quotato svg {
   display: block;
   width: 100%;
   max-width: 290px;
   height: auto;
}
.quotato .montatura rect,
.quotato .montatura path {
   fill: none;
   stroke: var(--inchiostro);
   stroke-width: 1.7;
   stroke-linejoin: round;
}
.quotato .quote path {
   fill: none;
   stroke: var(--inchiostro-35);
   stroke-width: .7;
}
.quotato .quote text {
   fill: var(--inchiostro-60);
   font-family: var(--dato);
   font-size: 7.5px;
   text-anchor: middle;
}
.quotato figcaption {
   margin-top: 10px;
   font-size: 13px;
   color: var(--inchiostro);
}

/* ------------------------------------------------- il quadro del ponte --
   Il boxing system si disegna: come carattere (U+25A1) manca da Space Mono e
   il browser lo rimpiazza con un rettangolo vuoto. */

.boxing {
   display: inline-block;
   width: .58em;
   height: .58em;
   margin: 0 .22em;
   vertical-align: baseline;
   border: 1px solid currentColor;
}

/* --------------------------------------------------- titoli di sezione -- */

.sezione {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin: 40px 0 14px;
   font-size: 13px;
   font-weight: 500;
   font-stretch: 112%;
   letter-spacing: .15em;
   text-transform: uppercase;
}
.sezione::before {
   content: '';
   width: 22px;
   height: 3px;
   background: var(--allerta);
   translate: 0 -4px;
}
.sezione .quanti {
   font-family: var(--dato);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0;
   text-transform: none;
   /* il conteggio accanto al titolo e' un dato, non un'ombra: col grigio di
      prima stava a 2,2:1 */
   color: var(--inchiostro-60);
}

/* le tessere poggiano sul fondo, e il prodotto resta su bianco. Il filo di un
   pixel viene prima dell'ombra e va ripetuto qui: questa regola sta dopo
   quella che lo definisce e, dichiarando `box-shadow` da sola, lo cancellava. */
.tessera { box-shadow: 0 0 0 1px var(--linea-blocco), 0 1px 2px rgb(42 52 57 / .05); }
/* il filo resta anche sotto il dito: senza ripeterlo, l'ombra del passaggio
   lo cancellava e la tessera perdeva il contorno proprio mentre la si guarda */
a.tessera:hover,
.tessera:has(.apri-prodotto:hover) { box-shadow: 0 0 0 1px var(--linea-blocco), 0 3px 10px rgb(42 52 57 / .10); z-index: 1; }

.quotato {
   padding: 20px 18px 16px;
   background: var(--carta);
   border: 1px solid var(--linea);
}

/* -------------------------------------------------------------- prezzi --- */

.prezzi {
   display: grid;
   justify-items: end;
   gap: 1px;
   margin-left: auto;
   padding-left: 16px;
   text-align: right;
   white-space: nowrap;
}

.prezzi .netto {
   font-family: var(--dato);
   font-size: 15px;
   color: var(--inchiostro);
}
/* ANCHE QUESTI TRE ERANO IL GRIGIO DEL FONDO SCURO. Stessa storia delle
   etichette piu' su: `--inchiostro-35` nasce per la testata antracite, qui il
   fondo e' bianco e rende 2,24:1 — misurato il 04/11/2026 sulla scheda, dove
   «al pubblico 106,00» era il testo meno leggibile rimasto. E' il prezzo che
   l'agente legge al cliente ad alta voce: non e' una nota a margine. */
.prezzi .sconto {
   font-size: 11.5px;
   color: var(--inchiostro-60);
}
.prezzi .sconto.promo { color: var(--allerta); font-weight: 500; }
.prezzi .pubblico {
   font-size: 11.5px;
   color: var(--inchiostro-60);
}
.prezzi .senza-prezzo {
   font-size: 12.5px;
   color: var(--inchiostro-60);
   font-style: italic;
}

/* col prezzo in mezzo, la coda non deve più spingere */
.voce .coda { margin-left: 0; }

@media (max-width: 560px) {
   .voce { flex-wrap: wrap; row-gap: 8px; }
   .prezzi { padding-left: 0; }
}

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

.quantita {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 0 16px;
}
.campo.minuscolo {
   width: 72px;
   min-height: 42px;
   padding: 9px 10px;
   font-family: var(--dato);
   text-align: center;
}
.quantita .bottone { min-height: 42px; padding: 9px 14px; font-size: 14px; }

/* I DUE PASSI ATTACCATI ALLA CASELLA.
   Su un tablet il gesto piu' frequente e' «uno per colore», e scriverlo con la
   tastiera a video su ventiquattro righe e' il punto lento della scheda. Il
   gruppo e' un pezzo solo — meno, numero, piu' — e i bordi si sovrappongono di
   un pixel perche' sembri un comando e non tre.
   Le frecce native del campo numerico qui spariscono: fanno lo stesso mestiere
   in quattro pixel di larghezza, e accanto a due pulsanti veri sono rumore. */
/* `stretch` e non `center`: la casella e' alta 43px — i 42 del minimo piu' il
   pixel che le aggiunge il testo — e i due pulsanti si fermavano a 42,
   lasciando un filo di disallineamento visibile in fondo al gruppo. Cosi'
   prendono l'altezza che ha la casella, qualunque sia. */
.quantita .passi { display: flex; align-items: stretch; }
.quantita .passi .campo.minuscolo {
   width: 54px;
   padding: 9px 2px;
   border-radius: 0;
   appearance: textfield;
}
.quantita .passi .campo.minuscolo::-webkit-outer-spin-button,
.quantita .passi .campo.minuscolo::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
}
/* PIENI, E DI DUE COLORI: «+» verde azione, «−» rosso. Erano bianchi col bordo
   grigio, cioe' vestiti da comando secondario, ed erano invece diventati
   l'unico comando della riga da quando il pulsante «Aggiungi» non c'e' piu'.
   Due colori e non uno perche' sul tablet si sbaglia pulsante, e il verso del
   gesto deve vedersi prima di toccare.

   Il rosso qui e' una DEROGA, scelta il 04/11/2026: `--allerta` nel resto del
   portale vuol dire scaduto o distruttivo, e questo e' un comando ordinario.
   Chi dovesse rivedere i colori sappia che il costo e' quello — un rosso
   premuto cento volte al giorno si fa guardare meno dove conta davvero. */
.quantita .passo {
   flex: 0 0 auto;
   width: 34px;
   min-height: 42px;
   padding: 0;
   font: inherit;
   font-size: 18px;
   font-weight: 500;
   line-height: 1;
   color: var(--carta);
   background: var(--azione);
   border: 1px solid var(--azione);
   cursor: pointer;
}
.quantita .passo:first-child { border-radius: 3px 0 0 3px; margin-right: -1px; }
.quantita .passo:last-child  { border-radius: 0 3px 3px 0; margin-left: -1px; }
/* IL MENO E' ROSSO, il piu' resta verde: sopra la regola comune, che tiene
   forma, misura e peso uguali per tutti e due. */
.quantita .passo[data-passo="-1"] {
   background: var(--allerta);
   border-color: var(--allerta);
}

.quantita .passo:hover { background: var(--azione-cupa); border-color: var(--azione-cupa); }
.quantita .passo[data-passo="-1"]:hover {
   background: color-mix(in srgb, var(--allerta) 85%, #000);
   border-color: color-mix(in srgb, var(--allerta) 85%, #000);
}
.quantita .passo:active { background: var(--inchiostro); border-color: var(--inchiostro); }
/* il campo sopra i due pulsanti quando ha il fuoco, se no il bordo scuro
   finisce sotto quello del pulsante che gli e' sovrapposto */
.quantita .passi .campo.minuscolo:focus { position: relative; z-index: 1; }

.barra .pallino {
   display: inline-block;
   min-width: 19px;
   padding: 2px 5px;
   font-family: var(--dato);
   font-size: 11px;
   line-height: 1.2;
   text-align: center;
   color: var(--inchiostro);
   background: var(--segnale);
   border-radius: 10px;
}

.nota {
   padding: 11px 14px;
   margin: 0 0 18px;
   font-size: 14px;
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-left: 3px solid var(--inchiostro-35);
   border-radius: 3px;
}
.nota.success { border-left-color: var(--segnale); }
.nota.error { border-left-color: var(--allerta); }

/* ------------------------------------------------- sotto la tabella d'ordine
   DUE COLONNE. A sinistra quello che si FA — la trattativa su tutto l'ordine —
   e quello che c'e' da sapere; a destra il RIEPILOGO, che e' quello che si
   guarda mentre si compone.

   Erano tre blocchi impilati a tutta larghezza, e su una pagina da 1440 il
   risultato era: numeri incollati a destra con due terzi di bianco accanto,
   avvisi che attraversavano lo schermo intero, e due campi da settecento pixel
   per scriverci dentro un numero di due cifre.                              */

/* LA STESSA GRIGLIA PER I DUE BLOCCHI, ed e' il motivo per cui stanno scritti
   insieme. Sono uno sopra l'altro e tutti e due divisi in due colonne: con
   misure diverse — 360 e 300, margini 22 e 18 — i bordi cadevano su quattro
   verticali invece che su due, e la pagina si leggeva storta senza che si
   capisse perche'. Se una delle due cambia, cambiano entrambe. */
/* Le due colonne: a sinistra quello che si fa o si legge, a destra i numeri e
   i comandi. Le misure stanno in due variabili perche' le usano due blocchi —
   il dettaglio di un ordine gia' inviato (`.sotto-ordine`) e la chiusura del
   carrello — e devono restare identiche: con misure diverse i bordi cadevano
   su quattro verticali invece che su due. */
.sotto-ordine,
.chiusura {
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--colonna-conti);
   align-items: start;
   gap: var(--stacco-conti);
}

.sotto-ordine { margin: 22px 0; }



/* GLI AVVISI IN TESTA ALL'ORDINE. Affiancati finche' c'e' spazio: sono due
   righe brevi, e impilate a tutta larghezza spingevano la tabella — cioe' il
   lavoro — sotto il bordo dello schermo. */
.avvisi-testa {
   display: grid;
   /* il massimo, e non `1fr`: un avviso solo su una pagina larga millequattro
      pixel diventava una riga di testo lunga uno schermo, che si legge male e
      pesa piu' della tabella che sta per introdurre */
   grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
   gap: 10px 16px;
   margin: 0 0 18px;
}
.avvisi-testa .nota,
.avvisi-testa .avviso { margin: 0; }

.colonna-azioni { display: grid; gap: 0; align-content: start; }
.colonna-azioni .avviso:last-child,
.colonna-azioni .nota:last-child { margin-bottom: 0; }

/* IL RIEPILOGO RESTA IN VISTA mentre si scorrono le righe: e' il numero che si
   controlla dopo ogni modifica, e su un ordine di venti righe stava sotto il
   bordo dello schermo. 88px e' l'altezza della testata fissa. */
@media (min-width: 1000px) {
   .sotto-ordine .conto { position: sticky; top: 88px; }
}

/* Un solo punto di rottura per tutti e due, per la stessa ragione: se
   cedessero a larghezze diverse, per una fascia di schermi uno sarebbe a due
   colonne e l'altro a una. */
@media (max-width: 1000px) {
   .sotto-ordine,
   .chiusura { grid-template-columns: minmax(0, 1fr); }
   /* a colonna singola il riepilogo va SOPRA il modulo d'invio: e' quello che
      si guarda prima di decidere, mentre i campi si compilano dopo */
   .comandi-chiusura { order: -1; }
   .sotto-ordine .conto { order: -1; }
}

.conto {
   margin: 0;
   padding: 18px 20px;
   background: var(--carta);
   border: 1px solid var(--linea);
}
.conto dl {
   display: grid;
   grid-template-columns: 1fr max-content;
   gap: 8px 24px;
   margin: 0;
}
.conto dt { color: var(--inchiostro-60); }
.conto dd { margin: 0; text-align: right; }
.conto .forte { font-weight: 600; color: var(--inchiostro); font-size: 17px; }

.invio {
   display: grid;
   gap: 8px;
   max-width: 460px;
   padding: 20px;
   background: var(--carta);
   border: 1px solid var(--linea);
}
.invio .bottone { margin-top: 12px; justify-self: start; }
.invio textarea.campo { resize: vertical; font-family: var(--testo); }

/* --------------------------------------------------------- scadenziario -- */

.allarme { color: var(--allerta); }
.prezzi .netto.allarme { font-weight: 600; }

.conto.riepilogo { margin: 0 0 22px; }
.conto.riepilogo dl { max-width: 300px; }

/* ======================================================================
   SECONDA PASSATA — gerarchia, scala e peso.
   La prima versione era corretta ma senza voce: tutto allo stesso livello,
   il marchio ridotto a una riga sottile, i titoli grandi quanto il testo.
   ====================================================================== */

/* -------------------------------------------------------------- testata -- */

.testata {
   position: sticky;
   top: 0;
   z-index: 20;
   background: var(--inchiostro);
   color: var(--carta);
}

/* LA PRIMA FASCIA E' QUELLA DI SERVIZIO e sta un passo indietro: voci che
   valgono per tutti i clienti, la spia della rete, «Esci». Era alta e scritta
   come la riga di lavoro sotto, e due fasce dello stesso peso non dicono da
   dove si comincia a leggere. */
.testata .fascia {
   display: flex;
   align-items: center;
   gap: 22px;
   min-height: 48px;
   padding: 7px var(--gutter);
   border-bottom: 1px solid rgb(255 255 255 / .10);
}

.testata .logotipo { color: var(--carta); }
.testata .logotipo b { font-size: 23px; }
.testata .logotipo i { font-size: 11px; letter-spacing: .425em; text-indent: .425em; }

/* IL CLIENTE APRE LA RIGA DEL SUO LAVORO. Il nome pesa piu' di ogni voce
   perche' e' il soggetto di tutte: senza di lui «Catalogo» o «Carrello» non
   dicono di chi. Il filo a destra lo separa dalle voci invece di un fondo
   diverso, che avrebbe fatto una terza fascia. */
.testata .soggetto {
   display: flex;
   align-items: baseline;
   gap: 9px;
   min-width: 0;
   padding: 11px 20px 11px 0;
   margin-right: 18px;
   border-right: 1px solid rgb(255 255 255 / .14);
}
.testata .soggetto:empty { display: none; }
.testata .chi {
   display: flex;
   align-items: baseline;
   gap: 9px;
   min-width: 0;
}
.testata .chi .codice {
   color: rgb(255 255 255 / .45);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
}
.testata .chi .nome {
   font-size: 15px;
   font-weight: 600;
   color: var(--carta);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 32vw;
}
.testata .soggetto .scegli {
   font-size: 13px;
   font-weight: 500;
   color: rgb(255 255 255 / .75);
   text-decoration: none;
}
.testata .soggetto .scegli:hover { color: var(--carta); }
.testata .soggetto .cambia,
.testata .esci {
   font-size: 11px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: rgb(255 255 255 / .55);
   text-decoration: none;
   padding: 10px 0;
   white-space: nowrap;
}
.testata .soggetto .cambia:hover,
.testata .esci:hover { color: var(--carta); }

/* Il campo dello sconto con il suo pulsante di segno accanto: sul tablet la
   tastiera numerica non ha il meno, e senza questo una percentuale negativa —
   cioè una maggiorazione — non si potrebbe scrivere. */
.con-segno {
   display: inline-flex;
   align-items: stretch;
   gap: 4px;
}
.con-segno .segno {
   flex: 0 0 auto;
   min-width: 34px;
   padding: 0 8px;
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-radius: 3px;
   color: var(--inchiostro-60);
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
}
.con-segno .segno:hover { color: var(--inchiostro); border-color: var(--inchiostro-35); }

/* --------------------------------------------------------- spia della rete
   Sapere se il portale sta parlando col gestionale o sta lavorando da solo
   cambia cosa ci si puo' aspettare: un ordine composto senza rete parte dopo,
   un prezzo puo' essere quello dell'ultimo scarico. Prima lo si scopriva solo
   quando qualcosa non partiva.

   Sta in testata e non fra le voci di navigazione: quelle sono posti dove si
   va, questa e' uno stato, e la barra delle sezioni su uno schermo stretto
   scorre di lato — una spia che esce dallo schermo non e' una spia.

   IL LIMITE, che e' quello di `navigator.onLine`: a «senza rete» si puo'
   credere, perche' vuol dire che non c'e' nessuna interfaccia attiva; a «in
   linea» no, perche' il campo che c'e' e non risponde e' indistinguibile da
   quello buono. Per questo la scritta e' «In linea» e non «Collegato al
   gestionale»: dice quello che il browser sa davvero.                      */
.spia-rete {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 10px 0;
   font-size: 11px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: rgb(255 255 255 / .55);
   white-space: nowrap;
}
.spia-rete .lampada {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--segnale);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--segnale) 25%, transparent);
}

/* Senza rete la spia non si limita a cambiare colore: diventa piena e piu'
   chiara del resto della testata. Il verde e l'ambra si distinguono male da
   chi non vede bene i colori, e questa e' l'unica informazione della barra che
   cambia da sola mentre l'agente cammina. */
.spia-rete.giu { color: var(--carta); }
.spia-rete.giu .lampada {
   background: var(--allerta);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--allerta) 30%, transparent);
}

/* quando il logotipo e il nome del cliente si prendono tutto, resta il
   pallino: il colore dice gia' tutto, la parola e' il di piu' */
@media (max-width: 720px) {
   .spia-rete .dice { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* la navigazione non si nasconde in un angolo: è la mappa del portale */
/* E VA A CAPO ANCHE SUL TABLET. Con `overflow-x: auto` e la barra di
   scorrimento nascosta, a 768px «Archivio» finiva 63px oltre il bordo destro:
   c'era, si raggiungeva trascinando, ma nessuno sa di doverlo fare — ed e'
   l'unica cosa che una barra di navigazione non puo' fare. Sotto i 640 le voci
   andavano gia' a capo (16/10/2026); misurato il 04/11/2026 che fra i 640 e i
   circa 820 restavano tagliate, cioe' proprio sul tablet degli agenti. */
.testata .rotta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2px;
   padding: 0 var(--gutter);
   /* un fondo suo: e' la riga in cui si lavora, e si stacca da quella di
      servizio senza bisogno di un'altra linea */
   background: var(--inchiostro-nav);
}
.testata .rotta::-webkit-scrollbar { display: none; }

/* NIENTE MAIUSCOLETTO QUI. Sono nomi di posti, letti decine di volte al
   giorno: in tondo si riconoscono dalla forma della parola invece che
   lettera per lettera, e il maiuscoletto resta alla fascia di servizio, che
   cosi' si distingue da sola. */
.testata .rotta a {
   position: relative;
   padding: 14px 14px 15px;
   font-size: 14px;
   font-weight: 500;
   color: rgb(255 255 255 / .62);
   text-decoration: none;
   white-space: nowrap;
}
.testata .rotta a:hover { color: var(--carta); }
.testata .rotta a.qui { color: var(--carta); }

/* «Archivio» non è una sezione di lavoro come le altre: si stacca da loro con
   un filo e si scrive più tenue, così a colpo d'occhio la barra resta quella di
   prima e la voce di servizio non compete con il catalogo o il carrello.
   `margin-left: auto` la spinge in fondo quando c'è spazio; quando la barra
   scorre resta semplicemente l'ultima. */
/* NIENTE `margin-left: auto` qui: ce l'ha già il carrello, e due margini
   automatici nella stessa riga si dividono lo spazio libero invece di
   sommarlo — il carrello finiva in mezzo alla barra. Basta quello del
   carrello a spingere a destra tutti e due, che restano affiancati e
   separati dal filo. */
.testata .rotta a.servizio {
   font-size: 13px;
   color: rgb(255 255 255 / .45);
}
/* IL FILO STA SUL BORDO DELLA VOCE, fuori dal testo: in linea col testo
   allargava la voce a sinistra, e la riga verde di «sei qui», che segue il
   riquadro della voce, finiva spostata sotto il filo invece che sotto la
   parola. */
.testata .rotta a.servizio::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   width: 1px;
   height: 13px;
   transform: translateY(-50%);
   background: rgb(255 255 255 / .18);
}
/* IL CONTATORE E' PIENO, non una parentesi: il carrello e' l'unica azione in
   una riga di posti, e quante righe ci sono dentro e' l'unico numero che
   cambia mentre si lavora. Il verde e' gia' riservato a stato e contatore. */
.testata .rotta a.carrello .pallino {
   display: inline-block;
   min-width: 19px;
   margin-left: 5px;
   padding: 1px 5px;
   border-radius: 10px;
   background: var(--segnale);
   color: var(--inchiostro);
   font-size: 11px;
   font-weight: 700;
   text-align: center;
   font-variant-numeric: tabular-nums;
}
.testata .rotta a.servizio:hover,
.testata .rotta a.servizio.qui { color: var(--carta); }

/* SOTTO I 1000 IL CLIENTE PRENDE LA SUA RIGA. Accanto alle voci, con una
   ragione sociale come «AURUS OTTICA SAS di Di Nuzzo Diego e C (SALMOIRAGHI
   & VIGANO' FRANCH)», lascia alle voci meno spazio di quello che serve:
   «Carrello» e «Archivio» andavano a capo da soli su una terza riga mezza
   vuota. Una riga sua e' piu' alta di qualche pixel e sempre uguale. */
@media (max-width: 1000px) {
   .testata .soggetto {
      width: 100%;
      padding: 9px 0 8px;
      margin-right: 0;
      border-right: 0;
      border-bottom: 1px solid rgb(255 255 255 / .12);
   }
   .testata .chi .nome { max-width: 70vw; }
}
/* SUL TABLET IN ORIZZONTALE NIENTE TERZA RIGA: la testata resta ferma, e a 158px
   su 820 prendeva un quinto dello schermo su ogni pagina. Il nome si taglia
   prima, e le voci si stringono quanto basta a starci accanto. */
@media (min-width: 1001px) and (max-width: 1180px) {
   .testata .soggetto { padding-right: 14px; margin-right: 6px; }
   .testata .chi .nome { max-width: 21vw; }
   .testata .rotta a { padding-left: 11px; padding-right: 11px; }
   .testata .rotta a.qui::after { left: 11px; right: 11px; }
}
.testata .rotta a.qui::after {
   content: '';
   position: absolute;
   left: 14px; right: 14px; bottom: 0;
   height: 3px;
   background: var(--segnale);
}

/* ---------------------------------------------------------- tipografia -- */

/* Il titolo di pagina ora pesa: era 19px, cioè quanto il testo attorno. */
.insegna {
   font-size: clamp(25px, 3.4vw, 33px);
   font-weight: 300;
   font-stretch: 125%;
   letter-spacing: .1em;
   line-height: 1.05;
   margin: 0 0 22px;
}

main { padding-top: 34px; }

.etichetta { font-size: 11px; letter-spacing: .18em; }

/* il quadro del boxing diventa il segno delle sezioni, al posto del filetto */
.sezione { font-size: 12px; margin: 46px 0 16px; }
.sezione::before {
   width: 9px;
   height: 9px;
   background: none;
   border: 1.5px solid var(--allerta);
   translate: 0 -1px;
}

/* ------------------------------------------------------------- griglie -- */

/* Meno colonne e più grandi: sono occhiali, si guardano.
   Il `gap` resta di un pixel: è il filo che separa le tessere, e riportarlo a
   18px qui rimetteva le fasce grigie fra le righe — il fondo della griglia che
   si vede attraverso lo spazio. */
.griglia { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.tessera .vetrina { aspect-ratio: 4 / 3; padding: 26px 24px; }
.tessera .targhetta { padding: 12px 15px 14px; }
.tessera .targhetta .sigla { font-size: 13px; }

/* -------------------------------------------------- la scheda prodotto --
   È la pagina dove l'agente passa il tempo, davanti al cliente: la foto
   comanda, i dati stanno accanto, il titolo sta sopra a tutta larghezza. */

.frontespizio {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 6px 16px;
   margin-bottom: 26px;
}
.frontespizio .insegna { margin: 0; }
.frontespizio .occhiello { margin: 0; font-size: 15px; }

.scheda {
   grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
   gap: 38px;
}

.ritratto {
   aspect-ratio: 5 / 4;
   padding: 34px;
   border: 0;
   box-shadow: 0 1px 3px rgb(42 52 57 / .07);
}

.dossier .specifiche { border-top: 1px solid var(--linea); }

@media (max-width: 860px) {
   .scheda { grid-template-columns: 1fr; gap: 22px; }
   .ritratto { aspect-ratio: 4 / 3; padding: 24px; }
}

/* le varianti respirano: sono la scelta che l'agente fa davanti al cliente */
.voce { padding: 15px 16px; min-height: 66px; }
.voce .nome { font-size: 17px; }

/* ------------------------------------------------------------ ingresso --
   La schermata d'accesso è il primo contatto: lì il marchio può prendersi
   tutta la pagina, cosa che altrove — dove comanda il prodotto — non deve. */

body.ingresso { background: var(--inchiostro); color: var(--carta); }

body.ingresso main.stretta { padding-top: 13vh; max-width: 400px; }

.marchio-ingresso {
   display: grid;
   justify-items: center;
   margin-bottom: 38px;
}
.marchio-ingresso .sottotitolo {
   margin: 16px 0 0;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: rgb(255 255 255 / .45);
}

form.accesso, .riquadro {
   display: grid;
   gap: 10px;
   padding: 26px 24px 28px;
   background: var(--carta);
   color: var(--inchiostro);
   border-radius: 4px;
   box-shadow: 0 10px 40px rgb(0 0 0 / .28);
}
/* dentro il riquadro la griglia distanzia già i blocchi: i margini dei
   paragrafi si sommerebbero a quelli */
.riquadro > p { margin: 0; }
.riquadro > .insegna { margin: 0; }

form.accesso .etichetta { color: var(--inchiostro-35); }
form.accesso .bottone { margin-top: 16px; }

body.ingresso .avviso {
   color: var(--inchiostro);
   background: var(--carta);
   border-color: var(--allerta);
}

/* ------------------------------------------------------------- avvisi ---
   L'avviso stava in cima alla pagina, cioè fuori dallo schermo per chi aveva
   appena premuto un pulsante in fondo: un riscontro che non si vede non è un
   riscontro. Ora galleggia, e sfuma da solo dopo qualche secondo. */

.avvisi {
   position: fixed;
   left: 50%;
   bottom: 26px;
   z-index: 40;
   display: grid;
   gap: 8px;
   width: min(420px, calc(100vw - 32px));
   translate: -50% 0;
   pointer-events: none;
}

/* SU UNO SCHERMO LARGO la colonna centrata cadeva addosso al contenuto: nel
   carrello copriva le righe d'ordine e meta' del modulo d'invio, nello
   scadenziario le colonne degli importi. Su un telefono va bene dov'e' — la
   pagina e' larga quanto la nota e sotto non c'e' altro — ma da tablet in su
   si sposta nell'angolo. A SINISTRA e non a destra: a destra stanno il
   riepilogo e «Invia ordine», che sono l'ultima cosa da nascondere (23/09/2026). */
@media (min-width: 900px) {
   .avvisi {
      left: 26px;
      translate: none;
   }
}

.avvisi .nota {
   margin: 0;
   padding: 13px 16px;
   font-size: 14px;
   color: var(--carta);
   background: var(--inchiostro);
   border: 0;
   border-left: 3px solid var(--inchiostro-35);
   border-radius: 4px;
   box-shadow: 0 8px 28px rgb(42 52 57 / .30);
   animation: comparsa .18s ease-out both, congedo .4s ease-in 5s both;
}
.avvisi .nota.success { border-left-color: var(--segnale); }

/* Gli avvisi che CHIEDONO QUALCOSA non si comportano come gli altri.
   La zona non prende i clic — serve a non mettersi fra le dita e la pagina — e
   ogni nota sfuma da sola dopo cinque secondi. Vanno bene per un «articolo
   aggiunto»; non per un ordine che il gestionale non ha confermato, dove c'è un
   pulsante da premere e una decisione da prendere. Quelle note restano, e si
   possono toccare. Riconosciute dal fatto che contengono un comando. */
/* «Comando» è anche un LINK, non solo un <button>: gli avvisi che PORTANO
   da qualche parte — «Vedi l'ordine», «Vedi le due versioni» — usano un
   <a class="bottone">, e con il solo `:has(button)` restavano intoccabili e
   sfumavano dopo cinque secondi come un avviso qualunque. Cioè: un comando
   visibile, non cliccabile, che spariva da solo. */
.avvisi .nota:has(button),
.avvisi .nota:has(a) {
   pointer-events: auto;
   animation: comparsa .18s ease-out both;
}
.avvisi .nota:has(button) button,
.avvisi .nota:has(a) a.bottone { margin-left: 10px; vertical-align: baseline; }

/* La croce che chiude un avviso persistente. In alto a destra dentro la nota,
   fuori dal flusso del testo: un avviso lungo tre righe non deve spostarla, e
   il testo non deve infilarcisi sotto — per questo il padding a destra. */
.avvisi .nota.con-chiusura { position: relative; padding-right: 38px; }

.avvisi .nota .chiudi-avviso {
   position: absolute;
   top: 6px;
   right: 6px;
   width: 26px;
   height: 26px;
   margin: 0;
   padding: 0;
   font-size: 17px;
   line-height: 1;
   color: var(--carta);
   background: none;
   border: 0;
   border-radius: 4px;
   opacity: .65;
   cursor: pointer;
}
.avvisi .nota .chiudi-avviso:hover { opacity: 1; background: rgb(255 255 255 / .12); }
.avvisi .nota .chiudi-avviso:focus-visible { opacity: 1; outline: 2px solid var(--carta); outline-offset: 1px; }

/* Gli avvisi della rete portano una frase intera, non tre parole: il pulsante
   accanto al testo lo spezzava a metà dell'ultima riga. Qui va sotto, dove si
   legge come quello che è — la cosa da fare dopo aver letto. */
.avvisi .rete-caduta button,
.avvisi .rete-tornata button,
.avvisi .nota:has(a) a.bottone { display: block; margin: 12px 0 0; }
.avvisi .nota.error { border-left-color: var(--allerta); }

@keyframes comparsa { from { opacity: 0; translate: 0 10px; } }
@keyframes congedo  { to { opacity: 0; translate: 0 6px; } }

@media (prefers-reduced-motion: reduce) {
   .avvisi .nota { animation: none; }
}

/* la riga su cui si è appena agito si illumina, così si ritrova a colpo d'occhio */
.voce:target { background: color-mix(in srgb, var(--segnale) 12%, white); }

.gia-dentro {
   font-size: 12px;
   color: var(--inchiostro-60);
   white-space: nowrap;
}
.gia-dentro b { font-family: var(--dato); color: var(--inchiostro); }

/* -------------------------------------------------------------- lente ---
   Ingrandimento della fotografia: serve all'agente che mostra l'occhiale al
   cliente. Apre e chiude con l'ancora, senza una riga di JavaScript. */

.ritratto { position: relative; display: grid; text-decoration: none; cursor: zoom-in; }

/* A SINISTRA, perche' a destra c'e' gia' la targhetta del colore: comparendo
   al passaggio del mouse le finiva sopra, e per un attimo si leggevano due
   parole sovrapposte proprio dove si guarda quale colore si sta vedendo. */
.ritratto .ingrandisci {
   position: absolute;
   left: 12px;
   bottom: 12px;
   padding: 6px 11px;
   font-size: 10.5px;
   font-weight: 500;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
   background: rgb(255 255 255 / .92);
   border: 1px solid var(--linea);
   border-radius: 3px;
   opacity: 0;
   transition: opacity .14s ease;
}
.ritratto:hover .ingrandisci,
.ritratto:focus-visible .ingrandisci { opacity: 1; }

.lente {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 50;
   place-items: center;
   padding: 4vmin;
}
.lente:target { display: grid; }

.lente .velo {
   position: absolute;
   inset: 0;
   background: rgb(26 33 36 / .93);
}
.lente img {
   position: relative;
   max-width: min(1100px, 92vw);
   max-height: 90vh;
   object-fit: contain;
   background: var(--carta);
   padding: 3vmin;
   border-radius: 4px;
}
/* LA X STA A SINISTRA, e non a destra dov'e' naturale metterla: a destra
   cadeva esattamente sopra «Esci», e su un telefono bastava mancarla di un
   dito — o il click fantasma che arriva dopo il tocco, quando la lente si e'
   gia' chiusa — per ritrovarsi fuori dal portale con l'ordine a meta'. A
   sinistra sotto c'e' il logotipo: sbagliare mira riporta al catalogo, che si
   rifa' in un tocco. Chiesto il 03/11/2026.

   ponytail: lo spazio in alto legge env(safe-area-inset-top), che pero' vale
   zero finche' il meta viewport non porta viewport-fit=cover — oggi non ce
   l'ha. La riga e' pronta per quel giorno, non e' una difesa attiva. Se su
   iPhone la X continuasse a non rispondere, la causa resta la fascia in cima
   che Safari si riserva per riaprire la barra: li' si scende di una trentina
   di pixel, o la X va in basso accanto al conteggio. */
.lente .chiudi {
   position: absolute;
   top: max(16px, 3vmin, calc(env(safe-area-inset-top, 0px) + 8px));
   left: max(16px, 3vmin);
   display: grid;
   place-items: center;
   /* 48px: il minimo perche' un dito lo prenda senza mirare */
   width: 48px;
   height: 48px;
   font-size: 26px;
   line-height: 1;
   color: rgb(255 255 255 / .8);
   text-decoration: none;
   border: 1px solid rgb(255 255 255 / .25);
   border-radius: 50%;
}
.lente .chiudi:hover { color: var(--carta); border-color: rgb(255 255 255 / .6); }

/* LO SLIDER DELLA LENTE (task #13): frecce ai lati e il conto in basso. Le
   frecce sono collegamenti alla lente vicina — vedi `_lente.html` — e qui hanno
   solo la forma: grandi, perché si toccano col dito su un tablet in piedi. */
.lente .scorri {
   position: absolute;
   top: 50%;
   translate: 0 -50%;
   display: grid;
   place-items: center;
   width: 56px;
   height: 56px;
   font-size: 40px;
   line-height: 1;
   color: rgb(255 255 255 / .85);
   text-decoration: none;
   border: 1px solid rgb(255 255 255 / .25);
   border-radius: 50%;
   background: rgb(26 33 36 / .4);
}
.lente .scorri:hover { color: var(--carta); border-color: rgb(255 255 255 / .6); }
.lente .precedente { left: max(12px, 2vmin); }
.lente .successiva { right: max(12px, 2vmin); }
.lente .conta {
   position: absolute;
   bottom: max(14px, 2.5vmin);
   left: 50%;
   translate: -50% 0;
   font-size: 13px;
   letter-spacing: .08em;
   color: rgb(255 255 255 / .8);
}

/* quante fotografie ci sono dietro la prima, sul ritratto e sulla miniatura */
.quante {
   position: absolute;
   right: 8px;
   bottom: 8px;
   padding: 2px 7px;
   font-size: 11px;
   letter-spacing: .06em;
   color: var(--inchiostro-60);
   background: rgb(255 255 255 / .92);
   border: 1px solid var(--linea);
   border-radius: 3px;
}
.miniatura { position: relative; }
.miniatura .quante { right: 2px; bottom: 2px; padding: 0 4px; font-size: 10px; }

/* l'ancora non deve finire sotto la testata appiccicata in alto */
.voce[id] { scroll-margin-top: 130px; }
.blocco-locale[id] { scroll-margin-top: 130px; }

.bottone[disabled] { opacity: .55; cursor: default; }

/* --------------------------------------------------- righe di articolo --
   Erano righe flessibili: quelle con la targa «nell'ordine» spingevano i
   pulsanti più a sinistra delle altre, e l'elenco risultava sfalsato.
   Colonne fisse, uguali per tutte, con la casella della targa riservata
   anche quando non c'è niente dentro. */

/* La riga di una variante, dentro la colonna d'azione.
 *
 * Quattro colonne: colore, prezzo, comandi, stato nell'ordine. Le misure sono
 * quelle che servono al contenuto e non frazioni della larghezza, perché la
 * colonna cambia di molto fra un tablet e un monitor: con `1fr` sui comandi,
 * il campo della quantità diventava largo quanto il nome del colore.
 *
 * `min-height` e non `height`: un nome di colore lungo va a capo invece di
 * essere tagliato — è quello che il cliente sente dire ad alta voce. */
.voce.articolo {
   display: grid;
   grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
   align-items: center;
   gap: 0 12px;
   min-height: 84px;
}

/* La miniatura del colore sta DENTRO la cella del nome, non in una colonna
   sua: come colonna separata, le righe che hanno la fotografia scalavano di
   un posto tutte le altre celle e prezzo e pulsanti finivano fuori asse
   rispetto alle righe senza. Oggi la foto propria ce l'ha una variante su
   sette, quindi il disallineamento era la norma. */
.voce.articolo .colore-cella {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

/* IL TESTO NON ESCE DALLA CELLA QUANDO C'È LA MINIATURA.
   La colonna del colore prende quello che avanza dalle altre tre, e con la
   fotografia accanto restavano quaranta pixel scarsi per nome, marcatura e
   codice: il codice — «ABLASCO-C01-47», che in monospaziato fa un centinaio di
   pixel — usciva dalla cella e finiva a scorrere sotto la miniatura, slegato
   dal nome a cui appartiene. Ora quella riga va a capo dentro la cella, e la
   riga cresce in altezza invece di sbordare di lato. */
.voce.articolo .colore-cella .testo { min-width: 0; }
.voce.articolo .colore-cella .sotto {
   flex-wrap: wrap;
   row-gap: 2px;
}
.voce.articolo .colore-cella .sotto > * { overflow-wrap: anywhere; }
.voce.articolo .colore-cella .miniatura {
   /* SI STRINGE SE LA CELLA NON LA TIENE. Centoventi pixel rigidi piu' la
      marcatura, che non va a capo, fanno un minimo di 172: dove la colonna del
      colore ne ha centoquaranta — la scheda prodotto appena sopra i 900px, e
      la pagina fra i 1200 e i 1300 — quel minimo usciva dalla cella e finiva
      sotto i pulsanti della quantita'. Una fotografia piu' piccola si guarda
      lo stesso; due cose sovrapposte non si leggono (16/10/2026). */
   flex: 0 1 auto;
   min-width: 0;
   width: var(--miniatura);
   aspect-ratio: 3 / 2;
   border: 1px solid rgba(42, 52, 57, .25);
   display: grid;
   place-items: center;
   overflow: hidden;
}
.voce.articolo .colore-cella .miniatura img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
}

.voce.articolo .prezzi { padding-left: 0; margin-left: 0; text-align: right; }
.voce.articolo .quantita { margin: 0; justify-self: end; }
.voce.articolo .gia-dentro { justify-self: end; text-align: right; }

/* Il nome del colore e il codice stanno su due righe, non in fila: nella
   colonna stretta andavano a capo parola per parola, e «ALDRICH-C01-43»
   diventava tre righe da una sillaba. */
.voce.articolo .nome {
   font-size: 16px;
   font-weight: 500;
   letter-spacing: .04em;
}
.voce.articolo .sotto {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 10px;
   margin-top: 4px;
}
/* La marcatura non si spezza mai: «52□17» sono cinque caratteri e a capo in
   mezzo non vogliono dire niente. IL CODICE INVECE SI SPEZZA se non c'e'
   spazio, e la riga sopra — `overflow-wrap: anywhere` sulla cella del colore —
   esiste proprio per questo: con `nowrap` anche qui quella riga non valeva
   niente, perche' `white-space` decide prima. «AMG100-C01-52» faceva cento
   pixel rigidi, e dove la colonna ne aveva centoquaranta il codice usciva
   dalla cella e finiva SOTTO i pulsanti della quantita' — si vedeva fra i 900
   e i 980px e fra i 1200 e i 1300, dove la colonna del colore e' piu' stretta
   (16/10/2026). */
.voce.articolo .sotto .marcatura { white-space: nowrap; }

/* Sotto i 1100px i comandi scendono sotto al nome invece di stringersi: un
   campo numerico più stretto di così non si centra col dito. */
@media (max-width: 1100px) {
   .voce.articolo {
      grid-template-columns: minmax(0, 1fr) max-content;
      row-gap: 12px;
   }
   .voce.articolo .prezzi { justify-self: end; }
   .voce.articolo .quantita { grid-column: 2; }
   .voce.articolo .gia-dentro { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* togliere dall'ordine dalla scheda del prodotto, senza passare dall'ordine */
.gia-dentro {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 7px;
   min-height: 30px;
}
.gia-dentro .dentro { white-space: nowrap; }

.gia-dentro form.togli { display: flex; }
.gia-dentro form.togli button {
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   padding: 0;
   font: inherit;
   font-size: 19px;
   line-height: 1;
   color: var(--inchiostro-35);
   background: none;
   border: 1px solid var(--linea-forte);
   border-radius: 3px;
   cursor: pointer;
}
.gia-dentro form.togli button:hover {
   color: var(--allerta);
   border-color: var(--allerta);
}

/* ------------------------------------------------- intestazione righe ---
   Le colonne senza nome si indovinano: il prezzo forse, «Non disponibile»
   forse, il resto no. L'intestazione usa la stessa griglia delle righe, così
   ogni etichetta cade esattamente sopra la sua colonna. */

.voce.articolo.intestazione {
   min-height: 0;
   padding: 11px 16px;
   background: var(--servizio);
   border-bottom: 1px solid var(--linea);
   /* 11px e --inchiostro-60: a 10,5px e col grigio del fondo scuro, «Colore
      Prezzo Pezzi» facevano 2,1:1 sul proprio fondo — misurato il 04/11/2026,
      cioe' le intestazioni della tabella erano le parole meno leggibili della
      pagina. */
   font-size: 11px;
   font-weight: 500;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
   cursor: default;
}
.voce.articolo.intestazione:hover { background: var(--servizio); }
.voce.articolo.intestazione .prezzi { display: block; text-align: right; }
.voce.articolo.intestazione .quantita { display: block; justify-self: end; }

@media (max-width: 1000px) {
   .voce.articolo.intestazione { display: none; }
}

/* ------------------------------------------------ colonne che coincidono --
   Ogni riga è una griglia indipendente: con una colonna `max-content` ognuna
   la dimensiona sul PROPRIO contenuto, così l'intestazione (dove c'è solo la
   parola «Pezzi») finiva su colonne diverse dalle righe (dove ci sono campo e
   pulsante). Larghezze fisse su tutte le colonne tranne la prima: è l'unico
   modo perché griglie separate si incolonnino davvero. */



.voce.articolo .prezzi,
.voce.articolo.intestazione .prezzi { justify-self: end; text-align: right; }


.voce.articolo .quantita,
.voce.articolo.intestazione .quantita { justify-self: start; }

.voce.articolo .gia-dentro,
.voce.articolo.intestazione .gia-dentro { justify-self: end; }

@media (max-width: 1000px) {
   .voce.articolo {
      grid-template-columns: minmax(0, 1fr) max-content;
   }
   .voce.articolo .quantita { justify-self: end; }
}

/* la targa con la croce non ci stava in 116px: «nell'ordine: 50» più il
   pulsante sono circa 125, e sbordava sulla colonna dei pulsanti */
.voce.articolo,
.voce.articolo.intestazione {
   /* nome · prezzo · quantita' · targa. Erano cinque: la colonna della
      disponibilita' e' sparita insieme al dato che non esisteva. */
   grid-template-columns: minmax(0, 1fr) 140px var(--colonna-qta) 152px;
}

/* Senza prezzi accesi la colonna non c'e' proprio, come nell'app: una colonna
   intestata «Prezzo» e vuota sembra un guasto. */
.senza-prezzi .voce.articolo,
.senza-prezzi .voce.articolo.intestazione {
   grid-template-columns: minmax(0, 1fr) var(--colonna-qta) 152px;
}
.gia-dentro .dentro { white-space: nowrap; }

@media (max-width: 1000px) {
   .voce.articolo { grid-template-columns: minmax(0, 1fr) max-content; }
}

/* ======================================================================
   TELEFONO — la riga di articolo si ricompone
   A due colonne il nome finiva schiacciato in centoventi pixel e i blocchi
   si sparpagliavano su cinque livelli. Qui la riga prende tre livelli
   espliciti: prima cosa si compra, poi a quanto e se c'è, infine quanto
   ordinarne.
   ====================================================================== */

@media (max-width: 640px) {
   /* A PREZZI SPENTI le colonne fisse sono scritte con una classe in piu'
      (`.senza-prezzi .voce.articolo`): a pari ordine vincono loro, e sul
      telefono la riga restava a tre colonne fisse — 224 di quantita' piu' 152
      di «nell'ordine» — sforando lo schermo. Vanno ripetute qui. */
   .senza-prezzi .voce.articolo,
   .senza-prezzi .voce.articolo.intestazione { grid-template-columns: 1fr auto; }

   .voce.articolo {
      grid-template-columns: 1fr auto;
      row-gap: 10px;
      column-gap: 14px;
      padding: 15px 16px;
      align-items: center;
   }

   /* il nome del colore, o del ricambio, occupa tutta la prima riga */
   .voce.articolo > :first-child { grid-column: 1 / -1; }

   .voce.articolo .prezzi { grid-column: 1; justify-self: start; text-align: left; padding-left: 0; }
   .voce.articolo .quantita { grid-column: 1; justify-self: start; margin: 0; }
   .voce.articolo .gia-dentro { grid-column: 2; justify-self: end; }

   .voce.articolo .nome { font-size: 16px; }

   /* la scheda del prodotto: foto sopra, dati sotto, niente due colonne */
   .scheda { grid-template-columns: 1fr; gap: 18px; }
   .ritratto { aspect-ratio: 4 / 3; padding: 18px; }
   .frontespizio { gap: 4px 12px; }

   /* i totali dell'ordine e il modulo di invio a tutta larghezza */
   .conto dl { max-width: none; }
   .invio { max-width: none; padding: 16px; }

   /* le specifiche restano due colonne, ma la prima si stringe */
   .specifiche { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
   .specifiche dt { padding: 10px 12px 10px 12px; }
   .specifiche dd { padding: 10px 12px 10px 0; }
}

/* ======================================================================
   TELEFONO — la navigazione resta in testata, sotto la fascia
   Per un periodo scendeva in fondo allo schermo, fissata, perche' in alto
   le voci non ci stavano e si dovevano trascinare. Torna in testata
   (16/10/2026), e siccome la testata e' `sticky` resta raggiungibile
   scorrendo come faceva la barra in fondo.

   E QUI VA A CAPO, non sta su una riga sola. Ci ha provato per mezza
   giornata con una griglia a colonne uguali: a 390px le sette voci
   prendono una colonna da 47px, e «SCADENZIARIO» a 10,5px ne vuole
   novanta — il testo non si accorcia (`white-space: nowrap`), sfora la
   sua colonna e finisce coperto da quella accanto. Mandarle a capo
   costa una seconda riga di testata e non nasconde niente, che e'
   l'unica cosa che una barra di navigazione non puo' fare.
   ====================================================================== */

@media (max-width: 640px) {
   .testata .fascia { min-height: 46px; gap: 12px; }
   .testata .logotipo b { font-size: 19px; }
   .testata .logotipo i { font-size: 9px; letter-spacing: .36em; text-indent: .36em; }

   .testata .chi .nome { max-width: 62vw; font-size: 13.5px; }

   .testata .rotta {
      flex-wrap: wrap;
      justify-content: center;
      gap: 0 2px;
      /* il margine laterale della pagina qui non serve: sono 48px su 320,
         cioe' una voce in meno per riga */
      padding: 4px 6px 6px;
      overflow: visible;              /* niente trascinamento: vanno a capo */
      border-top: 1px solid rgb(255 255 255 / .12);
   }

   .testata .rotta a {
      padding: 9px 8px 10px;
      font-size: 12px;
   }
   .testata .rotta a.qui::after { left: 8px; right: 8px; }

   /* il filo che stacca «Archivio» non ha senso quando le voci vanno a
      capo: separa due righe diverse, e quei 17px in piu' sono proprio
      quelli che mandano a capo una voce in piu' */
   .testata .rotta a.servizio::before { display: none; }

   /* la riga che segna dove sei, stretta quanto la voce */
   .testata .rotta a.qui::after { left: 6px; right: 6px; }
}

/* --------------------------------------------------- archivio locale ---
   La pagina da cui l'agente si porta i dati sul dispositivo. Poche cose:
   quello che c'è, quanto pesa, e i due pulsanti.                        */

.testo-lungo { max-width: 62ch; }

.stato-archivio { margin: 18px 0; }
.stato-archivio p { margin: 0; color: var(--inchiostro-60); }

.azioni-archivio {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 18px 0 0;
}

.avanzamento {
   margin: 14px 0 0;
   padding: 12px 14px;
   font-family: var(--dato);
   font-size: 13px;
   background: var(--servizio);
   border-left: 3px solid var(--segnale);
}

.nota-piccola {
   margin-top: 26px;
   font-size: 13px;
   color: var(--inchiostro-60);
}

/* ------------------------------------------------- stato di un ordine ---
   Due stati soli, e sono quelli che l'agente conosce dall'applicazione in
   uso: «Ricevuto» quando l'ordine è arrivato ma nessuno l'ha ancora preso in
   carico, «Acquisito» quando è entrato nel gestionale. Il verde è un segnale,
   quindi tocca solo il secondo: è lo stato che chiude la faccenda.         */

.bollo.stato-RI { background: var(--inchiostro-60); }
.bollo.stato-AQ { background: var(--segnale-scuro); }

.nota-ordine {
   margin: 0 0 20px;
   padding: 12px 14px;
   background: var(--servizio);
   border-left: 3px solid var(--linea-forte);
   white-space: pre-line;
}


/* Il carrello sta a destra, staccato dalle voci di consultazione: è l'unica
   che riguarda una cosa che si sta facendo, non una che si guarda.

   SOLO SOPRA I 640px, e la condizione non è un dettaglio: sul telefono la
   barra va a capo, e un margine automatico su una riga che va a capo apre un
   buco in mezzo alla barra invece di spingere in fondo. Sta scritto qui e non
   come eccezione nel blocco del telefono perché quel blocco viene PRIMA nel
   foglio: a pari specificità vince questa riga, e l'eccezione non si vedrebbe
   mai (16/10/2026). */
@media (min-width: 641px) {
   .testata .rotta a.carrello { margin-left: auto; }
   /* senza cliente il carrello non c'e': «Archivio» spinge da sola, e il filo
      non ha niente da separare. Per un agente prima c'e' «Scegli un cliente» */
   .testata .rotta a.servizio:first-child,
   .testata .rotta .soggetto + a.servizio { margin-left: auto; }
   .testata .rotta a.servizio:first-child::before,
   .testata .rotta .soggetto + a.servizio::before { display: none; }
}

/* ------------------------------------------------- prezzi a interruttore ---
   Spenti finché non si accendono, come nell'applicazione in uso. Il prezzo
   d'acquisto è quello che l'agente non vuole sullo schermo quando lo gira
   verso il cliente; quello al pubblico serve invece proprio a mostrarglielo. */

.prezzi .netto,
.prezzi .sconto,
.prezzi .senza-prezzo { display: none; }
.prezzi .pubblico { display: none; }

.mostra-ingrosso .prezzi .netto,
.mostra-ingrosso .prezzi .sconto,
.mostra-ingrosso .prezzi .senza-prezzo { display: block; }
.mostra-pubblico .prezzi .pubblico { display: block; }
/* QUANDO E' L'UNICO PREZZO A VIDEO non e' una nota: e' quello che si legge al
   cliente, e con il d'acquisto spento restava scritto in piccolo da solo. */
.mostra-pubblico:not(.mostra-ingrosso) .voce.articolo .prezzi .pubblico {
   font-size: 14.5px;
   font-weight: 500;
   color: var(--inchiostro);
}

/* L'ORDINE NON È IL CATALOGO, e l'interruttore lì non deve arrivare.
   In catalogo il prezzo si nasconde perché l'agente gira il tablet verso il
   cliente; nell'ordine il prezzo è l'oggetto stesso della pagina, e senza non
   si capisce cosa si sta per mandare al gestionale.

   Non era una scelta, era una svista: la regola che nasconde nasce globale e
   si annulla con una classe che `prezzi.js` scrive solo dove trova il pannello
   degli interruttori. Nella pagina dell'ordine quel pannello non c'è, lo
   script esce subito, la classe non arriva e gli importi di riga restavano
   nascosti SEMPRE — presenti nel markup, larghi zero. Segnalato dall'utente il
   17/09/2026 come «non vedo il prezzo totale nelle righe». */
.riga-ordine .prezzi .netto,
.riga-ordine .prezzi .sconto,
.riga-ordine .prezzi .senza-prezzo,
.riga-ordine .prezzi .pubblico { display: block; }

.opzioni-vista {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 22px;
   margin: 0 0 16px;
   padding: 11px 14px;
   background: var(--servizio);
   border: 1px solid var(--linea);
   border-radius: 3px;
}

.titolo-opzioni {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--inchiostro-35);
}

.opzioni-vista label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--inchiostro-60);
   cursor: pointer;
}

.opzioni-vista input { width: 17px; height: 17px; accent-color: var(--segnale-scuro); }
.opzioni-vista label:has(input:checked) { color: var(--inchiostro); font-weight: 500; }

/* Niente prezzi accesi, niente colonna: come nell'app, dove il riquadro dei
   prezzi non viene proprio costruito. Una colonna intestata «Prezzo» che resta
   vuota sembra un guasto, ed e' esattamente quello che e' successo. */
.senza-prezzi .prezzi,
.senza-prezzi .voce.articolo.intestazione .prezzi { display: none; }

/* Le immagini si possono spegnere: serve su linea lenta, ed e' un'opzione che
   l'app ha sempre avuto. */
/* «Immagini» spente toglie le miniature dagli ELENCHI — varianti e ricambi —
   che è dove occupano spazio: righe alte 84px invece di una riga di testo, e
   chi le spegne lo fa per vederne di più in una schermata. La colonna di
   sinistra resta com'è: la fotografia grande, la striscia dei colori e i
   dettagli sono la scheda del prodotto, e non si allungano con le righe
   (02/10/2026; prima si spegneva anche quella). */
.senza-immagini .voce.articolo .miniatura { display: none; }

/* --------------------------------------- una quantita' scritta e non applicata
   Nella scheda prodotto il numero si scrive e poi si preme «Aggiungi»: chi lo
   scrive e passa alla riga dopo crede di averlo messo nell'ordine, e se ne
   accorge dal carrello vuoto. Il pulsante li' serve — imposta la quantita'
   invece di sommarla, quindi e' anche il modo di correggere un numero — e
   allora non si cambia come si salva: si dice che non e' salvato.

   Il segno e' sulla RIGA e non solo sul pulsante: scorrendo ventiquattro
   varianti si deve vedere da lontano quali sono rimaste indietro.          */
.voce.da-salvare {
   background: #fff8f4;
   box-shadow: inset 3px 0 0 var(--urgente);
}

.voce.da-salvare form.quantita .campo {
   border-color: var(--urgente);
   background: var(--carta);
}

/* IL PULSANTE DIVENTA ARANCIONE E PULSA. Un cambio di colore si vede solo
   guardando, e chi ha appena scritto il numero sta gia' guardando la riga
   dopo: il movimento invece si prende con la coda dell'occhio, ed e' l'unico
   modo perche' un elenco di ventiquattro varianti non lasci indietro quella
   che manca da premere.

   Batte il verde del primario per SPECIFICITA', non per ordine: la regola ha
   due classi in piu', quindi resta valida ovunque stia nel foglio. */
.voce.da-salvare form.quantita .bottone {
   display: inline-flex;
   align-items: center;
   color: var(--carta);
   background: var(--urgente);
   border-color: var(--urgente);
   animation: chiama 1.1s ease-in-out infinite;
}
.voce.da-salvare form.quantita .bottone:hover {
   background: var(--urgente-cupo);
   border-color: var(--urgente-cupo);
}

/* il pallino resta: dove il movimento e' spento e' il solo segno che distingue
   questo pulsante da quello della riga accanto */
.voce.da-salvare form.quantita .bottone::after {
   content: '';
   width: 6px;
   height: 6px;
   margin-left: 7px;
   border-radius: 50%;
   background: currentColor;
   opacity: .85;
}

/* NON LAMPEGGIA A INTERMITTENZA: un testo che si spegne e si riaccende non si
   legge, e su uno schermo intero da' fastidio in pochi secondi. Qui pulsa
   l'ALONE intorno — il pulsante resta pieno e leggibile — e il colore si
   scalda appena. */
@keyframes chiama {
   0%, 100% { box-shadow: 0 0 0 0 rgb(201 64 13 / .55); }
   70%      { box-shadow: 0 0 0 9px rgb(201 64 13 / 0); }
}

/* Chi ha chiesto meno animazioni al sistema non vede il movimento: restano il
   colore, il bordo del campo e il pallino, che bastano a distinguerlo. */
@media (prefers-reduced-motion: reduce) {
   .voce.da-salvare form.quantita .bottone { animation: none; }
}

/* ------------------------------------------------ ricambi per variante ---
   Un ricambio è della singola montatura, non del modello: raggruppati sotto
   la loro variante si trovano a colpo d'occhio, mentre in un elenco unico
   l'asta destra del C01 sta in mezzo a quelle di altri sei colori.        */

/* I due comandi «a tutti» sopra un elenco.
   Stanno FUORI dal riquadro bianco e allineati a destra, sopra la colonna dei
   pezzi: e' la colonna su cui agiscono, e di la' l'occhio li ritrova senza
   cercarli. Larghi, perche' si premono col pollice su un tablet in piedi
   dentro un negozio. */
.assortimento {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 8px;
}

.assortimento .che {
   margin-right: auto;
   font-size: 13px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
}

/* ALTI QUANTO I PASSI DI RIGA, non di piu': quelli si usano a ogni colore,
   questi una volta ogni tanto. */
.assortimento .bottone {
   min-width: 54px;
   min-height: 42px;
   padding: 7px 12px;
   font-size: 14px;
   font-variant-numeric: tabular-nums;
}

/* GLI STESSI DUE COLORI DEI PASSI DI RIGA (04/11/2026): questi comandi fanno
   la stessa cosa su tutte le righe insieme, e se il verso si legge dal colore
   lo deve fare in tutti e due i posti. Erano in contorno, cioe' vestiti da
   comando secondario, e sono invece quelli che muovono venti righe in un
   colpo. Sul rosso vale la stessa deroga annotata sopra i passi. */
.assortimento .bottone[value="-1"],
.assortimento .bottone[value="1"] { color: var(--carta); }

.assortimento .bottone[value="-1"] {
   background: var(--allerta);
   border-color: var(--allerta);
}
.assortimento .bottone[value="-1"]:hover {
   background: color-mix(in srgb, var(--allerta) 85%, #000);
   border-color: color-mix(in srgb, var(--allerta) 85%, #000);
}

.assortimento .bottone[value="1"] {
   background: var(--azione);
   border-color: var(--azione);
}
.assortimento .bottone[value="1"]:hover {
   background: var(--azione-cupa);
   border-color: var(--azione-cupa);
}

/* SCORRIMENTO FLUIDO per i salti interni alla scheda: il link ai ricambi di
   un colore porta in un altro punto della STESSA pagina, e un salto secco
   lascia l'agente a chiedersi se ha cambiato schermata. Chi ha chiesto meno
   animazioni al sistema operativo continua a saltare. */
@media (prefers-reduced-motion: no-preference) {
   html { scroll-behavior: smooth; }
}

/* Il collegamento ai ricambi del colore, sotto il codice della variante.
   Discreto: è un rimando, non un comando — quelli stanno nella colonna dei
   pezzi. Ma con l'area di tocco di un pulsante, perché si preme col pollice. */
/* LA RIGA DEI RICAMBI sotto ogni variante che ne ha: a tutta larghezza, da
   toccare in qualunque punto, apre i ricambi del colore subito sotto
   (02/10/2026). Prima era un pulsante accanto al codice: su tablet troppo
   piccolo e schiacciato fra codice e stato.

   APPARTIENE ALLA VARIANTE SOPRA, e lo deve dire: niente filo fra le due, lo
   stesso fondo bianco, e il testo che parte dove parte il nome del colore. Il
   filo di separazione sta sotto la riga dei ricambi. Con il fondo grigio e il
   filo sopra si leggeva come l'inizio della variante successiva. */
.apri-ricambi + .voce { border-bottom-color: transparent; padding-bottom: 6px; }

/* LA DIVISIONE FRA UN COLORE E L'ALTRO, marcata: con i ricambi sotto, una
   variante è un blocco di due o tre fasce, e il filo leggero di prima non
   diceva dove finiva un prodotto e cominciava il successivo (02/10/2026).
   Il filo forte sta in fondo al blocco — sotto la variante se non ha ricambi,
   sotto la riga dei ricambi, o sotto i ricambi aperti — mentre dentro il
   blocco le divisioni restano leggere. */
:root { --divisione-varianti: rgba(42, 52, 57, .32); }
.elenco > .voce.articolo:not(.intestazione) { border-bottom: 1px solid var(--divisione-varianti); }
.elenco > .apri-ricambi + .voce.articolo { border-bottom-color: transparent; }
/* LA FASCIA E' IL COMANDO, e dal 04/11/2026 si vede che lo e'.
   Prima: la fascia era premibile per intero (625x49px alla larghezza del
   monitor) ma dentro ci stava una pillola grigia di 220x34, cioe' un terzo.
   Chi non provava a cliccare fuori dalla pillola non lo scopriva mai, e mirava
   al bersaglio piccolo; e la pillola — fondo chiaro su bianco, bordo tenue,
   testo grigio — accanto ai passi pieni di colore sembrava disattivata.
   Ora il fondo e il filo sono della fascia, la freccia sta a filo destro, e
   quello che si vede e' quello che si preme. */
.striscia-ricambi {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   padding: 10px 16px;
   /* niente piu' maiuscoletto spaziato: e' il nome di una cosa, non
      un'etichetta di servizio */
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .01em;
   color: var(--inchiostro);
   /* NIENTE VELO E NIENTE FILO SPESSO A SINISTRA. Erano tre fasce colorate
      intercalate fra i colori, e l'elenco — che e' la ragione per cui la
      scheda si apre — si leggeva a pezzi. Che sia un comando lo dicono la
      parola nel colore dei ricambi, la freccia a destra e i 44px di altezza
      su cui si preme, non un fondo diverso. */
   color: var(--ricambi);
   background: var(--carta);
   border-bottom: 1px solid var(--divisione-varianti);
   cursor: pointer;
   user-select: none;
}
@media (min-width: 641px) {
   /* i 22px di margine delle righe, a cui «Colore» e il contenuto sono a filo */
   .prodotto .striscia-ricambi { padding-left: 22px; padding-right: 22px; }
}
/* A FILO DEL BLOCCO, non del nome del colore. Il rientro
   `16px + miniatura + 12px` serviva alla pillola, che era un oggetto dentro la
   fascia e aveva senso allineare al testo della riga sopra. Ora la fascia E'
   l'oggetto: rientrata lasciava l'etichetta a galleggiare in mezzo al vuoto,
   a 165px dal bordo su un telefono da 390. */
.striscia-ricambi .etichetta-ricambi {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}
/* il nome del colore: stessa riga, peso normale, cosi' «Ricambi» resta la
   parola che si cerca e «C01» quella che dice di chi sono */
.striscia-ricambi .di-chi {
   font-weight: 400;
   color: var(--inchiostro-60);
}
.striscia-ricambi .quanti {
   font-family: var(--dato);
   font-size: 11px;
   letter-spacing: 0;
   padding: 1px 6px;
   color: var(--ricambi);
   background: var(--carta);
   border: 1px solid color-mix(in srgb, var(--ricambi) 45%, var(--carta));
   border-radius: 2px;
}
/* la freccia a filo destro: e' il verso in cui si apre, e tiene insieme le due
   estremita' della fascia, che altrimenti sarebbe una parola e tanto vuoto */
.striscia-ricambi::after {
   content: '';
   width: 7px; height: 7px;
   margin-left: auto;
   border-right: 1.5px solid var(--ricambi);
   border-bottom: 1.5px solid var(--ricambi);
   transform: rotate(45deg) translate(-2px, -2px);
}
.striscia-ricambi:hover { background: color-mix(in srgb, var(--ricambi) 7%, var(--carta)); }
.apri-ricambi:checked + .voce + .striscia-ricambi::after { transform: rotate(-135deg) translate(-1px, -1px); }
/* aperta, il filo passa sotto i ricambi: variante, riga e ricambi sono un
   blocco solo */
.apri-ricambi:checked + .voce + .striscia-ricambi { border-bottom-color: transparent; }

/* i ricambi della variante: nascosti finché la riga non li apre */
.ricambi-variante { display: none; }
.apri-ricambi:checked + .voce + .striscia-ricambi + .ricambi-variante {
   display: block;
   margin: 0 0 0 28px;            /* rientrati: si legge che sono «suoi» */
   padding: 0 0 8px 14px;
   border-left: 2px solid var(--inchiostro);
}
/* aperta, il filo forte passa sotto i ricambi, a tutta larghezza: parte da
   prima del rientro, dal bordo dell'elenco */
.ricambi-variante { position: relative; }
.apri-ricambi:checked + .voce + .striscia-ricambi + .ricambi-variante::after {
   content: '';
   position: absolute;
   left: -30px;               /* il rientro più il filo verticale */
   right: 0;
   bottom: 0;
   border-bottom: 1px solid var(--divisione-varianti);
}
/* dentro i ricambi le divisioni restano leggere, anche senza rete dove stanno
   in un elenco loro */
.ricambi-variante .elenco > .voce.articolo:not(.intestazione),
.ricambi-variante .voce.articolo { border-bottom-color: var(--linea); }
.ricambi-variante .voce.articolo:last-child { border-bottom: 0; }
.ricambi-variante .assortimento { margin: 8px 0; }
/* senza rete i ricambi stanno in un elenco proprio dentro il gruppo: niente
   secondo riquadro dentro il primo */
.ricambi-variante > .elenco { margin: 0; border: 0; box-shadow: none; }

/* IL GRUPPO RAGGIUNTO dal link si accende, e poi si spegne.
   Portarci la vista non basta: sotto la testata fissa un gruppo somiglia
   all'altro, e senza un segno l'agente non sa se e' arrivato al C01 o al C03.
   `:target` tiene il segno anche senza JavaScript; la classe la mette lo
   script quando si ripreme lo stesso link, che `:target` da solo non
   riconoscerebbe come un cambiamento. */
.gruppo-ricambi[id] { scroll-margin-top: 130px; }

.gruppo-ricambi:target,
.gruppo-ricambi.acceso {
   outline: 2px solid var(--segnale);
   outline-offset: 5px;
   border-radius: 2px;
}

/* il bordo RESTA finche' quello e' il gruppo scelto — e' il segno di dove si
   e' arrivati — mentre il fondo fa un lampo e si spegne: serve a farsi trovare
   dall'occhio nel momento in cui la pagina si ferma, non dopo */
@media (prefers-reduced-motion: no-preference) {
   .gruppo-ricambi:target,
   .gruppo-ricambi.acceso { animation: accendi 1.8s ease-out 1; }
}

@keyframes accendi {
   0%, 40% { background: rgba(141, 182, 0, .14); }
   100%    { background: transparent; }
}

.gruppo-ricambi { margin: 0 0 18px; }

.testa-ricambi {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 10px;
   margin: 0 0 6px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .02em;
}

.testa-ricambi .marcatura { font-size: 12px; }
.testa-ricambi .dato { font-weight: 400; font-size: 12px; }

/* ------------------------------------------------- modulo dell'anagrafica ---
   Venti campi compilati in piedi dentro un negozio: l'obiettivo è che si
   scorra dall'alto in basso senza cercare niente, e che gli errori si vedano
   accanto al campo che li ha causati.                                      */

/* Dodici colonne: ogni campo dichiara quante ne occupa, e la larghezza dice
   da sé quanto contenuto aspettarsi — due lettere la provincia, cinque cifre
   il CAP. Venti campi in colonna sola erano una lista che non finiva mai. */
/* IL MODULO DELL'ANAGRAFICA: quattro riquadri, non venti campi in fila.
   Su fondo grigio, con i titoli come unico segno fra un gruppo e l'altro, si
   leggeva come un elenco unico lungo uno schermo e mezzo. Nel resto del
   portale un blocco di cose che stanno insieme ha il suo riquadro bianco.   */
.modulo-anagrafica {
   display: grid;
   gap: 16px;
   margin-top: 6px;
}

.gruppo-anagrafica {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 0 16px;
   margin: 0;
   padding: 6px 22px 8px;
   background: var(--carta);
   border: 1px solid var(--linea);
   border-radius: 3px;
}

/* `legend` non si comporta come un elemento qualunque dentro una griglia: i
   browser lo trattano a parte, e senza questo il titolo scavalcava la prima
   riga di campi invece di stare sopra. */
.gruppo-anagrafica > .sezione {
   float: left;
   width: 100%;
   padding: 0;
   margin: 14px 0 14px;
}
.gruppo-anagrafica > .sezione + * { clear: both; }

.modulo-anagrafica .sezione { grid-column: 1 / -1; }

.campo-modulo {
   display: grid;
   align-content: start;
   gap: 4px;
   margin: 0 0 14px;
   grid-column: span 12;
}

.sp-2 { grid-column: span 2; }
.sp-3 { grid-column: span 3; }
.sp-4 { grid-column: span 4; }
.sp-6 { grid-column: span 6; }
.sp-8 { grid-column: span 8; }
.sp-12 { grid-column: span 12; }

.campo-modulo input,
.campo-modulo select {
   width: 100%;
   min-height: 46px;
   padding: 10px 12px;
   font: inherit;
   color: var(--inchiostro);
   background: var(--carta);
   border: 1px solid var(--linea-campo);
   border-radius: 3px;
}

.campo-modulo input:focus,
.campo-modulo select:focus { border-color: var(--inchiostro-60); outline: none; }

.campo-modulo .aiuto { font-size: 12px; color: var(--inchiostro-35); }
.campo-modulo .errore { font-size: 12.5px; color: var(--allerta); font-weight: 500; }
.campo-modulo.in-errore input,
.campo-modulo.in-errore select { border-color: var(--allerta); }

/* il pallino dell'obbligatorio NON e' verde: da quando il verde e' il colore
   dei pulsanti primari, un segno verde accanto a un'etichetta si legge come
   qualcosa da premere. Rosso come gli errori: dice la stessa cosa — qui manca
   qualcosa — prima che manchi davvero. */
.obbligo { color: var(--allerta); }

/* i comandi in fondo: allineati a DESTRA, dove l'occhio arriva finendo di
   compilare, e staccati dai riquadri da un filo che chiude il modulo */
.azioni-modulo {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 10px;
   margin: 6px 0 0;
   padding-top: 16px;
   border-top: 1px solid var(--linea-blocco);
}

/* Su schermo stretto la griglia si srotola: in piedi dentro un negozio, un
   campo per riga si compila senza sbagliare bersaglio. */
@media (max-width: 700px) {
   .campo-modulo,
   .sp-2, .sp-3, .sp-4, .sp-6, .sp-8 { grid-column: span 12; }
}

/* ======================================================================
   TRATTARE IL PREZZO
   Lo sconto, il prezzo concordato e gli omaggi stanno chiusi dentro un
   dettaglio che si apre per la riga su cui si sta trattando: aperti tutti
   insieme trasformerebbero l'ordine in un modulo, e nove volte su dieci
   l'agente il prezzo non lo tocca. Si aprono da soli sulle righe dove una
   trattativa c'è già, perché quelle vanno viste senza doverle cercare.
   ====================================================================== */

.trattativa { width: 100%; }

/* «Tratta il prezzo» era un testo di 12,5 pixel con quattro di margine sopra e
   sotto: un'area da toccare alta venticinque, cioè poco più di metà di quanto
   serve a un dito, e scritta in un grigio tenue con il segno «+» addirittura
   sotto la soglia di leggibilità. Su un tablet, in negozio, è il comando da cui
   passa ogni trattativa.

   Ora è un comando riconoscibile: cornice leggera, quarantaquattro pixel di
   altezza, e il testo con lo stesso contrasto del resto. Resta chiaro e non
   pieno, perché non compete con «Applica». */
.trattativa > summary {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 11px 14px;
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-radius: 3px;
   font-size: 13.5px;
   color: var(--inchiostro);
   cursor: pointer;
   list-style: none;
   user-select: none;
}
.trattativa[open] > summary {
   border-color: var(--inchiostro-35);
   margin-bottom: 4px;
}
.trattativa > summary::-webkit-details-marker { display: none; }
.trattativa > summary::before {
   content: '+';
   display: inline-block;
   width: 14px;
   font-family: var(--dato);
   /* il segno stava in un grigio che su bianco rende 2,24:1: era la parte meno
      visibile del comando meno visibile della pagina */
   color: var(--inchiostro-60);
}
.trattativa[open] > summary::before { content: '\2212'; }
.trattativa > summary:hover { border-color: var(--inchiostro); }

.trattativa .condizioni {
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 12px;
   margin: 6px 0 4px;
}
.trattativa .condizione {
   display: grid;
   gap: 3px;
}
.trattativa .condizione .campo.minuscolo { width: 96px; text-align: right; }

/* I due comandi della riga alla STESSA ALTEZZA. «Torna al listino» usa il
   carattere minuto — è un comando di servizio e non deve pesare quanto
   «Applica» — ma con un'altezza sua di sei pixel più bassa, accanto a campi
   alti il doppio, si legge come un disallineamento. Il colore resta diverso,
   la misura no. */
.trattativa .condizioni .bottone.minuto {
   padding-top: 9px;
   padding-bottom: 9px;
   line-height: 1.5;
}

/* la trattativa su tutto l'ordine è un blocco a sé: non appartiene a nessuna
   riga, e messa in fondo alle righe sembrerebbe riguardare l'ultima */
.trattativa.tutto {
   margin: 0 0 22px;
   padding: 16px 20px;
   background: var(--carta);
   border: 1px solid var(--linea);
}
.trattativa.tutto > summary {
   font-size: 13px;
   font-weight: 500;
   color: var(--inchiostro);
}
.trattativa.tutto .coppia { margin-top: 12px; }
.trattativa.tutto .nota { margin: 14px 0 0; }
.trattativa.tutto form + form { margin-top: 12px; }

/* UN CAMPO CHE CONTIENE UNA PERCENTUALE NON E' LARGO QUANTO LA PAGINA.
   Lasciati elastici, i due campi della trattativa si prendevano metà colonna
   l'uno — settecento pixel per due cifre — e la casella vuota in mezzo a tutto
   quel bianco sembrava un errore di impaginazione più che un posto dove
   scrivere. */
.trattativa.tutto .campo { max-width: 180px; }

/* la nota sotto i due comandi spiega una regola, non avverte di niente: senza
   il filo colorato a sinistra e il riquadro, che la facevano leggere come un
   allarme */
.trattativa.tutto > .nota {
   padding: 0;
   background: none;
   border: 0;
   font-size: 13px;
}

/* due campi affiancati finché c'è spazio: la condizione di pagamento e la
   data di consegna si leggono insieme, non una sotto l'altra */
.coppia {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   gap: 8px 20px;
   align-items: end;
}
.coppia > form { display: grid; gap: 6px; align-content: start; }
.coppia .bottone { justify-self: start; margin-top: 4px; }

.invio select.campo { font-family: var(--testo); }
.invio { max-width: 560px; }

.marcatura.omaggio {
   color: var(--allerta);
   border-color: color-mix(in srgb, var(--allerta) 35%, transparent);
}

.svuota { margin: 18px 0 0; }
/* «Svuota l'ordine»: il contorno e' del colore dell'avvertimento, non grigio.
   Un comando che butta via il lavoro di mezza mattinata deve dire da fermo
   quello che fa, non solo quando ci si passa sopra col dito. */
.bottone.pericolo {
   color: var(--allerta);
   border-color: var(--allerta);
}
.bottone.pericolo:hover { background: #fdf8f7; border-color: var(--allerta); }

/* LA FINESTRA DELLE DOMANDE (`conferma.js`), al posto di quella del browser.
   Lo stesso fondo scuro della lente delle fotografie, così le due finestre del
   portale si riconoscono come sue. Il pulsante dell'azione che non si disfa è
   PIENO e rosso: lì il contorno rosso di «Svuota l'ordine» non basterebbe,
   perché accanto c'è «Annulla» e i due devono distinguersi a colpo d'occhio. */
dialog.conferma {
   width: min(460px, calc(100vw - 32px));
   padding: 28px 28px 22px;
   color: var(--inchiostro);
   background: var(--carta);
   border: 0;
   border-radius: 4px;
   box-shadow: 0 18px 50px rgb(0 0 0 / .25);
}
dialog.conferma::backdrop { background: rgb(26 33 36 / .75); }
.conferma-titolo { margin: 0 0 10px; font-size: 18px; }
.conferma-testo { margin: 0; line-height: 1.5; white-space: pre-line; }
.conferma-comandi {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 24px;
}
.bottone.pericolo-pieno { color: #fff; background: var(--allerta); border-color: var(--allerta); }
.bottone.pericolo-pieno:hover { filter: brightness(.92); }

/* quanti pezzi di questo modello sono già nell'ordine: scorrendo una griglia
   di cinquanta tessere è l'unico modo per sapere dove si era arrivati */
.tessera .vetrina { position: relative; }
/* Quanto di questo modello è già nell'ordine: a FILO dell'angolo, non
   staccata, così si legge come una linguetta applicata sulla tessera e non
   come un'etichetta che galleggia sopra la fotografia. */
.tessera .in-ordine {
   position: absolute;
   top: 0;
   right: 0;
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 5px 10px;
   font-size: 9px;
   font-weight: 500;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--carta);
   background: var(--inchiostro);
   white-space: nowrap;
}
.tessera .in-ordine::before {
   content: '';
   width: 7px;
   height: 7px;
   background: var(--segnale);
}

.fuori-collezione {
   font-size: 11.5px;
   font-weight: 500;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--inchiostro-35);
   white-space: nowrap;
}

/* Gli importi che NON sono prezzi di catalogo: partite aperte, totali, residui.
   Stessa disposizione della colonna dei prezzi — a destra, incolonnati — ma
   senza l'interruttore che li nasconde: quello serve a non mostrare all'ottico
   il prezzo a cui compra l'agente, e non ha niente a che vedere con quanto
   quell'ottico deve ancora pagare. */
.importi {
   display: grid;
   justify-items: end;
   gap: 1px;
   margin-left: auto;
   padding-left: 16px;
   text-align: right;
   white-space: nowrap;
}
.importi .netto {
   font-family: var(--dato);
   font-size: 15px;
   color: var(--inchiostro);
}
.importi .netto.allarme { font-weight: 600; }
.importi .quando { font-size: 11.5px; color: var(--inchiostro-35); }

/* La fotografia di una singola variante di colore, nella sua riga.
   Serve a far vedere CHE COSA cambia fra un colore e l'altro: e' la meta'
   della scelta di un ottico, e non la sostituisce la fotografia del modello,
   che sta in cima e resta quella grande. Compare solo dove una foto del colore
   esiste davvero.

   La misura e' la stessa variabile della regola piu' specifica qui sopra
   (`.colore-cella .miniatura`), che e' quella che vince nella scheda modello:
   due numeri diversi per la stessa cosa erano una trappola per chi ne cambia
   uno solo e non vede succedere niente. */
.voce.articolo .miniatura {
   display: block;
   flex: 0 0 auto;
   width: var(--miniatura);
   aspect-ratio: 3 / 2;
   padding: 3px;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: 2px;
}
.voce.articolo .miniatura img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
}

/* Il piè di pagina delle cose di servizio: informazioni, archivio locale.
   Discreto di proposito — si cerca quando qualcosa non va, e mentre si prende
   un ordine non deve chiedere attenzione. */
/* IL PIEDE STA IN FONDO, anche quando la pagina è corta.
   Su un ordine di una riga il contenuto finisce a metà schermo e il piede
   restava appeso lì, con sotto una fascia di bianco che sembrava un pezzo di
   pagina mancante. Il corpo diventa una colonna alta quanto la finestra e il
   main si prende lo spazio che avanza. */
body { display: flex; flex-direction: column; min-height: 100dvh; }

/* `width: 100%`, e non basta `align-self: stretch`: dentro un contenitore
   flex un margine automatico sull'asse trasversale — il `margin: 0 auto` che
   centra il contenuto — ha la precedenza sull'allineamento e fa prendere
   all'elemento la larghezza del proprio CONTENUTO. Da quando il corpo e'
   diventato flex, per tenere il piede in fondo anche sulle pagine corte, le
   pagine si disegnavano strette in mezzo allo schermo con centinaia di pixel
   vuoti ai lati, pur avendo `max-width: 1040px`. Con la larghezza dichiarata
   il massimo torna a essere un massimo, e il margine automatico fa quello per
   cui c'e': centrare quando lo schermo e' piu' largo di cosi'. */
body > main { flex: 1 0 auto; width: 100%; }
body > .coda-pagina { flex: 0 0 auto; }

.coda-pagina {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 22px;
   max-width: var(--largo, 1180px);
   margin: 34px auto 26px;
   padding: 16px var(--gutter) 0;
   border-top: 1px solid var(--linea);
   font-size: 13.5px;
}
/* Erano scritti con `--inchiostro-35`, che il foglio stesso qualche riga piu'
   su definisce come «voce di navigazione spenta, SU FONDO SCURO»: qui il fondo
   e' chiaro, e quel grigio rende 2,24:1 contro il 4,5:1 che serve a leggere.
   Senza sottolineatura non si distinguevano nemmeno dal testo. Sono due
   soltanto, e uno porta alla pagina che governa il funzionamento senza rete:
   non e' roba da nascondere. */
.coda-pagina a {
   color: var(--inchiostro-60);          /* 5,35:1 su bianco */
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: var(--linea-forte);
   /* l'area da toccare era alta venti pixel: si legge bene e si prende male,
      che su un tablet e' lo stesso problema con un nome diverso */
   padding: 12px 0;
}
.coda-pagina a:hover { color: var(--inchiostro); text-decoration-color: currentColor; }

/* ==================================================================
   SCHEDA PRODOTTO — le righe dentro la colonna d'azione

   Le colonne fisse definite più sopra (140 · 196 · 152) sono state
   misurate quando l'elenco delle varianti occupava tutta la pagina.
   Dentro la scheda a due colonne lo spazio è la metà: quelle misure
   sommate lasciavano al nome del colore quattordici pixel, e il prezzo
   finiva sopra al calibro.

   Qui le colonne prendono la larghezza che serve al loro contenuto, e
   quello che avanza va al nome — che è il dato che l'agente legge ad
   alta voce al cliente.
   ================================================================== */

/* Le colonne sono FISSE, non dimensionate sul contenuto.
 *
 * Ogni riga è una griglia per conto suo: con `max-content` l'intestazione —
 * che contiene le due parole «Prezzo» e «Pezzi» — calcolava colonne strette,
 * le righe con campo e pulsante ne calcolavano di larghe, e le intestazioni
 * finivano sopra il posto sbagliato. Con misure fisse tutte le griglie
 * cadono sugli stessi incolonnamenti.
 *
 * Le misure: 224px alla quantità sono il gruppo meno-numero-piu' (120) più il
 * pulsante «Aggiorna», che è la parola più lunga che ci compare. Erano 200
 * finché il numero si scriveva soltanto: i due passi aggiunti il 16/10/2026
 * hanno allargato il gruppo, e con la vecchia misura il pulsante sbordava
 * oltre il bordo destro del riquadro.
 *
 * Dal 04/11/2026 la riga si salva da se' e `portale.js` quel pulsante lo
 * toglie, lasciando la colonna mezza vuota. La misura resta com'e' perche'
 * nel markup il pulsante c'e' ancora, per chi non ha JavaScript: stringerla
 * vorrebbe dire farlo sbordare proprio a loro. Si stringe il giorno in cui si
 * decide che senza JavaScript la scheda non ordina piu'. */
.prodotto .voce.articolo,
.prodotto .voce.articolo.intestazione {
   /* Una larghezza MINIMA qui non si può mettere: le altre tre colonne sono
      fisse, e il minimo faceva sforare la riga oltre il riquadro — «nell'ordine»
      finiva fuori e la pagina scorreva di lato. Lo spazio per il nome si trova
      togliendo una colonna, non allargando la riga: vedi la regola sotto i
      1500px, dove «nell'ordine» scende sotto al nome. */
   grid-template-columns: minmax(0, 1fr) 130px var(--colonna-qta) 140px;
   gap: 0 14px;
}

/* La classe «senza-prezzi» la scrive `prezzi.js` sul MAIN, non sulla scheda:
   scritta qui come `.prodotto.senza-prezzi` non avrebbe mai fatto presa, e a
   prezzi spenti la colonna del prezzo spariva lasciando la griglia a quattro
   colonne — il campo della quantità scivolava in quella da 130px e finiva
   sopra al codice dell'articolo. */
.senza-prezzi .prodotto .voce.articolo,
.senza-prezzi .prodotto .voce.articolo.intestazione {
   grid-template-columns: minmax(0, 1fr) var(--colonna-qta) 140px;
}

/* «NELL'ORDINE» STA SOTTO AL NOME, non in una colonna sua.
   La scheda prodotto è su due colonne, quindi l'elenco delle varianti vive in
   metà pagina: con quattro colonne, le tre fisse — prezzo, quantità e
   «nell'ordine» — ne prendono 470, e al nome restavano 113px a 1400 e 141 a
   1600, con dentro anche la miniatura. Il codice dell'articolo usciva dalla
   cella; allargando la riga invece usciva «nell'ordine», e la pagina scorreva
   di lato. Nessuna delle due si sistema con qualche pixel.

   Quella cella è la meno urgente delle tre: dice quanto è già stato preso, non
   serve a decidere. Liberata la sua colonna, il colore passa da 113 a 267px.
   Vale a ogni larghezza, perché il conto tornerebbe solo oltre i 1750px — cioè
   quasi mai.

   Scende SOTTO AL PULSANTE, non sotto al nome: è il seguito di quel comando —
   quanto hai messo dentro con quel pulsante — e sotto la fotografia sembrava
   invece una didascalia dell'immagine. */
.prodotto .voce.articolo,
.prodotto .voce.articolo.intestazione {
   grid-template-columns: minmax(0, 1fr) 130px var(--colonna-qta);
   row-gap: 6px;
}
.senza-prezzi .prodotto .voce.articolo,
.senza-prezzi .prodotto .voce.articolo.intestazione {
   grid-template-columns: minmax(0, 1fr) var(--colonna-qta);
}
.prodotto .voce.articolo .gia-dentro {
   grid-column: 3;          /* la colonna del campo e del pulsante */
   justify-self: end;
   text-align: right;
}
.senza-prezzi .prodotto .voce.articolo .gia-dentro { grid-column: 2; }
/* LA TARGA VUOTA NON PRENDE POSTO. Era una seconda riga di griglia anche senza
   niente dentro: trenta pixel di bianco sotto ogni colore, che con il filo e
   il margine facevano il vuoto fra la miniatura e «Ricambi». */
.prodotto .voce.articolo .gia-dentro:not(:has(.dentro)) { display: none; }
/* i comandi a filo destro della riga, come il resto del contenuto: la colonna
   e' piu' larga del gruppo e a destra restava una striscia vuota */
.prodotto .voce.articolo .quantita,
.prodotto .voce.articolo.intestazione .quantita { justify-self: end; }
/* nell'intestazione la quarta cella non ha testo: senza questo lascerebbe una
   riga vuota sotto i titoli delle colonne */
.prodotto .voce.articolo.intestazione > :nth-child(4) { display: none; }

/* Sotto i 1150px la colonna d'azione non regge quattro colonne: i comandi
   scendono sotto al nome. La soglia è più alta di quella delle pagine a
   piena larghezza perché qui la scheda si porta via 392px fissi. */
@media (max-width: 1150px) {
   .prodotto .voce.articolo,
   .prodotto .voce.articolo.intestazione {
      grid-template-columns: minmax(0, 1fr) max-content;
      row-gap: 12px;
   }
   .prodotto .voce.articolo .prezzi { justify-self: end; }
   .prodotto .voce.articolo .quantita { grid-column: 2; }
   .prodotto .voce.articolo .gia-dentro {
      grid-column: 1 / -1;
      justify-self: start;
      text-align: left;
   }
}

/* IL TABLET IN VERTICALE TORNA A UNA RIGA SOLA. Sotto i 900 le colonne della
   scheda si impilano e l'elenco riprende tutta la larghezza: i comandi sotto al
   nome, scritti per la colonna stretta, raddoppiavano l'altezza di ogni colore
   per niente. */
@media (min-width: 641px) and (max-width: 900px) {
   .prodotto .voce.articolo,
   .prodotto .voce.articolo.intestazione {
      grid-template-columns: minmax(0, 1fr) 130px var(--colonna-qta);
      row-gap: 6px;
   }
   .senza-prezzi .prodotto .voce.articolo,
   .senza-prezzi .prodotto .voce.articolo.intestazione {
      grid-template-columns: minmax(0, 1fr) var(--colonna-qta);
   }
   .prodotto .voce.articolo.intestazione { display: grid; }
   .prodotto .voce.articolo .quantita { grid-column: auto; }
   .prodotto .voce.articolo .gia-dentro { grid-column: 3; justify-self: end; text-align: right; }
   .senza-prezzi .prodotto .voce.articolo .gia-dentro { grid-column: 2; }
}

/* SOTTO I 460px NIENTE PIU' DUE COLONNE, in nessuna delle due pagine: la
   casella coi suoi due passi piu' il pulsante fanno 222px e «nell'ordine: 12»
   con la croce ne fa 116: a fianco non ci stanno finche' la riga non arriva a
   circa 460px, e sotto quella misura la pagina scorreva di lato. Succedeva
   anche prima dei due passi, ma piu' in basso e di pochi pixel (16/10/2026).

   Sta QUI e non nel blocco del telefono piu' sopra perche' le regole della
   scheda prodotto hanno una classe in piu': a pari specificita' vince l'ultima
   scritta, e piu' sopra non farebbe presa. */
@media (max-width: 460px) {
   .voce.articolo,
   .voce.articolo.intestazione,
   .senza-prezzi .voce.articolo,
   .senza-prezzi .voce.articolo.intestazione,
   .prodotto .voce.articolo,
   .prodotto .voce.articolo.intestazione,
   .senza-prezzi .prodotto .voce.articolo,
   .senza-prezzi .prodotto .voce.articolo.intestazione { grid-template-columns: minmax(0, 1fr); }
   .prodotto .voce.articolo .prezzi,
   .prodotto .voce.articolo .quantita { grid-column: 1; justify-self: start; }

   /* «nell'ordine» torna sotto al comando. Le quattro scritture servono tutte:
      a prezzi spenti la regola che lo manda in colonna 2 ha due classi in piu'
      e vincerebbe, e con una griglia a colonna sola quella colonna 2 e'
      implicita — la targa finiva nella STESSA riga del pulsante, sopra di lui.
      E' il difetto visto a video il 16/10/2026 sulla scheda prodotto con i
      prezzi spenti, fra i 320 e i 430px. */
   .voce.articolo .gia-dentro,
   .senza-prezzi .voce.articolo .gia-dentro,
   .prodotto .voce.articolo .gia-dentro,
   .senza-prezzi .prodotto .voce.articolo .gia-dentro {
      grid-column: 1 / -1;
      justify-self: start;
      text-align: left;
   }
}

/* ------------------------------------------------- respiro della scheda ---
   Margini e spaziature della scheda prodotto, raccolti qui perché sono una
   cosa sola: il ritmo con cui le due colonne si separano e i blocchi
   respirano. Il filo verticale che divide identità e azione ha bisogno di
   spazio da entrambe le parti, altrimenti separa due cose appiccicate.    */

.prodotto > .identita { padding: 4px 34px 34px 0; }
.prodotto > .azione   { padding: 4px 0 8px 34px; display: flex; flex-direction: column; }

@media (max-width: 900px) {
   .prodotto > .azione { padding: 0; }
}

/* fra un blocco e l'altro della colonna d'azione: diciotto pixel, come fra
   tutti i blocchi bianchi del portale */
.prodotto > .azione > * + * { margin-top: 18px; }
.prodotto > .azione .sezione { margin-top: 26px; }
.prodotto > .azione > .sezione:first-child { margin-top: 0; }

/* le righe hanno bisogno di margine laterale quanto la colonna: il testo
   attaccato al filo di sinistra si legge come se sbordasse */
.prodotto .voce.articolo,
.prodotto .voce.articolo.intestazione { padding-left: 22px; padding-right: 22px; }

/* La striscia dei colori e il disegno quotato sono due modi di guardare lo
   stesso oggetto: stanno vicini, ma non attaccati. */
.prodotto .colori { margin: 18px 0 22px; }
.prodotto .quotato { margin-top: 0; }

/* Il quadratino □ delle sezioni torna ANTRACITE.
   Era diventato mattone quando il nude è stato sostituito: ma il mattone nel
   portale vuol dire «scaduto», e un titolo di sezione non è un allarme. */
.sezione::before { border-color: var(--inchiostro); }

/* titolo della sezione e caselle dei prezzi sulla stessa riga: guardare le
   varianti e decidere quali prezzi mostrare sono la stessa mossa */
.testa-varianti {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--inchiostro);
   padding-bottom: 12px;
}
.testa-varianti .sezione { margin: 0; }
.prodotto > .azione .testa-varianti .opzioni-vista {
   margin: 0;
   padding: 0;
   background: none;
   border: 0;
   gap: 10px 18px;
}
/* «Mostra» si vede: e' la parola che dice cosa sono le tre caselle, e con i
   due gruppi («Prezzi», «Altro») spariti e' rimasta l'unica. */
.testa-varianti .titolo-opzioni { display: inline; color: var(--inchiostro-60); }

/* il disegno delle misure non è una scheda a sé: è un dato della colonna,
   come il calibro e le caratteristiche */
.prodotto .quotato {
   background: none;
   border: 0;
   padding: 0;
}

/* ------------------------------------- la colonna identità si sdoppia ---
   La fotografia e i dati del modello stanno AFFIANCATI, non in fila.

   In colonna sola la parte sinistra era lunga quasi il doppio dello schermo:
   per leggere la scheda tecnica bisognava scorrere, e scorrendo usciva di
   vista la fotografia — cioè le due cose che servono insieme mentre si
   descrive la montatura a un ottico. La pagina intanto lasciava mezzo schermo
   vuoto ai lati.

   Le due sotto-colonne compaiono solo dove c'è spazio vero: sotto i 1200px
   tornano una sopra l'altra, perché una scheda tecnica stretta a 160px manda
   a capo ogni valore.                                                      */

.identita-corpo { display: grid; gap: 0 26px; }

/* LA FOTOGRAFIA PRENDE TUTTA LA COLONNA, e il disegno con le caratteristiche
   le scende sotto su due colonne proprie.

   Accanto ai dettagli, la fotografia era resa a 246px di larghezza dentro una
   colonna da 675 — il 36% — mentre il file sorgente e' 900x600, e sotto, con i
   ricambi aperti, restavano 1292px di bianco (misurato il 06/11/2026 a 1600).
   E' l'oggetto che l'agente gira verso l'ottico: a 562px si vede la vena
   dell'acetato e la serigrafia sull'asta. Il disegno quotato, che e' uno
   schema e non una fotografia, smette di competerle a fianco. */
@media (min-width: 1100px) {
   .prodotto { grid-template-columns: minmax(0, 1fr) 560px; }
   .identita-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

   .identita-corpo > .ritratto { grid-column: 1 / -1; grid-row: 1; }
   .identita-corpo > .colori   { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }
   .identita-corpo > .dossier  { grid-column: 1 / -1; grid-row: 3;
                                 display: grid; gap: 0 26px;
                                 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                                 align-items: start; }

   /* 3:2 sono le proporzioni con cui le fotografie arrivano (900x600): cosi'
      `contain` non lascia fasce, e quelle di un formato diverso restano
      intere lo stesso. Meno aria attorno: a questa misura il riquadro e' gia'
      grande, e 26px di margine interno tolgono solo altezza. */
   .prodotto .ritratto { aspect-ratio: 3 / 2; padding: 16px; }
}

/* ------------------------------------- l'identità resta sotto gli occhi ---
   La colonna di sinistra si ferma in alto mentre l'elenco delle varianti
   scorre. È il modo in cui si usa davvero questa pagina: l'agente scorre
   sette colori, ventuno ricambi, e mentre scorre deve continuare a vedere
   di quale montatura sta parlando — la fotografia, il calibro, i materiali.
   Prima la fotografia usciva dallo schermo alla seconda variante.

   `top` è l'altezza della testata (66 della fascia + 46 della navigazione),
   che è appiccicata anche lei: senza, la colonna scivolerebbe sotto la barra.

   Se la colonna è più alta dello schermo — succede sui modelli con molte
   caratteristiche — scorre al proprio interno invece di trascinare la
   pagina: così la fotografia resta ferma comunque.                        */

@media (min-width: 900px) {
   .prodotto > .identita {
      position: sticky;
      top: 112px;
      align-self: start;
      max-height: calc(100vh - 112px - 20px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      /* LO SPAZIO DELLA BARRA E' SEMPRE RISERVATO. Senza, bastava avvicinare
         il mouse alla fotografia perche' la barra comparisse, si prendesse la
         sua decina di pixel e spostasse di colpo foto, calibro e scheda
         tecnica: un sobbalzo a ogni passaggio, su una colonna che sta ferma
         proprio per non muoversi. */
      scrollbar-gutter: stable;
   }
   /* le miniature subito sotto la fotografia anche senza rete, dove il guscio
      scrive i pezzi in un altro ordine */
   .identita-corpo > .colori  { order: 1; }
   .identita-corpo > .dossier { order: 2; }
}
/* la testata qui ha una riga in piu', e la colonna ci finiva sotto */
@media (min-width: 900px) and (max-width: 1000px) {
   .prodotto > .identita { top: 160px; max-height: calc(100vh - 180px); }
}

/* LA FOTOGRAFIA CEDE L'ALTEZZA CHE MANCA. Colonna flessibile con il tetto di
   `max-height`: tutto il resto tiene la sua misura e il riquadro si accorcia
   di quanto serve, qualunque siano la finestra e il numero di caratteristiche
   del modello. Una soglia fissa valeva per una finestra e un modello solo.
   `contain` tiene l'occhiale intero. Da 1100 in su, cioe' anche sul tablet in
   orizzontale: sotto, foto e dettagli stanno in una colonna stretta che sfora
   comunque, e accorciare la foto costerebbe senza togliere la barra. */
@media (min-width: 1100px) {
   .prodotto > .identita {
      display: flex;
      flex-direction: column;
      padding-bottom: 8px;
   }
   .prodotto > .identita > * { flex: none; }
   .prodotto > .identita > .identita-corpo {
      flex: 0 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
   }
   .prodotto .identita-corpo > * { flex: none; }
   /* sotto questa misura la foto non direbbe piu' niente: meglio che scorra */
   .prodotto .identita-corpo > .ritratto {
      flex: 0 1 auto;
      min-height: 220px;
      grid-template-rows: minmax(0, 1fr);
   }
   .prodotto .colori { margin: 12px 0 14px; }
   .prodotto .quotato { margin-bottom: 0; }
   .prodotto .specifiche dt,
   .prodotto .specifiche dd { padding-top: 6px; padding-bottom: 6px; }
}

/* E le proporzioni: meno spazio all'identità, più all'elenco su cui si
   lavora. La destra non scende mai sotto i 560px, che è la larghezza in cui
   nome del colore, prezzo, quantità e pulsante stanno su una riga sola. */
@media (min-width: 1100px) {
   .prodotto { grid-template-columns: minmax(0, .92fr) minmax(560px, 1fr); }
}

/* il posto riservato alla fotografia che una variante non ha: tiene la
   colonna incolonnata senza disegnare un riquadro vuoto */
.voce.articolo .colore-cella .miniatura.vuota {
   border: 0;
   background: none;
}

/* «1 pezzo · 0,00 €» non è un guasto: è un ricambio che a listino non ha
   prezzo. Dirlo accanto al conteggio costa una riga e risparmia la telefonata. */
.barra-totale .senza-listino {
   font-family: var(--dato);
   font-size: 11px;
   color: var(--inchiostro-50);
}

/* ------------------------------------------------- riquadri di sintesi ---
   I tre numeri dello scadenziario — residuo, note di credito, scaduto — uno
   accanto all'altro. In colonna si leggevano uno per volta; affiancati sono
   la terna che si confronta con un'occhiata prima di prendere un ordine.

   Separati da un filo di un pixel, come le tessere del catalogo: è lo stesso
   modo di dividere due cose che appartengono alla stessa tavola.           */

.sintesi {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 14px;
   margin-bottom: 18px;
}
.sintesi .quadro {
   background: var(--carta);
   border: 1px solid var(--linea-blocco);
   padding: 18px 20px;
}
.sintesi .quadro .etichetta { margin: 0; }
.sintesi .quadro .valore {
   font-size: 24px;
   color: var(--inchiostro);
   margin: 10px 0 0;
}

/* lo scaduto porta il filo mattone sopra il riquadro: è l'unico dei tre su
   cui si agisce, e il colore lo dice prima di leggere la cifra */
.sintesi .quadro.in-allarme {
   border-top: 3px solid var(--allerta);
   margin-top: -1px;
}
.sintesi .quadro.in-allarme .etichetta { color: var(--inchiostro); }

/* Il badge della NORMA: stessa forma e stesse misure di quello pieno, ma in
   contorno. Serve dove una colonna ha due soli valori e uno è quasi sempre
   quello: riempirla di badge pieni la trasforma in una fila di macchie nere,
   e l'eccezione — che è l'informazione — smette di saltare all'occhio. */
.bollo.contorno {
   color: var(--inchiostro);
   background: none;
   border: 1px solid #9aa4a8;
}

/* ------------------------------------------------ chiusura dell'ordine ---
   I campi da una parte, i due comandi dall'altra, su tutta la larghezza.

   Stretta a metà pagina, la chiusura lasciava mezzo schermo vuoto proprio dove
   il lavoro si conclude, e «Invia l'ordine al gestionale» — il pulsante che
   conta più di ogni altro nel portale — finiva in fondo a una colonna di
   campi, alla stessa altezza di una casella per le note.

   Il pulsante sta FUORI dal modulo e lo invia con l'attributo `form`: è HTML
   normale, senza JavaScript, e permette di metterlo dove serve all'occhio
   invece che dove capita nel markup.                                       */

/* la griglia sta in cima, insieme a quella di `.sotto-ordine`: le due devono
   restare identiche */

/* TRATTATIVA E CHIUSURA NELLO STESSO RIQUADRO: sono due momenti dello stesso
   gesto — si concorda il prezzo, si dice come e dove consegnare, si manda — e
   in due riquadri separati si leggevano come due cose che non c'entrano. */
.blocco-chiusura {
   background: var(--carta);
   border: 1px solid var(--linea);
   border-radius: 3px;
}

.blocco-chiusura .trattativa.tutto {
   width: auto;
   padding: 20px 24px 22px;
   border-bottom: 1px solid var(--linea-blocco);
   background: var(--servizio);
}
.blocco-chiusura .trattativa.tutto .sezione { margin: 0 0 4px; }

.chiusura .invio {
   max-width: none;
   padding: 22px 24px;
   background: none;
   border: 0;
}

/* LE NOTE SONO L'UNICO CAMPO CHE MERITA TUTTA LA LARGHEZZA: li' dentro si
   scrive davvero. Gli altri stanno a coppie, perche' una casella da
   milleduecento pixel per «Rif. 1204» non e' generosita' — e' un modulo di cui
   non si capisce dove finisce una voce e comincia l'altra. */
.chiusura .invio textarea.campo { min-height: 80px; }

/* dentro, i campi si dispongono su due colonne dove hanno senso: condizione
   di pagamento e data di consegna si leggono insieme */
.chiusura .invio .coppia {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 200px;
   gap: 14px;
}
@media (max-width: 620px) {
   .chiusura .invio .coppia { grid-template-columns: minmax(0, 1fr); }
}

.comandi-chiusura {
   display: grid;
   gap: 12px;
   justify-items: stretch;
   align-content: start;
}

/* il riepilogo apre la colonna, i comandi la chiudono: si guarda il totale e
   si preme «Invia», senza spostare gli occhi dall'altra parte della pagina */
.comandi-chiusura .conto { margin: 0 0 6px; }
.comandi-chiusura .bottone { width: 100%; justify-content: center; text-align: center; }
/* IL PULSANTE CHE MANDA L'ORDINE. E' l'unica azione irreversibile della
   pagina e quella per cui tutto il resto esiste: deve essere la cosa piu'
   scura e piu' grande dello schermo.

   Era antracite con il testo a 13px dentro un rettangolo alto 60: un pulsante
   grande con la scritta piccola in mezzo non si legge come importante, si
   legge come vuoto. Il fondo e' piu' profondo dell'antracite dei bottoni
   normali — quello serve a non pesare quando i bottoni sono molti, qui e' uno
   solo — e il testo e' grande abbastanza da leggersi a braccio teso, che e'
   la distanza a cui si tiene un tablet appoggiato al banco. */
.comandi-chiusura .bottone.invia {
   min-height: 66px;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: .02em;
   /* il colore e' quello di ogni pulsante primario: qui cambia solo la
      misura, perche' e' l'unica azione irreversibile della pagina */
}
.comandi-chiusura form.svuota { display: grid; }
.comandi-chiusura .riassunto { margin: 2px 0 0; font-size: 11px; }

/* L'avviso «senza rete» è una frase più un comando, e il pulsante era
   attaccato all'ultima parola come se ne facesse parte.
   
   Un margine e non `display: flex` sul paragrafo: la frase è fatta di un
   grassetto e di un testo sciolto, che come elementi di un flex diventerebbero
   due riquadri separati dallo stesso spazio del pulsante — «Sei senza rete.» e
   il resto si staccherebbero in mezzo alla frase. */
.nota.senza-rete .bottone {
   margin: 4px 0 4px 18px;
   vertical-align: middle;
}

/* ---------------------------------------------------- scheda cliente ---
   Chi è il negozio e a quali condizioni compra: due blocchi pari, perché
   sono le due domande che un agente si fa prima di entrare e se le fa
   insieme. Prima stavano in due colonne di larghezza diversa, e quella
   delle condizioni — dove ci sono sconto e da incassare — era la più
   stretta.                                                              */

.scheda-cliente {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 18px;
   align-items: start;
}

.scheda-cliente .blocco {
   background: var(--carta);
   border: 1px solid var(--linea-blocco);
   padding: 22px 24px 8px;
}
.scheda-cliente .blocco .sezione { margin: 0 0 4px; }
.scheda-cliente .blocco .specifiche { border: 0; }

/* L'allerta contabile: a piena larghezza sotto i due blocchi, col filo
   mattone a sinistra. È l'unica cosa della pagina su cui si agisce, e il
   comando porta dove si agisce — dentro le condizioni era una frase in
   mezzo ad altre nove righe di dati. */
.allerta-contabile {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
   margin-top: 14px;
   padding: 18px 20px;
   background: var(--carta);
   border: 1px solid var(--linea-blocco);
   border-left: 6px solid var(--allerta);
}
.allerta-contabile p { margin: 0; }
.allerta-contabile .etichetta { color: var(--inchiostro); }
.allerta-contabile .dato { font-size: 13px; margin-top: 4px; }

/* Il riquadro del LOGOTIPO è più basso di quello di una montatura: un logo è
   una scritta larga, e in un riquadro 5:3 galleggia in mezzo al vuoto.
   Solo qui: nella griglia dei modelli le tessere contengono occhiali, che di
   quel rapporto hanno bisogno. */
.griglia.marchi .tessera .vetrina { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------ accesso ---
   La card dell'accesso porta un filo verde in testa: è l'unico punto del
   portale dove il verde è una superficie e non un segnale, e sta lì perché
   la schermata è tutta antracite — senza, è un rettangolo bianco su fondo
   scuro e basta.                                                         */

form.accesso { border-top: 3px solid var(--segnale); }

/* «Portale agenti» fra due filetti, come il sottotitolo di un marchio */
.marchio-ingresso .sottotitolo {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: #b3c1c6;
}
.marchio-ingresso .sottotitolo i {
   width: 40px;
   height: 1px;
   background: #5e6e75;
}

/* la promessa sotto la card: il motivo per cui questo portale esiste */
.promessa {
   margin: 22px 0 0;
   text-align: center;
   font-family: var(--dato);
   font-size: 11px;
   color: var(--inchiostro-35);
}

/* --------------------------------------- l'ordine composto senza rete ---
   Vive sul dispositivo e non sul server, quindi nella pagina dell'ordine è un
   blocco a sé: separato da un filo verde — lo stesso colore con cui il
   portale segnala gli stati — perché non si confonda con l'ordine vero, e
   perché la differenza fra i due è l'unica cosa che conta capire.          */

.ordine-locale { margin-top: 26px; }

.ordine-locale .blocco-locale {
   background: var(--carta);
   border: 1px solid var(--linea-blocco);
   border-top: 3px solid var(--segnale);
   padding: 20px 22px 18px;
}
.ordine-locale .blocco-locale + .blocco-locale { margin-top: 14px; }

/* le due versioni dello stesso ordine: filo rosso, perché qui c'è una scelta
   da fare e non un'informazione da leggere */
.ordine-locale .blocco-locale.conteso { border-top-color: var(--allerta); }
.ordine-locale .blocco-locale.conteso .etichetta { color: var(--allerta); }
.ordine-locale .blocco-locale.conteso > .nota { margin: 0 0 12px; }

.ordine-locale .intestazione { margin-bottom: 14px; }
.ordine-locale .insegna { font-size: 15px; margin: 4px 0 0; }

.ordine-locale .voce {
   display: grid;
   grid-template-columns: minmax(0, 1fr) max-content max-content;
   align-items: center;
   gap: 0 16px;
   min-height: 62px;
}

/* il comando per togliere una riga non deve competere con l'invio: è piccolo
   e in contorno, sta accanto alla riga che riguarda */
.bottone.minuto {
   min-height: 36px;
   padding: 6px 12px;
   font-size: 11px;
}

.ordine-locale .comandi-locale {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 16px;
}

/* Il richiamo in cima al carrello, e il segno sulla voce della barra: due modi
   di dire la stessa cosa — c'è un ordine che il server non ha ancora visto. Il
   verde è quello con cui il portale segnala gli stati, e qui lo stato è
   «composto, non inviato». */
.nota.richiamo-locale { border-left-color: var(--segnale); }
.nota.richiamo-locale .bottone { margin: 4px 0 4px 18px; vertical-align: middle; }

.rotta a.carrello .pallino.in-sospeso {
   background: var(--carta);
   color: var(--inchiostro);
   border: 1px solid var(--segnale);
}

/* ------------------------------------------- le righe dell'ordine ---
   Quattro colonne fisse: cosa, quanto, quanto costa. Erano tre blocchi
   affiancati che si dimensionavano sul contenuto, quindi ogni riga aveva i
   suoi incolonnamenti e l'elenco sembrava scritto a mano libera.

   Il pannello della trattativa sta CHIUSO anche dove è stato usato: il suo
   esito si legge già nell'importo di riga («22,52 cad. · −15%»), e aperto su
   ogni riga riempiva la pagina di campi vuoti.                          */

/* ========================================================================
   LA RIGA D'ORDINE
   Nove colonne, le stesse dell'applicazione in uso: modello, quantita',
   omaggi, prezzo, sconto, imponibile, imposta, importo, e il comando per
   togliere. Chi compila un ordine di venti righe vuole i numeri incolonnati,
   per vedere a colpo d'occhio dove sta lo scarto.

   Non e' una `<table>` ma una griglia, come tutti gli elenchi del portale:
   sotto la larghezza di un tablet le celle si ridispongono, mentre una tabella
   vera a nove colonne si puo' solo far scorrere di lato.

   LE COLONNE DEI NUMERI SONO FISSE e non si stringono col contenuto: se lo
   facessero, «6,49 €» e «35,99 €» cadrebbero su due incolonnamenti diversi e
   la tabella non si leggerebbe piu' di traverso. Solo il modello prende quello
   che avanza.
   ====================================================================== */

.tabella-ordine { border-radius: 3px; overflow: hidden; }

.riga-ordine {
   display: grid;
   /* IL MODELLO NON SI ALLARGA ALL'INFINITO. La tabella ora usa tutto lo
      schermo, e con la prima colonna elastica su un monitor da 1920 il nome
      restava a sinistra e i numeri cominciavano settecento pixel piu' in la',
      con il vuoto in mezzo: una riga cosi' non si legge, si indovina. Il
      modello si ferma a 560 px e lo spazio che avanza va in fondo, dopo
      l'ultima colonna, dove non separa niente. */
   grid-template-columns:
      minmax(0, 560px) /* modello                */
      78px             /* quantita'              */
      104px            /* omaggi                 */
      100px            /* prezzo                 */
      96px             /* sconto                 */
      120px            /* imponibile             */
      108px            /* imposta                */
      120px            /* importo                */
      48px             /* togli                  */
      minmax(0, 1fr);  /* lo spazio che avanza, in fondo */
   align-items: center;
   gap: 0 16px;
   min-height: 66px;
   padding: 12px 18px;
}

/* i campi del modulo diventano celle di QUESTA griglia: senza, il modulo
   sarebbe una cella sola e i suoi quattro campi ci starebbero dentro in fila */
/* LA COLONNA IN PIU' SOLO DOVE C'E'. `.riga-ordine` veste due tabelle: il
   dettaglio di un ordine inviato e il CARRELLO in composizione, che di
   «spediti» non sa niente. Aggiungendo la traccia alla regola base, nel
   carrello ogni cella dopo la quantita' scalava di una colonna e il pulsante
   che toglie la riga finiva sotto l'importo. */
.tabella-ordine.con-spediti .riga-ordine {
   grid-template-columns:
      minmax(0, 560px) /* modello                */
      78px             /* quantita'              */
      84px             /* spediti                */
      104px            /* omaggi                 */
      100px            /* prezzo                 */
      96px             /* sconto                 */
      120px            /* imponibile             */
      108px            /* imposta                */
      120px            /* importo                */
      48px             /* la colonna vuota in fondo */
      minmax(0, 1fr);  /* lo spazio che avanza */
}

.riga-ordine .condizioni { display: contents; }

/* SETTE COLONNE, QUANDO CHI GUARDA E' UN CLIENTE. Omaggi e sconto non gli si
   offrono, e lasciare le loro colonne vuote non e' neutrale: due titoli sopra
   il nulla si leggono come un dato che manca, non come un dato che non lo
   riguarda. La griglia si stringe e le altre colonne respirano. */
/* Il carrello di un utente CLIENTE: stesse regole dell'altro, tetto al
   modello compreso — e' la variante che vede il pubblico piu' numeroso del
   portale, e senza il tetto il vuoto fra nome e numeri tornava qui. */
.tabella-ordine.senza-condizioni .riga-ordine {
   grid-template-columns:
      minmax(0, 560px) /* modello     */
      78px             /* quantita'   */
      124px            /* prezzo      */
      124px            /* imponibile  */
      112px            /* imposta     */
      124px            /* importo     */
      48px             /* togli       */
      minmax(0, 1fr);  /* lo spazio che avanza */
}

/* IL PREZZO CHE NON C'E' E' UN TRATTINO, non una cella vuota. Su articoli
   senza listino — i ricambi, quasi sempre — quattro celle bianche di fila
   sembrano un guasto; un trattino dice che li' non c'e' niente da dire, ed e'
   il modo in cui lo dicono tutte le tabelle di conti. */
.riga-ordine .niente-prezzo {
   color: var(--inchiostro-35);
   font-family: var(--testo);
}

/* LO SCONTO SOTTO IL PREZZO, per il cliente che non ha la sua colonna: e'
   quello che gli spetta, e vederlo serve a capire da dove viene il prezzo. */
.riga-ordine .sconto-sotto {
   display: block;
   margin-top: 1px;
   font-size: 11px;
   color: var(--inchiostro-60);
}

.riga-ordine:not(.intestazione):hover { background: var(--servizio); }

/* ------------------------------------------------------------- il modello */

/* LA FOTOGRAFIA ACCANTO AL NOME. Su una riga d'ordine serve a riconoscere a
   colpo d'occhio cosa si e' messo dentro: il codice si legge, la montatura si
   vede. Le proporzioni sono quelle delle fotografie (3:2), come nell'elenco
   dei colori, e la misura e' quella che sta dentro l'altezza della riga senza
   allungarla. */
.riga-ordine .descrizione {
   display: flex;
   align-items: center;
   gap: 13px;
   min-width: 0;
}
.riga-ordine .descrizione .testo { min-width: 0; }

.riga-ordine .miniatura-riga {
   position: relative;
   flex: 0 0 auto;
   width: 66px;
   aspect-ratio: 3 / 2;
   display: grid;
   place-items: center;
   overflow: hidden;
   border: 1px solid rgba(42, 52, 57, .2);
   border-radius: 2px;
   background: var(--carta);
}

/* SI PUO' INGRANDIRE, e va detto: una fotografia di sessantasei pixel non
   suggerisce da se' di essere premibile, e chi non prova non scopre che c'e'
   l'immagine grande. La lente compare al passaggio e resta sempre visibile
   dove il passaggio non esiste, cioe' su un tablet. */
a.riga-ordine .miniatura-riga,
.riga-ordine a.miniatura-riga { cursor: zoom-in; }
.riga-ordine a.miniatura-riga:hover { border-color: var(--inchiostro); }

.riga-ordine .miniatura-riga .ingrandisci {
   position: absolute;
   right: 2px;
   bottom: 2px;
   width: 15px;
   height: 15px;
   border-radius: 2px;
   background: rgb(26 33 36 / .55);
   opacity: 0;
   transition: opacity .12s;
}
/* il vetro della lente, disegnato: un cerchio con il manico */
.riga-ordine .miniatura-riga .ingrandisci::before {
   content: '';
   position: absolute;
   left: 3px; top: 3px;
   width: 6px; height: 6px;
   border: 1.5px solid #fff;
   border-radius: 50%;
}
.riga-ordine .miniatura-riga .ingrandisci::after {
   content: '';
   position: absolute;
   right: 3px; bottom: 3px;
   width: 4px; height: 1.5px;
   background: #fff;
   transform: rotate(45deg);
}
.riga-ordine a.miniatura-riga:hover .ingrandisci,
.riga-ordine a.miniatura-riga:focus-visible .ingrandisci { opacity: 1; }

/* dove il passaggio del mouse non esiste la lente resta accesa: altrimenti su
   un tablet — che e' dove si prendono gli ordini — non la vedrebbe nessuno */
@media (hover: none) {
   .riga-ordine .miniatura-riga .ingrandisci { opacity: .85; }
}
.riga-ordine .miniatura-riga img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
}

/* il posto della fotografia che manca: tiene i nomi incolonnati senza
   disegnare un riquadro vuoto, come nell'elenco delle varianti */
.riga-ordine .miniatura-riga.vuota { border: 0; background: none; }

/* spente le immagini, sparisce anche qui: e' lo stesso interruttore della
   scheda prodotto, e lasciarne una accesa in fondo al giro sarebbe una svista */
.senza-immagini .riga-ordine .miniatura-riga { display: none; }
.riga-ordine .riga-nome {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px 9px;
}
.riga-ordine .riga-nome .nome {
   font-size: 15px;
   font-weight: 500;
   letter-spacing: .03em;
}
.riga-ordine .sotto { display: block; margin-top: 2px; font-size: 12px; }

/* --------------------------------------------------------- le celle dei numeri */

/* Allineate a destra, come su qualunque foglio di conti: le unita' devono
   stare sotto le unita'. */
.riga-ordine .c-num { text-align: right; }

/* IL CAMPO E' LARGO QUANTO LA SUA COLONNA. Lasciato alla sua misura naturale
   restava un rettangolino in mezzo allo spazio vuoto, e le caselle di righe
   diverse non erano nemmeno incolonnate fra loro. */
.riga-ordine .c-num .campo {
   width: 100%;
   min-width: 0;
   text-align: right;
   padding-left: 8px;
   padding-right: 8px;
}

.riga-ordine .importo,
.riga-ordine .prezzo-riga {
   font-family: var(--dato);
   font-size: 13.5px;
   white-space: nowrap;
}
.riga-ordine .importo.forte { font-weight: 700; font-size: 14.5px; }

/* IL PREZZO NON E' UN CAMPO, e non deve sembrarlo: in mezzo a tre colonne di
   caselle, una colonna di numeri nudi si legge come una casella disabilitata e
   chi prova a scriverci pensa che la pagina sia rotta. Piu' tenue e senza
   riquadro: e' un dato di lettura, come i tre importi in fondo. */
.riga-ordine .prezzo-riga { color: var(--inchiostro-60); }

/* ------------------------------------------------------------ togli e testa */

/* Discreto finche' non lo si cerca: e' l'unico comando irreversibile della
   riga, e un pulsante rosso acceso su ogni riga farebbe di una tabella di
   conti una fila di allarmi. */
.riga-ordine .togli { justify-self: end; }
.riga-ordine .togli button {
   width: 34px;
   height: 34px;
   font-size: 17px;
   line-height: 1;
   color: var(--inchiostro-60);
   background: none;
   border: 1px solid transparent;
   border-radius: 3px;
   cursor: pointer;
}
.riga-ordine .togli button:hover {
   color: var(--allerta);
   border-color: var(--allerta);
}

.riga-ordine.intestazione {
   min-height: 0;
   padding-top: 9px;
   padding-bottom: 9px;
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
   background: var(--servizio);
   border-bottom: 1px solid var(--linea-blocco);
}
.riga-ordine.intestazione:hover { background: var(--servizio); }

/* IL COMANDO DI SALVATAGGIO SENZA JAVASCRIPT sta su una riga sua, sotto.
   In linea sarebbe una decima colonna in una griglia che ne ha nove: la riga
   sfonderebbe a destra e l'ultimo importo finirebbe fuori dal bordo. */
.riga-ordine noscript { grid-column: 1 / -1; justify-self: end; }

.aliquota { margin: 8px 2px 22px; text-align: right; font-size: 13px; }

/* ------------------------------------------------- dettaglio di un ordine ---
   Stesso impianto del carrello: la testata, la tabella delle righe a tutta
   larghezza, e sotto due colonne — condizioni a sinistra, numeri a destra.
   Sono la stessa cosa a due momenti diversi, e leggerle allo stesso modo vale
   piu' di qualunque scelta grafica.                                         */

/* I TRE DATI CHE SI GUARDANO PER PRIMI — numero, data, stato — su una riga.
   Stavano in un riquadro insieme a tutto il resto, dove il numero dell'ordine
   pesava come il riferimento del cliente. */
.testa-ordine {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 10px 18px;
   margin-bottom: 18px;
}
.testa-ordine .insegna { margin: 0; }
.testa-ordine .quando { font-size: 15px; color: var(--inchiostro-60); }
.testa-ordine .bollo.parziale { color: var(--allerta); background: none; border-color: var(--allerta); }

/* le condizioni hanno la forma del riepilogo — stesso riquadro, stessa
   griglia — perche' stanno una accanto all'altro e due contenitori diversi
   sulla stessa riga si leggono come due cose che non c'entrano */
.condizioni-ordine .sezione { margin: 0 0 12px; }
.condizioni-ordine dl { grid-template-columns: max-content minmax(0, 1fr); }
.condizioni-ordine dd { text-align: left; }

.note-titolo { margin: 16px 0 4px; }
.note-ordine {
   margin: 0;
   padding: 10px 12px;
   font-size: 14px;
   background: var(--servizio);
   border-left: 2px solid var(--linea-forte);
}

.conto .scarto { margin: 14px 0 0; font-size: 12.5px; }

.ripeti { margin-top: 16px; }

/* la riga di chiusura della tabella: e' un totale, non un articolo */
.riga-ordine.chiusura-righe {
   background: var(--servizio);
   border-top: 1px solid var(--linea-blocco);
   font-weight: 500;
}
.riga-ordine.chiusura-righe .etichetta { font-size: 11px; }

/* ---------------------------------------------------------- schermi stretti */

/* Sotto la larghezza di un tablet le nove colonne non ci stanno, e farle
   scorrere di lato vorrebbe dire perdere di vista il modello mentre si scrive
   lo sconto. La riga diventa due piani: il nome sopra, i numeri sotto in fila
   con la loro etichetta addosso. */
@media (max-width: 1180px) {
   .riga-ordine.intestazione { display: none; }

   .riga-ordine,
   /* la stessa specificita' delle regole larghe, altrimenti quelle vincono
      anche qui: sono scritte con piu' classi, e su un tablet la tabella
      tornava a dieci colonne sbordanti. `senza-condizioni` e' il carrello di
      un utente cliente, e lo stesso difetto ce l'aveva da prima. */
   .tabella-ordine.con-spediti .riga-ordine,
   .tabella-ordine.senza-condizioni .riga-ordine {
      grid-template-columns: minmax(0, 1fr) 48px;
      row-gap: 14px;
      padding: 16px 18px;
   }
   .riga-ordine .descrizione { grid-column: 1; }
   .riga-ordine .togli { grid-column: 2; grid-row: 1; align-self: start; }

   /* L'ORDINE INVIATO non ha il contenitore `.condizioni` del carrello: i suoi
      numeri sono figli diretti della riga, e sulle due colonne qui sopra si
      impilavano a destra uno sull'altro, sbordando dalla finestra. Vanno in
      fila sotto il nome, quanti ce ne stanno. */
   .tabella-ordine.con-spediti .riga-ordine {
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 10px 14px;
   }
   .tabella-ordine.con-spediti .riga-ordine .descrizione { grid-column: 1 / -1; }
   .tabella-ordine.con-spediti .riga-ordine .c-num { text-align: left; }

   .riga-ordine .condizioni {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 12px 18px;
      grid-column: 1 / -1;
   }
   .riga-ordine .condizioni .c-num { text-align: left; }
   .riga-ordine .condizioni .c-num .campo { width: 82px; text-align: right; }

   /* senza intestazione ogni numero se la porta addosso: «29,50 €» da solo non
      dice se e' imponibile, imposta o importo */
   .riga-ordine .c-num::before {
      content: attr(data-etichetta);
      display: block;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--inchiostro-60);
      margin-bottom: 3px;
   }
}

/* La via d'uscita dentro il modulo d'accesso: chi non entra deve trovarla
   senza cercarla, e sul fondo scuro fuori dal riquadro si perdeva. */
form.accesso .scorciatoia {
   margin: 2px 0 0;
   font-size: 13.5px;
   text-align: center;
}
form.accesso .scorciatoia a { color: var(--inchiostro-60); }
form.accesso .scorciatoia a:hover { color: var(--inchiostro); }

/* L'insegna dentro il riquadro d'ingresso. Quella della pagina arriva a 33px
   e in un riquadro largo quattrocento «PASSWORD DIMENTICATA» ci andava su due
   righe, più alta del modulo che intesta. */
body.ingresso form.accesso .insegna,
body.ingresso .riquadro .insegna {
   font-size: 18px;
   margin: 0 0 2px;
}

/* ---------------------------------------------------- navigazione in corso --

   PERCHE' ESISTE. Le pagine qui sono rese dal server: fra il tocco e la pagina
   nuova il browser non disegna NIENTE, e sul tablet in negozio sono due secondi
   in cui sembra che il tocco non sia stato preso. Si tocca di nuovo, e la
   seconda richiesta parte mentre la prima e' in volo. Misurato il 13/10/2026:
   il server risponde in 0,3 secondi, quindi non c'e' niente da ottimizzare —
   manca solo qualcosa che dica che sta succedendo.

   UNA BARRA E NON UNA ROTELLA AL CENTRO: non copre quello che si stava
   leggendo, e su un tocco sbagliato non lascia la pagina bloccata sotto un velo. */
.navigazione-in-corso {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: 4px;
   z-index: 9999;
   /* l'ombra la stacca dal bianco della pagina: a filo del bordo superiore una
      riga di 4px passa inosservata su uno schermo tenuto in mano */
   box-shadow: 0 1px 4px rgba(42, 52, 57, .35);
   background: transparent;
   overflow: hidden;
   pointer-events: none;
}

.navigazione-in-corso::before {
   content: "";
   position: absolute;
   top: 0; bottom: 0;
   width: 45%;
   background: var(--azione);
   animation: navigazione-scorre 1.1s ease-in-out infinite;
}

@keyframes navigazione-scorre {
   0%   { left: -40%; }
   100% { left: 100%; }
}

/* chi ha chiesto meno animazioni vede una barra ferma, non una che pulsa */
@media (prefers-reduced-motion: reduce) {
   .navigazione-in-corso::before { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* QUELLO CHE E' STATO TOCCATO LO DICE DA SE'.
 *
 * La barra in cima da sola non basta: su un tablet tenuto in mano l'occhio sta
 * sul prodotto che si e' appena toccato, non sul bordo dello schermo. Qui la
 * scheda toccata si attenua subito — reazione immediata, prima ancora che il
 * server risponda — e questo e' cio' che manca per capire che il tocco e' stato
 * preso.
 *
 * `pointer-events: none` NON E' ESTETICA: finche' la pagina nuova non arriva,
 * quella scheda non si puo' toccare di nuovo. E' il doppio tocco che faceva
 * partire due richieste, ed e' la ragione per cui questa riga esiste. */
.tocco-preso {
   opacity: .45;
   pointer-events: none;
   transition: opacity .12s ease-out;
}

/* L'elenco degli ordini in attesa nella pagina dell'archivio: poche righe
   sotto i quadri, senza i pallini e con lo stesso respiro delle note. */
.elenco-asciutto {
   list-style: none;
   margin: 10px 0 0;
   padding: 0;
   font-size: 14px;
   color: var(--inchiostro-60);
}

.elenco-asciutto li { padding: 3px 0; }

/* un pulsante piccolo dentro una riga di elenco: quello normale, alto come un
   campo, spezzerebbe la riga degli ordini in attesa */
.bottone.minuscolo {
   padding: 2px 10px;
   font-size: 13px;
   vertical-align: baseline;
}


/* ─── I CARRELLI IN SOSPESO ──────────────────────────────────────────────
   La riga di un carrello lasciato a meta'. Non riusa la griglia di
   `.voce.articolo` perche' quella ha sei colonne fatte per prezzo, quantita' e
   comandi di riga: qui le cose da dire sono due, chi e quanto. */
.voce.carrello-sospeso {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 16px;
   padding: 14px 16px;
}
.voce.carrello-sospeso .chi {
   display: flex;
   flex-direction: column;
   gap: 2px;
   /* si prende lo spazio che resta: cosi' i comandi stanno a filo destro
      senza bisogno di `margin-left: auto` su ciascuno */
   flex: 1 1 240px;
   min-width: 0;
}
.voce.carrello-sospeso .nome {
   font-weight: 600;
   color: var(--inchiostro);
}
.voce.carrello-sospeso .dettaglio {
   font-size: 12.5px;
   color: var(--inchiostro-60);
}
.voce.carrello-sospeso .comandi {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}
/* un cliente che non e' piu' suo: la riga resta, spenta, senza comandi */
.voce.carrello-sospeso.orfano .nome { color: var(--inchiostro-60); }

/* L'errore scritto accanto al pulsante che non ha funzionato. Dentro la riga
   e non `.nota.error` in generale: quella classe esiste gia' nel foglio e
   colora solo il filo a sinistra — tingerle il testo da qui cambierebbe ogni
   nota d'errore del portale per una che sta qui. */
.voce.carrello-sospeso .nota.error { color: var(--allerta); }

/* l'avviso sui carrelli fermi da un mese: un filo, non un riquadro rosso —
   non e' un guasto, e' una cosa da sapere prima di premere */
.avviso-riga {
   border-left: 3px solid var(--richiamo);
   padding: 8px 0 8px 12px;
   margin: 18px 0;
   max-width: 70ch;
   color: var(--inchiostro);
}

.invia-tutti {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin: 22px 0 8px;
}
.invia-tutti .nota { max-width: 48ch; }

.solo-dispositivo,
.non-arrivati { margin-top: 34px; }

/* il filo mattone: qui non e' «da sapere», e' «da guardare prima di premere» */
.non-arrivati .voce.carrello-sospeso { border-left: 3px solid var(--allerta); }

/* LE VOCI TRASVERSALI, nella prima riga della testata: valgono per tutti i
   clienti, mentre la barra sotto e' quella del cliente su cui si lavora.
   Sono LORO a spingere a destra la spia della rete ed «Esci»: lo spintone
   stava sul nome del cliente, che c'e' solo quando un cliente e' stato scelto,
   e nelle pagine di tutti i clienti spia ed «Esci» restavano in mezzo alla
   riga. */
.testata .trasversali {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 18px;
   min-width: 0;
   margin-right: auto;
}
.testata .trasversali a {
   /* le stesse misure di «Esci» e della spia, che sono gli altri due testi di
      questa riga: qui dentro non si grida */
   font-size: 10.5px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: rgb(255 255 255 / .55);
   text-decoration: none;
   padding: 10px 0;
   white-space: nowrap;
}
.testata .trasversali a:hover { color: var(--carta); }
.testata .trasversali a.qui { color: var(--carta); }
.testata .trasversali .pallino { letter-spacing: 0; }

@media (max-width: 640px) {
   /* sul telefono la prima riga ha gia' logo, spia ed «Esci»: le trasversali
      si stringono per starci */
   .testata .trasversali { gap: 2px 12px; }
   .testata .trasversali a { font-size: 10px; letter-spacing: .08em; padding: 6px 0; }
}

/* ─── LA FINESTRA CHE APRE UN ORDINE ─────────────────────────────────────
   Grande, non una finestrella: un ordine ha intestazione, righe con prezzi e
   sconti, totali e indirizzo — il piu' lungo di questi dati ha 154 pezzi — e
   in un riquadro piccolo diventerebbe uno scorrimento dentro un altro. Su un
   tablet prende quasi tutto, con un margine che lascia vedere l'elenco sotto
   e dice che si e' sopra a qualcosa, non altrove. */
.finestra-ordine {
   width: min(1100px, calc(100vw - 32px));
   max-height: calc(100vh - 32px);
   padding: 0;
   border: 0;
   border-radius: 2px;
   background: var(--fondo);
   color: var(--inchiostro);
   box-shadow: 0 18px 60px rgb(42 52 57 / .35);
   overflow: hidden;
}
.finestra-ordine::backdrop { background: rgb(42 52 57 / .55); }
/* NELLA FINESTRA LE COLONNE SONO PIU' STRETTE: la finestra si ferma a 1100px e
   quelle della pagina ne vogliono mille da sole, quindi al modello restavano
   cinquanta pixel e il nome andava a capo su tre righe. */
@media (min-width: 1181px) {
   .finestra-ordine .tabella-ordine.con-spediti .riga-ordine {
      grid-template-columns: minmax(200px, 1fr) 44px 62px 70px 72px 72px 96px 88px 96px 0;
      column-gap: 10px;
   }
}

.finestra-ordine .dentro {
   max-height: calc(100vh - 32px);
   overflow-y: auto;
   /* lo stesso respiro del corpo pagina, piu' lo spazio della X in alto */
   padding: 52px var(--gutter) var(--gutter);
   -webkit-overflow-scrolling: touch;
}

/* La X sta a DESTRA (scelta dell'utente, 04/11/2026). Sulla lente sta a
   sinistra per non finire sotto «Esci», ma qui la finestra copre la pagina e
   quell'angolo non e' piu' un comando della testata: vale allora
   l'abitudine, che per una finestra e' l'angolo in alto a destra. */
.finestra-ordine .chiudi {
   position: absolute;
   top: 8px;
   right: 8px;
   z-index: 2;
   width: 44px;
   height: 44px;
   font-size: 22px;
   line-height: 1;
   color: var(--inchiostro-60);
   background: var(--carta);
   border: 1px solid var(--linea-forte);
   border-radius: 2px;
   cursor: pointer;
}
.finestra-ordine .chiudi:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

@media (max-width: 640px) {
   .finestra-ordine {
      width: 100vw;
      max-height: 100vh;
      height: 100vh;
      border-radius: 0;
   }
   .finestra-ordine .dentro { max-height: 100vh; }
}

/* ------------------------------------------------------ le statistiche ---
   Otto riquadri: tre misure in colonna, tre raggruppamenti in riga meno uno.
   Quello che si vede qui sotto — una torta fatta con un cerchio tratteggiato,
   una barra fatta con una larghezza in percentuale — e' il RIPIEGO: regge la
   pagina senza JavaScript e si stampa. I grafici veri li disegna Chart.js
   (`grafici.js`), che li copre quando e' pronto. */

.fascia-statistiche { margin: 0 0 34px; }
.fascia-statistiche .sezione { margin: 0 0 14px; }

.tre-riquadri {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
   gap: 18px;
}
.riquadro-stat {
   padding: 18px 18px 16px;
   background: var(--carta);
   border: 1px solid var(--linea-blocco);
   min-width: 0;
}
.riquadro-stat .titolo-riquadro {
   margin: 0 0 14px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--inchiostro-60);
}

/* LA TORTA. `pathLength` non serve: gli archi arrivano gia' calcolati in
   unita' di circonferenza, e il giro parte dalle ore 12 perche' e' da li' che
   si legge una torta. */
.riquadro-stat .torta {
   width: 160px;
   height: 160px;
   display: block;
   margin: 0 auto 14px;
   transform: rotate(-90deg);
}
.riquadro-stat .torta .fetta {
   fill: none;
   stroke-width: 34;
}

.riquadro-stat .legenda { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.riquadro-stat .legenda li {
   display: flex;
   align-items: baseline;
   gap: 8px;
   padding: 3px 0;
   min-width: 0;
}
.riquadro-stat .legenda a { color: inherit; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.riquadro-stat .legenda a:hover { text-decoration: underline; }
.riquadro-stat .legenda .dato { font-variant-numeric: tabular-nums; }
.riquadro-stat .legenda .tenue { color: var(--inchiostro-60); min-width: 44px; text-align: right; }
.riquadro-stat .segno { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 2px; }

/* LE BARRE sono in percentuale della PIU' LUNGA, non del totale: con
   seicento clienti ogni barra sarebbe altrimenti un filo. */
.riquadro-stat .barre { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.riquadro-stat .barre li {
   display: grid;
   /* 112px perche' un importo a sei cifre con il simbolo — «105.803,44 €» —
      a 92 mandava l'euro a capo da solo */
   grid-template-columns: minmax(0, 1fr) 112px;
   gap: 2px 10px;
   padding: 5px 0;
}
.riquadro-stat .barre .chi {
   grid-column: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.riquadro-stat .barre .dato {
   grid-column: 2;
   grid-row: 1 / 3;
   align-self: center;
   text-align: right;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}
/* `traccia` e non `barra`: `.barra` nel portale e' gia' la fascia in alto
   della pagina, che e' sticky e ha una sua altezza minima — chiamando cosi'
   il fondo del grafico, ogni riga del grafico diventava alta sessanta pixel. */
.riquadro-stat .barre .traccia {
   grid-column: 1;
   height: 8px;
   background: color-mix(in srgb, var(--inchiostro) 8%, transparent);
}
.riquadro-stat .barre .riempie { display: block; height: 100%; background: var(--inchiostro); }

.riquadro-stat .tutte-le-voci { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 10px; }
.riquadro-stat .tutte-le-voci summary {
   cursor: pointer;
   font-size: 12px;
   color: var(--inchiostro-60);
}
.riquadro-stat .tabellina { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.riquadro-stat .tabellina td { padding: 4px 0; border-bottom: 1px solid var(--linea); }
.riquadro-stat .tabellina .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* un elenco di seicento clienti dentro un riquadro: si scorre lui, non la pagina */
.riquadro-stat .tutte-le-voci table { display: block; max-height: 320px; overflow: auto; }

.setaccio.periodo {
   display: flex;
   flex-wrap: wrap;
   align-items: end;
   gap: 12px;
   margin: 0 0 26px;
}
.setaccio.periodo label { display: grid; gap: 4px; font-size: 12px; color: var(--inchiostro-60); }
/* la data e' larga quanto il suo contenuto piu' il calendario del browser:
   `.campo` sta al 100% del posto che ha, e in una fila di filtri si stirava */
.setaccio.periodo .campo.data { width: auto; min-width: 168px; }

/* I COLORI DELLE FETTE. Nove, perche' i marchi di un agente sono nove: non
   una scala di grigi, che fra sei fette diventa indistinguibile, e non colori
   accesi, che in una pagina di numeri gridano. Si ripetono dal decimo in poi,
   e la legenda resta la verita' su quale fetta e' quale. */
.colore-1 { stroke: #2f6d7a; background: #2f6d7a; }
.colore-2 { stroke: #8a5a44; background: #8a5a44; }
.colore-3 { stroke: #4a6741; background: #4a6741; }
.colore-4 { stroke: #7c6594; background: #7c6594; }
.colore-5 { stroke: #a8743a; background: #a8743a; }
.colore-6 { stroke: #46617f; background: #46617f; }
.colore-7 { stroke: #7a4b58; background: #7a4b58; }
.colore-8 { stroke: #5b6e5f; background: #5b6e5f; }
.colore-9 { stroke: #6f6a4a; background: #6f6a4a; }

/* IL GRAFICO VERO E IL SUO RIPIEGO. Il disegno fatto a mano — cerchio
   tratteggiato e barre di CSS — resta sempre nella pagina ed e' quello che
   si vede senza JavaScript o se il bundle non arriva. `grafici.js` mette la
   classe sul riquadro solo DOPO aver disegnato: da li' in poi comanda la
   tela e il ripiego si toglie. */
.riquadro-stat .tela { display: none; height: 200px; position: relative; }
.riquadro-stat .tela.alta { height: 290px; }
.riquadro-stat.con-grafico .tela { display: block; }
.riquadro-stat.con-grafico .ripiego-grafico { display: none; }

/* LA COLONNA DEGLI SPEDITI nel dettaglio dell'ordine. Si colora solo quando
   dice qualcosa — partiti in parte — perche' su un ordine tutto evaso dieci
   numeri uguali in colonna non meritano nessun risalto. Il trattino al suo
   posto non e' uno zero: vuol dire che il gestionale non l'ha ancora scritto,
   e sono 5.933 righe su 82.688. */
.riga-ordine .c-num.spediti.parziale,
.riga-ordine .c-num.dato.parziale { color: var(--allerta); font-weight: 600; }

/* QUANTO E' PARTITO, nella griglia degli ordini. Tre parole e tre colori,
   con la stessa regola dei bolli di stato: il verde è l'unico caso in cui non
   c'è niente da fare, e il rosso non è un errore — è merce che il cliente
   aspetta. */
.bollo.spedito-completo { color: var(--segnale-scuro); border-color: currentColor; background: none; }
.bollo.spedito-parziale { color: var(--allerta); border-color: currentColor; background: none; }
.bollo.spedito-non_spedito { color: var(--inchiostro-60); border-color: currentColor; background: none; }

/* ------------------------------------------------- col dito, sul tablet ---
   `pointer: coarse` e non una larghezza: un tablet in orizzontale e' largo
   quanto un portatile, e la differenza la fa con cosa si preme. */
@media (pointer: coarse) {
   /* SEDICI PIXEL NEI CAMPI: sotto quella misura Safari su iPad ingrandisce la
      pagina a ogni tocco, e poi resta ingrandita. Quelli delle tabelle stanno
      in `griglie.css`, che su quelle pagine si carica dopo questo foglio. */
   input.campo.data { font-size: 16px; }

   .quantita .passo { width: 40px; }
   .gia-dentro form.togli button { width: 40px; height: 40px; }
   .riga-ordine form.togli button { width: 40px; height: 40px; }

   label.etichetta,
   dt.etichetta { font-size: 12px; }
   .bollo { font-size: 11px; }
}

/* LA FOTOGRAFIA NON CEDE, SUL TOUCH: la colonna si scorre col dito e la barra
   non c'e', quindi accorciarla per evitarla costerebbe senza guadagnare niente.
   A 1180x820 restava di 188px di altezza, piu' piccola di prima. */
@media (pointer: coarse) and (min-width: 1100px) {
   .prodotto > .identita { scrollbar-gutter: auto; }
   .prodotto .identita-corpo > .ritratto { flex: none; }
}