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

   A l'ordinador: la barra d'eines a dalt, la franja de «Prova això» a sota i, en dues columnes, el mòbil del client
   (420 px, una columna de 390 px entre dos filets, sense marc de telèfon) i el panell de la botiga. Al mòbil, el
   client i la botiga són dues pestanyes. */

/* ═══ Disposició ═════════════════════════════════════════════════════════ */
.escena {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'eines eines' 'guia guia' 'client botiga';
  min-height: 0; height: 100%;
}
.eines { grid-area: eines; gap: var(--sf-e3) var(--sf-e6); }
.guia-lloc { grid-area: guia; min-width: 0; }
.guia-lloc .sf-guia__peu .sf-boto--text { display: none; }
.guia-lloc .sf-guia__text { max-width: none; }
/* Els avisos curts, per sobre del peu (no el tapen). */
.sf-flota { bottom: calc(var(--sf-peu-alt, 44px) + 1rem + env(safe-area-inset-bottom)); }
.vista-mobil { display: none; }
.client { grid-area: client; }
.botiga { grid-area: botiga; }

.eines__botiga { display: flex; align-items: center; gap: var(--sf-e3); flex-wrap: wrap; }
.eines__nota { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.eines__avui { font-size: var(--sf-t-cos); font-weight: 600; white-space: nowrap; }
.peu__reinicia { display: none; }

/* El rètol de cada meitat */
.retol { font-size: var(--sf-t-nota); color: var(--sf-gris); line-height: 1.3; }
.retol > span:first-child { color: var(--sf-tinta); font-weight: 600; }
.retol__qui::before { content: '· '; }

/* ═══ L'esquerra: el mòbil del client ════════════════════════════════════ */
.client {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 0; min-width: 0;
  background: var(--sf-paper-2);
  border-right: var(--sf-linia) solid var(--sf-filet);
  padding: 0 14px;
}
.client .retol { padding: 12px 1px 10px; }
.mobil {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; background: var(--sf-paper);
  border-left: var(--sf-linia) solid var(--sf-filet-fort);
  border-right: var(--sf-linia) solid var(--sf-filet-fort);
}
.mobil__cos { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scroll-padding-top: 60px; }
.mobil__peu {
  display: grid; gap: var(--sf-e2);
  padding: 10px 16px 14px; border-top: var(--sf-linia) solid var(--sf-filet-fort); background: var(--sf-paper);
}
.mobil__resum { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); line-height: 1.35; }
.mobil__resum--avis { color: var(--sf-dubte-text); }
.envia { justify-content: space-between; width: 100%; min-height: 48px; font-size: var(--sf-t-base); }
.envia__import { font-variant-numeric: tabular-nums; }
.mobil__peu[hidden] { display: none; }

/* 1. El missatge de WhatsApp: una bombolla sòbria, sense el verd ni el logotip */
.missatge { margin: 16px 16px 4px; padding: 12px 14px 10px; background: var(--sf-paper-2); border: var(--sf-linia) solid var(--sf-filet); }
.missatge__cap { display: flex; justify-content: space-between; gap: var(--sf-e2); font-size: var(--sf-t-nota); font-weight: 600; }
.missatge__hora { font-weight: 400; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.missatge__text { margin-top: 4px; font-size: var(--sf-t-cos); line-height: 1.45; }
.missatge__enllac {
  margin-top: 2px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--sf-t-cos); color: var(--sf-tinta);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sf-gris-suau);
}
.missatge__peu { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--sf-t-petit); color: var(--sf-gris); }

