/* Equip comercial amb IA · l'estil de l'app, a sobre de comu.css.
 *
 * Quatre vistes. La feina té tres columnes a l'ordinador: la safata de
 * l'equip, la petició (correu o WhatsApp, sempre amb l'estètica de SANFELIU,
 * mai la de Gmail ni la de WhatsApp) i l'esborrany del pressupost. El terra
 * només marca la petició oberta, la línia triada, el lloc de «Veure a la
 * petició» i les peces del pas triat al diagrama.
 */

/* ═══ L'app i les vistes ════════════════════════════════════════════════ */
.app { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 0; }
.vistes-barra { display: flex; align-items: center; gap: var(--sf-e4); border-bottom: var(--sf-linia) solid var(--sf-filet); min-width: 0; padding-right: var(--sf-gutter); }
.vistes-barra .sf-pestanyes { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
/* «Prova això» va dins de la barra de les vistes (a partir de 1181 px i 800 px d'alt); si no, a baix. La simulació ja
   la diuen l'etiqueta de la barra i el peu: aquí no es repeteix. */
.vistes__guia { flex: 0 1 auto; min-width: 0; }
.vistes__guia:empty { display: none; }
.vistes__guia .sf-guia--en-lloc { padding: 6px 0; gap: 4px var(--sf-e4); }
.vistes__guia .sf-guia__text { max-width: 46ch; }
.vista-mobil { display: none; }
/* Al mòbil, la barra amaga l'etiqueta «Simulació amb dades d'exemple» (comu.css): la posem sota el títol. */
.sim-mobil { display: none; }
@media (max-width: 900px) {
  .sim-mobil { display: block; padding: var(--sf-e2) var(--sf-gutter) 0; }
}

/* ═══ La feina: safata · petició · esborrany ════════════════════════════ */
.treball { display: grid; min-height: 0; min-width: 0; }
.safata { grid-area: safata; }
.peticio-zona { grid-area: peticio; grid-template-columns: minmax(0, 1fr); }
.panell { grid-area: panell; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
@media (min-width: 1181px) {
  .treball { grid-template-columns: 264px minmax(0, 1fr) minmax(min(560px, 100%), 46%); grid-template-areas: 'safata peticio panell'; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .treball { grid-template-columns: minmax(0, 1fr) minmax(min(500px, 100%), 52%); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'safata panell' 'peticio 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 { 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__sub { font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.4; margin-top: 2px; }
.safata__filtre { margin-top: var(--sf-e3); gap: 4px; }
.safata__filtre .sf-segment { min-height: 30px; padding: 0 8px; font-size: var(--sf-t-petit); }
.safata__llista { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.safata__buida { padding: var(--sf-e4) var(--sf-e5); }

.pet {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1px var(--sf-e2);
  width: 100%; padding: 10px var(--sf-e5) 11px;
  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);
}
.pet__hora { font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.pet__canal { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet__client { grid-column: 1 / -1; font-size: var(--sf-t-nota); font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet__resum { grid-column: 1 / -1; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet__estat { grid-column: 1 / -1; font-size: var(--sf-t-petit); color: var(--sf-gris); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet__estat--dubtes { color: var(--sf-dubte-text); font-weight: 600; }
.pet__estat--llest, .pet__estat--fet { color: var(--sf-llegit); font-weight: 600; }
.pet__estat--persona { color: var(--sf-gris-fort); font-weight: 600; }
.pet[aria-current='true'] { background: var(--sf-paper-2); box-shadow: inset 2px 0 0 var(--sf-terra); }
.pet:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .pet:not([aria-current='true']):hover { background: #fafaf8; } }

/* ── La petició ─────────────────────────────────────────────────────── */
.pet-cap { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); min-width: 0; }
.pet-cap .pet__canal { font-size: var(--sf-t-nota); color: var(--sf-gris); white-space: normal; }
.pet__titol { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; margin-top: 2px; }
.pet__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; }
.pet__meta > div { display: contents; }
.pet__meta dt { color: var(--sf-gris); }
.pet__meta dd { min-width: 0; overflow-wrap: anywhere; }
.pet__adreca { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; }
/* Res de text per sota de 13 px: el .sf-mono de comu.css fa 0,9em. */
.sf-mono { font-size: var(--sf-t-petit); }
.pet-cos { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.pet-text { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e5); font-size: var(--sf-t-cos); line-height: 1.55; max-width: 76ch; }
.pet-text > * + * { margin-top: 10px; }
.pet__p { white-space: pre-line; }
.pet__llista { padding-left: 1.3em; }
.pet__llista li + li { margin-top: 2px; }
.pet__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); white-space: pre-line; width: max-content; max-width: 100%; }
.pet__ajuntats { margin: var(--sf-e4) var(--sf-gutter) 0; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
/* Els WhatsApp: una llista sòbria amb l'hora, no una bombolla. */
.wa { list-style: none; padding: var(--sf-e4) var(--sf-gutter) var(--sf-e5); max-width: 76ch; }
.wa__msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sf-e3); padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.wa__msg:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.wa__hora { font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; padding-top: 2px; }
.wa__text { font-size: var(--sf-t-cos); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
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; }

/* L'adjunt: el full de càlcul i la vista del PDF, pintats des de les dades. */
.adjunt { border-top: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e3) var(--sf-gutter) var(--sf-e5); background: var(--sf-paper-2); }
.adjunt__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); margin-bottom: var(--sf-e2); overflow-wrap: anywhere; }
.adjunt__nom b { font-weight: 600; color: var(--sf-tinta); font-family: var(--sf-mono); font-size: var(--sf-t-petit); }
.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; font-size: var(--sf-t-petit); line-height: 1.3; }
.full__taula th, .full__taula td { height: 28px; padding: 3px 8px; border: var(--sf-linia) solid var(--sf-filet); white-space: nowrap; }
.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; min-width: 32px; }
.full__cantonada { z-index: 4 !important; }
.full__cel--num { text-align: right; font-variant-numeric: tabular-nums; }
.full__cel--negreta { font-weight: 600; }
.full__fila--marcada td { background: var(--sf-terra-tint); }
.full__fila--marcada th { box-shadow: inset 2px 0 0 var(--sf-terra); }
.full__pestanya { display: inline-block; margin-top: -1px; padding: 4px 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); font-weight: 600; }
.pdf { overflow-x: auto; }
.pdf__pagina { background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-filet-fort); padding: var(--sf-e5) var(--sf-e5) var(--sf-e6); min-width: 420px; max-width: 640px; font-size: var(--sf-t-nota); }
.pdf__cap { font-weight: 600; font-size: var(--sf-t-cos); }
.pdf__linia { color: var(--sf-gris-fort); font-size: var(--sf-t-petit); }
.pdf__taula { width: 100%; border-collapse: collapse; margin: var(--sf-e3) 0; font-size: var(--sf-t-petit); }
.pdf__taula th { text-align: left; font-weight: 600; border-bottom: var(--sf-linia) solid var(--sf-tinta); padding: 4px 6px 4px 0; }
.pdf__taula td { border-bottom: var(--sf-linia) solid var(--sf-filet); padding: 4px 6px 4px 0; }
.pdf__fila--marcada td { background: var(--sf-terra-tint); }
.pdf__fila--marcada td:first-child { box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 6px; }
.pdf__peu { font-size: var(--sf-t-petit); color: var(--sf-gris); }

