/* VERSIONE_ASSET: 20ott-troppi-pezzi-350 */
:root{
  --blu:#12294a; --blu2:#1b3b68; --blu3:#264e85;
  --sfondo:#eef1f6; --carta:#fff; --bordo:#dde3ec;
  --testo:#16202e; --grigio:#6b7788; --grigio2:#8d99a8;
  --ok:#16794a; --okbg:#e6f4ec;
  --att:#8a5a00; --attbg:#fdf1d8;
  --no:#a3282d; --nobg:#fbe9ea;
  --r:14px;
  --btn-r:999px;
  --btn-shadow:0 2px 5px rgba(18,41,74,.14);
  --btn-shadow-hover:0 5px 12px rgba(18,41,74,.20);
  --btn-focus:#69a8e8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--sfondo); color:var(--testo);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:40px;
}
.wrap{max-width:760px;margin:0 auto;padding:0 14px}
/* 30/09 — IL FOGLIO DEL REPARTO LARGO COME LA STAMPA.
   «devi allargare la visuale perche differenze è tagliato, puoi ingrandirlo
   come nella stampa». Solo il pannello del Caporeparto: 1500px o quanto c'è,
   e sotto i 760 non scende mai — sul telefono resta esattamente come prima. */
body.pannello-largo .wrap{max-width:max(760px,min(1500px,100vw - 24px))}
/* CON LO SCHERMO GRANDE SI USA LO SCHERMO GRANDE.
   «puoi allargare questa finestra per renderla più ordinata» — Francesco,
   21/08. Il tetto era 1.120 px: su un monitor grande metà pagina restava
   bianca, i sei giorni andavano a capo e il foglio del reparto — nove
   colonne — si scorreva di lato pur avendo spazio da vendere. Si allarga a
   scalini, non a tutto schermo: una riga di testo lunga due metri non si
   legge, ma i chip e le tabelle lo spazio se lo prendono. */
@media(min-width:860px){.largo{max-width:1120px}}
@media(min-width:1280px){.largo{max-width:1240px}}
@media(min-width:1500px){.largo{max-width:1440px}}
@media(min-width:1800px){.largo{max-width:1680px}}

/* ---------- barra ruoli ---------- */
.ruoli{background:var(--blu);padding:10px 0 12px;position:sticky;top:0;z-index:30}
.ruoli .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ruoli .wrap::-webkit-scrollbar{display:none}
/* IL MARCHIO — 23/08/2026. «inserisci il logo Di Maria come nel crm».
   Stesso file del CRM, portato a 34 px sul computer e 26 sul telefono per
   renderlo più leggibile. È la versione bianca, nella barra blu in cima —
   com'è nel CRM. Il marchio non fa parte della veste: resta anche a veste
   classica, perché non è uno stile, è l'azienda.
   La barra ora ha due pezzi: il marchio, che non si stringe mai, e i ruoli,
   che scorrono da soli quando non ci stanno. Prima scorreva tutta la riga e
   il logo sarebbe uscito di vista al primo tocco. */
.ruoli .wrap.barraCima{align-items:center;gap:10px;overflow:visible}
.marchio{flex:0 0 auto;display:flex;align-items:center}
.marchio img{height:34px;width:auto;display:block}
/* Tutti i pannelli autorizzati restano visibili anche quando la barra e stretta. */
#barraRuoli{display:flex;gap:6px;flex-wrap:wrap;overflow-x:visible;flex:1 1 auto;min-width:0}
#barraRuoli::-webkit-scrollbar{display:none}
.installaApp{
  flex:0 0 auto;white-space:nowrap;padding:8px 12px;border:1.5px solid rgba(255,255,255,.78);
  border-radius:var(--btn-r);background:#fff;color:var(--blu);font:750 12px/1.25 inherit;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)
}
.installaApp span{font-size:16px;line-height:0;vertical-align:-1px;margin-right:3px}
.installaApp.pronto{box-shadow:0 0 0 3px rgba(105,168,232,.5),0 2px 8px rgba(0,0,0,.18)}
.installaApp[hidden]{display:none!important}
.installaGuida .pop{max-width:390px}
.installaGuida ol{margin:12px 0 18px;padding-left:22px}
.installaGuida li{margin:7px 0}
@media(max-width:640px){.marchio img{height:26px}}
/* dove sparisce la barra dei ruoli sparisce anche il marchio: su carta un
   logo bianco su fondo bianco è un buco */
