/* ─────────────────────────────────────────────────────────────────────────
 * Traçabilitat de lots · els estils propis de l'app (sobre ../_comu/comu.css)
 *
 * El llenguatge de l'ofici: el calendari de producció (un Gantt de línies i
 * dies), el graf de traçabilitat (de la matèria primera al client) i les
 * etiquetes GS1, que són en blanc i negre com les de debò. Tinta sobre blanc,
 * filets d'1 px. El terra (#a63d26) només per al focus del teclat i per a
 * l'únic element triat.
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══ Estructura ═════════════════════════════════════════════════════════ */
/* El panell: les xifres a dalt (com a la demo del plànol), les pestanyes,
   el contingut i el peu. Al mòbil, les xifres van a la barra d'eines. */
.panell { container: panell / inline-size; }
/* Una sola columna que no creix amb el contingut: el que és més ample que el
   panell (una taula llarga) es desplaça dins de la caixa, no la pàgina. */
.panell, .zona { grid-template-columns: minmax(0, 1fr); }
.llenc { background: var(--sf-paper); }

.curt { display: none; }
@media (max-width: 900px) {
  .llarg { display: none; }
  .curt { display: inline; }
}

/* A la barra de dalt, el títol i l'etiqueta no hi caben per sota de 1100 px:
   l'etiqueta «Dades d'exemple» ja surt al peu i a cada dada. */
@media (max-width: 1100px) { .sf-barra__accions .sf-etiq { display: none; } }

/* «Prova això» no es mou aquí: és la franja d'una línia de _comu (v2), fixa
   a baix, i la pàgina s'escurça el que fa; no tapa cap node del camí. */

/* ── Les xifres de la retirada ───────────────────────────────────────── */
.xifres { padding: 14px var(--sf-gutter) 16px; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.xifres__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 22px; }
.xifres__titol { font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.3; min-width: 0; }
.xifres__comptadors { --sf-comptadors: 4; padding: 0; margin-top: 10px; gap: 12px 16px; }
.xifres .sf-xifra { font-size: 36px; }
.xifres[data-buit] .sf-xifra { color: var(--sf-gris); }
.xifres__abans { grid-column: 1 / -1; margin: 0; max-width: 46ch; }
@container panell (max-width: 500px) {
  .xifres__comptadors { --sf-comptadors: 2; }
}
@container panell (max-width: 560px) {
  .xifres .sf-xifra { font-size: 32px; }
}
.comptador__sub { display: block; margin-top: 2px; font-size: var(--sf-t-petit); line-height: 1.35; color: var(--sf-gris); }
/* Al mòbil, dins de la barra d'eines: una fila de quatre xifres, sense el detall. */
@media (max-width: 900px) {
  .eines .xifres { grid-column: 1 / -1; padding: 10px 0 2px; border-bottom: 0; border-top: var(--sf-linia) solid var(--sf-filet); margin-top: 4px; }
  .eines .xifres[data-buit] { display: none; }
  .eines .xifres__comptadors { --sf-comptadors: 4; --sf-comptadors-mobil: 4; gap: 8px 10px; margin-top: 8px; }
  .eines .xifres .sf-xifra { font-size: 26px; }
  .eines .xifres .sf-comptador__nom { margin-top: 4px; font-size: var(--sf-t-petit); }
  .eines .xifres .comptador__sub { display: none; }
}
@media (max-width: 360px) { .eines .xifres .sf-xifra { font-size: 22px; } }

/* ── La barra d'eines de la zona ─────────────────────────────────────── */
.eines { gap: 6px 12px; padding-top: 10px; padding-bottom: 8px; }
.eines .segments, .segueix { flex: none; }
.nota-criteri { flex: 1 0 100%; font-size: var(--sf-t-petit); line-height: 1.35; }
@media (max-width: 900px) {
  .eines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .segueix { grid-column: 1 / -1; width: 100%; }
  .eines .segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .eines .sf-segment { padding: 0 6px; }
  .nota-criteri { display: none; }
}