/* ═══ L'esborrany ═══════════════════════════════════════════════════════ */
.comptadors { padding-bottom: var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.comptadors .sf-xifra { font-size: 32px; }
.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; }
.esborrany { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e8); }
.esb > * + * { margin-top: var(--sf-e6); }
.esb > .cap { margin-top: 0; }
.seccio__titol { font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.005em; margin-bottom: var(--sf-e2); }
.seccio__compte { font-weight: 400; color: var(--sf-gris); }

/* La capçalera: una llista reglada de tres columnes. */
.cap__titol { display: flex; align-items: baseline; 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__data { font-size: var(--sf-t-nota); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.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: 7px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.cap__fila:first-child > * { border-top-color: var(--sf-tinta); }
.cap__fila > .cap__nota, .cap__fila > .cap__rev { grid-column: 2 / -1; border-top: 0; padding: 0 0 8px; }
.cap__fila--amb-nota > .cap__nom { grid-row: span 2; }
.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: flex-start; justify-content: flex-end; gap: 4px var(--sf-e3); 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__per-triar { color: var(--sf-dubte-text); font-weight: 600; font-size: var(--sf-t-nota); }
.cap__gris { color: var(--sf-gris); font-size: var(--sf-t-nota); }
.cap__font { font-size: var(--sf-t-petit); color: var(--sf-gris); white-space: nowrap; }
.cap__rev .rev-marca { margin-top: 0; }
.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); }
.etiq-triat { color: var(--sf-tinta); }
.etiq-triat::before { border-radius: 0; transform: rotate(45deg) scale(.8); background: none; border: 1.5px solid currentColor; }
.etiq-error { color: var(--sf-error); }
.etiq-error::before { border-radius: 0; background: none; border: 1.5px solid currentColor; transform: rotate(45deg) scale(.8); }
.avisos { display: grid; gap: var(--sf-e2); }
.avis-reclamacio p + p { margin-top: 6px; }
.veure { font-size: var(--sf-t-petit); white-space: nowrap; }

