:root{
  /* Tutti i colori dell'interfaccia stanno qui, e solo qui: nel resto del CSS e negli attributi style= dei
     template si usano soltanto questi nomi. Riferimento: Sapling_bozza_v2.html, SPEC_Restyling punto 1. */
  --paper:#F1F0EA;      /* fondo pagina, carta */
  --card:#FFFFFF;
  --ink:#1C2320;        /* testo */
  --ink-60:#5E6A65;     /* testo secondario */
  --ink-30:#A7AFAA;     /* testo disattivato, numeri di riga, bordi forti */
  --line:#DEDCD3;       /* bordi */
  --line-soft:#EFEEE7;  /* separatori interni alle tabelle, fondi neutri */
  --surface:#FAFAF7;    /* intestazioni e totali di tabella, fondo dei pannelli */
  --hover:#FCFCFA;      /* riga al passaggio del mouse */
  --on-color:#FFFFFF;   /* testo sopra un fondo colorato o scuro */

  /* ruoli economici */
  --materiale:#B9832C;   --materiale-soft:#F6EBD6;  --materiale-ink:#7A5714;  --materiale-line:#E3D6BC;
  --manodopera:#5A6E78;  --manodopera-soft:#E6ECEE;
  /* G.11/G.12: le sezioni (categorie dei materiali, pool del consuntivo) hanno un tono loro, freddo e neutro: non e' un ruolo, non e' un allarme */
  --sezione:#5A6E78;     --sezione-soft:#E8EDEE;    --sezione-line:#D3DCDE;
  --margine:#2E6152;     --margine-soft:#E3EDE8;    --margine-ink:#245046;    --margine-line:#CFE0D8;

  /* pool di fase: costanti di programma, lo stesso colore in ogni schermata (Esterni e' sempre tratteggiato) */
  --pool-ufficio:#5A6E78;
  --pool-produzione:#2E6152;
  --pool-finitura:#B9832C;
  --pool-assemblaggio:#8A5A3C;
  --pool-logistica:#7E8F87;
  --pool-esterni:#9A968B;
  /* SPEC_SchemiCondivisi: i colori degli arredi sul pannello (vista «per arredo»), presi dalla tavolozza dei pool */
  --arredo-1:var(--pool-produzione); --arredo-2:var(--pool-finitura); --arredo-3:var(--pool-ufficio);
  --arredo-4:var(--pool-assemblaggio); --arredo-5:var(--incut); --arredo-6:var(--pool-logistica);

  --margine-hover:#255249;  /* pulsante primario al passaggio */
  /* barra laterale scura (sfondo: --ink) */
  --rail-text:#C7CDC9;  --rail-dim:#8D9791;  --rail-sec:#7E8A84;  --rail-hover:#2A322E;

  /* InCut (SPEC_Integrazione §4), dal sito incut.it. Sull'arancione il testo e' sempre il bruno, mai bianco: bianco su
     arancione sta sotto il contrasto minimo. L'arancione marca il marchio; il bruno riempie le scelte selezionate. */
  --incut:#F47227;        /* l'arancione del segno */
  --incut-scuro:#26160B;  /* il bruno del fondo */
  --incut-soft:#FCEADF;

  --alert:#A8412F;   /* solo errori veri */
  --alert-soft:#FBF1EF;  --alert-line:#E6C9C2;
  --ok:#2E6152;

  /* ombre e velo della finestra sovrapposta */
  --focus-ring:rgba(46,97,82,.14);
  --shadow-md:0 8px 24px rgba(0,0,0,.13);
  --shadow-lg:0 20px 60px rgba(0,0,0,.25);
  --scrim:rgba(28,35,32,.6);

  --r:10px;
  /* scala tipografica (SPEC_Restyling 4): cinque misure, non di piu' */
  --t1:11.5px;   /* intestazioni di colonna, etichette, maiuscoletto (500) */
  --t2:13.5px;   /* testo e tabelle (400) */
  --t3:15px;     /* intestazione di riquadro (600) */
  --t4:17px;     /* titolo di una scheda arredo (600) */
  --t5:23px;     /* titolo della schermata (600) */
  --t-meta:12px; /* seconda riga della riga materiale (SPEC_Restyling 6) */
  /* ritmo: multipli di 4 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;   /* F.8: aria sotto l'ultima tabella di una scheda, dentro il bordo: la scheda e' chiusa, non tagliata */
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t2)/1.45 'Space Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}   /* tutti i numeri tabellari: le colonne si allineano */
.disp,.num{font-variant-numeric:tabular-nums}

