/* Tema chiaro SIWAY: arancione #e94e0f, scuro #1d1d1b, sfondo chiaro. */
:root { --bg:#f4f6f9; --bg2:#ffffff; --card:#ffffff; --line:#e4e7ec; --txt:#1d1d1b; --mut:#737a86;
        --acc:#e94e0f; --acc-soft:#fdeae1; }
* { box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--txt); margin:0; }

.layout { display:flex; min-height:100vh; }
/* SIDEBAR COLLASSABILE (solo il clic sulla freccetta comanda, nessun automatismo):
   colonna flessibile a tutta altezza (sticky), blocco utente ancorato al fondo,
   transizione fluida della larghezza; da chiusa resta la sola striscia con la freccetta. */
.sidebar { width:256px; background:var(--bg2); border-right:1px solid var(--line); padding:18px 12px;
           display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
           overflow-y:auto; overflow-x:hidden; flex:0 0 auto;
           transition:width .25s ease, padding .25s ease; }
.logo { display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:0 2px 14px;
        border-bottom:2px solid var(--acc); flex:0 0 auto; }
.logo-txt { font-size:1.3rem; font-weight:800; letter-spacing:.5px; color:var(--txt);
            transition:opacity .2s ease; }
.sb-freccia { width:30px; height:30px; flex:0 0 30px; border:1px solid var(--line); border-radius:6px;
              background:var(--bg2); color:var(--acc); cursor:pointer; padding:0; line-height:1;
              font-size:1.25rem; font-weight:800; font-family:inherit; }
.sb-freccia::before { content:"\2039"; }               /* ‹ */
.sb-freccia:hover { background:var(--acc-soft); }
/* Il corpo del menu NON si restringe mai sotto il suo contenuto (flex-shrink 0): con i
   sottomenu aperti la sidebar scorre e il blocco utente resta SEMPRE SOTTO TUTTO. */
.sb-corpo { flex:1 0 auto; width:230px; transition:opacity .2s ease; }
.utente-fondo { margin-top:auto; flex:0 0 auto; width:230px; border-top:1px solid var(--line);
                padding-top:10px; padding-bottom:30px;   /* respiro sopra il link fisso «Manuale istruzioni» */
                transition:opacity .2s ease; }
.utente-fondo .uf-nome { padding:2px 10px 8px; font-size:.9rem; }
.utente-fondo .uf-ruolo { color:var(--mut); font-size:.75rem; }
/* stato CHIUSO: resta la striscia con la sola freccetta (che punta a destra) */
.layout.sb-chiusa .sidebar { width:54px; padding:18px 11px; }
.layout.sb-chiusa .logo { border-bottom-color:transparent; }
.layout.sb-chiusa .sb-freccia::before { content:"\203A"; }   /* › */
.layout.sb-chiusa .logo-txt,
.layout.sb-chiusa .sb-corpo,
.layout.sb-chiusa .utente-fondo { opacity:0; visibility:hidden; }
.sidebar nav { display:flex; flex-direction:column; gap:3px; }
/* Regola di sicurezza: nel menu OGNI voce e ogni contenitore stanno in colonna, mai in fila.
   I link sono a blocco su tutta la larghezza, così non si affiancano né si sovrappongono. */
