/* Comandes per correu · l'estil de l'app, a sobre de comu.css.
 *
 * Tres columnes a l'ordinador: la safata, el correu i la comanda per a l'ERP.
 * El correu és un document (blanc, filets d'1 px, la cita sagnada en gris) i
 * la comanda és un full de treball (taula reglada, xifres en Bodoni). El terra
 * només marca el correu obert, la línia triada i el lloc de «Veure al correu».
 */

/* ═══ La disposició ═════════════════════════════════════════════════════ */
.safata { grid-area: safata; }
.correu-zona { grid-area: correu; }
.panell { grid-area: panell; }
.vista-mobil { grid-area: mobil; display: none; }
/* Una sola columna que no creix amb el contingut: la graella de l'Excel o una
   taula ampla es desplacen per dins i no eixamplen la pàgina. */
.correu-zona, .panell { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1181px) {
  .dividit {
    grid-template-columns: 248px minmax(0, 1fr) minmax(min(560px, 100%), 44%);
    grid-template-areas: 'safata correu panell';
  }
}
/* Entre 901 i 1180 px, la safata és una franja damunt del correu. */
@media (min-width: 901px) and (max-width: 1180px) {
  .dividit {
    grid-template-columns: minmax(0, 1fr) minmax(min(480px, 100%), 46%);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'safata panell' 'correu panell';
  }
}