/* ---------- guscio (SPEC_Restyling 2): barra laterale scura ferma allo scorrimento + contenuto ---------- */
.app{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh}
.rail{background:var(--ink);color:var(--rail-text);padding:20px 14px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:20px;overflow:auto}
.brand{display:flex;align-items:baseline;gap:8px;padding:0 6px;cursor:pointer;color:var(--on-color)}
.brand b{font-weight:600;font-size:var(--t4);letter-spacing:-.02em}
.brand span{font-size:var(--t1);color:var(--rail-dim)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .sec{font-size:var(--t1);font-weight:500;color:var(--rail-sec);padding:14px 8px 6px;letter-spacing:.02em;text-transform:uppercase}
/* SPEC_PercorsoCommessa A.4: le sezioni si aprono e si chiudono; sul telefono e sul tablet le voci ci sono tutte */
.nav button.sec{justify-content:space-between;border-radius:0;background:none;color:var(--rail-sec);font-size:var(--t1)}
.nav button.sec:hover{background:none;color:var(--on-color)}
.sec-voci{display:contents}
.sec-voci.chiusa{display:none}
.nav button{background:none;border:0;text-align:left;padding:8px 10px;border-radius:7px;color:var(--rail-text);
  font-size:var(--t2);display:flex;align-items:center;gap:9px;width:100%}
.nav button:hover{background:var(--rail-hover);color:var(--on-color)}
.nav button[aria-current="true"]{background:var(--margine);color:var(--on-color);font-weight:500}
/* G.9: la commessa aperta come sottovoce di "Preventivi" */
.nav button.sub{padding:5px 10px 5px 26px;font-size:var(--t-meta);color:var(--rail-dim);gap:7px;min-width:0}
.nav button.sub:hover,.nav button.sub[aria-current="true"]{color:var(--on-color)}
.nav button.sub[aria-current="true"]{background:none;font-weight:400}
.nav button.sub b{font-weight:500;color:var(--rail-text);flex:none}
.nav button.sub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .ico{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none;font-style:normal}
.corpo{min-width:0}
.wrap{padding:0 30px}
main.wrap{padding:22px 30px 70px}
:focus-visible{outline:2px solid var(--margine);outline-offset:2px;border-radius:4px}
/* ---------- G.13: tre formati, un solo insieme di viste (tre @media, non tre pagine) ----------
   Computer: contenuto fino a 1680px (main.wrap). iPad 768-1279px: barra a icone di 62px, tabelle che scorrono con la colonna che dice "di che
   riga si tratta" ferma, filtri a capo. Telefono sotto 768px: sola lettura, senza barra laterale (pastiglie in alto), ogni riga di tabella
   diventa una scheda di coppie etichetta-valore (l'etichetta e' data-l sulla cella; le celle senza data-l non ci sono). Il blocco del telefono
   e' in fondo al file, dopo tutte le regole che ridefinisce. */
@media (min-width:1280px){
  main.wrap{max-width:1680px;margin:0 auto}     /* le tabelle respirano sugli schermi grandi (era 1340px); il contenuto resta centrato */
}
@media (min-width:768px) and (max-width:1279px){
  .app{grid-template-columns:62px minmax(0,1fr)}
  .rail{padding:20px 8px}
  main.wrap{padding-left:16px;padding-right:16px}
  .brand{justify-content:center;padding:0}
  .brand span,.nav .sec,.nav button span,.nav button.sub{display:none}
  .nav .sec-voci.chiusa{display:contents}
  .brand b{font-size:0}
  .brand b::first-letter{font-size:var(--t4)}
  .nav button{justify-content:center;padding:8px 0}
  .nav .ico{width:auto;height:auto;border-radius:0;background:none;opacity:1}
  .nav .ico::before{content:attr(data-l);font-weight:600;font-size:var(--t1)}
  /* le tabelle scorrono in orizzontale (il contenitore, mai le colonne che si comprimono) e la colonna che identifica la riga resta ferma:
     il materiale, la fase, l'arredo. Sfondo pieno: le altre colonne le passano sotto. */
  table:not(.tmat):not(.triep):not(.tore) th:first-child,table:not(.tmat):not(.triep):not(.tore) td:first-child,
  .tmat th:nth-child(3),.tmat td:nth-child(3),.triep th:nth-child(2),.triep td:nth-child(2),.tore th:nth-child(2),.tore td:nth-child(2){
    position:sticky;left:0;z-index:2;background:var(--card)}
  table:not(.tmat):not(.triep):not(.tore) th:first-child,.tmat th:nth-child(3),.triep th:nth-child(2),.tore th:nth-child(2){background:var(--surface);z-index:3}
  tbody tr.rh:hover>td:first-child,tbody tr.rh:hover>td:nth-child(2),tbody tr.rh:hover>td:nth-child(3){background:var(--hover)}
  tfoot td:first-child,tfoot td:nth-child(2),tfoot td:nth-child(3){background:var(--surface)}
  tr.sez td:first-child{position:static;background:var(--sezione-soft)}
  /* l'intestazione di sezione attraversa tutta la tabella: nome a sinistra e subtotale a destra restano in vista mentre si scorre */
  .riga-sez .testa-sez{position:sticky;left:13px}
  .riga-sez .sez-tot{position:sticky;right:13px}
  .filtri-materiali,.listino-filtri,.viste,.gruppo{flex-wrap:wrap}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
button{font:inherit;cursor:pointer}
/* gerarchia delle azioni: primaria piena (una sola per schermata) · secondaria bordo ·
   terziaria solo testo · distruttiva testo rosso, mai stesso peso delle altre */
.btn{display:inline-flex;align-items:center;gap:4px;font-size:var(--t2);font-weight:500;border:1px solid var(--margine);border-radius:8px;padding:7px 14px;background:var(--margine);color:var(--on-color)}
.btn:hover{background:var(--margine-hover);border-color:var(--margine-hover)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--card);border-color:var(--ink-30)}
.btn.txt{background:transparent;color:var(--ink-60);padding:8px var(--s2);font-weight:500;border-color:transparent}
.btn.txt:hover{color:var(--ink);background:transparent;border-color:transparent}
.btn.sm{padding:7px 11px;font-size:var(--t1);border-radius:7px}
.btn.soft{background:var(--margine-soft);color:var(--margine);border-color:var(--margine-soft)}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{color:var(--alert);background:transparent;border-color:transparent;font-weight:500}
.btn.danger:hover{background:var(--alert-soft)}
.btn.danger.forte{background:var(--alert-soft);border-color:var(--alert-line)}   /* il pulsante di una finestra di conferma: visibile, ma sempre rosso su fondo chiaro */
.chip{font-size:var(--t1);font-weight:600;padding:4px 8px;border-radius:20px;background:var(--materiale-soft);color:var(--materiale)}
.chip.ok{background:var(--margine-soft);color:var(--ok)}
.chip.no{background:var(--alert-soft);color:var(--alert)}
.chip.muted{background:var(--line-soft);color:var(--ink-60)}
h1{font-size:var(--t5);font-weight:600;letter-spacing:-.025em;margin:0}
h3{font-size:var(--t3);font-weight:600;letter-spacing:-.01em;margin:0}
.grid{display:grid;gap:var(--s3)}
/* ---------- tabelle (SPEC_Restyling 5): il reticolo sparisce e lascia leggere i numeri ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--t2)}
th{font-size:var(--t1);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-60);font-weight:500;text-align:left;padding:9px var(--s2);
  background:var(--surface);border-bottom:1px solid var(--line)}
td{padding:var(--s1) var(--s2);border-top:1px solid var(--line-soft);height:38px}
tbody tr:first-child>td{border-top:0}
td.r{white-space:nowrap}    /* un importo non va mai a capo */
tbody tr:hover,tr.rh:hover{background:var(--hover)}
tfoot td{background:var(--surface);border-top:1px solid var(--line)}
.triep th,.triep td{padding-left:6px;padding-right:6px}   /* riepilogo arredi: undici colonne, devono stare in 900px */
.cell{border:1px solid transparent;border-radius:4px;padding:4px 8px;font:inherit;background:transparent;width:100%;outline:none;color:var(--ink)}
.cell:not([type=number]){text-overflow:ellipsis}   /* un nome lungo finisce con i puntini; un numero non si taglia mai */
.cell[type=number]{padding-left:4px;padding-right:4px}   /* le frecce occupano spazio: nelle colonne strette il numero deve restare intero */
.mdo-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);align-items:start}
.cons-grid{grid-template-columns:1fr 1fr;align-items:start}
.opz-mat-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
@media (max-width:1280px){.mdo-grid,.cons-grid,.opz-mat-grid{grid-template-columns:minmax(0,1fr)}}   /* minmax(0,..): una tabella larga scorre nel suo riquadro, non allarga la pagina */
.grid>*{min-width:0}
.cell:hover{border-color:var(--line)}
.cell:focus{border-color:var(--margine);background:var(--card);box-shadow:0 0 0 2px var(--focus-ring)}
.r{text-align:right}.mono{font-size:var(--t2);color:var(--margine);font-weight:500}   /* codici: stesso carattere del resto, tabellare */
.testa-sub .mono{color:var(--ink-60)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);flex-wrap:wrap}
.tabs button{font-size:var(--t2);font-weight:400;padding:9px 14px;border:none;background:none;color:var(--ink-60);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:500;border-bottom-color:var(--margine)}
.tabs.fitte{gap:0;flex-wrap:nowrap;overflow-x:auto}
.tabs.fitte button{padding:9px var(--s3);white-space:nowrap}
.muted{color:var(--ink-60)}.small{font-size:var(--t2)}.mini{font-size:var(--t1);color:var(--ink-60)}
.sr{position:relative}
/* D.1: layer fisso rispetto alla finestra (non al riquadro che la contiene), cosi' non si
   ritaglia mai dentro una tabella che scorre. Posizione (sopra/sotto) e larghezza le calcola
   posizionaSugg() dalla riga, ad ogni apertura. */