/* Els dubtes */
.dubtes > .dubte + .dubte { margin-top: var(--sf-e3); }
.dubte { padding: var(--sf-e3) var(--sf-e4) var(--sf-e4); border: var(--sf-linia) solid var(--sf-dubte-filet); border-left: 2px solid var(--sf-dubte); background: var(--sf-dubte-fons); }
.dubte__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sf-e3); margin-bottom: 6px; font-size: var(--sf-t-petit); color: var(--sf-dubte-text); }
.dubte__linia { font-weight: 600; }
.dubte__qui { color: var(--sf-gris-fort); }
.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__proposta { margin-top: 6px; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
.dubte__nota { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); flex: 1 1 16rem; }
.dubte__opcions { display: flex; flex-wrap: wrap; gap: var(--sf-e2); margin-top: var(--sf-e3); }
.dubte__opcions--persona { align-items: center; gap: var(--sf-e2) var(--sf-e4); }
.dubte__veure { margin-top: var(--sf-e2); }
/* El descompte que decideix una persona (dubtes de preu) */
.acord { align-items: flex-end; }
.acord__camp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sf-e2); }
.acord__nom { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
.acord__pc { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.acord__nota { flex-basis: 100%; }
.etiq-persona { color: var(--sf-gris-fort); }
.etiq-persona::before { border-radius: 0; background: none; border: 1.5px solid currentColor; }
.opcio {
  flex: 1 1 210px; display: grid; gap: 2px; justify-items: start; align-content: center;
  /* .sf-boto centra el contingut: aquí, la columna fa tot l'ample i el text va a l'esquerra. */
  justify-content: stretch; grid-template-columns: minmax(0, 1fr);
  min-height: 52px; padding: 8px 12px; text-align: left; white-space: normal;
  border-color: var(--sf-gris-suau); background: var(--sf-paper); color: var(--sf-tinta); font-size: var(--sf-t-nota);
}
.opcio__text { font-weight: 600; line-height: 1.3; }
.opcio__peu { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); font-weight: 400; font-variant-numeric: tabular-nums; }
.opcio[aria-pressed='true'] { border-color: var(--sf-tinta); box-shadow: inset 0 0 0 1px var(--sf-tinta); }
/* Un sol control de tinta plena per pantalla: el filtre de la safata i el nivell del diagrama, amb contorn. */
:is(#filtre, #munt-nivell) .sf-segment[aria-pressed='true'] { background: var(--sf-paper); color: var(--sf-tinta); border-color: var(--sf-tinta); box-shadow: inset 0 0 0 1px var(--sf-tinta); }
.dubte--resolt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sf-e3); 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); background: none; }
.dubte--resolt + .dubte--resolt { margin-top: 0 !important; border-top: 0; }
.dubte__frase { flex: 1 1 18rem; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.45; }
.dubte__triada { font-weight: 600; color: var(--sf-tinta); }
.dubte__pregunta-curta { display: block; font-size: var(--sf-t-petit); color: var(--sf-gris); margin-top: 2px; }
.dubte__canviar { font-size: var(--sf-t-nota); }
.dubte--resolt .rev-marca { flex-basis: 100%; }

/* Les línies */
.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__hi { display: block; margin-top: 2px; font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.35; }
.linies__u { display: none; white-space: nowrap; color: var(--sf-gris); font-size: var(--sf-t-petit); }
.linies__rev { display: block; margin-top: 4px; }
.linies .linies__estat { width: 1%; white-space: nowrap; }
.linies td { vertical-align: top; }
.linies th .sf-etiq, .serveis th .sf-etiq { margin-left: 4px; }
.linies tbody tr.linia:focus-visible { outline-offset: -2px; }
.linia--treta td { color: var(--sf-gris); }
.linia--treta .linies__nom, .linia--treta .linies__hi { text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
.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__camps { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; }
.detall__camp { display: contents; }
.detall__camp > * { padding: 7px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.detall__camp:first-child > * { border-top: 0; }
.detall__camp dt { font-size: var(--sf-t-petit); color: var(--sf-gris); padding-right: var(--sf-e3); }
.detall__valor { font-size: var(--sf-t-nota); min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.detall__valor a { white-space: nowrap; }
.detall__origen { display: flex; align-items: flex-start; justify-content: flex-end; padding-left: var(--sf-e3); }
.detall__calcul { display: block; margin-top: 2px; color: var(--sf-gris-fort); font-size: var(--sf-t-petit); }
.detall__regla { font-size: var(--sf-t-nota); text-align: left; white-space: normal; }

/* Serveis i totals */
.serveis td { vertical-align: top; }
.serveis tfoot td { font-weight: 400; color: var(--sf-gris-fort); border-top: var(--sf-linia) solid var(--sf-filet); padding-top: 6px; padding-bottom: 6px; }
.serveis tfoot tr.tot__material td { border-top: var(--sf-linia) solid var(--sf-tinta); }
.serveis tfoot tr.tot__base td { color: var(--sf-tinta); font-weight: 600; }
.serveis tfoot tr.tot__total td { color: var(--sf-tinta); font-weight: 600; font-size: var(--sf-t-h3); border-top: var(--sf-linia) solid var(--sf-tinta); }
.tot__nota { margin-top: var(--sf-e2); }

/* La resposta */
.resp__llegenda { margin-bottom: var(--sf-e3); }
.resp__doc { border: var(--sf-linia) solid var(--sf-filet-fort); padding: var(--sf-e4) var(--sf-e5); font-size: var(--sf-t-cos); line-height: 1.55; }
.resp__assumpte { padding-bottom: var(--sf-e3); margin-bottom: var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-nota); }
.resp__clau { color: var(--sf-gris); }
.resp__nota-assumpte { display: block; margin-top: 4px; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.resp__buit { height: .7em; }
.resp__linia { overflow-wrap: anywhere; }
.resp__linia .sf-etiq { vertical-align: 1px; }
.resp__linia--ratllada { color: var(--sf-gris); text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
/* El que hi posa el pont: un fons suau, mai un subratllat (semblaria un enllaç). */
.omplert { background: var(--sf-paper-2); padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.resp__peces, .linies__peces { display: block; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); line-height: 1.4; }
.resp__peces { display: inline; }
.resp__taula { margin: 6px 0; overflow-x: auto; text-decoration: none; }
.resp__taula table { border-collapse: collapse; font-size: var(--sf-t-nota); }
.resp__taula td { padding: 2px 12px 2px 0; border-bottom: var(--sf-linia) dotted var(--sf-calculat); white-space: nowrap; }
.resp__taula td.n { text-align: right; }
.resp__ratllat { margin-top: var(--sf-e2); }

/* El peu del panell */
.sortida-nota { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); min-width: 0; flex: 1 1 14rem; }
.sortida-nota--dubte { color: var(--sf-dubte-text); font-weight: 600; }
.sortida-nota:focus { outline: none; }
.sortida-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); }

/* La revisió, al costat de la dada */
/* Un error es distingeix per la forma (filet complet, sense barra): la barra esquerra de terra és només per a la selecció. */
.rev-marca { margin-top: var(--sf-e3); padding: 10px 12px 12px; background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-error); }
.rev-marca--demes { border-color: var(--sf-filet-fort); padding: 8px 12px; }
.rev-marca__hauria { margin-top: 4px; font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-tinta); }
.rev-marca__perque { margin-top: 2px; font-size: var(--sf-t-petit); line-height: 1.45; color: var(--sf-gris-fort); }