/* ── El peu de la zona: el que es veu i la llegenda ──────────────────── */
.peu-zona__text { min-width: 0; }
.peu-zona__text:empty { display: none; }
.llegenda { gap: 6px 16px; }
.sf-llegenda i.q-ple, .sf-llegenda i.q-buit, .sf-llegenda i.q-dubte, .sf-llegenda i.q-finestra {
  width: 10px; height: 14px; border: 1px solid var(--sf-gris);
}
.sf-llegenda i.q-ple { background: var(--sf-tinta); border-color: var(--sf-tinta); }
.sf-llegenda i.q-buit { background: var(--sf-paper); }
.sf-llegenda i.q-dubte { background: var(--sf-dubte-fons); border: 1px dashed var(--sf-dubte); }
.sf-llegenda i.q-finestra { width: 16px; background: var(--sf-paper-2); border-color: var(--sf-paper-3); }
.sf-llegenda i.l-ple { border-top: 1px solid var(--sf-gris); }
.sf-llegenda i.l-discontinu { border-top: 1px dashed var(--sf-gris); }
.sf-llegenda i.l-dubte { border-top: 2px dotted var(--sf-dubte); }

/* ═══ Calendari de producció ═════════════════════════════════════════════ */
.calendari-caixa { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.calendari-graella { position: relative; display: flex; }
.calendari-noms { position: sticky; left: 0; z-index: 2; flex: none; background: var(--sf-paper); }
.calendari-nom {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center;
  padding: 0 12px 0 var(--sf-gutter);
  border-top: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-nota); line-height: 1.25; color: var(--sf-gris-fort);
}
.calendari-nom:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.calendari { flex: none; overflow: visible; }
.cal-fila { stroke: var(--sf-filet); }
.cal-setmana { stroke: var(--sf-filet-fort); }
.cal-text { font-family: var(--sf-sans); font-size: 13px; fill: var(--sf-gris); }
.cal-text--finestra { fill: var(--sf-gris-fort); }
.cal-text--alerta { fill: var(--sf-tinta); font-weight: 600; }
.cal-alerta { stroke: var(--sf-tinta); }
.cal-finestra { fill: var(--sf-paper-2); }
.cal-codi { font-family: var(--sf-mono); font-size: 13px; font-weight: 600; fill: var(--sf-tinta); }
.cal-codi--apagat { font-weight: 400; fill: var(--sf-gris-fort); }
.bloc, .recepcio { fill: var(--sf-paper); stroke: var(--sf-gris); stroke-width: 1; cursor: pointer; }
.bloc.afectat, .recepcio.afectat { fill: var(--sf-tinta); stroke: var(--sf-tinta); }
.bloc.dubte { fill: var(--sf-dubte-fons); stroke: var(--sf-dubte); stroke-dasharray: 3 2; }
.bloc.apagat, .recepcio.apagat { stroke: var(--sf-filet-fort); }
.bloc:focus, .recepcio:focus { outline: none; }
.bloc:focus-visible, .recepcio:focus-visible { stroke: var(--sf-terra); stroke-width: 2; }
.cal-sel { fill: none; stroke: var(--sf-terra); stroke-width: 2; pointer-events: none; }
@media (hover: hover) {
  .bloc:not(.afectat):hover, .recepcio:not(.afectat):hover { stroke: var(--sf-tinta); fill: var(--sf-paper-2); }
}

/* El detall en passar per sobre d'un bloc del calendari (només amb ratolí). */
.info {
  position: absolute; z-index: 5; max-width: 340px;
  padding: 6px 10px; background: var(--sf-tinta); color: var(--sf-paper);
  font-size: var(--sf-t-nota); line-height: 1.35; pointer-events: none;
}