.sugg{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-md);max-height:300px;overflow:auto;overscroll-behavior:contain;min-width:380px}
.sugg div{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:var(--t2)}
.sugg div:hover,.sugg div.sel{background:var(--margine-soft)}
/* SPEC_Ricerca 1.2/1.5: contatore e voce "sfoglia listino" in fondo alla tendina — non risultati, non cliccabili come tali */
.sugg-conta{cursor:default;color:var(--ink-60);font-size:var(--t1);position:sticky;bottom:0;background:var(--card)}
.sugg-conta:hover{background:var(--card)}
.sugg-sfoglia{cursor:pointer;font-weight:600;color:var(--margine);border-bottom:none;position:sticky;bottom:0;background:var(--card)}
.sugg-sfoglia:hover{background:var(--margine-soft)}
/* riga materiale appena riempita dalla finestra "Sfoglia listino": si evidenzia un istante (SPEC_Ricerca 2.2) */
#app tr.flash{animation:riga-flash 1.2s ease}
@keyframes riga-flash{0%{background:var(--margine-soft)}100%{background:transparent}}
/* ---------- SFOGLIA LISTINO (SPEC_Ricerca parte 2): finestra sovrapposta, non un'altra schermata ---------- */
.sfoglia-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s5)}
.sfoglia-finestra{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:min(1040px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.dialogo{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:min(480px,100%);max-height:88vh;display:flex;flex-direction:column;padding:var(--s5);gap:var(--s3)}
.dialogo.larga{width:min(720px,100%)}
.dialogo-corpo{overflow:auto;overscroll-behavior:contain;font-size:var(--t2);color:var(--ink)}
.dialogo-corpo textarea.cell{border-color:var(--line);resize:vertical;min-height:84px;display:block}
.dialogo-azioni{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s2)}
.sfoglia-testa{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);gap:var(--s3)}
.filtri-materiali{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:flex-end}
.sfoglia-filtri{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--hover)}
.filtri-materiali .campo{min-width:0}
.filtri-materiali .campo .cell{border-color:var(--line);background:var(--card)}
.sfoglia-range{display:flex;align-items:center;gap:4px}
.sfoglia-range .cell{width:76px}
.sfoglia-conta{padding:var(--s2) var(--s5);font-size:var(--t2);color:var(--ink-60);border-bottom:1px solid var(--line)}
/* lo scorrimento qui dentro non deve chiudere la finestra ne' muovere la pagina sotto (stessa attenzione della tendina) */
.sfoglia-risultati{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 var(--s5) var(--s4)}
.sfoglia-risultati table{table-layout:fixed}
.sfoglia-risultati thead th{position:sticky;top:0;background:var(--surface);z-index:1;cursor:default}
.sfoglia-risultati th.ord{cursor:pointer;user-select:none}
.sfoglia-risultati th.ord:hover{color:var(--ink)}
.sfoglia-risultati td{height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfoglia-riga{cursor:pointer}
.sfoglia-riga.sel{background:var(--margine-soft)}
/* listino: filtri e tabella in un solo riquadro; il materiale disattivato si attenua (SPEC_Restyling, bozza) */
.listino-filtri{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
tr.dis td{color:var(--ink-30)}
tr.dis .mono{color:var(--ink-30)}
.sfoglia-star{cursor:pointer;width:22px;text-align:center}
/* F.6: listino a colonne definite. Larghezze in pixel (table-layout:fixed): il testo lungo finisce con i puntini
   (e ha il title), mai sopra la colonna accanto; le intestazioni vanno a capo. Le colonne si ridimensionano trascinando
   il bordo dell'intestazione (doppio clic = larghezza predefinita) e le larghezze restano nel browser. */
.tlistino{table-layout:fixed}
.tlistino th,.tlistino td{overflow:hidden;text-overflow:ellipsis}
.tlistino td{white-space:nowrap}
.tlistino th{position:relative;white-space:normal;line-height:1.2;vertical-align:bottom;padding-right:var(--s3)}
.tlistino th.ord{cursor:pointer;user-select:none}
/* G.7: colonne ridimensionabili (colonne.js), la stessa regola per ogni tabella che le ha: larghezze in pixel, il contenitore scorre */
.colonne-mod{table-layout:fixed}
.colonne-mod th{position:relative;overflow:hidden;text-overflow:ellipsis}
.colonne-mod:not(.tlistino) th{white-space:nowrap}
.colonne-mod .grip{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;user-select:none;touch-action:none}
.colonne-mod .grip::after{content:"";position:absolute;right:3px;top:20%;height:60%;width:1px;background:var(--ink-30)}
.colonne-mod .grip:hover::after,.colonne-mod .grip.on::after{width:2px;right:2px;background:var(--margine)}
@media (hover:none){.colonne-mod .grip{width:18px}}      /* col dito il bordo va preso con piu' margine */
body.ridimensiona{cursor:col-resize;user-select:none}
.sfoglia-vuoto{padding:var(--s5);text-align:center;color:var(--ink-60)}
.pill{font-size:var(--t1);padding:4px 8px;border-radius:10px;background:var(--margine-soft);color:var(--ok);margin-left:4px}
.pill.no{background:var(--alert-soft);color:var(--alert)}
.pill.attesa{background:var(--line-soft);color:var(--ink-60)}
.gruppo{display:flex;align-items:center;gap:8px;padding:12px var(--s4);border-top:1px solid var(--line);flex-wrap:wrap}
.gruppo:first-child{border-top:none}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:var(--on-color);padding:12px 16px;border-radius:9px;font-size:var(--t2);opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1}
/* F.4: indicatore del salvataggio accanto al titolo — tre stati soltanto */
.ind-salv{display:inline-flex;align-items:center;gap:6px;font-size:var(--t2);color:var(--ink-60);white-space:nowrap}
.ind-salv::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.ind-salv.salvando::before{background:var(--ink-30)}
.ind-salv.errore{color:var(--alert);font-weight:500}
.ind-salv.errore::before{background:var(--alert)}
.head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s4);gap:var(--s4);flex-wrap:wrap}
.head.testa{margin-bottom:var(--s3)}
.testa-id{min-width:0}
.testa-sub{margin:var(--s1) 0 0;color:var(--ink-60);font-size:var(--t2);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.testa-sub .btn.txt{padding:0}
/* G.4: la matita compare al passaggio del mouse (sempre visibile dove non c'e' il mouse, e con la tastiera) */
.matita{opacity:0;border:0;background:none;color:var(--ink-30);font-size:var(--t2);padding:0 2px;transition:opacity .12s}
h1:hover .matita,.testa-sub:hover .matita,.matita:focus-visible{opacity:1}
.matita:hover{color:var(--margine)}
@media (hover:none){.matita{opacity:1}}
.campo-nome{border-color:var(--line);background:var(--card);width:100%;min-width:200px}
h1 .campo-nome{font:inherit;letter-spacing:inherit;font-size:var(--t5);font-weight:600;padding:2px 8px;width:min(480px,100%)}
/* G.5: elenco a discesa dei clienti (cliente.js): layer fisso, sopra le finestre sovrapposte */
.cb-lista{position:fixed;z-index:120;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-md);max-height:260px;overflow:auto;overscroll-behavior:contain}
.cb-lista div{padding:8px 12px;cursor:pointer;font-size:var(--t2)}
.cb-lista div:hover,.cb-lista div.sel{background:var(--margine-soft)}
.cb-lista div.crea{color:var(--margine);font-weight:600;border-top:1px solid var(--line)}
.cb-lista div.vuota{cursor:default;color:var(--ink-60)}
.cb-lista div.vuota:hover{background:none}
/* il menu ⋯ (menu.js) */
.menu-pop{position:fixed;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-md);padding:4px;min-width:150px;display:flex;flex-direction:column}
.menu-pop button{border:0;background:none;text-align:left;padding:8px 12px;border-radius:6px;font-size:var(--t2);color:var(--ink)}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--line-soft);outline:none}
.menu-pop button.pericolo{color:var(--alert)}
.menu-pop button.pericolo:hover,.menu-pop button.pericolo:focus-visible{background:var(--alert-soft)}
.testa-azioni{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
/* ritorno alla schermata da cui si viene (SPEC_Restyling 2 e 3) */
.torna{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:var(--ink-60);font-size:var(--t2);margin-bottom:var(--s1)}
.torna:hover{color:var(--margine)}
.note{background:var(--margine-soft);border:1px solid var(--margine-line);border-radius:10px;padding:12px var(--s4);font-size:var(--t2);color:var(--margine-ink);margin-bottom:var(--s4)}
.alt{opacity:.55}
/* E.1: arredo escluso dai conti — barrato e attenuato, distinto dalla semplice "alternativa" */
.esc{opacity:.55;text-decoration:line-through}
.etichetta{font-size:var(--t1);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-60)}
.campo{display:flex;flex-direction:column;gap:4px}
.campo .cell{border-color:var(--line)}
tr.tot td{background:var(--surface);border-top:1px solid var(--line);font-weight:600;padding:var(--s2) 8px}
.inattiva{opacity:.5}
.chk{display:flex;align-items:center;gap:4px;font-size:var(--t2);padding:4px 0;cursor:pointer}
/* E.2: composizione richiudibile — chiusa mostra solo la riga di sintesi */
.coll-testa{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:var(--s4) var(--s5)}
.coll-chev{display:inline-block;transition:transform .15s;color:var(--ink-60)}
.coll-chev.on{transform:rotate(90deg)}
.compv{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line-soft);margin:6px 0}
.compv div{height:100%}