/* ── Els diàlegs de les sortides ───────────────────────────────────── */
.dlg-sortida { width: min(760px, 100%); }
.dlg-sortida .sf-dialeg__peu { justify-content: flex-end; }
.dlg__peu-nota { margin-right: auto; flex: 1 1 18rem; }
.missatge { border: var(--sf-linia) solid var(--sf-filet-fort); }
.missatge__cap { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--sf-e4); padding: var(--sf-e3) var(--sf-e4); border-bottom: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-nota); }
.missatge__cap > div { display: contents; }
.missatge__cap dt { color: var(--sf-gris); }
.missatge__cap dd { min-width: 0; overflow-wrap: anywhere; }
.missatge__cos { margin: 0; padding: var(--sf-e4); font-family: var(--sf-sans); font-size: var(--sf-t-cos); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg__tec { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); overflow-wrap: anywhere; }
.csv__previ { margin: 0; padding: var(--sf-e3); background: var(--sf-paper-2); font-family: var(--sf-mono); font-size: var(--sf-t-petit); line-height: 1.5; overflow-x: auto; white-space: pre; }

/* ═══ Com està muntat ═══════════════════════════════════════════════════ */
.munt { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.munt__cap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sf-e3) var(--sf-e6); padding: var(--sf-e4) var(--sf-gutter) var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.munt__intro { flex: 1 1 32rem; min-width: 0; }
.munt__intro .sf-text { margin-top: 4px; }
.munt__controls { display: flex; flex-wrap: wrap; gap: var(--sf-e2) var(--sf-e3); align-items: center; }
.munt__peticio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sf-e3); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.munt__tria-pas { margin-bottom: var(--sf-e3); }
.munt__tarifa { margin-bottom: var(--sf-e3); max-width: 60ch; }
.munt__provar { margin-top: var(--sf-e6); padding-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-tinta); }
.munt__provar-llista { padding-left: 1.2em; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.5; margin-bottom: var(--sf-e4); }
.munt__provar-llista li + li { margin-top: 6px; }
/* Com es reparteix: a partir de 1600 px, el diagrama horitzontal i la traça al costat; de 901 a 1599, el diagrama
   vertical a 1:1 (la columna fa scroll i se centra en les peces del pas) i la traça al costat. Tot el text, ≥ 13 px. */