body.soloFoglio .marchio,body.fogliAparte .marchio,
body.soloFoglio .installaApp,body.fogliAparte .installaApp{display:none}
.ruolo{
  flex:0 0 auto;white-space:nowrap;text-align:center;padding:9px 14px;border-radius:var(--btn-r);
  background:var(--blu2);color:#cfdcee;border:0;font:600 12px/1.25 inherit;cursor:pointer;
}
@media(min-width:760px){.ruolo{flex:1 1 0;font-size:13px;padding:9px 10px}}
.ruolo.on{background:#fff;color:var(--blu)}

@media(max-width:640px){
  #barraRuoli{scrollbar-width:thin;padding-bottom:3px}
  #barraRuoli::-webkit-scrollbar{display:block;height:3px}
  #barraRuoli::-webkit-scrollbar-thumb{background:rgba(255,255,255,.48);border-radius:4px}
}

/* ---------- intestazione sezione ---------- */
.testa{background:var(--blu3);color:#fff;padding:12px 0 14px}
.testa .et{font:700 11px/1 inherit;letter-spacing:.12em;color:#a8c3e6;text-transform:uppercase}
.testa h1{margin:4px 0 2px;font-size:19px;letter-spacing:-.01em}
.testa .sub{color:#c3d6ee;font-size:13px}
.testa select{
  margin-top:9px;width:100%;padding:9px 12px;border-radius:10px;border:1px solid #3c669e;
  background:#1f4478;color:#fff;font:600 14px inherit;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23a8c3e6' stroke-width='2' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ---------- generici ---------- */
.sez{margin:13px 0 6px;font:700 11px/1 inherit;letter-spacing:.1em;color:var(--grigio2);text-transform:uppercase}
.card{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);padding:11px 12px;margin-bottom:8px}
.riga{display:flex;align-items:center;gap:12px}
.cresci{flex:1;min-width:0}
.tit{font-weight:650;font-size:15px}
.meta{color:var(--grigio);font-size:12.5px;margin-top:2px}
.statoConfez{font-weight:700}
.statoConfez.fatto{color:var(--ok)}
.statoConfez.fare{color:var(--att)}
.trasfFiltri{margin-bottom:12px}
.trasfElenco{display:grid;gap:12px}
.trasfCard{margin-bottom:0}
.trasfTesta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.trasfDati{display:grid;grid-template-columns:1fr .7fr 1.3fr;gap:8px;margin:12px 0}
.trasfDati>div,.trasfPassi>div{border:1px solid var(--bordo);border-radius:10px;padding:9px;background:#f8fafc}
.trasfDati span,.trasfPassi span{display:block;color:var(--grigio);font-size:11.5px;margin-bottom:3px}
.trasfDati b{font-size:14px;overflow-wrap:anywhere}
.trasfPassi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.trasfPassi>div.ok{background:var(--okbg);border-color:#c8e8d5;color:var(--ok)}
.trasfPassi>div.ok span{color:var(--ok)}
@media(max-width:650px){.trasfDati,.trasfPassi{grid-template-columns:1fr}.trasfTesta{align-items:center}}
.pill{font:700 10.5px/1 inherit;letter-spacing:.06em;padding:6px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.p-ok{background:var(--okbg);color:var(--ok)} .p-att{background:var(--attbg);color:var(--att)}
.p-no{background:var(--nobg);color:var(--no)} .p-gr{background:#eef1f6;color:var(--grigio)}
.imp{width:44px;height:44px;border-radius:11px;background:#eef3fa;color:var(--blu3);
     display:flex;align-items:center;justify-content:center;font:700 12px inherit;flex:none;text-align:center;line-height:1.1}
button{font:inherit}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex="0"]:focus-visible{
  outline:3px solid #5aa9ff;outline-offset:2px
}
.card[role="button"]{cursor:pointer}
.btn{display:block;width:100%;padding:11px;border:1.5px solid transparent;border-radius:var(--btn-r);background:linear-gradient(135deg,#2f6eb3,var(--blu3));color:#fff;font-weight:750;cursor:pointer;box-shadow:var(--btn-shadow)}
.btn:disabled{background:#d7dee8;color:#8793a3;border-color:#d7dee8;box-shadow:none;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--blu3);border-color:var(--blu3);box-shadow:0 1px 3px rgba(18,41,74,.08)}
.btn.ok{background:linear-gradient(135deg,#21915d,var(--ok));border-color:var(--ok)} .btn.no{background:linear-gradient(135deg,#c83b43,var(--no));border-color:var(--no)}
/* UN TASTO ROSSO CHIARO SI DEVE LEGGERE (29/09/2026).
   `btn sec no` — «Elimina la bolletta», «Togli» — prendeva il fondo rosso da
   `.btn.no` e il testo blu da `.btn.sec`: blu su rosso, illeggibile. Chiaro
   col bordo e la scritta rossi: si capisce che e' un tasto che toglie, e si
   legge. */
.btn.sec.no{background:#fff;color:var(--no);border-color:var(--no);
  box-shadow:0 1px 3px rgba(163,40,45,.1)}
.confermaRossaV .pop{border:3px solid var(--no);background:#fff2f2}
.confermaRossaV .pop h3{color:var(--no)}
.esitoLabPop{border-top:7px solid var(--ok)}
.esitoLabVelo.correzione .esitoLabPop{border-top-color:var(--no)}
.esitoLabEt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);margin-bottom:5px}
.esitoLabPop h3{font-size:23px;margin-bottom:12px;color:var(--ok)}
.esitoLabVelo.correzione .esitoLabPop h3{color:var(--no)}
.esitoLabProdotto{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:12px;background:#f4f7fb;margin-bottom:10px}
.esitoLabProdotto b{font-size:17px}.esitoLabProdotto span{color:var(--grigio);font-size:13px}
.esitoLabDettaglio{padding:12px 13px;border-radius:12px;background:var(--okbg);color:var(--ok);margin-bottom:9px}
.esitoLabVelo.correzione .esitoLabDettaglio{background:var(--nobg);color:var(--no)}
.esitoLabRiga{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid rgba(163,40,45,.14)}
.esitoLabRiga:last-child{border-bottom:0}.esitoLabRiga span{white-space:nowrap;font-weight:800}
.esitoLabFirma{margin-bottom:14px}
.btn.mini{padding:8px;font-size:13px;font-weight:600}
.mini2{flex:none;padding:6px 12px;border:1.5px solid var(--blu3);background:#fff;color:var(--blu3);border-radius:var(--btn-r);font:700 12px inherit;cursor:pointer;box-shadow:0 1px 3px rgba(18,41,74,.08)}
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;margin-top:6px}
.vuoto{text-align:center;color:var(--grigio2);padding:22px 10px;font-size:13.5px}
.dett{color:var(--grigio);font-size:12.5px}
a.link{color:var(--blu3);cursor:pointer;text-decoration:none;font-weight:600}

/* ---------- avanzamento ---------- */
.barra{height:6px;background:#e3e9f1;border-radius:999px;overflow:hidden;margin-top:10px}
.barra i{display:block;height:100%;background:var(--blu3);border-radius:999px}

/* ---------- materiali ---------- */
.mat{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #eef1f5}
.mat:last-child{border-bottom:0}
.spunta{width:26px;height:26px;border-radius:8px;border:2px solid #c3ccd9;background:#fff;flex:none;cursor:pointer;position:relative;margin-top:2px}
.spunta.on{background:var(--ok);border-color:var(--ok)}
.spunta.on::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.qta{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;text-align:right}
.sacchiDett{display:block;margin-top:2px;color:#6c4b00;font-size:10.5px;font-weight:750;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.mk td.mkP .sacchiDett{color:#6c4b00}
.istr{background:#f7f9fc;border-left:3px solid var(--blu3);padding:8px 11px;border-radius:0 8px 8px 0;margin:6px 0;font-size:13.5px}
.istr b{color:var(--blu3)}
.peri{display:inline-block;background:var(--nobg);color:var(--no);font:700 10px inherit;padding:3px 6px;border-radius:5px;margin-left:6px;letter-spacing:.05em}

/* ---------- campi ---------- */
label.cam{display:block;margin:9px 0 4px;font-weight:650;font-size:13px;color:#31415a}
input[type=text],input[type=number],select.cam,textarea{
  width:100%;padding:9px 11px;border:1px solid #ccd5e2;border-radius:10px;font:14.5px inherit;background:#fff;color:var(--testo)
}
.trecol{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}
.modo{padding:8px 4px;border:1.5px solid #ccd5e2;background:#fff;border-radius:var(--btn-r);font:650 12px inherit;color:var(--grigio);cursor:pointer}
.modo.on{border-color:var(--blu3);background:#eef3fa;color:var(--blu3)}
.esito{background:#eef3fa;border-radius:10px;padding:0 11px;display:flex;align-items:center;justify-content:center;
       gap:4px;color:var(--grigio);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.esito b{font-size:17px;color:var(--blu)}

/* ---------- confezionamento ---------- */
.fmt{display:grid;grid-template-columns:1fr 92px 34px;gap:8px;align-items:center;margin-bottom:8px}
.fmt0{display:grid;grid-template-columns:1fr 92px 52px;gap:8px;align-items:center;margin-bottom:4px}
.eti{font-size:11.5px;color:var(--grigio);text-align:center;line-height:1.15}
.sotto{font-size:11.5px;color:var(--grigio);margin:0 0 8px;line-height:1.3}
.sotto b{color:var(--testo);font-weight:650}
.calc{font-size:13px;margin:2px 0 12px;color:var(--blu3);font-weight:650}
.calc span{color:var(--grigio);font-weight:400}
/* le vasche della riga: il numero che dice quanto pesa davvero quella pezzatura */
.calc b.calcV{color:var(--blu3);font-weight:700;font-variant-numeric:tabular-nums}
.calcR{font-size:12.5px;margin:-4px 0 6px}
.resid{font-size:12.5px;margin-top:4px;font-weight:650}
.resid.ok{color:var(--ok)} .resid.no{color:var(--no)}
.campioneConf label{margin-top:0}
.campioneConf input{max-width:180px;font-weight:700;font-variant-numeric:tabular-nums}
/* 28/09 — tre caselle: quanti campioni, che pezzatura (tendina) e con che
   secchiello. Sul telefono una per riga, come tutto il resto. */
.campioneCampi{display:grid;grid-template-columns:150px minmax(200px,340px) minmax(200px,340px);
  gap:12px;align-items:end}
.campioneConf .campioneCampi input,.campioneConf .campioneCampi select{width:100%;max-width:none}
.campioneConf .campioneCampi select{font-weight:600}
/* 28/09 — le rotture: quanti e quale secchiello, due caselle affiancate */
.rottureCampi{grid-template-columns:150px minmax(220px,420px)}
@media(max-width:560px){.rottureCampi{grid-template-columns:1fr}}
/* e nel report, sotto il numero, il nome del secchiello rotto */
.repVoceSec{display:block;font-size:10.5px;color:var(--grigio);font-weight:400;
  margin-top:1px;overflow-wrap:anywhere}
/* il secchiello che arriva dalla pezzatura non si tocca: si legge */
.campioneSecchi{border:1px dashed var(--bordo);border-radius:9px;padding:10px 12px;
  background:#f8fafc;color:var(--blu2);font-size:12.5px;min-height:44px;
  display:flex;align-items:center;overflow-wrap:anywhere}
/* 03/10 — IL CAMPIONE SI PESA: quanto ne ha preso e se sono litri o chili,
   due caselle attaccate perché sono una domanda sola. */
.campioneQta{display:grid;grid-template-columns:1fr 96px;gap:8px;align-items:center}
.campioneConf .campioneQta input,.campioneConf .campioneQta select{width:100%;max-width:none}
/* il conto, con i litri che si copiano in SAP */
.campioneSap{margin-top:10px;padding:9px 12px;border-radius:9px;background:#eef6ff;
  border:1px solid #cfe2fb;color:var(--blu2);font-size:12.5px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.campioneSap b{color:var(--blu3)}
.campioneSapL b{font-size:14.5px}
.campioneSapNo{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.campioneConf .dett{margin-top:7px}
@media(max-width:900px){.campioneCampi{grid-template-columns:150px 1fr}}
@media(max-width:560px){.campioneCampi{grid-template-columns:1fr}}
.xrm{border:0;background:#f3f5f9;color:var(--grigio);border-radius:9px;height:42px;cursor:pointer;font-size:17px}

/* ---------- etichetta ---------- */
.etich{border:2px solid var(--blu);border-radius:12px;padding:16px;background:#fff}
.etich h2{margin:0 0 2px;font-size:20px}
.bolTesta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bolNumeri{text-align:right;display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.bolNumeri span,.bolRiga span,.bolLotto span{font-size:12px;color:var(--grigio);display:block;margin-top:2px}
.sapConf{margin:10px 0 0;padding:8px 10px;border-radius:9px;background:#eef3fa;color:var(--blu3);font-size:12.5px}
.quadra{margin-top:10px;padding:9px 11px;border-radius:9px;font-weight:700;font-size:13px}
.quadra.ok{background:#e8f7ed;color:#197640}.quadra.no{background:#fff1dc;color:#8b5500}
.bolElenco{margin-top:10px;border-top:1px solid var(--riga)}
.bolRiga,.bolLotto{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--riga)}
.bolRiga>div:last-child{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bolLotto input{width:110px;flex:0 0 110px;font-weight:750;text-align:center;font-variant-numeric:tabular-nums}
.bolTot{margin-top:12px;font-size:14px;color:var(--blu3)}
.bolTot.no{color:var(--no);font-weight:700}
@media(max-width:520px){
  .bolTesta{flex-direction:column}
  .bolNumeri{text-align:left}
  .bolRiga{align-items:flex-start}
}
.etich .cod{font:700 13px/1 inherit;letter-spacing:.08em;color:var(--grigio)}
.etich table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
.etich td{padding:5px 0;border-bottom:1px solid #eef1f5}
.etich td:last-child{text-align:right;font-weight:650}
.eanBarcode{margin:14px auto 0;max-width:390px}
.eanBarcode svg{display:block;width:100%;height:auto}
.eanBarcode text{font:6px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.eanManca{margin-top:14px;padding:9px;border:1px dashed #d49a22;border-radius:8px;color:#875a00;text-align:center;font-size:12px}
.trasfDati em{font-style:normal;color:#986400}
.trasfCorpo{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:9px;align-items:stretch}
.trasfBarcodeBox{border:1px solid var(--bordo);border-radius:10px;background:#fff;padding:7px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.trasfBarcodeBox>span{color:var(--grigio);font-size:11.5px;font-weight:650;margin-bottom:2px}
.trasfBarcodeBox>em{font-style:normal;color:#986400;font-weight:700}
.trasfBarcodeBox .eanBarcode{width:100%;max-width:230px;margin:0 auto}
.trasfBarcodeBox .eanBarcode svg{width:100%;height:auto}
@media(min-width:900px){
  .trasfWrap .trasfDati{grid-template-columns:1.2fr .8fr .8fr 1.2fr}
  .trasfWrap .trasfCard{padding:12px 14px}
  .trasfWrap .trasfDati{margin:9px 0;gap:7px}
  .trasfWrap .trasfPassi{margin-bottom:9px}
  .trasfWrap .trasfDati>div,.trasfWrap .trasfPassi>div{padding:7px 9px}
  .trasfWrap .trasfElenco{gap:9px}
}
@media(max-width:899px){.trasfCorpo{grid-template-columns:1fr}.trasfBarcodeBox .eanBarcode{max-width:260px}}

/* ---------- report ---------- */
.tot{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.tot div{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:11px 8px;text-align:center}
.tot .n{font:700 19px inherit;font-variant-numeric:tabular-nums}
.tot .l{font-size:10.5px;color:var(--grigio);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
table.gr{width:100%;border-collapse:collapse;font-size:13.5px}
table.gr th{text-align:left;font-size:11px;letter-spacing:.06em;color:var(--grigio2);text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--bordo)}
table.gr td{padding:9px 0;border-bottom:1px solid #f0f3f7}
table.gr td.n{text-align:right;font-variant-numeric:tabular-nums}
table.gr th.n{text-align:right}
/* tabella del piano */
.tab tbody tr.rt{cursor:pointer}
.tab tbody tr.rt:hover td{background:#f6f9fd}
.tab td.gio{padding:10px 0 4px;border:0;font:700 10.5px inherit;letter-spacing:.08em;
            text-transform:uppercase;color:var(--blu3)}
.tab td.gio span{color:var(--grigio2);font-weight:600;letter-spacing:0;text-transform:none}
.tab .pr{font-weight:650}
.tab .vas{width:58px;padding-left:10px}
.pez .pzc{width:58px;padding-left:10px}
.pez .pzt{width:64px;padding-left:10px;color:var(--grigio);white-space:nowrap}
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.scorri::-webkit-scrollbar{height:5px}
.scorri::-webkit-scrollbar-thumb{background:#ccd5e2;border-radius:3px}
.scorri:focus,.tabW:focus,.compW:focus{outline:3px solid #5aa9ff;outline-offset:2px}

@media(max-width:700px){
  .scorri,.tabW,.compW{scrollbar-width:auto;overscroll-behavior-x:contain}
  .scorri::-webkit-scrollbar,.tabW::-webkit-scrollbar,.compW::-webkit-scrollbar{height:7px}
  .scorri::-webkit-scrollbar-thumb,.tabW::-webkit-scrollbar-thumb,.compW::-webkit-scrollbar-thumb{
    background:#8fa2ba;border-radius:6px
  }
}
.pez{min-width:600px}
.pez th.fix,.pez td.fix{position:sticky;left:0;background:var(--carta);z-index:1;
     width:78px;padding-right:10px;font-size:12px;font-weight:650;color:var(--blu3)}
.pez tr.pezr:hover td{background:#f6f9fd}
/* con lo spazio largo le colonne si distribuiscono e i nomi non vanno a capo */
.pez .cImb{width:36%;min-width:210px}
.pez .cPro{width:30%;min-width:200px;white-space:nowrap}
.pez .cFor{width:110px;white-space:nowrap;color:var(--grigio);font-size:12px}
.pez .imb,.pez .forn,.pez .cPro .sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pez tr.pezr td{vertical-align:middle}
.pez tr.pezr:hover td.fix{background:#f6f9fd}
.pez tr.pezr td{padding:6px 0;border-bottom:1px solid #f0f3f7;vertical-align:top}
.pez tr.pezr td.vas,.pez tr.pezr td.pzc,.pez tr.pezr td.pzt{padding-left:12px}
.pez tr.totp td.pzc,.pez tr.totp td.pzt{padding-left:12px}
.pez .imb{font-weight:600;font-size:12.5px;line-height:1.25}
.pez .forn{font-size:11px}
.pez .idem{color:var(--grigio2)}
.pez .mancante{color:var(--att);font-weight:600}
.sceglii{border:1.5px solid var(--att);background:#fdf1d8;color:#8a5a00;border-radius:var(--btn-r);
         padding:4px 9px;font:650 11.5px inherit;cursor:pointer;white-space:nowrap}
.pez .imbn{font-weight:650}
.pez tr.totp td{border-bottom:0;padding:3px 0}
.tab .kgc{width:70px;padding-left:10px}
.tab .sm{color:var(--grigio);font-size:11.5px}
.tab .totale td{border-top:2px solid var(--bordo);border-bottom:0;font-weight:700;padding-top:9px}
.pun{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c3ccd9;margin-right:6px;vertical-align:middle}
.pun.corso{background:#c98f14} .pun.chiusa{background:var(--ok)}
.solargo{display:none}
@media(min-width:680px){
  .solargo{display:table-cell}
  .tab td:nth-child(4),.tab th:nth-child(4){width:88px;padding-left:14px}
  .tab td:nth-child(5),.tab th:nth-child(5){width:118px;padding-left:14px}
}

/* ---------- avviso dati ---------- */
.demo{background:#fdf1d8;color:#8a5a00;font-size:12px;padding:9px 14px;text-align:center;font-weight:600}

/* ---------- ricerca ---------- */
.cercabox{position:relative}
.cercabox input{padding-right:44px}
.xcerca{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
        border:0;background:#eef1f5;color:var(--grigio);border-radius:50%;font:700 17px inherit;cursor:pointer;line-height:1}
.ev{background:#ffeeb0;color:inherit;border-radius:3px;padding:0 1px;font-weight:750}
.avviso{background:#fdf1d8;color:#8a5a00;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:10px}

/* ---------- piano settimanale ---------- */
.setti{display:flex;align-items:center;gap:8px;margin-top:10px}
.setti button{flex:none;width:36px;height:32px;border-radius:var(--btn-r);border:1px solid #3c669e;background:#1f4478;color:#fff;cursor:pointer;font:700 15px inherit}
.setti .txt{flex:1;text-align:center;color:#dbe7f7;font-size:13px;font-weight:650}
.linea{margin:11px 0 4px;display:flex;align-items:baseline;gap:8px}
.linea h2{margin:0;font-size:13.5px;font-weight:750;letter-spacing:.01em;text-transform:uppercase;color:var(--blu)}
.linea .n{color:var(--grigio2);font-size:11.5px;white-space:nowrap}
.gg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:5px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.gg::-webkit-scrollbar{height:4px}
.gg::-webkit-scrollbar-thumb{background:#ccd5e2;border-radius:3px}
.g{background:var(--carta);border:1px solid var(--bordo);border-radius:10px;padding:4px;min-height:52px;scroll-snap-align:start}
.g.oggi{border-color:var(--blu3);box-shadow:inset 0 0 0 1px var(--blu3)}
.g.sopra{background:#eef3fa;border:1.5px dashed var(--blu3)}
.g .d{display:flex;justify-content:space-between;align-items:baseline;padding:1px 3px 4px;
      font:700 9.5px inherit;letter-spacing:.06em;color:var(--grigio2);text-transform:uppercase}
.g .d b{color:var(--blu3);font-size:10px}
.lv{background:#f6f9fd;border:1px solid #e5ecf5;border-left:3px solid var(--blu3);border-radius:7px;
    padding:4px 6px;margin-bottom:4px;cursor:pointer;font-size:11.5px}
.lv.corso{border-left-color:#c98f14;background:#fdf8ee}
.lv.chiusa{border-left-color:var(--ok);opacity:.7}
.lv .p{font-weight:700;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv .q{color:var(--grigio);font-size:10px;line-height:1.35;margin-top:1px;display:flex;gap:4px;justify-content:space-between;font-variant-numeric:tabular-nums}
.lv .q b{flex:none;white-space:nowrap}
.lv .q span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv .mac{color:var(--grigio2);font-size:10px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv .q b{color:var(--blu3)}
.lv.trascino{opacity:.35}
.vuotogg{color:#ccd3dd;font-size:11px;text-align:center;padding:5px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
/* il giorno che si sta guardando, con le frecce: si tocca col dito */
.giorno{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.gfr{flex:0 0 52px;height:52px;border:1.5px solid var(--blu3);background:#fff;border-radius:var(--btn-r);
  font:400 26px/1 inherit;color:var(--blu3);cursor:pointer}
.gfr:active{background:#eef3f9}
.gfr:disabled{opacity:.32;cursor:default;background:#f5f7fa}
.gcen{flex:1;text-align:center}
.gdata{font-size:17px;font-weight:750;color:var(--blu3);line-height:1.2}
.gsot{font-size:11.5px;color:var(--grigio);margin-top:1px;min-height:16px}
.goggi{border:0;background:none;color:var(--blu3);font:650 11.5px inherit;
  text-decoration:underline;cursor:pointer;padding:0}
.chip{padding:7px 11px;border-radius:999px;border:1.5px solid #ccd5e2;background:#fff;
      font:650 12px inherit;color:var(--grigio);cursor:pointer}
.chip.on{border-color:var(--blu3);background:#eef3fa;color:var(--blu3)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* ---------- lotto ---------- */
/* i due campi sono attaccati: il lotto è un numero solo, in due pezzi */
.lotto{display:flex;align-items:stretch}
.lotto input{font-variant-numeric:tabular-nums;letter-spacing:.06em;text-align:center;font:700 19px inherit;padding:12px 6px}
.lotto .a{flex:1;border-radius:10px 0 0 10px;border-right:0}
.lotto .b{width:84px;flex:none;border-radius:0 10px 10px 0;background:#eef3fa;color:var(--blu3)}
.lotto input:focus{outline:2px solid var(--blu3);outline-offset:-2px;position:relative;z-index:1}
.lottoEti{display:flex;margin-top:5px;font-size:11.5px;color:var(--grigio2)}
.lottoEti span:first-child{flex:1;text-align:center}
.lottoEti span:last-child{width:84px;text-align:center}
.lottoOut{margin-top:12px;text-align:center;font:700 15px inherit;color:var(--grigio)}
.lottoOut b{font-size:22px;letter-spacing:.1em;color:var(--blu);font-variant-numeric:tabular-nums}

/* ---------- popup ---------- */
.velo{position:fixed;inset:0;background:rgba(10,20,35,.55);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0}
.pop{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:760px;padding:20px 16px 24px;max-height:88vh;overflow:auto}
@media(min-width:600px){.velo{align-items:center;padding:20px}.pop{border-radius:18px}}
.pop h3{margin:0 0 4px;font-size:18px}
.corrCampi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.corrCampi.corrQ{grid-template-columns:2fr 1fr}
.corrCampi label.cam{margin-top:9px}
.corrScheda{border-left:4px solid var(--no)}
.corrSchedaRiga{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.corrSpunta{padding:0;margin-top:3px}
.corrScheda.spuntaOk{border-left-color:var(--ok);background:#f2faf5}
.corrScheda.spuntaOk .corrQtaRiga{background:#edf6f0;color:var(--grigio)}
.storCorrLista{max-height:58vh;overflow:auto;margin:8px 0 12px;padding-right:3px}
.storCorrRiga{margin:7px 0;padding:12px;text-align:left}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.corrPop{max-width:860px}
.corrFormulaApri{margin-top:14px}
.corrRicerca{margin-top:12px;padding-top:2px}
.corrRicerca input[type=search]{width:100%;padding:10px 12px;border:1px solid #ccd5e2;border-radius:10px;
  font:14.5px inherit;background:#fff;color:var(--testo)}
.corrCercaStato{min-height:20px;margin:5px 1px}
.corrRisultati{max-height:220px;overflow:auto;border:1px solid var(--bordo);border-radius:10px;background:#fff}
.corrRisultati:empty{display:none}
.crRisultato{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--bordo)}
.crRisultato:last-child{border-bottom:0}
.crRisultato .mini2{flex:none}
.corrScelteTesta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 0 6px}
.corrScelte{border:1px solid var(--bordo);border-radius:11px;overflow:hidden;background:#fbfcfe}
.corrVuoto{padding:12px}
.crScelta,.crFormulaRiga{display:grid;grid-template-columns:minmax(0,1fr) 118px 34px auto;
  align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--bordo)}
.crScelta:last-child,.crFormulaRiga:last-child{border-bottom:0}
.crSceltaNome,.crFormulaNome{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.crSceltaNome b,.crFormulaNome b{max-width:100%;overflow-wrap:anywhere}
.crSceltaNome .pill,.crFormulaNome .pill{font-size:9.5px;padding:3px 7px}
.crSceltaQta,.crFormulaQta{min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.crSceltaUm{color:var(--grigio);font-weight:700;font-size:12px}
.corrInvioStato,.corrFormulaStato{min-height:20px;margin-top:5px;color:var(--no);font-size:12.5px;font-weight:650}
.corrFormulaStato.ok{color:var(--ok)}
/* LA CORREZIONE CHE È SOLO UNA NOTA (18/09).
   Non ha quantità: al suo posto c'è il testo, grande come un'istruzione
   di formula, perchè è quello che l'operaio deve leggere e fare. */
.corrSchedaNota{border-left:5px solid var(--att);background:#fffdf7}
.corrNotaTesto{margin:8px 0 6px;font-size:17px;line-height:1.45;font-weight:700;color:#4a3708}
.esitoLabNota span{display:block;margin-top:2px;font-weight:600}
@media(max-width:700px){.corrNotaTesto{font-size:18px}}
.corrQtaConUm{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.corrQtaConUm span{font-weight:700;color:var(--grigio);min-width:24px}
.corrFooter{position:sticky;bottom:-24px;background:#fff;padding-top:8px;margin-top:2px}
.corrFooter .btn+.btn{margin-top:8px}
.corrFormulaVelo{z-index:70}
.corrFormulaPop{max-width:900px}
.corrFormulaLista{max-height:55vh;overflow:auto;border:1px solid var(--bordo);border-radius:11px;
  margin:8px 0 12px;background:#fff}
@media(max-width:560px){
  .corrPop,.corrFormulaPop{padding-left:12px;padding-right:12px}
  .crScelta,.crFormulaRiga{grid-template-columns:minmax(0,1fr) 34px auto}
  .crSceltaNome,.crFormulaNome{grid-column:1 / -1}
}
.card.labOk{border-left:4px solid var(--ok)}
.repSottotitolo{margin:12px 0 4px;font-weight:700;color:var(--blu3)}
.repSezioni{min-width:920px}
.repScarichi{margin-top:2px}
@media(max-width:560px){.corrCampi,.corrCampi.corrQ{grid-template-columns:1fr}.repSezioni{min-width:820px}}
@media print{.repSezioni{min-width:0;font-size:10px}.repSottotitolo{font-size:11px}}

/* ---------- turno, entrata, permessi ---------- */
.turno{background:#0f2544;color:#cfe0f5;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.12)}
.turnoR{display:flex;align-items:center;gap:10px;padding:7px 14px}
.turnoR .tl{opacity:.65}
.turnoR b{color:#fff;font-weight:700}
.turnoR .tr{opacity:.65;margin-left:6px}
.turnoR .mini2{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;white-space:nowrap}
.nonSalvato{background:#a3282d;color:#fff;border:0;border-radius:20px;padding:6px 12px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.nonSalvato:hover{background:#8c2126}
/* è arrivato qualcosa da un altro terminale */
.altri{background:#e6f4ec;color:#16794a;border-radius:12px;padding:9px 14px;font-size:12.5px;
  font-weight:650;margin-bottom:10px;animation:appare .25s ease-out}
.vecchio{background:#fbe9ea;color:#a3282d;border-radius:12px;padding:10px 14px;font-size:12.5px;
  line-height:1.45;margin-bottom:10px}
.vecchio code{background:rgba(163,40,45,.1);border-radius:4px;padding:0 4px}
@keyframes appare{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.solaLett{display:block;font-size:9.5px;opacity:.7;font-weight:600;letter-spacing:.03em;margin-top:2px}
.vers{font-size:10.5px;opacity:.45;letter-spacing:.03em}
.avvisoR{background:#fdf1d8;color:#8a5a00;border-radius:12px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.entra{max-width:340px;margin:0 auto;text-align:center}
.pin{font-size:34px;letter-spacing:.28em;font-weight:700;color:var(--blu3);min-height:44px;padding:6px 0}
.pin .vuoto{color:#c3cbd6;letter-spacing:.08em;font-size:26px}
.pinDett{font-size:12px;color:var(--grigio);margin-bottom:14px}
.pinErr{font-size:13px;color:var(--no);font-weight:650;margin-bottom:14px}
.tasti{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tasto{height:62px;font-size:24px;font-weight:650;border:1px solid var(--bordo);background:#fff;border-radius:14px;color:var(--testo);cursor:pointer}
.tasto:active{background:#eef3f9}
.tasto.sec{color:var(--grigio);font-size:19px}
.tasto.ok{background:var(--blu);color:#fff;border-color:var(--blu)}
/* ---------- i tempi di lavorazione ---------- */
.istr.tmp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.istr.tmp .cresci{flex:1 1 auto;min-width:140px}
.tAtt{font-size:11.5px;color:var(--grigio);font-weight:400}
.tGira{font-size:22px;font-weight:800;color:#8a5a00;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tFatto{font-size:11.5px;color:var(--ok);font-weight:700}
.istr.tmp.gira{background:#fdf1d8;border-left-color:#c98a12}
.istr.tmp .avviaT,.istr.tmp .passaT{width:auto;padding:6px 14px;margin:0;font-size:13px}
/* DUE TEMPI DI FILA: il secondo aspetta il primo, e poi chiede il passaggio.
   Chiuso è grigio e non ha pulsanti; quando tocca a lui si accende d'ambra e
   respira, perché in reparto lo schermo lo si guarda di sfuggita. */
.istr.tmp.attende{background:#f4f6fa;border-left-color:var(--grigio2);opacity:.9}
.istr.tmp.attende .cresci{color:var(--grigio)}
.istr.tmp.passa{background:var(--attbg);border-left-color:#c98a12;
  box-shadow:0 0 0 2px rgba(201,138,18,.18)}
.istr.tmp.passa .tAtt{color:var(--att);font-size:12.5px}
.istr.tmp.passa .passaT{animation:respiraPassaggio 1.9s ease-in-out infinite}
@keyframes respiraPassaggio{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.istr.tmp.passa .passaT{animation:none}}
.istr.tmp.fatto{background:#e6f4ec;border-left-color:var(--ok)}
.tBarra{flex:0 0 100%;height:4px;background:rgba(0,0,0,.09);border-radius:3px;overflow:hidden}
.tBarra i{display:block;height:100%;background:#c98a12;border-radius:3px;transition:width .9s linear}
.tSotto{flex:0 0 100%;font-size:11px;color:var(--grigio);display:flex;align-items:center;gap:8px}
.tSotto .mini2{padding:2px 8px;font-size:10.5px}
.mat.bloccato{opacity:.5}
.mat.bloccato .qta{color:var(--grigio)}
.spunta.chiusa{border-style:dashed;cursor:not-allowed;display:flex;align-items:center;justify-content:center;font-size:13px}
.attesaT{color:#8a5a00;font-weight:650}
/* Semilavorati: il dato SAP resta attaccato al materiale, leggibile anche
   sul tablet. La mancanza non sbiadisce la riga: deve vedersi bene perché
   contiene le due scelte operative. */
.mat.semiManca{background:#fff8e8;border:1px solid #efd49a;border-radius:10px;padding:10px;margin:5px 0}
.semiStato,.semiDett{display:block;margin-top:5px;padding:6px 8px;border-radius:7px;font-size:12px;line-height:1.35}
.semiOk{background:#e8f6ed;color:#166b3d}
.semiNo{background:#fff0d2;color:#7b4b00}
.semiLegge{background:#eef4fb;color:var(--blu3)}
.semiForzato{background:#f4ecff;color:#63338e}
.semiAzioni{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;align-items:center}
.semiAzioni .mini2,.semiApriFormula{font-size:11.5px;padding:6px 9px}
.semiSenzaFormula{font-size:11.5px;font-weight:700}
.frm2 .semiApriFormula{margin-top:5px}
@media(max-width:560px){
  .mat.semiManca{margin-left:-6px;margin-right:-6px}
  .semiAzioni .mini2{flex:1 1 120px}
}
/* ---------- il report di fine giornata ---------- */
/* LO SFONDO BIANCO COPRE TUTTO IL FOGLIO — 30/09/2026.
   «lo sfondo bianco è piu piccolo» — Francesco, con la schermata: la scheda
   bianca finiva a metà dei riquadri e delle tabelle, che uscivano fuori.
   Perché: `table.repPag` ha width:100%, ma una tabella non scende MAI sotto il
   suo min-content, e le colonne dei numeri non vanno a capo (742px misurati
   sul foglio del 30). In una finestra più strettra la tabella si allargava
   oltre la scheda, e la scheda — che è un blocco larga quanto la colonna —
   restava dietro: sfondo più piccolo del contenuto.
   Due righe: `table-layout:fixed` impedisce alla tabella della paginazione di
   essere allargata dal suo contenuto (così testata e riquadri stanno sempre
   dentro il bianco), e lo scorrimento orizzontale tiene DENTRO la scheda
   quello che in quella larghezza non ci sta. In stampa tutto come prima: la
   carta ha la sua larghezza e non si scorre. */
.rep{background:#fff;border:1px solid var(--bordo);border-radius:14px;padding:16px 18px;
  overflow-x:auto}
/* LA TESTATA SU OGNI PAGINA (24/09/2026): il report sta dentro una tabella
   sola e la testata nel suo <thead>, che il browser ristampa in cima a ogni
   pagina. A schermo la tabella non si deve vedere: nessun bordo, nessuno
   spazio, larghezza piena. */
table.repPag{width:100%;border-collapse:collapse;table-layout:fixed}
table.repPag>thead>tr>th{padding:0;border:0;text-align:left;font-weight:400;background:none}
table.repPag>tbody>tr>td{padding:0;border:0;vertical-align:top}
.repTesta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  border-bottom:2px solid var(--blu);padding-bottom:8px;margin-bottom:14px;flex-wrap:wrap}
.repT{font-size:17px;font-weight:800;color:var(--blu)}
.repS{font-size:11.5px;color:var(--grigio)}
.repBloccoTit{display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin:14px 0 5px;padding:6px 9px;border-radius:7px;background:var(--blu);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.repBloccoTit span:last-child{font-weight:600;font-size:11px;text-transform:none;letter-spacing:0}
.repBloccoTit.semi{background:#8a5a00}
.repBloccoTit.corr{background:#6b3b86}
.repBloccoTit.scar{background:#315f69}
.repBloccoTit.rott{background:#963b2f}
.repBloccoTit.camp{background:#0f6a52}
.repBloccoTit.ean{background:#1f4f8a}
.repCompatta{min-width:760px;font-size:11.5px}
.repCompatta th,.repCompatta td{padding:5px 6px!important}
.repLinea{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blu3);
  margin:14px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--bordo)}
.repLinea span{float:right;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grigio)}
.rLot{border:1px solid var(--bordo);border-radius:10px;padding:9px 11px;margin-bottom:8px;break-inside:avoid}
.lotTesta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lotN{font-size:15px;font-weight:750;line-height:1.2}
.lotL{font-size:13px;color:var(--blu3);white-space:nowrap}
.lotL b{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.lotDati{font-size:11.5px;color:var(--grigio);margin:3px 0 7px;display:flex;flex-wrap:wrap;gap:2px 14px}
.lotDati b{color:var(--testo)}
.lotP{width:100%;border-collapse:collapse;font-size:12px}
.lotP th{text-align:left;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio);
  font-weight:700;padding:2px 6px;border-bottom:1px solid var(--bordo)}
.lotP td{padding:4px 6px;border-bottom:1px solid #f0f3f7;vertical-align:top}
.lotP .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lotP tr:last-child td{border-bottom:0}
.lotFirme{font-size:11px;color:var(--grigio);margin-top:6px;display:flex;flex-wrap:wrap;gap:2px 14px}
/* qui NO flex: dentro ci sono <b> in mezzo al testo, e il flex li
   staccherebbe uno dall'altro mettendo spazio prima delle virgole */
.lotMani,.lotLab{font-size:11px;color:var(--grigio);margin-top:4px;line-height:1.45}
.lotFirme b,.lotMani b,.lotLab b{color:var(--testo)}
.lotAvv{font-size:11px;color:#a3282d;font-weight:650;margin-top:4px}
/* sul telefono il report resta leggibile: via il nome per esteso della
   pezzatura e la colonna dei litri, che sono un di piu' — restano in stampa */
@media(max-width:560px){
  .lotP .sm{display:none}
  .lotP th:nth-child(5),.lotP td:nth-child(5){display:none}
  .lotP th,.lotP td{padding:4px 4px}
  .rep{padding:12px 10px}
}
.repImb td{padding:5px 8px}
.repImb tr.totale td{border-top:2px solid var(--blu);padding-top:7px}
.repPiede{margin-top:18px;padding-top:12px;border-top:1px solid var(--bordo);font-size:12px;color:var(--grigio)}

@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  .ruoli,.turno,.demo,.noStampa,.btn,.testa{display:none !important}
  .wrap{max-width:none;padding:0}
  /* in stampa niente scorrimento e niente larghezza imposta: la carta è la
     carta, e la paginazione della testata deve restare quella di prima */
  .rep{border:0;border-radius:0;padding:0;overflow:visible}
  table.repPag{table-layout:auto}
  table.repPag>thead{display:table-header-group}
  .repCompatta{min-width:0;font-size:9px}
  .repBloccoTit{margin:8px 0 3px;padding:4px 6px;font-size:10px;break-after:avoid}
  .rLot{border-color:#bbb}
  .tot{break-inside:avoid}
  .repLinea{break-after:avoid}
  .tot{gap:6px}
  .tot .n{font-size:20px}
  a[href]:after{content:''}
}
/* ---------- report pulito e archivi ---------- */
/* 28/09 — la scelta della linea nel report del caporeparto: pastiglie sopra i
   tasti di stampa, larghe da toccare col pollice in reparto */
.chips.capoLinee{margin:0 0 10px}
.chips.capoLinee .chip{padding:8px 14px}
.repComandi{display:flex;gap:8px;margin-bottom:12px}
.repComandi .btn{width:auto;margin:0;padding:9px 16px}
/* GLI UNDICI TOTALI, TUTTI DELLA STESSA MISURA — 30/09/2026.
   «rendili uniformi nelle dimensioni» — Francesco.
   Prima «pezzi prodotti» occupava due caselle e aveva il numero più grande, e
   la casella con la scritta più lunga («lavorazioni chiuse · travasi e
   semilavorati compresi», tre righe) alzava soltanto la SUA riga: undici
   riquadri di quattro misure diverse.
   Adesso stessa larghezza per tutti — `auto-fill` tiene le colonne anche dove
   la riga non è piena, così l'ultima fila è allineata a quella sopra — e
   stessa altezza: `grid-auto-rows:1fr` in una griglia alta quanto serve
   pareggia tutte le righe sulla più alta. Niente più caselle doppie. */
.repTot{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows:1fr;gap:8px;margin-bottom:12px}
.repTot>div{border:1px solid var(--bordo);border-radius:9px;padding:9px 10px;background:#f8fafc}
.repTot b{display:block;color:var(--blu);font-size:20px;line-height:1}
.repTot span{display:block;color:var(--grigio);font-size:11px;margin-top:4px}
.repBloccoTit{margin:13px 0 5px;padding:7px 9px;border-radius:6px;
  background:#edf4fb;color:var(--blu);border-left:4px solid var(--blu);
  font-size:11.5px;letter-spacing:.03em}
.repBloccoTit.semi{background:#fff7e8;color:#7c5200;border-left-color:#b77a00}
.repBloccoTit.corr{background:#f7effb;color:#67347f;border-left-color:#7a4295}
.repBloccoTit.scar{background:#eef8f7;color:#245d61;border-left-color:#36858a}
.repBloccoTit.rott{background:#fff1ef;color:#8a3028;border-left-color:#b74438}
.repBloccoTit.camp{background:#eaf7f2;color:#0f6a52;border-left-color:#16916f}
.repBloccoTit.ean{background:#eef3fb;color:#1f4f8a;border-left-color:#2f6fbd}
.repElenco,.repCorrezioni{border:1px solid var(--bordo);border-radius:8px;overflow:hidden}
.repVoce{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(130px,.65fr);
  gap:10px;padding:8px 10px;border-bottom:1px solid var(--bordo);align-items:center;min-width:0}
.repVoce:last-child{border-bottom:0}
.repVoce>div,.repCorrRiga>div,.arcProd>div,.arcRiga>div{min-width:0}
.repVoce b,.repCorrRiga b,.arcProd b{font-size:12px;line-height:1.2;overflow-wrap:anywhere}
.repVoce span,.repCorrRiga span,.arcProd span,.arcRiga span{
  display:block;color:var(--grigio);font-size:10.5px;line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.repVoceQta,.repCorrQta{text-align:right}
.repVoceQta b{color:var(--blu)}
.repVuoto{padding:9px 10px;border:1px dashed var(--bordo);border-radius:7px;color:var(--grigio);font-size:11px}
.repCorrGruppo{border-bottom:1px solid var(--bordo)}
.repCorrGruppo:last-child{border-bottom:0}
.repCorrTesta{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;background:#faf7fc}
.repCorrTesta b{font-size:12px}
.repCorrTesta span{font-size:10.5px;color:var(--grigio);text-align:right}
.repCorrRiga{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(150px,.75fr);
  gap:10px;padding:7px 10px;border-top:1px solid #eef1f5;align-items:center}
/* 15/10 — campioni messi in vasca: niente parole spezzate; il codice sta
   sotto il nome come nelle altre sezioni del report */
.repCorrRiga.repCampRiga{grid-template-columns:minmax(0,1.7fr) minmax(0,.6fr) minmax(0,1.3fr)}
.repCampRiga>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.repCampRiga b{overflow-wrap:normal}
.repCampRiga span{display:block;margin-top:2px;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}
.difSap{display:block;margin-top:4px;color:#8a5a00}
.repSottotitolo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--grigio);margin:10px 0 4px}
.repScarichi{border:1px solid var(--bordo);border-radius:7px;overflow:hidden}
.repScarichi>div{display:flex;justify-content:space-between;gap:12px;padding:6px 9px;
  border-bottom:1px solid var(--bordo);font-size:11px}
.repScarichi>div:last-child{border-bottom:0}
.repScarichi>div>b{white-space:nowrap;color:var(--blu)}

.arcLista{border:1px solid var(--bordo);border-radius:9px;overflow:auto;max-height:58vh}
.arcRiga{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) auto;
  gap:12px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--bordo)}
.arcRiga:last-child{border-bottom:0}
.arcNumeri{text-align:right}
.arcPulsanti{display:grid;grid-template-columns:repeat(2,minmax(104px,1fr));gap:8px;min-width:224px}
.arcPulsanti .mini2{width:100%;white-space:nowrap}
.popArchivio{max-width:1000px}
.pop.pMac.popLabArchivio{width:min(1450px,calc(100vw - 48px));max-width:1450px;max-height:94vh;box-sizing:border-box}
.popLabArchivio .mini2{height:42px;min-height:42px;padding:8px 14px;border-radius:12px;font-size:14px;line-height:1.2}
.popLabArchivio .labArcVista .mini2{width:auto;min-width:116px}
.labArcVista{display:flex;gap:6px;margin:12px 0 8px}
.labGiorno{display:flex;align-items:end;gap:8px;margin:-2px 0 12px}
.labGiorno label{font-size:10px;font-weight:800;color:var(--grigio);text-transform:uppercase;letter-spacing:.04em}
.labGiorno input{display:block;margin-top:3px;min-width:170px}
.labGiorno .mini2{height:34px}
.giornoBlocco{margin:0 0 12px;padding:10px 12px;border:2px solid var(--no);border-radius:10px;background:#fff2f2;color:var(--no);font-size:12px}
/* 18/09 — guardare un altro giorno non e' piu' un divieto, quindi non e'
   rosso: e' un promemoria. Si nota, ma non allarma. */
.giornoAltro{margin:0 0 12px;padding:10px 12px;border:1px solid var(--bordo);border-radius:10px;
  background:#f7fafd;color:var(--blu3);font-size:12px;line-height:1.45}
.card.giornoBloccato{background:#f4f5f7;border-color:#d9dde3}
.card.giornoBloccato .tit,.card.giornoBloccato .meta{color:#737b86}
.corrOp .corrApri,.opScheda .opApri,.opScheda .opConsulta{
  width:100%;height:60px;min-height:60px;margin-top:14px;box-sizing:border-box;font-size:17px
}

/* Pulsanti di consultazione: aspetto flip, ma l'azione resta sempre a un tocco. */
.flipBtn{position:relative;display:block;min-height:54px;padding:0!important;border:0!important;
  border-radius:999px!important;background:transparent!important;perspective:900px;overflow:visible}
.flipBtnInner{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.flipFace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px 22px;
  border-radius:999px;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-weight:800;
  box-sizing:border-box;box-shadow:0 6px 14px rgba(20,72,130,.22),inset 0 1px 0 rgba(255,255,255,.42)}
.flipFront{background:linear-gradient(180deg,#2878cd 0%,#0e5cac 100%);color:#fff;border:1px solid #0d58a2}
.flipBack{transform:rotateX(180deg);background:#f4f4f5;color:#18181b;border:1px solid #d4d4d8;
  box-shadow:0 5px 12px rgba(24,24,27,.14),inset 0 1px 0 #fff}
@media(hover:hover) and (pointer:fine){.flipBtn:hover .flipBtnInner{transform:rotateX(180deg)}}
.flipBtn:focus-visible{outline:3px solid #69a8e8!important;outline-offset:3px}
.flipBtn:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.flipBtnInner{transition:none}.flipBtn:hover .flipBtnInner{transform:none}}
.labArcVista .attivo{background:var(--blu);border-color:var(--blu);color:#fff}
.labArcFiltri{display:grid;grid-template-columns:170px minmax(160px,.7fr) minmax(220px,1fr) auto;gap:8px;align-items:end;margin-bottom:10px}
.labArcFiltri label{font-size:10px;font-weight:800;color:var(--grigio);text-transform:uppercase;letter-spacing:.04em}
.labArcFiltri input{display:block;margin-top:3px;width:100%;box-sizing:border-box}
.labArcComandi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.labArcComandi .btn{margin:0}
.arcVasche{display:flex;flex-direction:column;gap:9px;padding:9px;border:0;max-height:62vh;background:#f5f7fa}
.arcVasca{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr) minmax(270px,300px);min-height:96px;border:1px solid var(--bordo);border-radius:9px;overflow:hidden;background:#fff}
.arcVasca header{display:flex;justify-content:space-between;gap:10px;padding:13px 14px;background:#edf4fb;border-right:1px solid var(--bordo)}
.arcVasca header b{font-size:13px;line-height:1.25}
.arcVasca header span,.arcGiro span,.arcTabella span{display:block;color:var(--grigio);font-size:10.5px;line-height:1.35;margin-top:3px}
.arcVasca header strong{white-space:nowrap;color:var(--blu);font-size:11px}
.arcGiri{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));min-width:0}
.arcGiro{display:block;padding:13px 14px;border-left:1px solid var(--bordo);min-width:0}
.arcGiro:first-child{border-left:0}
.arcGiro>b{font-size:12px;color:var(--blu)}
.arcGiro .arcGiroEsito{font-size:12px;font-weight:800;color:var(--testo);text-transform:capitalize;margin:4px 0 7px}
.arcVascaAzioni{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:8px;padding:12px;border-left:1px solid var(--bordo);background:#fbfcfe}
.arcVascaAzioni .mini2{width:100%}
.arcTabellaWrap{max-height:58vh}
.arcTabella{width:100%;border-collapse:collapse;font-size:11px}
.arcTabella th{position:sticky;top:0;z-index:1;background:#edf4fb;color:var(--blu);text-align:left;padding:8px;white-space:nowrap}
.arcTabella td{padding:8px;vertical-align:top;border-top:1px solid var(--bordo)}
.arcParametri{min-width:250px}
.arcParametri>div{margin-bottom:4px}
.arcParametri>div:last-child{margin-bottom:0}
.arcFoglio{background:#fff;color:var(--testo)}
.arcTesta{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;
  border-bottom:2px solid var(--blu);padding-bottom:8px;margin-bottom:8px}
.arcNota{background:#f7f9fc;border-radius:6px;padding:7px 9px;color:var(--grigio);
  font-size:10.5px;margin-bottom:10px}
.arcGiorno{border:1px solid var(--bordo);border-radius:8px;overflow:hidden;margin-bottom:8px}
.arcGiornoTit{padding:6px 9px;background:#edf4fb;color:var(--blu);font-size:11px;font-weight:800}
.arcProd{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(120px,.55fr);
  gap:10px;align-items:center;padding:7px 9px;border-top:1px solid var(--bordo)}
.arcQta{text-align:right}
.arcAzioni{display:flex;gap:8px;margin-top:12px}
.arcAzioni .btn{margin:0}
.archivioDoc{display:none}

/* Le finestre non devono mai allargarsi oltre lo schermo o comprimere i comandi. */
.pop{min-width:0;box-sizing:border-box}
.pop button,.pop input,.pop select,.pop textarea{max-width:100%;box-sizing:border-box}
.pop .riga>*{min-width:0}

@media(max-width:1050px) and (min-width:721px){
  .pop.pMac.popLabArchivio{width:calc(100vw - 24px)}
  .arcVasca{grid-template-columns:minmax(230px,280px) minmax(0,1fr) 190px}
  .arcVascaAzioni{grid-template-columns:1fr}
  .arcPulsanti{grid-template-columns:1fr;min-width:132px}
}

@media(max-width:720px){
  .rep{padding:11px 9px}
  /* sul telefono due per riga — undici uno sotto l'altro erano undici
     schermate di scorrimento — e della stessa misura come a schermo grande */
  .repTot,.repTot.q4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .repVoce,.repCorrRiga,.arcProd,.arcRiga{grid-template-columns:1fr;gap:5px}
  .repCampRiga>div{white-space:normal}
  .repVoceQta,.repCorrQta,.arcQta,.arcNumeri{text-align:left}
  .repCorrTesta{display:block}
  .repCorrTesta span{text-align:left;display:block;margin-top:2px}
  .arcPulsanti{grid-template-columns:1fr 1fr;min-width:0;width:100%}
  .pop.pMac.popLabArchivio{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:12px;display:flex;flex-direction:column;overflow:hidden}
  .labArcFiltri{grid-template-columns:1fr}
  .labArcRisultati{flex:1;min-height:0;overflow:auto;border:1px solid var(--bordo);border-radius:9px}
  .labArcComandi{grid-template-columns:1fr 1fr;flex:none;margin-top:8px;padding-top:8px;background:#fff}
  .labArcRisultati>.arcLista{max-height:none;overflow:visible;border:0}
  .arcVasche{max-height:none;padding:6px}
  .arcVasca{display:block;min-height:0;overflow:visible}
  .arcVasca header{border-right:0}
  .arcGiri{display:block}
  .arcGiro{border-left:0;border-top:1px solid var(--bordo)}
  .arcVascaAzioni{grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid var(--bordo)}
  .arcVascaAzioni .mini2{width:100%;min-width:0}
  .popLabArchivio .labAzzera{width:100%}
  .repComandi{flex-direction:column}
  .repComandi .btn{width:100%}
}
@media print{
  body.stampaArchivio> *:not(.archivioDoc){display:none!important}
  body.stampaArchivio .archivioDoc{display:block!important}
  .archivioDoc{position:static!important;width:100%!important}
  .archivioDoc .rep,.archivioDoc .arcFoglio{border:0;padding:0;overflow:visible}
  /* LA TESTATA IN CIMA A OGNI PAGINA (24/09/2026): il <thead> della tabella
     che contiene il report. Il browser la ripete da sé, foglio dopo foglio. */
  table.repPag>thead{display:table-header-group}
  table.repPag>tbody{display:table-row-group}
  table.repPag>thead>tr>th{break-inside:avoid;page-break-inside:avoid}
  .archivioDoc .repTesta{margin-bottom:10px;padding-bottom:6px}
  .repTot{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .repTot.q4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .repVoce{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(130px,.65fr);
    padding:5px 7px;break-inside:avoid}
  .repCorrRiga{grid-template-columns:75px minmax(0,1fr) minmax(135px,.75fr);padding:5px 7px}
  .repCorrRiga.repCampRiga{grid-template-columns:minmax(0,1.7fr) minmax(0,.6fr) minmax(0,1.3fr)}
  .repCorrGruppo,.arcGiorno{break-inside:avoid}
  .arcProd{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(120px,.55fr);padding:5px 7px}
  .repBloccoTit{margin-top:8px;break-after:avoid}
  .repPiede{margin-top:10px}
}
.tabW{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ---------- gli operatori: una scheda per persona ---------- */
/* una persona per scheda, ma stretta: quattro campi in riga e i sei pannelli
   sotto, ognuno con la sua etichetta attaccata */
.op{padding:9px 11px;margin-bottom:8px}
.op.spento{opacity:.55}
.opTesta{display:flex;gap:7px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.op input,.op select{width:100%;box-sizing:border-box;margin:0}
.op input[type=checkbox]{width:auto}
.op input.cam,.op select.cam{padding:6px 9px;font-size:13.5px}
.opNome{flex:2;min-width:110px;font-weight:650}
.opRuolo{flex:1.4;min-width:90px}
.opChat{flex:1.2;min-width:140px;text-transform:lowercase}
.pinC{flex:0 0 92px;text-align:center;letter-spacing:.14em;font-weight:700}
.opTesta .xrm{flex:none}
.opGriglia{display:grid;grid-template-columns:repeat(5,1fr);gap:5px 7px}
.agGr{margin-bottom:6px}
/* --- prontuario --- */
.pFam{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--bordo);
      cursor:pointer;font-weight:600}
.pFam:last-child{border-bottom:0}
.pQ{background:#eef2f7;color:var(--grigio);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700}
.pProd{cursor:pointer}
.pcRiga{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--bordo)}
.pcRiga:last-of-type{border-bottom:0}
.pcRiga.spento .pcNome,.pcRiga.spento .pcVal{color:#9aa5b2}
.pcNome{flex:1;font-size:14px}
.pcUm{color:var(--grigio);font-weight:400}
.pcVal{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pcPar{display:block;font-size:11.5px;color:var(--grigio);font-weight:500}
.pcCampi{display:flex;gap:6px;flex:0 0 auto}
.pcCampi .cam{width:82px;margin:0;text-align:right}
.pcVuoto{width:82px}
.pNota{background:#eef4fb;border-left:3px solid var(--blu3);border-radius:0 8px 8px 0;
       padding:9px 12px;margin-top:8px;font-size:13.5px}
.pNotaF{background:#f5f7fa;border-left-color:#c3cede}
.pv{background:#eef2f7;border-radius:6px;padding:1px 6px;font-size:11.5px}
/* --- le misure sulla scheda di controllo --- */
.msRiga{padding:10px 2px;border-bottom:1px solid var(--bordo)}
.msRiga:last-of-type{border-bottom:0}
.msTesta{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.msNome{font-weight:600;font-size:14px;flex:1}
.msLim{font-size:12.5px;color:var(--grigio);font-variant-numeric:tabular-nums;text-align:right}
.msSotto{display:flex;align-items:center;gap:10px}
.msSotto .cam{width:130px;margin:0;font-size:16px;font-weight:700;text-align:right}
.msEsito{font-size:13px;font-weight:700}
.msEsito.ok{color:#16794a}.msEsito.sotto,.msEsito.sopra{color:#a3282d}
/* 14/10 — scelte a bottoni del laboratorio: aspetto del film, pelle, tropical */
.labSceltaBot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.labSc{min-height:46px;border-radius:10px;border:2px solid var(--bordo);background:#f8fafc;
       font:700 15px inherit;color:var(--grigio);cursor:pointer;touch-action:manipulation}
.labSc:disabled{opacity:.5;cursor:default}
.labSc.ok.on{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.labSc.no.on{background:var(--nobg);border-color:var(--no);color:var(--no)}
.labSc.neutro.on{background:#e8eef7;border-color:var(--blu3);color:var(--blu2)}
.labScAvviso{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--nobg);color:var(--no);font-size:13px;font-weight:700}
/* --- la tabella del prontuario --- */
.prT{width:100%;border-collapse:collapse;font-size:13px}
.prT th{position:sticky;top:0;background:#f4f7fb;text-align:right;padding:8px 10px;font-size:11.5px;
        letter-spacing:.03em;text-transform:uppercase;color:var(--grigio);white-space:nowrap;
        border-bottom:1px solid var(--bordo);z-index:2}
.prT th span{display:block;font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:500;opacity:.8}
.prT th.pT1,.prT td.pT1{text-align:left;position:sticky;left:0;background:#fff;z-index:1}
.prT th.pT1{background:#f4f7fb;z-index:3}
.prT td{padding:8px 10px;text-align:right;border-bottom:1px solid #eef2f7;font-variant-numeric:tabular-nums}
.prT td.pT1{font-weight:650;max-width:340px}
.prT tbody tr{cursor:pointer}
.prT tbody tr:hover td{background:#f7fafd}
.prT tbody tr:hover td.pT1{background:#f7fafd}
.pTpar{display:block;font-size:11px;color:var(--grigio);font-weight:500}
.pTseg{display:block;font-size:11px;color:#a3282d;font-weight:700}
.ced{color:var(--grigio);font-size:11.5px}
.prPiena{width:100vw;position:relative;left:50%;margin-left:-50vw;padding:0 16px;box-sizing:border-box}
/* Nella compilazione la tabella segue la stessa larghezza di filtri e
   risultati. Le altre tabelle che usano prPiena restano a tutto schermo. */
.prPiena.compAllineata{width:100%;left:auto;margin-left:0;padding:0}
.prPiena.cercaVuota{display:none}
@media(max-width:700px){
  .prPiena{width:100%;left:auto;margin-left:0;padding:0}
}
/* --- il programma per macchina --- */
.prog{width:100%;border-collapse:collapse;font-size:13px}
.prog th{background:#f4f7fb;padding:8px 10px;border-bottom:1px solid var(--bordo);
         font-size:12px;color:var(--grigio);vertical-align:top;min-width:150px}
.prog th.oggi{background:#e7f0fb}
.prog th.pgM,.prog td.pgM{text-align:left;position:sticky;left:0;background:#fff;z-index:1;
  min-width:130px;max-width:150px;font-size:13px;padding:8px 10px;border-right:1px solid var(--bordo)}
.prog th.pgM{background:#f4f7fb;z-index:3}
.pgT{font-weight:700;color:var(--blu3);font-variant-numeric:tabular-nums}
.pgT.zero{color:#b6bfcb;font-weight:500}
.prog td{border-bottom:1px solid #eef2f7;vertical-align:middle;padding:6px}
.pgL.chiusa{opacity:.75}
.pgVuoto{color:#c7cfda;text-align:center;font-size:12px;padding:6px 0}
.comp td.doppia{background:#fff6e6}
.comp .due{margin-left:5px;font-size:11px;font-weight:800;color:#a3282d}
/* --- quanto è piena la giornata: pieno = giallo, oltre = rosso --- */
.chip.gd .gdn b{font-weight:700}
.chip.gd .gdn b.pieno{color:#9a6b10}
.chip.gd .gdn b.oltre{color:#a3282d}
.chip.gd.pieno{border-color:#e2b750;background:#fffaf0}
.chip.gd.oltre{border-color:#d98d92;background:#fdf3f3}
.chip.gd.on.pieno,.chip.gd.on.oltre{background:var(--blu);border-color:var(--blu)}
/* sul giorno scelto il fondo diventa blu: il rosso del «oltre» sparirebbe,
   e proprio sul giorno che si sta compilando. Diventa una pastiglia. */
.chip.gd.on.pieno .gdn b,.chip.gd.on.oltre .gdn b{color:#fff}
.chip.gd.on .gdn b.pieno{background:#e2b750;color:#3a2a05;border-radius:8px;padding:0 6px}
.chip.gd.on .gdn b.oltre{background:#d9484f;color:#fff;border-radius:8px;padding:0 6px}
.rpAvv{margin-bottom:10px;background:#fbeced;border-color:#e2b3b6;color:#7a1f24}
tr.rpSfora td{background:#fbeced;color:#a3282d;font-weight:600;font-size:11.5px}
.comp tfoot td.ftL.pieno{color:#9a6b10;background:#fdf6e7}
.comp tfoot td.ftL.oltre{color:#a3282d;background:#fbeced}
.comp tfoot tr.ftOltre td{background:#fbeced;color:#a3282d;font-weight:700;text-align:left;
  border-top:0;font-size:12px;padding:7px 10px}
.rpT3{font-size:11.5px;color:var(--grigio);margin-top:3px}
/* --- le note del foglio --- */
.rpNote{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:5px}
.nota{display:inline-flex;align-items:center;gap:8px;background:#fdf3f3;border:1px solid #e2b3b6;
  border-radius:8px;padding:4px 10px;max-width:100%}
.nota .nt{font-weight:700;color:#7a1f24;font-size:12.5px;text-align:left;
  border:0;background:transparent;font-family:inherit;cursor:pointer;padding:2px 0;
  border-bottom:1px dashed rgba(122,31,36,.35)}
.nota .nt:hover{border-bottom-style:solid}
@media print{ .nota .nt{border-bottom:0;cursor:auto} }
.nota .nf{font-size:10.5px;color:var(--grigio);white-space:nowrap}
.nota .nx{border:0;background:transparent;color:#b6bfcb;font-size:15px;line-height:1;
  cursor:pointer;padding:0 2px}
.nota .nx:hover{color:var(--no)}
.piu{border:1px dashed var(--bordo);background:#fff;color:var(--grigio);border-radius:8px;
  font-size:11.5px;font-weight:700;padding:3px 10px;cursor:pointer}
.piu:hover{border-color:var(--blu3);color:var(--blu3)}
tr.rpN2 td{border-bottom:1px solid #eef2f7;padding:3px 8px 7px;text-align:left}
tr.rpN2 .nota{margin-right:6px;margin-bottom:4px}
@media print{ .piu,.nota .nx{display:none!important} }
.rpCarC{text-align:right;background:#fdf7c8;white-space:nowrap}
@media print{ .rpCarC{white-space:normal} }
tr.rpD td.rpCarC{padding-right:4px}
.rpCar{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;color:#4a6b2f;
  background:#eef7e6;border-radius:9px;padding:1px 8px}
.rpCar.pieno{color:#8a5f0f;background:#fbeec6}
.rpCar.oltre{color:#fff;background:#a3282d}
.rpN{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--grigio);
  background:#eef2f7;border-radius:9px;padding:0 7px;vertical-align:middle}
.rpN.pieno{color:#8a5f0f;background:#fbeec6}
.rpN.oltre{color:#fff;background:#a3282d}
/* --- la compilazione del programma, nella forma del foglio del reparto --- */
.comp{width:100%;border-collapse:collapse;font-size:13px}
.comp th{background:#eaf1f9;padding:7px 8px;border-bottom:1px solid var(--bordo);font-size:11.5px;
  color:var(--blu);font-weight:700;vertical-align:bottom;text-align:center;line-height:1.25;
  position:sticky;top:0;z-index:2}
.comp th small{display:block;font-weight:500;color:var(--grigio);font-size:10.5px}
.comp th.cD{text-align:left;left:0;z-index:4;min-width:230px;background:#fdfbe7}
.comp td{border-bottom:1px solid #eef2f7;padding:4px 8px;text-align:center;
  font-variant-numeric:tabular-nums;vertical-align:middle}
.comp td.cD{text-align:left;position:sticky;left:0;background:#fff;z-index:1;font-weight:650;
  max-width:340px;border-right:1px solid var(--bordo)}
.comp tr.cGr td{background:var(--blu3);color:#fff;font-weight:800;text-align:left;letter-spacing:.5px;
  padding:7px 10px;text-transform:uppercase;font-size:12px;position:sticky;left:0}
.comp tr.pz td.cD{background:#fbfcfe;font-weight:400;color:var(--grigio);padding-left:26px;font-size:12px}
.comp tr.pz td{border-bottom:1px solid #f5f8fc}
.comp tr.prod td{border-top:1px solid var(--bordo)}
.comp tr.prod.viva td.cD{background:#e8f7fd}
.comp input.nlav,.comp input.nsec{width:64px;text-align:center;padding:5px 4px;
  border:1px solid #9fd8ea;border-radius:6px;font-size:13px;background:#e9fbff;
  -moz-appearance:textfield;appearance:textfield}
.comp input.nlav{width:78px;font-weight:700;background:#d5f4ff}
.comp input:disabled{background:#f6f8fa;border-color:#e6ebf1;color:#b9c2cd}
.comp .fatto{font-weight:800;color:var(--blu3)}
.comp input.nvas{width:72px;text-align:center;padding:5px 4px;border:1px solid #cbb6e0;
  border-radius:6px;font-size:13px;background:#f6effc;-moz-appearance:textfield;appearance:textfield}
.comp th.thV{color:#6b2f8f}
.comp tr.pz.resto td.cD{background:#eef7e6}
.gia{display:block;margin-top:3px;border:1px solid var(--bordo);background:#fff;border-radius:8px;
  font-size:10.5px;font-weight:700;padding:2px 7px;cursor:pointer;font-family:inherit;
  color:var(--grigio);text-align:left;max-width:100%}
.gia:hover{border-color:var(--blu)}
.gia.gOk{color:#16794a;border-color:#bfe3cf;background:#f2fbf6}
.gia.gSotto{color:#9a6b10;border-color:#e2b750;background:#fffaf0}
.gia.gZero{color:#a3282d;border-color:#e2b3b6;background:#fdf3f3}
.gia.gNeg{color:#fff;background:#a3282d;border-color:#a3282d}
.gia.gNo,.gia.gErr{color:#b6bfcb;border-style:dashed}
.gia .gImp{opacity:.75;font-weight:600}

@media print{ .gia{display:none} }
.perche{border:1px solid var(--bordo);background:#fff;color:var(--blu3);border-radius:9px;
  font-size:11px;font-weight:700;padding:3px 9px;margin-left:8px;cursor:pointer;font-family:inherit}
.perche:hover{border-color:var(--blu);background:#f2f8fd}
table.comp td.cFo,table.comp th.cFo{width:104px;min-width:104px;text-align:center;padding:4px 6px}
.fCod{display:block;width:100%;margin:1px 0;border:1px solid var(--bordo);background:#fff;
  color:#1f7a4a;font-weight:700;font-size:10.5px;font-family:"SF Mono",Menlo,Consolas,monospace;
  border-radius:8px;padding:3px 4px;cursor:pointer;letter-spacing:-.2px}
.fCod:hover{border-color:#1f7a4a;background:#f0faf4}
.card.altrove{margin-top:12px;border-left:4px solid var(--blu3)}
.card.altrove tr.altroR td{vertical-align:middle}
@media print{ .card.altrove{display:none} }
table.comp tr.pz td.cFo{background:transparent}
.frm2 tr.fsR td{background:#eef4fb;font-weight:700;color:var(--blu);font-size:11.5px}
.frm2 td.fsI{color:#6b2f8f;font-style:italic;font-size:11.5px;text-align:left}
@media print{ .fCod{border:0;background:none;padding:0} }
@media(max-width:560px){ table.comp td.cFo,table.comp th.cFo{width:86px;min-width:86px}
  .fCod{font-size:9.5px} }
.qDa{border:1px solid var(--bordo);background:#fff;color:var(--blu3);border-radius:50%;
  width:17px;height:17px;line-height:1;padding:0;font-size:11px;font-weight:700;cursor:pointer;
  margin-left:4px;vertical-align:top}
.qDa:hover{border-color:var(--blu);background:#f2f8fd}
.fapT .fapF{color:#8a5a00;border-color:#e3c07a;background:#fdf6e6}
@media print{ .qDa{display:none} }
@media print{ .perche{display:none} }
/* i litri che avanzano: piccoli, sotto il numero delle vasche. Non è un
   errore, è la parte di vasca che non entra in un secchio intero. */
.comp .avz{display:block;font-size:10px;font-weight:600;color:#8a94a1;letter-spacing:.2px}
/* I PEZZI SONO PEZZI, I LITRI CHE AVANZANO SONO LITRI (28/09/2026):
   sotto i secchi del resto si legge quanto fanno — «3» e poi «= 39 L» —
   così non si confonde col «avanzano 3,0 L» della cella accanto. */
.comp .secL{display:block;font-size:9.5px;font-weight:600;color:#8a94a1;letter-spacing:.2px}
/* IL LOTTO GIÀ DI UN'ALTRA VASCA (28/09/2026): si vede in fase 1 del
   confezionamento, col tasto che lo rinumera al primo libero. */
.lottoDoppio{margin-top:10px;padding:10px 12px;border:1px solid #e0b15c;border-radius:10px;
  background:#fff9e9;color:#744700;font-size:12.5px;line-height:1.45}
.lottoDoppio .btn{margin-top:8px;width:100%}
.comp tr.pz.resto td.fatto{background:#f6fbf2}
.rst{border:1px solid var(--bordo);background:#fff;color:#b6bfcb;border-radius:9px;
  font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:1px 6px;margin-right:7px;cursor:pointer;vertical-align:middle}
.rst.on{background:#4a6b2f;border-color:#4a6b2f;color:#fff}
.rst:hover{border-color:#4a6b2f;color:#4a6b2f}
.rst.on:hover{color:#fff}
.comp tr.pz.sfora td{background:#fbeced;color:#a3282d;font-weight:700;font-size:11.5px}
.comp tr.pz.sfora td.cD{background:#fbeced;color:#a3282d;font-weight:700}
.comp .nulla{color:#c7cfda}
.comp td.cQ{color:#6b2f8f;font-weight:700}
.comp td.cU{color:#6b2f8f;text-align:left;padding-left:2px;font-size:12px}
.comp tfoot td{background:#f4f7fb;font-weight:800;border-top:2px solid var(--bordo)}
.comp tfoot td.cD{background:#f4f7fb;text-align:left}
.chip.gd{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
.chip.gd .gdn{font-size:11px;font-weight:700;opacity:.75}
/* il lunedì della settimana dopo: c'è, ma si vede che è un'altra settimana */
.chip.gd.sdop{border-style:dashed}
.rimA{margin-bottom:10px;background:#eef4fb;border-color:#c5d8ec;color:#2a4a6b}
.card.ctrl{border-left:4px solid #e2b750;background:#fffaf0}
.ctrlL{margin:0;padding-left:20px;font-size:12.5px;line-height:1.6;color:#7a5a10}
.ctrlL li{margin-bottom:2px}
.ore{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;color:#6b2f8f;
  background:#f6effc;border-radius:8px;padding:1px 7px}
.sdp{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.3px;background:#e6ecf5;color:#4a5a70;border-radius:7px;padding:1px 6px;margin-left:6px}
tbody.rpGio.sdop tr.rpD td{background:#eef2f8}
/* le stesse pastiglie a due righe nella schermata «Mettilo in programma»:
   la riga sotto e' la spiegazione, e appiccicata alla prima non si legge */
.chip.mspM,.chip.mpG,.chip.mpM,.chip.mpF{display:inline-flex;flex-direction:column;align-items:center;
  gap:1px;line-height:1.15;text-align:center}
.chip.mspM .gdn,.chip.mpG .gdn,.chip.mpM .gdn,.chip.mpF .gdn{font-size:11px;font-weight:700;opacity:.7}
.velo.mpV .pop label.cam{margin-top:12px}
/* LA TESTATA DELLA COMPILAZIONE: UNA SCELTA PER RIGA, ETICHETTATA.
   Prima la linea non aveva etichetta e «⚙ Macchine» sembrava una sesta
   linea; il giorno ce l'aveva; la ricerca e la vista stavano in una riga
   sciolta. Adesso le scelte stanno in un riquadro solo, con le etichette
   incolonnate a sinistra: si vede in un colpo d'occhio cosa si sta
   scegliendo e dove. */
.scelte{border:1px solid var(--bordo);border-radius:12px;background:#fbfcfe;
  padding:4px 12px;margin:10px 0 0}
.rigaSc{display:flex;align-items:flex-start;gap:12px;padding:7px 0}
.rigaSc+.rigaSc{border-top:1px dashed var(--bordo)}
.rigaSc>.cam{flex:0 0 104px;margin:7px 0 0;text-align:right;color:var(--grigio);font-size:12px}
.rigaSc>.chips{flex:1 1 auto;margin:0}
.rigaSc>.chip{flex:0 0 auto;align-self:center;margin:0}
@media(max-width:700px){
  .rigaSc{flex-direction:column;gap:5px;align-items:stretch;padding:6px 0}
  .rigaSc>.cam{flex:none;text-align:left;margin:0}
  .rigaSc>.chip{align-self:flex-start}
  .scelte{padding:2px 9px}
}
.compBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;padding:7px 0}
.compBar>.cam{flex:0 0 104px;margin:0;text-align:right;color:var(--grigio);font-size:12px}
.etV{font:650 12px inherit;color:var(--grigio)}
@media(max-width:700px){
  .compBar{padding:6px 0}
  .compBar>.cam{flex:none;text-align:left}
}
/* La compilazione scorre DENTRO sé stessa: con duecento prodotti in elenco,
   se scorresse la pagina il foglio della settimana finirebbe irraggiungibile
   — ed è quello che serve avere sott'occhio mentre si compila. */
.compW{max-height:58vh;overflow:auto}
@media(max-width:760px){ .compW{max-height:52vh} }
/* SUL TELEFONO, IN VISTA REINTEGRO, DUE COLONNE DI TROPPO.
   Le righe sono quattro volte tante e per arrivare alle vasche bisognava
   scorrere due schermate. «P Z» e «Lt./Kg.» dicono la misura, che è già
   scritta nel nome della pezzatura (DA LT.13): si spengono, e le colonne
   restano contate uguali — è CSS, non una tabella diversa. */
@media(max-width:700px){
  table.comp.rei th.cQ, table.comp.rei td.cQ,
  table.comp.rei th.cU, table.comp.rei td.cU{display:none}
}
/* ---- IL DITO, IN REPARTO ----
   Le caselle della compilazione erano alte 27 px e la pastiglia «resto» 18,
   con testo a 9,5: bersagli da mouse, non da mano sporca di pittura. Sotto i
   760 px si allargano. I 15 px del carattere non sono estetica: sotto i 16
   iOS ingrandisce da solo la pagina appena tocchi un campo, e da lì in poi
   non si legge più niente. */
@media(max-width:760px){
  .comp input.nlav,.comp input.nsec,.comp input.nvas{padding:9px 4px;font-size:15px}
  .rst{padding:5px 10px;font-size:11px}
  .nota .nx{padding:4px 8px;font-size:14px}
}
/* con lo schermo stretto la colonna del nome si stringe: se no restano
   novanta pixel per nove colonne di numeri e si scorre di lato a ogni riga */
@media(max-width:560px){
  .comp th.cD,.comp td.cD{min-width:132px;max-width:150px}
}
.vaiA{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--bordo)}
.vaiA .dett{margin:0}
.vaiA .vaiB{display:flex;gap:6px;flex-wrap:wrap}
.chip.vai{font-size:12px;padding:5px 12px;white-space:nowrap}
.chip.mac{border-style:dashed;color:var(--grigio)}
/* --- scegliere le macchine di una linea --- */
.pMac{max-width:560px;max-height:82vh;overflow:auto}
.gMac{border:1px solid var(--bordo);border-radius:10px;padding:10px;margin-bottom:10px;background:#fbfcfe}
.gMacT{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.gMacT .gN{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--bordo);border-radius:7px;font-size:14px}
.gMacT .gV{width:64px;padding:7px 4px;text-align:center;border:1px solid var(--bordo);border-radius:7px;font-size:14px}
.gMacT .eti{font-size:11px;color:var(--grigio);white-space:nowrap}
.gMacM{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mSel{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--bordo);border-radius:14px;
  padding:4px 10px;font-size:12.5px;cursor:pointer;background:#fff}
.mSel.on{border-color:var(--blu3);background:#e8f4fd;font-weight:650;color:var(--blu)}
.mSel input{margin:0}
.gMac .dett{font-size:11.5px}
.gMod{margin-bottom:8px}
.gMod .chip{font-size:11.5px;padding:4px 10px}
.gFam{max-height:190px;overflow:auto;border:1px solid var(--bordo);border-radius:8px;padding:7px}
.mSel .cnt{font-size:10.5px;color:var(--blu3);background:#e8f4fd;border-radius:8px;padding:0 5px;margin-left:2px}
.mSel.vuota{opacity:.55}
.mSel.vuota .cnt{color:#b6bfcb;background:#f0f2f5}
table.mk td{text-align:left;padding:5px 8px;font-size:12.5px}
table.mk td.cD{position:static;max-width:none;font-weight:650}
table.mk td.mkP{color:var(--grigio);font-size:11.5px}
table.mk tr.cGr td{position:static}
.mkC{display:block;font-size:10.5px;color:#b6bfcb;font-weight:500;font-variant-numeric:tabular-nums}
table.mk tr.mkR{cursor:pointer}
table.mk tr.mkR:hover td{background:#f2f8fd}
table.mk tr.arR{cursor:pointer}
table.mk tr.arR:hover td{background:#f2f8fd}
table.mk tr.arR.ora td{background:#eef7e6;font-weight:700}
table.mk tr.pk-ok td{background:#f3faf0}
table.mk tr.pk-pez td{background:#fdf6e7}
table.mk tr.pk-no td{background:#f7f8fa}
table.mk tr.pk-nostd td{background:#fdf3f3}
table.mk tr.pk-altra td{background:#eef4fb}
/* Le formule standard e allegate sono entrambe scelte operative. La riga
   selezionata deve restare inequivocabile anche nell'elenco lungo su iPhone. */
table.mk tr.fmScelta{cursor:pointer}
table.mk tr.fmScelta:hover td{background:#f3f8fd}
table.mk tr.fmScelta.on td,table.mk tr.fmScelta.on td.cD{background:#e8f4fd}
.fmCheck{display:none;margin-left:7px}
tr.fmScelta.on .fmCheck{display:inline-block}
@media print{ .chip.vai,.setti button{display:none!important} }
@media print{ .compW{max-height:none;overflow:visible} .chip.vai{display:none} }
.compBar input[type=search]{flex:1;min-width:180px;padding:8px 10px;border:1px solid var(--bordo);
  border-radius:8px;font-size:14px;-webkit-appearance:none;appearance:none}
/* --- il foglio della settimana, come quello che gira in reparto --- */
.rpTesta{text-align:center;padding:10px 12px 8px;border-bottom:1px solid var(--bordo);background:#fff}
.rpT1{font-weight:800;font-size:15px;letter-spacing:.6px;text-transform:uppercase}
.rpT2{font-style:italic;font-weight:700;color:var(--blu3);font-size:14px}
table.rp{font-size:12.5px}
table.rp th{min-width:0;text-align:center}
table.rp td{padding:5px 8px;text-align:center;vertical-align:middle;
  font-variant-numeric:tabular-nums;border-bottom:1px solid #eef2f7}
table.rp td.pgM{font-weight:700;color:var(--blu);font-size:12px;min-width:104px;max-width:120px}
tr.rpD td{background:#fdf7c8;font-weight:800;border-bottom:1px solid #e3d98a;
  text-align:left;padding:5px 10px}
/* la maiuscola vale per il nome del giorno, NON per tutta la fascia: con
   `capitalize` su tutto usciva «21 Di 6» invece di «21 di 6» */
tr.rpD td.pgM{text-transform:capitalize}
tr.rpD td.pgM{background:#fdf7c8}
tr.rpD td.pgT{text-align:right;color:var(--blu3)}
tr.rpD td.pgT.zero{color:#a9a173;font-weight:600}
tbody.rpGio.oggi tr.rpD td{background:#fbeeb0}
tr.rpVuota td{color:#c7cfda}
tr.rpVuota td.pgM{color:var(--grigio);font-weight:600}
/* le macchine ferme: una riga sola, in piccolo, in fondo al giorno. Non è un
   dato del programma, è il suo negativo — deve leggersi come una nota. */
tbody.rpLib td{padding:4px 8px;background:#fcfdfe}
tbody.rpLib td.pgM{color:#9aa5b1;font-weight:600;font-size:11px}
.macLib{display:inline-block;margin:2px 5px 2px 0;padding:2px 7px;border-radius:9px;
        border:1px solid #e3e8ee;background:#fff;color:#9aa5b1;font-size:11px;line-height:1.5}
.macLib.sopra{background:#e6f0fb;border-color:#7ea8d8;color:#2a5d92}
/* dove cadrà la riga che stai trascinando: si vede, altrimenti si lascia
   il mouse a caso e si scopre dopo dov'è finita */
tbody.rpLib.sopra td{background:#e6f0fb;box-shadow:inset 0 0 0 2px #7ea8d8}
tbody.rpGio.sopra tr.rpD td{background:#cfe2f7;box-shadow:inset 0 2px 0 #4a86c5,inset 0 -2px 0 #4a86c5}
tr.pgL[draggable="true"]{cursor:grab}
tr.pgL[draggable="false"]{cursor:default}
table.rp td.rpI{text-align:left;font-weight:600;color:#7a4bab;max-width:190px;font-size:11.5px;line-height:1.25}
/* «pezzature da decidere» si tocca: dice perché non ce le ha e le fa
   scrivere una volta sola. In stampa resta la scritta e basta (19/08). */
.pzChiedi{display:inline-block;border-bottom:1px dashed currentColor;cursor:pointer}
/* il segno di una pezzatura che non è scritta su questo prodotto in SAP:
   si vede anche sul foglio stampato, apposta */
.pzM{display:block;font-weight:600;color:#b4690e}
/* nel confezionamento il segno sta in riga col dettaglio dell'imballo, e la
   giacenza (19/09) accanto: chi programma decide la pezzatura coi numeri davanti */
.sotto .pzM{display:inline}
.sotto .pzG{color:#1f7a4a}
/* il dettaglio delle vasche per pezzatura, sotto il totale: piccolo, con la
   parola accanto, e in stampa nero come il resto del foglio */
.vPez{display:block;margin-top:2px;font-size:10.5px;font-weight:700;color:#6b2f8f;
  white-space:nowrap;line-height:1.2}
@media print{ .vPez{color:#000;font-size:8px} }
@media print{ .pzChiedi{border-bottom:0} .pzM{color:#000} }
table.rp td.rpF{color:#1f7a4a;font-size:10.5px;font-weight:700;line-height:1.2;min-width:96px}
table.rp td.rpP{text-align:left;font-weight:700;font-size:13px;font-family:"SF Mono",Menlo,Consolas,monospace;
  color:var(--blu);letter-spacing:-.2px}
table.rp td.rpL,table.rp td.rpS{font-weight:700}
/* le vasche si cambiano qui: numero, meno, più e il taglio. Bersagli da dito
   (34 px), non da mouse. */
.vsc{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}
.vsc input.nlv{width:68px;min-height:34px;text-align:center;font-weight:800;font-size:15px;
  border:1px solid #9fd8ea;border-radius:7px;background:#d5f4ff;padding:4px 2px;
  -moz-appearance:textfield;appearance:textfield;font-family:inherit}
.vsc .vm,.vsc .vp,.vsc .vd{min-width:30px;min-height:34px;border:1px solid var(--bordo);
  background:#fff;border-radius:7px;font-size:16px;font-weight:800;line-height:1;
  color:var(--blu3);cursor:pointer;padding:0;font-family:inherit}
.vsc .vm:hover,.vsc .vp:hover{background:#eef7fc;border-color:#9fd8ea}
.vsc .vd{font-size:14px;color:#6b2f8f}
.vsc .vd:hover{background:#f6effc;border-color:#cbb6e0}
.vsc .vd.spento{visibility:hidden;pointer-events:none}
@media(max-width:560px){ .vsc{gap:2px} .vsc input.nlv{width:64px} }
/* in stampa il foglio deve tornare a essere un foglio: solo il numero */
@media print{
  .vsc .vm,.vsc .vp,.vsc .vd{display:none!important}
  .vsc input.nlv{border:0;background:transparent;font-size:inherit;width:auto;min-height:0;padding:0}
}
table.rp td.rpS{color:#1f7a4a}
table.rp td.rpQ{font-weight:700}
table.rp td.rpU{color:var(--grigio);font-size:11.5px}
table.rp td.rpPs{color:#a3282d;font-weight:700}
/* LE COLONNE DEI NUMERI HANNO UNA LARGHEZZA FISSA.
   22/08 — «quando cambio il numero con + la casella si sposta un po'». La
   tabella aveva le colonne automatiche: bastava che i secchi passassero da
   tre a quattro cifre (205 → 1.507) perché il browser ridistribuisse TUTTE le
   colonne, e il tasto + scappava da sotto il dito. Misurato col browser vero:
   da 7 a 8 vasche la casella si spostava di 13 px e ogni colonna cambiava
   larghezza. Adesso i numeri stanno in colonne di larghezza fissa e lo spazio
   che avanza va al testo, che è quello che sa andare a capo. */
table.rp td.rpL,table.rp th.rpL{width:202px;min-width:202px}
table.rp td.rpS,table.rp th.rpS{width:80px;min-width:80px}
table.rp td.rpQ,table.rp th.rpQ{width:66px;min-width:66px}
table.rp td.rpU,table.rp th.rpU{width:48px;min-width:48px}
table.rp td.rpPs,table.rp th.rpPs{width:66px;min-width:66px}
@media(max-width:560px){
  table.rp td.rpL,table.rp th.rpL{width:188px;min-width:188px}
  table.rp td.rpS,table.rp th.rpS{width:66px;min-width:66px}
}
tr.pgL{cursor:grab}
tr.pgL.corso td.pgM{box-shadow:inset 3px 0 0 #c98a1a}
tr.pgL.chiusa td.pgM{box-shadow:inset 3px 0 0 #16794a}
tr.pgL.attesa td.pgM{box-shadow:inset 3px 0 0 var(--blu3)}
tr.rpSeg td{border-top:0}
tbody.rpB.sopra td{background:#e6f0fb}
tbody.rpB:hover tr.pgL td{background:#f7fafd}
tfoot.pgTot td{background:#f4f7fb;font-weight:800;text-align:left;padding:7px 10px;
  border-top:2px solid var(--bordo)}
@media print{ .prPiena{width:auto;left:auto;margin-left:0;padding:0} }
/* --- il piede del foglio, e la stampa --- */
.rpPie{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:7px 12px;border-top:1px solid var(--bordo);font-size:10.5px;color:var(--grigio)}
.rpPieD{white-space:nowrap}
body.soloFoglio .testa,body.soloFoglio #barraRuoli,body.soloFoglio #turno,
body.soloFoglio #fascia,body.soloFoglio .soloSchermo,body.soloFoglio .btn,
body.soloFoglio .vaiA,body.soloFoglio .setti,body.soloFoglio .velo,
body.soloFoglio .sez,body.soloFoglio .avviso{display:none!important}
/* l'avviso «trascina una riga su un giorno più libero» è un consiglio da
   schermo: su un foglio appeso alla macchina non vuol dire niente, e il
   rosso sulla fascia del giorno lo dice già */
body.soloFoglio .card{border:0;box-shadow:none;padding:0}

/* --- LA FINESTRA A PARTE: il foglio e basta, da guardare ---
   Qui non si scrive: e' uno schermo appeso, non un posto dove compilare.
   I comandi che nella pagina intera servono a modificare (piu', meno,
   dividi, le × delle note, il + Nota) qui non sono attaccati a niente:
   lasciarli visibili vorrebbe dire mettere davanti pulsanti che non fanno
   nulla. Il numero delle vasche resta, senza bordi, come in stampa. */
body.fogliAparte .vsc .vm, body.fogliAparte .vsc .vp, body.fogliAparte .vsc .vd,
body.fogliAparte .nota .nx, body.fogliAparte [data-nlav], body.fogliAparte #notaFoglio{
  display:none!important}
body.fogliAparte .vsc input.nlv{border:0;background:none;pointer-events:none;
  width:auto;min-height:0;font-size:15px}
body.fogliAparte .nota .nt{pointer-events:none;text-decoration:none}
/* la finestra a parte e' uno schermo appeso: la barra dei pannelli, il
   turno e il «cambio operatore» li' non servono, e il tasto per cambiare
   operatore su uno schermo lasciato acceso e' anche un rischio */
body.fogliAparte #barraRuoli, body.fogliAparte #turno,
body.fogliAparte #fascia,
/* la riga di tasti sopra il foglio (Archivio, PDF, «torna alla
   compilazione») e i consigli da schermo appartengono alla pagina intera:
   qui non sono attaccati a niente, e un tasto che non fa niente e' peggio di
   un tasto che non c'e' */
body.fogliAparte .vaiA, body.fogliAparte .soloSchermo{display:none}
body.fogliAparte{background:#fff}
.fapT{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 12px}
.fapT b{font-size:18px;color:var(--blu3)}
.fapT span{color:var(--grigio);font-size:13px}
.fapV{color:#1f7a45;font-weight:650;font-size:12px}
.fapV::before{content:'●';margin-right:5px;font-size:9px;vertical-align:1px}
@media print{ .fapT{display:none} }
@media print{
  /* VERTICALE. Il foglio ha nove colonne e in orizzontale ci stava comodo,
     ma in reparto si appende un A4 in piedi: si stringe. Quello che si
     stringe sono le colonne di testo (imballo, formula, prodotto), che il
     testo lo mandano a capo; i numeri restano leggibili perché sono corti. */
  body.soloFoglio table.rp{font-size:10.5px}
  body.soloFoglio.inPiedi table.rp{font-size:8.5px;table-layout:fixed;width:100%}
  body.soloFoglio table.rp thead{display:table-header-group}
  body.soloFoglio.inPiedi table.rp th{padding:4px 3px;font-size:8px}
  body.soloFoglio.inPiedi table.rp td{padding:3px;line-height:1.2;word-break:break-word}
  body.soloFoglio tbody.rpGio,body.soloFoglio tbody.rpB{page-break-inside:avoid}
  /* la fascia gialla del giorno non resta da sola in fondo alla pagina: chi
     legge la pagina dopo vedrebbe macchine e prodotti senza sapere che giorno
     è. Provato col PDF vero: succedeva in orizzontale, alla terza pagina. */
  body.soloFoglio tbody.rpGio{break-after:avoid-page;page-break-after:avoid}
  /* le larghezze: la somma fa 100 */
  body.soloFoglio.inPiedi table.rp td.pgM,body.soloFoglio table.rp th.pgM{width:11%;min-width:0;max-width:none;font-size:8.5px}
  body.soloFoglio.inPiedi table.rp td.rpI,body.soloFoglio table.rp th.rpI{width:21%;max-width:none;font-size:8px;line-height:1.15}
  body.soloFoglio.inPiedi table.rp td.rpF,body.soloFoglio table.rp th.rpF{width:13%;min-width:0;font-size:7.5px}
  body.soloFoglio.inPiedi table.rp td.rpP,body.soloFoglio table.rp th.rpP{width:22%;font-size:9px;letter-spacing:-.3px}
  body.soloFoglio.inPiedi table.rp td.rpL,body.soloFoglio table.rp th.rpL{width:6%}
  body.soloFoglio.inPiedi table.rp td.rpS,body.soloFoglio table.rp th.rpS{width:7%}
  body.soloFoglio.inPiedi table.rp td.rpQ,body.soloFoglio table.rp th.rpQ{width:6%}
  body.soloFoglio.inPiedi table.rp td.rpU,body.soloFoglio table.rp th.rpU{width:5%}
  body.soloFoglio.inPiedi table.rp td.rpPs,body.soloFoglio table.rp th.rpPs{width:9%}
  /* «Formula standard.» va su una riga sola: il numero è quello che conta */
  body.soloFoglio.inPiedi table.rp td.rpF br{display:none}
  body.soloFoglio .rpTesta{border-bottom:1px solid #999;padding:6px 8px 5px}
  body.soloFoglio.inPiedi .rpT1{font-size:12px}
  body.soloFoglio.inPiedi .rpT2{font-size:11px}
  body.soloFoglio.inPiedi .rpT3{font-size:8px}
  body.soloFoglio .nota{background:#fff;border-color:#999;padding:2px 7px}
  body.soloFoglio.inPiedi .nota .nt{font-size:9px}
  body.soloFoglio .rpVuota td{color:#999}
  body.soloFoglio tr.rpD td{background:#f4f0c8!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.soloFoglio.inPiedi tr.rpD td{padding:3px 6px;white-space:normal;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.soloFoglio.inPiedi .rpCar{font-size:8px;padding:0 5px;margin-left:4px}
  body.soloFoglio.inPiedi .rpN{font-size:7.5px;padding:0 4px;margin-left:3px}
  body.soloFoglio .rpCar,body.soloFoglio .rpN{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.soloFoglio.inPiedi .rpPie{font-size:8px;padding:5px 6px}
  body.soloFoglio.inPiedi tr.rpN2 td{padding:2px 6px 5px}
}
@media print{
  .barra,.chips,#turno,#fascia,.btn,#barraRuoli,.marchio,.installaApp{display:none!important}
  .prT th{position:static}.prT th.pT1,.prT td.pT1{position:static}
  .card{border:0;box-shadow:none}
}
#pCerca{width:100%;-webkit-appearance:none;appearance:none}
.agGr label{display:block;margin-bottom:3px}
@media(max-width:820px){.opGriglia{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.opGriglia{grid-template-columns:repeat(2,1fr)}}
.opP label.cam{margin:0 0 2px;font-size:9.5px;letter-spacing:.02em;color:var(--grigio);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opP select{padding:5px 4px;font-size:12.5px}
.opAtt{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--grigio);cursor:pointer;flex:none}
.opEst{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--bordo);
  border-radius:10px;font-size:11.5px;font-weight:700;color:#174f78;cursor:pointer;flex:none}
.opEst:has(input:disabled){background:#eef7f0;color:#267a42;cursor:default}
/* il registro: colonne larghe e righe che respirano — attaccate non si
   leggevano, e l'ora finiva incollata al nome */
.regT{width:100%;border-collapse:collapse;table-layout:fixed}
.regT th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--grigio);font-weight:700;padding:0 16px 7px 0;border-bottom:1px solid var(--bordo)}
.regT td{padding:11px 16px 11px 0;vertical-align:top;border-bottom:1px solid #f0f3f7;font-size:13.5px}
.regT tr:last-child td{border-bottom:0}
.regT th:last-child,.regT td:last-child{padding-right:0}
.regT .rQ{width:88px;white-space:nowrap;color:var(--grigio);font-size:12.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.regT .rC{width:23%;font-weight:650}
.regT .rD{width:17%;color:var(--grigio);font-size:12.5px}
.regT .rA{line-height:1.45}
.regT .rS{width:17%;color:var(--grigio);font-size:12.5px}
.rDet{display:block;color:var(--grigio);font-size:12.5px;margin-top:2px}
.rNum{color:#9aa5b4;margin-left:5px}
@media(max-width:700px){
  .regT,.regT thead,.regT tbody,.regT tr,.regT td{display:block;width:auto}
  .regT thead{display:none}
  .regT tr{border-bottom:1px solid var(--bordo);padding:9px 0}
  .regT tr:last-child{border-bottom:0}
  .regT td{border:0;padding:1px 0}
  .regT .rQ{display:inline;font-size:12px}
  .regT .rC{display:inline;margin-left:8px}
  .regT .rD:not(:empty){color:var(--grigio);font-size:12px;margin-top:2px}
  .regT .rA{font-size:14px;margin-top:3px}
  .regT .rS:not(:empty){font-size:12px}
}
.nowrap{white-space:nowrap}

/* ================= CIMA COMPATTA (22/08, Francesco) =================
   «rendi tutta questa parte più compatta per dare più spazio al programma
   di produzione».

   Sopra il programma stavano sei fasce una sull'altra — ruoli, turno, stato
   SAP, intestazione, viste, compilazione — e insieme si mangiavano circa
   quattrocento pixel prima della prima riga di lavoro. Su un portatile
   restava mezzo schermo per il lavoro vero.

   Qui si stringono tutte. Nessuna informazione tolta: solo meno aria,
   caratteri un filo più piccoli, e su schermi bassi un altro giro di
   risparmio. Le regole stanno in fondo al foglio apposta: si cancella questo
   blocco e la pagina torna esattamente com'era.
   ==================================================================== */

/* barra dei ruoli */
.ruoli{padding:6px 0 7px}
.ruolo{padding:6px 12px;border-radius:9px;font-size:11.5px}
@media(min-width:760px){.ruolo{padding:6px 10px;font-size:12.5px}}

/* striscia del turno e stato SAP */
.turno{font-size:11.5px}
.turnoR{padding:4px 14px;gap:8px}
.demo{font-size:11.5px;padding:5px 14px}

/* intestazione della sezione */
.testa{padding:8px 0 10px}
.testa .et{font-size:10px;letter-spacing:.1em}
.testa h1{margin:2px 0 1px;font-size:16.5px}
.testa .sub{font-size:12px}

/* Su schermo largo l'intestazione stava su quattro righe — occhiello,
   titolo, sottotitolo, settimana — con mezzo schermo di blu vuoto a destra.
   Su due righe dice le stesse cose e ne restituisce una sessantina di pixel.
   Le posizioni sono date con `order`, così una sezione che al posto della
   settimana mette una tendina (le altre schermate fanno così) se la ritrova
   comunque in fondo, dov'è sempre stata. */
@media(min-width:900px){
  .testa .wrap{
    display:grid;grid-template-columns:1fr auto;
    align-items:center;column-gap:18px;row-gap:2px;
  }
  .testa .et  {grid-area:1 / 1}
  .testa .setti{grid-area:1 / 2;width:min(430px,100%);margin:0}
  .testa h1   {grid-area:2 / 1;margin:0}
  .testa .sub {grid-area:2 / 2;margin:0;text-align:right;white-space:nowrap}
  /* una tendina, dove c'è al posto della settimana, resta dov'era: sotto,
     larga quanto la riga */
  .testa .wrap>select{grid-column:1 / -1;margin-top:6px}
}

/* navigazione della settimana */
.setti{margin-top:7px;gap:6px}
.setti button{width:32px;height:28px;font:700 14px inherit}
.setti .txt{font-size:12.5px}

/* le tre viste: Calendario / Programma / Pezzature */
.chips{margin:7px 0 2px}
.chip.vis{padding:6px 12px}

/* riquadro Compilazione */
.card{padding:9px 11px}
.tit{font-size:14px}
/* la spiegazione sotto il titolo ha il margine scritto nell'elemento:
   per stringerlo serve la forzatura, non c'è altro modo di arrivarci */
.card>.tit+.dett{margin:2px 0 6px !important;font-size:12px}
.scelte{margin-top:7px;padding:2px 11px}
.rigaSc{padding:4px 0}
.rigaSc>.cam{margin-top:5px}
.compBar{padding:5px 0}

/* i riquadri dei giorni: restano leggibili, occupano meno */
.chip.gd{padding:6px 10px}
.chip.gd .gdn{font-size:10.5px}

.sceltaCerca{width:100%;padding:11px 12px;border:1px solid var(--bordo);border-radius:9px;font:inherit;background:#fff;color:var(--testo);margin-bottom:8px}
.sceltaCerca:focus{outline:2px solid #58aaf7;outline-offset:1px}
.sceltaVuota{padding:3px 0 8px}

/* ---------- due bottoni per riga, invece di uno sotto l'altro ----------
   «mettili nella stessa riga così guadagni spazio» e «ridimensiona questa
   finestra» — Francesco, 22/08.

   Erano bottoni larghi tutta la finestra, uno per riga: sei scelte facevano
   una colonna alta mezzo schermo. Su due colonne la stessa finestra è alta
   la metà.

   L'azione che TOGLIE e la chiusura restano su una riga loro, larghe: non si
   schiacciano fra le altre e non si tocca «Togli dal piano» per sbaglio. */
@media(min-width:560px){
  .velo.velScelta .pop{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:16px 16px 18px;
  }
  .velo.velScelta .pop h3,
  .velo.velScelta .pop .dett,
  .velo.velScelta .pop .sceltaCerca,
  .velo.velScelta .pop .sceltaVuota{grid-column:1 / -1}
  .velo.velScelta .pop h3{font-size:17px}
  .velo.velScelta .pop .dett{margin-bottom:2px !important}
  .velo.velScelta .pop .btn{margin:0 !important;padding:10px}
  .velo.velScelta .pop .btn.no,
  .velo.velScelta .pop .btn[data-x]{grid-column:1 / -1}
  .velo.velScelta .pop .btn.no{margin-top:4px !important}
}

/* ---------- l'avviso delle lavorazioni rimaste indietro ----------
   Testo e due bottoni stavano su tre righe: ci stanno su una. */
.avviso.rimA{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.avviso.rimA br{display:none}
.avviso.rimA > .btn{width:auto;flex:0 0 auto;margin:0 !important;padding:7px 13px}

/* Schermi bassi (portatili 720p, finestra affiancata): un altro giro.
   Sotto i 780 px di altezza ogni riga di intestazione è una riga di
   programma in meno, e il programma è il motivo per cui si è qui. */
@media(max-height:780px){
  .ruoli{padding:4px 0 5px}
  .ruolo{padding:5px 10px}
  .turnoR{padding:3px 14px}
  .demo{padding:4px 14px;font-size:11px}
  .testa{padding:6px 0 8px}
  .testa h1{font-size:15.5px}
  .testa .sub{font-size:11.5px}
  .setti{margin-top:5px}
  /* solo la spiegazione sotto il titolo: si è già letta una volta.
     NON la riga in fondo, che dice quanti prodotti sono a schermo e quanti
     ne arrivano scorrendo — quella è un dato, e nasconderla fa credere che
     l'elenco finisca lì. */
  .card>.tit+.dett{display:none}
  .chips{margin:5px 0 2px}
}

/* =========================================================================
   LA VESTE DEL CRM, ANCHE QUI — 23/08/2026
   «Per CRM, programma di produzione e giacenza puoi usare le impostazioni che
   riporto in questo link, ma con la possibilità che se non mi piace torniamo
   indietro» — Francesco.

   Le stesse identiche impostazioni che il CRM ha già in `sf-skin.css`:
   carattere Inter (che su Windows diventa Segoe UI, come nel CRM), blu
   #105da1, fondo #f3f3f3, angoli piccoli. Copiate dalle sue variabili, non
   «somiglianti».

   COME SI TORNA INDIETRO: tutto sta sotto `html.tema-sf`. Senza quella
   classe queste righe non fanno niente e la pagina è esattamente com'era.
   La classe la mette e la toglie l'interruttore in basso a sinistra, e la
   scelta resta su quel telefono o su quel computer.
   Nessuna regola qui sotto tocca un componente: solo variabili, così se
   domani cambia un pezzo del portale la veste lo segue da sola.
   ========================================================================= */
html.tema-sf{
  --blu:#083253; --blu2:#0b4577; --blu3:#105da1;
  --sfondo:#f3f3f3; --carta:#fff; --bordo:#e5e5e5;
  --testo:#181818; --grigio:#706e6b; --grigio2:#969492;
  --ok:#2e844a; --okbg:#eafbe6;
  --att:#8a5a00; --attbg:#fef5e9;
  --no:#ba0517; --nobg:#fef1ee;
  --r:6px;
}
html.tema-sf body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* l'interruttore: piccolo, in basso a sinistra, scolorito finché non lo si
   tocca. Sta FUORI da `html.tema-sf` perché deve vedersi anche a veste
   spenta — se no non si potrebbe più riaccendere. */
.tema-int{position:fixed;left:10px;bottom:10px;z-index:900;display:inline-flex;
  align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--carta);color:var(--grigio);
  font:inherit;font-size:11.5px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.10);
  cursor:pointer;opacity:.55;transition:opacity .15s,box-shadow .15s}
.tema-int:hover,.tema-int:focus-visible{opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.tema-int .pall{width:9px;height:9px;border-radius:50%;background:var(--blu3);flex:0 0 auto}
@media(max-width:640px){.tema-int{padding:7px 12px;font-size:12px;opacity:.7}}
@media print{.tema-int{display:none!important}}

/* Importazione guidata del programma da Excel */
.ixPop{width:min(1180px,calc(100vw - 24px));max-width:1180px;max-height:calc(100vh - 24px);overflow:auto}
.ixFile{display:block;width:100%;margin:12px 0 18px;padding:14px;border:1px solid var(--bordo);border-radius:12px;background:var(--carta)}
.ixFogli{display:grid;gap:8px;margin:14px 0 18px}
.ixFoglio{display:grid;grid-template-columns:auto 1fr minmax(170px,230px);align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bordo);border-radius:12px}
.ixFoglio input{width:20px;height:20px}.ixFoglio select,.ixRiga select,.ixRiga input{width:100%;padding:9px 10px;border:1px solid var(--bordo);border-radius:9px;background:var(--carta);font:inherit}
.ixElenco{display:grid;gap:12px;margin:14px 0}
.ixRiga{padding:14px;border:1px solid var(--bordo);border-left:5px solid var(--blu3);border-radius:14px;background:var(--carta)}
.ixRiga.confermato{border-left-color:#21804a;background:#f4fbf6}.ixRiga.escluso{border-left-color:#9aa4b2;opacity:.7}.ixRiga.cerco{opacity:.75}
.ixTesta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;font-size:17px}
.ixMeta{display:block;color:var(--grigio);font-size:13px;font-weight:500;margin-top:3px}
.ixTit{font-weight:750;margin:9px 0;color:var(--blu2)}
.ixStato{white-space:nowrap;padding:5px 9px;border-radius:999px;background:#eef2f7;color:var(--grigio);font-size:12px;font-weight:800}
.ixStato.ok{background:#dff4e5;color:#176b3c}.ixStato.no{background:#eceff3;color:#596575}.ixStato.att{background:#fff1cf;color:#815300}
.ixCampi{display:grid;grid-template-columns:1fr 160px 1.5fr 120px;gap:10px;margin-top:10px}
.ixCampi label{font-size:12px;font-weight:750;color:var(--grigio)}
.ixCampi label>*{display:block;margin-top:4px}
.ixAzioni{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ixRicerca{display:grid;grid-template-columns:1fr auto;gap:8px;margin:8px 0}
.ixAvviso{margin:8px 0}.ixPiede{position:sticky;bottom:-1px;display:grid;grid-template-columns:1fr minmax(260px,420px) auto;gap:10px;align-items:center;padding:12px 0 2px;background:var(--carta);border-top:1px solid var(--bordo)}
.ixPiede .btn{margin:0}
@media(max-width:760px){
  .ixFoglio{grid-template-columns:auto 1fr}.ixFoglio select{grid-column:2}
  .ixCampi{grid-template-columns:1fr 1fr}.ixCampi label:nth-child(3){grid-column:1/-1}
  .ixPiede{position:static;grid-template-columns:1fr}.ixPiede .btn{width:100%}
  .ixTesta{font-size:15px}.ixAzioni{justify-content:stretch}.ixAzioni .chip{flex:1}
}
@media print{.ixV{display:none!important}}


/* Fabbisogni SAP: avviso operativo, leggibile anche su tablet e telefono. */
.fabbLettura{margin:0 0 12px;padding:10px 12px;border:1px solid #e0b15c;border-radius:10px;background:#fff9e9;color:#744700;font-size:13px}
.fabbAvviso{margin:0 0 14px;padding:13px;border:2px solid #bd1f2d;border-radius:12px;background:#fff0f1;color:#71131b}
.fabbAvviso h3{margin:0 0 9px;font-size:17px;color:#9c1824}
.fabbTesta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fabbTitolo{min-width:0}
.fabbSintesi{display:none;font-size:13px;color:#861721}
.fabbComandi{display:flex;align-items:flex-start;gap:6px;flex:0 0 auto}
.fabbVista{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
.fabbToggle{display:block;border:1px solid #bd1f2d;border-radius:9px;background:#fff;color:#9c1824;padding:7px 12px;font-size:13px;font-weight:800;cursor:pointer}
.fabbVistaBtn{border:1px solid #bd1f2d;border-radius:9px;background:#fff;color:#9c1824;padding:7px 12px;font-size:13px;font-weight:800;cursor:pointer}
.fabbVistaBtn.on{background:#bd1f2d;color:#fff}
.fabbGiorno{margin-top:10px;border:1px solid #efb8bd;border-radius:10px;background:rgba(255,255,255,.45);overflow:hidden}
.fabbGiorno h4{margin:0;padding:9px 11px;background:#f8cfd3;color:#861721;font-size:15px}
.fabbGiorno .fabbRiga{padding-left:11px;padding-right:11px}
/* 20/09 — «per tipologia»: la testata della fascia dice il genere a sinistra
   e quante voce/quanto manca a destra, che a capo sul telefono. */
.fabbGrTipo h4{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.fabbQuanti{font-size:13px;font-weight:700;color:#9c1824}
.fabbRiga{padding:9px 0;border-top:1px solid #efb8bd;font-size:14px;line-height:1.35}
.fabbRiga:first-of-type{border-top:0}
.fabbTipo{display:inline-block;margin-right:5px;padding:2px 7px;border-radius:999px;background:#bd1f2d;color:#fff;font-size:12px;font-weight:800}
.fabbUsi{margin-top:4px;color:#71131b;font-size:13px}
.card.mancanzaScorte{border:2px solid #bd1f2d;background:#fff0f1}
.card.mancanzaScorte .tit{color:#8f1621}
.mancaScortaTesto{color:#a01622!important;margin-top:5px}
.fabbPop{border:4px solid #bd1f2d;border-top-width:12px}
.fabbPop h3{color:#a01622}
.fabbEccezione{margin:12px 0;padding:10px 12px;border-radius:10px;background:#fff3d9;color:#6f4700;line-height:1.4}
/* «Cosa manca» si apre e si chiude ovunque (19/09): chiuso resta la riga
   col numero delle mancanze, aperto la lista e i due modi di raggrupparla */
.fabbCorpo{display:none;margin-top:8px}
.fabbAvviso.aperto .fabbCorpo{display:block}
.fabbVista{display:none}
.fabbAvviso.aperto .fabbVista{display:flex}
.fabbSintesi{display:block}
/* LE ALTERNATIVE: prima del lunedi', un colore loro (viola tenue) che si
   distingue dal giallo dei giorni, anche in stampa */
.chip.gd.galt{border-style:dashed}
.chip.gd.galt.on{border-style:solid}
.g.galt .d{background:#efe9f7;color:#5b3d8a}
table.rp tbody.rpAlt td{background:#efe9f7!important;color:#4a2f73}
table.rp tbody.rpAlt.rptravasi td{background:#e6f2ef!important;color:#1f5a4a}   /* i travasi: verde tenue */
/* la riga di un travaso sul foglio e la sua scheda (19/09) */
tr.trv td.rpL .trvE{color:#1f5a4a;font-weight:800;letter-spacing:.02em}
.trvDa{display:block;font-weight:600;color:#1f5a4a}
@media print{ tr.trv td.rpL .trvE,.trvDa{color:#000} }
.trvCard .riga.trvR{padding:8px 0;border-top:1px solid var(--linea,#e6e9ef);gap:6px;flex-wrap:wrap}
.trvCard .riga.trvR.chiusa .tit{opacity:.6;text-decoration:line-through}
.trvCard .mini2{white-space:nowrap}
.trvCard .trvNuovo{width:auto;flex:0 0 auto;margin:0 0 0 12px;padding:10px 16px}
/* la striscia della linea nel pannello Travasi: tutte le linee di seguito,
   ognuna col suo nome in una fascia blu */
.linea.trvLinea{background:var(--blu,#1f3f7a);color:#fff;padding:9px 14px;border-radius:12px;margin:16px 0 8px;align-items:center}
.linea.trvLinea h2{color:#fff;font-size:15px}
.linea.trvLinea .n{color:#dbe4f5}
.linea.trvLinea .mini2{background:#fff;color:var(--blu,#1f3f7a);border-color:#fff}
.trvOtt{color:#1f5a4a}
/* la tabella delle pezzature nel travaso: Da / In, quanto tiene, giacenza */
.velo.trvV .pop.pMac{max-width:720px}
table.trvT th{font-size:11px;text-align:left;padding:4px 6px;color:var(--grigio)}
table.trvT td.trvC{width:34px;text-align:center}
table.trvT td.trvC input{width:20px;height:20px}
table.trvT tr.daSel td{background:#fff5d6}
table.trvT tr.aSel td{background:#e6f2ef}
table.trvT td.mkP.ok b{color:#1f7a4a}
table.trvT td.mkP.no{color:#b4262a}
.trvCard .riga.trvR.chiusa .tit{opacity:1;text-decoration:none}
/* un travaso fatto si vede verde (20/09) */
.trvCard .riga.trvR.trvFattoR{background:#e6f4ec;border-left:5px solid #1f7a4a;border-radius:8px;padding-left:10px;margin:6px 0}
.trvCard .riga.trvR.trvFattoR .tit{color:#155a37}
.trvCard .riga.trvR.trvFattoR .trvOtt{color:#155a37;font-weight:600}
table.rp tr.trv.chiusa td{background:#e6f4ec!important}
.trvCard .riga:first-child{align-items:flex-start}
.trvRis{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:44vh;overflow:auto}
.trvRis .trvP,.trvRis .trvPA{display:block;flex:0 0 auto;width:100%;height:auto;min-height:44px;text-align:left;border:1px solid #cfd6e3;border-radius:10px;background:#fff;padding:8px 10px;font:inherit;font-weight:600;line-height:1.3;cursor:pointer;box-sizing:border-box}
.velo.trvV input.cam,.velo.trfV input.cam{width:100%;box-sizing:border-box}
.trvRis .trvP .mkC,.trvRis .trvPA .mkC{display:block;font-weight:500}
.trvRis .trvP:hover,.trvRis .trvPA:hover{border-color:#2f5fa8}
.trvRis .trvP.senza{opacity:.7}
.trvRis .trvPz{color:#1f5a4a}
.trvRis{max-height:52vh}
.chip.pl .sdp{margin-left:4px}
table.rp tbody.rpAlt td.pgM{font-weight:800}
@media print{ table.rp tbody.rpAlt td{background:#eee!important;color:#000} }
@media(max-width:600px){
  .fabbAvviso{padding:10px}
  .fabbTesta{align-items:center}
  .fabbAvviso h3{font-size:15px;margin-bottom:2px}
  .fabbSintesi,.fabbToggle{display:block}
  .fabbComandi{flex-direction:column;align-items:stretch}
  .fabbVista{display:none;order:2}
  .fabbAvviso.aperto .fabbVista{display:flex}
  .fabbCorpo{display:none;margin-top:8px}
  .fabbAvviso.aperto .fabbCorpo{display:block}
  .fabbVistaBtn{flex:1}
  .fabbRiga{font-size:13px}
  .fabbUsi{font-size:12px}
}

/* Smartphone: barra e identità compatte, nessun contenuto coperto. */
@media(max-width:640px){
  .ruoli .wrap.barraCima{align-items:center;gap:6px;padding-right:6px}
  .marchio img{height:22px}
  #barraRuoli{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
  .ruolo{padding:5px 9px;font-size:10.5px}
  .turnoR{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:4px 8px}
  .turnoR>.cresci{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .turnoR .tl,.turnoR .tr,.turnoR .vers{display:none}
  .turnoR .mini2{padding:5px 8px;font-size:11px}
  .tema-int{position:static;margin:16px auto 0;padding:5px 9px;font-size:11px;opacity:.65}
  .trasfWrap,.trasfElenco,.trasfCard,.trasfCorpo,.trasfInfo{min-width:0;max-width:100%}
  .trasfTesta{flex-direction:column;align-items:stretch;gap:6px}
  .trasfTesta .pill{align-self:flex-start;max-width:100%;white-space:normal;line-height:1.2;overflow-wrap:anywhere}
  .trasfCard{overflow:hidden}
  #scarCerca{display:block;width:100%}
  .op .opTesta{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .op .opNome,.op .opRuolo,.op .opChat{grid-column:1/-1;min-width:0}
  .op .pinC{grid-column:1;min-width:0;width:100%}
}

.fabbQta{display:block;margin:10px 0!important}
.fabbQta input{display:block;width:100%;margin-top:5px;font-size:18px;font-weight:800}


.semiAppBox{border:2px solid #c82532;background:#fff1f2;border-radius:16px;padding:16px;margin-bottom:14px}
.semiAppBox h3{color:#a71927;margin:0 0 4px}
.semiAppRiga{display:flex;gap:12px;align-items:end;border-top:1px solid #efb9be;padding-top:12px;margin-top:12px}
.semiAppRiga label{font-size:12px;font-weight:800;color:#7b1720;min-width:170px}
.semiAppPercent{display:block;width:100%;margin-top:4px;font-size:18px;font-weight:800}
.semiAppConferma{width:auto;min-width:150px;margin:0}
.semiAppBadge{font-size:11px;font-weight:900;color:#a71927;text-transform:uppercase}
.semiDaApprovare,.semiAttendeResp{border-color:#c82532!important;background:#fff1f2!important}
@media(max-width:700px){
  .semiAppRiga{display:grid;grid-template-columns:1fr}
  .semiAppConferma{width:100%}
  .semiAppRiga label{min-width:0}
}


.bolInseriti{border:1px solid #b9d4ef;border-radius:12px;padding:0 12px;background:#f7fbff}
.bolAltri{margin-top:12px;border:1px solid #d5dce6;border-radius:12px;background:#f7f8fa;overflow:hidden}
.bolAltri summary{cursor:pointer;padding:12px;font-weight:800;color:#0b5ea8}
.bolAltri>.dett{padding:0 12px 8px}
.bolAltri .bolLotto{padding-left:12px;padding-right:12px}

/* Flusso operativo chiaro: prima i pezzi, poi le bollette. */
.confFasiHome{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 10px}
.confFaseHome{display:flex;align-items:center;gap:12px;min-height:74px;padding:12px 16px;border:2px solid var(--bordo);border-radius:16px;background:#fff;color:var(--blu);text-align:left;cursor:pointer}
.confFaseHome:hover{border-color:#8db8e2;background:#f7fbff}
.confFaseHome.on{border-color:var(--blu3);background:#eaf3fd;box-shadow:0 3px 9px rgba(18,84,150,.12)}
.confFaseHome>b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:#e5ebf2;color:var(--grigio);font-size:20px}
.confFaseHome.on>b{background:var(--blu3);color:#fff}
.confFaseHome>span{display:flex;min-width:0;flex-direction:column;gap:3px}
.confFaseHome strong{font-size:18px;line-height:1.15}.confFaseHome small{color:var(--grigio);font-size:14px}
.confFaseSpiega{display:flex;flex-direction:column;gap:3px;margin-bottom:16px;padding:13px 16px;border-left:5px solid var(--blu3);border-radius:10px;background:#f1f7fd;color:#173b65}
.confFaseSpiega span{font-size:14px;line-height:1.4}
.confGruppo{overflow:hidden;margin-bottom:16px;border:2px solid #d7e0eb;border-radius:17px;background:#fff}
.confGruppoTesta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:#edf3fa;border-bottom:1px solid #d7e0eb}
.confGruppoTesta h2{margin:0;color:var(--blu);font-size:19px;line-height:1.2}.confGruppoTesta span{flex:none;color:var(--blu3);font-size:14px;font-weight:800}
.confVascaSemplice{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(220px,300px);align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e1e7ef}
.confVascaSemplice:last-child{border-bottom:0}.confVascaSemplice .imp{margin:0}.confVascaSemplice .btn{width:100%;margin:0;min-height:50px}
.confVascaSemplice .tit{font-size:18px}.confVascaSemplice .meta{margin-top:3px}.confVuotoFase{margin:14px 0}
/* le due strade della fase 2: aprire le bollette, o rimandare indietro i
   pezzi quando ci si accorge di un errore (18/09) */
.confVascaAzioni{display:grid;gap:8px}
.confVascaAzioni .btn{width:100%;margin:0}
.confVascaAzioni .mini2{width:100%;min-height:38px}
/* PEDANA MISTA (18/09): scelta delle pedane, tasto Unifica, e l'etichetta
   con un blocco e un barcode per ogni pezzatura. */
.bolRiga .bolScegli{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:2px;cursor:pointer}
.bolRiga .bolScegli input{width:22px;height:22px;accent-color:var(--blu3);cursor:pointer}
.bolUnificaBox{border:2px solid var(--blu3);background:#f3f8ff}
.bolUnificaBox .btn{margin:0}
.bolUnificaConto{margin-bottom:8px;font-weight:700;color:var(--blu3)}
.bolGruppoMisto{border-color:#c98a12}
.bolGruppoMisto .bolTesta{background:var(--attbg);border-bottom-color:#e2c176}
/* il barcode della PEDANA: uno, in fondo alla bolletta, col contenuto
   scritto sopra — chi lo legge sa cosa sta ricevendo (18/09). */
.etichPedana{margin-top:16px;padding-top:12px;border-top:3px solid var(--blu)}
.etichPedanaTesta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.etichPedanaTesta b{font-size:12px;letter-spacing:.1em;color:var(--blu3)}
.etichPedanaTesta span{font-size:15px;font-weight:800;text-align:right}
.trasfBarcodeBox small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--grigio)}
.etichMista .etichPez{margin-top:14px;padding-top:10px;border-top:2px dashed #999}
.etichPezTesta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px;font-size:16px}
.etichPezTesta span{font-weight:700}
@media print{.etichMista .etichPez{break-inside:avoid;page-break-inside:avoid}}
.confDataProduzione{color:var(--grigio);font-size:15px;font-weight:700;white-space:nowrap}
.confAttesaTitolo{margin:24px 0 10px;color:var(--grigio);font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
/* I CONFEZIONATI, UN GIORNO ALLA VOLTA (18/09).
   La riga del conto sta sotto le frecce e dice quanto c'è in quel giorno;
   la scheda si tocca tutta, perché sul telefono il bersaglio deve essere
   grande, e il tasto della bolletta resta per chi usa il mouse. */
.confGiornoConto{margin:-4px 0 12px;text-align:center;color:var(--grigio);font-size:13px;font-weight:700}
.confFatta{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.confFatta:hover{border-color:#bfd2e8;box-shadow:0 4px 12px rgba(18,41,74,.10)}
.confFatta .riga{align-items:center}
.confFattaLato{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.confFattaLato .mini2{white-space:nowrap}
.bolPassata .riga{align-items:center;gap:12px}
.bolPassata .tit{font-size:17px}
.bolPassata .btn{flex:none;width:auto;margin:0;min-height:46px;padding:10px 18px}
@media(max-width:700px){
  .confFatta .riga{flex-wrap:wrap}
  .confFattaLato{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .confFattaLato .mini2{padding:9px 16px;font-size:13.5px}
  .bolPassata .riga{flex-wrap:wrap}
  .bolPassata .btn{width:100%;margin-top:10px}
}
.confAzioni{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.confAzioni .btn{margin:0;min-height:48px}
.confRiepilogo{margin-top:7px;color:var(--blu3)}
.confPassi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px}
.confPasso{display:flex;align-items:center;gap:9px;padding:11px;border:2px solid var(--bordo);border-radius:12px;background:#fff;color:var(--grigio)}
.confPasso b,.confTitoloFase>span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e8edf4;color:var(--grigio);font-size:16px;flex:none}
.confPasso span{font-weight:800}
.confPasso.on{border-color:var(--blu3);background:#eef6ff;color:var(--blu3)}
.confPasso.on b{background:var(--blu3);color:#fff}
.confPasso.pronto,.confPasso.fatto{border-color:#8bc9a6;background:var(--okbg);color:var(--ok)}
.confPasso.pronto b,.confPasso.fatto b{background:var(--ok);color:#fff}
/* il passo gia' fatto si tocca: e' la strada per tornare a correggere i pezzi */
.confPasso.confTornaPezzi{cursor:pointer;font:inherit;text-align:left;width:100%}
.confPasso.confTornaPezzi:hover{background:#dcf0e5}
.confPasso.confTornaPezzi:focus-visible{outline:3px solid var(--btn-focus);outline-offset:2px}
.confIstruzione{margin-bottom:12px;padding:13px 14px;border-left:5px solid var(--blu3);border-radius:10px;background:#eaf3fd;color:#173b65;font-size:15px}
.confTitoloFase{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.confTitoloFase>span{background:var(--blu3);color:#fff;font-weight:800}
.confTitoloFase b{display:block;font-size:18px}
.confTitoloFase small{display:block;color:var(--grigio);font-size:13px;margin-top:2px}
.confCampoNome{display:block;margin:0 0 5px;color:#31415a;font-size:13px;font-weight:800}
.confPezziRiga{align-items:end}
.confPezziRiga label{min-width:0}
.confPezziRiga input{font-size:18px;font-weight:800;text-align:center}
.confConfermaBox{margin-top:14px;border:2px solid #8bc9a6;background:#f4fbf6}
.confPasso2Box{border:2px solid var(--bordo);opacity:.72}
.confPasso2Box.pronto{border-color:var(--blu3);opacity:1}
/* Operatore e confezionamento devono funzionare bene anche con vista ridotta. */
@media(max-width:700px){
  body.pannello-operativo{font-size:17px;line-height:1.5}
  body.pannello-operativo .wrap{padding-left:10px;padding-right:10px}
  body.pannello-operatore .testa + .wrap{padding-top:14px}
  body.pannello-operativo .testa h1{font-size:22px}
  body.pannello-operativo .testa .sub{font-size:15px;line-height:1.35}
  body.pannello-operativo .testa select{min-height:52px;font-size:17px}
  body.pannello-operativo .card{padding:15px;margin-bottom:12px}
  body.pannello-operativo .tit{font-size:19px;line-height:1.25}
  body.pannello-operativo .meta,body.pannello-operativo .dett,body.pannello-operativo .sotto{font-size:15px;line-height:1.4}
  body.pannello-operativo .pill{font-size:12px;line-height:1.2;padding:8px 10px;white-space:normal;text-align:center}
  body.pannello-operativo .btn,body.pannello-operativo .mini2{min-height:54px;font-size:17px;padding:13px 14px}
  body.pannello-operativo input[type=text],body.pannello-operativo input[type=number],body.pannello-operativo select.cam,body.pannello-operativo textarea{min-height:54px;font-size:18px}
  body.pannello-operativo .imp{width:54px;height:54px;font-size:15px}
  body.pannello-operativo .riga{align-items:flex-start;gap:10px;flex-wrap:wrap}
  body.pannello-operativo .riga>.pill{margin-left:64px}
  body.pannello-operatore .opScheda .riga>.pill{margin-left:0}
  .confAzioni{grid-template-columns:1fr}
  .confFasiHome{grid-template-columns:1fr;gap:9px}
  .confFaseHome{min-height:68px;padding:10px 12px}.confFaseHome strong{font-size:18px}.confFaseHome small{font-size:14px}
  .confFaseSpiega{font-size:16px;padding:13px}
  .confGruppoTesta{align-items:flex-start;flex-direction:column;padding:12px 13px;gap:6px}.confGruppoTesta h2{font-size:20px}
  .confVascaSemplice{grid-template-columns:54px minmax(0,1fr);align-items:start;padding:13px 11px;gap:10px}
  .confVascaSemplice .btn{grid-column:1 / -1;min-height:58px;font-size:18px}
  .confDataProduzione{font-size:15px;white-space:normal}
  .confPassi{position:sticky;top:48px;z-index:12;background:var(--sfondo);padding:7px 0;margin-top:5px}
  .confPasso{padding:9px 8px;gap:7px;font-size:14px}
  .confPasso b{width:30px;height:30px}
  .confIstruzione{font-size:16px;padding:13px}
  .confPezziRiga{grid-template-columns:minmax(0,1fr) 92px 48px;gap:8px}
  .confPezziRiga .xrm{height:54px;font-size:22px}
  .confTitoloFase b{font-size:19px}
  .confTitoloFase small{font-size:14px}
  /* sul telefono: la casella di scelta a sinistra, i tasti sotto a tutta riga */
  .bolRiga{display:grid;grid-template-columns:auto 1fr;gap:10px}
  .bolRiga>div:last-child{grid-column:1/-1;justify-content:stretch}
  .bolRiga>div:last-child .mini2{flex:1}
  .bolRiga .bolScegli{grid-row:1;width:34px;height:34px;margin:0}
  .bolLotto{align-items:center}
  .bolLotto input{width:92px;flex-basis:92px}
  .giorno .gfr{width:58px;height:58px;font-size:28px}
  .giorno .gdata{font-size:21px}
  .opScheda .opApri{width:100%;font-size:17px;min-height:60px}

  /* Le schede dell'operatore non devono mai comprimere il testo contro lo stato.
     Macchina e descrizione restano affiancate; stato/azione vanno su una riga propria. */
  body.pannello-operatore .corrOp .riga,
  body.pannello-operatore .opScheda .riga{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    align-items:start;
    column-gap:12px;
    row-gap:12px;
  }
  body.pannello-operatore .corrOp .imp,
  body.pannello-operatore .opScheda .imp{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  body.pannello-operatore .corrOp .cresci,
  body.pannello-operatore .opScheda .cresci{
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
  }
  body.pannello-operatore .corrOp .riga>.pill,
  body.pannello-operatore .opScheda .riga>.pill{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:stretch;
    width:100%;
    min-height:44px;
    margin:0;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  body.pannello-operatore .corrOp .tit,
  body.pannello-operatore .corrOp .meta,
  body.pannello-operatore .opScheda .tit,
  body.pannello-operatore .opScheda .meta{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }
  body.pannello-operatore .labOk .riga{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:12px;
  }
  body.pannello-operatore .labOkVisto{
    width:100%;
    min-height:54px;
  }
  body.pannello-operatore .sez{
    margin-top:22px;
    font-size:15px;
    line-height:1.35;
    letter-spacing:.06em;
  }
}

@media(max-width:390px){
  .confPasso span{font-size:13px}
  .confPezziRiga{grid-template-columns:minmax(0,1fr) 82px 46px}
  body.pannello-operativo .tit{font-size:18px}
}

/* Rifinitura visiva: stessi componenti e colori, ma misure e allineamenti coerenti. */
.card{box-shadow:0 1px 2px rgba(18,41,74,.045)}
button{line-height:1.2;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .08s ease}
button:not(:disabled):active{transform:translateY(1px)}
.btn{min-height:46px;display:flex;align-items:center;justify-content:center;padding:11px 16px;line-height:1.25}
.mini2{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;line-height:1.2}
.chip{min-height:38px;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;text-align:center}
.ruolo{min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.tasto{border-radius:18px;box-shadow:0 1px 3px rgba(18,41,74,.08)}
.fabbToggle,.fabbVistaBtn,.tema-int,.perche,.piu,.gia{border-radius:var(--btn-r)}
.fabbToggle,.fabbVistaBtn{min-height:40px;padding:8px 14px}
.xrm,.xcerca,.qDa,.nota .nx{box-shadow:none}
.btn:focus-visible,.mini2:focus-visible,.ruolo:focus-visible,.chip:focus-visible,
.modo:focus-visible,.gfr:focus-visible,.setti button:focus-visible,.tasto:focus-visible{
  outline:3px solid var(--btn-focus);outline-offset:3px
}
@media(hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover);filter:saturate(1.06)}
  .btn.sec:not(:disabled):hover,.mini2:not(:disabled):hover{background:#eef6ff;box-shadow:0 4px 10px rgba(18,41,74,.14)}
  .btn.ok:not(:disabled):hover{box-shadow:0 5px 12px rgba(22,121,74,.22)}
  .btn.no:not(:disabled):hover{box-shadow:0 5px 12px rgba(163,40,45,.22)}
  .ruolo:not(:disabled):hover{background:#254d82;color:#fff}
  .ruolo.on:not(:disabled):hover{background:#fff;color:var(--blu)}
  .chip:not(:disabled):hover,.modo:not(:disabled):hover{border-color:var(--blu3);color:var(--blu3);background:#f5f9ff}
}
.btn:not(:disabled):active,.mini2:not(:disabled):active,.ruolo:not(:disabled):active,
.chip:not(:disabled):active,.modo:not(:disabled):active,.gfr:not(:disabled):active,
.setti button:not(:disabled):active,.tasto:not(:disabled):active{transform:scale(.97)}
.mini2:disabled,.chip:disabled,.modo:disabled,.ruolo:disabled{opacity:.48;box-shadow:none;cursor:not-allowed}
.testa h1,.tit{line-height:1.25}
.testa select,input[type=text],input[type=number],select.cam,textarea{min-height:44px}
.duecol,.due,.confAzioni{gap:10px}
.riga{min-width:0}
.riga>.cresci{min-width:0}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:30px;text-align:center}
.pianoNav{align-items:stretch;margin:10px 0 12px}
.pianoNav .chip{margin:0}
.confFiltri{align-items:stretch}
.confFiltri .chip{margin:0}

@media(max-width:700px){
  .ruoli{padding:8px 0}
  .ruoli .wrap.barraCima{gap:8px;padding-left:10px;padding-right:10px}
  .marchio img{height:24px}
  #barraRuoli{gap:8px;scroll-snap-type:x proximity;scroll-padding-inline:4px}
  .ruolo{min-height:42px;padding:8px 12px;font-size:12px;scroll-snap-align:start}
  .turnoR{min-height:52px;padding:6px 10px;align-items:center}
  .turnoR .mini2{min-height:42px;padding:8px 11px;font-size:12px}
  .demo{padding:8px 10px;font-size:13px;line-height:1.3}
  .testa{padding:12px 0 14px}
  .testa .wrap{padding-left:12px;padding-right:12px}
  .testa .et{font-size:11px}
  .testa h1{font-size:21px;margin-top:4px}
  .testa .sub{font-size:14px;line-height:1.35;margin-top:3px}
  .setti{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px;margin-top:12px}
  .setti button{width:52px;height:48px;border-radius:12px;font-size:22px}
  .setti .txt{font-size:15px;line-height:1.35}
  .pianoNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
  .pianoNav .chip{width:100%;min-height:46px;padding:9px 10px;white-space:normal;font-size:14px}
  .giorno{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;gap:10px}
  .gcen{min-width:0}
  .chips.confFiltri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
  .confFiltri .chip{width:100%;min-height:48px;white-space:normal;font-size:14px}
  body.pannello-operativo .card{border-radius:16px;box-shadow:0 2px 5px rgba(18,41,74,.06)}
  body.pannello-operativo .btn{border-radius:var(--btn-r)}
  body.pannello-operativo .card>.riga{width:100%}
  body.pannello-operativo .confAzioni{gap:9px}
  body.pannello-operativo .confAzioni .btn{width:100%;margin:0}
}

@media(max-width:390px){
  .ruoli .wrap.barraCima{padding-left:8px;padding-right:8px}
  .marchio img{height:22px}
  .ruolo{padding:8px 10px;font-size:11.5px}
  .pianoNav .chip,.confFiltri .chip{font-size:13.5px}
}

/* Smartphone: nelle schede di confezionamento lo stato non deve comprimere
   nome, vasca e riepilogo in una colonna stretta. */
@media(max-width:700px){
  body.pannello-confezionamento .card>.riga{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    align-items:start;
    column-gap:12px;
    row-gap:10px;
    flex-wrap:nowrap;
  }
  body.pannello-confezionamento .card>.riga>.imp{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  body.pannello-confezionamento .card>.riga>.cresci{
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
  }
  body.pannello-confezionamento .card>.riga>.pill{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:stretch;
    width:100%;
    min-height:44px;
    margin:0;
  }
  body.pannello-confezionamento .card>.riga .tit,
  body.pannello-confezionamento .card>.riga .meta{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }
}

@media(max-width:520px){
  .fabbTesta{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:10px}
  .fabbComandi,.fabbVista{width:100%}
  .fabbToggle{width:100%;min-height:46px}
  .fabbAvviso h3,.fabbSintesi{max-width:100%;overflow-wrap:break-word}
}


/* ===== LO SFORO SI VEDE: TUTTO IL BLOCCO DEL PRODOTTO IN ROSSO =====
   Quando le pezzature prendono piu' litri di quanti ne escono dalle vasche,
   non basta la riga di avviso in fondo: il prodotto intero si colora, la
   colonna della macchina che sfora si borda, e il nome del prodotto lo dice.
   Le caselle restano bianche dentro, perche' ci si deve ancora scrivere. */
.comp tr.sforaBloc > td{background:var(--nobg)}
.comp tr.prod.sforaBloc > td.cD,
.comp tr.prod.sforaBloc.viva > td.cD{background:#f6d7d9;color:var(--no);border-left:4px solid var(--no)}
.comp tr.pz.sforaBloc > td.cD,
.comp tr.pz.sforaBloc.resto > td.cD{background:#fdf0f1;color:var(--no);border-left:4px solid var(--no)}
.comp tr.sforaBloc > td.fatto,
.comp tr.pz.sforaBloc.resto > td.fatto{background:#fbe0e2;color:var(--no);font-weight:700}
.comp tr.sforaBloc > td{border-bottom-color:#f0c9cc}
table.comp tr.sforaBloc > td.cFo,
table.comp tr.pz.sforaBloc > td.cFo{background:var(--nobg)}
.comp tr.prod.sforaBloc > td{border-top:2px solid var(--no)}
.comp tr.sforaBloc input{background:#fff;border-color:var(--no);color:var(--no);font-weight:700}
.comp tr.sforaBloc > td.sforaCel{box-shadow:inset 0 0 0 2px var(--no)}
.comp tr.sforaBloc > td.nulla{color:var(--no);opacity:.6}
/* la riga di chiusura resta l'ultima parola, e adesso chiude un blocco rosso */
.comp tr.pz.sfora > td,
.comp tr.pz.sfora > td.cD{background:#f6d7d9;color:var(--no);font-weight:700;border-bottom:2px solid var(--no);border-left:4px solid var(--no)}


/* avviso: i pezzi sono cambiati mentre la schermata era aperta */
.confScavalcata{background:var(--nobg);border:2px solid var(--no);border-radius:var(--r);
  padding:11px 12px;margin-bottom:8px;color:var(--no);font-size:13px;line-height:1.45}
.confScavalcata b{display:block;margin-bottom:3px}
.confScavalcata .btn{margin-top:9px}


/* il programma e' cambiato mentre il cursore era dentro una casella */
.pianoNuovo{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:min(92vw,520px);
  background:var(--no);color:#fff;font:700 12.5px/1.35 inherit;text-align:center;
  padding:9px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(18,41,74,.28);pointer-events:none}


/* quanti pezzi di questa pezzatura sono gia in bolletta, e quanti in tutto */
.confConto{display:inline-block;margin-left:8px;background:var(--attbg);color:var(--att);
  font:700 11px inherit;padding:3px 8px;border-radius:999px;white-space:nowrap}

/* il bottone per cambiare macchina, sulla riga del foglio: piccolo, accanto
   al nome, e solo a schermo — sul foglio stampato non vuol dire niente */
.pgMac{margin-left:6px;border:1px solid var(--bordo);background:#fff;color:var(--blu);
  border-radius:7px;padding:1px 6px;font-size:12px;line-height:1.5;cursor:pointer;
  font-family:inherit;vertical-align:middle}
.pgMac:hover{background:var(--sfondo);border-color:var(--blu3)}
@media print{ .pgMac{display:none!important} }
@media (max-width:760px){ .pgMac{padding:2px 8px;font-size:13px} }

/* sul foglio, quanto di una macchina e' di altre linee: si dice piccolo,
   accanto al carico, senza stampare le righe altrui */
.rpAltre{font-style:normal;font-weight:500;opacity:.75;margin-left:4px}
.macLib.macAltra{border-style:dashed}

/* 21/09 — Travasi e trasformazioni: la striscia degli Scarichi (arancio, come
   la fascia Scarichi del report), il magazzino da cui si prende. */
.linea.trvLinea.trvScarL{background:#b45309}
.trvScar .crRisultato .ok{color:#15803d}
.trvScar .crRisultato .no{color:#b91c1c}
.sctUm{display:flex;align-items:center;min-height:44px;font-weight:800}
.trvMag{margin:4px 0 6px}
.trvMag .chip{white-space:normal;text-align:left}
.meta.trvMagR{color:#1e40af}
.trvScar input.cam{width:100%;box-sizing:border-box}

/* 21/09 — il cartone sotto la pezzatura, e gli imballi da scaricare per i travasi */
.cartR{color:#7c2d12}
.sctSug{border:1px solid #fed7aa;background:#fff7ed;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.sctSug .crRisultato .ok{color:#15803d}.sctSug .crRisultato .no{color:#b91c1c}
.sctSug .sctFatto{opacity:.6}

/* 21/09 — OGNI STAMPA PORTA IL LOGO. A schermo non si vede; su carta si,
   a colori. Sul foglio di produzione sta a sinistra della testata senza
   aggiungere altezza (il foglio deve restare su un A4). */
.logoStampa,.prontLogo{display:none}
@media print{
  .logoStampa{display:block;height:12mm;width:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rpTesta{position:relative}
  .rpTesta .logoStampa{position:absolute;left:6px;top:4px;height:9mm}
  .repTesta .logoStampa,.arcTesta .logoStampa{flex:0 0 auto;align-self:center}
  .prontLogo{display:flex!important;align-items:center;gap:14px;border-bottom:2px solid #c8102e;padding-bottom:6px;margin-bottom:10px;font-size:16px}
}

/* 21/09 — il coperchio accanto al cartone */
.copR{color:#1e3a8a}

/* 22/09 — il salvataggio non passa da piu' di un minuto: lo si vede da lontano */
.allarmeSalva{background:#b3261e;color:#fff;padding:10px 16px;font-size:15px;line-height:1.35;text-align:center}
.allarmeSalva b{display:block;font-size:17px}
/* fuori dalla rete non è un guasto: è una cosa che l'operatore aggiusta da
   solo, e il colore lo dice (avviso, non allarme) — 24/09/2026 */
.allarmeSalva.fuoriRete{background:var(--att);color:#fff}
@media print{.allarmeSalva{display:none}}

/* 22/09 — le ricerche del prontuario larghe come gli altri campi */
input[type=search].cam{width:100%;padding:9px 11px;border:1px solid #ccd5e2;border-radius:10px;font:14.5px inherit;background:#fff;color:var(--testo)}

/* 23/09 — i due numeri dei cartoni, affiancati anche sul telefono */
.cartCampi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cartCampi .cam{margin-top:0}

/* 23/09 — le pezzature confezionate dentro la voce del report di reparto */
.repPezElenco{grid-column:1/-1;margin-top:6px;border-top:1px dashed var(--bordo);padding-top:6px;display:grid;gap:4px}
.repPez{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12.5px;color:var(--grigio)}
.repPez>b:first-child{min-width:64px;color:var(--testo)}
.repPez span b{color:var(--testo)}
@media print{.repPez{font-size:11px}}

/* 23/09 — i cartoni che servono, col numero grande, sotto la pezzatura */
.cartGrande{display:flex;align-items:center;gap:12px;margin:6px 0 12px;padding:9px 13px;
  background:#fff6e8;border:1px solid #f0d3a0;border-left:5px solid #c98f14;border-radius:10px}
.cartGrandeN{font-size:34px;line-height:1;font-weight:800;color:#8a5a00;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.cartGrandeTesto{display:flex;flex-direction:column;gap:1px;min-width:0}
.cartGrandeTesto>b{font-size:15px;color:#7c5200;text-transform:uppercase;letter-spacing:.04em}
.cartGrandeSotto{font-size:13px;color:#8a6b2f}
.cartGrandeNome{font-size:12px;color:#94795a;overflow-wrap:anywhere}
@media print{.cartGrande{background:#fff;border-color:#bbb}}

/* «rimandata da …» sul foglio: una riga avviata che il reparto riprende un
   altro giorno (23/09/2026). Si legge, non grida: il dato vero sono i
   materiali già pesati, questo dice solo da dove viene. */
.rmdS{display:block;color:var(--att);font-weight:600}
.rmdV .avviso{font-size:.92rem}

/* LA NOTA DEL RESPONSABILE NELLA SCHEDA DELL'OPERATORE — 24/09/2026.
   Deve farsi notare in reparto, su un tablet a un metro di distanza, senza
   sembrare un errore: colore dell'avviso, barra a sinistra, testo grande. */
.noteResp{margin:12px 0 0;padding:10px 12px;border-left:5px solid var(--att);
  background:var(--attbg);border-radius:8px}
.noteRespT{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--att)}
.noteRespR{margin-top:4px;font-size:17px;font-weight:600;line-height:1.35;color:var(--testo)}
.noteRespF{display:block;font-size:12.5px;font-weight:500;color:var(--grigio)}
.noteResp.inFase{margin:0 0 14px}
@media print{.noteResp{border-left-width:3px}}

/* PARTENZA → ARRIVO nella riga del travaso (24/09/2026): il nome di arrivo è
   quello che finisce sull'etichetta, quindi è lui a essere in grassetto. */
.trvProd{margin-top:2px;font-size:14.5px;line-height:1.3}
.trvPk{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--grigio2)}
.trvFre{color:var(--grigio);padding:0 2px}
.trvA{color:var(--blu3)}
.noteResp.inTrav{margin:8px 0 0}

/* correzione di una pedana già uscita dal reparto (24/09/2026) */
.corrRiga{margin-top:10px}
.corrPrima{display:block;font-size:12.5px;color:var(--grigio)}
.trasfCorretta{margin-top:10px;font-size:13.5px;line-height:1.35}
.trasfCorreggi{margin-top:8px}

/* IL RIEPILOGO DI REPARTO: linea → prodotto → pezzatura (24/09/2026).
   Deve leggersi su A4 stampato e sul telefono, quindi tabella con i numeri a
   destra e il prodotto una volta sola per gruppo. */
/* 30/09 — QUELLO CHE NON CI STA SI SCORRE, NON SI TAGLIA.
   `overflow:hidden` serviva ad arrotondare gli angoli della tabella dentro, ma
   tagliava anche la colonna della differenza quando la finestra è stretta: il
   dato spariva e non c'era modo di arrivarci. Con `auto` gli angoli restano
   arrotondati e il blocco si scorre col dito — sul telefono è l'unico modo di
   leggere un foglio di nove colonne. */
.riepLinea{border:1px solid var(--bordo);border-radius:8px;overflow-x:auto;overflow-y:hidden;
  margin-bottom:10px}
.riepScorri{overflow-x:auto;overflow-y:hidden;margin-bottom:10px}
.riepLineaT{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 10px;background:var(--blu);color:#fff}
.riepLineaT b{font-size:13px;letter-spacing:.02em}
.riepLineaT span{font-size:11px;opacity:.9}
table.riepT{width:100%;border-collapse:collapse;font-size:11.5px}
table.riepT th{background:#f1f5f9;color:var(--grigio);font-size:10px;text-transform:uppercase;
  letter-spacing:.04em;text-align:left;padding:5px 7px;border-bottom:1px solid var(--bordo)}
table.riepT td{padding:5px 7px;border-bottom:1px solid var(--bordo);vertical-align:top}
table.riepT tbody:last-child tr:last-child td{border-bottom:0}
table.riepT td.riepN{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 30/09 — «cura meglio gli allineamenti». Prima le testate a destra erano
   scelte per POSIZIONE (nth-child 3..6): infilando «% vasca» prima dei pezzi,
   tutto si è spostato di uno e «CARTONI» è rimasta a sinistra sopra una
   colonna di numeri a destra. Adesso la testata si allinea come la sua
   colonna, per NOME (`th.thN`), e infilarne un'altra domani non sfasa niente. */
table.riepT th.thN{text-align:right}
table.riepT th.thS{text-align:left}
table.riepT td.riepP{width:38%}
table.riepT td.riepP b{display:block;font-size:12px;line-height:1.2}
table.riepT td.riepP span{display:block;color:var(--grigio);font-size:10.5px;line-height:1.3;margin-top:1px}
/* 05/10 — chi ha fatto la vasca: operatore, confezionatore, conformità */
table.riepT td.riepP span.riepPers{color:var(--testo,#1d2a3a);border-top:1px dotted var(--bordo,#d5dbe3);padding-top:2px;margin-top:3px}
table.riepT td.riepP span.riepPers b{font-weight:700}
table.riepT td.riepS{color:var(--grigio);font-size:10.5px;overflow-wrap:anywhere}
/* 28/09 — la colonna della differenza: `kg ottenuti − (formula +
   correzioni)`. Il numero grande, e sotto in piccolo da cosa viene e quale
   caso è. Col meno è lo sfrido di tutti i giorni; SENZA meno è uscito più di
   quanto è entrato, che non può essere, e quello va in rosso. */
/* 28/09 — la riga dei campioni dentro il prodotto: è prodotto uscito dalla
   vasca come quello nei secchielli, ma si vede che non è confezionato */
table.riepT tr.riepCamp td{background:#fbfaf5;font-style:italic;color:var(--blu2)}
/* 28/09 — «campioni · 4L non andare a capo con L»: la colonna della pezzatura
   non si spezza mai, né per una pezzatura né per «totale prodotto» */
table.riepT td.riepPz{white-space:nowrap}
table.riepT td.riepDif{white-space:nowrap;border-left:1px solid var(--bordo)}
table.riepT td.riepDif b{display:block;font-size:12.5px;color:var(--blu2)}
/* 28/09 — «lo sfrido con il − in rosso, quello senza segno in blu»: il rosso
   segna il prodotto perso, non l'anomalia. */
table.riepT td.riepDif b.difMeno{color:#b42318}
table.riepT td.riepDif span{display:block;color:var(--grigio);font-size:10px;
  line-height:1.25;margin-top:1px;white-space:normal}
table.riepT th:nth-child(8){text-align:right}
table.riepT tr.riepPrimo td{border-top:2px solid var(--bordo)}
table.riepT tr.riepSub td{background:#f8fafc;font-size:11px;color:var(--blu2)}
table.riepPez{border:1px solid var(--bordo);border-radius:8px;overflow:hidden}
.repBloccoTit.pez{background:var(--blu3);color:#fff}
/* I TRAVASI, IN UNA SEZIONE LORO (25/09/2026): due colonne larghe, il
   prodotto di partenza e quello che diventa, una riga per pezzatura uscita. */
table.riepTrav{border:1px solid var(--bordo);border-radius:8px;overflow:hidden}
table.riepTrav td.riepP{width:26%}
table.riepTrav th:nth-child(4),table.riepTrav th:nth-child(5){text-align:right}
table.riepTrav td.riepS span{display:block;color:var(--grigio);font-size:10px}
.repBloccoTit.trav{background:#0d5c73;color:#fff}
.repTot.q4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media print{
  .riepLinea,table.riepT{page-break-inside:auto}
  table.riepT tr{page-break-inside:avoid}
  /* DOPO LA TESTATA SALTAVA LA PAGINA — 28/09/2026.
     Il riquadro della linea era `break-inside:avoid`, per non spezzarlo e non
     lasciare chi legge la seconda pagina senza sapere di che linea sono i
     numeri. Ma una linea con otto prodotti è più alta di un foglio: non
     entrando nello spazio che resta sotto i totali, il browser la spostava
     tutta alla pagina dopo e la prima pagina restava con la sola testata e i
     quattro riquadri — «dopo la testata salta la pagina».
     Adesso il riquadro si spezza se serve. Chi legge non si perde: la
     testata torna in cima a ogni pagina (è nel `thead` della tabella
     esterna), e le intestazioni delle colonne pure, perché il `thead` del
     riepilogo è anche lui un gruppo di testata. Una riga, invece, non si
     taglia mai a metà. L'angolo arrotondato non deve ritagliare
     (`overflow:visible`). */
  .riepLinea,.riepScorri{overflow:visible;break-inside:auto;page-break-inside:auto}
  table.riepT>thead{display:table-header-group}
  table.riepT>tbody{display:table-row-group}
  /* 304 — un prodotto non si spezza mai fra due pagine */
  table.riepT>tbody.riepGrp{break-inside:avoid;page-break-inside:avoid}
  .riepLineaT{break-after:avoid;page-break-after:avoid}
  /* orizzontale: c'è più spazio, le colonne respirano */
  table.riepT{font-size:11px}
  table.riepT td.riepP{width:32%}
  .riepLineaT{background:#12294a !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .repBloccoTit.pez{background:#264e85 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .repBloccoTit.trav{background:#0d5c73 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.riepTrav{page-break-inside:auto}
  table.riepTrav td.riepP{width:24%}
}

/* ---------- I SEMILAVORATI FATTI OGGI, CHE SAP ANCORA NON SA (25/09/2026) ----------
   «Aggiungiamolo nel responsabile ma anche nell'operatore, soltanto nella linea
   di interesse.» Verde: non è un allarme come «Cosa manca», è una buona notizia
   — il semilavorato c'è anche se SAP dice zero. Sul telefono diventa una
   colonna sola, come tutto il resto. */
.semiOggi{margin:0 0 14px;border:1px solid #9bc9b6;border-radius:12px;background:#f2fbf7;overflow:hidden}
.semiOggiT{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:9px 12px;background:#0f6a52;color:#fff;font-size:13px;font-weight:800}
.semiOggiT span:last-child{font-weight:600;font-size:12px;opacity:.95}
.semiOggiR{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(210px,.7fr) minmax(0,1.2fr);
  gap:10px;align-items:start;padding:10px 12px;border-top:1px solid #cce5da}
.semiOggiR.corto{background:#fff7f3}
.semiOggiC b{display:block;font-size:14.5px;line-height:1.25}
.semiOggiC span{display:block;color:var(--grigio);font-size:11.5px;margin-top:2px}
.semiOggiQ{display:flex;gap:12px;flex-wrap:wrap}
.semiOggiQ span{display:block}
.semiOggiQ i{display:block;font-style:normal;color:var(--grigio);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em}
.semiOggiQ b{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.semiOggiQ .semiResta b{color:#0f6a52;font-size:17px}
.semiOggiR.corto .semiResta b{color:#a3282d}
.semiOggiU{font-size:12.5px;line-height:1.45;min-width:0}
.semiUso{overflow-wrap:anywhere}
.semiUso.gia{color:var(--grigio)}
.semiUso i{font-style:normal;color:var(--grigio);font-size:11px}
.semiArriva{color:#7c5200;background:#fff7e8;border-radius:6px;padding:3px 7px;margin-bottom:3px;display:inline-block}
.semiCorto{margin-top:4px;color:#a3282d;font-weight:650}
.semiOggiN{padding:8px 12px;border-top:1px solid #cce5da;color:var(--grigio);font-size:11.5px}
.semiOggi.vuoto{background:#f7faf9;border-color:#d7e5df}
.semiOggi.vuoto .semiOggiT{background:#5f7f74}
@media(max-width:720px){
  .semiOggiR{grid-template-columns:1fr;gap:6px}
  .semiOggiQ{gap:14px}
}
@media print{ .semiOggi{display:none} }

/* ---------- FORMATO E COPIE DELLA BOLLETTA (28/09/2026) ----------
   «Devo stampare in A5 con 3 copie, ma devo poter tornare alla stampante
   attuale e cambiare il numero di copie»: la scelta sta accanto alla
   stampante della linea, e sul telefono va a capo come il resto. */
.stCopEti{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--grigio);white-space:nowrap}
.stCopEti .stCop{width:64px;text-align:center}
@media(max-width:720px){
  .stCopEti{width:100%;justify-content:space-between}
  .stCopEti .stCop{width:90px}
}

/* ---------- CONTROLLO EAN (29/09/2026) ----------
   Si usa col telefono in mano e un barattolo nell'altra: un tasto grande che
   apre la fotocamera, e la risposta di SAP grande abbastanza da leggersi da
   lontano. La conferma e l'annulla sono due tasti diversi e distanti: quello
   che registra e' verde, quello che non fa niente e' scarico. */
.eanIntro .tit{font-size:15px}
.eanScan{display:grid;gap:10px}
.eanVia{font-size:17px;padding:16px 14px;letter-spacing:.01em}
.eanFoto{font-size:14px}
.eanScan .cam{margin-top:2px}
.eanMandata{grid-template-columns:1fr auto;align-items:center}
.eanMandata input{font-size:17px;letter-spacing:.06em;text-align:center}
.eanAvviso{background:#fff7e8;color:#7c5200;border-radius:8px;padding:8px 10px}
.eanStato{margin:12px 0 0}

.eanCard{border:1px solid #cfe0f3;box-shadow:0 8px 22px rgba(18,41,74,.09)}
.eanCardTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--grigio);text-transform:uppercase}
.eanCardTop b{color:var(--blu);letter-spacing:.06em;font-size:12px}
.eanNome{font-size:23px;line-height:1.15;font-weight:800;color:var(--blu);margin:6px 0 2px;
  overflow-wrap:anywhere}
.eanSap{overflow-wrap:anywhere}
.eanBloccato{margin-top:8px}
.eanScelta{display:grid;gap:6px;margin:10px 0 2px;border:1px dashed #b9cde6;border-radius:9px;padding:8px}
.eanScelta label{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.3}
.eanScelta span{display:grid;min-width:0}
.eanScelta small{color:var(--grigio);font-size:11.5px;overflow-wrap:anywhere}
.eanDati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.eanDati>div{background:#f4f8fd;border-radius:9px;padding:8px 10px;min-width:0}
.eanDati span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grigio)}
.eanDati b{display:block;font-size:14px;color:var(--blu);margin-top:2px;overflow-wrap:anywhere}
.eanOk{margin-top:12px;background:#12764a;border-color:#12764a;font-size:16px;padding:15px 14px}
.eanOk:hover{background:#0f6640;border-color:#0f6640}
.eanCard .btn.sec.no{margin-top:8px}

.eanFatto{border-left:5px solid #16916f;background:#f2fbf7;display:grid;gap:3px}
.eanFatto>b{font-size:15px;color:#0f6a52}
.eanFatto>span{font-size:13px;color:#14553f;overflow-wrap:anywhere}

.eanElenco{border:1px solid var(--bordo);border-radius:10px;overflow:hidden;background:#fff}
.eanRiga{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--bordo)}
.eanRiga:last-child{border-bottom:0}
.eanRiga .cresci{min-width:0}
.eanRiga b{display:block;font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.eanRiga span{display:block;font-size:11.5px;color:var(--grigio);overflow-wrap:anywhere}
.eanQuando{text-align:right;white-space:nowrap}
.eanQuando b{color:var(--blu)}

/* la fotocamera: sopra tutto, sfondo scuro, il codice si inquadra nel riquadro */
.eanCam{position:fixed;inset:0;z-index:70;background:rgba(9,17,29,.92);
  display:flex;align-items:center;justify-content:center;padding:14px}
.eanCamBox{width:min(520px,100%);background:#0f1a2b;border-radius:16px;padding:12px;
  display:grid;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.eanCamTop{display:flex;justify-content:space-between;align-items:center;color:#fff}
.eanCamTop b{font-size:15px}
.eanCamTop button{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;
  padding:0 6px;cursor:pointer}
.eanMira{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3}
.eanMira video{width:100%;height:100%;object-fit:cover;display:block}
.eanMira i{position:absolute;inset:16% 8%;border:2px solid rgba(255,255,255,.85);border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.28)}
.eanCamM{color:#dce7f5;font-size:13px;text-align:center;margin:0}
@media(max-width:720px){
  .eanDati{grid-template-columns:1fr}
  .eanMandata{grid-template-columns:1fr}
  .eanRiga{flex-wrap:wrap}
  .eanQuando{text-align:left}
}
@media print{ .eanCam,.eanW .eanScan,.eanW .eanIntro{display:none} }

/* ---------- CAMPIONI NELLO SCARICHI (29/09/2026) ----------
   Chi preleva un campione deve vedere, sulla stessa riga, quanti ce ne sono
   in magazzino e quanti litri fa un pezzo: sono i due numeri che decidono
   se prenderlo e cosa scrivere. */
.scarSceltoC{border-left:4px solid var(--blu3)}
.scarGiac{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.scarGiac span{background:#f1f6fc;border-radius:7px;padding:5px 9px;font-size:11.5px;color:var(--grigio)}
.scarGiac b{color:var(--blu);font-size:13px}
#scarConto{margin-top:6px;min-height:1em}
#scarConto:not(:empty){background:#eef7f1;color:#176b3c;border-radius:7px;padding:6px 9px;font-weight:650}
#scarVascaBox[hidden]{display:none}
@media(max-width:720px){ .scarGiac span{flex:1 1 100%} }

/* la pedana gia' uscita, in fondo all'elenco delle bollette: si legge che e'
   chiusa e si ristampa, senza sembrare una pedana su cui si puo' ancora
   mettere qualcosa (29/09) */
.bolRigaUscita{background:#f8fafc}
.bolRigaUscita>.cresci>b{color:#5b6b80}

/* LE NOTE DEL CAPOREPARTO SOTTO OGNI PRODOTTO (29/09).
   La riga sta sotto le pezzature del prodotto, rientrata e su fondo giallino
   come le note scritte a penna nello spazio bianco del foglio: si vede che
   e' una cosa scritta da una persona, non un numero calcolato. Il «+» e' un
   tasto piccolo che nella stampa sparisce; la nota, no. */
table.riepT tr.riepNotaR td.riepNota{background:#fffdf4;border-top:1px dashed #e4d9b8;
  padding:7px 9px 8px}
.riepNotaRiga{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.riepNotaRiga b{font-size:11.5px;font-weight:600;line-height:1.45;color:#4a3b12;
  overflow-wrap:anywhere}
.riepNotaRiga span{font-size:10px;color:var(--grigio);white-space:nowrap}
.riepNotaRiga:last-of-type{margin-bottom:0}
.capoNotaPiu{margin-top:6px}
@media print{ table.riepT tr.riepNotaR td.riepNota{background:#fffdf4}
  .riepNotaRiga b{color:#000} }

/* LE VASCHE PRODOTTE E NON ANCORA CONFEZIONATE (29/09).
   Stanno sotto il blocco delle produzioni, e devono leggersi come una cosa
   FUORI dai conti: fondo neutro, niente numeri in colonna, un filo grigio a
   sinistra invece della barra colorata dei blocchi veri. Si stampano: il capo
   deve sapere cosa ha prodotto e non e' ancora passato dal confezionamento. */
.repDaConf{border:1px solid var(--bordo);border-left:3px solid #b9c4d2;border-radius:10px;
  background:#fbfcfe;padding:10px 12px;margin:10px 0 4px}
.repDaConf>b{display:block;font-size:12px;color:#3c5b78}
.repDaConf>span{display:block;font-size:10.5px;color:var(--grigio);margin-top:2px}
.repDaConfRiga{margin-top:7px;padding-top:7px;border-top:1px solid #eef2f7;font-size:12px;font-weight:650}
.repDaConfRiga span{display:block;font-weight:400;font-size:10.5px;color:var(--grigio);margin-top:1px}

/* IL REPORT DI PRODUZIONE, GIRO DEL 30/09.
   - «% vasca» prima dei pezzi: numero piccolo e grigio, non deve rubare
     l'occhio ai pezzi che gli stanno accanto;
   - il nome del CARTONE sotto quello del secchiello, nella stessa colonna
     «Secchiello / cartone», rientrato di un filo perché si legga come una
     seconda riga e non come un altro secchiello;
   - «Materiali usati» nei travasi: una riga per materiale, il numero in
     evidenza e il nome sotto, piccolo. */
/* 30/09 — la colonna conta VASCHE, non percentuali: «se ho due vasche ne
   posso fare 1,5 da 13 e 0,5 da 4». Cifre a larghezza fissa, così 1,96 e
   0,02 restano incolonnate. */
table.riepT td.riepVas{color:#5b6b80;font-size:11px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.riepT tr.riepSub td.riepVas{color:#3c5b78;font-weight:650}
.riepCart{display:block;font-size:10px;color:var(--grigio);margin-top:3px;
  padding-left:7px;border-left:2px solid #e2e8f0;overflow-wrap:anywhere}
table.riepT th.riepMatT{width:19%}
table.riepT td.riepMat{font-size:10.5px;color:#3c5b78}
.matR{padding:2px 0}
.matR+.matR{border-top:1px dotted #e6ecf3}
.matR b{font-size:12px;color:var(--blu2)}
.matR span{display:block;color:var(--grigio);font-size:9.5px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:720px){ table.riepT th.riepMatT{width:auto} }

/* GLI ALLINEAMENTI DEL REPORT, GIRO DEL 30/09.
   Tre cose che rendevano la tabella faticosa:
   - le testate dei numeri non tutte a destra (vedi sopra);
   - «% vasca» che andava a capo nella testata;
   - il nome dell'imballo spezzato dopo la sigla, col numero orfano: quello si
     risolve nel testo (`nonSpezzare`), qui si tiene la colonna abbastanza
     larga perché il nome ci stia in due righe invece di tre. */
table.riepT th{vertical-align:bottom}
table.riepT th.thVas{white-space:nowrap}
table.riepT td.riepVas{font-size:11px}
table.riepT td.riepS{width:16%;overflow-wrap:break-word;word-break:normal;line-height:1.3}
table.riepT.riepTrav td.riepS{width:auto}
/* la differenza: il numero a destra, la spiegazione allineata a sinistra —
   un paragrafo giustificato a destra si legge a fatica */
table.riepT td.riepDif{min-width:132px}
table.riepT td.riepDif span{text-align:left}
/* i numeri di tutte le tabelle del report con le cifre della stessa larghezza:
   le colonne si leggono incolonnate anche quando i numeri cambiano */
table.riepT td.riepN,table.riepT tr.riepSub td{font-variant-numeric:tabular-nums}


/* L'IMBALLO SCELTO A MANO — 02/10/2026.
   «un prodotto che solitamente ha un imballo voglio farlo in un altro
   imballo»: la scelta si vede, e si vede che è una scelta. Il verde è quello
   delle cose decise da chi programma, non un allarme: l'imballo nuovo è
   giusto, è solo diverso dal solito. */
.imbSc{margin-top:4px;padding:5px 7px;border-radius:7px;background:#f3faf4;
  border:1px solid #cbe8d2;line-height:1.5}
.imbScE{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  background:#dff0e3;color:#17663a;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
.sotto .imbCambia,.imbSc .imbCambia,.imbSc .imbStd{margin-left:4px}
@media print{ .imbScE{background:none;border:1px solid #888;color:#000} }

/* LA TABELLA DEGLI IMBALLI, CON L'ESISTENZA — 02/10/2026.
   «quando cerco imballo mostralo a tabella e dammi esistenza»: dieci secchielli
   in dieci bottoni larghi non si confrontano, e senza i pezzi in magazzino si
   scegle a occhi chiusi. Righe alte da toccare col pollice in reparto. */
table.imbT td,table.imbT th{padding:8px 9px;vertical-align:middle}
table.imbT tbody tr{cursor:pointer}
table.imbT tbody tr:hover{background:#eef5fd}
table.imbT tbody tr:active{background:#e2eefb}
table.imbT td.imbQ{white-space:nowrap;font-variant-numeric:tabular-nums}
table.imbT td.imbQ b{font-size:14px;color:var(--blu)}
.imbZero{color:#b42318;font-weight:700}
.imbImp{margin-left:4px;color:var(--grigio)}
table.imbT td.cFor{color:var(--grigio);white-space:nowrap}
@media(max-width:560px){
  table.imbT td.cFor,table.imbT th.cFor{display:none}
  table.imbT td,table.imbT th{padding:9px 6px}
}
/* 02/10 — la giacenza di ogni materiale, accanto al suo nome: «servono 377
   coperchi · in magazzino 2.564» è una risposta, «servono 377» è una domanda. */
.matG{color:#17663a}
.matG b{color:#12522e}
.matZero{color:#b42318}
.matZero b{color:#b42318}

/* 05/10 — LA VASCA SI PESA DOPO LA CONFORMITÀ (Vernici e Plastici) */
.pesaCard{border-left:4px solid #c98a16}
.pesaCard.pesaFuori{border-left-color:#c0392b;background:#fff8f7}
.pesaForm{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:10px}
.pesaLab{display:block;font-weight:700;font-size:13px;color:var(--testo)}
.pesaIn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-top:4px}
.pesaIn input{font-size:22px;font-weight:700;text-align:right;min-height:48px}
.pesaIn b{font-size:16px;color:var(--grigio)}
.pesaForm .btn{min-height:48px;margin:0}
.pesaConti{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.pesaConti div{background:var(--carta);border:1px solid var(--bordo);border-radius:10px;padding:8px 10px}
.pesaConti span{display:block;font-size:11px;color:var(--grigio);text-transform:uppercase;letter-spacing:.04em}
.pesaConti b{display:block;font-size:18px}
.pesaConti small{display:block;font-size:11px;color:var(--grigio)}
.pesaConti .pesaDiff b{color:#c0392b}
.pesaSblocco{margin-top:10px;border-top:1px dashed var(--bordo);padding-top:10px}
.pesaSblocco textarea{width:100%;margin-top:4px;font-size:15px}
.pesaBott{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pesaBott .btn{margin:0}
.pesaRimando{color:#8a5a00;background:#fff4dc;border-radius:6px;padding:4px 8px;margin-top:4px}
@media(max-width:700px){
  .pesaForm,.pesaBott{grid-template-columns:1fr}
  .pesaConti{grid-template-columns:1fr 1fr}
  .pesaConti .pesaDiff{grid-column:1/-1}
}

/* 06/10 — stampante per macchina: la riga della macchina sta rientrata sotto la sua linea */
.stRiga.stMac{margin-left:22px;padding-left:10px;border-left:3px solid var(--bordo)}
.stRiga.stMac b{font-weight:600;color:var(--grigio)}
@media(max-width:700px){.stRiga.stMac{margin-left:8px}}

/* 293 — il numero della vasca sulla riga del foglio */
.vscN{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:#e6f0ec;color:#1f5a4a;font-size:.78em;font-weight:800;letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.vscN.vscDa{background:#f3efe4;color:#6b5a2a}
@media print{ .vscN{background:none;border:1px solid #000;color:#000} }

/* 298 — «In laboratorio» di un colore suo: prima era arancio come «In lavorazione» (7/10) */
.p-lab{background:#ece6fb;color:#5b3fa8}
@media print{ .p-lab{background:none;border:1px solid #000;color:#000} }

/* 300 — filtro data in Trasferimento */
/* 302 — stessa altezza e stesso bordo delle pastiglie sopra, tutto sulla stessa linea */
.trasfDate{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.trasfDate label{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 12px;
  border:1.5px solid #ccd5e2;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--grigio);box-sizing:border-box}
.trasfDate input[type=date]{height:32px;box-sizing:border-box;font:inherit;font-size:14px;font-weight:600;padding:0 10px;border:0;border-radius:999px;background:#f3f6fa;color:var(--blu)}
.trasfDate .chip{height:38px;box-sizing:border-box;display:inline-flex;align-items:center;margin:0}
.trasfWrap .trasfFiltri{margin-bottom:6px}
.trasfWrap .trasfFiltri .chip{height:38px;box-sizing:border-box;display:inline-flex;align-items:center}
@media print{ .trasfDate{display:none} }

/* 306 — la nota di sblocco della pesata accompagna la vasca */
.notaPesata{margin:8px 0;padding:10px 12px;border-left:4px solid #a3282d;background:#fdf3f3;border-radius:8px}
.notaPesataT{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#a3282d;margin-bottom:4px}
.notaPesataR{font-size:13.5px;color:var(--blu);line-height:1.35}
.notaPesataR+.notaPesataR{margin-top:4px;font-weight:650}
.riepPesa{display:block;margin:2px 0 6px;font-size:11px;color:var(--grigio);line-height:1.3}
.riepPesa.fuori{color:#a3282d}
.notaPesata.ok{border-left-color:#2e7d4f;background:#eef7f1;padding:7px 12px}
@media print{ .notaPesata{background:none;border-left-color:#000} .notaPesataT,.riepPesa{color:#000} }

/* 308 — pedane mentre si confeziona */
.pedCorso{border-left:4px solid var(--blu3)}
.pedCorsoElenco{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px}
.pedCorsoRiga{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #dfe5ee;border-radius:10px;background:#f7f9fc}
.pedCorsoRiga span{display:block;font-size:12px;color:var(--grigio)}
.pedCorsoTasti{display:flex;flex-direction:column;gap:8px}
.pedCorsoTasti .btn small{display:block;font-size:11px;font-weight:600;opacity:.75}
.confInCorsoBox{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* 09/10 — campioni da smaltire sotto ogni prodotto (operatore, foglio del capo reparto) */
.campSmalt{margin-top:8px;padding:7px 10px;border-radius:10px;background:#fff4e5;border-left:4px solid #d97706;
  font-size:13.5px;line-height:1.45;color:#5b3a07;display:flex;flex-wrap:wrap;gap:2px 10px}
.campSmaltTit{font-weight:800;text-transform:uppercase;letter-spacing:.3px;font-size:11.5px;color:#9a4a03;width:100%}
.campSmalt .campSmaltSenza{color:#7a5a2a}
@media print{.campSmalt{background:none;border-left:2px solid #999;color:#000;padding:2px 6px;margin-top:4px}
  .campSmaltTit{color:#000}}
/* 09/10 — promemoria del campione al confezionatore */
.campRicorda{margin:10px 0;padding:12px 14px;border-radius:12px;background:#fdecea;border:2px solid #d92d20;
  color:#7a1a12;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.campRicorda b{font-size:17px}
.campRicorda span{flex:1 1 220px;font-size:14px}
.campRicorda.fatto{background:#e8f6ee;border-color:#16a34a;color:#14532d;font-size:15px}
.campRicorda .btn.mini{width:auto;margin:0}
/* 09/10 sera — campioni messi in vasca */
.campSmalt .campSmaltMessi{width:100%;color:#14532d;font-weight:600}
.campSmalt .campMetti{width:auto;margin:6px 0 0;min-height:38px;padding:6px 14px;font-size:14px}
.campPop .campPopElenco{display:flex;flex-direction:column;gap:6px}
.campPopRiga{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e3e8ef;border-radius:10px}
.campPopRiga .cresci{min-width:0}
.campPopRiga .cresci > b{display:block;font-size:14.5px}
.campPopRiga .cresci span b{font-size:inherit}
.campPopRiga .cresci span{display:block;font-size:12.5px;color:#5d6879}
.campPopRiga .campN{width:74px;min-height:42px;font-size:17px;font-weight:700;text-align:center}
.campPopRiga .mini2{flex:none}

/* 10/10 — campioni a tutta larghezza nella scheda, come la nota del responsabile */
.campSmalt.campLargo{margin:12px 0 0;padding:10px 12px;border-left-width:5px;border-radius:12px}
.campSmalt.campLargo .campMetti{width:100%;margin-top:8px;min-height:44px}
.campSmalt.campInFase{margin:0 0 14px}
@media(min-width:701px){.campSmalt.campLargo .campMetti{width:auto}}
/* 10/10 — sul telefono la barra dei pannelli diventa un tasto con la griglia */
.ruoloMenu{display:none}
@media(max-width:700px){
  #barraRuoli{overflow:visible!important;flex-wrap:nowrap;justify-content:flex-end;padding-bottom:0}
  #barraRuoli .ruolo{display:none}
  .ruoloMenu{display:inline-flex;align-items:center;gap:8px;min-height:42px;max-width:100%;padding:8px 14px;
    border:0;border-radius:var(--btn-r);background:#fff;color:var(--blu);font:750 14px/1.2 inherit;cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .ruoloMenu .rmTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ruoloMenu .rmIco{font-size:17px;line-height:1}
  .ruoloMenu .rmFr{font-size:12px;opacity:.7}
  .installaApp{display:none!important}
}
.menuRuoli .pop{max-width:430px}
.menuRuoliGriglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.menuRuolo{min-height:56px;padding:10px;border:1.5px solid #d6dee9;border-radius:12px;background:#f4f7fb;
  color:var(--blu);font:700 15px/1.25 inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.menuRuolo.on{background:var(--blu);border-color:var(--blu);color:#fff}
.menuRuolo .solaLett{display:block;font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.menuInstalla{width:100%;margin:0}
.menuInstallaDett{margin:6px 2px 12px;font-size:12.5px}
.menuChiudi{width:100%;margin:0}

/* 10/10 — Controllo: su quali linee l'operatore vede i campioni */
.campLinee{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.campLinea{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1.5px solid #d6dee9;
  border-radius:12px;background:#f4f7fb;font-weight:700;font-size:15px;cursor:pointer;color:#5a6b80}
.campLinea.on{background:#fff4e5;border-color:#d97706;color:#5b3a07}
.campLinea input{width:22px;height:22px;accent-color:#d97706;margin:0}

/* 12/10 — il tasto «Oggi» sotto la data, fra le frecce */
.gsot .goggi{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:5px 14px;min-height:32px;
  border:1.5px solid var(--blu3);border-radius:999px;background:#fff;color:var(--blu3);
  font:750 13px/1 inherit;text-decoration:none;cursor:pointer}
.gsot .goggi span{font-size:15px;line-height:1}
.gsot .goggi:active{background:#eef3f9}
@media(max-width:700px){.gsot .goggi{min-height:36px;padding:6px 16px;font-size:14px}}

/* 13/10 — «aggiornato da …» fisso in basso: non sposta la pagina */
.altri.altriToast{position:fixed;left:50%;transform:translateX(-50%);z-index:60;margin:0;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:min(92vw,520px);text-align:center;
  border-radius:999px;box-shadow:0 6px 18px rgba(18,41,74,.22);pointer-events:none}

/* 13/10 — data della pedana nel Trasferimento */
.trasfDati b .trasfOra{display:inline;margin:0 0 0 6px;font-size:12.5px;font-weight:600;color:var(--grigio)}

/* 16/10 — la vasca fatta da leggere: riquadri che si aprono al tocco */
.consultaBlocco{padding:0;overflow:hidden}
.consultaBlocco>summary{list-style:none;cursor:pointer;padding:11px 12px;-webkit-tap-highlight-color:transparent}
.consultaBlocco>summary::-webkit-details-marker{display:none}
.consultaBlocco>summary .riga{align-items:center;gap:8px}
.consultaFreccia{font-size:22px;line-height:1;color:var(--grigio2);transition:transform .15s;margin-left:2px}
.consultaBlocco[open]>summary .consultaFreccia{transform:rotate(90deg)}
.consultaBlocco[open]>summary{border-bottom:1px solid var(--bordo)}
.consultaCorpo{padding:6px 12px 12px}
.consultaIstr{opacity:.85;border-left:3px solid var(--bordo);padding-left:8px}
.consultaSaltato{color:var(--att)}
.consultaGiro{border-top:1px solid var(--bordo);padding-top:8px;margin-top:8px}
.consultaGiro:first-child{border-top:0;margin-top:0}
.consultaMisure{display:grid;gap:6px;margin:6px 0}
.consultaMisura{display:flex;align-items:center;gap:8px;background:var(--sfondo);border-radius:10px;padding:7px 9px}
.consultaMisura .pill{text-transform:none;letter-spacing:0;font-size:12.5px}
.consultaStoria{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--bordo);font-size:13px}
.consultaStoria:first-child{border-top:0}
.consultaStoria>span{color:var(--grigio);font-variant-numeric:tabular-nums;min-width:40px}
@media print{.consultaBlocco>summary .consultaFreccia{display:none}}

/* 17/10 — REPORT DEL CAPOREPARTO PIÙ LEGGIBILE A SCHERMO.
   «rendi i numeri e i testi più visibili. Alcune persone hanno problemi a
   consultarli». Solo a schermo e solo nel pannello del caporeparto: la
   stampa resta com'è (deve stare nel foglio). Caratteri più grandi, grigi
   più scuri, numeri più marcati. */
@media screen{
  body.pannello-largo{--repGrigio:#3f4a5a}
  body.pannello-largo .repT{font-size:22px}
  body.pannello-largo .repS{font-size:14px;color:var(--repGrigio)}
  body.pannello-largo .repTot b{font-size:28px}
  body.pannello-largo .repTot span{font-size:13.5px;color:var(--repGrigio);font-weight:600}
  body.pannello-largo .repBloccoTit{font-size:15px;padding:9px 11px}
  body.pannello-largo .repBloccoTit span:last-child{font-size:13px}
  body.pannello-largo .repSottotitolo{font-size:13px;color:var(--repGrigio)}
  body.pannello-largo .riepLineaT{padding:9px 12px}
  body.pannello-largo .riepLineaT b{font-size:16px}
  body.pannello-largo .riepLineaT span{font-size:13.5px;opacity:1}
  body.pannello-largo table.riepT{font-size:14.5px;color:#16202e}
  body.pannello-largo table.riepT th{font-size:12px;color:#2b3646;font-weight:800;padding:8px 9px}
  body.pannello-largo table.riepT td{padding:8px 9px}
  body.pannello-largo table.riepT td.riepN{font-size:15.5px;font-weight:700}
  body.pannello-largo table.riepT td.riepP b{font-size:15.5px;line-height:1.25}
  body.pannello-largo table.riepT td.riepP span{font-size:14.5px;color:#2b3646;line-height:1.4}
  body.pannello-largo table.riepT td.riepS{font-size:13px;color:var(--repGrigio)}
  body.pannello-largo table.riepT td.riepDif b{font-size:16px}
  body.pannello-largo table.riepT td.riepDif span{font-size:14.5px;color:#2b3646;font-weight:600}
  body.pannello-largo table.riepT tr.riepSub td{font-size:14px}
  body.pannello-largo table.riepTrav td.riepS span{font-size:12.5px}
  body.pannello-largo .repVoce b,body.pannello-largo .repCorrRiga b{font-size:15px}
  body.pannello-largo .repVoce span,body.pannello-largo .repCorrRiga span{font-size:13px;color:var(--repGrigio)}
  body.pannello-largo .repVoceQta b,body.pannello-largo .repCorrQta b{font-size:16px}
  body.pannello-largo .repCorrTesta b{font-size:15px}
  body.pannello-largo .repCorrTesta span{font-size:13px;color:var(--repGrigio)}
  body.pannello-largo .repScarichi>div{font-size:14.5px;padding:8px 10px}
  body.pannello-largo .repVuoto{font-size:13.5px;color:var(--repGrigio)}
  body.pannello-largo .repPez{font-size:14px;color:var(--repGrigio)}
  body.pannello-largo .repDaConf>b{font-size:15px}
  body.pannello-largo .repDaConf>span,body.pannello-largo .repDaConfRiga span{font-size:13px;color:var(--repGrigio)}
  body.pannello-largo .repDaConfRiga{font-size:14.5px}
  body.pannello-largo .riepNotaRiga b{font-size:14px}
  body.pannello-largo .riepNotaRiga span{font-size:12.5px}
  body.pannello-largo .difSap{font-size:14px}
  /* 17/10 — «anche formule e percentuali»: la riga della formula sotto il
     prodotto e le percentuali della differenza, grandi come il resto */
  body.pannello-largo .repVoceSec{font-size:13.5px;color:#2b3646}
}

/* 17/10 — la colonna del prodotto nel report: le persone di ogni vasca in un
   riquadrino ordinato invece di una fila di parole spezzate */
table.riepT td.riepP>span:not(.riepPers){margin-top:3px}
table.riepT td.riepP span.riepPers{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;
  margin-top:8px;padding:6px 9px;border:0;border-left:3px solid var(--blu3);background:#f5f7fb;
  border-radius:6px;color:var(--testo);line-height:1.35}
table.riepT td.riepP span.riepPers+span.riepPers{margin-top:5px}
table.riepT td.riepP span.riepPersV{display:block;margin:0;font-weight:800;color:var(--blu);white-space:nowrap;line-height:1.35}
table.riepT td.riepP span.riepPersG{display:grid;gap:1px;margin:0;min-width:0}
table.riepT td.riepP span.riepPersR{display:flex;gap:8px;align-items:baseline;margin:0;color:var(--testo);min-width:0}
table.riepT td.riepP span.riepPersR i{font-style:normal;color:var(--grigio);font-size:.86em;flex:0 0 7.6em}
table.riepT td.riepP span.riepPersR em{font-style:normal;font-weight:700;min-width:0;overflow-wrap:anywhere}
table.riepT td.riepP span.riepPersG .riepPesa{margin:2px 0 0}
@media screen{ body.pannello-largo table.riepT td.riepP span.riepPersR i{color:#4b5565} }
@media print{
  table.riepT td.riepP span.riepPers{background:none;border-left-color:#999;padding:3px 6px;margin-top:4px}
  table.riepT td.riepP span.riepPersR i{color:#444}
}

/* 17/10 — «dal cellulare non riesco a scorrere, ne vedo metà». Sul telefono
   il foglio delle produzioni non è più una tabella da scorrere di lato: ogni
   prodotto è un riquadro, ogni pezzatura una scheda coi numeri a coppie
   (etichetta sopra, valore sotto). Niente scorrimento orizzontale. La stampa
   e lo schermo largo restano tabella. */
@media screen and (max-width:1100px){
  .rep{overflow-x:visible;padding:12px 10px}
  .riepLinea,.riepScorri{overflow:visible}
  .repBloccoTit.pez{min-width:0}
  table.riepCard,table.riepCard>tbody{display:block;width:100%}
  table.riepCard>thead{display:none}
  table.riepProd>tbody.riepGrp{border-bottom:8px solid var(--sfondo)}
  table.riepCard tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px 12px;
    padding:10px 12px;border-bottom:1px solid var(--bordo)}
  table.riepCard tr.riepPrimo td{border-top:0}
  table.riepCard td{display:block;width:auto!important;padding:0!important;border:0!important;
    text-align:left!important;white-space:normal!important;background:none}
  table.riepCard td:empty{display:none}
  table.riepCard td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;color:#4b5565;margin-bottom:1px;font-style:normal}
  table.riepCard td.riepP{grid-column:1/-1}
  table.riepProd td.riepP{padding-bottom:6px!important;border-bottom:1px solid var(--bordo)!important}
  table.riepCard td.riepPz{grid-column:1/-1;font-size:16px}
  table.riepCard td.riepPz::before{display:none}
  table.riepCard td.riepS{grid-column:1/-1}
  table.riepCard td.riepDif{grid-column:1/-1;padding-top:8px!important;border-top:1px dashed var(--bordo)!important}
  table.riepCard td.riepN{font-size:16px}
  table.riepCard tr.riepSub{background:#f1f5f9}
  table.riepCard tr.riepSub td.riepPz{font-weight:800;color:var(--blu)}
  table.riepCard td.riepNota{grid-column:1/-1}
  .riepLineaT{flex-wrap:wrap}
}
@media screen and (max-width:760px){
  .repTot,.repTot.q4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:480px){
  table.riepT td.riepP span.riepPers{grid-template-columns:minmax(0,1fr);gap:3px}
  table.riepT td.riepP span.riepPersR i{flex-basis:7em}
}

/* 17/10 — formula e vasche: due targhette uguali sotto il nome, e la colonna
   delle vasche scritta come gli altri numeri */
table.riepT td.riepP span.riepChiavi{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 3px;color:inherit}
table.riepT td.riepP em.riepChiave{font-style:normal;font-weight:800;color:var(--blu);background:#eaf0f8;
  border:1px solid #c6d4e7;border-radius:6px;padding:2px 8px;font-size:1.08em;line-height:1.35;white-space:nowrap}
table.riepT td.riepVas{color:var(--blu);font-weight:700;font-size:inherit}
@media screen{ body.pannello-largo table.riepT td.riepP em.riepChiave{font-size:15px}
  body.pannello-largo table.riepT td.riepVas{font-size:15.5px} }
@media print{
  table.riepT td.riepP em.riepChiave{background:none;border-color:#777;color:#000;font-size:11px;padding:1px 5px}
  table.riepT td.riepVas{color:#000;font-size:11px;font-weight:700}
}

/* 20/10 — le note del travaso, sulla riga del pannello */
.trvNoteBox{margin-top:6px;border-left:3px solid #b77a00;background:#fffaf0;border-radius:6px;padding:5px 8px}
.trvNotaR{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 0}
.trvNotaT{font-weight:700;color:#4a3b12;font-size:13.5px}
.trvNotaF{font-size:11.5px;color:var(--grigio)}
.trvNotaR .trvNotaVia{margin-left:auto;padding:2px 8px;min-height:0}

/* 20/10 — campioni sulla pedana: in bolletta si distinguono dai lotti */
.etich tr.etichCamp td{background:#fff7e8}
.campPedCard{border-left:3px solid #c77d1a}
@media print{ .etich tr.etichCamp td{background:none} }