/* ---------- ELENCO DEI PREVENTIVI (SPEC_Restyling 8): righe, non riquadri ---------- */
.dash{overflow:hidden}
.dhead,.drow{display:grid;grid-template-columns:20px 92px minmax(0,1fr) 150px 92px 100px 100px 124px 76px;gap:var(--s3);align-items:center}
.dhead{padding:9px var(--s4);font-size:var(--t1);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-60);font-weight:500;
  background:var(--surface);border-bottom:1px solid var(--line)}
.drow{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s;min-height:64px}
.drow:last-child{border-bottom:none}
.drow:hover{background:var(--hover)}
.cod{color:var(--ink-60);font-size:var(--t2)}
.dhead input[type=checkbox],.drow input[type=checkbox]{margin:0;width:16px;height:16px;accent-color:var(--margine);cursor:pointer}
.who{min-width:0}
.cli{font-weight:500;font-size:var(--t2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tit{color:var(--ink-60);font-size:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0px}
.arredi{display:flex;gap:var(--s1);margin-top:4px;flex-wrap:wrap}
.ar{font-size:var(--t1);padding:3px 8px;border-radius:5px;background:var(--line-soft);color:var(--ink-60);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ar.alt{opacity:.55;border:1px dashed var(--ink-30);background:transparent}
.ar.esc{opacity:.55;border:1px dashed var(--ink-30);background:transparent;text-decoration:line-through}
.prezzo{font-weight:600}
@media (max-width:1100px){
  .dhead,.drow{grid-template-columns:20px 88px minmax(0,1fr) 130px 96px 116px 72px}
  .c-off{display:none}
}
.pos{color:var(--ok)} .neg{color:var(--alert)}
.delta{font-size:var(--t1);font-weight:600;padding:2px 4px;border-radius:4px}
.delta.up{background:var(--alert-soft);color:var(--alert)} .delta.down{background:var(--margine-soft);color:var(--ok)}
.b{font-size:var(--t1);font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap}
.b-conf{background:var(--margine-soft);color:var(--margine)} .b-bozza{background:var(--line-soft);color:var(--ink-60)}
.b-inviata{background:var(--manodopera-soft);color:var(--manodopera)}
.b-prod{background:var(--materiale-soft);color:var(--materiale-ink)} .b-chiusa{background:var(--line-soft);color:var(--ink-60)} .b-ord-ok{background:var(--margine-soft);color:var(--ok)}
.b-ord-no{background:var(--materiale-soft);color:var(--materiale-ink)} .b-ord-part{background:var(--manodopera-soft);color:var(--manodopera)}
.b-err{background:var(--alert-soft);color:var(--alert)}   /* il rosso e' per gli errori */
.b-prog{background:var(--manodopera-soft);color:var(--manodopera)} .b-sosp{background:var(--line);color:var(--ink-60)}
.b-rif{background:var(--alert-soft);color:var(--alert);border:1px solid var(--alert-line)}   /* G.1: rifiutato, la nota sta sotto il nome */
.rifiutata{opacity:.62}
.nota-rif{font-size:var(--t1);color:var(--alert);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
/* G.2: viste rapide dell'elenco, una sola attiva */
.viste{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.viste button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 13px;font-size:var(--t2);color:var(--ink-60)}
.viste button:hover{border-color:var(--ink-30);color:var(--ink)}
.viste button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-color);font-weight:500}

/* ---------- COMPOSIZIONE COSTI (mockup sezione 2) ---------- */
.viz{padding:var(--s5)}
.viz-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--s4);gap:var(--s4);flex-wrap:wrap}
/* unica misura fuori dalla scala dei cinque testi: la cifra grande del mockup approvato (sezione 2) */
.big{font-size:30px;font-weight:700;line-height:1}
.stack{display:flex;height:26px;border-radius:7px;overflow:hidden;background:var(--line-soft);border:1px solid var(--line)}   /* SPEC_Restyling 7 */
.stack>div{position:relative;transition:width .3s;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  font-size:var(--t1);font-weight:500;color:var(--on-color)}
.chiavi{display:flex;gap:var(--s4) 18px;flex-wrap:wrap;align-items:baseline;margin-top:var(--s2);font-size:var(--t2);color:var(--ink-60)}
.chiavi b{color:var(--ink);font-weight:500}
.chiavi b.pos{color:var(--ok)} .chiavi b.neg{color:var(--alert)}
.chiavi .prezzo-def{margin-left:auto}
.chiavi .prezzo-def b{font-size:var(--t4);font-weight:600}
.sq{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}
.s-mat{background:var(--materiale)} .s-mdo{background:var(--manodopera)} .s-mar{background:var(--margine)}
.leg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.leg-i{border-top:3px solid;padding-top:var(--s2)}
.leg-i .k{font-size:var(--t2);color:var(--ink-60);display:flex;align-items:center;justify-content:space-between}
.leg-i .v{font-size:var(--t4);font-weight:700;margin-top:0px}
.leg-i .p{font-size:var(--t1);color:var(--ink-60)}
.cmp{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4)}
.cmp-row{display:grid;grid-template-columns:76px 1fr 92px;gap:var(--s3);align-items:center;margin-bottom:4px}
.cmp-lab{font-size:var(--t2);color:var(--ink-60)}
.cmp-bar{height:12px;background:var(--line-soft);border-radius:3px;overflow:hidden;display:flex}
.cmp-bar i{display:block;height:100%}
.cmp-val{text-align:right;font-size:var(--t2);font-weight:600}

