/* FOOD COST LSB — palette del Brand Manual: petrolio #014059, giallo #f2b707,
sabbia #ba9a67, menta #8cccbe, ink #0c2d3a. Il fondo pagina è il petrolio
stesso (dal 03/09/2026, prima era il quasi-bianco #f6f9f9): i riquadri
bianchi sono fogli su una scrivania scura.
Stessa pelle di GIADINO, tranne il fondo: chi sa usare l'una sa usare l'altra. */
:root{
--petrolio:#014059; --petrolio-scuro:#012f42; --petrolio-chiaro:#0d5975;
--giallo:#f2b707; --sabbia:#ba9a67; --menta:#8cccbe; --ink:#0c2d3a;
/* Il fondo della pagina è il petrolio del marchio (03/09/2026): la pagina è
una scrivania scura e i riquadri bianchi sono i fogli appoggiati sopra.
Ciò che sta sul fondo senza un riquadro sotto (solo la testata di pagina)
è scritto in chiaro più sotto. */
--bg:#014059; --bianco:#fff; --bordo:#d8e3e6; --bordo-forte:#a9c2ca;
--su-scuro:#bfd9e2; /* il grigio dei sottotitoli, ribaltato per il fondo scuro */
--grigio:#6d838c; --rosso:#b4342a; --rosso-chiaro:#fdecea;
--ambra:#fff6e0; --verde:#2e7d5b; --verde-chiaro:#e8f5ee;
--manuale:#fdf4dd; /* giallino tenue: le referenze create a mano */
/* Il fondo delle referenze APPAIATE (05/09/2026). È un giallino anche
questo, ma tirato verso la sabbia — il colore dell'etichetta «alias» —
perché il giallino vero era già preso, e vuol dire un'altra cosa:
«questo prezzo non lo aggiorna nessuno». Due avvisi diversi con lo
stesso colore sono un avviso che non dice più niente. */
--alias:#faf6ec;
--r:6px; --ombra:0 1px 2px rgba(1,64,89,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-size:14px; line-height:1.45; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0 0 .5em; line-height:1.2}
h1{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:20px; font-weight:400; color:var(--petrolio)}
h2{font-size:15px; font-weight:800; color:var(--petrolio); text-transform:uppercase; letter-spacing:.6px}
h3{font-size:13px; font-weight:800; color:var(--petrolio)}
a{color:var(--petrolio-chiaro)}
p{margin:0 0 10px}
/* ---------- cornice ---------- */
/* La barra è dello stesso petrolio del fondo pagina: senza questo filo di luce
in basso le due cose diventerebbero un'unica macchia scura. */
.barra{background:var(--petrolio); color:#fff; display:flex; align-items:center; gap:16px;
padding:0 18px; min-height:52px; position:sticky; top:0; z-index:50; flex-wrap:wrap;
box-shadow:0 1px 0 rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.18)}
.marchio{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:16px; letter-spacing:.5px; line-height:1.05}
.marchio span{color:var(--giallo)}
.marchio em{display:block; font-family:'Manrope',sans-serif; font-style:normal; font-weight:600;
font-size:9px; letter-spacing:.9px; color:#7ba7b5; text-transform:uppercase; margin-top:1px}
.nav{display:flex; gap:2px; margin-left:8px; flex:1; flex-wrap:wrap}
.nav a{color:#cfe2e8; text-decoration:none; padding:6px 12px; border-radius:var(--r);
font-weight:700; font-size:12px; letter-spacing:.7px; text-transform:uppercase}
.nav a:hover{background:rgba(255,255,255,.10); color:#fff}
.nav a.on{background:var(--giallo); color:var(--petrolio-scuro)}
.utente{font-size:12px; color:#a9c8d2; display:flex; align-items:center; gap:10px}
.utente b{color:#fff}
.utente a{color:#cfe2e8; text-decoration:none; border:1px solid rgba(255,255,255,.25);
padding:3px 10px; border-radius:var(--r); font-size:11px}
.versione{font-size:10px; color:#7ba7b5; letter-spacing:.4px; font-variant-numeric:tabular-nums}
/* LA BARRA SUL TABLET (dal 28/09/2026, 0.12.10). Era alta 52px fissi, e sotto
i 1400px le dieci voci vanno a capo: la seconda riga usciva dalla barra e
finiva sopra al titolo della pagina, tagliata. Adesso la barra è alta
QUANTO SERVE (min-height, non height), e fra telefono e schermo largo la
navigazione scende in una riga sua sotto al marchio, invece di impilarsi in
tre righe strette accanto. L'altezza vera la misura app.js e la scrive in
--alt-barra: è lì che si fermano le testate delle tabelle che scorrono,
che prima davano per scontati i 52px. */
@media(min-width:761px) and (max-width:1400px){
.barra{padding:6px 18px; gap:6px 16px}
.nav{order:3; flex:1 1 100%; margin-left:0; gap:2px}
.nav a{padding:6px 9px; letter-spacing:.5px}
.utente{margin-left:auto}
}
main{padding:18px 20px 60px; max-width:1900px; margin:0 auto}
/* ---------- blocchi ---------- */
.riquadro{background:var(--bianco); border:1px solid var(--bordo); border-radius:var(--r);
padding:16px; margin-bottom:16px; box-shadow:var(--ombra)}
.testata-pagina{display:flex; align-items:flex-start; justify-content:space-between;
gap:16px; margin-bottom:14px; flex-wrap:wrap}
.sottotitolo{color:var(--grigio); font-size:12.5px; margin:-4px 0 0}
/* Sul fondo scuro ci sta solo la testata di pagina: h1, sottotitolo, codice e
il contatore delle frecce. Dentro i riquadri e nei fogli di stampa il fondo
resta bianco, quindi lì non si tocca niente. */
.testata-pagina h1{color:#fff}
.testata-pagina .sottotitolo{color:var(--su-scuro)}
.testata-pagina .codice{color:var(--menta)}
.testata-pagina .posizione{color:var(--su-scuro)}
.testata-pagina a:not(.btn){color:var(--menta)}
/* Il tasto pieno è petrolio come il fondo: sulla testata sparirebbe. Diventa
giallo, come la voce accesa nella barra di navigazione. */
.testata-pagina .btn:not(.secondario):not(.pericolo){background:var(--giallo);
border-color:var(--giallo); color:var(--petrolio-scuro)}
.testata-pagina .btn:not(.secondario):not(.pericolo):hover{background:#ffc933; border-color:#ffc933}
.colonne{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
/* Come per il flex: la misura naturale di una cella di griglia è il suo
contenuto più largo, e una tabella o un menu dentro la fanno sbordare. */
.colonne > *{min-width:0}
@media(max-width:1100px){.colonne{grid-template-columns:1fr}}
.griglia-campi{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.griglia-campi > *{min-width:0}
.vuoto{color:var(--grigio); font-style:italic; font-size:13px}
.avviso{padding:9px 13px; border-radius:var(--r); font-size:13px; font-weight:600; margin-bottom:14px}
.avviso.ok{background:var(--verde-chiaro); color:var(--verde); border:1px solid #b6ddc8}
.avviso.ko{background:var(--rosso-chiaro); color:var(--rosso); border:1px solid #e3b5b0}
/* ---------- controlli ---------- */
label{display:block; font-size:11px; font-weight:800; color:var(--grigio);
text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px}
/* max-width e min-width non sono un di più: un `select` è largo quanto la sua
opzione più lunga — i nomi dei fornitori — e un `input[type=file]` quanto il
suo bottone più il nome del file. Senza questi due freni si portano dietro
tutta la pagina, che sul telefono comincia a scorrere di lato.
`input:not([type])` (dal 26/09/2026): metà dei campi dell'applicazione sono
scritti ` qui sotto — ma un modo di sfogliarlo. */
.cerca-scelta{margin-bottom:4px; font-size:12.5px; padding:4px 8px; background:#f7fafb}
.cerca-scelta::placeholder{color:#9db3bb; font-style:italic}
/* I filtri a spunta dell'elenco referenze: una griglia che si stringe da sola. */
.spunte-filtro{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:2px 14px}
.spunte-filtro .spunta{font-size:12.5px; padding:2px 0}
.spunte-filtro .spunta.acceso{font-weight:800; color:var(--petrolio)}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--petrolio); color:#fff;
border:1px solid var(--petrolio); padding:7px 14px; border-radius:var(--r); cursor:pointer;
font-family:inherit; font-size:12.5px; font-weight:800; letter-spacing:.3px; text-decoration:none}
.btn:hover{background:var(--petrolio-chiaro)}
.btn.secondario{background:#fff; color:var(--petrolio); border-color:var(--bordo-forte); font-weight:700}
.btn.secondario:hover{background:#eef5f7}
.btn.giallo{background:var(--giallo); border-color:var(--giallo); color:var(--petrolio-scuro)}
.btn.pericolo{background:#fff; color:var(--rosso); border-color:#e3b5b0}
.btn.piccolo{padding:4px 9px; font-size:11.5px}
.spunta{display:flex; align-items:center; gap:6px; font-size:13px; text-transform:none;
font-weight:600; color:var(--ink); letter-spacing:0; margin:0; cursor:pointer}
.spunta input{width:auto}
/* La spunta «tutti» dentro la testata scura di una tabella. */
.capo-spunta{display:flex; align-items:center; gap:4px; margin:3px 0 0; font-size:9.5px;
font-weight:700; letter-spacing:.3px; text-transform:none; color:#bfd7de; cursor:pointer}
.capo-spunta input{width:auto; margin:0}
.riga-controlli{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px}
/* min-width:0 perché la misura naturale di un elemento flex è il suo contenuto:
senza, la cella non scende mai sotto la parola più lunga che ha dentro. */
.riga-controlli > *{flex:0 0 auto; min-width:0}
.riga-controlli .cresci{flex:1 1 220px}
/* Il testo che spiega un tasto non è un controllo: prende una riga sua e va a
capo, invece di spingere la riga di controlli fuori dallo schermo. */
.riga-controlli > p{flex:1 1 240px}
/* ---------- tabelle ---------- */
table.dati{border-collapse:collapse; width:100%; font-size:13px}
table.dati th{background:var(--petrolio); color:#fff; font-size:10.5px; font-weight:800;
text-transform:uppercase; letter-spacing:.5px; padding:7px 8px; text-align:left; position:sticky; top:var(--alt-barra,52px)}
table.dati td{border-bottom:1px solid var(--bordo); padding:6px 8px; vertical-align:top}
table.dati tr:hover td{background:#f2f8f9}
table.dati td.num,table.dati th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.dati td.piccolo{font-size:11.5px; color:var(--grigio)}
/* --------------------------------------------------------------------------
LE TESTATE A DUE PIANI (dal 17/09/2026).
Nascono con i due prezzi — al bancone e da asporto — e servono a dire che
quattro colonne non sono quattro colonne: sono due coppie, e ogni coppia
risponde a una domanda diversa. Senza il piano di sopra si leggono come
«prezzo, X, prezzo, X» e nessuno sa quale sia quale.
Il piano di sotto si incolla 27px più in basso del primo, che è l'altezza di
una riga di testata: con `top:0` su tutti e due il secondo piano finirebbe
sotto al primo e si leggerebbe soltanto quello di sopra.
-------------------------------------------------------------------------- */
table.dati th.gruppo{text-align:center; letter-spacing:1px; font-size:9.5px;
border-left:2px solid #fff; border-right:2px solid #fff}
table.dati th.gruppo-banco{background:var(--petrolio-chiaro)}
table.dati th.gruppo-asporto{background:var(--sabbia-scura); color:#fff}
/* Il filetto che separa la metà «da asporto» da quella del bancone: corre per
tutta l'altezza della tabella, non solo nella testata. */
table.dati td.bordo-sx,table.dati th.bordo-sx{border-left:2px solid var(--bordo-forte)}
.scorre table.dati thead tr:nth-child(2) th{top:27px}
table.dati thead tr:nth-child(2) th{top:calc(var(--alt-barra,52px) + 27px)}
.scorre{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* Dentro .scorre la testata NON si sposta di 52px: quel contenitore scorre in
orizzontale, quindi per il browser è lui il riquadro di scorrimento, e la
riga sticky finiva 52px più in basso, sopra la prima riga di dati. */
.scorre table.dati th{top:0}
/* …e finiva anche per non restare affatto (guasto trovato il 06/09/2026,
«scorrendo le referenze la testata se ne va con me»). `overflow-x:auto` da
solo non esiste: il CSS trasforma in `auto` anche l'asse verticale, e allora
il riquadro di scorrimento a cui una riga `sticky` si aggancia non è più la
finestra ma il div — che in verticale non scorre mai, perché è alto quanto
la tabella. Risultato: la testata restava incollata a una tabella che scorreva
via tutta intera. Non si aggiusta in CSS: bisogna sapere se la tabella ci sta
in larghezza, e quello lo dice solo il browser a pagina fatta. Se ci sta, il
JavaScript mette `libero` e il div smette di essere un contenitore di
scorrimento: da lì la testata si aggancia alla finestra e si ferma sotto alla
barra. Se non ci sta, resta tutto com'era — meglio una testata che scorre via
che una tabella che non si può leggere di lato. */
.scorre.libero{overflow:visible}
.scorre.libero table.dati th{top:var(--alt-barra,52px)}
/* Sotto alla barra di navigazione (z-index 50) e sopra alle righe di dati. */
table.dati th{z-index:3}
/* Una cella che non deve allargare la tabella: il testo lungo si taglia con i
puntini e per intero sta nel `title`. Serve dove la colonna è un'etichetta e
non un numero — la voce in fattura della referenza adottata, nell'elenco
delle materie, che da sola si mangiava metà riga. */
table.dati td.stretta{max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.codice{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--petrolio-chiaro)}
tr.escluso td{opacity:.5}
/* Le referenze create a mano restano riconoscibili per sempre, anche quando una
fattura vera le ha riconciliate. Prima di .scelta-riga: se una riga a mano è
anche quella adottata, vince il verde dell'adozione. */
/* Le referenze APPAIATE si leggono come una cartella: la capofila, e sotto di
lei gli alias rientrati su fondo sabbia tenue. La barretta a sinistra è la
costola della cartella e tiene insieme le due righe anche quando il fondo si
distingue poco. Sta PRIMA di .manuale di proposito: una referenza appaiata e
scritta a mano si tiene il giallino del «a mano», che è l'avviso più grosso. */
tr.alias-riga td{background:var(--alias)}
/* Dal 06/09/2026 la costola della cartella ha due colori e non uno: VERDE MARE
sulla capofila — quella che si compra davvero — e sabbia sugli alias che le
stanno sotto. Con un colore solo la cartella si vedeva ma non si sapeva da che
parte cominciava, e la riga che conta è la prima. */
tr.capo-alias td:first-child{box-shadow:inset 3px 0 0 var(--verde-mare)}
tr.alias-riga td:first-child{box-shadow:inset 3px 0 0 var(--sabbia)}
/* `table.dati td` (padding:6px 8px) ha la stessa specificità: senza ripetere
`table.dati` davanti, il rientro perderebbe e non si vedrebbe niente. */
table.dati td.rientro{padding-left:30px; position:relative}
table.dati td.rientro::before{content:'\21B3'; position:absolute; left:11px; top:6px;
color:var(--sabbia); font-weight:800}
tr.manuale td{background:var(--manuale)}
tr.scelta-riga td{background:var(--verde-chiaro)}
/* La riga del totale in fondo a una tabella: è una somma, non un dato in più,
e si deve leggere come tale senza doverla cercare. */
table.dati tfoot tr.totale td{border-top:2px solid var(--petrolio); border-bottom:none;
font-weight:800; background:#eef4f5}
table.dati tfoot tr.totale:hover td{background:#eef4f5}
/* La data del prezzo, sotto al prezzo, nella stessa cella. */
.quando{display:block; font-size:10px; font-weight:400; color:var(--grigio);
text-transform:none; letter-spacing:0; white-space:nowrap}
/* ---------- etichette ---------- */
.tag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; padding:2px 7px;
border-radius:10px; background:#e7eff1; color:var(--petrolio); text-transform:uppercase; white-space:nowrap}
.tag.giallo{background:var(--giallo); color:var(--petrolio-scuro)}
.tag.menta{background:var(--menta); color:var(--petrolio-scuro)}
.tag.rosso{background:var(--rosso-chiaro); color:var(--rosso)}
.tag.sabbia{background:#f0e6d6; color:#6b5230}
.tag.grigio{background:#eef2f3; color:var(--grigio)}
.x-bene{color:var(--verde); font-weight:800}
.x-attenzione{color:#a97400; font-weight:800}
.x-allarme{color:var(--rosso); font-weight:800}
/* ---------- grafici ---------- */
/* Il disegno sta nell'SVG (stirato in larghezza), le scritte sono HTML: così
restano nitide a qualsiasi larghezza e i numeri della scala non si tagliano.
Nessuna classe qui si chiama .barra: quella è la barra di navigazione, e
height:52px finiva sui rettangoli del grafico facendoli galleggiare. */
/* minmax(0,1fr) e non 1fr: la misura minima di una traccia «1fr» è il contenuto,
e il disegno dentro non scende mai sotto la sua larghezza naturale — il grafico
sporgeva di quindici pixel e si portava dietro tutta la pagina del telefono. */
.gr{display:grid; grid-template-columns:52px minmax(0,1fr); gap:0 6px; margin:2px 0 2px}
.gr-scala{grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:space-between;
align-items:flex-end; text-align:right; font-size:10px; color:var(--grigio);
font-variant-numeric:tabular-nums; line-height:1; padding:1px 0}
.gr-tela{grid-column:2; grid-row:1}
.gr-svg{display:block; width:100%; height:150px; background:#fbfdfd;
border:1px solid var(--bordo); border-radius:var(--r)}
.gr-griglia{stroke:var(--bordo); stroke-width:1; stroke-dasharray:3 3}
.gr-base{stroke:var(--bordo-forte); stroke-dasharray:none}
.gr-colonna{fill:var(--petrolio); opacity:.85}
.gr-colonna:hover{fill:var(--giallo); opacity:1}
.gr-banda{fill-opacity:.72; stroke-width:1}
.gr-banda:hover{fill-opacity:.92}
/* L'andamento del prezzo: una linea, e la sua scala non parte da zero. Lo
spessore è in pixel veri (vector-effect nell'SVG), altrimenti lo stiramento
in larghezza la farebbe sottile in un punto e grassa in un altro. */
.gr-linea{stroke:var(--petrolio); stroke-width:2; fill:none; stroke-linecap:round}
.gr-punto{fill:var(--giallo); stroke:var(--petrolio); stroke-width:1.2}
.gr-mesi{grid-column:2; grid-row:2; display:flex; margin-top:3px}
.gr-mesi span{flex:1 1 0; min-width:0; text-align:center; font-size:9.5px; color:var(--grigio);
overflow:hidden; white-space:nowrap}
.legenda{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; font-size:11px; color:var(--grigio)}
.legenda i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px}
.periodo{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; align-items:center}
.periodo a{font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; text-decoration:none;
background:#eef4f5; color:var(--petrolio)}
.periodo a.on{background:var(--petrolio); color:#fff}
.periodo .separa{width:1px; height:16px; background:var(--bordo); margin:0 4px}
/* ---------- elenchi a due colonne ---------- */
.elenco{border:1px solid var(--bordo); border-radius:var(--r); max-height:420px; overflow:auto; background:#fff}
.elenco .voce{display:block; padding:7px 10px; border-bottom:1px solid #eef3f4; font-size:13px}
.elenco .voce .meta{display:block; font-size:11px; color:var(--grigio)}
.elenco .voce:hover{background:#f2f8f9}
/* ---------- avanti e indietro fra le schede ---------- */
.scorri{display:flex; align-items:center; gap:6px}
.scorri .btn{padding:6px 10px}
.scorri .btn.spento{opacity:.35; pointer-events:none}
.scorri .posizione{font-size:11px; color:var(--grigio); font-variant-numeric:tabular-nums; white-space:nowrap}
/* ---------- qualità e verbale degli incontri ---------- */
/* Il voto assoluto della scheda tecnica: si legge da lontano, e il /100 accanto
ricorda che è assoluto — quello relativo, dentro la materia, vale fino a 1,00. */
.voto{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:22px; color:var(--petrolio);
font-weight:400; margin-left:6px; vertical-align:-2px}
.voto small{font-size:11px; color:var(--grigio); margin-left:1px}
/* Il perché del voto: è il pezzo che si rilegge quando si sceglie fra due
prodotti, quindi sta in un riquadro suo e non in mezzo al resto. */
.motivazione{background:#f7fafb; border-left:3px solid var(--menta); border-radius:0 var(--r) var(--r) 0;
padding:9px 12px; font-size:12.5px; line-height:1.5; color:var(--ink); margin-bottom:10px}
.pannello{padding:8px 0 2px}
.pannello h3{margin-bottom:6px}
.pannello .colonne{gap:12px}
.pannello table.dati{font-size:12px}
.pannello table.dati th{position:static}
/* ---------- login ---------- */
.scatola-login{max-width:340px; margin:12vh auto; background:#fff; border:1px solid var(--bordo);
border-radius:var(--r); padding:26px; box-shadow:0 4px 18px rgba(1,64,89,.10)}
.scatola-login .marchio{color:var(--petrolio); text-align:center; margin-bottom:18px; font-size:22px}
.scatola-login .marchio em{color:var(--grigio)}
.scatola-login .campo{margin-bottom:12px}
/* ---------- albero dell'organigramma ---------- */
.albero{font-size:13px; line-height:1.6}
.albero ul{list-style:none; margin:0 0 0 18px; padding:0 0 0 14px; border-left:1px dashed var(--bordo-forte)}
.albero li{margin:2px 0}
.albero .liv-art{font-weight:800; color:var(--petrolio); margin:0 0 6px}
.albero .liv-var{font-weight:700}
.albero .liv-mat{color:var(--ink)}
.albero .liv-ref{color:var(--grigio); font-size:12px}
/* Il costo del packaging, accanto a quello della variante: è un costo anche
lui ma non è una materia della ricetta, e si legge come una parentesi. */
.albero .liv-asporto{color:var(--sabbia); font-size:12px; font-weight:700}
/* IL PALLINO fra il nome del fornitore e il codice della referenza (16/09/2026).
Senza, «Pregis PRE00012» si legge come una cosa sola. Più chiaro del testo
attorno perché è uno stacco, non un dato: deve separare, non farsi leggere. */
.albero .stacco{color:var(--bordo-forte); font-weight:800; padding:0 2px}
/* UN PRODOTTO, UN BLOCCO (16/09/2026). Prima era una sequenza piatta di
paragrafi e liste, e l'ultimo ramo di un articolo stava alla stessa distanza
dal titolo del successivo: non si capiva dove finiva uno e cominciava
l'altro. Il filetto è tenue di proposito — quello che deve fare il lavoro è
lo spazio, la riga serve solo a dire che lo stacco è voluto.
`break-inside:avoid` è l'altra metà: in stampa un articolo non si spezza
fra due fogli. */
.albero-art{margin-top:20px; padding-top:14px; border-top:1px solid var(--bordo); break-inside:avoid}
.albero-art:first-child{margin-top:0; padding-top:0; border-top:none}
/* ---------- stampe ---------- */
.foglio{max-width:900px; margin:0 auto; padding:26px; background:#fff}
.foglio h1{border-bottom:3px solid var(--giallo); padding-bottom:6px}
/* Un blocco che comincia su un foglio suo. Sullo schermo, dove le pagine non
esistono, resta un filetto: serve lo stesso a vedere dove finisce una scuola
e comincia la successiva. */
.pag-nuova{border-top:2px solid var(--bordo-forte); margin-top:26px; padding-top:20px}
/* ==========================================================================
LE RIGHE CHE SI TRASCINANO — elenco degli articoli (13/09/2026)
========================================================================== */
/* La maniglia è l'UNICO punto da cui si prende la riga: prenderla da
dappertutto vorrebbe dire non poter più selezionare un nome col dito, né
fare tap su un codice senza spostare mezza tabella.
`touch-action:none` è quello che sul telefono impedisce alla pagina di
scorrere mentre si trascina — senza, il dito muove il foglio e non la riga. */
.maniglia{cursor:grab; color:var(--bordo-forte); text-align:center; user-select:none;
touch-action:none; font-size:15px; line-height:1}
.maniglia:hover{color:var(--petrolio)}
/* La riga che si sta tenendo in mano: resta al suo posto, ma si vede che è
staccata dalle altre. Non si muove — a muoversi è la linea di posa. */
tr.trascinata{opacity:.45; background:var(--ambra) !important}
/* Niente bordo giallo sulla riga in mano: il giallo in questa pagina vuol dire
UNA cosa sola — «la riga finirà qui» — e due segni dello stesso colore che
dicono cose diverse sono un segno che non dice più niente. Che la riga sia
in mano lo dicono già l'ambra e la trasparenza. */
/* LA LINEA DI POSA: dice dove finirà la riga se la lasci adesso. È l'unica
cosa che si muove durante il gesto, ed è quello che rende il trascinamento
prevedibile: prima si vede il risultato, poi si lascia. */
tr.posa-sopra td{box-shadow:inset 0 3px 0 -1px var(--giallo)}
tr.posa-sotto td{box-shadow:inset 0 -3px 0 -1px var(--giallo)}
/* Mentre si trascina il cursore è quello della presa DAPPERTUTTO, non solo
sopra la maniglia: il dito è impegnato, e il resto della pagina non deve
sembrare cliccabile. La selezione del testo va spenta, altrimenti trascinando
si evidenzia mezza tabella. */
body.sto-trascinando{cursor:grabbing; user-select:none}
body.sto-trascinando a{cursor:grabbing}
/* Mentre si cerca, le maniglie si spengono: le righe nascoste dal filtro
renderebbero il gesto una scommessa su dove va a finire la riga. */
.senza-trascina .maniglia{opacity:.25; pointer-events:none; cursor:default}
.ordine-detto{margin:10px 0 0; padding:6px 11px; font-size:12px;
background:var(--verde-chiaro); color:var(--verde); border:1px solid #b6ddc8}
.ordine-detto:empty{display:none}
/* L'articolo ATTENZIONATO in elenco: una sponda gialla sul bordo sinistro.
Non un fondo pieno — le righe segnalate possono essere tante, e un elenco
tutto giallo non segnala più niente. */
tr.riga-attenzionata td:first-child{box-shadow:inset 3px 0 0 var(--giallo)}
/* Il prezzo ancora da confermare: si vede che è scritto e che non è fermo. */
input.da-confermare{background:var(--ambra); border-color:var(--giallo); font-style:italic}
/* ==========================================================================
LE DUE NOTE DI UNA VOCE DI VERBALE (25/09/2026)
==========================================================================
Sopra la nota del PRODOTTO, che finisce anche sul riepilogo PDF mandato
all'agente; sotto, in ambra, quella che resta qui dentro. L'ambra è lo
stesso colore del prezzo da confermare qui sopra, e vuol dire la stessa
cosa: «questo campo non è come gli altri».
`min-height` va riscritta: quella di serie (70px) è pensata per un modulo,
e dentro a una riga di tabella, moltiplicata per due, farebbe righe alte il
doppio di quanto serve. Due righe di testo bastano a vedere cosa c'è
scritto, e il campo si tira giù col manico se serve di più. */
td.note-doppie{min-width:250px}
td.note-doppie textarea{min-height:42px; font-size:12.5px; padding:5px 7px; line-height:1.35}
td.note-doppie .quando{margin-bottom:2px}
td.note-doppie .quando.interna{color:#8a6d1f}
td.note-doppie .quando.interna{margin-top:6px}
textarea.nota-interna,input.nota-interna{background:var(--ambra); border-color:var(--giallo)}
/* IL PREZZO DI DEFAULT, in cima alla tabella dei prezzi. Un fondo suo e un
filetto: è un campo che comanda TUTTA la tabella sotto, e un campo che
comanda gli altri non può sembrare uno degli altri. */
.riga-default{background:#f2f6f7; border:1px solid var(--bordo); border-radius:var(--r);
padding:10px 13px; margin:14px 0 16px}
.riga-default input{font-weight:800; font-size:16px}
.riga-default p{margin:0}
/* Il prezzo che SEGUE IL DEFAULT: c'è, è quello giusto, ma non si scrive qui.
Spento e non nascosto — il numero serve per leggere il margine sulla riga —
e senza cursore di scrittura, che altrimenti si prova a correggerlo e non
succede niente, che è il modo peggiore di dire di no. */
input.segue-default{background:#f2f5f6; color:var(--grigio); border-style:dashed; cursor:not-allowed}
/* Il prezzo per unità d'uso dentro a una news: sta accanto al prezzo del
collo che si è appena letto, e pesa meno di lui perché è la stessa cosa
detta in un altro modo, non un dato nuovo. */
.news-um{font-size:11px; font-weight:700; white-space:nowrap; opacity:.85}
@media print{
body{background:#fff}
.pag-nuova{break-before:page; page-break-before:always; border-top:none; margin-top:0; padding-top:0}
/* Un titolo in fondo al foglio con la sua tabella sulla pagina dopo è un
titolo che non intitola niente. */
.foglio h2,.foglio h3{break-after:avoid; page-break-after:avoid}
/* Il fondo torna bianco: la testata di pagina, scritta in chiaro per lo
schermo, sparirebbe. */
.testata-pagina h1{color:var(--petrolio)}
.testata-pagina .sottotitolo,.testata-pagina .posizione{color:var(--grigio)}
.testata-pagina .codice,.testata-pagina a:not(.btn){color:var(--petrolio-chiaro)}
.testata-pagina .btn{display:none !important}
.barra,.nav,.utente,.no-stampa{display:none !important}
main{padding:0; max-width:none}
.riquadro{border:none; box-shadow:none; padding:0}
table.dati th{position:static; background:var(--petrolio) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}
/* ---------- telefono ---------- */
@media(max-width:760px){
main{padding:10px 8px 44px}
.barra{height:auto; padding:8px 10px; gap:6px 10px}
.marchio{font-size:14px}
/* flex-basis 100%, non width: .nav ha flex:1 e la larghezza da sola non
basterebbe a mandarla a capo sotto il marchio.
Le voci vanno a capo invece di scorrere (dal 04/09/2026, quando INCONTRI ha
portato la barra a sette voci): scorrendo, le ultime tre restavano nascoste
senza che niente lo dicesse, e una voce che non si vede non esiste. Due
righe di barra costano trenta pixel e li valgono. */
.nav{order:3; flex:1 1 100%; margin-left:0; flex-wrap:wrap; gap:4px}
.nav a{white-space:nowrap; padding:6px 9px; font-size:11px; letter-spacing:.5px}
.utente{margin-left:auto; font-size:11px}
.versione{display:none}
main h1{font-size:17px}
.riquadro{padding:12px}
/* Due colonne strette invece di una sola larga: un campo «UM di fattura» non ha
bisogno di tutto lo schermo, e a una per riga la scheda di una referenza
diventava un rotolo da scorrere per mezzo minuto. */
.griglia-campi{grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); gap:10px}
.colonne{grid-template-columns:1fr}
/* Sul telefono ogni controllo prende la sua riga: due menu a tendina affiancati
si contendono una larghezza che non c'è. */
.riga-controlli > *{flex:1 1 100%}
.riga-controlli .cresci{flex:1 1 100%}
/* 16px è la soglia sotto la quale iOS ingrandisce da solo la pagina
quando tocchi un campo, e poi resta storta. */
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],
input[type=password],input[type=search],select,textarea{font-size:16px; padding:8px}
.btn{padding:9px 14px}
.btn.piccolo{padding:6px 10px}
table.dati th{position:static; padding:6px 5px}
table.dati td{padding:7px 5px}
/* Le tabelle scorrono già dentro .scorre: senza un minimo, invece di scorrere
si schiacciano, e una descrizione di fattura diventa una colonna di parole
alta cinque righe. Meglio scorrere di un dito e leggere. */
.scorre table.dati{min-width:460px}
.solo-largo{display:none}
.gr{grid-template-columns:40px minmax(0,1fr)}
.gr-svg{height:130px}
/* Un mese su due sparisce ma tiene il suo posto (visibility, non display):
serve a lasciare ogni nome sotto alla colonna che descrive. Quello che resta
è largo un dodicesimo di schermo — trenta pixel — e «nov 25» non ci sta:
lo si lascia debordare nella casella del vicino, che tanto è vuota, e si
taglia solo al bordo della striscia perché non spinga fuori la pagina. */
.gr-mesi{overflow:hidden}
.gr-mesi span{overflow:visible}
.gr-mesi span.alterno{visibility:hidden}
.testata-pagina .btn{width:100%; justify-content:center}
.scorri .btn{width:auto}
}
/* ==========================================================================
Tornata del 05/09/2026. Tre colori nuovi, tutti derivati dalla palette del
Brand Manual e non presi da fuori:
· azzurro il petrolio schiarito. È il colore del WHAT IF, cioè di
quello che NON è successo: non deve mai potersi confondere
con una spesa vera, e per questo non è né petrolio né verde.
· ambra il giallo del marchio spento su fondo chiaro: «attenzionato».
· arancio fra l'ambra e il rosso: «da controllare» è più di un
promemoria e meno di un guasto, e il colore lo dice.
Il rosso resta quello che era e vuol dire una cosa sola: manca la
conversione, questa referenza non fa food cost.
========================================================================== */
:root{
--azzurro:#1877a3; --azzurro-chiaro:#e2f0f7; --azzurro-scuro:#0a4f68;
--ambra-tag:#fdeec6; --ambra-testo:#8a6100;
--arancio:#c25a1f; --arancio-chiaro:#fbe3d4;
--menta-chiara:#e4f4f0;
/* VERDE MARE (06/09/2026): la menta del marchio portata al fondo, tanto da
reggere il bianco sopra. Non è un colore nuovo, è la stessa menta con
meno luce — serviva un verde che si vedesse come pieno e non come velo:
lo porta la costola della capofila di un gruppo di appaiate e il badge
«già in un'altra materia», che sono le due cose da vedere senza leggere. */
--verde-mare:#2f8b78; --verde-mare-chiaro:#dceee9;
}
.tag.azzurro{background:var(--azzurro-chiaro); color:var(--azzurro-scuro)}
.tag.ambra{background:var(--ambra-tag); color:var(--ambra-testo)}
.tag.arancio{background:var(--arancio-chiaro); color:var(--arancio)}
.tag.menta-chiaro{background:var(--menta-chiara); color:var(--verde)}
.tag.verdemare{background:var(--verde-mare); color:#fff}
.btn.azzurro{background:var(--azzurro); border-color:var(--azzurro); color:#fff}
.btn.azzurro:hover{background:var(--azzurro-scuro); border-color:var(--azzurro-scuro)}
/* I badge di una riga di elenco: vanno a capo dopo la descrizione invece di
allargare la colonna, che sul telefono sarebbe l'unica cosa che si vede. */
.badge{display:block; margin-top:2px; line-height:1.9}
.badge .tag{margin-right:3px}
.legenda-badge{line-height:2.2}
/* La chiosa dentro un'etichetta di campo: «xUM» da solo non si capisce, e la
spiegazione non deve diventare un'altra riga di modulo. */
label .chiosa{text-transform:none; font-weight:600; letter-spacing:0; color:#93a8b0}
/* L'intestazione di colonna su cui si clicca per ordinare. */
.capo-ordina{color:#fff; text-decoration:none; white-space:nowrap}
.capo-ordina:hover{color:var(--giallo)}
.capo-ordina.on{color:var(--giallo)}
/* La fascia di mesi scelta a mano, sotto al filetto dei periodi. */
.riga-controlli.fascia{margin:6px 0 10px}
/* ---------- il riquadro dove si posa la scheda tecnica ---------- */
/* Trascinare un file è la strada corta; il tasto «scegli un file» resta,
perché da telefono non si trascina niente. */
.posa{border:2px dashed var(--bordo-forte); border-radius:var(--r); background:#f7fafb;
padding:14px; text-align:center; margin-bottom:12px; transition:background .12s, border-color .12s}
.posa.sopra{border-color:var(--azzurro); background:var(--azzurro-chiaro)}
.posa-invito{margin:0; font-size:13px; color:var(--ink)}
.posa.carica .posa-invito{opacity:.5}
/* ---------- what if ---------- */
/* Tutto quello che sta dentro un riquadro «whatif» è un'ipotesi. Il filo
azzurro a sinistra è lì perché si veda scorrendo, senza leggere. */
.riquadro.whatif{border-left:4px solid var(--azzurro)}
.riquadro.whatif h2{color:var(--azzurro-scuro)}
table.dati th.col-whatif{background:var(--azzurro)}
table.dati td.col-whatif{background:var(--azzurro-chiaro)}
table.dati tr:hover td.col-whatif{background:#d3e8f2}
table.dati tfoot tr.totale td.col-whatif{background:#d3e8f2}
.campo-whatif{width:96px; text-align:right; border-color:var(--azzurro)}
.cartellino-whatif{margin-top:12px; padding:11px 14px; border-radius:var(--r);
background:var(--azzurro-chiaro); border:1px solid #b9d9e8; font-size:13.5px}
.whatif-bar{margin-top:8px}
.whatif-bar summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--azzurro-scuro); padding:4px 0}
.whatif-bar table.dati{font-size:12px}
.whatif-bar table.dati th{position:static}
/* ---------- le fatture agganciate a una referenza ---------- */
.annata{border-top:1px solid var(--bordo); padding:6px 0}
.annata summary{cursor:pointer; font-weight:800; color:var(--petrolio); font-size:13px; padding:4px 0}
.annata summary .quando{display:inline; margin-left:8px; font-weight:400}
.mese-fatture{margin:10px 0 4px; text-transform:uppercase; letter-spacing:.6px; color:var(--grigio)}
/* Ogni mese è una tendina (05/09/2026): una referenza comprata tutto l'anno
faceva dodici tabelle una sotto l'altra. Il tiene lo stesso stile
del titolo che c'era prima, così l'elenco chiuso si legge come un indice. */
.mese-piega{margin:2px 0}
.mese-piega summary{cursor:pointer; font-size:12px; font-weight:800; padding:3px 0}
.mese-piega summary:hover{color:var(--petrolio)}
.mese-piega summary .quando{display:inline; margin-left:8px; font-weight:400; text-transform:none; letter-spacing:0}
/* Il tasto «apri tutto» nel titolo del riquadro: è un comando, non un titolo. */
h2 .btn{margin-left:8px; text-transform:none; letter-spacing:0; vertical-align:middle}
/* La tendina «crea una materia nuova» sotto alle materie di una referenza. */
.piega summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--petrolio-chiaro); padding:4px 0}
.piega summary:hover{color:var(--petrolio)}
.annata table.dati th{position:static}
/* Una nota di credito toglie invece di aggiungere: si legge subito. */
tr.nota-credito td{background:#fdf6ee}
tr.nota-credito:hover td{background:#fbf0e2}
/* ---------- avanzamento verso un obiettivo di fatturato ---------- */
.avanzamento{height:8px; border-radius:4px; background:#e7eff1; overflow:hidden; min-width:90px}
.avanzamento i{display:block; height:100%; background:var(--menta)}
@media print{
table.dati th.col-whatif{background:var(--azzurro) !important}
.posa,.capo-ordina{display:none}
}
@media(max-width:760px){
/* La colonna azzurra del what if è il motivo per cui si è aperta la
modalità: sul telefono cade tutto il resto, non lei. */
.scorre table.dati{min-width:520px}
.cartellino-whatif{font-size:13px}
}
/* ==========================================================================
Tornata del 05/09/2026 sera (v. 0.6.0)
========================================================================== */
/* ---------- la candela dei prezzi ---------- */
/* Un mese in cui la stessa referenza è stata pagata a due prezzi diversi: il
corpo va dal minimo al massimo operati, e dentro ci resta il pallino della
media ponderata. Ambra e non rossa: due prezzi nello stesso mese sono una
cosa da guardare, non un guasto — e il rosso qui dentro vuol dire un'altra
cosa (manca la conversione). Semitrasparente perché la linea che passa in
mezzo deve restare leggibile. */
.gr-candela{fill:var(--ambra-tag); stroke:#d9a441; stroke-width:1; fill-opacity:.85}
.gr-aggancio:hover .gr-candela{fill:var(--giallo); fill-opacity:1}
.gr-aggancio{cursor:pointer}
/* ---------- la riga da cui si era usciti ---------- */
/* Si torna all'elenco e la riga aperta un attimo fa è lì, accesa. Il giallo
svanisce da solo in tre secondi: serve a ritrovare il segno, non a restare.
Il fondo è scritto su ogni cella e non sulla riga, altrimenti il colore
delle righe «a mano» (che sta sulle celle) gli passerebbe davanti. */
tr.tornato td{animation:tornato 3s ease-out 1}
@keyframes tornato{
0%,55%{background:var(--giallo)}
100%{background:transparent}
}
/* Chi ha chiesto di non vedere animazioni si tiene il segno fermo, non niente. */
@media(prefers-reduced-motion:reduce){
tr.tornato td{animation:none; background:var(--manuale)}
}
/* ---------- il registro delle versioni ---------- */
.versione-voce{border-top:1px solid var(--bordo); padding:12px 0 2px}
.versione-voce:first-of-type{border-top:0}
.versione-voce h2{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:2px}
.versione-voce h2 .quando{font-size:11px; font-weight:600; letter-spacing:0; text-transform:none}
.versione-voce h3{color:var(--grigio); font-weight:700; margin-bottom:6px}
.versione-voce ul{margin:0 0 8px; padding-left:18px}
.versione-voce li{margin-bottom:5px}
.versione-voce.in-esercizio{background:#f7fbfc; border-radius:var(--r); padding:12px 12px 4px; margin-bottom:6px}
/* Il francobollo di versione in testata adesso è una porta: ci si clicca e si
legge cosa è cambiato. Sul telefono resta — è anche il modo di sapere se si
sta guardando la correzione appena caricata o la pagina di prima. */
a.versione{text-decoration:none}
a.versione:hover{color:var(--giallo)}
@media(max-width:760px){
.versione{display:inline; font-size:9px}
}
/* ==========================================================================
Tornata del 08/09/2026 — LE CAMPITURE E IL NASTRO DELLE NEWS.
Tre fondi che si riconoscono da lontano e senza leggere, perché a un
incontro con un agente davanti non si legge: si guarda.
· KRAFT SFUMATO un prodotto NUOVO, che aspetta la sua fattura. Kraft
come la carta di un pacco appena arrivato: c'è la
merce, non c'è ancora il documento. Il fondo se ne va
da solo il giorno in cui la voce di fattura la aggancia.
Era a pois fino al 17/09/2026: adesso è una sfumatura
verticale, scura in basso e chiara in alto, e il nome
della referenza nuova sta in grassetto.
· VERDE MARE A STELLINE il prezzo SCENDE.
· ROSSO PASTELLO A SEGNALI il prezzo SALE.
Non sono tinte piatte ma campiture: una tinta piatta in più su una pagina
che ne ha già sei (giallino a mano, sabbia alias, ambra attenzionato,
arancio da controllare, azzurro what if, verde mare capofila) diventerebbe la
settima da imparare a memoria. Un disegno invece si riconosce anche quando i
colori si assomigliano, e regge la stampa in bianco e nero.
========================================================================== */
:root{
--kraft:#ece0cd; --kraft-scuro:#b08d5e; --kraft-testo:#6b5230;
/* La sabbia dell'asporto portata al fondo, tanto da reggere il bianco sopra:
è la testata del gruppo «DA ASPORTO» nelle tabelle a due piani. */
--sabbia-scura:#8a6f42;
--rosso-pastello:#fbe3de; --rosso-pastello-scuro:#c9705f;
}
/* Le campiture: si applicano alla riga di una tabella o a un riquadro. Il
disegno sta sul fondo, il colore sotto — così il testo resta leggibile. */
/* IL KRAFT NON È PIÙ A POIS (dal 17/09/2026): è una SFUMATURA verticale,
scura in basso e chiara in alto. I pallini erano il disegno più rumoroso dei
tre e cadevano proprio dove servono i numeri — su una riga di verbale il
fondo deve dire «questo prodotto è nuovo» stando sotto al testo, non
disputandogli il posto. La sfumatura fa lo stesso lavoro: si riconosce a
colpo d'occhio, non si legge sopra le cifre, e regge il bianco e nero perché
la riga resta più densa in fondo che in cima.
Verticale e non obliqua: le celle di una riga hanno tutte la stessa altezza,
quindi la sfumatura attraversa la riga intera senza scalini fra una colonna e
l'altra. */
.fondo-kraft{
background-color:var(--kraft);
background-image:linear-gradient(to top,
rgba(176,141,94,.45) 0%, rgba(176,141,94,.16) 55%, rgba(176,141,94,0) 100%);
}
/* Il prezzo che scende: anche questa è una SFUMATURA (dal 21/09/2026; prima
erano righe inclinate, e prima ancora stelline). Stesso disegno del kraft e
stesso verso — scura in fondo, chiara in cima — perché due campiture che
dicono due cose diverse sullo STESSO verbale devono differire per colore, non
per trama: due trame diverse sono due cose da imparare, e l'inclinato aveva
il difetto di battere sui numeri proprio dove si leggono.
Verticale come il kraft: le celle di una riga hanno tutte la stessa altezza,
quindi la sfumatura attraversa la riga intera senza scalini fra una colonna e
l'altra. In bianco e nero regge lo stesso — la riga resta più densa in fondo
che in cima — e il rosso resta l'unico dei tre ad avere un disegno. */
.fondo-giu{
background-color:var(--verde-mare-chiaro);
background-image:linear-gradient(to top,
rgba(47,139,120,.30) 0%, rgba(47,139,120,.10) 55%, rgba(47,139,120,0) 100%);
}
.fondo-su{
background-color:var(--rosso-pastello);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M6 1.5 11 10.5H1Z' fill='none' stroke='%23c9705f' stroke-width='1.2' opacity='.55'/%3E%3Cpath d='M6 5v2.6M6 8.8v.9' stroke='%23c9705f' stroke-width='1.2' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M19 14.5 24 23.5H14Z' fill='none' stroke='%23c9705f' stroke-width='1.2' opacity='.55'/%3E%3Cpath d='M19 18v2.6M19 21.8v.9' stroke='%23c9705f' stroke-width='1.2' opacity='.55' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tag.kraft{background:var(--kraft); color:var(--kraft-testo)}
.tag.pericolo{background:var(--rosso-pastello); color:#8c3b2b}
/* Il pannello «dove e da quando» sotto a una voce di verbale. */
.adozione{margin-top:6px}
.adozione > summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--petrolio);
padding:4px 0; list-style-position:outside}
.scuola-adozione{border:1px solid var(--bordo); border-radius:var(--r); padding:6px 8px}
.scuola-adozione input[type=date]{width:100%}
/* Un cambio già deciso ma non ancora cominciato: azzurro, come il what if —
è l'altro caso in cui un numero sulla pagina non è ancora successo. */
tr.riga-futuro td{background:var(--azzurro-chiaro)}
/* --------------------------------------------------------------------------
IL NASTRO DELLE NEWS.
Scorre come i titoli di un notiziario, si ferma quando ci passi sopra (o
quando lo tocchi), e ogni titolo è un collegamento a dove la cosa è
successa. Sotto c'è lo stesso elenco fermo, per chi vuole leggerlo con
calma: un testo che scorre è comodo per accorgersi, scomodo per studiare.
-------------------------------------------------------------------------- */
.nastro{background:var(--petrolio); border-radius:var(--r); overflow:hidden; position:relative}
.nastro-testata{display:flex; align-items:center; gap:10px; padding:6px 12px;
background:var(--petrolio-scuro); color:#fff; font-size:11px; font-weight:800;
letter-spacing:.8px; text-transform:uppercase}
.nastro-testata .conta{background:var(--giallo); color:var(--petrolio-scuro);
border-radius:99px; padding:1px 8px; font-size:10px}
.nastro-pista{overflow:hidden; white-space:nowrap; padding:8px 0}
.nastro-pista:hover .nastro-scorre{animation-play-state:paused}
/* Quanto dura un giro del nastro: si sceglie da IMPOSTAZIONI (dal 13/09/2026) e
arriva qui come variabile, scritta sul riquadro dalla pagina che lo disegna.
I 60s restano il valore di scorta, per quando l'impostazione non c'è. */
.nastro-scorre{display:inline-block; white-space:nowrap; padding-left:100%;
animation:nastro var(--nastro-durata, 60s) linear infinite}
@keyframes nastro{from{transform:translateX(0)} to{transform:translateX(-100%)}}
.news-voce{display:inline-block; color:#dcecf1; text-decoration:none; font-size:13px;
margin-right:26px; padding-left:22px; position:relative}
.news-voce:hover{color:#fff; text-decoration:underline}
.news-voce b{color:var(--giallo); font-weight:800}
.news-segno{position:absolute; left:0; top:-1px; font-weight:800; font-size:12px}
.news-kraft .news-segno{color:#e3c79c}
.news-verdemare .news-segno{color:var(--menta)}
.news-pericolo .news-segno{color:#ff9f8b}
.news-azzurro .news-segno{color:#8fd0ea}
.news-dal{color:#8fb6c4; font-size:11px}
/* Quanto vale in un anno la notizia. È una stima, non un fatto datato come il
resto della riga: sta in un cartellino a sé perché si legga come tale. */
.news-anno{font-size:11px; font-weight:800; white-space:nowrap;
background:rgba(255,255,255,.10); border-radius:99px; padding:1px 7px}
.news-voce .news-um{color:var(--menta); opacity:.8}
.news-anno.bene{color:var(--menta)}
.news-anno.male{color:#ff9f8b}
.nastro details{padding:0 12px 10px}
.nastro summary{color:#a9c8d3; font-size:11px; cursor:pointer; padding:4px 0}
.nastro details .news-voce{display:block; margin:0; padding:5px 0 5px 22px;
border-top:1px solid rgba(255,255,255,.08)}
/* Chi ha chiesto meno movimento non deve inseguire un testo che scappa. */
@media (prefers-reduced-motion: reduce){
.nastro-scorre{animation:none; padding-left:0; white-space:normal; display:block; padding:0 12px}
.nastro-scorre .news-voce{display:block; margin:0; padding:4px 0 4px 22px}
}
/* Sul telefono il nastro resta, ma i titoli sono più corti da leggere. */
@media (max-width:700px){
.nastro-scorre{animation-duration:calc(var(--nastro-durata, 60s) * 1.5)}
.news-voce{font-size:12px; margin-right:20px}
}
/* La data a cui si sta guardando, quando non è oggi: deve dirlo forte. */
.avviso.data-spostata{background:var(--azzurro-chiaro); border-color:var(--azzurro);
color:var(--azzurro-scuro)}
/* La referenza nata a un incontro che aspetta ancora la sua voce di fattura.
Vince sul giallino delle scritte a mano solo come DISEGNO: il fondo giallino
resta sotto, perché quella referenza è tutte e due le cose.
Stessa SFUMATURA del kraft (dal 17/09/2026, prima erano pois): è la stessa
cosa detta in due posti — la riga del verbale e la riga dell'elenco — e due
disegni diversi per la stessa cosa sono due cose da imparare. */
tr.attesa-fattura td{
background-color:var(--kraft);
background-image:linear-gradient(to top,
rgba(176,141,94,.45) 0%, rgba(176,141,94,.16) 55%, rgba(176,141,94,0) 100%);
}
/* L'avviso di un cambio già deciso, dentro una stampa: azzurro come il what if
— anche questo è un numero che non è ancora successo — e con la barretta a
sinistra, perché su carta il colore da solo può sparire. */
.avviso-cambio{display:inline-block; font-size:11px; font-weight:700; color:var(--azzurro-scuro);
background:var(--azzurro-chiaro); border-left:3px solid var(--azzurro);
padding:2px 7px; border-radius:0 var(--r) var(--r) 0; margin-top:3px}
tr.riga-arrivo td{background:#f4fafc}
/* Il nome di una tornata, accanto al suo numero nel registro delle versioni. */
.nome-versione{font-family:'Dela Gothic One',system-ui,sans-serif; font-size:13px;
color:var(--giallo); font-weight:400; margin-left:6px}
@media print{
/* Le campiture su carta: il disegno serve a distinguere le righe anche in
bianco e nero, ma stampato a pieno regime mangia inchiostro e sporca il
testo. Si tiene il fondo — chiedendo al browser di stamparlo davvero — e si
alleggerisce la trama. */
.fondo-kraft,.fondo-giu,.fondo-su,tr.riga-arrivo td,.avviso-cambio{
-webkit-print-color-adjust:exact; print-color-adjust:exact}
.fondo-su{background-size:34px 34px; opacity:.96}
/* `.fondo-giu` e `.fondo-kraft` stanno fuori di proposito: sono gradienti, e
imporre loro una piastrella di 34px li spezzerebbe ogni 34px. Tenui lo sono
già — al kraft basta scaricare un filo di inchiostro. */
.fondo-giu,.fondo-kraft{opacity:.96}
/* Il nastro delle news è roba da schermo: su carta c'è la stampa apposta. */
.nastro{display:none !important}
}
/* ==========================================================================
LE VARIANTI IN ELENCO — la tendina che si apre dalla riga dell'articolo
(16/09/2026)
========================================================================== */
/* La freccia gira invece di cambiare carattere: un segno solo che si muove si
legge come lo stesso segno in due stati, due caratteri diversi come due cose
diverse. */
.freccia{display:inline-block; color:var(--petrolio-chiaro); font-size:13px; font-weight:800;
transition:transform .12s ease; transform-origin:50% 50%}
.apri-varianti{cursor:pointer; user-select:none; color:var(--petrolio-chiaro)}
.apri-varianti:hover .freccia{color:var(--petrolio)}
.apri-varianti.aperta .freccia{transform:rotate(90deg); color:var(--petrolio)}
.apri-varianti:focus-visible{outline:2px solid var(--giallo); outline-offset:-2px}
/* La riga di una variante: è figlia della riga sopra, e si deve vedere senza
leggere. Il fondo è lo stesso sabbia tenue degli alias fra le referenze —
là vuol dire «questa riga appartiene a quella sopra», e qui vuol dire
esattamente la stessa cosa. */
table.dati tr.riga-variante td{background:var(--alias); font-size:12.5px;
border-bottom:1px solid var(--bordo)}
table.dati tr.riga-variante:hover td{background:#f5efe0}
tr.riga-variante td:first-child{box-shadow:inset 3px 0 0 var(--sabbia)}
/* La riga dell'asporto dentro «da dove arriva il costo»: non è una materia
della ricetta, è quello che la variante si porta dietro uscendo. */
table.dati tr.riga-asporto td{background:#faf6ec}
/* ==========================================================================
PROVA ORDINE — il carrello finto (16/09/2026)
========================================================================== */
/* Due colonne, listino e carrello, che sul telefono diventano una sola: è
`.colonne` già esistente, qui si tiene solo il listino alto quanto lo
schermo e non quanto il menu di una scuola intera. */
.prova-ordine #tab-listino tbody tr{cursor:pointer}
.prova-ordine #tab-listino tbody tr:hover td{background:#fff9e6}
/* I due tastini della quantità e il numero in mezzo. Il numero è a larghezza
fissa: senza, passando da 9 a 10 la riga intera si sposta di qualche pixel e
il tasto + scappa da sotto al dito. */
.prova-ordine .quante{display:inline-block; min-width:26px; text-align:center;
font-weight:800; font-variant-numeric:tabular-nums}
.prova-ordine td.num .btn.piccolo{padding:2px 8px; font-size:13px; line-height:1.2}
/* IL CARTELLINO DELL'ORDINE: i tre numeri per cui si è aperta la pagina —
quanto incassi, quanto ci guadagni, quanto vale X — staccati dalla tabella
perché sono la risposta, non un'altra riga di dati. */
.cartellino-ordine{margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px; padding:14px 16px; border-radius:var(--r);
background:var(--verde-chiaro); border:1px solid #b6ddc8}
/* `display:grid` di una classe batte la regola `[hidden]` del browser, che
arriva dal foglio di sistema: senza questa riga il cartellino resta lì a
carrello vuoto, con tre numeri in bianco. Vale per qualunque elemento a cui
si dia un display e che si voglia poter nascondere con `hidden`. */
.cartellino-ordine[hidden]{display:none}
.cartellino-ordine > div{min-width:0}
.cartellino-ordine .etichetta{display:block; font-size:10px; font-weight:800; letter-spacing:.6px;
text-transform:uppercase; color:var(--grigio)}
.cartellino-ordine b{font-size:19px; font-weight:800; color:var(--petrolio);
font-variant-numeric:tabular-nums}
.cartellino-ordine .quando{display:inline; margin-left:4px}
/* ==========================================================================
I DUE PIANI — il bancone sopra, l'asporto sotto, nella STESSA colonna
(21/09/2026)
==========================================================================
Dal 17/09/2026 ogni prezzo è due: al bancone e da asporto. Erano due COPPIE
di colonne affiancate (prezzo e X, prezzo e X) e l'elenco degli articoli era
arrivato a dodici colonne — con i due prezzi quasi sempre UGUALI, perché la
differenza fra i due sta quasi tutta nella X. Due colonne di numeri identici
sono larghezza spesa per non dire niente.
Adesso stanno uno SOPRA l'altro nella stessa cella: il confronto è verticale
e immediato — stesso prezzo, X diverse — e la tabella perde due colonne.
Le due righe sono alte uguali in tutte le celle, così il piano di sopra di
una colonna è allineato al piano di sopra di quella accanto: è quello che
permette di leggere la tabella per righe senza etichette dappertutto. */
td.due-piani{padding-top:3px; padding-bottom:3px; white-space:nowrap}
td.due-piani .piano{display:flex; align-items:baseline; justify-content:flex-end; gap:8px;
line-height:20px; min-height:20px}
/* Il filetto che separa i due piani: punteggiato e tenue, perché divide due
letture della stessa cosa, non due righe di dati. */
td.due-piani .piano + .piano{border-top:1px dotted var(--bordo); padding-top:1px}
/* L'etichetta del piano (dove c'è posto per scriverla): piccola, a sinistra,
col numero che resta incolonnato a destra. Quella dell'asporto porta la
sabbia della testata «DA ASPORTO», che in questa applicazione vuol dire
sempre la stessa cosa. */
td.due-piani .piano i{font-style:normal; font-size:9px; font-weight:800; letter-spacing:.5px;
text-transform:uppercase; color:var(--grigio); margin-right:auto}
td.due-piani .piano-asporto i{color:var(--sabbia-scura)}
/* L'avviso in testata: due parole che dicono cosa sono i due piani, una volta
sola per colonna invece che una volta per cella. */
table.dati th .piani-capo{display:block; font-size:9px; font-weight:600; letter-spacing:0;
text-transform:none; color:#bfd7de}
/* Dove l'etichetta non ci sta (le celle strette del listino) il piano di sotto
si riconosce dal filetto sabbia a sinistra: stesso colore, meno posto. */
td.cella-bar .piano-asporto{border-left:3px solid var(--sabbia-scura); padding-left:5px}
td.cella-bar .piano-banco{border-left:3px solid var(--petrolio-chiaro); padding-left:5px}
/* ==========================================================================
IL LISTINO BAR PER BAR — una riga per prodotto, una colonna per bar
(21/09/2026)
==========================================================================
La stessa domanda della scheda dell'articolo, girata di novanta gradi: lì si
guarda UN articolo in tutti i bar, qui TUTTI gli articoli in tutti i bar. È
la vista con cui si decide un listino — le differenze fra scuole si vedono
scorrendo una riga — e i prezzi si scrivono qui dentro, senza entrare e
uscire da venti schede. */
table.listino{font-size:12px}
table.listino th.bar{text-align:right}
table.listino th.bar span{display:block; font-size:9px; font-weight:600; letter-spacing:0;
text-transform:none; color:#bfd7de}
table.listino td.cella-bar{padding:3px 6px}
table.listino td.cella-bar input{width:58px; text-align:right; font-size:12px; padding:2px 5px;
font-variant-numeric:tabular-nums}
table.listino td.cella-bar .x{min-width:30px; text-align:right; font-size:11px; font-weight:800;
font-variant-numeric:tabular-nums}
/* Il prezzo che SEGUE IL DEFAULT della variante: qui si può scrivere lo stesso
— ed è voluto — ma si vede che scrivendoci sopra si stacca quella scuola dal
listino comune. Bordo tratteggiato come nella scheda, senza lo spegnimento:
là è di sola lettura, qui è un avvertimento. */
table.listino td.cella-bar input.segue-listino{border-style:dashed; border-color:var(--bordo-forte);
background:#f7fafb}
/* Il bar dove l'articolo NON C'È: la casella del prezzo resta VUOTA. Uno zero
direbbe «lo vendo a zero», un trattino «è una domanda che non si fa»: qui la
cosa vera è la terza — quel prodotto, in quella scuola, non esiste. */
/* Dal 28/09/2026 (0.12.10) niente più righe oblique: la casella lo SCRIVE.
Una trama si legge come «qui c'è qualcosa di strano», una parola dice cosa. */
table.listino td.cella-bar.spento{background:#f7fafb; text-align:center; vertical-align:middle}
table.listino td.cella-bar.spento span{font-size:9.5px; font-weight:800; letter-spacing:.6px; color:var(--grigio)}
/* La colonna del nome resta ferma mentre le scuole scorrono di lato: senza, a
metà tabella non si sa più di che articolo si sta leggendo il prezzo.
Vale anche per il VENTAGLIO, che è la stessa tabella girata: lì a scorrere
sono le opzioni invece delle scuole, e il problema è identico. */
table.listino td.nome-articolo, table.listino th.nome-articolo,
table.ventaglio td.nome-articolo, table.ventaglio th.nome-articolo{position:sticky; left:0;
background:#fff; z-index:2; box-shadow:1px 0 0 var(--bordo)}
table.listino th.nome-articolo, table.ventaglio th.nome-articolo{background:var(--petrolio); z-index:5}
table.listino tr:hover td.nome-articolo, table.ventaglio tr:hover td.nome-articolo{background:#f2f8f9}
table.listino td.nome-articolo, table.ventaglio td.nome-articolo{min-width:190px; max-width:260px; white-space:normal}
table.listino td.nome-articolo .quando{display:block}
/* ---------- il ventaglio ----------
Una matrice prodotto x opzione, e in ogni cella la X che ne esce.
NON è una mappa di calore a tinte piene, ed è una scelta: un fondo colorato
su OGNI cella vorrebbe dire dipingere di verde nove decimi della tabella per
non dire niente, e il poco che conta ci si perderebbe dentro. Si tingono solo
i due stati che sono un problema — ambra sotto X 3, rosso sotto X 2 — con lo
stesso significato che quei due colori hanno già in tutta l'applicazione.
Il colore non è mai l'unica cosa che parla: il numero sta dentro la cella,
in cifra, nel suo colore di testo. Chi non distingue l'ambra dal verde legge
comunque 2,7. */
table.ventaglio td.cella{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
padding:5px 8px; min-width:92px}
table.ventaglio td.cella b{font-size:14px; line-height:1.15; display:block}
table.ventaglio td.cella span{font-size:10.5px; color:var(--grigio); display:block}
table.ventaglio td.v-attenzione{background:#fdf4e2}
table.ventaglio td.v-allarme{background:#fbeaea}
table.ventaglio td.v-vuota{background:repeating-linear-gradient(135deg,#fafcfc,#fafcfc 5px,#f0f5f6 5px,#f0f5f6 10px)}
table.ventaglio td.di-serie{background:#f2f8f9}
table.ventaglio th.voce span{display:block; font-weight:600; letter-spacing:0; text-transform:none;
font-size:9.5px; opacity:.75}
table.ventaglio td.fascia{font-size:10px; color:var(--grigio); white-space:nowrap}
/* I badge delle opzioni in elenco: stanno sotto al conteggio delle varianti,
perché rispondono alla stessa domanda — quanto è profondo questo prodotto. */
.opz-badge{display:flex; flex-wrap:wrap; gap:3px; margin-top:4px}
.opz-badge a{text-decoration:none}
.opz-badge a:hover{filter:brightness(1.08)}
/* ---------------------------------------------------------------- PREVENTIVI
I campi numerici dentro alle tabelle dei preventivi: stretti e allineati a
destra come i numeri della colonna in cui stanno, altrimenti un input largo
quanto la cella spinge la riga a capo sul telefono. */
.campo-num{width:92px; max-width:92px; text-align:right; font-variant-numeric:tabular-nums}
table.dati td.num .campo-num{display:inline-block}
table.dati td small{display:block; color:var(--grigio); font-weight:600; font-size:11px}
/* ---------- la rubrica dei fornitori (dal 26/09/2026) ----------
Due tendine come le categorie delle Materie. Le colonne dei numeri stanno
strette a destra del nome, e i segnali — da appaiare, sconto, obiettivi,
incontri — in fondo alla riga: quando non ce n'è nessuno la cella resta
vuota, non si riempie di trattini. */
table.rubrica th.num,table.rubrica td.num{width:110px}
table.rubrica td.segnali,table.rubrica th.segnali{text-align:right; white-space:nowrap; width:1%}
table.rubrica td.segnali .tag{margin-left:4px}
a.tag{text-decoration:none}
a.tag:hover{filter:brightness(.95)}
@media(max-width:700px){
table.rubrica th.num,table.rubrica td.num{width:auto}
/* Tre colonne ci stanno: il minimo generico delle tabelle che scorrono qui
spingerebbe i segnali fuori dallo schermo. */
.scorre table.dati.rubrica{min-width:0}
table.rubrica td.segnali{white-space:normal}
table.rubrica td.segnali .tag{display:inline-block; margin:0 0 3px 4px}
}
/* ==========================================================================
IL VERBALE A SCHEDE (26/09/2026, 0.12.4)
==========================================================================
Una voce di verbale era una riga di tabella col FONDO dipinto: kraft, verde
mare a sfumatura, rosso a segnali. Su un incontro vero di diciassette voci
diventava una pagina color cartone, con i campi appoggiati sopra a una trama.
Adesso ogni voce è una scheda bianca, come i riquadri dell'applicazione, e il
tipo lo dicono due cose piccole che si vedono senza leggere:
· la COSTOLA a sinistra, larga quattro pixel;
· il BOLLINO in testa — «prodotto nuovo», «prezzo giù −4,2%».
I colori sono gli stessi di prima e vogliono dire la stessa cosa: kraft il
nuovo, verde mare il prezzo che scende, rosso quello che sale. Il fondo della
testata ne prende una velatura che sfuma nel bianco: basta a riconoscere la
scheda scorrendo, e sotto ai numeri il fondo resta pulito.
Le variabili --vc-* stanno sulla scheda e le classi di tipo cambiano solo
quelle: un colore si ritocca in un posto, non in quattro regole.
-------------------------------------------------------------------------- */
.verbale{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.vc{--vc-costola:var(--bordo-forte); --vc-tinta:#f1f6f7;
--vc-bollino-fondo:#e7eff1; --vc-bollino-testo:var(--petrolio);
position:relative; background:#fff; border:1px solid var(--bordo); border-radius:10px;
box-shadow:0 1px 2px rgba(1,64,89,.06), 0 8px 20px -14px rgba(1,64,89,.35)}
.vc::before{content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:5px;
border-radius:10px 0 0 10px; background:var(--vc-costola)}
.vc-kraft{--vc-costola:var(--kraft-scuro); --vc-tinta:#f5ecdd;
--vc-bollino-fondo:var(--kraft); --vc-bollino-testo:var(--kraft-testo)}
.vc-giu{--vc-costola:var(--verde-mare); --vc-tinta:var(--verde-mare-chiaro);
--vc-bollino-fondo:var(--verde-mare); --vc-bollino-testo:#fff}
.vc-su{--vc-costola:var(--rosso-pastello-scuro); --vc-tinta:var(--rosso-pastello);
--vc-bollino-fondo:var(--rosso-pastello-scuro); --vc-bollino-testo:#fff}
.vc-pari{--vc-costola:var(--menta); --vc-bollino-fondo:var(--menta-chiara); --vc-bollino-testo:var(--verde)}
/* Una voce scartata resta a verbale ma si spegne: sapere che una proposta è
stata rifiutata — e a quale prezzo — è metà della trattativa del giro dopo.
Si riaccende quando ci si lavora dentro, altrimenti non si legge cosa si scrive. */
.vc-scartata{opacity:.55; transition:opacity .15s}
.vc-scartata:focus-within,.vc-scartata:hover{opacity:.9}
.vc-testa{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap;
padding:10px 12px 10px 18px; border-radius:10px 10px 0 0; border-bottom:1px solid #edf2f3;
background:linear-gradient(90deg, var(--vc-tinta) 0%, rgba(255,255,255,0) 70%)}
.vc-nome{flex:1 1 300px; min-width:0; display:flex; align-items:baseline; gap:4px 8px; flex-wrap:wrap}
.vc-nome a{font-weight:800; font-size:14.5px; color:var(--petrolio); text-decoration:none}
.vc-nome a:hover{text-decoration:underline}
.vc-bollino{font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
padding:3px 10px; border-radius:99px; white-space:nowrap;
background:var(--vc-bollino-fondo); color:var(--vc-bollino-testo)}
.vc-esito{display:flex; align-items:center; gap:6px; margin:0; font-size:9.5px}
.vc-esito select{width:auto; min-width:118px; padding:4px 8px; font-size:12.5px}
/* Quattro blocchi nell'ordine in cui si tratta: il prezzo, la materia, quanto
vale adottarla, le note. Sotto i 1100 pixel vanno a due a due, sul telefono
uno sotto l'altro. */
.vc-corpo{display:grid; gap:10px; padding:12px 12px 12px 18px;
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.35fr) minmax(0,1.25fr)}
.vc-blocco{background:#f6f9fa; border:1px solid #e4ecee; border-radius:8px; padding:9px 11px 10px; min-width:0}
.vc-etichetta{display:block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
color:var(--grigio); margin:0 0 6px}
.vc-etichetta i{font-style:normal; font-weight:600; text-transform:none; letter-spacing:0;
color:#93a8b0; margin-left:4px}
.vc-blocco .quando{white-space:normal; line-height:1.35; margin-top:4px}
.vc-coppia{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.vc-coppia label{margin:0; text-transform:none; letter-spacing:0; font-weight:600; font-size:10px;
color:var(--grigio)}
.vc-coppia label span{display:block; text-align:right; margin-top:2px}
.vc-coppia input{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; background:#fff}
.vc-prezzo .quando i{font-style:normal; opacity:.65}
.vc-data{display:flex; align-items:center; gap:8px; margin:9px 0 0; text-transform:none; letter-spacing:0;
font-size:10.5px; font-weight:600; color:var(--grigio)}
.vc-data span{white-space:nowrap}
.vc-data input{flex:1 1 auto; min-width:0; padding:4px 6px; font-size:12.5px}
.vc-materia .cerca-scelta{background:#fff}
/* SE LA ADOTTIAMO: azzurro, come ogni numero di questa applicazione che non è
successo. Due cifre affiancate — per unità e sull'anno — col colore del
risparmio: verde se si spende meno, rosso se di più. */
.vc-seadotto{background:var(--azzurro-chiaro); border-color:#c3dfec}
.vc-seadotto .vc-etichetta{color:var(--azzurro-scuro)}
.vc-seadotto .vc-etichetta i{color:var(--azzurro)}
.vc-cifre{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.vc-cifre > div{min-width:0}
.vc-capo{display:block; font-size:10px; font-weight:700; color:var(--azzurro-scuro); margin-bottom:1px}
.vc-cifre b{display:block; font-size:16px; font-weight:800; line-height:1.25; color:var(--petrolio);
font-variant-numeric:tabular-nums}
.vc-cifre b.x-bene{color:var(--verde)}
.vc-cifre b.x-allarme{color:var(--rosso)}
.vc-vuoto{margin:0; font-size:12px; color:var(--azzurro-scuro)}
.vc-whatif{background:var(--azzurro-chiaro); border-color:var(--azzurro)}
.vc-whatif .vc-etichetta{color:var(--azzurro-scuro)}
.vc-note textarea{min-height:38px; font-size:12.5px; padding:5px 7px; line-height:1.35}
.vc-note textarea:not(.nota-interna){background:#fff}
.vc-note .vc-etichetta.interna{color:#8a6d1f; margin-top:8px}
/* I due pannelli in fondo — la materia, dove e da quando — sono due tasti a
pillola; aperto, un pannello prende tutta la larghezza della scheda. */
.vc-piedi{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:flex-start; padding:0 12px 12px 18px}
.vc-piedi > details{flex:0 0 auto; max-width:100%; margin:0}
.vc-piedi > details[open]{flex:1 1 100%}
.vc-piedi summary{display:inline-block; cursor:pointer; list-style:none;
font-size:12px; font-weight:700; color:var(--petrolio); background:#fff;
border:1px solid var(--bordo-forte); border-radius:99px; padding:4px 12px}
.vc-piedi summary::-webkit-details-marker{display:none}
.vc-piedi summary::before{content:'\25B8'; display:inline-block; margin-right:6px; font-size:10px; transition:transform .12s}
.vc-piedi details[open] > summary::before{transform:rotate(90deg)}
.vc-piedi summary:hover{background:#eef5f7}
.vc-piedi details[open] > summary{background:var(--petrolio); border-color:var(--petrolio); color:#fff}
.vc-piedi details[open] > summary .tag{background:#fff}
.vc-piedi .pannello{background:#f6f9fa; border:1px solid #e4ecee; border-radius:8px;
padding:10px 12px; margin-top:8px}
@media(max-width:1100px){
.vc-corpo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.vc-testa{padding:9px 10px 9px 14px}
.vc-nome{flex-basis:100%}
.vc-esito{margin-left:auto}
/* «esito» si capisce dalla tendina: senza la parola, «togli» sta sulla stessa riga. */
.vc-esito span{display:none}
.vc-corpo{grid-template-columns:minmax(0,1fr); padding:10px 10px 10px 14px}
.vc-piedi{padding:0 10px 10px 14px}
}
/* ---------- l'elenco degli articoli (26/09/2026, 0.12.4) ----------
I BADGE DELLE OPZIONI A SFONDO BIANCO, col solo contorno colorato. Pieni,
in una colonna dove ce ne sono tre o quattro per riga, pesavano quanto le
SEGNALAZIONI — «attenzionato» è giallo pieno — e si leggevano come un
avviso. Sono un'informazione, e il contorno lo dice: stesso colore del tipo
(giallo la sostituzione, sabbia l'aggiunta, grigio l'informazione). Il testo
del giallo è l'ambra scura: giallo su bianco non si legge. */
.opz-badge a.tag{background:#fff; border:1px solid currentColor; padding:1px 6px}
.opz-badge a.tag.giallo{color:var(--ambra-testo); border-color:var(--giallo)}
.opz-badge a.tag.sabbia{color:#6b5230; border-color:var(--sabbia)}
.opz-badge a.tag.grigio{color:var(--grigio); border-color:var(--bordo-forte)}
.opz-badge a.tag:hover{filter:none; background:#fbf7ec}
/* ==========================================================================
L'ELENCO ARTICOLI PER CATEGORIA, e l'albero variante → opzioni (26/09/2026)
========================================================================== */
/* Il titolo di una categoria: stesso peso del titolo di una tendina delle
Materie, su una fascia chiara che taglia la tabella senza sembrare una riga
di dati. La freccia gira come quella delle varianti. */
table.dati tr.riga-categoria td{background:#eef5f7; color:var(--petrolio); font-weight:800;
font-size:13px; padding:7px 8px; cursor:pointer; user-select:none;
border-top:2px solid var(--bordo-forte)}
table.dati tr.riga-categoria .quando{display:inline; margin-left:8px; font-weight:400}
tr.riga-categoria .freccia{transform:rotate(90deg); color:var(--petrolio)}
tbody.chiusa tr.riga-categoria .freccia{transform:none; color:var(--petrolio-chiaro)}
tr.riga-categoria:focus-visible td{outline:2px solid var(--giallo); outline-offset:-2px}
/* Chiusa, la categoria tiene solo il suo titolo. Mentre si cerca si riapre da
sola (la classe `cercando` la mette il filtro sulla tabella). */
table:not(.cercando) tbody.chiusa tr:not(.riga-categoria){display:none}
/* LE SOTTOCATEGORIE (dal 26/09/2026, 0.12.8): un titolo più leggero di quello
della categoria, rientrato, e che chiude solo il suo blocco. */
table.dati tr.riga-sottocategoria td{background:#f6fafb; color:var(--petrolio); font-weight:700;
cursor:pointer; user-select:none; font-size:12px; padding-left:28px; border-top:1px solid var(--bordo)}
table.dati tr.riga-sottocategoria td + td{padding-left:0}
table.dati tr.riga-sottocategoria .quando{display:inline; margin-left:8px; font-weight:400}
tr.riga-sottocategoria .freccia{transform:rotate(90deg); color:var(--petrolio-chiaro)}
tbody.chiusa-sotto tr.riga-sottocategoria .freccia{transform:none}
tr.riga-sottocategoria:focus-visible td{outline:2px solid var(--giallo); outline-offset:-2px}
table:not(.cercando) tbody.chiusa-sotto tr:not(.riga-categoria):not(.riga-sottocategoria){display:none}
table.listino tr.riga-categoria td.nome-articolo, table.listino tr.riga-sottocategoria td.nome-articolo{max-width:none; white-space:nowrap}
form.variante-nuova{display:inline-flex; gap:4px; align-items:center; margin-left:8px; flex-wrap:wrap}
form.variante-nuova input{font-size:12px; padding:3px 7px}
/* La riga di un gruppo di opzioni: figlia della variante (o dell'articolo, se
la variante è una sola). Stesso fondo delle varianti — «appartiene a quella
sopra» — e un gradino di rientro in più quando sta sotto a una variante. */
table.dati tr.riga-opzione td{background:var(--alias); font-size:12px; color:var(--ink);
border-bottom:1px solid var(--bordo)}
tr.riga-opzione td:first-child{box-shadow:inset 3px 0 0 var(--sabbia)}
table.dati td.rientro-2{padding-left:50px}
table.dati td.rientro-2::before{left:31px}
tr.riga-opzione .tag{background:#fff; border:1px solid currentColor; padding:1px 6px; margin-right:4px}
tr.riga-opzione .tag.giallo{color:var(--ambra-testo); border-color:var(--giallo)}
tr.riga-opzione .tag.sabbia{color:#6b5230; border-color:var(--sabbia)}
tr.riga-opzione .tag.grigio{color:var(--grigio); border-color:var(--bordo-forte)}
tr.riga-opzione .barra-opz{color:var(--bordo-forte); margin:0 2px}
tr.riga-opzione .di-serie-nota{font-size:10px; color:var(--grigio); text-transform:uppercase; letter-spacing:.3px}
tr.riga-opzione a.piccolo{font-size:11px; margin-left:6px; white-space:nowrap}
/* Il gruppo del badge cliccato: si accende in giallo tenue, gli altri restano
com'erano. */
table.dati tr.riga-opzione.accesa td{background:var(--ambra-tag)}
/* La nota dell'articolo sotto al nome: l'ambra della nota interna del
verbale, perché dice la stessa cosa — roba tua, che non va in stampa. */
.nota-articolo{display:block; margin-top:3px; padding:2px 7px; font-size:11.5px; font-weight:500;
color:var(--ink); background:var(--ambra); border-left:3px solid var(--giallo); border-radius:3px;
white-space:pre-line}
/* ===== 0.12.6 (26/09/2026) ===== */
/* La ricetta si trascina e si sfoltisce: la maniglia a sinistra come
nell'elenco articoli, la ✕ a destra. La ✕ è discreta finché non ci si
passa sopra: sta su ogni riga, e rossa su ogni riga urlerebbe. */
table.tab-ricetta td.togli{text-align:center; padding-left:2px; padding-right:2px}
.btn-togli{border:1px solid transparent; background:none; color:var(--grigio); font-size:13px;
line-height:1; padding:4px 7px; border-radius:4px; cursor:pointer}
.btn-togli:hover, .btn-togli:focus-visible{color:var(--rosso); border-color:#e3b5b0; background:var(--rosso-chiaro)}
/* Il ⧉ che duplica un articolo, in fondo alla riga dell'elenco. */
form.duplica{display:inline; float:right; margin:0 0 0 6px}
.btn-duplica{border:1px solid var(--bordo); background:#fff; color:var(--petrolio-chiaro);
font-size:13px; line-height:1; padding:3px 6px; border-radius:4px; cursor:pointer}
.btn-duplica:hover, .btn-duplica:focus-visible{border-color:var(--petrolio); color:var(--petrolio)}
/* Il ventaglio sotto alla riga di un gruppo di opzioni: la riga si clicca
tutta, la freccia gira quando è aperto, e il ventaglio sta su fondo bianco
con lo stesso rientro dell'albero. */
table.dati tr.riga-opzione[data-ventaglio]{cursor:pointer}
table.dati tr.riga-opzione[data-ventaglio]:hover td{background:#f5efe0}
tr.riga-opzione[aria-expanded="true"] .apri-ventaglio .freccia{transform:rotate(90deg); color:var(--petrolio)}
tr.riga-opzione .apri-ventaglio .freccia{font-size:11px}
table.dati tr.riga-ventaglio > td{background:#fff; padding:8px 12px 12px 50px; border-bottom:2px solid var(--sabbia)}
table.ventaglio-riga{margin:0; width:auto}
table.ventaglio-riga td.nome-articolo, table.ventaglio-riga th.nome-articolo{min-width:120px}
@media (max-width: 640px){ table.dati tr.riga-ventaglio > td{padding-left:12px} }
/* La tendina dei prezzi degli altri mesi, sotto al prezzo al collo, e la
casella che aspetta il «Salva». */
select.prezzo-da-mese{margin-top:5px; font-size:12px; padding:3px 6px; max-width:100%}
input.da-salvare{border-color:var(--giallo) !important; box-shadow:0 0 0 2px var(--ambra-tag)}
/* Il ventaglio sotto alla riga è una tabella dentro a una tabella: la sua
testata non sta incollata a niente. Ereditava il `top:52px` della testata
dell'elenco, e dentro al suo riquadro si posava sopra alla prima riga. */
table.dati.ventaglio-riga thead th{position:static}
/* Sul telefono la ricetta ha due colonne in più (maniglia e ✕) e la materia
restava larga tre lettere: l'unità di misura si toglie — la tendina della
materia la scrive già fra parentesi — e le opzioni si stringono. */
@media (max-width: 640px){
table.tab-ricetta th:nth-child(4), table.tab-ricetta td:nth-child(4){display:none}
table.tab-ricetta th:nth-child(5){width:auto !important}
table.tab-ricetta td:nth-child(5) select{max-width:96px}
table.tab-ricetta th:nth-child(3){width:auto !important}
table.tab-ricetta td:nth-child(3) input{width:62px}
}
/* ==========================================================================
0.12.10 (28/09/2026)
========================================================================== */
/* IL BADGE A CONTORNO: stesso colore, niente sfondo — il bordo e la scritta
dicono la cosa, la colonna non diventa un muro di pastiglie. Nasce per le
voci nell'elenco degli incontri. */
.tag.contorno{background:transparent; border:1px solid currentColor; padding:1px 6px}
.tag.contorno.menta{color:var(--verde); border-color:var(--menta)}
.tag.contorno.giallo{color:var(--ambra-testo); border-color:var(--giallo)}
.tag.contorno.grigio{color:var(--grigio); border-color:var(--bordo-forte)}
/* LE SCUOLE IN BADGE nella colonna «Attivo in»: trasparente = prezzo libero,
sabbia piena = prezzo a bando (il colore del tag «a bando»). */
.bar-scuole{display:inline-flex; flex-wrap:wrap; gap:3px}
.tag.bar-scuola{background:transparent; border:1px solid var(--bordo-forte); color:var(--petrolio);
padding:1px 5px; letter-spacing:.3px}
.tag.bar-scuola.a-bando{background:#f0e6d6; border-color:var(--sabbia); color:#6b5230}
/* La fascia delle X: ogni estremo col suo colore, il trattino nero. */
.trattino-x{color:#000; font-weight:400; margin:0 1px}
/* La spunta «non attivo» sotto ai prezzi di una casella del listino. */
table.listino td.cella-bar label.spegni{display:flex; align-items:center; justify-content:flex-end; gap:3px;
margin:2px 0 0; font-size:9px; font-weight:700; letter-spacing:.3px; color:var(--grigio);
text-transform:uppercase; cursor:pointer; white-space:nowrap}
table.listino td.cella-bar label.spegni input{width:auto; margin:0}
table.listino td.cella-bar.da-spegnere{background:#fbeaea}
table.listino td.cella-bar.da-spegnere .piano{opacity:.35}
table.listino td.cella-bar.da-spegnere label.spegni{color:var(--rosso)}
/* ==========================================================================
0.12.11 (28/09/2026)
========================================================================== */
/* IL PREZZO NUOVO: un numero fatto con un prezzo detto a un incontro, che
nessuna fattura ha ancora confermato. Il contorno GIRA perché è una cosa in
sospeso, non un giudizio: il colore del giudizio ce l'ha già il numero
dentro. Dal 28/09/2026 (0.12.12) l'anello è nei due colori del Brand Manual
— metà petrolio e metà giallo, con due sfumature corte dove si passano il
testimone — e non più una cometa gialla su un anello sbiadito: si legge come
LSB anche da lontano. L'anello è una maschera sopra al fondo, non un bordo:
così funziona su qualunque fondo di riga (attenzionata, in prova, categoria)
senza doverlo ridipingere. */
@property --giro-nuovo{syntax:''; inherits:false; initial-value:0deg}
.prezzo-nuovo{position:relative; display:inline-block; padding:1px 6px; border-radius:9px; cursor:help}
.prezzo-nuovo::before{content:''; position:absolute; inset:0; padding:2px; border-radius:inherit;
background:conic-gradient(from var(--giro-nuovo), var(--giallo) 0 40%, var(--petrolio) 50% 90%, var(--giallo));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
animation:giro-nuovo 2.6s linear infinite; pointer-events:none}
@keyframes giro-nuovo{to{--giro-nuovo:360deg}}
@media (prefers-reduced-motion: reduce){
.prezzo-nuovo::before{animation:none;
background:linear-gradient(90deg, var(--petrolio) 0 50%, var(--giallo) 50% 100%)}
}
.quando.prezzo-nuovo{display:inline-block; margin:3px 0; color:var(--petrolio); font-weight:700}
table.listino .prezzo-nuovo{padding:0 4px}
/* LE SCUOLE IN GRIGLIA: ogni scuola al suo posto, sempre lo stesso. Dove
l'articolo non è attivo il posto resta, tratteggiato e sbiadito — il buco si
vede scorrendo la colonna. Due righe da metà scuole l'una: una riga sola da
otto allargava la colonna quanto tutti i prezzi. */
.bar-scuole{display:inline-grid; grid-template-columns:repeat(var(--scuole, 4), 3.2em); gap:3px; font-size:10px}
.bar-scuole .tag.bar-scuola{text-align:center; padding:1px 0}
.tag.bar-scuola.manca{border-style:dashed; border-color:#d5dee1; color:#c3cdd1; background:transparent}
/* IN PROVA: se n'è parlato, non è ancora definitivo. Contorno tratteggiato
come le cose non ancora fissate; la riga appena velata. */
.tag.in-prova{background:#fff; border:1px dashed var(--petrolio-chiaro); color:var(--petrolio-chiaro); padding:1px 6px}
table.dati tr.riga-in-prova > td{background:#f6f9fa}
/* La variante attenzionata, nella fila delle varianti in testa alla scheda. */
.pallino-att{color:var(--giallo); font-size:10px; vertical-align:1px}
.periodo a.on .pallino-att{color:var(--giallo)}
/* VAI A: il salto si ferma sotto alla barra e alla testata della tabella. */
table.dati tr.riga-categoria{scroll-margin-top:calc(var(--alt-barra, 52px) + 44px)}
#asporto, #listino{scroll-margin-top:calc(var(--alt-barra, 52px) + 8px)}
/* IL TELEFONO CON IL PREFISSO (dal 28/09/2026, 0.12.12): la tendina con la
bandierina sta attaccata al numero e non cresce — è il numero che prende lo
spazio. Dentro a una cella di tabella i due stanno su una riga sola. */
.telefono{display:flex; gap:4px; align-items:stretch; min-width:0}
.telefono select{width:auto; flex:0 0 auto; padding-left:5px; padding-right:22px; font-variant-numeric:tabular-nums}
.telefono input{flex:1 1 auto; min-width:90px}
table.dati .telefono input{min-width:110px}
/* GLI AVVISI DEL CONTROLLO SCONTI (dal 28/09/2026, 0.12.12): «attenzione» è
ambra come i tag di sconto, «info» azzurro come gli avvisi di data. Il verde
e il rosso ci sono già (.ok, .ko). */
.avviso.attenzione{background:var(--ambra-tag); color:var(--ambra-testo); border:1px solid #e6cd86; font-weight:500}
.avviso.attenzione b{font-weight:800}
.avviso.info{background:var(--azzurro-chiaro); color:var(--azzurro-scuro); border:1px solid #b9d9e8; font-weight:500}
.avviso.muto{background:#f2f5f6; color:var(--grigio); border:1px solid var(--bordo); font-weight:500}
/* La riga «di serie» nelle regole d'ordine, e il testo accanto al campo che
dice quanto fa la catena di sconti. */
.catena-esito{font-weight:800; color:var(--petrolio); font-size:12.5px; white-space:nowrap}
.riga-serie td{background:#fbfaf4}
/* FATTURE — lo smistamento (dal 14/10/2026, 0.15.0). Elenco del mese a
sinistra e fattura aperta a destra; sul telefono una cosa alla volta. */
.smista-piano{display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:14px; align-items:start}
.smista-lista{padding:0; position:relative; max-height:calc(100vh - 150px); overflow:auto}
.smista-filtri{display:flex; flex-wrap:wrap; gap:5px; padding:10px; border-bottom:1px solid var(--bordo);
position:sticky; top:0; background:var(--bianco); z-index:1}
.smista-filtri input{margin-top:4px}
.smista-doc{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:9px 11px;
border-bottom:1px solid #eef3f4; color:var(--ink); text-decoration:none}
.smista-doc:hover{background:#f2f8f9}
.smista-doc.sel{background:#fff8de; box-shadow:inset 4px 0 0 var(--giallo)}
.smista-doc .chi{font-weight:800; overflow-wrap:anywhere}
.smista-doc.guardare .chi::before{content:"● "; color:var(--arancio)}
.smista-doc .importo{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.smista-doc .meta{grid-column:1 / -1; font-size:11.5px; color:var(--grigio)}
.smista-doc .dest{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px}
.smista-doc[hidden]{display:none}
.smista-dettaglio{min-width:0}
.smista-intesta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin:6px 0 10px}
.smista-dati{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:6px 14px; font-size:12.5px; margin-bottom:10px}
.smista-dati b{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grigio)}
.smista-auto{background:var(--azzurro-chiaro); border-radius:var(--r); padding:8px 10px; font-size:12.5px}
.smista-scelte{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px}
.smista-bottone{display:inline-flex; margin:0; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink)}
.smista-bottone input{position:absolute; opacity:0; pointer-events:none}
.smista-bottone span{padding:7px 11px; border:1px solid var(--bordo-forte); border-radius:var(--r); background:#fff; cursor:pointer; font-weight:700}
.smista-bottone input:checked + span{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}
.smista-bottone.progetti input:checked + span{background:var(--sabbia); border-color:var(--sabbia)}
.smista-bottone input:focus-visible + span{outline:2px solid var(--menta)}
.smista-anteprima{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px}
.smista-anteprima .pz{background:var(--menta-chiara); border-radius:var(--r); padding:6px 10px; font-size:12px; font-variant-numeric:tabular-nums}
.smista-anteprima .pz b{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase}
.smista-anteprima .avviso-pz{background:var(--rosso-chiaro); color:var(--rosso); font-weight:700}
.smista-massa{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; margin-bottom:8px}
.smista-massa select{width:auto; max-width:220px}
.smista-righe .desc{min-width:200px}
.smista-righe .muto, .smista-dettaglio .muto{color:var(--grigio); font-size:11.5px}
.smista-righe tr.zero td{color:var(--grigio); font-style:italic}
.smista-va{min-width:230px}
.smista-va .pezzo{display:flex; gap:4px; margin-bottom:4px}
.smista-va .pezzo select{flex:1 1 auto; width:auto; min-width:0; font-size:12px; padding:3px 5px}
.smista-va .pezzo input{flex:0 0 72px; width:72px; text-align:right; font-size:12px; padding:3px 5px}
.smista-va .resto-riga{font-size:11.5px; color:var(--grigio); margin-bottom:4px}
.smista-azioni{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--bordo)}
.solo-telefono{display:none}
@media (max-width:900px){
.smista-piano{grid-template-columns:minmax(0,1fr)}
.smista-lista{max-height:none}
.smista-piano.aperto .smista-lista{display:none}
.solo-telefono{display:inline-flex; margin-bottom:8px}
}
/* Sul telefono la tabella delle righe diventa una pila di schede: la colonna
«Va a», quella su cui si lavora, a tutta larghezza invece che fuori schermo. */
@media (max-width:700px){
.smista-righe thead{display:none}
.smista-righe, .smista-righe tbody{display:block}
.smista-righe tr{display:grid; grid-template-columns:26px repeat(3, minmax(0,1fr)); gap:2px 6px;
padding:8px 0; border-bottom:1px solid var(--bordo)}
table.dati.smista-righe td{display:block; border:0; padding:0}
.smista-righe td:nth-child(1){grid-row:1 / span 3}
table.dati.smista-righe td:nth-child(2){display:none}
.smista-righe td.desc{grid-column:2 / 5; min-width:0}
table.dati.smista-righe td.num{text-align:left; font-size:12px}
.smista-righe td.smista-va{grid-column:2 / 5; min-width:0; margin-top:4px}
.smista-righe tr:hover td{background:none}
}
/* ---------- il cassetto della barra (dal 14/10/2026, 0.16.0) ----------
PRODOTTI tiene referenze, materie e articoli. È un : si apre e si
chiude anche senza JavaScript, e app.js lo richiude toccando fuori. La voce
si veste come le altre della barra, e diventa gialla quando si è dentro a
una delle sue pagine — col nome della pagina accanto, perché il giallo da
solo non direbbe in quale delle tre. */
.nav-cassetto{position:relative}
.nav-cassetto > summary{list-style:none; cursor:pointer; color:#cfe2e8; padding:6px 12px; border-radius:var(--r);
font-weight:700; font-size:12px; letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; user-select:none}
.nav-cassetto > summary::-webkit-details-marker{display:none}
.nav-cassetto > summary::after{content:'▾'; margin-left:6px; font-size:10px; opacity:.8}
.nav-cassetto[open] > summary::after{content:'▴'}
.nav-cassetto > summary:hover,.nav-cassetto[open] > summary{background:rgba(255,255,255,.10); color:#fff}
.nav-cassetto > summary.on{background:var(--giallo); color:var(--petrolio-scuro)}
.nav-dove{text-transform:none; letter-spacing:.2px}
.nav-menu{position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:190px; display:flex;
flex-direction:column; gap:2px; padding:5px; background:var(--petrolio-scuro); border:1px solid rgba(255,255,255,.18);
border-radius:var(--r); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.nav-menu a{display:block}
.nav-menu a i{font-style:normal; display:inline-block; width:16px; color:#7ba7b5; font-variant-numeric:tabular-nums}
.nav-menu a.on i{color:var(--petrolio-scuro)}
@media(min-width:761px) and (max-width:1400px){
.nav-cassetto > summary{padding:6px 9px; letter-spacing:.5px}
}
@media(max-width:760px){
.nav-cassetto > summary{padding:6px 9px; font-size:11px; letter-spacing:.5px}
}
/* ---------- REVISIONE (dal 14/10/2026, 0.16.0) ---------- */
.rev-cifre{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-bottom:16px}
.rev-cifra{display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--bianco);
border:1px solid var(--bordo); border-radius:var(--r); box-shadow:var(--ombra); color:var(--ink); text-decoration:none}
a.rev-cifra:hover{border-color:var(--bordo-forte)}
.rev-et{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--grigio)}
.rev-n{font-size:22px; font-weight:800; color:var(--petrolio); font-variant-numeric:tabular-nums}
.rev-n small{font-size:13px; font-weight:700; color:var(--grigio)}
.rev-sotto{font-size:11.5px; color:var(--grigio)}
.rev .riquadro{scroll-margin-top:calc(var(--alt-barra, 52px) + 8px)}
.rev span.piccolo{font-size:11.5px; color:var(--grigio)}
/* L'apice con la nota (dal 20/10/2026): si apre passando col mouse o toccandolo,
largo quanto il paragrafo che lo contiene, così sul telefono non esce dallo schermo. */
.con-apice{position:relative}
.apice{vertical-align:super; font-size:10px; font-weight:800; line-height:1; color:var(--petrolio-chiaro);
cursor:help; padding:0 2px; border-radius:3px; outline:none}
.apice:hover, .apice:focus{background:var(--giallo); color:var(--ink)}
.apice-nota{display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
padding:10px 12px; background:var(--bianco); border:1px solid var(--bordo-forte); border-radius:var(--r);
box-shadow:0 6px 18px rgba(1,64,89,.18); font-size:12.5px; font-weight:400; line-height:1.45;
color:var(--ink); text-align:left; white-space:normal; cursor:auto}
.apice:hover .apice-nota, .apice:focus .apice-nota{display:block}
.rev-tutte{margin-top:12px}
.rev-tutte > summary{cursor:pointer; font-weight:700; color:var(--petrolio-chiaro)}
@media(max-width:760px){
.rev-cifre{grid-template-columns:1fr 1fr; gap:8px}
.rev-n{font-size:19px}
}
/* ---------- Scarica da Sportello (dal 14/10/2026, 0.16.1) ---------- */
#sportello .avviso .piccolo{font-weight:500}
pre.sportello-log{margin:0 0 10px; padding:9px 12px; background:#f2f5f6; border:1px solid var(--bordo); border-radius:var(--r);
font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word; color:var(--ink)}
/* ---------- Prezzo non rappresentativo (dal 20/10/2026, 0.18.0) ---------- */
/* Il prezzo segnalato resta scritto, barrato: è successo, ma non fa confronto. */
.prezzo-segnalato{text-decoration:line-through; color:var(--grigio)}
td.segnala-prezzo{white-space:normal; font-size:12.5px; max-width:260px}
details.segnala > summary{cursor:pointer; color:var(--petrolio-chiaro); font-weight:600; list-style:none}
details.segnala > summary::-webkit-details-marker{display:none}
details.segnala[open] > summary{margin-bottom:6px}
details.segnala form{display:grid; gap:6px; min-width:200px}
details.segnala label{display:grid; gap:2px; font-size:12px; color:var(--grigio)}
details.segnala input{font:inherit; padding:4px 6px; border:1px solid var(--bordo-forte); border-radius:var(--r)}