/* ═══ La safata ═════════════════════════════════════════════════════════ */
.safata {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; min-height: 0;
  border-right: var(--sf-linia) solid var(--sf-filet);
}
.safata__cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--sf-e3);
  padding: var(--sf-e4) var(--sf-e5) var(--sf-e3);
  border-bottom: var(--sf-linia) solid var(--sf-tinta);
}
.safata__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.safata__etiq { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.safata__adreca, .safata__dia { grid-column: 1 / -1; font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.4; }
.safata__adreca { color: var(--sf-gris-fort); }
.safata__llista { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

.missatge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px var(--sf-e2);
  width: 100%; padding: 11px var(--sf-e5) 12px;
  border: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); border-radius: 0;
  background: var(--sf-paper); color: var(--sf-tinta); text-align: left; cursor: pointer;
  transition: background-color var(--sf-transicio);
}
.missatge__de { font-size: var(--sf-t-nota); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.missatge__hora { font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.missatge__assumpte { grid-column: 1 / -1; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.missatge__estat { grid-column: 1 / -1; font-size: var(--sf-t-petit); color: var(--sf-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.missatge__adj { color: var(--sf-gris-fort); font-weight: 600; }
.missatge__dubtes { color: var(--sf-dubte-text); font-weight: 600; }
.missatge__passada { color: var(--sf-llegit); font-weight: 600; }
.missatge[aria-current='true'] { background: var(--sf-paper-2); box-shadow: inset 2px 0 0 var(--sf-terra); }
.missatge:focus-visible { outline-offset: -2px; }

/* ═══ El correu ═════════════════════════════════════════════════════════ */
.correu-cap { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); min-width: 0; }
.correu__assumpte { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.correu__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px var(--sf-e3); margin-top: var(--sf-e2); font-size: var(--sf-t-nota); line-height: 1.45; }
.correu__meta > div { display: contents; }
.correu__meta dt { color: var(--sf-gris); }
.correu__meta dd { min-width: 0; overflow-wrap: anywhere; }
/* L’adreça no es parteix pel guionet: si no hi cap, baixa sencera a la línia següent. */
.correu__adreca { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.correu__respon { margin-top: var(--sf-e2); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.correu__respon .sf-boto--text { font-size: inherit; }

.correu-cos { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.correu-text { flex: none; padding: var(--sf-e4) var(--sf-gutter) var(--sf-e5); font-size: var(--sf-t-cos); line-height: 1.55; max-width: 76ch; }
.correu-text > * + * { margin-top: 10px; }
.cos__llista { padding-left: 1.3em; }
.cos__llista li + li { margin-top: 2px; }
.cos__taula-caixa { margin-top: var(--sf-e3) !important; margin-bottom: var(--sf-e2); }
.cos__taula { font-size: var(--sf-t-nota); }
.cos__taula td, .cos__taula th { padding-left: 8px !important; padding-right: 8px; }
.cos__taula td:first-child, .cos__taula th:first-child { padding-left: 0 !important; }
.cos__signatura { margin-top: var(--sf-e4) !important; padding-top: var(--sf-e2); border-top: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); width: max-content; max-width: 100%; }
.cos__cita { margin: var(--sf-e5) 0 0 !important; padding: 2px 0 2px var(--sf-e4); border-left: 2px solid var(--sf-filet-fort); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.cos__cita-de { font-size: var(--sf-t-petit); color: var(--sf-gris); margin-bottom: 4px; }
/* El lloc de «Veure al correu» al text: terra, fi. */
mark.marca { background: var(--sf-terra-tint); color: inherit; box-shadow: 0 0 0 1.5px var(--sf-terra); border-radius: 1px; padding: 0 1px; }
.marca-bloc { background: var(--sf-terra-tint); box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 6px; }
.cos__taula td.marca-cel { background: var(--sf-terra-tint); box-shadow: inset 0 0 0 1.5px var(--sf-terra); }

/* ── L'adjunt ───────────────────────────────────────────────────────── */
.adjunt { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 420px; border-top: var(--sf-linia) solid var(--sf-filet); }
.adjunt__eines { flex: none; gap: var(--sf-e2) var(--sf-e3); }
.adjunt__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); min-width: 0; flex: 1 1 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunt__nom b { font-weight: 600; color: var(--sf-tinta); }
.adjunt__accions { flex-wrap: nowrap; }
.adjunt__visor { display: inline-flex; gap: 6px; }

.visor { flex: 1 1 auto; min-height: 320px; touch-action: none; user-select: none; -webkit-user-select: none; }
.visor--ampliat { cursor: grab; }
.visor--arrossega { cursor: grabbing; }
.visor__escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.visor__escena--suau { transition: transform var(--sf-transicio); }
.visor__escena img { width: 100%; height: 100%; max-width: none; pointer-events: none; }
.visor__capa { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.visor__capa rect { fill: none; stroke: var(--sf-terra); }

/* L'Excel: una graella com la del full de càlcul, pintada des de la vista. */
.full { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: var(--sf-e4) var(--sf-gutter) var(--sf-e5); background: var(--sf-paper-2); }
.full__caixa { max-width: 100%; overflow: auto; background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-filet-fort); }
.full__taula { border-collapse: collapse; table-layout: fixed; font-size: var(--sf-t-petit); line-height: 1.3; }
.full__taula th, .full__taula td { height: 28px; padding: 3px 6px; border: var(--sf-linia) solid var(--sf-filet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full__taula thead th { position: sticky; top: 0; z-index: 3; background: var(--sf-paper-2); color: var(--sf-gris); font-weight: 500; text-align: center; }
.full__taula .full__n { position: sticky; left: 0; z-index: 2; background: var(--sf-paper-2); color: var(--sf-gris); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.full__cantonada { left: 0; z-index: 4 !important; }
/* El text que s'allarga per sobre de les cel·les buides de la dreta. */
.full__taula td.full__cel--desborda { position: relative; overflow: visible; text-overflow: clip; }
.full__text { position: absolute; left: 6px; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; z-index: 1; pointer-events: none; }
.full__cel--ratllat .full__text { text-decoration: line-through; }
.full__cel--num { text-align: right; font-variant-numeric: tabular-nums; }
.full__cel--negreta { font-weight: 600; }
.full__cel--ratllat { text-decoration: line-through; color: var(--sf-gris); }
.full__cel--marcada { background: var(--sf-terra-tint); }
.full__pestanya { margin-top: -1px; padding: 5px 14px; font-size: var(--sf-t-petit); background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-filet-fort); border-top-color: var(--sf-paper); color: var(--sf-tinta); font-weight: 600; }

/* ═══ El panell: la comanda per a l'ERP ═════════════════════════════════ */
.comptadors { padding-bottom: var(--sf-e3); }
/* El nom de sota la xifra, en bloc perquè l'etiqueta «Calculat» vagi a continuació
   del text; i sempre de dues línies, perquè la fila no salti en resoldre un dubte. */
.comptadors .sf-comptador__nom { display: block; font-size: var(--sf-t-petit); min-height: calc(2 * 1.35em); }
.comptadors .sf-comptador__nom .sf-etiq { display: inline-flex; vertical-align: baseline; margin-left: 2px; white-space: nowrap; }
.vista-comanda { padding-top: var(--sf-e3); }

/* La capçalera de la comanda: una llista reglada de dues columnes. */
.cap__titol { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); flex-wrap: wrap; margin-bottom: var(--sf-e3); }
.cap__titol h2 { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; }
.cap { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.cap__fila { display: contents; }
.cap__fila > * { padding: 6px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.cap__fila:first-child > * { border-top-color: var(--sf-tinta); }
.cap__fila--seguida > .cap__nom { border-top-color: transparent; }
/* La nota, a sota del valor i fins al marge dret, sense filet. */
.cap__fila > .cap__nota { grid-column: 2 / -1; border-top: 0; padding: 0 0 8px; }
.cap__fila--amb-nota > .cap__nom { grid-row: span 2; }
.cap__nota .nota-lectura { margin-top: 0; }
.cap__nom { font-size: var(--sf-t-nota); color: var(--sf-gris); padding-right: var(--sf-e3); line-height: 1.5; }
.cap__valor { font-size: var(--sf-t-cos); min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.cap__origen { display: flex; align-items: center; justify-content: flex-end; gap: 4px var(--sf-e3); flex-wrap: wrap; padding-left: var(--sf-e3); line-height: 1.45; }
.cap__client { font-weight: 600; }
.cap__codi { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); }
.cap__codi--ref { font-size: var(--sf-t-nota); color: var(--sf-tinta); }
.cap__buit { color: var(--sf-gris); }
.cap__per-triar { color: var(--sf-dubte-text); font-weight: 600; }
.nota-lectura { margin-top: 3px; font-size: var(--sf-t-petit); line-height: 1.45; color: var(--sf-gris-fort); }
.nota-lectura b { font-weight: 600; color: var(--sf-tinta); }
.veure { font-size: var(--sf-t-petit); white-space: nowrap; }
.veure--lloc { color: var(--sf-gris-fort); }
.veure-grup { display: inline-flex; gap: var(--sf-e3); }
.etiq-triat { color: var(--sf-tinta); }
.etiq-triat::before { border-radius: 0; transform: rotate(45deg) scale(.8); background: none; border: 1.5px solid currentColor; }

.avis-canvi { margin-top: var(--sf-e4); }
.avis-canvi .sf-boto--text { font-size: inherit; }
.dubtes-comanda { display: grid; gap: var(--sf-e3); margin-top: var(--sf-e4); }

/* Les línies */
.comanda-cos > .sf-taula-caixa { margin-top: var(--sf-e5); }
.linies .linies__n { width: 30px; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.linies__codi { display: block; font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-tinta); line-height: 1.4; }
.linies__codi--buit { font-family: var(--sf-sans); font-weight: 600; color: var(--sf-dubte-text); }
.linies__nom { display: block; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.35; }
.linies__data { display: block; margin-top: 2px; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.linies__u { white-space: nowrap; color: var(--sf-gris-fort); font-size: var(--sf-t-nota); }
.linies__kg-u { display: none; }
.linies .linies__estat { width: 1%; white-space: nowrap; }
.linies thead .linies__estat { text-align: left; }
.linies tbody tr.linia:focus-visible { outline-offset: -2px; }
.linies th .sf-etiq, .totes th .sf-etiq { margin-left: 4px; }

/* El detall de la línia triada: just a sota, en el gris de la selecció. */
.sf-taula tr.fila-detall > td { padding: 0 !important; border-top: 0; background: var(--sf-paper-2); }
.detall { padding: var(--sf-e3) var(--sf-e4) var(--sf-e4); }
.detall__diu { font-size: var(--sf-t-nota); color: var(--sf-tinta); }
.detall__diu-nom { color: var(--sf-gris); }
.detall__camps { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; margin-top: var(--sf-e2); }
.detall__camp { display: contents; }
.detall__camp > * { padding: 7px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.detall__camp dt { font-size: var(--sf-t-nota); color: var(--sf-gris); padding-right: var(--sf-e3); }
.detall__camp > .detall__nota { grid-column: 2 / -1; border-top: 0; padding: 0 0 8px; }
.detall__camp--amb-nota > dt { grid-row: span 2; }
.detall__nota .nota-lectura { margin-top: 0; }
.detall__valor { font-size: var(--sf-t-nota); min-width: 0; overflow-wrap: anywhere; }
.detall__valor a { white-space: nowrap; }
.detall__origen { display: flex; align-items: flex-start; justify-content: flex-end; gap: 4px var(--sf-e3); flex-wrap: wrap; padding-left: var(--sf-e3); }
.detall__calcul { display: block; color: var(--sf-gris); font-variant-numeric: tabular-nums; }

/* El quadre del dubte: sempre obert, sota la línia o sota la capçalera. */
.sf-taula tr.fila-dubte > td { padding: 0 !important; border-top: 0; }
.dubte { padding: var(--sf-e3) var(--sf-e4) var(--sf-e4); border-left: 2px solid var(--sf-dubte); background: var(--sf-dubte-fons); }
.dubtes-comanda .dubte { border: var(--sf-linia) solid var(--sf-dubte-filet); border-left: 2px solid var(--sf-dubte); }
.dubte__titol { margin-bottom: 6px; }
.dubte__pregunta { font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-tinta); }
.dubte__pregunta b { font-weight: 600; }
.dubte__perque { margin-top: 4px; font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-gris-fort); }
.dubte__opcions { display: flex; flex-wrap: wrap; gap: var(--sf-e2); margin-top: var(--sf-e3); }
.opcio {
  flex: 1 1 210px; display: grid; gap: 2px; justify-items: start; align-content: center;
  min-height: 52px; padding: 8px 12px; text-align: left; white-space: normal;
  border-color: var(--sf-gris-suau); color: var(--sf-tinta); font-size: var(--sf-t-nota);
}
.opcio__text { font-weight: 600; line-height: 1.3; }
.opcio__peu { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); font-weight: 400; font-variant-numeric: tabular-nums; }
.dubte--resolt { padding: 6px var(--sf-e4) 10px 38px; border-left: 0; background: none; }
.dubtes-comanda .dubte--resolt { padding: var(--sf-e2) 0; border: 0; border-top: var(--sf-linia) solid var(--sf-filet); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.dubte__frase { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.45; }
.dubte__canviar { font-size: inherit; margin-left: 4px; }

/* El canvi (c07): abans i després */
.canvi__taula td { vertical-align: top; }
.canvi__fila--igual td { color: var(--sf-gris); }
.canvi__fila--igual .linies__codi, .canvi__fila--igual .linies__nom { color: var(--sf-gris); }
.canvi__nou { font-weight: 600; }
.canvi__nota { display: grid; gap: 6px; justify-items: start; margin-top: var(--sf-e4); }

/* El peu del panell */
.passar-nota { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); min-width: 0; }
.passar-nota--dubte { color: var(--sf-dubte-text); font-weight: 600; }
.passar-nota:focus { outline: none; }
.passar-nota:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: 4px; }
.passar-nota.parpelleja { animation: parpelleja .5s ease-in-out 1; }
@keyframes parpelleja { 50% { opacity: .2; } }
.peu-panell .sf-botonera { margin-left: auto; }
.sf-boto--principal[aria-disabled='true'] { background: var(--sf-paper-3); border-color: var(--sf-paper-3); color: var(--sf-gris); }

/* ── Totes les comandes ─────────────────────────────────────────────── */
.nowrap { white-space: nowrap; }
.totes td { vertical-align: top; }
.totes th, .totes td { padding-left: 6px; padding-right: 6px; }
.totes__nom { display: block; font-weight: 600; line-height: 1.35; }
.totes__rebut { display: block; margin-top: 2px; color: var(--sf-gris); font-size: var(--sf-t-petit); white-space: nowrap; }
.totes__ref .sf-mono { font-size: var(--sf-t-petit); }
.totes__buit { color: var(--sf-gris); }
.totes__entrega { font-size: var(--sf-t-nota); white-space: nowrap; }
.totes__dia { display: block; }
.totes__sub { display: block; margin-top: 2px; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.totes__linies, .totes__kg { white-space: nowrap; }
.totes th.totes__kg-cap { line-height: 1.5; }
.totes .totes__estat { font-size: var(--sf-t-nota); }
.totes__u { display: none; }
.totes tfoot td { font-weight: 600; }
.totes tfoot .totes__total { white-space: normal; }
.totes__nota { margin-top: var(--sf-e3); }

/* ── El que encerta i el que no ────────────────────────────────────── */
#vista-revisio > * + * { margin-top: var(--sf-e5); }
.rev__xifres { padding: 0; }
.rev__seccio .sf-h3 { margin-bottom: var(--sf-e2); }
.rev__errors { list-style: none; display: grid; gap: var(--sf-e3); }
.rev__error { padding: var(--sf-e3) var(--sf-e4); border: var(--sf-linia) solid var(--sf-filet); }
.rev__error--greu { border-left: 2px solid var(--sf-dubte); }
.rev__on { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.rev__parell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-e3); margin: var(--sf-e2) 0; }
.rev__clau { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.rev__valor { font-size: var(--sf-t-cos); font-weight: 600; overflow-wrap: anywhere; }
.rev__peu { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; margin-top: var(--sf-e2); }
.rev__peu .veure { margin-left: auto; }
.rev__pocs { margin-top: var(--sf-e3); }
.rev__correu, .rev__encert { display: grid; gap: 2px; }
.rev__correu-id { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.rev__veredicte { font-weight: 600; }

/* ── El diàleg «Passar a l'ERP» i el calaix ────────────────────────── */
.dialeg-erp { width: min(960px, 100%); }
.dialeg-erp .sf-dialeg__peu { justify-content: flex-end; }
.erp__peu-nota { margin-right: auto; }
/* Els camps de la comanda, de dos en dos a l'ordinador. */
.erp__camps { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); font-size: var(--sf-t-nota); }
.erp__camps > div { display: contents; }
.erp__camps dt, .erp__camps dd { padding: 5px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.erp__camps dt { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); padding-right: var(--sf-e4); }
.erp__camps dd { overflow-wrap: anywhere; padding-right: var(--sf-e5); }
.erp__taula { font-size: var(--sf-t-nota); }
.erp__taula th { font-family: var(--sf-mono); font-size: var(--sf-t-petit); }
.erp__taula td.codi, .erp__taula td.n { white-space: nowrap; }
.erp__buit { color: var(--sf-gris); }

.calaix__nom { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; }
.calaix__fitxa { display: grid; grid-template-columns: max-content minmax(0, 1fr); font-size: var(--sf-t-nota); }
.calaix__fitxa > div { display: contents; }
.calaix__fitxa dt, .calaix__fitxa dd { padding: 8px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.calaix__fitxa dt { color: var(--sf-gris); padding-right: var(--sf-e5); }
.calaix__fitxa dd { overflow-wrap: anywhere; }

/* ── El que la revisió hi ha trobat, al costat de la dada ──────────── */
.etiq-error { color: var(--sf-error); font-weight: 600; }
.etiq-error::before { border-radius: 0; width: 7px; height: 7px; background: none; border: 1.5px solid currentColor; transform: rotate(45deg) scale(.8); }
.etiq-error--demes { color: var(--sf-gris-fort); }
.rev-marca { margin-top: var(--sf-e3); padding: 10px 12px 12px; background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-filet-fort); border-left: 2px solid var(--sf-error); }
.rev-marca--demes { border-left-color: var(--sf-gris-suau); }
.rev-marca__hauria { margin-top: 4px; font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-tinta); }
.rev-marca__hauria b { font-weight: 600; }
.rev-marca__perque { margin-top: 2px; font-size: var(--sf-t-petit); line-height: 1.45; color: var(--sf-gris-fort); }
.rev-marca__peu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-e3); margin-top: 6px; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.rev-marca__peu > span:first-child { flex: 1 1 14rem; }
.dubte--resolt .rev-marca { margin-top: var(--sf-e2); }
.cap__fila--rev > .cap__rev { grid-column: 2 / -1; border-top: 0; padding: 0 0 var(--sf-e3); }
.cap__rev .rev-marca { margin-top: 0; }
.linies__rev { display: block; margin-top: 4px; }
.rev__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-e3); }

/* El visor, amb el teclat */
.visor:focus { outline: none; }
.visor:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: -2px; }

/* ── Pantalles baixes (portàtils de 768 a 860 px d'alt) ────────────── */
/* La capçalera del correu en una línia i, si porta adjunt, el text en una
   caixa curta amb scroll propi: l'adjunt ocupa l'alçada que queda. */
@media (min-width: 901px) and (max-height: 860px) {
  .correu-cap { padding-top: var(--sf-e3); padding-bottom: 10px; }
  .correu__assumpte { font-size: var(--sf-t-h3); letter-spacing: -.015em; }
  .correu__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sf-e4); margin-top: 2px; font-size: var(--sf-t-petit); }
  .correu__meta > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
  .correu__meta dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .correu-text { padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); font-size: var(--sf-t-nota); }
  .correu-cos--adjunt { overflow: hidden; }
  .correu-cos--adjunt .correu-text { flex: 0 1 auto; min-height: 4.6em; overflow-y: auto; overscroll-behavior: contain; }
  .correu-cos--adjunt .adjunt { flex: 1 0 auto; min-height: 340px; }
  .visor { min-height: 0; }
  .comptadors { padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .comptadors .sf-xifra { font-size: 32px; }
  .vista-comanda { padding-top: var(--sf-e2); }
  .cap__fila > * { padding: 4px 0; }
  .comanda-cos > .sf-taula-caixa { margin-top: var(--sf-e3); }
}

@media (hover: hover) {
  .missatge:not([aria-current='true']):hover { background: #fafaf8; }
}

/* ═══ Entre 901 i 1180 px: la safata, una franja ═══════════════════════ */
@media (min-width: 901px) and (max-width: 1180px) {
  .safata { display: block; border-right: var(--sf-linia) solid var(--sf-filet); border-bottom: var(--sf-linia) solid var(--sf-filet); }
  .safata__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-e3); padding: 10px var(--sf-gutter) 6px; border-bottom: 0; }
  .safata__adreca, .safata__dia { grid-column: auto; }
  .safata__etiq { margin-top: 0; align-self: center; }
  .safata__llista { display: flex; gap: var(--sf-e2); overflow-x: auto; overflow-y: hidden; padding: 4px var(--sf-gutter) 12px; }
  .missatge { flex: 0 0 188px; border: var(--sf-linia) solid var(--sf-filet); padding: 8px 12px 9px; }
}
/* De 961 a 1180 px, la barra ja diu «Correus d'exemple»; fins a 960, ho diu la safata. */
@media (min-width: 961px) and (max-width: 1180px) {
  .safata__etiq { display: none; }
}
/* La franja, més baixa a les pantalles baixes (l'assumpte ja surt a la capçalera del correu). */
@media (min-width: 901px) and (max-width: 1180px) and (max-height: 860px) {
  .safata__cap { padding-top: 6px; padding-bottom: 2px; }
  .safata__llista { padding-bottom: 8px; }
  .missatge { padding: 6px 10px 7px; }
  .missatge__assumpte { display: none; }
}