.munt__cos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.munt__diagrama { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sf-e3); min-height: 0; min-width: 0; padding: var(--sf-e4) var(--sf-gutter); border-right: var(--sf-linia) solid var(--sf-filet); }
.munt__svg { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.munt__svg svg { width: 100%; height: 100%; max-height: 100%; }
@media (min-width: 901px) and (max-width: 1599px) {
  .munt__cos { grid-template-columns: auto minmax(0, 1fr); }
  .munt__diagrama { overflow-y: auto; overscroll-behavior: contain; display: block; }
  .munt__svg { display: block; }
  .munt__svg svg { width: 356px; height: auto; max-height: none; }
  .munt__diagrama { padding-bottom: 0; }
  .munt__llegenda { position: sticky; bottom: 0; margin-top: var(--sf-e3); max-width: 356px; padding: var(--sf-e2) 0 var(--sf-e3); background: var(--sf-paper); border-top: var(--sf-linia) solid var(--sf-filet); }
  .munt__traca { max-width: 900px; }
}
.munt__llegenda { font-size: var(--sf-t-petit); }
.munt__lleg-tria { color: var(--sf-terra); }
.munt__lleg-fora { color: var(--sf-gris-fort); background: var(--sf-paper-2); }
.munt__traca { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: var(--sf-e4) var(--sf-gutter) var(--sf-e8); }

/* El diagrama: els colors de la marca, sense l'estil d'archify. */
.munt__svg svg { font-family: var(--sf-sans); }
.munt__svg .c-mask { fill: var(--sf-paper); stroke: none; }
.munt__svg :is(.c-frontend, .c-backend, .c-database, .c-cloud) { fill: var(--sf-paper); stroke: var(--sf-tinta); }
.munt__svg .c-external { fill: var(--sf-paper-2); stroke: var(--sf-gris); }
.munt__svg .c-region { fill: none; stroke: var(--sf-filet-fort); }
.munt__svg [data-node-id] rect:not(.c-mask) { stroke-width: 1px; transition: stroke var(--sf-transicio); }
.munt__svg .t-primary { fill: var(--sf-tinta); }
.munt__svg .t-muted { fill: var(--sf-gris); }
.munt__svg :is(.t-backend, .t-cloud, .t-messagebus, .t-frontend, .t-database, .t-external, .t-security) { fill: var(--sf-gris-fort); }
.munt__svg [data-graph-role='structural-frame-label'] text { fill: var(--sf-gris-fort); }
.munt__svg .a-default { stroke: var(--sf-gris-suau); fill: none; }
.munt__svg .a-emphasis { stroke: var(--sf-tinta); fill: none; }
.munt__svg :is(.a-dashed, .a-security) { stroke: var(--sf-gris); fill: none; stroke-dasharray: 4 3; }
.munt__svg .m-default { fill: var(--sf-gris-suau); }
.munt__svg .m-emphasis { fill: var(--sf-tinta); }
.munt__svg :is(.m-dashed, .m-security) { fill: var(--sf-gris); }
.munt__svg path[class^='a-'] { stroke-width: 1.2px; }
.munt__svg svg :is(g[data-node-id], [data-edge-from]) { transition: opacity var(--sf-transicio); }
.munt__svg svg.amb-tria g[data-node-id]:not(.on) { opacity: .5; }
.munt__svg svg.amb-tria [data-edge-from]:not(.on) { opacity: .4; }
.munt__svg g[data-node-id].on rect:not(.c-mask) { stroke: var(--sf-terra); stroke-width: 2px; }
.munt__svg path.on { stroke: var(--sf-tinta); stroke-width: 1.8px; }

/* La traça */
.traca { list-style: none; padding: 0; }
.traca__item { border-top: var(--sf-linia) solid var(--sf-filet); }
.traca__item:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.traca__pas {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--sf-e2); align-items: baseline;
  width: 100%; padding: 10px 8px 10px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--sf-tinta);
}
.traca__n { font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-gris); font-variant-numeric: tabular-nums; padding-left: 8px; }
.traca__titol { font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.35; }
.traca__qui { grid-column: 2; font-size: var(--sf-t-petit); color: var(--sf-gris); margin-top: 2px; }
.traca__item--actiu .traca__pas { background: var(--sf-paper-2); box-shadow: inset 2px 0 0 var(--sf-terra); }
.traca__item--actiu .traca__n { color: var(--sf-tinta); }
.traca__pas:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .traca__item:not(.traca__item--actiu) .traca__pas:hover { background: #fafaf8; } }
.traca__detall { padding: var(--sf-e2) 0 var(--sf-e4) 34px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.5; }
.traca__detall > * + * { margin-top: var(--sf-e2); }
.traca__codi { margin: 0; padding: var(--sf-e2) var(--sf-e3); background: var(--sf-paper-2); font-family: var(--sf-mono); font-size: var(--sf-t-petit); line-height: 1.5; color: var(--sf-tinta); overflow-x: auto; white-space: pre; }
.traca__llista { list-style: none; padding: 0; }
.traca__llista li + li { margin-top: 4px; }
.traca__estat { color: var(--sf-gris); }
.traca__fi { color: var(--sf-tinta); font-weight: 600; }
.n1 { padding-left: 1.4em; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); line-height: 1.5; margin-bottom: var(--sf-e4); }
.n1 li + li { margin-top: 6px; }