.sidebar nav, .sidebar .sottomenu, .sidebar .sottomenu2 { display:flex; flex-direction:column; }
.sidebar a, .sidebar .voce { display:block; width:100%; }
/* 3082: la ricerca in testa al menu */
.cerca-menu { padding:6px 10px 8px; }
.cerca-menu input { width:100%; box-sizing:border-box; padding:6px 8px; font-size:.85rem;
                    border:1px solid var(--bordo, #d4d4d8); border-radius:6px; background:#fff; }
.cerca-menu input:focus { outline:2px solid var(--acc-soft); border-color:var(--acc); }

.voce { color:var(--txt); text-decoration:none; padding:7px 10px; border-radius:6px; font-size:.88rem;
        line-height:1.25; word-break:break-word; }
.voce:hover { background:var(--acc-soft); color:var(--acc); }
/* voce della pagina in cui mi trovo: evidenziata con barretta a sinistra */
.voce.attiva { background:var(--acc-soft); color:var(--acc); font-weight:600; box-shadow:inset 3px 0 0 var(--acc); }

/* Area di primo livello (MRP, Creazione cesti, Dashboard monitoraggio, Configurazioni) */
.area { border-top:1px solid var(--line); padding-top:3px; }
.area:first-of-type { border-top:none; }
.area > summary { list-style:none; cursor:pointer; padding:9px 10px; border-radius:6px; font-size:.95rem; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:8px; }
.area > summary::-webkit-details-marker { display:none; }
.area > summary::after { content:"\25B8"; margin-left:auto; color:var(--mut); font-size:.75rem; transition:transform .15s; }
.area[open] > summary::after { transform:rotate(90deg); }
.area > summary:hover { background:var(--acc-soft); color:var(--acc); }
.area[open] > summary { color:var(--acc); }
.sottomenu { display:flex; flex-direction:column; gap:2px; padding-left:14px; margin:2px 0 8px;
             border-left:1px solid var(--line); margin-left:14px; }

/* Sotto-area di secondo livello (dentro Configurazioni) */
.sottoarea > summary { list-style:none; cursor:pointer; padding:6px 10px; border-radius:6px;
             font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
             color:var(--mut); display:flex; align-items:center; gap:6px; }
.sottoarea > summary::-webkit-details-marker { display:none; }
.sottoarea > summary::after { content:"\25B8"; margin-left:auto; font-size:.7rem; transition:transform .15s; }
.sottoarea[open] > summary::after { transform:rotate(90deg); }
.sottoarea > summary:hover { color:var(--acc); }
.sottomenu2 { display:flex; flex-direction:column; gap:2px; padding-left:12px; margin:1px 0 6px;
              border-left:1px solid var(--line); margin-left:10px; }

.gruppo { margin:8px 0 2px; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:var(--mut); }
.placeholder { color:var(--mut); font-style:italic; font-size:.82rem; padding:6px 10px; display:block; }

/* Area dei contenuti: riempie lo spazio a destra della sidebar (flex:1). min-width:0 permette alle
   tabelle larghe di scorrere invece di sfondare il layout. */
.contenuto { flex:1; min-width:0; padding:32px; }
/* Contenitore FLUIDO ma con un tetto generoso e centrato: riempie i monitor piccoli/medi, sugli
   ultrawide si ferma a 1600px restando centrato. Regola unica, vale per TUTTE le pagine. */
.contenuto-inner { max-width:1600px; margin-left:auto; margin-right:auto; }
h1 { font-size:1.6rem; letter-spacing:1px; margin:0 0 4px; }
.sub { color:var(--mut); margin:0 0 28px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 24px; margin-bottom:24px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card h2 { font-size:.95rem; text-transform:uppercase; letter-spacing:1px; color:var(--acc); margin:0 0 16px; }

label { display:block; font-size:.78rem; color:var(--mut); margin-bottom:4px; }
.riga { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.campo { flex:1; min-width:150px; }
input, select { width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--line); background:var(--bg2); color:var(--txt); font-size:.9rem; }
/* 22/08 (Cris): le aree di testo NON erano nella regola qui sopra — restavano larghe
   ~20 caratteri (il default del browser) e in font di sistema, cosi' un campo nota lungo
   si leggeva dentro una finestrella. Stessa veste degli input e larghezza piena della cella
   che le contiene (i template che la forzavano con uno style inline restano validi). */
textarea { width:100%; box-sizing:border-box; padding:8px 10px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg2); color:var(--txt);
  font-size:.9rem; font-family:inherit; line-height:1.45; resize:vertical; }
/* FIX referto 113 (22/07, gravita' ALTA): le caselle di spunta e le radio NON ereditano
   width:100% + padding degli input di testo — nelle label semplici la casella finiva
   DISEGNATA SOPRA la propria etichetta (categorie documentali, tipi di blocco,
   tipologie soggetto, Nuovo soggetto). Una regola sola, vale ovunque. */
input[type=checkbox], input[type=radio]{ width:auto; padding:0; vertical-align:middle; }
button { padding:9px 18px; border:none; border-radius:6px; background:var(--acc); color:#ffffff; font-weight:600; cursor:pointer; font-size:.9rem; }
button:hover { filter:brightness(.95); }
button.del { background:#fff; color:#b42318; border:1px solid #f0c4be; padding:6px 12px; }
button.del:hover { background:#fdeae1; }

/* 🔴 25/09/2026 (decisione presa sul rilievo «il tasto sembra una scritta») — UN
   <a class="btn"> E' UN TASTO, IN TUTTO IL PROGRAMMA.
   COSA SUCCEDEVA. La classe `btn` sui LINK aveva una regola solo dentro tre recinti
   (`.filtri .azioni`, `.azioni-compatte`, `.limbo`). Fuori di li' un `<a class="btn">` non
   prendeva niente e usciva come una scritta in grassetto: e' il difetto che Cris ha
   segnalato piu' volte («Esporta Excel anomalie», «Excel», «Posticipo produzione» —
   «sembrano testo, non si capisce che si premono»). Curato un recinto per volta, tornava
   al recinto dopo: in 126 template ci sono 266 link con questa classe.
   COSA COPIA. Il tasto SECONDARIO del programma, bianco col bordo: e' quello che `btn` ha
   sempre voluto dire qui dentro — le tre regole dei recinti dicono tutte e tre queste
   stesse cose — mentre il tasto ARANCIONE ha una classe sua (`.btn-primario`). Cosi' un
   link-tasto non ruba l'enfasi al gesto primario della pagina.
   COSA NON TOCCA. Prende i soli LINK (`a.btn`): i <button> restano com'erano, arancioni o
   con la loro classe. Le tre regole dei recinti vincono lo stesso per specificita' e
   restano dove sono: non se ne tocca nessuna.
   PERCHE' `inline-block` E NON `inline-flex` CON L'ALTEZZA FISSA. Questa regola cade anche
   sui link dentro le celle delle tabelle e dentro i paragrafi: un'altezza fissa taglierebbe
   le scritte che vanno a capo, e i recinti che vogliono la riga alta 32 px ce l'hanno gia'
   nella loro regola. */
a.btn { display:inline-block; padding:6px 12px; border:1px solid #D8D4C8; border-radius:6px;
  background:#fff; color:#5A5145; font-size:12.5px; font-weight:600; line-height:1.4;
  text-decoration:none; cursor:pointer; }
a.btn:hover { background:#F7F5EE; text-decoration:none; }
/* 07/10/2026: tasto di stampa gia' aperto da questo computer (Etichette confezionatrici): solo il
   colore della scritta, lo stesso verde dei crediti (.pos-netta.credito); e' un promemoria. */
a.btn.stampato { color:#1e7e34; }
/* 02/10/2026 (Cris, Riparazione Limbo in produzione: «Carica le liste aperte al partner» usciva
   come un rettangolo BIANCO SU BIANCO). Un link col doppio vestito `btn btn-primario` prendeva
   lo sfondo bianco di `a.btn` (specificita' piu' alta) e il testo bianco di `.btn-primario`
   (base.html, !important): il tasto c'era, ma non si vedeva. Qui vince l'arancio: e' un link
   che vuole essere il gesto primario del riquadro (dieci casi: riparazione Limbo, scheda del
   documento, listini). */
a.btn.btn-primario { background:#E94E0F; border-color:#E94E0F; color:#fff; }
a.btn.btn-primario:hover { background:#c94209; text-decoration:none; }

/* Tabelle responsive: su schermi stretti scorrono in orizzontale (il wrapper è aggiunto da base.html
   alle sole tabelle dati, NON a quelle con menù a tendina, per non tagliarne il dropdown). */
.table-scroll { overflow-x:auto; margin-bottom:4px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.9rem; }
th { color:var(--mut); text-transform:uppercase; font-size:.72rem; letter-spacing:1px; }
.vuoto { color:var(--mut); font-style:italic; }
/* Versione dell'installazione, in fondo a ogni pagina (vedi _pie_versione.html). */
.pie-versione { color:var(--mut); font-size:.78rem; margin-top:32px; text-align:right; }
.login-card .pie-versione { text-align:center; margin-top:20px; }
.badge { padding:2px 8px; border-radius:99px; font-size:.78rem; background:var(--bg2); border:1px solid var(--line); }
/* FASE B.3 - blocchi anagrafici: badge ROSSO in testata scheda soggetto */
.badge.blocco { background:#fdecea; border-color:#d88; color:#7a1c14; font-weight:600; }
/* 11/09/2026 — «rosso» era un AVVISO SENZA COLORE. Sette pastiglie lo chiedevano
   (non riclassificato, da confermare, nomenclatura fuori archivio, fattura contestata) piu'
   il plafond negativo della dichiarazione d'intento, e nessuna regola lo definiva: uscivano
   tutte grigie come una pastiglia qualunque. Un avviso che non si vede non e' un avviso. */
.badge.rosso { background:#fdecea; border-color:#d88; color:#7a1c14; font-weight:600; }
/* 16/10/2026: le righe degli ordini del sito che chiedono fattura (Ordini dal sito) */
tr.riga-chiede-fattura > td { background:#fdecea; color:#7a1c14; }
/* PB020 (verdetto Cris 15/09/2026, pagina «Genera DDT»): «se clicco su Genera DDT il tasto
   diventa VERDE e diventa GENERATO». La pastiglia verde mancava: c'era solo la rossa, e un
   fatto compiuto usciva grigio come uno qualunque. I colori NON sono nuovi — sono esattamente
   quelli del banner di conferma (.banner-esito.ok), cosi' «andato a buon fine» ha un solo
   colore in tutto il programma. */
.badge.verde { background:#e8f5e9; border-color:#7cb87c; color:#1e4e21; font-weight:600; }
/* 22/09/2026 (verdetto Cris, annuncio dei kit dalla scheda della commessa): «il tasto deve
   essere ROSSO fino a quando la giacenza non e' presente ed il lotto non e' assegnabile [...]
   quando la giacenza e' presente ed il lotto assegnabile diventa VERDE ed utente puo' lanciare
   il file inbound». Un TASTO semaforo non c'era: c'erano solo le pastiglie, che dicono uno
   stato ma non si premono. I colori NON sono nuovi — sono gli stessi di .badge.rosso e
   .badge.verde, cioe' quelli dei banner di errore e di conferma: «fermo» e «si puo' fare»
   hanno un colore solo in tutto il programma. Il rosso e' sempre su un tasto `disabled` (un
   tasto vivo che poi dice di no e' un invito a riprovare), e il cursore lo dichiara. */
button.tasto-rosso, button.tasto-rosso:disabled { background:#fdecea; border:1px solid #d88;
    color:#7a1c14; font-weight:700; cursor:not-allowed; }
button.tasto-verde { background:#e8f5e9; border:1px solid #7cb87c; color:#1e4e21;
    font-weight:700; }
.rosso { color:#b3261e; }
form.inline { margin:0; }
/* --- Aiuto contestuale: icona fissa + drawer laterale --- */
.aiuto-icona { position:fixed; left:10px; bottom:8px; z-index:60; background:transparent; color:var(--mut);
    text-decoration:none; padding:2px 4px; font-size:.72rem; font-weight:400; }
.aiuto-icona:hover { color:var(--acc); text-decoration:underline; }
.aiuto-overlay { position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:70; display:none; }
.aiuto-overlay.aperto { display:block; }
.aiuto-drawer { position:fixed; top:0; right:0; width:min(580px,94vw); height:100vh; background:#fff;
    border-left:1px solid var(--line); z-index:80; transform:translateX(100%); transition:transform .2s ease;
    display:flex; flex-direction:column; box-shadow:-4px 0 18px rgba(0,0,0,.12); }
.aiuto-drawer.aperto { transform:translateX(0); }
.aiuto-barra { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); }
.aiuto-barra .aiuto-link { margin-left:auto; color:var(--acc); text-decoration:none; font-size:.8rem; }
.aiuto-x { background:none; border:none; color:var(--txt); cursor:pointer; font-size:1.1rem; line-height:1; }
.aiuto-iframe { flex:1; border:none; width:100%; }

/* Monitor piccoli: riduco il padding dell'area contenuti per guadagnare larghezza utile. */
@media (max-width:760px) {
    .contenuto { padding:16px; }
}

/* === Schermate ANAGRAFICHE (creazione/modifica): indice laterale + form a 2 colonne === */
/* Layout: colonna indice + card salva a sinistra, form a destra. */
.anag-layout{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:24px; align-items:start; }
@media (max-width:860px){ .anag-layout{ grid-template-columns:1fr; } }

/* Colonna indice + card salva, fissa allo scroll */
.anag-side{ position:sticky; top:16px; display:flex; flex-direction:column; gap:20px; }
@media (max-width:860px){ .anag-side{ position:static; } }
.anag-nav-tit{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); font-weight:600; margin:0 0 10px; }
.anag-nav{ display:flex; flex-direction:column; gap:2px; }
.anag-nav a{ display:block; padding:9px 12px; border-radius:7px; border-left:3px solid transparent;
  color:var(--mut); font-size:13.5px; text-decoration:none; }
.anag-nav a:hover{ background:#fff; color:var(--txt); }
.anag-nav a.is-active{ background:var(--acc-soft); color:var(--acc); font-weight:600; border-left-color:var(--acc); }

.save-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.save-card .et{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:600; }
.save-card .tipo{ font-size:15px; font-weight:700; margin-top:6px; }
.save-card .cod{ font-size:13px; color:var(--mut); margin-top:2px; }
.save-card button{ width:100%; margin-top:14px; }
.save-card .annulla{ display:block; text-align:center; font-size:13px; color:var(--mut); text-decoration:none; margin-top:10px; }

/* Barra di salvataggio in fondo al modulo anagrafiche: unico pulsante a destra */
.salva-barra{ display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-top:20px; }
.salva-barra .annulla{ font-size:13px; color:var(--mut); text-decoration:none; }
.salva-barra .annulla:hover{ text-decoration:underline; }

/* Griglia campi a 2 colonne, allineata. SOSTITUISCE l'uso di .riga nelle anagrafiche */
.campi-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; }
.campi-grid > .campo{ min-width:0; flex:none; }      /* annulla il flex:1 di .campo dentro la griglia */
.campo--full{ grid-column:1 / -1; }                   /* campo a tutta larghezza (es. ragione sociale, indirizzo, note) */
/* Casella di spunta (flag) dentro un .campo: checkbox piccola + etichetta a fianco, non a tutta larghezza */
.flag-campo{ display:inline-flex; align-items:center; gap:8px; font-weight:normal; padding:8px 0; }
.flag-campo input[type=checkbox]{ width:18px; height:18px; }
@media (max-width:560px){ .campi-grid{ grid-template-columns:1fr; } }

/* Corridoio #3 (spec UI §5): link quasi-neri in grassetto, sottolineatura solo all'hover;
   niente blu default; arancio solo sull'azione primaria */
/* Selettori tenuti a specificità minima (0,0,1) con :where(), così TUTTI gli stili specifici
   esistenti continuano a vincere: .voce, .anag-nav a, .annulla, .aiuto-icona/.aiuto-link
   (colori propri già definiti sopra) e .btn-primario (bianco su arancio con !important in
   base.html). Copre anche :visited e :active: niente blu/viola default del browser, ovunque. */
a, a:where(:visited, :active) { color:var(--txt); font-weight:700; text-decoration:none; }
a:where(:hover) { text-decoration:underline; }
/* Le navigazioni con gerarchia di peso propria (sidebar: .voce.attiva a 600; indice anagrafiche:
   .is-active a 600) mantengono il peso originale ereditato, altrimenti il grassetto generico
   invertirebbe l'enfasi della voce attiva. Gli stati attivi (specificità 0,2,0) vincono comunque. */
.sidebar :where(a), .anag-nav :where(a) { font-weight:inherit; }

/* Corridoio #4 (pronto soccorso scheda documento): pattern FORM a gruppi con etichette
   sopra, tabella righe densa, numeri tabulari a destra, descrizione a 1 riga con ellipsis,
   banner di esito dismissibile, azioni di riga ghost. Solo presentazione, zero logica. */
.scheda-doc { font-size: .93em; }
.scheda-doc table th, .scheda-doc table td { padding: 3px 7px; }
.scheda-doc h3 { margin: 14px 0 6px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.col-descr { max-width: 30ch; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
/* «Aggiungi riga» del documento. 5/08 (Cris: «tutto disallineato e bruttissimo»): i campi
   erano allineati IN BASSO (`align-items: flex-end`), ma il campo Articolo porta sotto di
   se' gli avvisi («apri articolo», «non in listino»…) ed e' quindi piu' alto degli altri:
   allineandolo in basso, la sua etichetta finiva PIU' IN ALTO delle altre e ogni avviso che
   compariva spostava di nuovo tutta la fila. Adesso si allineano IN ALTO: le etichette
   stanno sulla stessa linea sempre, e gli avvisi crescono verso il basso senza muovere
   niente. `align-content: start` tiene compatte le file quando il form va a capo. */
.form-riga { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
             align-content: flex-start; }
.form-riga fieldset { border: 1px solid var(--bordo, #ddd); border-radius: 6px;
                      padding: 6px 10px 8px; margin: 0; display: flex; gap: 10px;
                      flex-wrap: wrap; align-items: flex-start; }
.form-riga legend { font-size: .82em; opacity: .7; padding: 0 4px; }
.form-riga .campo-v { display: flex; flex-direction: column; gap: 2px; }
.form-riga .campo-v > label { font-size: .8em; opacity: .8; white-space: nowrap;
                              min-height: 1.15em; }
/* i campi hanno tutti la stessa altezza: una tendina e una casella non devono sfalsarsi.
   `min-height` e non `height`: con l'altezza fissa la tendina tagliava il testo sotto. */
.form-riga .campo-v > input, .form-riga .campo-v > select { min-height: 30px;
                                                            box-sizing: border-box; }
/* il tasto «Aggiungi» sta in fondo alla fila, non appeso in alto */
.form-riga > button[type="submit"] { align-self: flex-end; min-height: 30px; }
/* la fonte del prezzo proposto: riga propria sotto i riquadri, a tutta larghezza. Quando non
   c'e' niente da dire COLLASSA (niente spazio vuoto): sta sotto i campi, quindi il suo
   comparire non sposta nessun campo. */
   Il trucco per farla collassare senza JS: la riga non ha altezza propria (`line-height: 0`)
   e la ritrova solo il testo dentro. Vuota = alta zero, niente buco. */
.form-riga .riga-fonte { flex-basis: 100%; line-height: 0; }
.form-riga .riga-fonte > span { line-height: 1.3; }
/* «apri» sta NELLA riga dell'etichetta dell'articolo: quella riga c'e' sempre, quindi il
   link puo' comparire e sparire senza far crescere il riquadro e ballare tutta la fila. */
.form-riga .lab-articolo { display: flex; gap: 8px; align-items: baseline; }
.form-riga .lab-articolo > a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.form-riga .lab-articolo > a:hover { text-decoration: underline; }
/* il codice riconosciuto si vede subito: grassetto dentro la casella */
.form-riga input.art-scelto { font-weight: 700; }
/* campo con l'etichetta sopra, in una riga di campi affiancati (testata della ricezione) */
/* 5/08 (Cris: «che carattere ti sei inventato qui? deve esserci uniformita' di caratteri»):
   questi campi avevano un font tutto loro — etichetta .8em e input a 1.25rem, cioe' quasi il
   40% piu' grandi di ogni altro campo del programma. Ora usano le misure standard: etichetta
   come `label` (.78rem) e input come `input` (.9rem, dalla regola generale). */
.campo-inline { display: inline-flex; flex-direction: column; gap: 4px; margin-right: 12px;
                font-size: .78rem; color: var(--mut); }
.campo-inline > input { opacity: 1; }
.banner-esito { padding: 8px 12px; border-radius: 6px; margin: 8px 0; display: flex;
                justify-content: space-between; align-items: center; gap: 10px; }
.banner-esito.ok { background: #e8f5e9; border: 1px solid #7cb87c; color: #1e4e21; }
.banner-esito.errore { background: #fdecea; border: 1px solid #d88; color: #7a1c14; }
/* 17/08 — L'ERRORE SI VEDEVA COME UN SUCCESSO SU 36 PAGINE.
   Trentasei template scrivono `class="banner {{ 'errore' if msg.startswith('Errore') }}"`,
   ma nel foglio di stile esisteva SOLO `.banner-esito.errore`: `.banner` e `.banner.errore`
   non erano dichiarati da nessuna parte, quindi la riga usciva senza colore e senza cornice
   — un rifiuto e una conferma identici. La convenzione di casa e' il banner rosso
   sull'errore: qui sotto c'e', e vale anche per la classe `errore` da sola (che alcune
   pagine usano per un avviso in linea, fuori dal banner). */
.banner { padding: 8px 12px; border-radius: 6px; margin: 8px 0;
          background: #eef4ff; border: 1px solid #c7d9f5; color: #1c3a63; }
.banner.errore, p.errore, .errore { background: #fdecea; border: 1px solid #d88;
                                    color: #7a1c14; }
/* 16/09 — L'AVVISO: non e' un errore (il gesto e' andato), ma qualcosa resta a meta' e chi
   legge lo deve vedere. Giallo, come in officina: prima usavo `banner avviso` senza che la
   classe esistesse, ed e' lo stesso sbaglio del 17/08 raccontato qui sopra. */
.banner.avviso { background: #fff8e1; border: 1px solid #e0b84c; color: #6b4a06; }
p.errore { padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.banner-esito .chiudi { background: none; border: none; cursor: pointer; color: inherit;
                        opacity: .6; font-size: 1.05em; padding: 0 4px; line-height: 1; }
.banner-esito .chiudi:hover { opacity: 1; }
.btn-ghost { background: none; border: none; cursor: pointer; color: var(--mut, #888);
             font-size: 1em; padding: 2px 6px; line-height: 1; }
.btn-ghost:hover { color: #b00; }

/* Corridoio #5 (scadenzario per soggetto): la posizione netta parla col colore, non col
   segno matematico. Verde = a nostro credito, rosso = a nostro debito, grigio = in pari.
   Solo presentazione: la convenzione dei segni vive in _posizioni_nette (routes_gestionale). */
.pos-netta { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-netta.credito { color: #1e7e34; }
.pos-netta.debito { color: #b02a1c; }
.pos-netta.pari { color: var(--mut, #888); font-weight: 400; }
/* Prezzi unitari a TUTTI i decimali significativi (un netto reale vale 0,5186: arrotondarlo
   a video mentirebbe sul dato — decisione corridoio #4, confermata al #5). La classe marca
   l'eccezione: lo smoke dei decimali (f5_smoke_schede) salta cio' che sta dentro dec4. */
.dec4 { font-variant-numeric: tabular-nums; }

/* Tabelle: ordinamento (helper unico static/js/tabelle.js — spec UI, principio 8).
   Intestazioni cliccabili per ordinare (freccia ↑/↓); i filtri stanno SOLO nella barra
   in alto delle liste (server-side, rifacimento F6). Solo variabili esistenti. */
th.tbl-ordinabile { cursor: pointer; user-select: none; }
th.tbl-ordinabile:hover { color: var(--acc); }
.tbl-freccia { color: var(--acc); font-size: .95em; }

/* FASE B.2 - schede anagrafiche (soggetto/articolo): testata fissa + TAB TEMATICI a nav
   di link ?tab=... (server-side, niente JS) + griglia campi etichetta/valore + blocco
   "Mostra altro" (details/summary nativo) per i campi rari del censimento v2. */
.tab-nav { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  margin:14px 0 16px; }
.tab-nav a { padding:8px 14px; border-radius:8px 8px 0 0; color:var(--mut);
  text-decoration:none; font-size:.9rem; border:1px solid transparent; border-bottom:none; }
.tab-nav a:hover { color:var(--acc); background:var(--acc-soft); }
.tab-nav a.attiva { color:var(--acc); font-weight:600; background:var(--card);
  border-color:var(--line); position:relative; top:1px; }
.campi { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
  gap:10px 22px; margin:0 0 14px; }
.campi .et { display:block; font-size:.7rem; color:var(--mut); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:1px; }
.campi .val { font-size:.92rem; overflow-wrap:anywhere; }
.cod { color:var(--mut); font-size:.85em; }
details.mostra-altro { margin:8px 0 14px; }
details.mostra-altro > summary { cursor:pointer; color:var(--acc); font-size:.85rem;
  list-style:none; }
details.mostra-altro > summary::before { content:"\25B8 "; font-size:.75rem; }
details.mostra-altro[open] > summary::before { content:"\25BE "; }
details.mostra-altro > .campi { margin-top:10px; }
/* 14/10/2026 - le sezioni richiudibili di una pagina (Piani di confezionamento: «Crea un
   piano» e «Copertura vs budget»): una card che si chiude cliccando il suo titolo. */
details.sezione-richiudibile > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:8px; }
details.sezione-richiudibile > summary::-webkit-details-marker { display:none; }
details.sezione-richiudibile > summary::before { content:"B8"; color:var(--mut);
  font-size:.8rem; transition:transform .15s; }
details.sezione-richiudibile[open] > summary::before { transform:rotate(90deg); }
details.sezione-richiudibile > summary > h2 { margin:0; }
details.sezione-richiudibile[open] > summary { margin-bottom:12px; }
details.sezione-richiudibile > summary:hover > h2 { color:var(--acc); }

/* 9/09 (Cris, pagina Note standard: «ma non c'e' il modo di aggiungere una nuova nota??»):
   le fisarmoniche che aprono un FORM DI CREAZIONE erano invisibili — testo arancio da .85rem
   con la freccina, identico a un titolo di sezione. Con la classe `azione` il sommario
   diventa un PULSANTE vero col «+» (e il «-» quando e' aperto). Le fisarmoniche di sola
   lettura («Mostra altro», «Blocchi (3)», «Vincoli e filtri avanzati») restano come erano:
   non sono azioni, non devono sembrare bottoni. */
details.mostra-altro.azione > summary {
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px;
  border:1px solid var(--acc); border-radius:6px; background:var(--bg2);
  color:var(--acc); font-size:12.5px; font-weight:700; line-height:1;
  -webkit-user-select:none; user-select:none; }
details.mostra-altro.azione > summary::-webkit-details-marker { display:none; }
details.mostra-altro.azione > summary::before { content:"+"; font-size:1.05rem; }
details.mostra-altro.azione[open] > summary::before { content:"\2212"; }
details.mostra-altro.azione > summary:hover { background:var(--acc-soft); }
details.mostra-altro.azione > summary:focus-visible { outline:2px solid var(--acc-soft);
  outline-offset:1px; }
details.mostra-altro.azione[open] > summary { margin-bottom:12px; }
.scheda-form { border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  margin:0 0 16px; background:var(--bg2); }
.scheda-form legend, .scheda-form .tit { font-size:.72rem; text-transform:uppercase;
  letter-spacing:1px; color:var(--mut); padding:0 4px; }

/* ===== GRIGLIA REIMPAGINAZIONE (scocca mockup 22/07/2026) =====
   Rimpiazza le vecchie .riga flex con flex-basis inline: ogni blocco di campi
   sta in una .form-grid a 12 colonne e ogni .campo riceve la sua .col-N.
   Niente stili inline di larghezza nei template reimpaginati. */
.form-grid { display:grid; grid-template-columns:repeat(12, 1fr);
  gap:16px 18px; align-items:start; }
/* 6982 (Cris 14/08): i campi USCIVANO DALLA PAGINA. `.campo` porta un min-width:150px
   (serve al vecchio layout flex): dentro la griglia a 12 colonne quel minimo impediva
   alle celle strette (col-1) di rimpicciolirsi, la somma superava la larghezza e le
   ultime colonne finivano fuori schermo. Nella griglia la cella si adatta alla sua
   quota; il campo resta leggibile perche' sotto i 900px tutto passa a tutta larghezza. */
.form-grid > .campo { min-width:0; }
/* 25/09/2026 (Cris, con l'anteprima del gesto KIT davanti: «non so se capisci») - CIO' CHE
   NON E' UN CAMPO OCCUPA TUTTA LA RIGA. Nella pagina di riparazione del Limbo l'anteprima del
   gesto (banner del riassunto, elenco degli avvisi, tabella prima/dopo, tabella dei numeri,
   spunta di conferma e tasti) nasce DENTRO la .form-grid del modulo: senza una .col-N ogni
   pezzo finiva in UNA cella su dodici e la pagina si leggeva a colonne di quattro parole.
   Un banner, una tabella o un elenco dentro una griglia di campi non hanno una larghezza
   di campo: stanno a tutta riga, come le azioni. */
.form-grid > .banner, .form-grid > .table-scroll, .form-grid > table,
.form-grid > ul, .form-grid > p, .form-grid > .azioni { grid-column:1 / -1; }
/* PC005 (Cris 16/09/2026): «allarga questo campo altrimenti non vedo la data completa».
   Con il minimo della cella azzerato qui sopra, una casella di data in una colonna stretta
   si accorcia fino a tagliare l'anno: si legge «16/09/» e l'anno non c'e' piu'. Una data
   scritta a meta' non e' un dettaglio di bellezza, e' un dato che non si puo' controllare.
   Il minimo va sulla CASELLA, non sulla cella: la griglia resta libera di adattarsi, e
   sotto i 900px tutto passa comunque a tutta larghezza. */
.form-grid input[type="date"] { min-width:132px; }
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.input-group { display:flex; gap:8px; }
.input-group input { flex:1 1 auto; }
.checkbox-group { display:flex; gap:18px; align-items:center; min-height:36px; flex-wrap:wrap; }
.checkbox-group label { display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.checkbox-group input { width:16px; height:16px; }
.azioni { display:flex; justify-content:flex-end; gap:10px; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--line); }
@media (max-width:900px) { [class*="col-"] { grid-column:span 12; } }
/* Hub MRP (scocca mockup): griglia di link-card */
.hub-sec { font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--mut);
  margin:18px 0 8px; }
.hubgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:900px) { .hubgrid { grid-template-columns:1fr; } }
.hub-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; text-decoration:none; color:inherit; }
.hub-card:hover { border-color:var(--acc); }
.hub-card .t { font-weight:600; color:var(--acc); margin-bottom:4px; }
.hub-card .d { font-size:.85rem; color:var(--mut); }

/* ================================================================== */
/* TASK 2001 — BARRA FILTRI: solo estetica (nessun cambio ai campi).  */
/* La classe .filtri va sul <form method="get"> delle liste; la       */
/* .form-grid interna diventa trasparente (display:contents) e i      */
/* .campo si dispongono in fila con le azioni a destra.               */
/* ================================================================== */
.filtri { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  background:#FBFAF6; border:1px solid #E2DFD5; border-radius:8px;
  padding:12px 14px; margin-bottom:14px; }
.filtri .form-grid { display:contents; }
.filtri .campo { flex:1 1 170px; min-width:150px; }
.filtri .campo > label { font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8A8275; margin-bottom:4px; }
/* IL PUNTO CHIAVE: il font NON si eredita nei controlli di form */
.filtri input, .filtri select, .filtri button {
  font-family:inherit; font-size:13px; color:var(--txt);
  height:32px; box-sizing:border-box;
  border:1px solid #D8D4C8; border-radius:6px; background:#fff; padding:0 10px; }
.filtri input, .filtri select { width:100%; }
.filtri input::placeholder { color:#A8A093; }
/* freccia coerente SOLO sui select rimasti nativi (data-nocombo);
   i select trasformati da combobox.js hanno gia' la loro .combo-arrow */
.filtri select { padding-right:26px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238A8275' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }
/* eccezioni: multi-selezione, spunte, casella interna del combo multiplo */
.filtri select[multiple] { height:auto; min-height:32px; padding:6px 10px;
  background-image:none; }
.filtri input[type=checkbox], .filtri input[type=radio] { height:auto; width:auto; }
.filtri .combo-input { padding-right:26px; }
.filtri .combo-box { min-height:32px; border-color:#D8D4C8; }
.filtri .combo-input-multi { height:auto; border:none; }
.filtri input:focus, .filtri select:focus {
  outline:2px solid rgba(233,78,15,.35); outline-offset:1px; border-color:var(--acc); }
/* larghezze relative (si assegnano ai .campo) */
.filtri .f-articolo { flex:2 1 300px; }
.filtri .f-media    { flex:1 1 170px; }
.filtri .f-stretta  { flex:0 1 130px; }
/* azioni DENTRO la barra, allineate a destra (via il filetto del form lungo) */
.filtri .azioni { display:flex; align-items:center; gap:8px; margin:0 0 0 auto;
  padding-top:0; border-top:none; }
.filtri button, .filtri .btn-primario { height:32px; padding:0 20px; border:0;
  font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex;
  align-items:center; background:var(--acc); color:#fff; }
.filtri .azioni .btn { height:32px; display:inline-flex; align-items:center;
  padding:0 12px; border:1px solid #D8D4C8; border-radius:6px; background:#fff;
  color:#5A5145; font-size:12.5px; font-weight:600; }

/* 07/10/2026, Cris su Risultati clienti: i filtri che comandano tutta la pagina restano in vista
   mentre si scorre, «come una sorta di blocca riga in excel», per cambiare un grafico senza
   risalire in cima. La classe va sulla .card che contiene il form .filtri. Solo da 1200 px di
   larghezza e 600 di altezza: la barra laterale si prende 256 px e sotto i 1200 i campi vanno a
   capo su tre righe, una barra alta piu' di meta' di uno schermo basso; li' scorre con la pagina.
   z-index 30: sopra le testate delle tabelle (2) e le maniglie delle colonne (4), sotto il punto
   interrogativo e il manuale (60-80). Le ancore che seguono la barra (la paginazione torna su
   #prog e #dett) si fermano sotto: 260 px coprono la barra quando i campi stanno su due righe,
   come da 1200 px in su. */
@media (min-width:1200px) and (min-height:600px) {
  .card.filtri-fissi { position:sticky; top:0; z-index:30;
    box-shadow:0 6px 12px -6px rgba(16,24,40,.18); }
  .card.filtri-fissi > .sub { margin-bottom:0; }
  .card.filtri-fissi ~ [id] { scroll-margin-top:260px; }
}

/* 🔴 UNA BARRA DI TASTI FUORI DALLA BARRA DEI FILTRI (Cris, 10/09/2026: «ma ti sei drogato
   che hai messo i tasti giganti? Mettili della stessa grandezza del tasto Filtra»).
   Due difetti in uno, e il secondo e' quello che fa il danno:
   1. fuori da `.filtri` i tasti non prendono nessuna misura: crescono col loro contenuto e
      vengono piu' grandi di «Filtra», che invece e' fissato a 32 px;
   2. `.azioni` e' un flex SENZA `align-items`, quindi vale `stretch`: basta infilare in
      quella riga un elemento piu' alto — una tendina, per dire — e TUTTI i tasti si stirano
      alla sua altezza. E' successo aggiungendo «Ordina per»: tre tasti alti il doppio.
   Questa classe mette la riga in riga: stessa altezza di «Filtra», allineata al centro, e
   niente stiramenti qualunque cosa ci si metta dentro. */
.azioni-compatte { display:flex; align-items:center; justify-content:flex-start;
  gap:10px; margin-top:0; padding-top:0; border-top:none; flex-wrap:wrap; }
.azioni-compatte .btn, .azioni-compatte button, .azioni-compatte .btn-primario {
  height:32px; padding:0 16px; border-radius:6px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; white-space:nowrap; }
.azioni-compatte .btn-primario { font-weight:700; }
.azioni-compatte select { height:32px; padding:0 8px; font-size:12.5px; }
.azioni-compatte label { display:inline-flex; align-items:center; gap:6px; margin:0;
  white-space:nowrap; }
/* i testi di servizio dentro la barra non portano il loro margine: `.sub` ne ha 28 px sotto,
   e in un flex quel margine entra nell'altezza della riga — la barra veniva alta 49 px per
   colpa di una scritta alta 21. */
.azioni-compatte .sub { margin:0; }

/* ================================================================== */
/* TASK 2001 — TABELLE DATI: densita', testata fissa, zebrato.        */
/* Il wrapper nei template diventa <div class="table-scroll tbl-scroll">*/
/* (table-scroll: cosi' base.html NON aggiunge un secondo wrapper).   */
/* ================================================================== */
.tbl-scroll { overflow:auto; max-height:620px; margin-bottom:4px;
  border:1px solid #E2DFD5; border-radius:8px; }
.tbl-scroll table { border-collapse:separate; border-spacing:0;
  font-size:12.5px; line-height:1.3; }
.tbl-scroll th, .tbl-scroll td { padding:5px 12px;
  border-bottom:1px solid #F0EEE7; font-size:inherit; }
/* testata fissa: la prima riga di <th> resta in vista durante lo scroll
   (separate e' obbligatorio: con collapse i bordi sticky spariscono) */
.tbl-scroll tr:first-child th { position:sticky; top:0; z-index:2;
  background:#F7F5EE; border-bottom:1px solid #DCD8CC;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; }
/* zebrato: prima riga dati bianca, poi alternato */
.tbl-scroll tr:nth-child(odd):not(:first-child) { background:#FBFAF6; }
/* l'hover delle righe cliccabili deve VINCERE sullo zebrato (ordine sorgente) */
.tbl-scroll tr[data-href]:hover { background:rgba(233,78,15,.06); }
/* colonna-chiave sticky: PRONTA ma da applicare solo dove la tabella
   scrolla in orizzontale (si aggiunge class="col-key" a th/td) */
.tbl-scroll th.col-key, .tbl-scroll td.col-key { position:sticky; left:0; z-index:1;
  background:#fff; border-right:1px solid #E6E3DA; box-shadow:1px 0 0 #E6E3DA;
  white-space:nowrap; }
.tbl-scroll tr:nth-child(odd):not(:first-child) td.col-key { background:#FBFAF6; }
.tbl-scroll tr:first-child th.col-key { z-index:3; background:#F7F5EE; }

/* ================================================================== */
/* TASK 2001-bis — COMBOBOX VESTITO: l'input e la lista che           */
/* combobox.js genera sono HTML nostro (non il popup di sistema):     */
/* dentro la barra filtri devono essere IDENTICI agli altri campi     */
/* (32px, stesso font/bordo/raggio/freccia). Specificita' minima      */
/* (0,2,0): vince sugli stili inline di base.html, che nel documento  */
/* vengono DOPO questo foglio.                                        */
/* ================================================================== */
.filtri .combo { display:block; }
.filtri .combo-input {
  font-family:inherit; font-size:13px; color:var(--txt);
  height:32px; box-sizing:border-box; width:100%;
  border:1px solid #D8D4C8; border-radius:6px; background:#fff;
  padding:0 26px 0 10px; }
.filtri .combo-input::placeholder { color:#A8A093; }
.filtri .combo-input:focus {
  outline:2px solid rgba(233,78,15,.35); outline-offset:1px; border-color:var(--acc); }
/* stessa freccia dei select nativi: il glifo ▾ sparisce (font-size:0)
   e al suo posto c'e' lo stesso chevron SVG; l'area di clic resta 16px */
.filtri .combo-arrow { right:8px; width:16px; height:16px; font-size:0; line-height:0;
  opacity:1; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238A8275' stroke-width='1.6'/></svg>") no-repeat center; }
/* combo a selezione multipla: la scatola delle chip al posto del campo */
.filtri .combo-multi .combo-box { min-height:32px; padding:3px 26px 3px 6px;
  border:1px solid #D8D4C8; border-radius:6px; background:#fff; }
.filtri .combo-input-multi { font-family:inherit; font-size:13px; height:auto;
  border:none; background:transparent; }
/* lista aperta: coerente OVUNQUE (bianco, bordo, voce evidenziata leggibile) */
.combo .combo-list { background:#fff; color:var(--txt); border:1px solid #D8D4C8;
  border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.12); font-size:13px; }
.combo .combo-item { padding:6px 10px; }
.combo .combo-item:hover { background:#FCEDE4; }
.combo .combo-item.sel { font-weight:700; color:var(--acc); }
.combo .combo-vuoto { padding:6px 10px; color:#8A8275; }

/* 🔴 25/09/2026 (Cris, sulla tendina «Vettore» dell'ordine 18107): «la tendina taglia di
   molto le scritte. Un po' non possiamo farci nulla ma almeno allarga fino ai limiti della
   larghezza concessa agli altri campi e rimpicciolisci leggermente i punti tipografici, così
   il carattere è leggermente più piccolo ma si vede quasi tutto».
   `tendina-fitta` si mette sul .campo che contiene una tendina d'archivio dalle voci lunghe
   (codice + ragione sociale + indirizzo): il carattere della casella e delle voci scende di
   poco e l'interlinea si stringe, così in riga ci sta più testo. La LARGHEZZA non sta qui:
   la fa il campo (la sua col-N nella griglia) con `data-largo="100%"` sulla tendina, perché
   l'involucro del combobox non deve mai essere più largo del posto che ha. */
.tendina-fitta .combo-input, .tendina-fitta select, .tendina-fitta input[type="text"] {
  font-size:.82rem; }
.tendina-fitta .combo-list { font-size:12px; }
.tendina-fitta .combo-item { padding:5px 8px; }

/* TASK 2001 — PAGINAZIONE (macro _paginazione.html) */
.pag { display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin:10px 0 0; font-size:12px; color:#6B6357; }
.pag a, .pag span { min-width:28px; height:28px; padding:0 8px; display:inline-flex;
  align-items:center; justify-content:center; border:1px solid #DCD8CC; background:#fff;
  color:#3A322A; border-radius:5px; font-size:12px; font-weight:500;
  text-decoration:none; font-variant-numeric:tabular-nums; }
.pag a:hover { background:#F7F5EE; text-decoration:none; }
.pag .attiva { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700; }
.pag .off { color:#BFB9AC; background:#F4F2EC; cursor:default; }
.pag .ellissi { border:none; background:transparent; color:#A69E90; }

/* ---- TASK 2005: colonne ridimensionabili con memoria (manico sulle intestazioni) ---- */
.tbl-scroll thead th { overflow: visible; }
.tbl-scroll .col-manico {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 4; -webkit-user-select: none; user-select: none;
}
.tbl-scroll .col-manico:hover,
.tbl-scroll .col-manico:active { background: rgba(226,99,44,.28); border-radius: 2px; }
.tbl-scroll table.col-fisse td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- TASK 2007: la riga-campi non deve poggiare sulla tabella sottostante ---- */
.allegati form.riga { margin-bottom: 12px; }
.allegati .campo select, .allegati .campo input {
  height: 32px; box-sizing: border-box;
}
/* stessa protezione ovunque un form a riga preceda direttamente una tabella */
form.riga + table, form.riga + .tbl-scroll, form.riga + .table-scroll {
  margin-top: 12px;
}

/* ---- TASK 2005-bis: manico visibile anche nei contenitori .table-scroll ---- */
.table-scroll .col-manico {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 4; -webkit-user-select: none; user-select: none;
}
.table-scroll .col-manico:hover,
.table-scroll .col-manico:active { background: rgba(226,99,44,.28); border-radius: 2px; }
.table-scroll table.col-fisse td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 2005-ter: il manico dell'ULTIMA colonna non sporge (via la barra fantasma) ---- */
.tbl-scroll th:last-child .col-manico,
.table-scroll th:last-child .col-manico { right: 0; }

/* ---- 2005-quater: il manico SI VEDE (linea sul bordo colonna, arancione al passaggio) ---- */
.tbl-scroll .col-manico, .table-scroll .col-manico { width: 13px; right: -6px; }
.tbl-scroll th:last-child .col-manico,
.table-scroll th:last-child .col-manico { width: 10px; right: 0; }
.tbl-scroll .col-manico::after, .table-scroll .col-manico::after {
  content: ""; position: absolute; top: 18%; bottom: 18%; right: 5px; width: 1px;
  background: #C9C4B8;
}
.tbl-scroll .col-manico:hover, .table-scroll .col-manico:hover,
.tbl-scroll .col-manico:active, .table-scroll .col-manico:active { background: transparent; }
.tbl-scroll .col-manico:hover::after, .table-scroll .col-manico:hover::after,
.tbl-scroll .col-manico:active::after, .table-scroll .col-manico:active::after {
  background: #E2632C; width: 3px; right: 4px; border-radius: 2px;
}

/* ---- 01/10/2026 (KZ4, Cris: «le colonne non si stringono/allargano»): il manico si VEDE
   in ogni colonna, non solo nell'ultima. Le intestazioni sono sticky con z-index:2, quindi
   ognuna fa un suo strato e la cella che viene DOPO copre quanto le sporge sopra: la linea
   del manico (2005-quater) cadeva 1px oltre il bordo, dentro la cella accanto, e restava
   coperta — si vedeva solo quella dell'ultima colonna, e la colonna sembrava ferma (il
   trascinamento funzionava, ma solo afferrando un punto che non si vedeva). Ora il manico
   sta tutto DENTRO la sua intestazione, con la linea sul bordo destro. ---- */
.tbl-scroll .col-manico, .table-scroll .col-manico,
.tbl-scroll th:last-child .col-manico,
.table-scroll th:last-child .col-manico { width: 10px; right: 0; }
.tbl-scroll .col-manico::after, .table-scroll .col-manico::after { right: 1px; }
.tbl-scroll .col-manico:hover::after, .table-scroll .col-manico:hover::after,
.tbl-scroll .col-manico:active::after, .table-scroll .col-manico:active::after { right: 0; }

/* ================================================================== */
/* 11/09/2026 — PAGINA «PIANI DI PRODUZIONE»: la lista era illeggibile */
/* Cris: «graficamente e' orribile. Allinea meglio la parte di         */
/* visualizza - estrazione excel ma in generale fai in modo che sia    */
/* fatta meglio». Non erano gusti, erano quattro difetti veri:         */
/*  1. la colonna dei comandi andava a capo («Visualizza →  ·          */
/*     Estrazione Excel» spezzato su due righe): non aveva ne' una     */
/*     larghezza sua ne' il divieto di andare a capo;                  */
/*  2. le righe erano alte una diversa dall'altra, perche' nella cella */
/*     della data stavano impilati un modulo, un tasto e due scritte;  */
/*  3. i numeri erano allineati a sinistra come i testi, quindi le     */
/*     migliaia non si confrontavano a colpo d'occhio;                 */
/*  4. l'avviso dei kit era un paragrafo a tutta larghezza che         */
/*     spezzava in due la lettura della tabella.                       */
/* Niente stile inventato: tabella di casa (.tbl-scroll), tasti di     */
/* casa (.azioni-compatte), pastiglie di casa (.badge).                */
/* ================================================================== */

/* 🔴 UN <a class="btn"> FUORI DALLA BARRA FILTRI NON AVEVA NESSUNO STILE. Il foglio
   dichiarava solo `.filtri .azioni .btn`: dappertutto altrove quella classe non esisteva e
   il tasto usciva come una scritta in grassetto — e' cosi' che «Esporta Excel anomalie» ed
   «Excel» sembravano testo e non si capiva che si potevano premere. La regola sta dentro
   `.azioni-compatte` e non su `.btn` nudo di proposito: nel programma ci sono 245 `.btn`,
   quasi tutti su <button> che hanno gia' il loro colore, e una regola generale li
   ridipingerebbe tutti in una volta. */
.azioni-compatte a.btn { border:1px solid #D8D4C8; border-radius:6px; background:#fff;
  color:#5A5145; text-decoration:none; }
.azioni-compatte a.btn:hover { background:#F7F5EE; text-decoration:none; }

/* le finestre delle campagne: una pastiglia per campagna invece di un paragrafo unico */
.pastiglie { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.badge.pastiglia { background:#FBFAF6; border:1px solid #E2DFD5; color:#5A5145;
  font-size:12px; padding:4px 10px; }

/* la cella della data: campo + tasto + «fino al» su UNA riga sola, misure della barra filtri */
.riga-data { display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.riga-data input[type=date] { width:auto; height:28px; padding:2px 6px; font-size:12.5px;
  border:1px solid #D8D4C8; }
.riga-data button { height:28px; padding:0 12px; font-size:12px; cursor:pointer; }
.riga-data .sub { margin:0; white-space:nowrap; }
/* la nota di un estemporaneo non deve allargare la colonna: si taglia e resta intera nel
   suggerimento del passaggio del mouse (l'attributo title, che c'e' sempre) */
.nota-breve { display:inline-block; max-width:16ch; overflow:hidden; text-overflow:ellipsis;
  vertical-align:bottom; }
/* la campagna: colonna stretta con i puntini, nome intero nel suggerimento */
td.col-campagna { max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* le pastiglie di stato non si spezzano mai a meta' */
td.col-stato { white-space:nowrap; }
td.col-stato .badge { margin-right:4px; }

/* i comandi di riga: UNA colonna sola, che non va a capo */
th.cella-azioni, td.cella-azioni { white-space:nowrap; text-align:right; }
td.cella-azioni a { color:var(--acc); }
td.cella-azioni .sep { color:#C9C4B8; margin:0 8px; }

/* l'avviso dei kit: una riga compatta attaccata al piano, non un paragrafo che spacca la
   tabella. Il contenuto NON si perde: i primi kit si leggono, tutti stanno nel title della
   riga, e l'elenco completo e stampabile e' nell'Excel dei kit mancanti. */
tr.riga-scoperta > td { background:#FEF6F5; }
/* 24/09/2026 — LA RIGA VERDE DEL LIMBO (verdetto di Cris): nella vista «Prelievo in corso» la
   missione con TUTTI i componenti prenotati si vede a colpo d'occhio, perche' da quel momento
   lotto e scadenza sono completi e l'etichetta puo' partire. Stesso verde di `.badge.verde`. */
tr.riga-prenotata > td { background:#e8f5e9; }
/* 15/10/2026 — LA RIGA ROSSA DI SPEDIZIONI: l'approntamento e' a 2 giorni lavorativi o meno dalla
   consegna, o dopo. Rosso pieno sulla riga e filo rosso a sinistra: non e' il pallino del rischio
   di ritardo (che resta nella sua colonna) e non si confonde con i pastelli delle altre righe. */
tr.riga-approntamento-rischio > td { background:#F8C9C4; }
tr.riga-approntamento-rischio > td:first-child { box-shadow:inset 4px 0 0 #B3261E; }
tr.avviso-kit > td { background:#FEF6F5; color:#9A2A1E; font-size:11.5px; line-height:1.5;
  padding:0 12px 7px; border-bottom:1px solid #F3D6D1; white-space:normal; }
tr.avviso-kit a { color:#9A2A1E; }
tr.avviso-kit form { display:inline; margin:0; }
tr.avviso-kit button { height:24px; padding:0 10px; font-size:11.5px; border-radius:5px;
  vertical-align:middle; cursor:pointer; }
/* il dettaglio dei kit viene DOPO il gesto da fare: a schermo stretto la tabella scorre in
   orizzontale, e la prima cosa che si legge dev'essere cosa fare, non l'elenco. */
tr.avviso-kit .sub-kit { color:#B06A5E; }
/* 05/10/2026 — il GIALLO: il magazzino del partner non ha risposto, i kit gia' fatti non si
   sono potuti contare. Non e' un rosso (forse i kit ci sono) e non e' un verde (non si sa). */
tr.riga-da-verificare > td { background:#FFFBEB; }
tr.avviso-kit.da-verificare > td { background:#FFFBEB; color:#92400E; border-bottom-color:#FDE68A; }
tr.avviso-kit.da-verificare a { color:#92400E; }
tr.avviso-kit.da-verificare .sub-kit { color:#A16207; }

/* riquadro d'avviso sotto una tabella (piani PENDING senza copertura) */
.avviso-riquadro { border-left:4px solid #ef4444; background:#FEF6F5; border-radius:0 6px 6px 0;
  padding:10px 12px; margin-top:12px; font-size:12.5px; }
.avviso-riquadro a { color:#9A2A1E; }
/* P6 (11/09/2026) — I TASTI DI SERVIZIO DELLA RICEZIONE MERCE («Agg. Lotto», «Aggiungi
   riga», «+ Scegli articolo»). Ogni <button> di casa e' pieno e arancione: tre tasti pieni
   dentro il modulo della ricezione competerebbero con l'unico che REGISTRA. Questi sono in
   filo, e quando non servono restano VISIBILI ma spenti — un tasto che sparisce non lo
   scopre nessuno, e «Agg. Lotto» nasce spento quasi sempre, perche' la quantita' si
   propone gia' uguale al residuo. */
button.btn-chiaro { background:#fff; color:var(--acc); border:1px solid var(--acc);
  padding:5px 12px; font-weight:600; font-size:.82rem; }
button.btn-chiaro:hover { background:#fff4ef; }
button.btn-chiaro:disabled { color:var(--mut, #888); border-color:var(--line, #ddd);
  background:#fafafa; cursor:default; filter:none; }
.ric-resta { margin-left:6px; white-space:nowrap; }
.ric-art-slot { display:inline-flex; gap:6px; align-items:center; }

/* ===================== PAGINA LIMBO PRODUZIONE (PB011, 18/09/2026) =====================
   La pagina del Limbo era cresciuta a strati: quattordici pastiglie in fila, tre riquadri di
   anomalia in mezzo ai contatori, otto titoli. Questa sezione le da' una regia in quattro
   fasce (testata, IL FLUSSO, DA SISTEMARE, I GESTI) e poi le cinque tabelle.
   🔴 OGNI SELETTORE STA SOTTO `.limbo`, e non e' pignoleria: gli stili inline di base.html
   vengono DOPO questo foglio, quindi una regola nuova a classe singola perderebbe a parita'.
   Con `.limbo` davanti la specificita' e' 0,2,0 e vince. Le classi comuni (card, badge, btn,
   btn-primario, sub, riga, campo, banner, table-scroll, tbl-scroll, filtri, form-grid,
   azioni) NON si toccano: le usano tutte le altre pagine.
   🔴 NIENTE overflow / transform / filter sui contenitori nuovi: la lista di combobox.js
   galleggia, e un antenato che ritaglia la spegnerebbe in silenzio (la tendina «Cesto» e
   quella «Abbina a una commessa»).
   Due soli fondi in tutta la pagina: il bianco della card e il beige #FBFAF6 dei box. I tre
   colori di stato stanno SOLO nei pallini. */

/* --- 1. testata: i due tasti di pagina a destra, e sotto la didascalia del giro automatico
       (prima era testo sciolto in mezzo ai contatori e non si capiva a cosa si riferisse) --- */
.limbo .limbo-testata-azioni { display:flex; flex-direction:column; align-items:flex-end;
  gap:6px; }
.limbo .limbo-tasti { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  justify-content:flex-end; }
.limbo .limbo-tasti form { margin:0; }
.limbo .limbo-nota { font-size:12px; color:#737a86; margin:0; line-height:1.45;
  text-align:right; max-width:52ch; }
.limbo .testata-lista { margin-bottom:14px; }
.limbo .testata-lista h3 { margin:0; }
/* la testata di PAGINA si allinea in alto, non al centro: la colonna di destra e' alta due
   righe (i tasti e la didascalia) e col centraggio di casa il titolo finiva SOTTO i tasti —
   visto nella foto a 1600 e a 1100. */
.limbo .limbo-testa { align-items:flex-start; }
/* 🔴 IL TITOLO DI PAGINA HA LA FACCIA DI CASA anche fuori dalla card. In tutto il programma
   l'unica regola per un h2 e' `.card h2` (piccolo, maiuscolo, arancio): questa testata, per
   disegno, NON sta dentro una card, e il titolo usciva come un h2 di default del browser —
   grande, nero, minuscolo — a dieci centimetri da «Il flusso», che invece e' dentro una card
   e resta piccolo e arancio. Due h2 con due facce diverse nella stessa pagina. Qui la regola
   e' copiata identica (stile.css riga 92) e resta sotto `.limbo`: `.card h2` non si tocca. */
.limbo .limbo-testa h2 { font-size:.95rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--acc); margin:0; }
.limbo .card h3 { margin:0 0 3px; }
.limbo .card .sub { margin:0 0 10px; }

/* --- 2. IL FLUSSO: quattro tessere di stato. Il numero grosso e' una PORTA (PB021): si
       clicca e si arriva a cio' che lo scompone; a zero e' grigio e non si clicca. --- */
.limbo .limbo-tessere { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; }
.limbo .limbo-tile { background:#FBFAF6; border:1px solid #E2DFD5; border-radius:8px;
  padding:14px 16px; min-width:0; }
.limbo .limbo-tile .et { font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#8C8474; margin-bottom:7px; }
.limbo .limbo-tile .val { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.limbo .limbo-tile .unita { font-size:.85rem; font-weight:400; color:#737a86; }
.limbo .limbo-tile .det { display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:7px;
  font-size:12.5px; line-height:1.5; color:#737a86; }
.limbo .limbo-porta { font-weight:700; color:#1d1d1b; text-decoration:none;
  font-variant-numeric:tabular-nums; }
.limbo a.limbo-porta:hover { color:var(--acc); text-decoration:underline; }
.limbo .limbo-porta.muta { color:#A8A093; cursor:default; }
.limbo .limbo-porta-et { font-weight:400; color:#737a86; }
.limbo .limbo-porta.muta .limbo-porta-et { color:#A8A093; }
.limbo .limbo-porta.grande { font-size:2rem; font-weight:800; line-height:1.05; }
.limbo .limbo-porta.media { font-size:1.25rem; font-weight:800; line-height:1.25; }
/* 23/09/2026: la riga degli scarichi («Excel») sotto le tessere non c'e' piu': i suoi conti
   sono pastiglie della fascia «Da sistemare», solo sopra zero */

/* 3. DA SISTEMARE: la fascia delle pastiglie e' stata tolta il 24/09/2026 (CA004) */

/* --- 4. I GESTI: le tre cose che una persona viene a fare qui, affiancate. Il pallino 8px
       prima del titolo dice che quella card e' un'anomalia, col codice colore dei pallini. --- */
.limbo .limbo-gesti { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:20px; align-items:start; }
.limbo .limbo-gesti > .card { margin-bottom:0; min-width:0; }
.limbo .limbo-pt { display:inline-block; width:8px; height:8px; border-radius:99px;
  background:#b3261e; margin-right:8px; vertical-align:middle; }
.limbo .limbo-pt.ambra { background:#f59e0b; }
/* «Prelievo finito, produzione no» resta un ELENCO e non una tabella (travestirlo da tabella
   alzerebbe di uno il debito delle tabelle scoperte, che non si alza mai): una riga per
   commessa in un box beige, coi conti a destra e «ne mancano» in rosso. */
.limbo .limbo-elenco { list-style:none; margin:8px 0 0; padding:0; }
.limbo .limbo-elenco > li { background:#FBFAF6; border:1px solid #E2DFD5; border-radius:8px;
  padding:8px 11px; margin-bottom:6px; font-size:12.5px; line-height:1.5; }
.limbo .limbo-elenco .capo { display:flex; flex-wrap:wrap; gap:4px 12px;
  align-items:baseline; justify-content:space-between; }
.limbo .limbo-elenco .conti { font-variant-numeric:tabular-nums; }
.limbo .limbo-elenco .mancano { color:#9A2A1E; font-weight:700; }
.limbo .limbo-elenco .sub { margin:0; }
/* «QUESTA PRODUZIONE E' FINITA»: la tendina dei lotti su una riga INTERA, e sotto il motivo che
   si allarga accanto al tasto. Dentro una colonna della fascia (minmax 340px) i tre pezzi
   andavano a capo come capitava e il tasto primario finiva a filo di un campo stretto. Qui si
   danno solo le PROPORZIONI: `display:flex`, il ritorno a capo, il gap e l'allineamento li
   mette gia' `.card form.riga` di casa, che non si tocca. */
.limbo .limbo-chiudi { row-gap:8px; }
.limbo .limbo-chiudi select { flex:0 0 100%; }
.limbo .limbo-chiudi input[name="motivo"] { flex:1 1 140px; min-width:0; }
.limbo .limbo-chiudi button { flex:0 0 auto; }
/* 🔴 UN <a class="btn"> QUI DENTRO DEVE SEMBRARE UN TASTO. Il foglio da' uno stile alla
   classe `btn` sui LINK solo dentro la barra dei filtri (`.filtri .azioni .btn`) e dentro
   `.azioni-compatte`: altrove un `<a class="btn">` esce come una scritta in grassetto — e' il
   difetto gia' scritto qui sopra, e su questa pagina colpiva tre tasti veri (il «Posticipo
   produzione» della prima card e i due «Excel» in testa ai riquadri delle anomalie: visti
   nella foto, sembravano testo). Le misure sono copiate da `.filtri .azioni .btn`, identiche,
   e la regola resta sotto `.limbo`: la classe comune non si tocca, e il tasto dentro la barra
   dei filtri continua a prendere la sua (che vince per specificita', e dice le stesse cose). */
.limbo a.btn { height:32px; display:inline-flex; align-items:center; padding:0 12px;
  border:1px solid #D8D4C8; border-radius:6px; background:#fff; color:#5A5145;
  font-size:12.5px; font-weight:600; text-decoration:none; }
.limbo a.btn:hover { background:#F7F5EE; text-decoration:none; }
/* 18/09/2026 sera (ok di Cris ai due ritocchi): anche il <button class="btn"> e' un tasto
   SECONDARIO. Il foglio colora di arancio ogni <button> nudo, e «Aggiorna dati logistica» usciva
   identico a «Processa missioni chiuse»: due tasti arancioni affiancati, di cui uno solo chiude
   le commesse per sempre. Stesse misure del link qui sopra; spento resta leggibile ma grigio. */
.limbo button.btn { height:32px; display:inline-flex; align-items:center; padding:0 12px;
  border:1px solid #D8D4C8; border-radius:6px; background:#fff; color:#5A5145;
  font-size:12.5px; font-weight:600; cursor:pointer; }
.limbo button.btn:hover { background:#F7F5EE; filter:none; }
.limbo button.btn:disabled { color:#A8A093; border-color:#E2DFD5; background:#FBFAF6;
  cursor:default; }
/* la via d'uscita della prima card e' un tasto e non l'ultima parola della frase */
.limbo .limbo-gesti a.btn { margin-top:2px; }

/* --- 5. le tabelle: il markup e il wrapper .table-scroll .tbl-scroll restano quelli di casa.
       Qui c'e' solo la barretta dell'avanzamento e i numeri incolonnati. --- */
/* sotto la barra dei filtri, la riga a due lati: il totale a sinistra e «pagina n/m» a destra.
   Con la frase lunga della vista «completate» il numero di pagina finiva in fondo a un
   capoverso di due righe, e a che pagina si e' lo si doveva leggere dentro la frase. */
.limbo .limbo-tot { display:flex; flex-wrap:wrap; gap:4px 16px;
  justify-content:space-between; align-items:baseline; }
.limbo .limbo-tot .pag { flex:0 0 auto; font-variant-numeric:tabular-nums; }
.limbo .limbo-barra { display:inline-block; width:64px; height:6px; background:#F0EEE7;
  border-radius:99px; overflow:hidden; margin-right:7px; vertical-align:middle; }
.limbo .limbo-barra i { display:block; height:100%; max-width:100%; background:var(--acc); }
.limbo .tabnum { font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 🔴 IL «NON VA A CAPO» SI METTE SULLA CELLA, NON SULLA COLONNA. Un numero letto su due
   righe non e' un numero (nella foto a 1600 la colonna «Età» spezzava «3 gg» in due), ma un
   `white-space:nowrap` su TUTTE le celle .num e' una trappola: nei cesti orfani la colonna
   dei cesti porta anche la pastiglia «lotto corretto dal magazzino: era L190926 · 960», e
   con il nowrap quella pastiglia diventava una colonna larghissima che spingeva la tabella
   fuori dalla card, fino a far sovrapporre il testo (visto nella foto, poi rifatta). Percio'
   nowrap sta solo su `.tabnum`, messo a mano dove c'e' un numero e basta: sulla CELLA quando
   la cella porta solo il numero (cesti nati / attesi, n. lotti), e su uno SPAN intorno al solo
   numero quando la cella porta anche una pastiglia (l'avanzamento con «chiusa a mano», l'eta'
   con «vecchia») — la' il nowrap sulla cella teneva insieme numero e pastiglia e mandava la
   tabella allo scorrimento per un testo, che e' la stessa trappola vista dall'altro verso.
   Per la stessa ragione le colonne dei cesti orfani NON si toccano: provate una larghezza
   minima sulla colonna del gesto, la tabella e' uscita dalla card e il gesto e' finito
   dietro lo scorrimento — peggio di una colonna stretta. */
/* i form dentro una cella: campi e tasti alti 30px, cosi' una riga non diventa un muro.
   La `.riga` di casa resta nella lista delle classi — qui si stringono solo gap e misure. */
.limbo .limbo-inline { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; }
.limbo .limbo-inline input, .limbo .limbo-inline select { height:30px; font-size:12.5px;
  width:auto; max-width:100%; }
.limbo .limbo-inline button { height:30px; padding:0 12px; font-size:12.5px; }

/* ================================================================== */
/* LA BARRA DI SELEZIONE — i tre tasti (21/09/2026)                    */
/* ================================================================== */
/* Richiesta di Cris: i tasti «Tutti (N in pagina)» · «Tutti i N del filtro» · «Nessuno»
   della Rettifica DIBA su tutte le tabelle dove le righe si selezionano. Queste otto righe
   stavano ricopiate in un <style> in fondo a quattro pagine: qui sono una volta sola, e le
   pagine nuove non le riscrivono (macro in `_selezione.html`, JS in `barra_selezione.js`).
   I <style> delle quattro pagine di prima restano dove sono — sono identici a questi e non
   si toccano finche' non le si converte una per una.
   I gesti di selezione sono AZIONI DI SERVIZIO (bordo chiaro, come «Excel»): l'unica azione
   piena e' quella che scrive, cosi' l'occhio sa subito qual e' il comando vero.
   🔴 LE REGOLE DEI PEZZI DELLA MACRO NON PENDONO DA `.barra-sel` (rilievo 21/09, curato in
   giornata): `data-sel` e `.sel-conteggio` li scrive SOLO `_selezione.html`, mentre la
   classe sul form e' impaginazione e il contratto non la puo' pretendere. Appese a
   `.barra-sel`, una pagina che copiava le firme e scordava la classe si ritrovava i tre
   tasti resi con la regola globale dei bottoni — pieni, color accento, identici al tasto
   che SCRIVE — e il conteggio con i 28px sotto di `.sub`. Le quattro pagine di prima non
   cambiano di una virgola: le loro regole in <style> sono piu' specifiche (`.barra-sel
   button[data-sel]`), identiche a queste e vengono dopo. */
.col-sel { width: 28px; text-align: center; }
/* la sola regola che resta al form: impaginare la riga dei tasti */
.barra-sel { margin: 6px 0 10px; gap: 8px; align-items: center; flex-wrap: wrap; }
button[data-sel] { height: 32px; padding: 0 12px; border: 1px solid #D8D4C8;
  border-radius: 6px; background: #fff; color: #5A5145; font-size: 12.5px;
  font-weight: 600; cursor: pointer; }
button[data-sel]:hover { background: #F5F2EA; }
/* il conteggio porta la classe `.sub`, che ha 28px di margine sotto: dentro una riga di
   tasti quel margine la sfonderebbe (e' il motivo dei quattro `#xx-conteggio` di prima) */
.sel-conteggio { margin: 0 6px; }
/* «tutti quelli del filtro» acceso: il testo cambia colore, perche' e' l'unico stato in cui
   la selezione e' piu' larga di quello che si vede. Il JS scrive
   `className = 'sel-conteggio sub sel-filtro'`, percio' le due classi si trovano insieme. */
.sel-conteggio.sel-filtro { color: #7a3b00; font-weight: 600; }

/* 24/09/2026 «duplica offerta» — IL TASTO SECONDARIO DENTRO UNA RIGA DI TABELLA. Un
   <button> di casa e' alto 9px+18px di riempimento: messo nella colonna dei comandi
   dell'elenco alzerebbe tutte le righe e griderebbe piu' del numero dell'offerta, che e'
   la porta vera. Qui si aggiungono SOLO misura, peso e cursore: fondo, bordo e colore
   restano quelli di `.badge` (le stesse variabili di tema), perche' la pastiglia «Duplica»
   sta nella STESSA cella della pastiglia «Apri» e due bordi di colore diverso, uno accanto
   all'altro, si vedono. 24/09/2026 (revisione): prima c'erano tre esadecimali presi dalla
   tavolozza di un'altra famiglia — una tavolozza nuova per un tasto solo. */
button.badge { background:var(--bg2); color:var(--txt); font-weight:600; font-size:.78rem;
  padding:2px 8px; border:1px solid var(--line); border-radius:99px; cursor:pointer;
  font-family:inherit; }
button.badge:hover { background:var(--bg); }

/* colonne ridimensionabili: tasto «tutte automatiche» sull'ultima intestazione */
.tbl-scroll .col-reset, .table-scroll .col-reset { position:absolute; top:1px; right:14px; cursor:pointer; font-size:.8rem; line-height:1; opacity:.55; }
.tbl-scroll .col-reset:hover, .table-scroll .col-reset:hover { opacity:1; }
.col-reset[hidden] { display:none; }
.tbl-scroll th.col-reset-posto, .table-scroll th.col-reset-posto { padding-right:30px; }
/* Genera DDT: gesto con motivo dentro un menu a scomparsa, la colonna non si allarga */
details.rinuncia-menu { display:inline-block; margin:2px 0 0; vertical-align:top; }
details.rinuncia-menu > summary { cursor:pointer; list-style:none; display:inline-block; }
details.rinuncia-menu > summary::-webkit-details-marker { display:none; }
details.rinuncia-menu > form { display:flex; flex-direction:column; gap:4px; margin:4px 0 0; width:150px; }
details.rinuncia-menu > form input[name=motivo] { width:100%; box-sizing:border-box; }
/* =====================================================================================
   16/10/2026 — LA SCHEDA DELL'ORDINE (cliente e fornitore): LAYOUT APPROVATO DA CRIS,
   SOLO ESTETICO. Tutte le regole qui sotto partono da `.scheda-ordine`, la classe che
   gest_documento.html mette attorno alla scheda SOLO quando il documento e' un ordine:
   DDT, fatture, note di credito, offerte e ogni altra pagina restano come prima.
   Una sola scala: dati 13px, etichette 11px, intestazioni di tabella 10.5px maiuscolo,
   titoli di sezione 14px, titolo pagina 18px. Un solo tasto arancio pieno (il gesto
   principale dello stato), tutti gli altri a contorno; Elimina in testo rosso.
   ===================================================================================== */
.scheda-ordine .card { padding:16px 20px; margin-bottom:16px; }
.scheda-ordine .scheda-doc { font-size:13px; }
.scheda-ordine .card h2 { font-size:18px; text-transform:none; letter-spacing:0; font-weight:700;
  color:var(--acc); margin:0; line-height:1.35; }
.scheda-ordine h3 { font-size:14px; font-weight:700; letter-spacing:0; margin:16px 0 6px; }
.scheda-ordine .card > h3:first-child { margin-top:0; }
.scheda-ordine h4 { font-size:13px; }
.scheda-ordine label { font-size:11px; margin-bottom:2px; }
.scheda-ordine .sub { font-size:12px; }
.scheda-ordine p.sub { margin:4px 0 8px; }
.scheda-ordine .badge { font-size:11px; padding:1px 7px; }
.scheda-ordine .banner, .scheda-ordine .banner-esito { font-size:12.5px; padding:6px 10px; margin:6px 0; }
.scheda-ordine details > summary { font-size:12.5px; }
.scheda-ordine :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  font-size:13px; padding:5px 8px; }
.scheda-ordine textarea { font-size:13px; }

/* le tabelle: righe basse, intestazioni piccole maiuscole, dati a 13px */
.scheda-ordine table th { font-size:10.5px; letter-spacing:.06em; padding:4px 7px; }
.scheda-ordine table td { font-size:13px; padding:4px 7px; }
.scheda-ordine .tabella-righe td, .scheda-ordine .tabella-righe th { padding:3px 6px; }
.scheda-ordine .tabella-righe td { font-size:13px; }
.scheda-ordine .tabella-righe th { font-size:10.5px; }

/* i tasti: a contorno e compatti... */
.scheda-ordine button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del) {
  background:#fff; color:#5A5145 !important; border:1px solid #D8D4C8; border-radius:6px;
  padding:5px 12px; font-size:12.5px; font-weight:600; line-height:1.4; filter:none; }
.scheda-ordine button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del):hover { background:#F7F5EE; }
.scheda-ordine button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del):disabled { color:var(--mut) !important; opacity:.7; }
.scheda-ordine button.btn-icona { background:#fff; color:#5A5145; border:1px solid #D8D4C8; border-radius:5px;
  padding:1px 7px; font-size:12px; line-height:1.4; }
.scheda-ordine a.btn { padding:5px 12px; font-size:12.5px; }
/* ...un solo arancio pieno: Conferma / CONFERMA E INVIA in bozza, «Emetti fattura» dopo */
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="conferma_invia"],
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="conferma"]:not([data-help]),
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="fattura_ordine"] {
  background:var(--acc) !important; border-color:var(--acc) !important; color:#fff !important;
  font-weight:700; order:10; margin-left:auto; }
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="conferma_invia"]:hover,
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="conferma"]:not([data-help]):hover,
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="fattura_ordine"]:hover { background:#c94209 !important; }
/* «Gira alla logistica» (ordini del sito) resta un gesto forte ma non ruba l'arancio pieno */
.scheda-ordine .scheda-doc form[action$="/azione"] > button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="gira_logistica"] { color:var(--acc) !important; border-color:var(--acc); }
/* le note popup si rispondono come prima: il loro tasto resta arancio */
.scheda-ordine .scheda-doc .nota-popup button.btn-primario:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del) { background:var(--acc) !important; border-color:var(--acc) !important; color:#fff !important; }
/* Elimina in testo rosso */
.scheda-ordine button.del, .scheda-ordine .scheda-doc button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="elimina_bozza"] {
  background:none !important; border:0 !important; color:#b42318 !important; padding:4px 6px;
  font-size:12.5px; font-weight:600; }
.scheda-ordine button.del:hover, .scheda-ordine .scheda-doc button:not(.btn-icona):not(.btn-ghost):not(.chiudi):not(.del)[value="elimina_bozza"]:hover { text-decoration:underline; }

/* la barra delle azioni: una riga, le stampe in un gruppo «PDF», il tasto arancio a destra */
.scheda-ordine form[action$="/azione"] { gap:6px; align-items:center; margin:12px 0 0; padding-top:12px;
  border-top:1px solid var(--line); }
.scheda-ordine .gruppo-pdf { display:inline-flex; align-items:center; order:5; }
.scheda-ordine .gruppo-pdf::before { content:"PDF"; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--mut); margin:0 8px 0 6px; }
.scheda-ordine .gruppo-pdf ~ .gruppo-pdf::before { content:none; }
.scheda-ordine .gruppo-pdf > a.btn { border-radius:0; margin-left:-1px; white-space:nowrap; }
.scheda-ordine .gruppo-pdf > a.btn:first-of-type { border-radius:6px 0 0 6px; margin-left:0; }
.scheda-ordine .gruppo-pdf > a.btn:last-of-type { border-radius:0 6px 6px 0; }
.scheda-ordine .gruppo-pdf > a.btn:only-of-type { border-radius:6px; }

/* la testata: titolo e Nr. esterno sulla stessa riga, i dati in una griglia etichetta/valore */
.scheda-ordine .so-testa { display:flex; align-items:center; justify-content:space-between; gap:8px 16px;
  flex-wrap:wrap; margin-bottom:10px; }
.scheda-ordine .so-testa > h2 { flex:1 1 420px; }
.scheda-ordine .so-testa > form, .scheda-ordine .so-testa > p { margin:0 !important; flex:0 0 auto; }
.scheda-ordine .so-testa > form .campo { flex:0 0 auto !important; display:flex; align-items:center; gap:6px; min-width:0; }
.scheda-ordine .so-testa > form .campo > label { margin:0; white-space:nowrap; }
.scheda-ordine .so-testa > form .campo > input { width:110px; }
.scheda-ordine .so-campi { display:flex; flex-wrap:wrap; gap:8px 28px; margin:2px 0 8px; }
.scheda-ordine .so-campi > div { display:flex; flex-direction:column; min-width:0; }
.scheda-ordine .so-campi .et { font-size:11px; color:var(--mut); }
.scheda-ordine .so-campi .val { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.scheda-ordine .so-campi .val .cod { font-size:13px; }
.scheda-ordine .so-campi > .so-emesso { margin-left:auto; text-align:right; }
.scheda-ordine p.so-coda { margin:0 0 8px; }
/* consegna richiesta / prevista / tassativa + Salva consegna su una riga */
.scheda-ordine form[action$="/consegna"], .scheda-ordine form[action$="/conferma-consegna"] {
  gap:6px 10px; margin:4px 0 6px; }
.scheda-ordine form[action$="/consegna"] label, .scheda-ordine form[action$="/conferma-consegna"] label {
  display:inline-flex; align-items:center; gap:5px; margin:0; font-size:11px; color:var(--mut); }
.scheda-ordine form[action$="/consegna"] input[type="checkbox"] { width:auto; margin:0; }
.scheda-ordine details.mostra-altro { margin:6px 0 10px; }
/* ordine evaso o chiuso: la consegna richiesta e la spunta tassativa sulla stessa riga */
.scheda-ordine p.sub:has(+ #modulo-tassativa) { display:inline-block; margin:4px 16px 6px 0; vertical-align:middle; }
.scheda-ordine #modulo-tassativa { display:inline-flex; vertical-align:middle; }

/* sotto le righe: a sinistra riepilogo, note standard e consegne; a destra il Piede */
.scheda-ordine .so-sotto-righe.con-piede { display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 380px);
  gap:12px 24px; align-items:start; margin-top:8px; }
.scheda-ordine .so-sx { min-width:0; }
.scheda-ordine .so-dx { border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-top:6px; }
.scheda-ordine .so-dx > h3 { margin:0 0 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
.scheda-ordine .so-dx table td, .scheda-ordine .so-dx table th { padding:3px 4px; }
.scheda-ordine dl.so-totali { margin:8px 0 0; padding-top:6px; border-top:1px solid var(--line); }
.scheda-ordine dl.so-totali > div { display:flex; justify-content:space-between; gap:12px; padding:1px 0; font-size:13px; }
.scheda-ordine dl.so-totali dt { color:var(--mut); }
.scheda-ordine dl.so-totali dd { margin:0; font-variant-numeric:tabular-nums; }
.scheda-ordine dl.so-totali > .so-tot { font-weight:700; font-size:14px; margin:4px 0 2px; padding-top:5px; border-top:1px solid var(--line); }
.scheda-ordine dl.so-totali > .so-tot dt { color:var(--txt); }
@media (max-width:1100px) { .scheda-ordine .so-sotto-righe.con-piede { grid-template-columns:minmax(0, 1fr); } }

/* «File andati alla logistica» e' un riquadro bianco come gli altri, in fondo alla scheda */
.scheda-ordine > .card[style*="#f6f8fb"] { background:var(--card) !important; }

/* Annotazioni e Voci di costo affiancate; i due moduli su una riga */
.scheda-ordine .so-affiancate { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:16px;
  align-items:start; margin-bottom:16px; }
.scheda-ordine .so-affiancate > .card { margin-bottom:0; }
@media (max-width:1100px) { .scheda-ordine .so-affiancate { grid-template-columns:minmax(0, 1fr); } }
.scheda-ordine #annotazioni form[action$="/annotazioni/aggiungi"] { margin-top:10px !important; }
.scheda-ordine #voci-costo { position:relative; }
.scheda-ordine #voci-costo > p:has(> a.btn[href$="/trasporto"]) { position:absolute; top:14px; right:20px; margin:0; }
.scheda-ordine #voci-costo > p > a.btn[href$="/trasporto"] { border:0; background:none; padding:0; color:var(--acc); font-size:12px; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
  margin-top:10px; padding:8px 10px; background:#FBFAF6; border:1px solid var(--line); border-radius:8px; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] .form-grid { display:contents; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] .campo { flex:1 1 120px; min-width:0; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] .campo.col-4 { flex:1.4 1 160px; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] .campo.col-2 { flex:.7 1 90px; }
.scheda-ordine #voci-costo form[action$="/voci-costo/aggiungi"] .azioni { margin:0; flex:0 0 auto; }

/* Allegati compatti: il caricamento su una riga, la selezione come link accanto al titolo */
.scheda-ordine #allegati { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; }
.scheda-ordine #allegati > h3 { flex:1 1 auto; margin:0 0 8px; }
.scheda-ordine #allegati > .allegati { display:contents; }
.scheda-ordine #allegati .allegati > * { flex:1 1 100%; order:3; }
.scheda-ordine #allegati .allegati > form[action$="/allegati/zip"] { flex:0 0 auto; order:1; margin:0 0 8px !important;
  gap:10px !important; }
.scheda-ordine #allegati .allegati > form[action$="/allegati/carica"] { order:2; gap:8px !important; align-items:flex-end !important;
  margin:0 0 8px; padding:8px 10px; background:#FBFAF6; border:1px solid var(--line); border-radius:8px; }
.scheda-ordine #allegati form[action$="/allegati/carica"] .campo { flex:1 1 130px !important; min-width:0; }
.scheda-ordine #allegati form[action$="/allegati/carica"] .campo:first-of-type { flex:1.6 1 200px !important; }
.scheda-ordine #allegati form[action$="/allegati/carica"] input[type="file"] { font-size:12px; padding:3px 6px; }
.scheda-ordine #allegati form[action$="/allegati/zip"] button { background:none !important; border:0 !important;
  padding:0 !important; color:var(--acc) !important; font-size:12px; }
.scheda-ordine #allegati form[action$="/allegati/zip"] button[onclick*="(true)"] { order:1; }
.scheda-ordine #allegati form[action$="/allegati/zip"] button[onclick*="(false)"] { order:2; }
.scheda-ordine #allegati form[action$="/allegati/zip"] button[type="submit"] { order:3; font-weight:700; }
.scheda-ordine #allegati form[action$="/allegati/zip"] button[onclick*="(false)"]::before,
.scheda-ordine #allegati form[action$="/allegati/zip"] button[type="submit"]::before { content:"\00B7  "; color:var(--mut); font-weight:400; }
.scheda-ordine #allegati form[action$="/allegati/zip"] > span { order:4; font-size:12px; }
.scheda-ordine #allegati td > br { display:none; }
.scheda-ordine #allegati td .nota-allegato { display:inline-block; max-width:42ch; margin-left:8px !important; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.scheda-ordine #allegati td { white-space:nowrap; }
.scheda-ordine #allegati td a.btn { border:0; background:none; padding:0; color:var(--acc); font-size:12.5px; }
.scheda-ordine #allegati td details > summary { font-size:12px; }