/* 2. La capçalera de la botiga */
.tenda { padding: 14px 16px 12px; }
.tenda__nom { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.tenda__text { margin-top: 4px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.4; }
.tenda__franja { margin-top: 2px; font-size: var(--sf-t-nota); color: var(--sf-tinta); }

/* 3. La de sempre */
.de-sempre { margin: 0 16px 8px; padding: 12px 0 14px; border-top: var(--sf-linia) solid var(--sf-tinta); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.de-sempre__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.de-sempre__text { font-size: var(--sf-t-nota); color: var(--sf-gris); margin-top: 2px; }
.de-sempre__llista { list-style: none; margin: 10px 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: var(--sf-t-nota); line-height: 1.35; }
.de-sempre__llista .q { color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.de-sempre__llista li.no { color: var(--sf-gris); text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
.de-sempre__no { text-decoration: none; display: inline; }
.de-sempre__fet { font-size: var(--sf-t-nota); color: var(--sf-tinta); font-weight: 500; }
.de-sempre__fet .sf-boto--text { font-size: inherit; margin-left: 4px; }

/* 4. El catàleg d'avui */
.cataleg { padding-top: 8px; }
.cataleg__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; padding: 4px 16px 6px; }
.cataleg__cap > .cataleg__titol { display: none; }
.cataleg::before { content: none; }
.cataleg__cap {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--sf-e2);
  padding: 8px 16px; background: var(--sf-paper);
  border-top: var(--sf-linia) solid var(--sf-filet); border-bottom: var(--sf-linia) solid var(--sf-filet);
}
.cataleg__xips { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cataleg__xips::-webkit-scrollbar { display: none; }
.cataleg__xips .sf-segment { flex: none; }
.cataleg__cerca { flex: 0 1 120px; min-width: 88px; height: var(--sf-control-petit); }
.cataleg__nota { padding: 10px 16px 0; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.4; }
.cataleg__buit { padding: 16px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.seccio { padding: 12px 16px 4px; scroll-margin-top: 54px; }
.seccio__titol { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-e2); font-size: var(--sf-t-cos); font-weight: 600; padding-bottom: 6px; border-bottom: var(--sf-linia) solid var(--sf-tinta); }
.seccio__font { font-size: var(--sf-t-petit); font-weight: 400; color: var(--sf-gris); display: inline-flex; gap: 6px; align-items: center; }
.seccio__font .sf-etiq { font-size: var(--sf-t-petit); }
.productes { list-style: none; margin: 0; padding: 0; }
.producte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-e3); padding: 9px 0; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.producte__info { display: grid; gap: 1px; min-width: 0; }
.producte__nom { font-size: var(--sf-t-cos); font-weight: 500; line-height: 1.3; }
.producte__preu { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.producte--no .producte__nom, .producte--no .producte__preu { color: var(--sf-gris); }
.producte--no .producte__nom { text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
.producte__afegir { min-width: 76px; }

/* La tira dels dotze mesos: plens els de temporada, el d'avui amb un filet de tinta a sota */
.tira { display: inline-flex; gap: 2px; margin-top: 4px; padding-bottom: 3px; }
.tira i { display: block; width: 9px; height: 5px; background: var(--sf-filet); position: relative; }
.tira i.si { background: var(--sf-gris-fort); }
.tira i.ara::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--sf-tinta); }
.producte--no .tira i.si { background: var(--sf-gris-suau); }

/* El selector de quantitat, al lloc del botó «Afegir» */
.pas { display: inline-flex; align-items: center; gap: 4px; }
.pas .sf-eina { width: 32px; padding: 0; font-size: 17px; }
.pas__q { min-width: 58px; text-align: center; font-size: var(--sf-t-nota); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 5. La cistella i 6. l'entrega */
.cistella, .entrega { margin: 16px 16px 0; padding-top: 12px; border-top: var(--sf-linia) solid var(--sf-tinta); }
.entrega { padding-bottom: 20px; }
.bloc__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-e2); }
.bloc__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.bloc__n { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.cistella__llista { list-style: none; margin: 8px 0 0; padding: 0; }
.cist { padding: 8px 0; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.cist__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: var(--sf-e2); }
.cist__nom { font-size: var(--sf-t-nota); font-weight: 500; line-height: 1.3; }
.cist__import { text-align: right; font-size: var(--sf-t-nota); font-variant-numeric: tabular-nums; color: var(--sf-gris-fort); white-space: nowrap; }
.cist--no .cist__nom { color: var(--sf-gris); text-decoration: line-through; }
.cist__avis { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.cist__nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; font-size: var(--sf-t-petit); }
.cist__nota-text { color: var(--sf-gris-fort); }
.cist__nota .sf-boto--text { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
.cist__xips { display: grid; gap: var(--sf-e2); margin-top: var(--sf-e2); }
.xips { display: flex; flex-wrap: wrap; gap: 6px; }
.cistella__buida { margin-top: 8px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.cistella__total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 4px; font-size: var(--sf-t-cos); }
.cistella__total b { font-variant-numeric: tabular-nums; }
.cistella__pes { margin-top: 10px; font-size: var(--sf-t-petit); }
.camp { display: grid; gap: 6px; margin-top: 12px; }
.camp__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.camp__ajuda { font-size: var(--sf-t-petit); color: var(--sf-gris); margin-top: 8px; }
.camp .camp__ajuda { margin-top: 0; }
.camp .sf-segment:disabled { color: var(--sf-gris-suau); border-color: var(--sf-filet); cursor: not-allowed; text-decoration: line-through; }

/* 8. El seguiment */
.seguiment { padding: 16px 16px 24px; }
.seguiment > * + * { margin-top: 12px; }
.seg__titol { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.seg__sub { font-size: var(--sf-t-nota); color: var(--sf-gris); margin-top: 2px; }
.seg__arribada { display: none; }
.seg__canvi { font-size: var(--sf-t-cos); font-weight: 600; padding: 8px 10px; background: var(--sf-paper-3); }
.seguiment .bloc__titol { padding-top: 10px; border-top: var(--sf-linia) solid var(--sf-filet); margin-top: 16px; }
.linia-temps { list-style: none; margin: 8px 0 0; padding: 0; }
.linia-temps li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-e3); padding: 6px 0; position: relative; font-size: var(--sf-t-cos); color: var(--sf-gris); }
.linia-temps li + li::before { content: ''; position: absolute; left: 6px; top: -9px; height: 18px; width: 1px; background: var(--sf-filet-fort); }
.linia-temps__punt { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--sf-gris-suau); background: var(--sf-paper); position: relative; z-index: 1; }
.linia-temps li.fet { color: var(--sf-gris-fort); }
.linia-temps li.fet .linia-temps__punt { background: var(--sf-gris-fort); border-color: var(--sf-gris-fort); }
.linia-temps li.ara { color: var(--sf-tinta); font-weight: 600; }
.linia-temps li.ara .linia-temps__punt { background: var(--sf-tinta); border-color: var(--sf-tinta); outline: 1px solid var(--sf-tinta); outline-offset: 2px; }
.linia-temps__hora { font-size: var(--sf-t-nota); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--sf-gris); }
.seg__linies { list-style: none; margin: 6px 0 0; padding: 0; }
.seg__linies li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sf-e3); padding: 6px 0; border-bottom: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-nota); }
.seg__linies li.no { color: var(--sf-gris); }
.seg__nom { font-weight: 500; }
.seg__nota { font-weight: 400; color: var(--sf-gris); }
.seg__q { grid-column: 1; color: var(--sf-gris-fort); font-size: var(--sf-t-petit); }
.seg__import { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg__total { font-size: var(--sf-t-base); font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.seg__entrega { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.45; }

/* ═══ La dreta: el panell de la botiga ═══════════════════════════════════ */
.botiga { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.botiga__cap .retol { padding: 12px var(--sf-gutter) 0; }
.botiga__pestanyes .curt { display: none; }
.botiga__cos { min-height: 0; }
.vista { padding: 16px var(--sf-gutter) 28px; }
.vista__cap { max-width: 78ch; }
.vista__titol { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; display: flex; align-items: baseline; gap: var(--sf-e3); flex-wrap: wrap; }
.vista__text { margin-top: 6px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.45; }
.vista__eines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e3); margin: 14px 0 6px; }
.vista__resum { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.vista__csv { margin-left: auto; }
.vista__buit { padding: 24px 0; font-size: var(--sf-t-cos); color: var(--sf-gris); }
.vista .sf-nota { margin-top: 12px; }

/* El tauler: cinc columnes, de nova a entregada */
.tauler__eines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e3) var(--sf-e4); margin-bottom: 12px; }
.tauler__correu { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); flex: 1 1 280px; min-width: 0; }
.tauler__csv { margin-left: auto; }
.tauler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.columna { min-width: 0; }
.columna__titol { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--sf-t-cos); font-weight: 600; padding-bottom: 6px; border-bottom: var(--sf-linia) solid var(--sf-tinta); }
.columna__n { font-weight: 400; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.columna__llista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.columna__buit { padding: 10px 0; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.targeta {
  display: grid; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px 10px; background: var(--sf-paper); color: var(--sf-tinta);
  border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
  font: inherit; transition: border-color var(--sf-transicio), background-color var(--sf-transicio);
}
.targeta__cap { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.targeta__punt { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-tinta); flex: none; }
.targeta__num { font-size: var(--sf-t-cos); font-weight: 600; font-variant-numeric: tabular-nums; }
.targeta__nova { font-size: var(--sf-t-petit); font-weight: 600; color: var(--sf-terra); }
.targeta__dia { font-size: var(--sf-t-petit); color: var(--sf-gris); margin-left: auto; }
.targeta__client { font-size: var(--sf-t-nota); font-weight: 500; }
.targeta__on, .targeta__n { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); line-height: 1.35; }
.targeta__dubte { margin-top: 3px; font-size: var(--sf-t-petit); color: var(--sf-dubte-text); font-weight: 500; }
.targeta--nova { border-color: var(--sf-tinta); }
.targeta--nova .targeta__punt { background: var(--sf-terra); }
.targeta--feta { background: var(--sf-paper-2); border-color: var(--sf-filet); }
.targeta--feta .targeta__punt { background: var(--sf-gris-suau); }
.targeta--feta .targeta__client { color: var(--sf-gris-fort); }
@media (hover: hover) { .targeta:hover { border-color: var(--sf-tinta); } }
.tauler__anullades { margin-top: 14px; font-size: var(--sf-t-nota); color: var(--sf-gris); }
.tauler__anullades .sf-boto--text { font-size: inherit; }
.tauler__nota { margin-top: 14px; }

/* El detall d'una comanda */
.detall__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e2) var(--sf-e4); padding-bottom: 12px; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.detall__titol { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.detall__titol:focus { outline: none; }
.detall__estat { font-size: var(--sf-t-nota); font-weight: 600; padding: 2px 8px; border: var(--sf-linia) solid var(--sf-tinta); border-radius: var(--sf-radi); }
.detall__estat--anullada { color: var(--sf-error); border-color: var(--sf-error); }
.detall__rebuda { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.detall__graella { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sf-e8); padding-top: 14px; align-items: start; }
.detall__dades { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: var(--sf-t-nota); margin: 0 0 16px; }
.detall__dades dt { color: var(--sf-gris); }
.detall__dades dd { margin: 0; }
.linies { font-size: var(--sf-t-nota); }
.linies th { font-size: var(--sf-t-petit); white-space: normal; line-height: 1.25; vertical-align: bottom; }
.linies__caixa { width: 44px; text-align: center; }
.linies td.linies__caixa input, .linies td.linies__nohi input, .preparar input, .cat input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--sf-tinta); margin: 0; vertical-align: middle; }
.linies__prod { min-width: 120px; }
.linies__nom { display: block; font-weight: 500; }
.linies__nota { display: block; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
.linies__subst { margin-top: 4px; height: 32px; font-size: var(--sf-t-nota); width: 100%; min-width: 120px; }
.linies__dubte { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; margin-top: 4px; font-size: var(--sf-t-petit); color: var(--sf-dubte-text); line-height: 1.35; }
.linies__dubte[hidden] { display: none; }
.linies__dem { white-space: nowrap; }
.linies__preu { color: var(--sf-gris-fort); white-space: normal; min-width: 76px; max-width: 110px; }
.linies__import { font-weight: 600; }
.linies__import.aprox { font-weight: 400; color: var(--sf-gris); }
.linies__nohi { width: 76px; text-align: center; }
.linies__nohi .sf-casella { justify-content: center; }
.linies__buit { color: var(--sf-gris-suau); }
.nohi__text { display: none; }
.pes-caixa, .preu-caixa { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.pes { width: 74px; height: 34px; padding: 0 8px; }
.pes-caixa__u, .preu-caixa__u { font-size: var(--sf-t-petit); color: var(--sf-gris); min-width: 18px; text-align: left; }
.preu { width: 72px; height: 32px; padding: 0 8px; }
.detall__totals { display: grid; justify-content: end; gap: 4px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.total { display: grid; grid-template-columns: auto 120px; gap: var(--sf-e4); align-items: baseline; font-size: var(--sf-t-cos); }
.total b { text-align: right; font-weight: 500; }
.total--final { font-size: var(--sf-t-h3); }
.total--final b { font-weight: 700; }
.total__falta { font-size: var(--sf-t-petit); font-weight: 400; color: var(--sf-gris); }
.detall__accions { display: grid; gap: 10px; align-content: start; position: sticky; top: 0; }
.detall__ara { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.detall__seguent { width: 100%; min-height: 48px; font-size: var(--sf-t-base); }
.detall__accions .bloc__titol { margin-top: 10px; padding-top: 12px; border-top: var(--sf-linia) solid var(--sf-filet); }
.avis-text { white-space: pre-wrap; font-size: var(--sf-t-nota); line-height: 1.45; padding: 10px 12px; background: var(--sf-paper-2); border: var(--sf-linia) solid var(--sf-filet); }
.detall__accions > .sf-boto { justify-self: start; }
.detall__nota { font-size: var(--sf-t-petit); line-height: 1.4; }
.detall__baixades { margin-top: 6px; padding-top: 12px; border-top: var(--sf-linia) solid var(--sf-filet); }

/* Preparar, repartiment, catàleg i clients */
.preparar tr.feta td { color: var(--sf-gris); }
.preparar tr.feta td:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
.preparar__total { font-weight: 600; }
.preparar__quines { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.grup { margin-top: 18px; }
.grup__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sf-e4); padding-bottom: 6px; border-bottom: var(--sf-linia) solid var(--sf-tinta); }
.grup__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; }
.grup__n { font-size: var(--sf-t-nota); color: var(--sf-gris); }
.grup__efectiu { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.grup__cap .sf-boto { margin-left: auto; align-self: center; }
.grup .sf-taula th { border-bottom-color: var(--sf-filet-fort); }
.cat__c { text-align: center; width: 92px; white-space: normal; }
.cat th.cat__c { white-space: normal; line-height: 1.25; }
.cat__nom { font-weight: 500; }
.cat__canviat { display: block; font-size: var(--sf-t-petit); font-weight: 400; color: var(--sf-gris-fort); }
.cat__venda { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.cat tr.fora td { color: var(--sf-gris); }
.cat .tira { margin-top: 0; }
.cat__etiq { display: none; }
/* La tira del panell porta la inicial de cada mes; al mòbil del client, el text. */
.tira--inicials i { width: 13px; height: 15px; font-style: normal; font-size: 9px; font-weight: 600; line-height: 15px; text-align: center; color: var(--sf-gris-fort); }
.tira--inicials i.si { color: var(--sf-paper); }
.producte__collita { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.clients__ds { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); max-width: 34ch; }
.clients__accions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.encerta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-e8); margin-top: 14px; max-width: 1080px; }
.encerta .sf-reglat { margin-top: 8px; font-size: var(--sf-t-cos); line-height: 1.5; }
.encerta__nota { max-width: 78ch; }

/* «Què us podem fer»: el diagrama, prou ample per llegir-lo */
.sf-dialeg.peces { width: min(1180px, 100%); }
.peces__diagrama { margin: 0; border: var(--sf-linia) solid var(--sf-filet); background: #ffffff; }
.peces__diagrama img { display: block; width: 100%; height: auto; }
.peces__diagrama > p { padding: 24px; }
.peces__targetes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-e5); }
.peces__targeta { padding-top: 10px; border-top: var(--sf-linia) solid var(--sf-tinta); }
.peces__targeta h3 { font-size: var(--sf-t-cos); }
.peces__targeta p { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.45; }

/* ═══ Pantalles més estretes ═════════════════════════════════════════════ */
@media (max-width: 1380px) and (min-width: 901px) {
  .detall__graella { grid-template-columns: minmax(0, 1fr); }
  .detall__accions { position: static; grid-template-columns: minmax(0, 1fr); }
  .tauler { gap: 8px; }
  .eines__nota { display: none; }
}

/* ═══ Mòbil: «El client» i «La botiga» en dues pestanyes ════════════════ */
@media (max-width: 900px) {
  .escena { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'eines' 'guia' 'vista' 'client' 'botiga'; height: auto; }
  .eines { padding-top: 8px; padding-bottom: 8px; }
  .eines__nota, .eines__avui, .eines__reinicia { display: none; }
  .peu__reinicia { display: inline-flex; }
  .vista-mobil { display: block; grid-area: vista; position: sticky; top: 0; z-index: 6; background: var(--sf-paper); }
  .vista-mobil__pestanyes { gap: 0; padding: 0; }
  .vista-mobil__pestanyes .sf-pestanya { flex: 1 1 50%; min-height: 48px; font-size: var(--sf-t-base); }
  .vista-mobil__n { color: var(--sf-terra); }
  .escena[data-vista='client'] .botiga, .escena[data-vista='botiga'] .client { display: none; }
  .client { padding: 0; background: var(--sf-paper); border-right: 0; display: block; }
  .client .retol { padding: 12px var(--sf-gutter) 0; }
  .mobil { display: block; border: 0; }
  .mobil__cos { overflow: visible; }
  .missatge { margin: 12px var(--sf-gutter) 4px; }
  .tenda, .seguiment { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .de-sempre, .cistella, .entrega { margin-left: var(--sf-gutter); margin-right: var(--sf-gutter); }
  .cataleg__cap { top: 48px; padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .seccio { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); scroll-margin-top: 110px; }
  .mobil__peu { position: sticky; bottom: var(--sf-guia-alt, 0px); z-index: 4; padding: 10px var(--sf-gutter) 12px; }
  .seg__arribada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .pas .sf-eina { width: 44px; }

  .botiga { display: block; }
  .botiga__cap { position: sticky; top: 48px; z-index: 5; background: var(--sf-paper); }
  /* Sis pestanyes: dues files de tres, perquè cap no quedi sola. */
  .botiga__pestanyes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sf-e3); }
  .botiga__pestanyes .sf-pestanya { justify-content: center; text-align: center; }
  /* Al mòbil, els avisos curts surten a dalt, sota «El client / La botiga», i no tapen el botó de baix. */
  .sf-flota { top: calc(56px + env(safe-area-inset-top)); bottom: auto; }
  .botiga__pestanyes .llarg { display: none; }
  .botiga__pestanyes .curt { display: inline; }
  .vista { padding: 14px var(--sf-gutter) 24px; }
  .vista__csv, .tauler__csv { margin-left: 0; }
  /* El tauler: una llista per estats */
  .tauler { display: block; }
  .columna + .columna { margin-top: 18px; }
  .columna__llista { gap: 6px; }
  .targeta { padding: 10px 12px; min-height: 44px; }
  /* El detall, a pantalla sencera */
  .detall__graella { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e5); }
  .detall__accions { position: static; }
  .linies thead { display: none; }
  .linies, .linies tbody { display: block; }
  .linies tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 'caixa prod import' 'caixa dem pes' 'caixa preu nohi'; gap: 4px 10px; padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
  .linies td { display: block; border: 0; padding: 0 !important; }
  .linies td:nth-child(1) { grid-area: caixa; align-self: start; padding-top: 2px !important; }
  .linies td:nth-child(2) { grid-area: prod; }
  .linies td:nth-child(3) { grid-area: dem; align-self: center; color: var(--sf-gris-fort); }
  .linies td:nth-child(4) { grid-area: pes; }
  .linies td:nth-child(5) { grid-area: preu; align-self: center; text-align: left; }
  .linies td:nth-child(6) { grid-area: import; }
  .linies td:nth-child(7) { grid-area: nohi; }
  .linies tr.sf-fila--dubte { background: var(--sf-dubte-fons); }
  .linies tr.sf-fila--dubte td { background: none; }
  .nohi__text { display: inline; font-size: var(--sf-t-nota); }
  .linies__nohi .sf-casella { justify-content: flex-start; }
  .pes { width: 88px; height: 44px; }
  .preu { height: 44px; }
  .linies td.linies__caixa input, .linies td.linies__nohi input, .preparar input, .cat input[type='checkbox'] { width: 22px; height: 22px; }
  .linies td.linies__caixa, .linies td.linies__nohi { width: auto; }
  .detall__totals { justify-content: stretch; }
  .total { grid-template-columns: minmax(0, 1fr) auto; }
  .encerta { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e5); }
  .peces__targetes { grid-template-columns: minmax(0, 1fr); }
  .clients__ds { max-width: none; min-width: 200px; }
}