/* ═══ La skill ══════════════════════════════════════════════════════════ */
.skill { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.skill__cap { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e3); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.skill__cap .sf-text { margin-top: 4px; max-width: 90ch; }
.skill__cos { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }
.skill__fitxers { border-right: var(--sf-linia) solid var(--sf-filet); overflow-y: auto; padding: var(--sf-e4) 0; }
.skill__carpeta { padding: 0 var(--sf-e5) var(--sf-e2); font-size: var(--sf-t-petit); color: var(--sf-gris); }
.skill__fitxers ul { list-style: none; }
.skill__fitxer-boto {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sf-e2);
  width: 100%; min-height: 40px; padding: 8px var(--sf-e5) 8px calc(var(--sf-e5) + 12px);
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--sf-tinta); font-size: var(--sf-t-nota);
}
.skill__fitxer-boto { flex-wrap: wrap; }
.skill__fitxer-boto .sf-mono { font-size: var(--sf-t-petit); overflow-wrap: normal; white-space: nowrap; }
.skill__fitxer-boto[aria-current='true'] { background: var(--sf-paper-2); box-shadow: inset 2px 0 0 var(--sf-terra); }
.skill__fitxer-boto:focus-visible { outline-offset: -2px; }
.skill__mida { font-size: var(--sf-t-petit); color: var(--sf-gris); white-space: nowrap; }
.skill__doc { overflow-y: auto; overscroll-behavior: contain; min-height: 0; min-width: 0; }
.skill__doc-cap { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sf-e2) var(--sf-e4); padding: var(--sf-e3) var(--sf-gutter); background: var(--sf-paper); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.skill__cami { font-size: var(--sf-t-nota); font-weight: 500; overflow-wrap: anywhere; }
.skill__contingut { padding: var(--sf-e5) var(--sf-gutter) var(--sf-e10); }
.skill__python { max-width: none; }

/* Markdown */
.md { max-width: 78ch; font-size: var(--sf-t-cos); line-height: 1.6; color: var(--sf-tinta); }
.md > * + * { margin-top: var(--sf-e3); }
.md :is(h2, h3, h4, h5) { letter-spacing: -.015em; line-height: 1.3; scroll-margin-top: 64px; }
.md .md-h2 { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; }
.md .md-h3 { font-size: var(--sf-t-h3); font-weight: 600; margin-top: var(--sf-e8); padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-tinta); }
.md .md-h4 { font-size: var(--sf-t-cos); font-weight: 600; margin-top: var(--sf-e5); }
.md .md-h5 { font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-gris-fort); }
.md .md-ancora { background: var(--sf-terra-tint); box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 8px; }
.md :is(h2, h3, h4, h5):focus { outline: none; }
.md code { font-family: var(--sf-mono); font-size: var(--sf-t-petit); background: var(--sf-paper-2); padding: 1px 4px; overflow-wrap: anywhere; }
.md strong { font-weight: 600; }
.md-llista { padding-left: 1.4em; }
.md-llista li + li { margin-top: 4px; }
.md-cita { margin: var(--sf-e3) 0 0; padding: 2px 0 2px var(--sf-e4); border-left: 2px solid var(--sf-filet-fort); color: var(--sf-gris-fort); }
.md-codi { margin: var(--sf-e3) 0 0; padding: var(--sf-e3) var(--sf-e4); background: var(--sf-paper-2); font-family: var(--sf-mono); font-size: var(--sf-t-petit); line-height: 1.55; overflow-x: auto; white-space: pre; }
.md-codi code { background: none; padding: 0; font-size: inherit; }
.md-taula .sf-taula { font-size: var(--sf-t-nota); }
.md-taula td { vertical-align: top; }
.md-front { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--sf-e4); padding: var(--sf-e3) var(--sf-e4); background: var(--sf-paper-2); font-size: var(--sf-t-nota); }
.md-front > div { display: contents; }
.md-front dt { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); }
.csv__eines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e2) var(--sf-e4); margin-bottom: var(--sf-e3); }
.csv__cerca { flex: 0 1 320px; min-width: 0; }
.csv__taula { font-size: var(--sf-t-nota); }
.csv__taula td { white-space: nowrap; }
.csv__taula th { top: 0; }