/* ═══ Camí del lot ═══════════════════════════════════════════════════════ */
.cami { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.cami__pla { position: relative; }
.cami__arestes { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.aresta { fill: none; stroke: var(--sf-gris-suau); stroke-width: 1; }
.aresta--client, .aresta--magatzem { stroke: var(--sf-filet-fort); }
.aresta--finestra, .aresta--afegit { stroke: var(--sf-gris); stroke-dasharray: 4 3; }
.aresta--dubte { stroke: var(--sf-dubte); stroke-dasharray: 2 3; }
.cami--seleccio .aresta { stroke: var(--sf-filet); }
.cami--seleccio .aresta--on { stroke: var(--sf-tinta); }
.cami--seleccio .aresta--dubte.aresta--on { stroke: var(--sf-dubte); }

.cami__col {
  position: absolute; padding-top: 5px;
  border-top: var(--sf-linia) solid var(--sf-tinta);
  font-size: var(--sf-t-nota); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.cami__col--buida { color: var(--sf-gris); border-top-color: var(--sf-filet-fort); font-weight: 500; }
.cami__grup {
  position: absolute; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--sf-t-petit); line-height: 1; color: var(--sf-gris-fort);
}
.cami__grup-n { color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.cami__grup .sf-etiq { font-size: var(--sf-t-petit); }
.cami__buit { position: absolute; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); }

.node {
  position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0; padding: 0 7px;
  border: var(--sf-linia) solid var(--sf-gris-suau); border-radius: 0;
  background: var(--sf-paper); color: var(--sf-tinta);
  font: 400 13px/1.15 var(--sf-sans); text-align: left; white-space: nowrap; overflow: hidden;
  cursor: pointer;
}
.node--alt { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.node__codi { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.node .mono { font-family: var(--sf-mono); font-size: 13px; letter-spacing: 0; }
.node__dada { color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.node--mp { background: var(--sf-tinta); border-color: var(--sf-tinta); color: var(--sf-paper); }
.node--mp .node__codi { font-weight: 600; }
.node--mp .node__dada { color: #d9d9d5; }
.node--finestra, .node--afegit { border-style: dashed; border-color: var(--sf-gris); }
.node--dubte { border: var(--sf-linia) dashed var(--sf-dubte); background: var(--sf-dubte-fons); color: var(--sf-dubte-text); }
.node--dubte .node__dada { color: var(--sf-dubte-text); }
.node--magatzem .node__codi { font-weight: 600; }
.node:focus { outline: none; }
.node:focus-visible, .node--sel { outline: 2px solid var(--sf-terra); outline-offset: 2px; z-index: 2; }
.cami--seleccio .node { border-color: var(--sf-filet); color: var(--sf-gris); }
.cami--seleccio .node .node__dada { color: var(--sf-gris); }
.cami--seleccio .node--connectat { border-color: var(--sf-tinta); color: var(--sf-tinta); }
.cami--seleccio .node--connectat.node--mp { color: var(--sf-paper); }
.cami--seleccio .node--connectat.node--mp .node__dada { color: #d9d9d5; }
.cami--seleccio .node--dubte.node--connectat { border-color: var(--sf-dubte); color: var(--sf-dubte-text); }
@media (hover: hover) {
  .node:hover { border-color: var(--sf-tinta); }
  .node--dubte:hover { border-color: var(--sf-dubte); border-style: solid; }
}

/* Al mòbil (i a les pantalles estretes): una franja per columna, de dalt a
   baix, amb xips de 44 px. Una línia fina a l'esquerra les uneix. */
@media (max-width: 900px) {
  .llenc.llenc--cami { height: auto; }
}
/* A l'ordinador, si la zona és massa estreta per a les cinc columnes, també
   franges, però dins de la zona, que fa scroll per dins. */
.cami--franges { padding: 8px var(--sf-gutter) 20px; }
@media (max-width: 900px) { .cami--franges { position: static; overflow: visible; } }
.franja { padding: 10px 0 12px 14px; margin-left: 3px; border-left: var(--sf-linia) solid var(--sf-filet-fort); }
.franja__titol { font-size: var(--sf-t-nota); font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.franja__xips { display: flex; flex-wrap: wrap; gap: 6px; }
.franja__grup + .franja__grup { margin-top: 12px; }
.franja__subtitol { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); margin-bottom: 6px; }
.cami--franges .node { position: relative; min-height: 44px; min-width: 44px; padding: 0 10px; gap: 8px; }
.cami--franges .node--alt { padding-top: 4px; padding-bottom: 4px; }
.cami__buit--franges { position: static; padding: 4px 0 0 17px; }

/* ═══ El panell ══════════════════════════════════════════════════════════ */
.vista { padding-top: 20px; padding-bottom: 28px; }
.seccio-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.seccio-cap .sf-h3 { min-width: 0; }

/* Codis que són botons dins del text (obren la fitxa). */
.codi-boto {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--sf-filet-fort); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.codi-boto.mono { font-family: var(--sf-mono); font-size: .93em; }
.codi-boto--fort { font-weight: 700; }
@media (hover: hover) { .codi-boto:hover { text-decoration-color: currentColor; } }
@media (pointer: coarse) { .codi-boto { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; vertical-align: middle; } }

/* Llista de dades: nom a l'esquerra, valor a la dreta, filets entre files. */
.fitxa-dl { margin-top: 16px; font-size: var(--sf-t-nota); line-height: 1.4; }
.fitxa-dl > div {
  display: grid; grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr); gap: 2px 14px;
  padding: 7px 0; border-top: var(--sf-linia) solid var(--sf-filet);
}
.fitxa-dl > div:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.fitxa-dl dt { color: var(--sf-gris); }
.fitxa-dl dd { color: var(--sf-tinta); min-width: 0; }
@media (max-width: 420px) { .fitxa-dl > div { grid-template-columns: minmax(0, 1fr); } }

/* ── Alerta ──────────────────────────────────────────────────────────── */
.alerta__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.alerta__titols { min-width: 0; }
.alerta__enllac { text-decoration: none; }
.alerta__fora { font-weight: 400; font-size: .8em; margin-left: 6px; color: var(--sf-gris); }
@media (hover: hover) { .alerta__enllac:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.alerta__assumpte { margin-top: 6px; font-size: var(--sf-t-base); line-height: 1.4; color: var(--sf-tinta); }
.alerta__original { margin-top: 2px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.troballa { margin-top: 18px; padding-top: 12px; border-top: var(--sf-linia) solid var(--sf-tinta); }
.troballa__xifra small { margin-left: 6px; }
.troballa__text { margin-top: 8px; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); }
.troballa__calc { white-space: nowrap; }
.troballa__mostra { margin-top: 2px; }
.alerta__paisos { display: block; margin-top: 3px; font-size: var(--sf-t-petit); line-height: 1.4; color: var(--sf-gris); }
.alerta__mesures { list-style: none; padding: 0; }
.terme-original { color: var(--sf-gris); font-style: italic; }
.alerta__mesures li + li { margin-top: 2px; }
.missatge, .lot-fabrica { margin-top: 24px; }
.missatge__de { margin-top: 8px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.missatge__text {
  margin: 6px 0 0; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--sf-tinta);
  font-size: var(--sf-t-cos); line-height: 1.5; color: var(--sf-tinta); max-width: 60ch;
}
.lot-fabrica__lot { margin-top: 8px; font-size: var(--sf-t-cos); }
.lot-fabrica__lot .codi-boto, .dubte__lot .codi-boto { color: var(--sf-tinta); }
.lot-fabrica__text { margin-top: 2px; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); }
.alerta__nota { margin-top: 24px; padding-top: 12px; border-top: var(--sf-linia) solid var(--sf-filet); }

/* ── Retirada ────────────────────────────────────────────────────────── */
.balanc, .dubtes, .clients, .a-ma { margin-top: 32px; }
#retirada > .balanc:first-child { margin-top: 0; }

.franja-kg { display: flex; gap: 1px; height: 22px; margin-top: 14px; background: var(--sf-paper); }
.franja-kg__seg { display: flex; align-items: center; min-width: 2px; overflow: hidden; background: var(--sf-tinta); }
.franja-kg__nom { padding: 0 6px; font-size: 13px; line-height: 1; color: var(--sf-paper); white-space: nowrap; }
.franja-kg__seg--falta { background: var(--sf-dubte-fons); outline: 1px solid var(--sf-dubte); outline-offset: -1px; }
.franja-kg__nota { margin-top: 6px; }
.balanc__xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.balanc__xifres > div { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: 6px; min-width: 0; }
.balanc__xifres dt { font-size: var(--sf-t-nota); color: var(--sf-gris); line-height: 1.3; }
.balanc__xifres dd { margin: 0; }
.balanc__xifres dd:not(.balanc__etiq) { font-family: var(--sf-serif); font-size: 26px; line-height: 1.15; margin-top: 2px; white-space: nowrap; font-variant-numeric: lining-nums; }
.balanc__falta dd:not(.balanc__etiq) { color: var(--sf-dubte-text); }
.balanc__etiq { margin-top: 2px; }
.balanc__avis { margin-top: 14px; }
.balanc__avis .sf-boto--text { color: var(--sf-dubte-text); text-decoration-color: var(--sf-dubte); }

.dubtes__llista { margin-top: 10px; }
.dubte { display: grid; gap: 10px; }
.dubte__lot { font-size: var(--sf-t-cos); }
.dubte__text { margin-top: -8px; font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-gris-fort); }
.dubte__boto { justify-self: start; }
.dubte__boto[aria-pressed='true'] { border-color: var(--sf-tinta); color: var(--sf-tinta); }
.dubtes .sf-nota { margin-top: 10px; }

.clients .sf-taula-caixa { margin-top: 6px; }
.taula-clients tbody tr { outline-offset: -2px; }
.client__nom { display: block; font-weight: 600; line-height: 1.3; }
.client__sub { display: block; font-size: var(--sf-t-petit); line-height: 1.35; color: var(--sf-gris); }
.fila-magatzem .client__sub { color: var(--sf-error); font-weight: 600; }
.taula-clients .correu { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; }
.taula-clients th.correu { font-family: var(--sf-sans); }
@container panell (max-width: 640px) {
  .taula-clients .correu { display: none; }
}

.a-ma__passos { list-style: none; padding: 0; margin-top: 10px; counter-reset: pas; }
.a-ma__passos li {
  counter-increment: pas; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px;
  padding: 8px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-gris-fort);
}
.a-ma__passos li::before { content: counter(pas); font-family: var(--sf-serif); font-size: 20px; line-height: 1.1; color: var(--sf-gris); }
.a-ma__programa { padding-top: 10px; border-top: var(--sf-linia) solid var(--sf-tinta); font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); }

/* ── Fitxa ───────────────────────────────────────────────────────────── */
.lector { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.lector__fila { display: flex; gap: 8px; }
.lector__entrada { flex: 1 1 auto; min-width: 0; font-family: var(--sf-mono); font-size: 15px; }
.lector__entrada::placeholder { color: var(--sf-gris); }
@media (pointer: coarse) { .lector__entrada { font-size: 16px; } }
.lector__botons { display: flex; flex-wrap: wrap; gap: 8px; }
.lector__botons:not(:has(> :not([hidden]))) { display: none; }
@media (pointer: coarse) and (max-width: 900px) { #mobil { display: none; } }
.fitxa-cos { padding-top: 20px; }
.fitxa-cos .sf-estat { min-height: 140px; padding: 16px 0; }

.fitxa__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fitxa__titol { min-width: 0; overflow-wrap: anywhere; }
.fitxa__titol .mono { font-family: var(--sf-mono); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fitxa__nom { font-weight: 500; color: var(--sf-gris-fort); }
.fitxa__estat { margin-top: 12px; }
.fitxa__passada { color: var(--sf-dubte-text); }
.fitxa__seccio { margin-top: 28px; }
.fitxa__seccio > .sf-nota { margin-top: 8px; }
.fitxa-cos .sf-taula-caixa { margin-top: 6px; }

/* L'etiqueta del lot: sempre en blanc i negre, com la de debò. */
.etiqueta {
  margin: 12px 0 0; padding: 14px 16px 12px;
  max-width: 470px; border: 1px solid #000; background: #fff; color: #000;
}
.etiqueta__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.etiqueta__producte { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.etiqueta__format { font-size: 15px; font-weight: 600; white-space: nowrap; }
.etiqueta__fabrica { margin-top: 2px; font-size: 13px; }
.etiqueta__cos { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.dm { width: 168px; height: 168px; flex: none; }
.etiqueta__dades { display: grid; gap: 8px; min-width: 0; }
.etiqueta__dades dt { font-size: 13px; line-height: 1.25; }
.etiqueta__dades dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.etiqueta__dades .mono { font-family: var(--sf-mono); font-weight: 600; font-size: 15px; }
.etiqueta__hri { margin-top: 12px; padding-top: 8px; border-top: 1px solid #000; font-family: var(--sf-mono); font-size: 13px; letter-spacing: .01em; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .etiqueta__cos { flex-direction: column; align-items: flex-start; }
  .dm { width: 160px; height: 160px; }
}

/* El dígit de control del GTIN, fet davant del visitant. */
.control { margin-top: 10px; }
.control__gtin { font-family: var(--sf-mono); font-size: 17px; letter-spacing: .06em; }
.control__gtin b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.control__taula { margin-top: 10px; border-collapse: collapse; font-family: var(--sf-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.control__taula th { padding: 4px 12px 4px 0; text-align: left; font-family: var(--sf-sans); font-size: 13px; font-weight: 400; color: var(--sf-gris); white-space: nowrap; }
.control__taula td { min-width: 28px; padding: 4px 2px; text-align: center; border-left: var(--sf-linia) solid var(--sf-filet); }
.control__pes { color: var(--sf-gris); }
.control__prod td, .control__prod th { border-top: var(--sf-linia) solid var(--sf-tinta); }
.control__prod td { font-weight: 600; }
.control__suma { margin-top: 10px; font-size: var(--sf-t-cos); color: var(--sf-tinta); }
/* Al mòbil, les 13 xifres reparteixen l'amplada que hi ha. */
@container panell (max-width: 480px) {
  .control__taula { width: 100%; table-layout: fixed; }
  .control__taula th { width: 4.75rem; padding-right: 6px; }
  .control__taula td { min-width: 0; padding: 4px 0; }
}

/* D'on surt: un arbre sagnat. */
.arbre { list-style: none; padding: 0; margin-top: 10px; font-size: var(--sf-t-nota); }
.arbre ul { list-style: none; padding: 0 0 0 14px; margin-left: 2px; border-left: var(--sf-linia) solid var(--sf-filet-fort); }
.arbre__fila {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) 4.8rem minmax(0, .9fr); gap: 2px 12px; align-items: center;
  padding: 6px 0; border-top: var(--sf-linia) solid var(--sf-filet);
}
.arbre > li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.arbre__materia { color: var(--sf-tinta); }
.arbre__lot { min-width: 0; }
.arbre__kg { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arbre__prov { color: var(--sf-gris); }
.arbre__sense { color: var(--sf-dubte-text); }
.arbre__fila--afectat { font-weight: 700; }
.arbre__fila--afectat .arbre__prov { color: var(--sf-tinta); font-weight: 400; }
.arbre__marca { display: block; font-size: 13px; font-weight: 600; color: var(--sf-error); }
.arbre__sub { padding: 6px 0 8px; border-top: var(--sf-linia) solid var(--sf-filet); }
.arbre__subtitol { color: var(--sf-gris-fort); margin-bottom: 4px; }
.arbre__sub .arbre__fila:first-child { border-top: 0; }
/* Al mòbil, cada fila en dues línies: la matèria i els kg; el lot i el proveïdor. */
@container panell (max-width: 480px) {
  .arbre__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'materia kg' 'lot prov' 'marca marca'; gap: 0 12px; }
  .arbre__materia { grid-area: materia; }
  .arbre__kg { grid-area: kg; }
  .arbre__lot { grid-area: lot; }
  .arbre__prov { grid-area: prov; text-align: right; }
  .arbre__marca { grid-area: marca; }
}

/* Els palets del lot: on és cada un (el client i, a sota, l'albarà). */
.taula-palets .palet__client { display: block; }
.taula-palets .palet__albara { display: block; font-family: var(--sf-mono); font-size: 13px; color: var(--sf-gris); }
@container panell (max-width: 480px) {
  .taula-palets .col-unitats { display: none; }
}

/* ═══ Diàlegs ════════════════════════════════════════════════════════════ */
/* L'etiqueta del palet (logística), també en blanc i negre. */
.dialeg-palet { width: min(600px, 100%); }
.etiqueta-palet { border: 1px solid #000; background: #fff; color: #000; }
.ep__camp { display: grid; gap: 1px; padding: 8px 14px; min-width: 0; }
.ep__nom { font-size: 13px; line-height: 1.25; }
.ep__valor { font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ep__valor .mono { font-family: var(--sf-mono); font-weight: 600; }
.ep__de, .ep__sscc, .ep__graella { border-bottom: 1px solid #000; }
.ep__sscc .ep__valor { font-size: 21px; letter-spacing: .02em; }
.ep__graella { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ep__graella .ep__camp:nth-child(2n) { border-right: 1px solid #000; }
.ep__graella .ep__camp { border-top: 1px solid #000; }
.ep__graella .ep__camp--ample { grid-column: 1 / -1; border-top: 0; border-right: 0; }
.ep__codi { padding: 14px 14px 10px; border-bottom: 1px solid #000; }
.barres { display: block; height: 72px; }
.ep__hri { margin-top: 6px; font-family: var(--sf-mono); font-size: 13px; overflow-wrap: anywhere; }
.ep__desti { padding: 8px 14px 10px; font-size: 13px; }

/* El QR per obrir la demo al mòbil. */
.dialeg-mobil { width: min(640px, 100%); }
.mobil { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 24px; align-items: center; }
.qr { width: 225px; height: 225px; }
.mobil__passos { list-style: none; padding: 0; }
.mobil__passos li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-tinta); }
.mobil__passos li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.mobil__n { font-family: var(--sf-serif); font-size: 22px; line-height: 1; }
@media (max-width: 600px) { .mobil { grid-template-columns: minmax(0, 1fr); } }

/* L'escàner. */
.dialeg-escaner { width: min(560px, 100%); }
.escaner { display: grid; gap: 14px; }
.escaner__visor { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.escaner__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.escaner__requadre { position: absolute; inset: 20% 24%; border: 2px solid #fff; }
.escaner__estat { font-size: var(--sf-t-cos); color: var(--sf-tinta); }
.escaner__estat--error { color: var(--sf-error); }
.escaner__accions { display: flex; gap: 8px; }

/* ═══ El que encerta i el que no ═════════════════════════════════════════ */
.revisio__cap { display: flex; align-items: center; gap: 10px; font-size: var(--sf-t-cos); }
.revisio__text { margin-top: 6px; }

/* ═══ Peu del panell ═════════════════════════════════════════════════════ */
.peu-panell { flex-direction: column; align-items: stretch; gap: 8px; }
.peu-panell__nota { font-size: var(--sf-t-petit); line-height: 1.4; max-width: 64ch; }

/* ═══ Impressió de l'etiqueta d'un palet ═════════════════════════════════ */
.impressio { display: none; }
@media print {
  html.imprimint-etiqueta body > :not(.impressio) { display: none !important; }
  html.imprimint-etiqueta .impressio { display: block !important; }
  html.imprimint-etiqueta .etiqueta-palet { width: 100mm; }
  html.imprimint-etiqueta .impressio__nota { width: 100mm; margin-top: 3mm; font-size: 10pt; line-height: 1.35; color: #000; }
}