/* ═══ Mòbil (fins a 900 px) ═════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Quan l'app porta alguna cosa a la vista, que no quedi sota la barra
     «Correu · Comanda» (dalt) ni sota la franja de «Prova això» (baix). */
  html { scroll-padding-top: 76px; scroll-padding-bottom: calc(var(--sf-guia-alt, 0px) + 12px); }
  .dividit { display: block; }
  .safata { display: block; border-right: 0; }
  .safata__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-e3); padding: var(--sf-e3) var(--sf-gutter) 6px; border-bottom: 0; }
  .safata__adreca, .safata__dia { grid-column: auto; }
  /* Al mòbil, que són correus d'exemple es diu a la primera pantalla. */
  .safata__etiq { margin-top: 2px; align-self: center; }
  .safata__llista { display: flex; gap: var(--sf-e2); overflow-x: auto; overflow-y: hidden; padding: 4px var(--sf-gutter) var(--sf-e3); scroll-padding: 0 var(--sf-gutter); scrollbar-width: none; }
  .safata__llista::-webkit-scrollbar { display: none; }
  .missatge { flex: 0 0 200px; border: var(--sf-linia) solid var(--sf-filet); padding: 10px 12px 11px; }

  .vista-mobil {
    display: flex; align-items: center; gap: var(--sf-e2);
    position: sticky; top: 0; z-index: 6;
    padding: var(--sf-e2) var(--sf-gutter); background: var(--sf-paper);
    border-top: var(--sf-linia) solid var(--sf-filet); border-bottom: var(--sf-linia) solid var(--sf-filet);
  }
  #vista-mobil { flex: 1 1 auto; flex-wrap: nowrap; }
  #vista-mobil .sf-segment { flex: 1 1 0; min-height: 44px; font-size: var(--sf-t-cos); }
  .vista-mobil__tornar { flex: none; min-height: 44px; }
  .dividit[data-segment='correu'] .panell { display: none; }
  .dividit[data-segment='comanda'] .correu-zona { display: none; }

  .correu-zona { border-bottom: 0; }
  .correu-cos { display: block; overflow: visible; }
  .adjunt { min-height: 0; }
  .visor { min-height: 0; }
  .full { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .adjunt__eines { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .adjunt__nom { flex-basis: 100%; }
  .adjunt__accions { margin-left: 0; width: 100%; justify-content: space-between; }

  .panell { border-top: 0; }
  /* Al mòbil el nom va a sobre del número, i amb el text llarg del kg hi caben
     quatre línies: la fila no salta en resoldre un dubte. */
  .comptadors .sf-comptador__nom { min-height: calc(4 * 1.35em); }
  .cap { grid-template-columns: minmax(0, 1fr); }
  .cap__fila > * { border-top: 0; padding: 0; }
  .cap__fila > .cap__nota, .detall__camp > .detall__nota { grid-column: 1 / -1; padding: 0 0 var(--sf-e2); }
  .cap__fila--rev > .cap__rev { grid-column: 1 / -1; padding: var(--sf-e2) 0 var(--sf-e3); }
  .cap__fila--amb-nota > .cap__nom, .detall__camp--amb-nota > dt { grid-row: auto; }
  .cap__fila > .cap__nom { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: var(--sf-e2); font-size: var(--sf-t-petit); }
  .cap__fila:first-child > .cap__nom { border-top-color: var(--sf-tinta); }
  .cap__fila--seguida > .cap__nom { display: none; }
  .cap__fila--seguida > .cap__valor { border-top: var(--sf-linia) dashed var(--sf-filet); padding-top: var(--sf-e2); }
  .cap__origen { justify-content: flex-start; padding: 4px 0 var(--sf-e2); }

  /* Les línies, com a targetes */
  .linies thead { display: none; }
  .linies, .linies tbody { display: block; }
  .linies tr.linia {
    display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto;
    grid-template-areas: 'n art art estat' 'n q u kg'; gap: 4px 6px; align-items: baseline;
    padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .linies tbody tr.linia:first-child { border-top: 0; }
  .linies tr.linia > td { display: block; padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; width: auto; }
  .linies tr.linia[aria-selected='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 8px; }
  .linies tr.linia.sf-fila--dubte { background: var(--sf-dubte-fons); }
  .linies tr.linia.sf-fila--dubte[aria-selected='true'] { box-shadow: inset 2px 0 0 var(--sf-terra); }
  .linies .linies__n { grid-area: n; width: auto; }
  .linies .linies__article { grid-area: art; }
  .linies .linies__estat { grid-area: estat; justify-self: end; }
  .linies .linies__q { grid-area: q; text-align: left; font-weight: 600; }
  .linies .linies__u { grid-area: u; }
  .linies .linies__kg { grid-area: kg; justify-self: end; }
  .linies__kg-u { display: inline; color: var(--sf-gris); }
  .linies tr.fila-detall, .linies tr.fila-dubte { display: block; }
  .linies tr.fila-detall > td, .linies tr.fila-dubte > td { display: block; }
  .detall { padding: var(--sf-e3); }
  .detall__camps { grid-template-columns: minmax(0, 1fr); }
  .detall__camp > * { border-top: 0; padding: 0; }
  .detall__camp dt { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: var(--sf-e2); font-size: var(--sf-t-petit); }
  .detall__origen { justify-content: flex-start; padding: 4px 0 var(--sf-e2); }
  .dubte { padding: var(--sf-e3); }
  .opcio { flex-basis: 100%; min-height: 52px; }
  .dubte--resolt { padding-left: 34px; }

  /* El canvi (c07), com a targetes: l'article a dalt i, a sota, abans → després */
  .canvi__taula thead { display: none; }
  .canvi__taula, .canvi__taula tbody { display: block; }
  .canvi__taula tr {
    display: grid; grid-template-columns: 26px auto auto minmax(0, 1fr);
    grid-template-areas: 'n art art art' 'n abans despres estat'; gap: 4px 8px; align-items: baseline;
    padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .canvi__taula tbody tr:first-child { border-top: 0; }
  .canvi__taula tr > td { display: block; padding: 0 !important; border: 0; width: auto; font-size: var(--sf-t-nota); }
  .canvi__taula .linies__n { grid-area: n; }
  .canvi__taula .linies__article { grid-area: art; }
  .canvi__taula .canvi__abans { grid-area: abans; color: var(--sf-gris-fort); }
  .canvi__taula .canvi__despres { grid-area: despres; }
  .canvi__taula .canvi__despres::before { content: '→ '; color: var(--sf-gris); font-weight: 400; }
  .canvi__taula .linies__estat { grid-area: estat; justify-self: end; }

  /* Totes les comandes, com a targetes */
  .totes thead { display: none; }
  .totes, .totes tbody, .totes tfoot { display: block; }
  .totes tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'client client client' 'ref ref ref' 'entrega entrega entrega' 'estat linies kg';
    gap: 3px var(--sf-e3); align-items: baseline;
    padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .totes tbody tr:first-child { border-top: 0; }
  .totes tr > td { display: block; padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; width: auto; }
  .totes tbody tr[aria-selected='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 10px; padding-right: 8px; }
  .totes .totes__client { grid-area: client; }
  .totes .totes__ref { grid-area: ref; }
  .totes .totes__entrega { grid-area: entrega; white-space: normal; }
  .totes .totes__linies { grid-area: linies; text-align: right; font-size: var(--sf-t-nota); }
  .totes .totes__kg { grid-area: kg; text-align: right; font-size: var(--sf-t-nota); }
  .totes .totes__estat { grid-area: estat; width: auto; white-space: normal; }
  .totes .totes__ref::before, .totes .totes__entrega::before { content: attr(data-nom) ' '; color: var(--sf-gris); font-family: var(--sf-sans); font-size: var(--sf-t-petit); }
  .totes .totes__dia, .totes .totes__sub { display: inline; }
  .totes .totes__sub::before { content: ' · '; }
  .totes tbody .totes__buit { display: none; }
  .totes tfoot tr { grid-template-areas: 'client client client' 'estat linies kg'; border-top: var(--sf-linia) solid var(--sf-tinta); }
  .totes tfoot .totes__total { grid-area: client; }
  .totes tfoot td { font-weight: 600; }
  .totes__u { display: inline; font-weight: 400; color: var(--sf-gris); }

  .rev__parell { grid-template-columns: minmax(0, 1fr); }
  .erp__camps { grid-template-columns: max-content minmax(0, 1fr); }
  .peu-panell .sf-botonera { width: 100%; }
  .peu-panell .sf-boto { flex: 1 1 auto; }
}

/* Al mòbil, les línies del diàleg «Així entraria a l'ERP» com a targetes:
   article i kg; la descripció; quantitat i unitat; la data i l'origen. */
@media (max-width: 760px) {
  .erp__taula thead { display: none; }
  .erp__taula, .erp__taula tbody { display: block; }
  .erp__taula tr {
    display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto;
    grid-template-areas: 'n art art kg' 'n desc desc desc' 'n q u u' 'n data data data' 'n origen origen origen';
    gap: 2px 6px; align-items: baseline; padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .erp__taula tbody tr:first-child { border-top: 0; }
  .erp__taula tr > td { display: block; padding: 0 !important; border: 0; text-align: left; }
  .erp__taula .erp__n { grid-area: n; color: var(--sf-gris); }
  .erp__taula .erp__art { grid-area: art; font-family: var(--sf-mono); font-size: var(--sf-t-petit); }
  .erp__taula .erp__kg { grid-area: kg; justify-self: end; }
  .erp__taula .erp__kg::after { content: ' kg'; color: var(--sf-gris); }
  .erp__taula .erp__desc { grid-area: desc; color: var(--sf-gris-fort); }
  .erp__taula .erp__q { grid-area: q; font-weight: 600; }
  .erp__taula .erp__u { grid-area: u; }
  .erp__taula .erp__data { grid-area: data; }
  .erp__taula .erp__origen { grid-area: origen; }
  .erp__taula .erp__data::before, .erp__taula .erp__origen::before { content: attr(data-nom) ' '; font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); }
}

/* Al mòbil estret, la segona pestanya diu «Totes» perquè les tres hi càpiguen
   senceres; el nom llarg queda per als lectors de pantalla. */
.pestanya__curt { display: none; }
@media (max-width: 480px) {
  .pestanya__curt { display: inline; }
  .pestanya__llarg { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ═══ Impressió: la comanda, sense la safata ═══════════════════════════ */
@media print {
  .safata, .vista-mobil, .adjunt, .sf-pestanyes, .peu-panell, .veure, .veure-grup { display: none !important; }
  .dividit { display: block; }
  .correu-cos { overflow: visible; }
  .dividit[data-segment] .panell, .dividit[data-segment] .correu-zona { display: block !important; }
}