/* ═══ El que encerta i el que no ════════════════════════════════════════ */
.rev { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rev__pagina { max-width: 960px; margin: 0 auto; padding: var(--sf-e6) var(--sf-gutter) var(--sf-e12); }
.rev__pagina > * + * { margin-top: var(--sf-e5); }
.rev__pagina .sf-avis p + p { margin-top: 6px; }
.rev__xifres { padding: 0; }
.rev__seccio { padding-top: var(--sf-e3); }
.rev__seccio .sf-h3 { margin-bottom: var(--sf-e3); }
.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-fort); }
.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__gravetat { font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
.rev__pocs { margin-top: var(--sf-e3); }
.rev__text { font-size: var(--sf-t-cos); margin-top: 2px; }
.rev__calia { padding-left: 1.3em; margin-top: 4px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.rev__no { padding-left: 1.3em; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); line-height: 1.55; max-width: 72ch; }
.rev__no li + li { margin-top: 6px; }

/* ═══ Pantalles baixes (portàtils de 768 a 860 px d'alt) ════════════════ */
@media (min-width: 901px) and (max-height: 860px) {
  .pet-cap { padding-top: var(--sf-e3); padding-bottom: 10px; }
  .pet__titol { font-size: var(--sf-t-h3); letter-spacing: -.015em; }
  .comptadors { padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .comptadors .sf-xifra { font-size: 28px; }
  .esborrany { padding-top: var(--sf-e3); }
}

/* ═══ Pantalles molt baixes (portàtils de 657 a 760 px d'alt) ═══════════ */
@media (min-width: 901px) and (max-height: 760px) {
  .comptadors { padding-top: 6px; padding-bottom: 6px; }
  .comptadors .sf-xifra { font-size: 26px; }
  .comptadors .sf-comptador__nom { min-height: 0; }
  .pet-cap { padding-top: var(--sf-e2); padding-bottom: 6px; }
  .peu-panell { padding-top: 8px; padding-bottom: 8px; }
}

/* ═══ Entre 901 i 1180 px: la safata, una franja ════════════════════════ */
@media (min-width: 901px) and (max-width: 1180px) {
  .safata { display: block; 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__filtre { margin-top: 0; margin-left: auto; }
  .safata__llista { display: flex; gap: var(--sf-e2); overflow-x: auto; overflow-y: hidden; padding: 4px var(--sf-gutter) 12px; }
  .pet { flex: 0 0 196px; border: var(--sf-linia) solid var(--sf-filet); padding: 8px 12px 9px; }
  .pet__resum { display: none; }
}

/* ═══ Mòbil (fins a 900 px) ═════════════════════════════════════════════ */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; scroll-padding-bottom: calc(var(--sf-guia-alt, 0px) + 12px); }
  .app { display: block; }
  .vistes-barra { display: none; }
  .vista-mobil {
    display: block; position: sticky; top: 0; z-index: 6;
    padding: var(--sf-e2) var(--sf-gutter); background: var(--sf-paper);
    border-bottom: var(--sf-linia) solid var(--sf-filet);
    overflow-x: auto; scrollbar-width: none;
  }
  .vista-mobil::-webkit-scrollbar { display: none; }
  #vista-mobil { display: flex; flex-wrap: nowrap; gap: 4px; min-width: max-content; width: 100%; }
  #vista-mobil .sf-segment { flex: 1 0 auto; min-height: 44px; padding: 0 7px; font-size: var(--sf-t-petit); }
  .treball { display: block; }
  .treball[data-mobil='peticio'] .panell { display: none; }
  .treball[data-mobil='esborrany'] .peticio-zona { display: none; }
  .safata { display: block; border-right: 0; }
  .safata__cap { padding: var(--sf-e3) var(--sf-gutter) 6px; border-bottom: 0; }
  .safata__filtre { margin-top: var(--sf-e2); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .safata__filtre::-webkit-scrollbar { display: none; }
  .safata__filtre .sf-segment { min-height: 44px; padding: 0 10px; }
  .safata__llista { display: flex; gap: var(--sf-e2); overflow-x: auto; overflow-y: hidden; padding: 4px var(--sf-gutter) var(--sf-e3); scrollbar-width: none; }
  .safata__llista::-webkit-scrollbar { display: none; }
  .pet { flex: 0 0 210px; border: var(--sf-linia) solid var(--sf-filet); padding: 10px 12px 11px; }
  .peticio-zona { border-top: var(--sf-linia) solid var(--sf-filet); }
  .pet-cos { overflow: visible; }
  .panell { border-top: var(--sf-linia) solid var(--sf-filet); grid-template-rows: auto; }
  .esborrany { padding-bottom: var(--sf-e5); }
  .peu-panell .sf-botonera { margin-left: 0; width: 100%; }
  .peu-panell .sf-botonera .sf-boto { flex: 1 1 auto; }
  .peu-panell .sf-botonera .sf-boto--principal { flex-basis: 100%; order: -1; }

  .munt, .skill { display: block; }
  .munt__cap { padding-top: var(--sf-e4); }
  .munt__controls { width: 100%; }
  #munt-nivell { width: 100%; flex-wrap: nowrap; }
  #munt-nivell .sf-segment { flex: 1 1 0; min-height: 44px; padding: 0 8px; white-space: normal; line-height: 1.2; }
  .munt__peticio { width: 100%; }
  .munt__peticio .sf-boto { min-height: 44px; }
  .munt__cos { display: block; }
  .munt__diagrama { position: sticky; top: 61px; z-index: 4; background: var(--sf-paper); border-right: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e2) var(--sf-gutter); display: block; }
  .munt__svg { display: block; height: 40vh; height: 40dvh; overflow: auto; overscroll-behavior: contain; border: var(--sf-linia) solid var(--sf-filet); }
  .munt__svg { overflow-x: hidden; }
  .munt__svg[data-mode='v'] svg { width: 100%; max-width: 380px; height: auto; max-height: none; margin: 0 auto; }
  .munt__llegenda { margin-top: var(--sf-e2); }
  .munt__traca { overflow: visible; padding-bottom: var(--sf-e6); }
  .traca__pas { min-height: 44px; }
  .traca__detall { padding-left: 0; }
  /* El que es porta a la vista no queda sota el diagrama, que s'enganxa a dalt. */
  html:has(#app[data-vista='muntatge']) { scroll-padding-top: calc(40vh + 120px); scroll-padding-top: calc(40dvh + 120px); }

  .skill__cos { display: block; }
  .skill__fitxers { border-right: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e2) 0; overflow: visible; }
  .skill__carpeta { padding-left: var(--sf-gutter); }
  .skill__fitxers ul { display: flex; gap: var(--sf-e2); overflow-x: auto; padding: 0 var(--sf-gutter) 4px; scrollbar-width: none; }
  .skill__fitxers ul::-webkit-scrollbar { display: none; }
  .skill__fitxer-boto { min-height: 44px; padding: 6px 12px; border: var(--sf-linia) solid var(--sf-filet); white-space: nowrap; }
  .skill__fitxer-boto .sf-mono { overflow-wrap: normal; }
  .skill__doc { overflow: visible; }
  .skill__doc-cap { position: static; }
  .skill__doc-cap .sf-boto { min-height: 44px; }
  .skill__contingut { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .md .md-h2 { font-size: var(--sf-t-h3); }
  .csv__cerca { flex-basis: 100%; min-height: 44px; }

  .rev { overflow: visible; }
  .rev__parell { grid-template-columns: minmax(0, 1fr); }

  .pdf__pagina { min-width: 0; padding: var(--sf-e4); }
  .pet__adreca { white-space: normal; overflow-wrap: anywhere; }
}

/* ═══ Mòbil estret: les línies, en targetes ═════════════════════════════ */
@media (max-width: 760px) {
  .cap { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .opcio { flex-basis: 100%; }
  .linies thead { display: none; }
  .linies, .linies tbody { display: block; }
  .linies tr.linia { display: grid; grid-template-columns: 26px repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
  .linies tr.linia:first-child { border-top: var(--sf-linia) solid var(--sf-tinta); }
  .linies tr.linia > td { border: 0; padding: 0 !important; background: none !important; box-shadow: none !important; }
  .linies tr.linia[aria-selected='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 6px; }
  .linies tr.linia.sf-fila--dubte { background: var(--sf-dubte-fons); }
  .linies caption { display: block; width: 100%; }
  .linies .linies__n { grid-row: 1 / span 4; width: auto; }
  .linies__article { grid-column: 2 / -1; grid-row: 1; }
  .linies__q { grid-column: 2; grid-row: 2; text-align: left !important; }
  .linies__kg { grid-column: 3; grid-row: 2; }
  .linies__imp { grid-column: 4; grid-row: 2; font-weight: 600; }
  .linies__eur { grid-column: 3 / -1; grid-row: 3; text-align: left !important; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); }
  .linies__u { display: inline; }
  .linies .linies__estat { grid-column: 2 / -1; grid-row: 4; width: auto; }
  .linies tr.linia--sense :is(.linies__q, .linies__kg, .linies__eur, .linies__imp) { display: none; }
  .linies tr.fila-detall { display: block; }
  .linies tr.fila-detall > td { display: block; }
  .detall { padding: var(--sf-e2) var(--sf-e3) var(--sf-e3); }
  .detall__camps { grid-template-columns: minmax(0, 1fr) auto; }
  .detall__camp dt { grid-column: 1 / -1; padding-bottom: 0; }
  .detall__camp > dd { border-top: 0; padding-top: 2px; }
  .resp__doc { padding: var(--sf-e3); }
}

/* ═══ Mòbil estret: els serveis, amb la descripció a tota l'amplada ═════ */
@media (max-width: 600px) {
  .serveis, .serveis tbody, .serveis tfoot { display: block; }
  .serveis thead { display: none; }
  .serveis tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 8px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
  .serveis tbody tr:first-child { border-top: var(--sf-linia) solid var(--sf-tinta); }
  .serveis tbody td { display: block; border: 0; padding: 0; }
  .serveis tbody td:is(.serveis__nom, [colspan]) { grid-column: 1 / -1; }
  .serveis tbody td[data-nom]::before { content: attr(data-nom); display: block; font-size: var(--sf-t-petit); font-weight: 400; color: var(--sf-gris); }
  .serveis tfoot tr { display: flex; justify-content: space-between; }
  .serveis tfoot td:first-child { flex: 1 1 auto; }
}

@media print {
  .vistes-barra, .vista-mobil, .safata, .peu-panell { display: none !important; }
}