/* El catàleg del panell, en fitxes: cap columna amagada i cada casella amb el seu nom. */
@media (max-width: 600px) {
  .cat thead { display: none; }
  .cat, .cat tbody { display: block; }
  .cat tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
  .cat td { display: block; border: 0; padding: 0 !important; width: auto; }
  .cat td.cat__nom { flex: 1 1 100%; }
  .cat td.cat__venda { flex: 1 1 auto; }
  .cat td.cat__c { text-align: left; }
  .cat td:last-child:not(.cat__c) { flex: 1 1 100%; }
  .cat__etiq { display: inline; font-size: var(--sf-t-nota); }
  .cat__casella { justify-content: flex-start; gap: 8px; }
}

/* ═══ Impressió: només la comanda oberta ═════════════════════════════════ */
@media print {
  .escena { display: block; height: auto; }
  .eines, .guia-lloc, .vista-mobil, .client, .botiga__cap, #tauler-vista, .detall__accions, .detall__cap .sf-boto, .peu__reinicia { display: none !important; }
  .botiga, .botiga__cos { display: block; overflow: visible; }
  .detall__graella { display: block; }
  .pes { border: 0; padding: 0; width: auto; }
  .linies input[type='checkbox'] { display: none; }
}

/* Tocs de 44 px amb el dit, també als botons de text. */
@media (pointer: coarse) {
  .missatge__enllac, .cist__nota .sf-boto--text, .de-sempre__fet .sf-boto--text, .tauler__anullades .sf-boto--text { min-height: 44px; }
}