/* Del DXF al pressupost · el que és d'aquesta app i de cap altra.
   Tot el que és comú (barra, botons, taules, etiquetes…) és a ../_comu/comu.css.

   El llenguatge és el del dibuix tècnic: traç de tinta sense emplenar, cotes
   amb fletxes, un caixetí amb les dades de la peça i el retall de la planxa
   ratllat. Terra només per al contorn triat a la llista (i per al focus). */

/* ═══ Disposició ═══════════════════════════════════════════════════════════
   El panell, prou ample perquè les cinc pestanyes hi càpiguen en una fila:
   la planxa (2 × 1) no hi perd res, perquè a l'ordinador la limita l'alçada. */
@media (min-width: 901px) {
  .sf-dividit.dxf { grid-template-columns: minmax(0, 1fr) clamp(520px, 47vw, 680px); }
}
.panell { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
/* Que una taula ampla (una peça de metres, en mm²) no eixampli tot el panell: la taula es desplaça dins la seva caixa. */
.panell > * { min-width: 0; }

/* ═══ Barra d'eines: les peces d'exemple i el fitxer propi ════════════════ */
.eines { gap: var(--sf-e2) var(--sf-e4); }
.obrir { margin-left: auto; display: flex; align-items: center; gap: var(--sf-e3); min-width: 0; }
.obrir__boto { position: relative; }
/* El camp de fitxer de debò, transparent, a sobre del botó: el toc i el
   teclat hi arriben sense trucs, i el nom accessible és el del botó. */
.obrir__fitxer {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 0;
}
.obrir__fitxer::-webkit-file-upload-button { cursor: pointer; }
.obrir__boto:focus-within { outline: 2px solid var(--sf-terra); outline-offset: 2px; }
.obrir__nota { white-space: nowrap; }

/* ═══ El llenç: la peça a dalt, les planxes a baix ════════════════════════ */
.llenc {
  background: var(--sf-paper);
  display: grid; grid-template-rows: minmax(0, 38fr) minmax(0, 62fr);
}
.banda-peca { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.dibuix-peca { position: relative; min-width: 0; min-height: 0; }
.svg-peca { position: absolute; inset: 0 0 30px; width: 100%; height: calc(100% - 30px); overflow: visible; }
.nota-fitxer {
  position: absolute; left: var(--sf-gutter); right: var(--sf-e3); bottom: 8px;
  display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
  white-space: nowrap; overflow: hidden;
}
.nota-fitxer b { font-weight: 600; color: var(--sf-gris-fort); }
.nota-fitxer__det::before { content: '· '; }
.nota-fitxer__avisos { color: var(--sf-dubte-text); text-decoration-color: var(--sf-dubte); font-size: inherit; }

/* El caixetí de la peça, a baix a la dreta com en un plànol. */
.fitxa {
  align-self: end; width: 256px; margin: 0 var(--sf-gutter) var(--sf-e4) 0;
  border: var(--sf-linia) solid var(--sf-tinta); background: var(--sf-paper);
  font-size: var(--sf-t-nota); line-height: 1.4;
}
.fitxa__cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e2);
  padding: 5px 10px; border-bottom: var(--sf-linia) solid var(--sf-tinta);
  font-weight: 600;
}
.fitxa__dades > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sf-e3); padding: 5px 10px; }
.fitxa__dades > div + div { border-top: var(--sf-linia) solid var(--sf-filet); }
.fitxa dt { color: var(--sf-gris-fort); }
.fitxa dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fitxa dd.dubte { color: var(--sf-dubte-text); }
/* Cada fila del caixetí és un botó (el de la fila sencera): marca al dibuix el que compta. */
.fitxa__dades > div { position: relative; }
.fitxa__boto, .marca-boto {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--sf-gris-suau); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.fitxa__boto::after { content: ''; position: absolute; inset: 0; }
.fitxa__boto:focus-visible { outline: none; }
.fitxa__boto:focus-visible::after { outline: 2px solid var(--sf-terra); outline-offset: -2px; }
.fitxa__dades > div:has(.fitxa__boto[aria-pressed='true']) { box-shadow: inset 2px 0 0 var(--sf-terra); }
.fitxa__boto[aria-pressed='true'], .marca-boto[aria-pressed='true'] { color: var(--sf-tinta); text-decoration: underline solid var(--sf-terra); text-decoration-thickness: 2px; }
.marca-boto { min-height: 24px; }
.marca-boto:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: 2px; }
@media (hover: hover) {
  .fitxa__dades > div:hover { background: var(--sf-paper-2); }
  .marca-boto:hover { color: var(--sf-tinta); }
}