/* ---------- VARIANTI (mockup sezione 3): emoji dalle Opzioni; codice sconosciuto = icona neutra ---------- */
.vneutra{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--ink-30);vertical-align:-1px;flex:none}

/* ---------- RIGA MATERIALE (SPEC_Restyling 6): componente unico, viste/riga-materiale.js ---------- */
/* le larghezze delle colonne le scrive colonne.js (predefinite o scelte dall'utente); solo la stampa le ridefinisce */
.tmat td{vertical-align:middle;padding-top:var(--s2);padding-bottom:var(--s2)}
.tmat select.cell,.tmat input[type=number].cell{border-color:var(--line);background:var(--card);border-radius:7px}
.tmat .mat-nome{display:flex;gap:var(--s2);align-items:flex-start}
.lente{border:1px solid var(--line);background:var(--card);border-radius:6px;width:28px;height:26px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:var(--t1)}
.lente:hover{border-color:var(--ink-30)}
/* D.4: la x non resta attaccata al bordo destro — spazio a destra e area cliccabile min. 28x28 */
.tmat td:last-child{padding-right:var(--s4);text-align:right}
.tmat td:last-child .btn{min-width:28px;min-height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* seconda riga sotto nome, modo e fabbisogno: dimensioni, unita', sviluppo (SPEC_Restyling 6: 12px in --ink-60) */
.unita-info{font-size:var(--t-meta);color:var(--ink-60);margin-top:2px;padding:0 var(--s1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forzato{color:var(--materiale);font-weight:600}
#avviso-versione{background:var(--materiale-soft);border-bottom:1px solid var(--materiale-line);color:var(--materiale-ink);font-size:var(--t2);padding:var(--s2) 0}

/* ---------- SEZIONI (G.11 materiali per categoria, G.12 consuntivo per pool) ----------
   Gerarchia, non tinte nuove: il fondo e' --sezione-soft, la barretta a sinistra --sezione, il nome (15px semibold) e il subtotale (15px)
   sono piu' grandi delle righe che governano (13,5px). L'intestazione attraversa tutta la tabella. */
.ico-sez{width:16px;height:16px;flex:none;color:var(--sezione)}
tr.sez td{background:var(--sezione-soft);border-top:1px solid var(--sezione-line);border-bottom:1px solid var(--sezione-line);
  padding:14px 0 11px;height:auto;box-shadow:inset 4px 0 0 var(--sezione)}
tbody tr.sez:first-child>td{border-top:1px solid var(--sezione-line)}
tbody tr.sez:hover{background:transparent}
.riga-sez{display:flex;align-items:center;gap:var(--s3);padding:0 13px;font-size:var(--t3);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-align:left}
.testa-sez{display:inline-flex;align-items:center;gap:10px;min-width:0}
.sez-conta{font-weight:400;color:var(--ink-60);font-size:var(--t-meta);letter-spacing:0;white-space:nowrap}
.sez-tot{margin-left:auto;font-size:var(--t3);font-weight:600;color:var(--ink);white-space:nowrap}
.tmat tr.sez td{padding:14px 0 11px;text-align:left}
.tore td.r,.tore th.r{white-space:nowrap}
.sez-delta{font-size:var(--t2);font-weight:500;margin-right:var(--s3)}
.sez-delta.muted{font-weight:400}

/* ---------- pool di fase (SPEC_Restyling 1): colori dai token --pool-*, Esterni sempre tratteggiato ---------- */
.pool{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* G.6: la tariffa e' sempre visibile; quella che viene dal pool (non scritta sulla riga) e' attenuata */
.tmdo input.cell.deriv{color:var(--ink-60)}
.tmdo td.r{white-space:nowrap}
.pool-sq{width:9px;height:9px;border-radius:3px;flex:none;background:var(--ink-30);display:inline-block}
.p-ufficio{background:var(--pool-ufficio)} .p-produzione{background:var(--pool-produzione)} .p-finitura{background:var(--pool-finitura)}
.p-assemblaggio{background:var(--pool-assemblaggio)} .p-logistica{background:var(--pool-logistica)}
.p-esterni{background:transparent;border:1.5px dashed var(--pool-esterni)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;padding:var(--s3) 0 0;font-size:var(--t1);color:var(--ink-60)}

/* G.13: elementi che esistono solo su uno dei formati (la regola che li mostra o nasconde sta nel blocco del telefono, in fondo) */
.solo-telefono,.testo-nome{display:none}
.solo-lettura{background:var(--manodopera-soft);color:var(--manodopera);border:1px solid var(--sezione-line);border-radius:8px;padding:9px 12px;font-size:var(--t2);margin-bottom:var(--s3)}

/* ---------- STAMPA (B.5): solo intestazione e tabelle, niente comandi ---------- */
.print-head{display:none}
/* G.8: la stampa interna del preventivo (stampa.js) sta in un blocco che a schermo non c'e' e in stampa sostituisce la scheda */
.solo-stampa{display:none}
.stampa-arredo h3{margin:var(--s4) 0 var(--s2)}
.stampa-arredo .tst{margin-bottom:var(--s3)}
.tst{table-layout:fixed}
.tst td{height:auto;padding-top:3px;padding-bottom:3px;overflow:hidden;text-overflow:ellipsis}
/* stesse colonne in ogni arredo: i numeri si leggono allineati da una pagina all'altra */
.tst-mat th:nth-child(1){width:20%} .tst-mat th:nth-child(3){width:11%} .tst-mat th:nth-child(4){width:17%} .tst-mat th:nth-child(5){width:14%}
.tst-mdo th:nth-child(1){width:34%} .tst-mdo th:nth-child(2),.tst-mdo th:nth-child(3){width:9%} .tst-mdo th:nth-child(4){width:10%}
.tst-mdo th:nth-child(5),.tst-mdo th:nth-child(6){width:12%} .tst-mdo th:nth-child(7){width:14%}
.tst-riep th:nth-child(n+2){width:13%}
.stampa-chiusa{display:flex;gap:var(--s5);justify-content:flex-end;font-size:var(--t2);color:var(--ink-60)}
.stampa-chiusa b{color:var(--ink);font-weight:600}
@media print{
  .rail,.tabs,.torna,.no-print,.toast,button,#avviso-versione,#dialogo,.menu-pop,.cb-lista{display:none!important}
  .solo-schermo{display:none!important}
  .solo-stampa{display:block}
  .app{display:block}
  body{background:var(--card)}
  main.wrap{padding:0;max-width:none}
  .wrap{max-width:none;padding:0}
  .head{display:none}
  .print-head{display:block;margin-bottom:var(--s4)}
  .card{border:none;border-radius:0;background:var(--card)!important;box-shadow:none}
  .grid{grid-template-columns:1fr!important}
  table{width:100%!important}
  .b,.pill,.chip,.delta,.ar{background:none!important}
  /* i dati inseriti si stampano come testo: via bordi, frecce e menu a tendina, non i valori */
  input,select,textarea{border:none!important;background:none!important;box-shadow:none!important;padding:0!important;
    appearance:none;-webkit-appearance:none;color:var(--ink)!important;font:inherit}
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield}
  .stack>div,.cmp-bar i,.s-mat,.s-mdo,.s-mar,.pool-sq{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* SPEC_Restyling 9: le tabelle stanno nella pagina e non si spezzano a meta' riga; i pool si leggono anche in scala di grigi
     (il quadratino tratteggiato di Esterni li distingue: il tratteggio e' nero, non solo colorato) */
  table{min-width:0!important;font-size:var(--t1)}
  div[style*="overflow-x:auto"]{overflow:visible!important}
  th,td{padding-left:4px!important;padding-right:4px!important}
  tr{break-inside:avoid}
  thead{display:table-header-group}
  h3,.print-head{break-after:avoid}
  .stampa-arredo{break-inside:avoid}
  .stampa-arredo.esc,.stampa-arredo.alt{opacity:.7}
  .tst{font-size:10.5px}
  .tst tfoot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .triep{font-size:10.5px}
  .triep th:first-child,.triep td:first-child{display:none}   /* la spunta "Conta" non si stampa: gli arredi esclusi sono gia' marcati */
  .triep input.cell{width:64px!important}
  .p-esterni{border-color:var(--ink)}
  .pool-sq{outline:1px solid var(--ink)}
  .tmat col.c-n{width:26px!important} .tmat col.c-cat{width:92px!important} .tmat col.c-mat{width:auto!important} .tmat col.c-modo{width:78px!important}
  .tmat col.c-fab{width:96px!important} .tmat col.c-sic{width:58px!important} .tmat col.c-costo{width:72px!important}
  .tmat col.c-x,.tmat th:last-child,.tmat td:last-child{display:none}
}

/* ---------- G.13 TELEFONO (sotto 768px): sola lettura, schede al posto delle tabelle ---------- */
@media (max-width:767px){
  .app{display:block}
  .rail{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;align-items:center;gap:var(--s3);padding:10px var(--s3);overflow-x:auto;overflow-y:hidden}
  .brand{flex:none;padding:0 4px}
  .nav{flex-direction:row;gap:4px;flex:none}
  .nav .sec,.nav button.sub{display:none}
  .nav button{width:auto;padding:6px 12px;white-space:nowrap}
  .nav .sec-voci.chiusa{display:contents}
  main.wrap{max-width:none;padding:14px var(--s3) 40px}
  h1{font-size:var(--t4)}
  .head{margin-bottom:var(--s2)}
  .no-telefono,.matita{display:none!important}
  .solo-telefono{display:inline-block}
  div.solo-telefono{display:block}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-bottom:var(--s3)}
  .tabs button{white-space:nowrap}
  .grid,.mdo-grid,.cons-grid,.opz-mat-grid{grid-template-columns:1fr}
  /* sola lettura: i campi della scheda si vedono ma non si toccano */
  #tabbody input,#tabbody select,#tabbody textarea,#tabbody label.chk{pointer-events:none}
  /* elenco dei preventivi: una scheda per preventivo */
  .dhead{display:none}
  .drow{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);padding:var(--s3) var(--s4);min-height:0;align-items:start}
  .drow>:nth-child(1),.drow>:nth-child(5),.drow>:nth-child(6),.drow>:nth-child(7),.drow>:nth-child(9){display:none}
  .drow>:nth-child(3){grid-column:1;grid-row:1}
  .drow>:nth-child(4){grid-column:2;grid-row:1;justify-content:flex-end}
  .drow>:nth-child(2){grid-column:1;grid-row:2}
  .drow>:nth-child(8){grid-column:2;grid-row:2}
  /* le tabelle diventano schede: una per riga, con le sue coppie etichetta-valore. Le sezioni restano, con icona e subtotale */
  #app .card{overflow-x:auto}
  .a-schede{min-width:0!important;width:100%!important;display:block}
  .a-schede colgroup,.a-schede thead{display:none}
  .a-schede tbody,.a-schede tfoot,.a-schede tr{display:block}
  .a-schede tr.rh,.a-schede tfoot tr{margin:var(--s2) var(--s3);padding:var(--s3) var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
  .a-schede tfoot tr{background:var(--surface)}
  .a-schede tfoot td{background:none!important;border:0!important}
  .a-schede td,.a-schede tfoot td{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);align-items:baseline;border:0;padding:3px 0;height:auto;
    text-align:right;background:none;position:static}
  .a-schede td:not([data-l]){display:none}
  .a-schede td[data-l]::before{content:attr(data-l);grid-column:1;grid-row:1;text-align:left;color:var(--ink-60)}
  .a-schede td>*{grid-column:2;justify-self:end;text-align:right;min-width:0}
  .a-schede td[data-l=""]{display:block;text-align:left;font-weight:600;font-size:var(--t3);padding-bottom:var(--s2)}
  .a-schede td[data-l=""]{padding:0 0 var(--s2)!important}     /* il titolo della scheda: piu' forte del padding scritto sulla cella */
  .a-schede td[data-l=""]>*{text-align:left;justify-self:stretch}
  .triep a{text-decoration:none}
  .a-schede tr.sez{margin:var(--s3) 0 0}
  .a-schede tr.sez td{display:block;padding:14px 0 11px;text-align:left;font-weight:400}
  .a-schede tr.sez td>*{text-align:left;justify-self:stretch}
  .riga-sez{flex-wrap:wrap;row-gap:2px}
  .a-schede tr.sez .sez-tot{margin-left:auto}
  #app .a-schede .cell{width:auto;field-sizing:content;max-width:100%;border-color:transparent;background:none;box-shadow:none;padding:0;text-align:right;
    appearance:none;-webkit-appearance:none;-moz-appearance:textfield;color:var(--ink);opacity:1}
  #app .a-schede select.cell{background-image:none}
  .a-schede input::-webkit-outer-spin-button,.a-schede input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  /* la scheda di una riga materiale: il nome per intero in testa (l'input non va a capo), poi le coppie */
  .tmat td:nth-child(2){display:none}
  .tmat .mat-nome input.cell,.tmat .lente,.tmat td.sr>input.cell,.tmat .sugg{display:none}
  .testo-nome{display:block;font-weight:600;font-size:var(--t3);white-space:normal;text-align:left}
  .tmat .mat-nome{display:block}
  .tmat td.sr{padding-bottom:var(--s2)}
  .unita-info{white-space:normal}
  .a-schede td:not([data-l=""]) .unita-info{text-align:right}
  .testo-nome:empty::before{content:"nessun materiale";color:var(--ink-60);font-weight:400}
  .tmdo tr.rh{margin-left:0;margin-right:0}
  .tmdo td:first-child{padding:0 0 var(--s2)}
  .tore td.r,.tore th.r{white-space:normal}
  .legenda{padding-top:var(--s3)}
  .sfoglia-backdrop{padding:var(--s2)}
}
.autore-sistema{border-bottom:1px dotted var(--ink-30);cursor:help}   /* A.4: la versione creata dall'app */
.aiuto-campo{display:block;margin-top:2px}   /* A.7: la riga di aiuto sotto un campo */
/* A.10 (collaudo 29/09): sotto i 700 px ogni campo ha almeno 16 px di testo, cosi' Safari e Chrome non ingrandiscono la
   pagina al tocco. Lo zoom con due dita resta: il viewport non lo blocca. */
@media (max-width:700px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em)!important}}
.nav-n{margin-left:auto;background:var(--materiale);color:var(--on-color);border-radius:999px;padding:0 7px;font-size:var(--t1);line-height:18px}   /* parte D: le mie cose da fare */
/* SPEC_RilascioAccessoRemoto B.1: l'etichetta della cartella di sviluppo, in colore di avviso */
.ambiente-sviluppo{display:block;margin-top:4px;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:var(--materiale);color:var(--on-color);text-align:center}