.banda-planxa { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.planxa-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap;
  min-height: 48px; padding: var(--sf-e2) var(--sf-gutter) 0;
}
.planxa-cap__titol { font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.005em; }
.planxa-cap__titol span { font-weight: 400; color: var(--sf-gris); }
.planxes-nav .sf-segment { min-width: 36px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.planxes-nav__text { align-self: center; padding: 0 var(--sf-e2); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dibuix-planxa { position: relative; min-height: 0; }
.svg-planxa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dibuix-planxa[data-carregant] .svg-planxa { opacity: .28; }
.planxa-estat { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.planxa-estat .sf-estat { min-height: 0; padding: var(--sf-e4) var(--sf-e5); justify-items: center; text-align: center; background: var(--sf-paper); }
.planxa-estat .sf-estat--error { pointer-events: auto; border: var(--sf-linia) solid var(--sf-filet); max-width: 440px; }
/* La càrrega inicial: «Llegint la peça…» i, si falla, l'error amb «Tornar-ho a provar». */
.llenc-estat { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: var(--sf-e5); background: var(--sf-paper); }
.llenc-estat[hidden] { display: none; }
.llenc-estat .sf-estat { min-height: 0; max-width: 440px; justify-items: center; text-align: center; }

/* Mentre s'hi arrossega un fitxer. */
.deixar {
  position: absolute; inset: var(--sf-e3); z-index: 5;
  display: none; place-items: center; padding: var(--sf-e6);
  border: var(--sf-linia) solid var(--sf-tinta); background: var(--sf-paper-2);
  font-size: var(--sf-t-base); color: var(--sf-tinta); text-align: center; pointer-events: none;
}
.llenc[data-sobre] .deixar { display: grid; }

/* ── El dibuix de la peça ───────────────────────────────────────────────── */
.svg-peca .k {
  fill: none; stroke: var(--sf-tinta); stroke-width: 1;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.svg-peca .k-ext { stroke-width: 1.6; }
.svg-peca .k-obert { stroke-dasharray: 6 3; }
.svg-peca .k-dubte { stroke: var(--sf-dubte); stroke-width: 1.6; }
.svg-peca .k-fora { stroke: var(--sf-gris-suau); stroke-dasharray: 4 3; }
.svg-peca .k-exclos { stroke: var(--sf-gris-suau); stroke-dasharray: 2 3; }
.svg-peca .k-sel { stroke: var(--sf-terra); stroke-width: 2.4; stroke-dasharray: none; }
/* El que compta la dada triada: en terra, per sobre del dibuix. */
.svg-peca .k-marca { stroke: var(--sf-terra); stroke-width: 2.2; }
.svg-peca .marca-area { fill: var(--sf-terra); fill-opacity: .16; fill-rule: evenodd; stroke: none; }
.svg-peca .perforacio circle { fill: var(--sf-terra); }
.svg-peca .perforacio text {
  font-family: var(--sf-sans); font-size: 13px; font-weight: 600; fill: var(--sf-terra);
  paint-order: stroke; stroke: var(--sf-paper); stroke-width: 3px; stroke-linejoin: round;
}
.svg-peca .eix { stroke: var(--sf-gris-suau); stroke-width: 1; stroke-dasharray: 8 2 2 2; }
.svg-peca .num-dubte {
  font-family: var(--sf-sans); font-size: 13px; font-weight: 600; fill: var(--sf-dubte-text);
  paint-order: stroke; stroke: var(--sf-paper); stroke-width: 4px; stroke-linejoin: round;
}

/* Cotes: línia fina, fletxes plenes i la xifra sense unitat (mm), com als plànols. */
.cota .l { stroke: var(--sf-gris); stroke-width: 1; fill: none; }
.cota .f { fill: var(--sf-gris); }
.cota text {
  font-family: var(--sf-sans); font-size: 13px; fill: var(--sf-gris-fort);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* ── El dibuix de la planxa ─────────────────────────────────────────────── */
.svg-planxa .planxa { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-planxa .marge { fill: none; stroke: var(--sf-gris-suau); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
/* Les peces (gris clar amb traç de tinta) porten l'estil a l'element: vegeu pintaPlanxa(). */
.svg-planxa .ratlla { stroke: var(--sf-gris-suau); stroke-width: 1; }
.svg-planxa .retall-linia { stroke: var(--sf-gris-fort); stroke-width: 1; stroke-dasharray: 5 4; }
.svg-planxa .recorregut { fill: none; stroke: var(--sf-terra); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svg-planxa .retall-text { font-family: var(--sf-sans); font-size: 13px; fill: var(--sf-gris-fort); }

/* ── Peu de la zona: la llegenda i com ha niuat ─────────────────────────── */
.sf-llegenda i.ll-exterior { border-top: 2px solid var(--sf-tinta); }
.sf-llegenda i.ll-forat { border-top: 1px solid var(--sf-tinta); }
.sf-llegenda i.ll-dubte { border-top: 2px solid var(--sf-dubte); }
.sf-llegenda i.ll-retall { border-top: 1px dashed var(--sf-gris-fort); }
.sf-llegenda i.ll-marca { border-top: 2px solid var(--sf-terra); }
.ll-marca-caixa { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; color: var(--sf-tinta); }
.ll-marca-caixa[hidden] { display: none; }
.treu-marca { min-height: 28px; font-size: var(--sf-t-nota); }
.nota-niuat { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }

/* ═══ El panell ═══════════════════════════════════════════════════════════ */
.comptadors { padding-bottom: var(--sf-e3); }
.comptadors .sf-xifra small { margin-left: 3px; }
.comptadors .sf-xifra small.unitat-temps { margin-left: 2px; }

/* La comanda: sempre a la vista, en una graella de noms i controls. */
.comanda {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center;
  gap: var(--sf-e2) var(--sf-e4); padding: var(--sf-e2) var(--sf-gutter) var(--sf-e4);
}
.comanda__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.comanda__fila { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; }
.comanda__nom--gruix { margin-left: var(--sf-e3); }
.nota-unitats { grid-column: 2; margin-top: -2px; color: var(--sf-error); }
.nota-unitats[hidden] { display: none; }
.gruix { width: auto; min-width: 100px; height: var(--sf-control-petit); font-size: var(--sf-t-cos); }

/* Unitats: − [ 200 ] + */
.pas { display: inline-flex; align-items: stretch; }
.pas__boto { width: var(--sf-control-petit); padding: 0; font-size: 18px; font-weight: 400; color: var(--sf-tinta); }
.pas__boto:first-child { border-radius: var(--sf-radi) 0 0 var(--sf-radi); }
.pas__boto:last-child { border-radius: 0 var(--sf-radi) var(--sf-radi) 0; }
.pas__num {
  width: 80px; height: var(--sf-control-petit); padding: 0 8px;
  border-radius: 0; border-left: 0; border-right: 0;
  text-align: center; font-size: var(--sf-t-cos); font-weight: 600;
  appearance: textfield; -moz-appearance: textfield;
}
.pas__num::-webkit-inner-spin-button, .pas__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Les cinc pestanyes, en una fila a l'ordinador i en dues al mòbil: res amagat. */
.pestanyes { flex-wrap: wrap; overflow: visible; row-gap: 0; }
@media (min-width: 901px) and (max-width: 1399px) {
  .pestanyes { column-gap: var(--sf-e4); }
  .pestanyes .sf-pestanya { font-size: var(--sf-t-nota); }
}
.vistes .sf-vista { padding: var(--sf-e3) var(--sf-gutter) var(--sf-e5); }
.vistes .sf-taula th { top: 0; }

/* ── Pressupost ─────────────────────────────────────────────────────────── */
.taula-cost th .sf-etiq { margin-left: 4px; }
.taula-cost td { padding-top: 8px; padding-bottom: 8px; }
.taula-cost .qt { color: var(--sf-gris-fort); }
/* Al mòbil, la quantitat sota el concepte (vegeu pintaCost). */
.taula-cost .qt-m { display: none; font-weight: 400; }
.taula-cost tr.det td { padding-top: 2px; padding-bottom: 3px; border-top: 0; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.taula-cost tr.det td:first-child { padding-left: var(--sf-e4); }
.taula-cost tr.det.ultim td { padding-bottom: 9px; }
.taula-cost tr.det .sf-etiq { margin-left: 6px; }
.taula-cost tfoot td { font-weight: 600; }
.taula-cost tfoot td.qt { font-weight: 400; }
.taula-cost tfoot tr + tr td { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: 8px; }
.taula-cost tfoot .total { font-size: var(--sf-t-h3); letter-spacing: -.01em; }
/* La nota dels imports, a la línia dels botons: sempre sencera i a la vista. */
.peu-panell .nota-cost { margin: 0; max-width: 34ch; line-height: 1.35; }
.cost-buit { padding: var(--sf-e4) 0; color: var(--sf-gris-fort); }

/* ── La peça ────────────────────────────────────────────────────────────── */
.lectura { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); overflow-wrap: anywhere; }
.lectura b { color: var(--sf-tinta); font-weight: 600; }
.lectura .sf-etiq { margin-left: 4px; }
.unitats-dxf { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; margin-top: var(--sf-e3); }
.avisos { display: grid; gap: var(--sf-e2); margin-top: var(--sf-e4); }
.avisos .avis--n { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.avis__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.subtitol { margin: var(--sf-e6) 0 var(--sf-e2); }
.capes { display: grid; }
.capa { display: flex; align-items: center; gap: 2px var(--sf-e3); flex-wrap: wrap; min-height: var(--sf-control-petit); border-top: var(--sf-linia) solid var(--sf-filet); padding: 4px 0; }
.capa:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.capa label { display: inline-flex; align-items: center; gap: var(--sf-e2); cursor: pointer; font-size: var(--sf-t-cos); font-weight: 600; }
.capa label span { font-weight: 400; color: var(--sf-gris); }
.capa__nota { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.ignorades { margin-top: var(--sf-e2); }
.taula-contorns td { padding-top: 4px; padding-bottom: 4px; }
.taula-contorns th .sf-etiq { display: block; margin-top: 2px; }
.taula-contorns th.n .sf-etiq { text-align: right; }
.taula-contorns .col-talla { width: 72px; text-align: center; }
.taula-contorns td.col-talla { padding-right: 0; }
.taula-contorns td.col-talla .casella { margin: 0 auto; }
.taula-contorns .que { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.taula-contorns tr.fora td:not(.col-talla) { color: var(--sf-gris); }

/* Casella gran: la mateixa de sempre, amb una àrea de toc de 32 o 44 px. */
.casella {
  appearance: none; -webkit-appearance: none; flex: none;
  width: var(--sf-control-petit); height: var(--sf-control-petit); margin: 0;
  border: 0; border-radius: var(--sf-radi); cursor: pointer; background-color: transparent;
  background-position: center; background-repeat: no-repeat; background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='.5' y='.5' width='17' height='17' rx='2' fill='%23fff' stroke='%236c6c6c'/%3E%3C/svg%3E");
}
.casella:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='2' fill='%23111'/%3E%3Cpath d='M4.5 9.2 7.6 12.2 13.6 5.9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
}
.casella:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: -4px; }

/* ── Tarifes i velocitats ───────────────────────────────────────────────── */
.grup + .grup { margin-top: var(--sf-e6); }
.grup__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-e3); flex-wrap: wrap; margin-bottom: var(--sf-e2); }
.grup__nota { margin-top: var(--sf-e2); max-width: 62ch; }
.camp {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 52px 142px; align-items: center;
  gap: 4px var(--sf-e3); padding: 6px 0; border-top: var(--sf-linia) solid var(--sf-filet);
}
.camp:last-of-type { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.camp__nom { font-size: var(--sf-t-cos); color: var(--sf-tinta); }
.camp__nom small { display: block; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.camp__entrada { height: var(--sf-control-petit); padding: 0 10px; font-size: var(--sf-t-cos); }
.camp__entrada[aria-invalid='true'] { border-color: var(--sf-error); }
.camp__error { grid-column: 1 / -1; margin: 0; font-size: var(--sf-t-nota); color: var(--sf-error); }
.camp__error[hidden] { display: none; }
.pas__num[aria-invalid='true'] { border-color: var(--sf-error); }
.camp__unitat { font-size: var(--sf-t-nota); color: var(--sf-gris); white-space: nowrap; }
.camp__etiq { justify-self: start; }
.camp--segments { grid-template-columns: minmax(0, 1fr) auto; }
.camp--segments .sf-segments { justify-content: flex-end; }
.tornar { margin-top: var(--sf-e2); min-height: var(--sf-control-petit); font-size: var(--sf-t-nota); }
.camp__font { font-size: var(--sf-t-nota); }

/* ── Com es calcula i el que encerta ────────────────────────────────────── */
.calcul { list-style: none; padding: 0; margin: 0; }
.calcul > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 var(--sf-e3); padding: var(--sf-e3) 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.calcul > li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.calcul__n { font-family: var(--sf-serif); font-size: 22px; line-height: 1.05; color: var(--sf-gris); }
.calcul p { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); max-width: 64ch; }
.calcul b { color: var(--sf-tinta); font-weight: 600; }
.calcul-intro { margin-bottom: var(--sf-e3); }
.revisio h3 { margin: 0 0 var(--sf-e2); }
.revisio h3 + .sf-reglat { margin-bottom: var(--sf-e6); }
.revisio .sf-reglat li { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); max-width: 66ch; }
.revisio__sub { margin: calc(-1 * var(--sf-e3)) 0 4px; font-size: var(--sf-t-cos); font-weight: 600; }
.revisio__nota { margin-bottom: var(--sf-e2); max-width: 66ch; }
.revisio .sf-taula-caixa { margin-bottom: var(--sf-e6); }
.taula-revisio { font-size: var(--sf-t-nota); }
.taula-revisio td { padding-top: 5px; padding-bottom: 5px; vertical-align: top; }
.taula-revisio th .sf-etiq { margin-left: 4px; }
.taula-fitxers .nom-fitxer { font-family: var(--sf-mono); font-size: 13px; color: var(--sf-tinta); overflow-wrap: normal; word-break: normal; }
.taula-revisio td.n { white-space: nowrap; }

/* ── Peu del panell: les dues baixades ──────────────────────────────────── */
.peu-panell .sf-botonera { margin-left: auto; }

/* La línia «Veure la planxa» només és del mòbil. */
.refet { display: none; }

/* «Prova això»: la posa la carcassa (v2). A l'ordinador és una franja d'una línia a
   baix de tot i la pàgina s'escurça el que fa: no tapa la planxa. */

/* ═══ Mòbil ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .panell { grid-template-rows: auto; }
  .llenc { height: auto; grid-template-rows: auto auto; }
  .banda-peca { height: 260px; }
  .dibuix-planxa { height: 480px; }
}
@media (max-width: 760px) {
  /* Les quatre peces en una fila i el fitxer propi a sota: dues línies de 44 px. */
  .eines { padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); row-gap: 6px; }
  .peces { display: grid; grid-template-columns: repeat(4, auto); width: 100%; }
  .peces .sf-segment { padding: 0 6px; }
  .obrir { margin-left: 0; width: 100%; }
  .obrir__boto { width: 100%; }
  .obrir__nota { display: none; }

  .banda-peca { grid-template-columns: minmax(0, 1fr) 156px; height: auto; min-height: 172px; }
  .dibuix-peca { min-height: 172px; }
  .svg-peca { inset: 0 0 46px; height: calc(100% - 46px); }
  .nota-fitxer { bottom: 4px; gap: 0 6px; }
  .llenc { grid-template-rows: auto; grid-auto-rows: auto; }
  /* Els comptadors, just a sota de la peça (app.js els hi mou). */
  .llenc > .comptadors { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); }
  .refet {
    position: fixed; z-index: 45; left: var(--sf-gutter); right: var(--sf-gutter);
    bottom: calc(var(--sf-guia-alt, 0px) + 10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3);
    padding: 6px 6px 6px 12px; background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-tinta);
  }
  .refet[hidden] { display: none; }
  .refet__text { font-size: var(--sf-t-cos); font-weight: 600; font-variant-numeric: tabular-nums; }
  .nota-unitats { grid-column: auto; }
  /* 44 px per al dit, però sense eixamplar la línia: el marge negatiu el treu de l'alçada de la fila */
  .marca-boto { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -12px; vertical-align: middle; }
  .taula-contorns .col-talla { width: 52px; }
  .taula-contorns th, .taula-contorns td { padding-left: 6px; padding-right: 6px; }
  .nota-fitxer { left: var(--sf-gutter); }
  .nota-fitxer b { flex-basis: 100%; }
  .nota-fitxer__det::before { content: none; }
  .fitxa { width: auto; align-self: center; margin: var(--sf-e2) var(--sf-gutter) var(--sf-e2) 0; border-width: 0 0 0 var(--sf-linia); border-color: var(--sf-filet); }
  .fitxa__cap { gap: 6px; padding: 0 0 2px 10px; border: 0; justify-content: flex-start; }
  .fitxa__dades > div { flex-direction: column; align-items: flex-start; gap: 0; padding: 1px 0 1px 10px; min-height: 0; }
  .fitxa__dades > div + div { border-top: 0; }
  .fitxa dt { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); line-height: 1.25; }
  .fitxa dd { font-size: var(--sf-t-nota); line-height: 1.25; }

  /* La planxa en vertical, el títol a dalt i les planxes a sota. */
  .planxa-cap { display: contents; }
  .banda-planxa { grid-template-rows: auto auto auto; }
  .planxa-cap__titol { order: 1; padding: var(--sf-e3) var(--sf-gutter) 0; }
  .dibuix-planxa { order: 2; height: 470px; }
  .planxes-nav { order: 3; padding: 0 var(--sf-gutter) var(--sf-e3); }
  .planxes-nav .sf-segment { min-width: 44px; }

  .comanda { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: var(--sf-e5); }
  .comanda__nom:not(.comanda__nom--gruix) { margin-top: 6px; }
  .comanda__nom--gruix { margin-left: var(--sf-e2); }
  .comanda__segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comanda__segments .sf-segment { padding: 0 6px; }

  .camp { grid-template-columns: minmax(0, 1fr) 52px auto; grid-template-areas: 'nom nom nom' 'entrada unitat etiq'; padding: 8px 0; }
  .camp .camp__nom { grid-area: nom; }
  .camp .camp__entrada { grid-area: entrada; }
  .camp .camp__unitat { grid-area: unitat; }
  .camp .camp__etiq { grid-area: etiq; }
  .camp--segments { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .camp--segments .sf-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .camp--segments .sf-segment { white-space: normal; line-height: 1.2; padding: 4px 8px; }
  .camp--segments > * { grid-area: auto; }

  .taula-cost .qt { display: none; }
  .taula-cost .qt-m { display: block; margin-top: 1px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
  .taula-cost tr.det .qt-m { display: inline; margin: 0; color: var(--sf-gris-fort); }
  .taula-cost tr.det td:first-child { padding-left: var(--sf-e3); }

  .peu-panell .nota-cost { max-width: none; width: 100%; }
  .peu-panell .sf-botonera { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .peu-panell .sf-boto { padding: 0 12px; }
}

/* ═══ Impressió ════════════════════════════════════════════════════════════ */
@media print {
  .eines, .planxes-nav, .sf-pestanyes, .peu-panell, .comanda .pas__boto, .deixar { display: none !important; }
  .llenc { height: 150mm; }
  .vistes .sf-vista:not(#vista-pressupost) { display: none !important; }
  #vista-pressupost { display: block !important; }
}

/* El dibuix que porta una marca queda una mica separat de dalt de la pantalla */
.banda-peca, .banda-planxa { scroll-margin-top: 8px; }
/* Els títols amagats de les taules (position: absolute) es queden dins el panell que fa scroll */
#vista-revisio { position: relative; }