/* =============================================================
   ERP OBRES — GRAELLA
   Depèn de tokens.css. Cap hex ni cap px de color en aquest fitxer.
   -------------------------------------------------------------
   REGLES DE RENDIMENT — no negociables mentre hi hagi 1.000+ files
   1. Cap box-shadow, border-radius ni transition a nivell de fila.
   2. Cap degradat. Un sol background-color per cel·la.
   3. Hover en CSS pur. Mai calculat en JS.
   4. Cap :nth-child sobre files virtualitzades.
   5. Àrbitre: la mètrica "Pintat" de la barra d'estat.
      Si un canvi estètic la puja de 3 ms, es retira.
   ============================================================= */

/* ---------- BASE ---------- */

.graella {
  font-family: var(--font-ui);
  font-size: var(--fs-grid);
  color: var(--c-text);
  background: var(--c-paper);
  /* Xifres de la mateixa amplada: la coma decimal cau sempre
     al mateix eix vertical. És el detall que fa que la columna
     d'imports es pugui escanejar sense llegir-la. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- CAPÇALERA ---------- */

.graella__head {
  height: var(--head-h);
  background: var(--c-surface-head);
  border-bottom: 1px solid var(--c-rule-strong);
  /* La mateixa franja reservada que les files: sense, les columnes anaven desplaçades (Josep, 18/09/2026). */
  border-left: var(--nat-w) solid transparent;
  font-weight: var(--fw-bold);
  color: var(--c-text-dim);
  position: sticky;
  top: 0;
  z-index: 2;
}

.graella__head-cel {
  padding: 0 var(--cell-px);
  border-right: 1px solid var(--c-rule);
  user-select: none;
}

/* Clicar-la tria la columna sencera (Josep, 20/09/2026). */
.graella__head-cel[data-h] { cursor: pointer; }

/* La columna on tens el cursor s'il·lumina a la capçalera:
   orientació gratuïta en una graella de vint columnes. */
.graella__head-cel--activa { background: var(--c-accent-head); }

/* ---------- FILA ---------- */

.fila {
  height: var(--row-h);
  border-bottom: 1px solid var(--c-rule-hair);
  background: var(--c-paper);
  contain: layout style;          /* aïlla el recàlcul de layout */
}

.fila:hover { background: var(--c-surface); }

.fila__num {
  color: var(--c-text-faint);
  font-family: var(--font-mono);
  text-align: right;
  padding-right: var(--sp-2);
  background: var(--c-surface);
  border-right: 1px solid var(--c-rule);
  user-select: none;
}

/* ---------- ESTRUCTURA DE L'ARBRE ----------
   Amb fons, graduat per nivell (patch 6, Josep, 20/09/2026). El
   patch 1 el prohibia perquè el color es reservava per als estats,
   però després tots els estats van anar al TEXT: el fons quedava
   lliure i l'estructura es sostenia amb senyals massa febles.
   Escala freda de tres tons, una sola família: **fred és
   estructura, càlid és contingut**. El fons va a les cel·les, no
   a la fila, perquè la selecció i l'edició hi puguin manar
   (secció de precedència, al final del fitxer).                */

/* Fila arrel: el total de l'obra. És UNA sola fila a tota la
   pantalla, no un patró repetit: aquí el fons sí que es paga. */
.fila--arrel {
  font-size: var(--fs-arrel);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--c-rule-strong);
}
.fila--arrel .cel { background: var(--c-lvl-0); }

/* Nivell 1 — capítol */
.fila--capitol {
  font-size: var(--fs-capitol);
  font-weight: var(--fw-bold);
  border-top: 2px solid var(--c-rule-strong);
}
.fila--capitol .cel { background: var(--c-lvl-1); }

/* Nivell 2 — subcapítol */
.fila--subcapitol {
  font-size: var(--fs-partida);
  font-weight: var(--fw-bold);
  border-top: 1px solid var(--c-rule-strong);
}

/* Nivell 3 i següents — subdivisions */
.fila--subnivell {
  font-size: var(--fs-partida);
  font-weight: var(--fw-medium);
  border-top: 1px solid var(--c-rule);
}

.fila--subcapitol .cel,
.fila--subnivell .cel { background: var(--c-lvl-2); }

/* Partida: la unitat de treball. Ha de ser la fila més neta i
   més llegible de la pantalla. Es queda BLANCA; l'únic senyal
   és un ancoratge càlid a la cel·la del codi. */
.fila--partida {
  font-size: var(--fs-partida);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.fila--partida .cel { background: var(--surface-item); }

/* Descompost: context. Baixa de cos i de to alhora, i es tracta
   com a BLOC —fons uniforme a tota la fila— perquè el grup es
   llegeixi com una unitat que penja de la partida de sobre. */
.fila--descompost,
.fila--recurs {
  font-size: var(--fs-descompost);
  font-weight: var(--fw-normal);
  color: var(--c-text-dim);
}
.fila--descompost .cel,
.fila--recurs .cel { background: var(--c-bloc-descompost); }

/* La franja de color de naturalesa de l'esquerra s'ha tret (patch 6):
   amb el bloc de fons del descompost sobrava i competia amb la rajola
   de la columna. L'espai es reserva transparent a totes les files: les
   columnes no ballen, i el marcador d'origen el continua fent servir. */
.fila--arrel,
.fila--capitol,
.fila--subnivell,
.fila--subcapitol,
.fila--partida,
.fila--descompost,
.fila--recurs { border-left: var(--nat-w) solid transparent; }

/* ---------- LA BARRA LATERAL DE 4 px (sistema OBRIMA) ----------
   La franja que ja es reservava a l'esquerra de cada fila ara porta color, i és el segon senyal
   de la jerarquia, amb el fons i el sagnat: el capítol, taronja de marca; la partida, taronja
   suau; el descompost, la línia de graella.
   **El capítol obert i el tancat no es poden confondre** (Josep, 26/09/2026): el taronja de marca
   és del que està obert; el que està tancat porta la vora neutra. La fletxa ho diu també, però
   una barra de 4 px es veu de lluny i la fletxa no. */
.fila--arrel,
.fila--capitol,
.fila--subcapitol,
.fila--subnivell { border-left-color: var(--border-strong); --barra-fila: var(--border-strong); }
.fila--arrel.fila--oberta,
.fila--capitol.fila--oberta,
.fila--subcapitol.fila--oberta,
.fila--subnivell.fila--oberta { border-left-color: var(--brand-orange); --barra-fila: var(--brand-orange); }
.fila--partida { border-left-color: var(--brand-orange-soft); --barra-fila: var(--brand-orange-soft); }
.fila--descompost,
.fila--recurs { border-left-color: var(--rule-grid); --barra-fila: var(--rule-grid); }

/* **Les tres primeres columnes, fixes** en desplaçar-se de costat (Josep, 26/09/2026), amb el número de fila
   i el marcador d'origen. La barra de 4 px de la fila se'n aniria amb el desplaçament: el número la
   continua dibuixant, al mateix lloc. Les cel·les fixes agafen el fons de la seva fila. */
.fila > .fila__num,
.fila > .cel--origen,
.cel--fixa { position: sticky; z-index: 2; }
.fila > .fila__num { left: var(--nat-w); box-shadow: calc(-1 * var(--nat-w)) 0 0 0 var(--barra-fila, transparent); }
.fila > .cel--origen { left: calc(var(--nat-w) + 46px); background-color: inherit; }
.cel--fixa { background-color: inherit; }
.graella__head > .cantonada,
.graella__head > .cel--origen { position: sticky; z-index: 2; }
/* La capçalera i la fila dels grups tenen la franja com a vora, i el seu `left` ja es compta des de dins. */
.graella__head > .cantonada { left: 0; }
.graella__head > .cel--origen { left: 46px; background: var(--c-surface-head); }
.graella__head > .cel--fixa { background: var(--c-surface-head); }
.graella__grup > .graella__grup-cel:nth-child(-n+2) { position: sticky; z-index: 2; }
.graella__grup > .graella__grup-cel:nth-child(1) { left: 0; }
.graella__grup > .graella__grup-cel:nth-child(2) { left: 46px; }

/* Estat documental de la línia. */
/* Els números de les línies Adicional i Pendiente van del color de sempre: el fons del comentari i
   de l'estat ja les fa visibles de lluny (Josep, 20/09/2026). */

/* Color de flux: només pestanya i capçalera. */
.graella__head-cel--flux { box-shadow: inset 0 -2px 0 var(--c-flux); }

/* El flux actiu el fixa el contenidor amb una sola variable. */
.app[data-flux="pressupost"]   { --c-flux: var(--c-flux-pressupost); }
.app[data-flux="objectiu"]     { --c-flux: var(--c-flux-objectiu); }
.app[data-flux="certificacio"] { --c-flux: var(--c-flux-certificacio); }
.app[data-flux="liquidacio"]   { --c-flux: var(--c-flux-liquidacio); }
.app[data-flux="costReal"]     { --c-flux: var(--c-flux-liquidacio); }

/* D'on surt una xifra del cost real (P12, pas 7): la llista dels documents. */
.cr-origen { width: min(860px, calc(100vw - 32px)); }
.cr-origen__taula { max-height: 60vh; overflow: auto; margin-top: var(--sp-3); }
.cr-origen__taula tfoot td { font-weight: var(--fw-bold); border-top: 1px solid var(--c-rule-strong); }
.cr-tornar { margin-left: var(--sp-3); white-space: nowrap; }
/* Tornar de la proforma a Compras › Proformas (Josep, 16/10/2026): un botó que es veu, no només el codi de l'obra. */
.contracte-tornar { margin-left: var(--sp-3); white-space: nowrap; text-decoration: none; }
/* Previst i gastat per recurs (docs/250): la taula més ampla, les seccions del que no es compara i la pèrdua en vermell
   i amb el signe (invariant 11). */
.cr-origen--ample { width: min(1180px, calc(100vw - 32px)); }
.pg-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.pg-taula th.pg-grup { text-align: center; border-bottom: 2px solid var(--c-accent); }
.pg-taula td.num, .pg-taula th.num { white-space: nowrap; }
.pg-taula { table-layout: auto; width: 100%; }
/* El resum, en dues línies com a molt (Josep, 16/10/2026): sense passar-se, la taula hi cap sense desplaçar-se de costat. */
.pg-taula td.pg-resum { white-space: normal; min-width: 220px; max-width: 420px; }
.pg-taula td.pg-resum > div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.pg-seccio td { padding-top: var(--sp-3); color: var(--c-text-dim); font-weight: var(--fw-bold); font-size: var(--fs-status); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--c-rule-strong); }
.pg-fila--forta td { font-weight: var(--fw-bold); }
.pg-perd { color: var(--c-loss); font-weight: var(--fw-bold); }
.pg-taula tfoot tr.pg-arrodoniment td { font-weight: var(--fw-regular, 400); color: var(--c-text-dim); border-top: 0; }

/* ---------- L'EVOLUCIÓ DE L'OBRA (P12-bis) ----------
   Els colors de SQL Obras, que és el que l'obra coneix; i el traç (discontinu, el projectat i el previst) com a segon
   senyal (invariant 11). */
.app[data-flux="evolucio"]     { --c-flux: var(--c-flux-liquidacio); }
.evolucio { flex: 1 1 auto; overflow: auto; padding: var(--sp-3) var(--sp-4); background: var(--c-paper); }
.evolucio[hidden] { display: none; }
.evo-cap { display: flex; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-2); }
.evo-pista { color: var(--c-text-dim); font-size: var(--fs-status); }
.evo-cos { display: flex; gap: var(--sp-4); align-items: flex-start; }
.evo-grafic-lloc { flex: 1 1 auto; min-width: 0; }
.evo-grafic { width: 100%; height: auto; display: block; }
.evo-eix { stroke: var(--c-rule); stroke-width: 1; }
.evo-eix-text { fill: var(--c-text-dim); font-size: 12px; }
.evo-linia { fill: none; stroke-width: 2.4; }
.evo-linia--plana { stroke-dasharray: 8 5; }
.evo-punt { stroke: var(--c-paper); stroke-width: 1; }
.evo-valor { font-size: 12px; font-weight: var(--fw-bold); }
.evo-llegenda { display: flex; flex-direction: column; gap: var(--sp-2); flex: 0 0 auto; font-size: var(--fs-status); }
.evo-llegenda__item { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; white-space: nowrap; }
.evo-taula-lloc { margin-top: var(--sp-3); overflow-x: auto; }
.evo-taula td, .evo-taula th { white-space: nowrap; }
.evo-marca { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--sp-2); vertical-align: -1px; background: currentColor; }
.evo--projectat { --evo: var(--c-evo-projectat); }
.evo--previst   { --evo: var(--c-evo-previst); }
.evo--certificat { --evo: var(--c-evo-certificat); }
.evo--facturat  { --evo: var(--c-evo-facturat); }
.evo--cobrat    { --evo: var(--c-evo-cobrat); }
.evo--cost      { --evo: var(--c-evo-cost); }
.evo-linia[class*="evo--"] { stroke: var(--evo); }
.evo-punt[class*="evo--"] { fill: var(--evo); }
.evo-valor[class*="evo--"] { fill: var(--evo); }
.evo-marca[class*="evo--"] { color: var(--evo); }
/* Un cost del Coste real amb documents: com un enllaç, sense color (el color ja diu benefici o pèrdua). */
.cel--origen-cost { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--c-text-dim); text-underline-offset: 3px; }
.cel--origen-cost:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
.cr-origen__fila { cursor: pointer; }
.cr-origen__fila:hover td { background: var(--c-accent-row); }
.cr-font { display: inline-block; min-width: 54px; color: var(--c-text-dim); font-size: var(--fs-status); }
.cr-origen__buit, .cr-origen__nota { color: var(--c-text-dim); font-size: var(--fs-status); margin: var(--sp-3) 0 0; }


/* ---------- CEL·LES ---------- */

.cel {
  padding: 0 var(--cell-px);
  border-right: 1px solid var(--c-rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cel--codi   { font-family: var(--font-mono); }

/* El sagnat s'aplica a la columna de l'arbre (Código) amb --nivell: 0..5.
   Ha de ser visible: 16 px per nivell. Va DESPRÉS de .cel, que porta el
   padding curt i, si no, se'l menjaria. */
.cel--arbre { padding-left: calc(var(--cell-px) + var(--nivell, 0) * var(--indent)); }

/* ---------- LA CASELLA D'*Ud*: L'ETIQUETA I LA UNITAT ----------
   Josep, 26/09/2026: la columna de naturalesa s'ajunta amb la d'unitat, i l'amplada que sobra
   se'n va al *Resumen*, que tallava els textos llargs. **Totes les etiquetes són iguals** —vora
   `border-strong`, fons `surface-card`, text `ink-secondary`—: el que distingeix la naturalesa és
   el que hi diu, no cap color. Sense etiqueta, l'espai es reserva igual, perquè les unitats
   quedin en columna.                                                                          */
.cel--ud {
  color: var(--c-text-dim);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nat-gap);
}
/* La unitat, en el seu element: així comença sempre al mateix punt, passi el que passi. */
.ud-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-nat {
  flex: 0 0 var(--nat-etiqueta-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 13px;
  box-sizing: border-box;
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink-secondary);
  background: var(--surface-card);
  /* Vora fluixa: amb quaranta files seguides, la forta feia soroll (Josep, 26/09/2026). */
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
/* Sense naturalesa —obra, capítol, partida—: l'espai hi és, la caixa no es veu. */
.ud-nat--buida { border-color: transparent; background: none; }
.cel--num    { text-align: right; font-family: var(--font-mono); }

/* Cel·la amb el focus. Outline en lloc de border: no desplaça
   res i no força un reflow de la fila. */
.cel--focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.cel--seleccionada { background: var(--c-accent-weak); }

.cel--editant {
  background: var(--c-edit-bg);
  outline: 2px solid var(--c-edit-border);
  outline-offset: -2px;
}

/* ---------- ESTATS DEL VALOR ----------
   S'apliquen al text, no al fons, i són per flux:
   una mateixa fila pot tenir el preu de venda escrit i
   el d'objectiu calculat.                                     */

/* REGLA: un estat no es pot distingir només pel to. Cada estat porta
   com a mínim dos senyals. No és estètica: el 8 % dels homes no separa
   bé vermell i magenta, i aquesta pantalla es mira vuit hores seguides. */

/* Escrit per l'usuari — negre, pes normal */
.val--escrit {
  color: var(--c-val-written);
  font-weight: var(--fw-normal);
}

/* Calculat pel motor — violeta, pes normal */
.val--calculat {
  color: var(--c-val-calc);
  font-weight: var(--fw-normal);
}

/* Bloquejat — vermell + pes mitjà + fons pàl·lid. Tres senyals.
   Un background-color pla no té cost de pintat. */
.val--bloquejat {
  color: var(--c-val-locked);
  font-weight: var(--fw-medium);
  background: var(--c-val-locked-bg);
}

/* Anul·lat — gris, ratllat i fons gris. Tres senyals, com a Presto (Josep, 20/09/2026):
   el valor es queda escrit, i el que diu que no suma és la manera de pintar-lo. */
.val--anulat {
  color: var(--c-val-cancelled);
  font-weight: var(--fw-normal);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------- SEMÀNTICA ECONÒMICA ---------- */

.desv--favorable    { color: var(--c-gain); }
.desv--desfavorable { color: var(--c-loss); }

/* ---------- PANELL D'AMIDAMENTS ---------- */

.panell {
  background: var(--c-surface-sunken);
  border-top: 1px solid var(--c-rule-strong);
}

.panell__titol {
  height: var(--bar-h);
  padding: 0 var(--sp-3);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-rule);
}

.panell__ref { color: var(--c-text-dim); font-weight: var(--fw-normal); }

/* Nansa de redimensionat entre graella i amidaments. */
.panell__nansa {
  height: 5px;
  cursor: row-resize;
  background: var(--c-rule-hair);
}
.panell__nansa:hover { background: var(--c-accent); }

/* ---------- CAPÇALERA (patch 10; Josep, 21/09/2026) ----------
   Dues files: la 1 diu on soc (obra, codi, client, estat, qui); la 2, què faig (pestanyes de
   flux i eines). La línia de dalt surt de --c-flux, que canvia amb la pestanya. */

.cap-obra {
  position: relative;
  flex: 0 0 auto;
  height: var(--cap-obra-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule-hair);
}

/* Línia del flux actiu a dalt de tot. Et diu on treballes
   encara que no miris les pestanyes. Surt de --c-flux, que ja
   fixa .app[data-flux] del patch de tokens-addenda. */
.cap-obra::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--flux-linia);
  background: var(--c-flux);
}

/* Bloc de nom. min-width: 0 és imprescindible perquè el
   text-overflow funcioni dins d'un flex. */
.obra {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.obra__nom {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obra__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
  margin-top: 2px;
  font-size: var(--fs-grid);
  color: var(--c-text-dim);
  white-space: nowrap;
}

.obra__cod { font-family: var(--font-mono); font-size: var(--fs-status); flex: 0 0 auto; }
/* El codi porta a la fitxa de l'obra: es veu com a text, i el subratllat surt en passar-hi. */
a.obra__cod { color: inherit; text-decoration: none; }
a.obra__cod:hover { color: var(--c-accent); text-decoration: underline; }
.obra__sep { color: var(--c-text-faint); }
.obra__client { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Etiqueta d'estat de l'obra. Només lectura. */
.obra-estat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-status);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  white-space: nowrap;
}
.obra-estat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-text-faint);   /* en estudi */
}
.obra-estat--adjudicada::before { background: var(--c-gain); }

/* ---------- LA MARCA (sistema OBRIMA) ----------
   `obrima` en minúscules, Space Grotesk 500, amb el punt de la i convertit en un quadrat
   taronja: el costat, un 24 % de la mida de la lletra, i la separació, un 12 %. A la barra
   de l'aplicació va a 17 px, que és la mida que demana el sistema. */
.marca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: var(--sp-4);
  font-family: var(--font-marca);
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.marca:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.marca__i { position: relative; }
.marca__i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.02em;                 /* alçada de la x més la separació del 12 % */
  width: 0.24em;
  height: 0.24em;
  transform: translateX(-50%);
  background: var(--brand-orange);
}
.cap-sep--marca { margin-right: var(--sp-4); }

.cap-sep {
  flex: 0 0 1px;
  align-self: stretch;
  margin: var(--sp-4) 0;
  background: var(--c-rule);
}

.cap-usuari { flex: 0 0 auto; font-size: var(--fs-grid); color: var(--c-text-dim); white-space: nowrap; }
/* El nom porta a «Mi firma» (docs/150, 8.5). */
a.cap-usuari { text-decoration: none; }
a.cap-usuari:hover { text-decoration: underline; }
/* El menú del nom (P14, pas 6): Mi firma, Cambiar de empresa, Salir. */
.cap-menu { position: relative; flex: 0 0 auto; }
.cap-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cap-menu > summary::-webkit-details-marker { display: none; }
.cap-menu > summary:hover { color: var(--c-text); }
.cap-menu__fletxa { font-size: 10px; color: var(--ink-muted); }
.cap-menu[open] .cap-menu__fletxa { transform: rotate(180deg); }
.cap-menu__llista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px;
  display: flex; flex-direction: column; padding: var(--sp-2) 0;
  background: var(--c-paper); border: 1px solid var(--c-rule-strong); border-radius: var(--radius-sm);
}
.cap-menu__llista form { margin: 0; }
.cap-menu__llista a, .cap-menu__llista button {
  display: block; width: 100%; padding: 6px var(--sp-4); text-align: left;
  font: inherit; font-size: var(--fs-grid); color: var(--c-text); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.cap-menu__llista a:hover, .cap-menu__llista button:hover { background: var(--surface-muted); }
/* *Conectar mi IA* (docs/220): només a la pàgina de qui té el permís. */
.cap-menu__llista .cap-menu__ia { display: none; }
[data-ia="1"] .cap-menu__llista .cap-menu__ia { display: block; }

.cap-tancar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  font: inherit; font-size: 14px;
  color: var(--c-text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
}
.cap-tancar:hover { background: var(--c-surface-head); border-color: var(--c-rule); color: var(--c-text); }
.cap-tancar:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }


/* ---- Fila 2: pestanyes de flux i eines ---- */

.cap-eines {
  flex: 0 0 auto;
  /* En una pantalla estreta baixa de línia en lloc de tallar-se, com feia la barra d'abans
     (Josep, 20/09/2026): cap eina queda fora d'abast. */
  min-height: var(--cap-eines-h);
  flex-wrap: wrap;
  row-gap: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule-strong);
}

/* ---- Pestanyes de flux ----
   Substitueixen el .pestanya del patch 1. Cada una porta un
   punt del seu color, sempre visible, i el subratllat quan
   és l'activa. */
.flux-tabs { display: flex; align-self: stretch; flex: 0 0 auto; }

.flux-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  color: var(--c-text-dim);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.flux-tab:hover { color: var(--c-text); }
.flux-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.flux-tab::before {
  content: "";
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--tab-color);
  opacity: .55;
}
.flux-tab::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 0;
  height: var(--flux-linia);
  border-radius: 2px 2px 0 0;
  background: transparent;
}

/* La pestanya activa va subratllada amb el taronja de marca: les pestanyes són navegació
   (sistema OBRIMA). El punt de cada pestanya segueix el mateix criteri. */
.flux-tab--activa { color: var(--c-text); font-weight: var(--fw-bold); }
.flux-tab--activa::before { opacity: 1; }
.flux-tab--activa::after { background: var(--brand-orange); }

.flux-tab { --tab-color: var(--ink-muted); }
.flux-tab--activa { --tab-color: var(--brand-orange); }

/* ---- Cercador ---- */
.cercador {
  margin-left: auto;
  flex: 1 1 220px;
  min-width: 130px;
  max-width: 260px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 6px 0 10px;
  font-size: var(--fs-grid);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
}
.cercador input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; background: none; color: var(--c-text); }
.cercador input::placeholder { color: var(--c-text-faint); }
.cercador:focus-within { border-color: var(--c-accent); }

/* ---- Control segmentat de desplegament ---- */
.segmentat {
  flex: 0 0 auto;
  display: inline-flex;
  height: 28px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.segmentat button {
  font: inherit;
  font-size: var(--fs-grid);
  padding: 0 10px;
  color: var(--c-text-dim);
  background: var(--c-paper);
  border: 0;
  border-right: 1px solid var(--c-rule);
  cursor: pointer;
}
.segmentat button:last-child { border-right: 0; }
.segmentat button:hover { color: var(--c-text); background: var(--c-surface-head); }
.segmentat button[aria-pressed="true"] { color: var(--surface-card); background: var(--ink); font-weight: var(--fw-bold); }
.segmentat button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* ---- Interruptor ---- */
.interruptor {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: var(--fs-grid);
  color: var(--c-text);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.interruptor__pista {
  position: relative;
  width: 28px; height: 16px;
  border-radius: 8px;
  background: var(--c-rule-strong);
  transition: background var(--t-control);
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-paper);
  transition: left var(--t-control);
}
.interruptor[aria-checked="true"] .interruptor__pista { background: var(--c-accent); }
.interruptor[aria-checked="true"] .interruptor__pista::after { left: 14px; }
.interruptor:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---- Menú d'exportar ---- */
.menu-exportar { position: relative; flex: 0 0 auto; }
.menu-exportar__llista {
  position: absolute;
  right: 0; top: 32px;
  min-width: 170px;
  padding: var(--sp-2) 0;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  z-index: 20;
}
.menu-exportar__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: 6px var(--sp-4);
  font: inherit;
  font-size: var(--fs-grid);
  text-align: left;
  color: var(--c-text);
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-exportar__item:hover,
.menu-exportar__item:focus-visible { background: var(--c-surface-head); outline: 0; }
.menu-exportar__item small { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-text-dim); }

.cap-obra .nomes-lectura { flex: 0 0 auto; }
.cap-eines .cerca-resultat { margin-left: calc(-1 * var(--sp-2)); }

/* ---- La barra de context (Josep, 26/09/2026; sistema OBRIMA, ContextBar) ----
   La segona fila, sempre, a tots els fluxos i amb la mateixa alçada. A l'esquerra el context del flux; a la
   dreta, les eines de la vista, sempre en el mateix ordre. La barra de 4 px de l'esquerra és taronja on
   s'escriu (Objetivo, Certificación) i suau on es consulta (Presupuesto, Liquidación). */
.barra-context {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--cap-eines-h);
  padding: 0 var(--sp-3) 0 var(--sp-4);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand-orange-soft);
  flex-wrap: wrap; row-gap: 0;
}
.barra-context[data-mena="edicio"] { border-left-color: var(--brand-orange); }
.barra-context__esq { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.barra-context__dreta { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; margin-left: auto; }
.barra-context__sep { width: 1px; align-self: stretch; margin: 8px 0; background: var(--border-strong); }
.barra-context__sep[hidden] { display: none; }
.ctx__item { font-size: var(--fs-ui); color: var(--ink-muted); white-space: nowrap; }
.ctx__xifra { color: var(--ink); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* La desviació del lot (compres): la fletxa i el to (invariant 11). */
.ctx__xifra--be { color: var(--c-gain); }
.ctx__xifra--mal { color: var(--c-loss); }
.ctx__lot { font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--ink); }
.ctx__titol { font-size: var(--fs-status); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
/* Fletxa · número · fletxa: el desplegable del navegador no encaixava amb la resta. */
.ctx-nav { display: inline-flex; align-items: stretch; height: 26px; }
.ctx-nav__fletxa {
  display: inline-flex; align-items: center; padding: 0 8px; color: var(--ink-secondary); cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--border-strong);
}
.ctx-nav__fletxa:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ctx-nav__fletxa:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ctx-nav__fletxa:hover:not(:disabled) { color: var(--brand-orange-ink); background: var(--surface-item); }
.ctx-nav__fletxa:disabled { color: var(--border-strong); cursor: default; }
.ctx-nav__num {
  display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--fs-ui); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface-card);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
}
.ctx-data {
  height: 26px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-ui); color: var(--ink-secondary);
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
/* L'estat de la certificació: dos senyals, el punt i el to del text i la vora (invariant 11). */
.ctx-xip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: var(--fs-status); font-weight: var(--fw-bold);
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--ink-secondary);
}
.ctx-xip__punt { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-muted); }
.ctx-xip--oberta { color: var(--brand-orange-ink); background: var(--surface-item); border-color: var(--brand-orange-soft); }
.ctx-xip--oberta .ctx-xip__punt { background: var(--brand-orange); }
.ctx-xip--aprovada { color: var(--state-positive); border-color: var(--state-positive); }
.ctx-xip--aprovada .ctx-xip__punt { background: var(--state-positive); }
.ctx__boto { height: 26px; }
/* El xip d'estat i els seus botons, junts. */
.ctx-estat { display: inline-flex; align-items: center; gap: 6px; }
/* La factura a client (P9, pas 8): el xip obre la finestra. Sense número, neutre; amb número, en verd:
   el text i el to (invariant 11). */
.ctx-factura { font: inherit; font-size: var(--fs-status); font-weight: var(--fw-bold); cursor: pointer; }
.ctx-factura:hover { background: var(--surface-item); }
.ctx-factura:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.ctx-factura--num { color: var(--state-positive); border-color: var(--state-positive); }
.ctx-factura--num .ctx-xip__punt { background: var(--state-positive); }
.resum-obra__nota--mal { color: var(--c-loss); font-weight: var(--fw-bold); }

/* ---- ViewSwitcher (sistema OBRIMA, components/ViewSwitcher) ----
   Presupuestos ⇄ Compras: no és una acció, és el mode de treball, i per això ensenya sempre els dos
   destins. A la dreta de la barra, separat per una ratlla: és un control d'una altra categoria. El
   taronja diu on ets; el grup Capítulos / Partidas / Todo, en negre, quin detall veus (Josep, 25/09/2026). */
.cap-eines__sep {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 8px 0 8px auto;
  background: var(--border-strong);
}
.vista-switch {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-chapter);
  border: 1px solid var(--brand-orange-soft);
  border-radius: var(--radius-sm);
}
.vista-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--brand-orange-ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.vista-switch button[aria-pressed="true"] { color: var(--surface-card); background: var(--brand-orange); cursor: default; }
.vista-switch button:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 1px; }
/* La drecera (F7) va al rètol de cada botó, no a l'etiqueta: posar-la-hi en passar el ratolí feia créixer el
   botó i el commutador es movia (Josep, 26/09/2026). */

/* ---------- BOTONS ---------- */

.boto {
  height: 24px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--c-text);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
  transition: background var(--t-control), border-color var(--t-control);
}

.boto:hover  { background: var(--c-surface-head); border-color: var(--c-rule-strong); }

/* Un botó apagat: es veu que no es pot fer servir, i el cursor ho diu (Josep, 20/09/2026). */
.boto:disabled, .boto[aria-disabled="true"] {
  color: var(--c-text-faint);
  border-color: var(--c-rule);
  background: var(--c-surface);
  cursor: default;
}

.boto:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* El botó principal (sistema OBRIMA, Buttons): el taronja de marca amb el text blanc. **Un sol per
   pantalla**, el que desa o confirma. */
.boto--principal { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--surface-card); font-weight: var(--fw-bold); }
.boto--principal:hover { background: var(--brand-orange-ink); border-color: var(--brand-orange-ink); }
.boto--principal:disabled { background: var(--c-surface); border-color: var(--c-rule); color: var(--c-text-faint); font-weight: var(--fw-normal); }

/* ---------- BARRA D'ESTAT ---------- */

.estat {
  height: 22px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-status);
  color: var(--c-text-dim);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-3);
}

/* ------------------------------------------------------------
   BARRA DE DRECERES (patch 8; Josep, 21/09/2026)
   -------------------------------------------------------------
   Abans, tres línies fixes amb una trentena de tecles: 60 px de
   dades perduts, i com que hi sortia tot sempre, no s'hi mirava
   ningú. Ara, UNA línia amb les tecles útils a la cel·la on ets
   (màxim cinc), i la llista completa darrere de F1.
   ------------------------------------------------------------ */

.tecles {
  height: var(--tecles-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-3);
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule-hair);
  font-size: var(--fs-status);
  color: var(--c-text-dim);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

/* Parella tecla + acció. La tecla es llegeix, l'acció s'entén. */
.tecles__item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.tecla {
  font-family: var(--font-mono);
  font-size: var(--fs-status);
  color: var(--c-text);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
  padding: 0 var(--sp-2);
  line-height: 16px;
}

/* L'ajuda va a la dreta del tot, separada de la resta. */
.tecles__ajuda {
  margin-left: auto;
  height: 16px;
  min-width: 18px;
  padding: 0 var(--sp-2);
  font: inherit;
  font-size: var(--fs-status);
  color: var(--c-text-dim);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--t-control), border-color var(--t-control);
}
.tecles__ajuda:hover { background: var(--c-surface-head); border-color: var(--c-rule-strong); }
.tecles__ajuda:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* ---------- EL PANELL D'AJUDA COMPLET ----------
   Sobreposat, no una pàgina a part: no es perd de vista on eres. */
.ajuda-tecles {
  position: fixed;
  inset: 0;
  background: var(--c-vel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.ajuda-tecles[hidden] { display: none; }

.ajuda-tecles__caixa {
  width: min(680px, calc(100vw - 48px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  padding: var(--sp-5);
}

.ajuda-tecles__cap {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.ajuda-tecles__titol {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
}

/* Agrupades per context, i el context on ets ara va primer. */
.ajuda-tecles__grup {
  font-size: var(--fs-status);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-dim);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
}
.ajuda-tecles__cap + .ajuda-tecles__grup { margin-top: 0; }

.ajuda-tecles__llista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-grid);
  margin: 0;
}

.ajuda-tecles__fila { display: flex; align-items: baseline; gap: var(--sp-3); }
.ajuda-tecles__fila dt { flex: 0 0 auto; }
.ajuda-tecles__fila dd { margin: 0; color: var(--c-text-dim); }

/* ---------- RESUM I MARGE (P7; Josep, 21/09/2026) ----------
   Sobreposat com l'ajuda. A l'esquerra el resum del pressupost, del PEM al total amb IVA; a la dreta
   el marge i els tres botons que el mouen. */
.resum-obra {
  position: fixed;
  inset: 0;
  background: var(--c-vel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.resum-obra[hidden] { display: none; }

.resum-obra__caixa {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  padding: var(--sp-5);
}

.resum-obra__cap { display: flex; align-items: center; margin-bottom: var(--sp-4); }
.resum-obra__titol { font-size: var(--fs-title); font-weight: var(--fw-bold); }
.resum-obra__cap .tecles__ajuda { margin-left: auto; }

.resum-obra__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-6);
}

.resum-obra__grup {
  font-size: var(--fs-status);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-dim);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: var(--sp-2);
  margin: 0 0 var(--sp-3);
}

.resum-obra__taula { width: 100%; border-collapse: collapse; font-size: var(--fs-grid); }
/* El resum de la certificació (P9): els capítols, amb el codi en una columna estreta. */
.resum-cert__codi { display: inline-block; min-width: 3em; color: var(--c-text-dim); font-family: var(--font-mono); }
.resum-cert__cap td { color: var(--c-text-dim); font-size: var(--fs-status); }
.resum-cert__capitols td { text-align: right; white-space: nowrap; }
.resum-cert__capitols td.resum-obra__i { width: 104px; padding-left: var(--sp-3); }
.resum-cert__capitols td.resum-obra__p { width: 64px; padding-left: var(--sp-4); }
.resum-obra__taula th { text-align: left; font-weight: var(--fw-normal); padding: 3px 0; }
.resum-obra__taula td { padding: 3px 0; }
.resum-obra__p { width: 92px; white-space: nowrap; color: var(--c-text-dim); }
.resum-obra__i { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.resum-obra__nota-i { font-family: inherit; color: var(--c-text-dim); }
/* Els subtotals de la cadena, amb pes i una línia a sobre; el total, a més, amb una línia doble. */
.resum-obra__sub th, .resum-obra__sub td { font-weight: var(--fw-bold); border-top: 1px solid var(--c-rule); }
.resum-obra__total th, .resum-obra__total td { font-weight: var(--fw-bold); border-top: 3px double var(--c-rule-strong); }
/* Un marge negatiu: to i pes (invariant 11). */
.resum-obra__perd td { color: var(--c-loss); }

.resum-obra__pct {
  width: 58px;
  height: 22px;
  padding: 0 var(--sp-2);
  font: inherit;
  font-family: var(--font-mono);
  text-align: right;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-control);
  background: var(--c-paper);
  color: var(--c-text);
}
.resum-obra__pct:focus { outline: 2px solid var(--c-accent); outline-offset: 0; }
.resum-obra__pct:disabled { background: var(--c-surface); color: var(--c-text-dim); }

.resum-obra__accio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-grid);
}
.resum-obra__accio:first-of-type { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--c-rule); }

.resum-obra__nota { margin: var(--sp-4) 0 0; font-size: var(--fs-grid); }
.resum-obra__nota--be { color: var(--c-gain); }
.resum-obra__nota--mal { color: var(--c-loss); font-weight: var(--fw-bold); }


/* ------------------------------------------------------------
   ORIGEN DE LA PARTIDA (patch 3; Josep, 18/09/2026)
   -------------------------------------------------------------
   "Addicional" no és un tipus de fila, és un ESTAT de la partida
   dins d'un flux: la mateixa partida és contractual al Pressupost
   i addicional a la Liquidació. El marcador es deriva de les
   dades, no s'escriu a la fila. Amb el nostre model, CanMod és la
   VARIACIÓ (les línies Modificado) i CanPres = CanIni + CanMod;
   l'estat surt de CanIni i CanPres (src/motor/origen.ts):
     contractual  CanIni > 0 i CanPres = CanIni
     modificada   CanIni > 0, CanPres ≠ CanIni i CanPres ≠ 0
     addicional   CanIni = 0 i CanPres > 0
     suprimida    CanIni > 0 i CanPres = 0
   Només es pinta als fluxos on existeix la comparació.
   ------------------------------------------------------------ */

/* Columna del marcador. Va entre el número de fila i el codi.
   Al flux de Pressupost existeix però queda buida: la graella
   ha de tenir la mateixa geometria a tots els fluxos. */
.cel--origen {
  width: var(--orig-w);
  min-width: var(--orig-w);
  font-family: var(--font-mono);
  font-size: var(--fs-partida);
  font-weight: var(--fw-bold);
  text-align: center;
  padding: 0;
  border-right: 1px solid var(--c-rule);
  background: var(--c-surface);
  user-select: none;
}

/* Dos senyals per estat: glif + franja esquerra de la fila.
   La franja de partida està lliure — la naturalesa només
   ocupa descompostos i recursos — així que no hi ha conflicte. */

.orig--modificada .cel--origen { color: var(--c-orig-mod); }
.orig--modificada { border-left-color: var(--c-orig-mod); }

.orig--addicional .cel--origen { color: var(--c-orig-nova); }
.orig--addicional { border-left-color: var(--c-orig-nova); }

.orig--suprimida .cel--origen { color: var(--c-orig-supr); }
.orig--suprimida { border-left-color: var(--c-orig-supr); }

/* La partida suprimida porta un tercer senyal: el resum ratllat.
   És l'únic estat que representa una absència, i ha de llegir-se
   com a tal sense haver de mirar les xifres. */
.orig--suprimida .cel--arbre,
.orig--suprimida .cel--resum {
  color: var(--c-orig-supr);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Els descompostos hereten l'origen de la seva partida però NO
   el pinten: la franja d'aquelles files ja porta la naturalesa
   i el glif duplicat seria soroll. */
.fila--descompost .cel--origen,
.fila--recurs .cel--origen { color: transparent; }


/* ------------------------------------------------------------
   ESTRUCTURA I EDITOR — el que la graella necessita i el
   sistema encara no deia. Traslladat tal com era de
   servidor/http/graella.ts (encàrrec B, 18/09/2026).
   ------------------------------------------------------------ */

.cantonada{flex:0 0 46px; background:var(--c-surface-head); border-right:1px solid var(--c-rule);
           cursor:pointer; height:100%; padding:0 !important}
.graella__head{display:flex; flex:0 0 auto; align-items:center; padding-right:14px; overflow:hidden}
.graella__head-cel{line-height:var(--head-h); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.graella__head-cel.num{text-align:right}
/* ---------- LES DUES VISTES (P8; Josep, 23/09/2026) ----------
   Pressupostos: la graella ho ocupa tot, amb Mediciones i Texto de costat a sota.
   Compras: tres columnes —l'objectiu, els lots i els proveïdors—, amb les laterals plegables i els
   límits que es mouen. Amb les tres a la vista el centre quedava massa petit: només una lateral oberta. */
.graella__cos{flex:1 1 auto; display:flex; min-height:0; min-width:0}
.graella__taula{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden}
.graella__taula[hidden]{display:none}

.nansa-v{width:var(--nansa); flex:0 0 auto; cursor:col-resize; background:var(--c-rule-hair)}
.nansa-v:hover{background:var(--c-accent)}
.nansa-v[hidden]{display:none}
.nansa-h{height:var(--nansa); flex:0 0 auto; cursor:row-resize; background:var(--c-rule-hair)}
.nansa-h:hover{background:var(--c-accent)}

.compres-lots{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--c-paper)}
.compres-lots[hidden]{display:none}
.compres-lots__llista{flex:0 0 auto; overflow:auto}
.compres-lots__suministros{flex:1 1 auto; overflow:auto; border-top:1px solid var(--c-rule)}

.compres-proveidors{flex:0 0 auto; display:flex; flex-direction:column; min-height:0; background:var(--c-paper)}
.compres-proveidors[hidden]{display:none}
.compres-proveidors__cos{flex:1 1 auto; overflow:auto}

/* Les capçaleres de panell, totes iguals (Josep, 26/09/2026, artboard 10): 10 px, majúscules, `ink-muted`, i la
   fletxa de plegar a l'esquerra. Fixes a dalt i a l'esquerra: el comparatiu es desplaça de costat. */
.compres__titol{position:sticky; top:0; left:0; z-index:4; display:flex; align-items:center; gap:var(--sp-3);
                height:30px; padding:0 var(--sp-3); background:var(--c-surface); color:var(--ink-muted);
                font-size:10px; font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase;
                border-bottom:1px solid var(--c-rule)}
.compres__titol .boto{text-transform:none; letter-spacing:0}
.compres__plec{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0;
               color:var(--ink-secondary); background:none; border:0; border-radius:var(--radius-control); cursor:pointer}
.compres__plec:hover{background:var(--c-surface-head); color:var(--c-text)}
.compres__plec:focus-visible{outline:2px solid var(--c-accent); outline-offset:0}
/* Proveedores del lote no es desplaça de costat amb el comparatiu. */
.comp-esq{position:sticky; left:0; z-index:4}
/* On es deixen anar els proveïdors: vora discontínua i fons, que es vegi que és un lloc (artboard 10). */
.compres__desti-buit{display:inline-block; margin:var(--sp-4); padding:var(--sp-3) var(--sp-5); font-size:var(--fs-status);
                     color:var(--ink-muted); background:var(--surface-muted); border:1px dashed var(--border-strong);
                     border-radius:var(--radius-sm)}
.compres-lots__llista[hidden], .nansa-h[hidden]{display:none}
.compres__titol--petit{font-size:var(--fs-status); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-dim)}
.compres__titol small{color:var(--c-text-dim); font-weight:var(--fw-normal); text-transform:none; letter-spacing:0}
.compres__titol .boto{height:20px}
/* Totes les capçaleres de panell iguals (Josep, 26/09/2026): la fletxa de plegar a l'esquerra, el títol, i
   els controls del panell a la dreta. */
.compres__eines{margin-left:auto; display:flex; align-items:center; gap:var(--sp-3)}
.compres__plegar[hidden]{display:none}
.graella__panell-cap{flex:0 0 auto; position:static}
.graella__panell-cap[hidden]{display:none}
.compres__titol .segmentat{height:20px; font-weight:var(--fw-normal)}
.compres__titol .segmentat button{font-size:var(--fs-status)}
/* La fletxa de l'esquerra va enganxada al títol; la de la dreta, al final de la barra (la hi porta
   el botó *Crear nuevo*, que ja s'hi empeny). */
/* Les fletxes de plegar, en vermell: han de cantar (Josep, 23/09/2026). */
.compres__plegar{width:22px; height:20px; color:var(--c-plegar); font-weight:var(--fw-bold); background:none;
                 border:1px solid transparent; border-radius:var(--radius-control); cursor:pointer}
.compres__plegar:hover{background:var(--c-surface-head); border-color:var(--c-plegar); color:var(--c-plegar)}
.compres__buit{color:var(--c-text-dim); padding:var(--sp-3) var(--sp-4); margin:0}

.compres-taula{width:100%; border-collapse:collapse; font-size:var(--fs-grid)}
.compres-taula thead th{position:sticky; top:0; background:var(--c-surface-head); color:var(--c-text-dim);
                        text-align:left; font-weight:var(--fw-bold); padding:2px var(--sp-3);
                        border-bottom:1px solid var(--c-rule)}
.compres-taula th{text-align:left; font-weight:var(--fw-normal); padding:2px var(--sp-3); white-space:nowrap}
.compres-taula td{padding:2px var(--sp-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.compres-taula .num{text-align:right; font-family:var(--font-mono); white-space:nowrap}
.compres-taula tbody tr{cursor:default}
.compres-taula tbody tr[data-lot]{cursor:pointer}
.compres-taula tbody tr[data-lot]:hover{background:var(--c-surface-head)}
/* La fila triada de qualsevol taula: la barra, del taronja de marca, com el cursor de la graella. */
.compres-taula__triada{background:var(--c-accent-weak); box-shadow:inset 2px 0 0 var(--brand-orange)}
/* El que troba el buscador en una finestra de Compras: to i barra; la que es mira, a més, el contorn (invariant 11). */
.cerca-trobada > td{background:var(--band-active-cell); box-shadow:inset 0 -1px 0 var(--brand-orange-soft)}
.cerca-trobada--actual{outline:2px solid var(--brand-orange); outline-offset:-2px}
/* El comparatiu: els grups de columnes a dalt, i el preu de cada proveïdor al costat del seu import. */
/* L'amplada la posa la pantalla (AMPLE_COMP, graella.ts): aquí només que el contingut no la mogui. */
.compres-taula--comp{table-layout:fixed}
.compres-taula--comp th,.compres-taula--comp td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.compres-taula__lliure{color:var(--c-text-faint); font-weight:var(--fw-normal)}
.compres-taula__grups th{background:var(--c-surface-head); color:var(--c-text-dim); font-weight:var(--fw-bold);
                         text-align:center; border-left:1px solid var(--c-rule); padding:2px var(--sp-3); white-space:nowrap}
/* Les dues files de la capçalera es queden fixes en baixar; la dels títols, just sota la dels grups. */
.compres-taula--comp thead th{z-index:2}
.compres-taula--comp .compres-taula__grups th{z-index:3}
/* La ratlla entre la fila dels grups i la dels títols (Josep, 26/09/2026: *"jo la deixaria, com estava
   abans"*). Amb les capçaleres fixes i les ratlles de columna, la vora de sota es perdia: el navegador
   pinta les vores de la taula per sota de les caselles fixes. Una ombra la pinta la mateixa casella. */
.compres-taula--comp .compres-taula__grups th{box-shadow:inset 0 -1px 0 var(--c-rule); border-bottom:0}
/* **On s'entra el preu de l'oferta, en groc suau** amb subratllat (`surface-editable`, Josep, 26/09/2026): el verd
   ja vol dir «per sota de l'objectiu». */
.compres-taula--comp td.comp-preu{cursor:default}
.compres-taula--comp td.comp-preu--edit{background:var(--surface-editable); box-shadow:inset 0 -1px 0 var(--surface-editable-rule); cursor:text}
/* Qui guanya a cada fila: el més baix en verd i negreta, el més alt en vermell (Josep, 27/09/2026). */
.compres-taula--comp td.comp-preu--min{color:var(--state-positive); font-weight:var(--fw-bold)}
.compres-taula--comp td.comp-preu--max{color:var(--state-negative)}
.compres-taula--comp td.comp-preu:focus-visible{outline:2px solid var(--c-accent); outline-offset:-2px}
/* La casella on s'és amb les fletxes: una vora prima, que no sembli que s'està editant. */
.compres-taula--comp td.comp-preu--activa{outline:1px solid var(--brand-orange); outline-offset:-1px}
/* **El rosa va al preu d'un concepte amb descomposició**, com a la graella; els imports, en tinta normal. */
.compres-taula--comp td.comp-preu-desc{color:var(--price-decomposed); font-weight:var(--fw-bold)}
/* En edició, el mateix quadre que a la graella: ni vora blava ni canvi de mida. */
.compres-taula .comp-editor{position:static; width:100%; height:100%; box-sizing:border-box; display:block}
.compres-taula td.comp-preu--editant{padding:0; background:var(--c-edit-bg)}
/* El tros triat d'una columna de preus (Josep, 24/09/2026): el blau de la selecció —què has triat—, i
   el cursor taronja a sobre —on ets—, com a la graella (sistema OBRIMA, DataGrid). Va després de les
   caselles buides i plenes perquè el fons de la selecció hi mani. */
.compres-taula--comp td.comp-preu--triada{background:var(--c-accent-weak)}
/* Les ratlles dels grups baixen de la capçalera fins a l'última fila (Josep, 26/09/2026). Van a la
   columna (`<col>`), no a cada casella, i així passen també per les files de total i de desviació. */
.compres-taula--comp col.comp-c-grup{border-left:2px solid var(--rule-grid)}
/* L'adjudicatari (artboard 12): el seu grup en taronja, la línia `brand-orange-soft` i el to lleuger a les
   cel·les que no són per escriure. */
.compres-taula--comp col.comp-c-adj{border-left-color:var(--brand-orange-soft)}
.compres-taula--comp th.comp-adj{background:var(--surface-item); color:var(--brand-orange-ink)}
.compres-taula--comp td.comp-adj:not(.comp-preu--edit):not(.comp-preu--triada){background:var(--band-active-cell)}
/* Els preus de venda i d'objectiu es trien i es copien, però no s'escriuen: sense el verd d'«espera
   preu» ni el cursor de text. */
.compres-taula--comp td.comp-preu-pres{cursor:default}
/* El nom del proveïdor i el seu *Precio* trien la columna sencera: que es vegi que s'hi pot clicar. */
.compres-taula--comp th[data-comp-col]{cursor:pointer}
/* L'adjudicació (P8, 19). L'adjudicatari, amb ✓ i en negreta; els altres, apagats. Les caselles que ja
   no es poden escriure perden el verd d'«espera preu»: el lot està tancat. */
.compres-taula--comp td.comp-preu--tancat{background:var(--c-paper); cursor:default}
.comp-dins{color:var(--c-text-faint); font-size:var(--fs-status)}
/* Les línies extres (P8, 20): la marca «Extra» al codi, i el — on no hi ha venda ni objectiu. */
.comp-extra__codi{color:var(--c-text-dim); font-weight:var(--fw-normal)}
.comp-extra__sense{color:var(--c-text-faint)}
.compres-taula--comp td.comp-extra__camp{cursor:text}
.compres-taula--comp td.comp-extra__camp:hover{background:var(--surface-muted)}
/* La fila per escriure una extra nova no és una línia del lot (Josep, 25/09/2026): gris clar, cursiva, un +
   al davant i sense la ratlla de sota. */
.compres-taula--comp .comp-extra-nova th,.compres-taula--comp .comp-extra-nova td{border-bottom:0}
.comp-extra__nova{color:var(--c-text-faint); font-style:italic; font-weight:var(--fw-normal)}
.comp-extra__nova::before{content:"+ "; font-style:normal}
.compres-taula--comp td.comp-extra__camp:hover .comp-extra__nova{color:var(--c-text-dim)}
.compres__accions{white-space:nowrap}
.compres__boto{height:20px; padding:0 var(--sp-3); margin-right:var(--sp-2); font-size:var(--fs-status)}
.compres__adjudicat{color:var(--state-positive); font-weight:var(--fw-bold); margin-right:var(--sp-3); font-size:var(--fs-status)}
.lots-adj--si{color:var(--c-text)}
.lots-adj__caixa{display:flex; gap:var(--sp-3); align-items:baseline; min-width:0}
.lots-adj__prov{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--fw-bold); color:var(--state-positive)}
.lots-adj__import{flex:0 0 auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.lots-adj__pendents{color:var(--c-edit-border); font-weight:var(--fw-bold)}
.lots-data{color:var(--c-text-dim); font-family:var(--font-mono)}
/* El quadre per adjudicar. */
.adj{max-width:520px}
.adj__cos{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3) 0}
.adj__cos p, .adj__cos ul{margin:0}
.adj__cos ul{padding-left:var(--sp-6); color:var(--c-text-dim)}
.adj__prov{font-weight:var(--fw-bold); font-size:14px}
.adj__xifres{border-collapse:collapse}
.adj__xifres th{text-align:left; font-weight:var(--fw-normal); color:var(--c-text-dim); padding:2px var(--sp-5) 2px 0}
.adj__xifres td{padding:2px 0}
.adj__nota{color:var(--c-text-dim)}
.adj__nota--avis{color:var(--c-edit-border)}
.compres-taula--comp th[data-comp-col]:hover{color:var(--c-text)}
.compres-taula__desviacio th{color:var(--c-text-dim)}
.comp-desv{white-space:nowrap}
.comp-desv--be{color:var(--c-gain); font-weight:var(--fw-bold)}
.comp-desv--mal{color:var(--c-loss); font-weight:var(--fw-bold)}
.compres-taula--comp input{width:100%; text-align:right}
.compres-lots__suministros:focus-visible{outline:2px solid var(--c-accent); outline-offset:-2px}

/* **Els capítols del lot, com a la graella** (Josep, 26/09/2026): el primer nivell en `surface-chapter` amb la
   barra de 4 px `brand-orange`; els següents en `surface-item` amb `brand-orange-soft`; les línies, la barra
   suau. El text es queda fix a l'esquerra quan el comparatiu es desplaça de costat. */
.compres-taula__cap th{font-weight:var(--fw-bold); color:var(--ink); padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.compres-taula__cap.comp-cap--0 th{background:var(--surface-chapter); box-shadow:inset 4px 0 0 var(--brand-orange)}
.compres-taula__cap.comp-cap--n th{background:var(--surface-item); box-shadow:inset 4px 0 0 var(--brand-orange-soft)}
.comp-cap__text{position:sticky; left:var(--sp-3); display:inline-flex; align-items:center; gap:var(--sp-2)}
/* Sense `overflow:hidden` a la casella: si no, el text no es pot quedar fix. */
.compres-taula--comp .compres-taula__cap th,.compres-taula--comp .compres-taula__bloc th{overflow:visible}
.compres-taula__bloc th{color:var(--ink-muted); font-weight:var(--fw-bold); font-size:var(--fs-status); padding-top:var(--sp-3)}
.compres-taula--comp tbody tr.comp-linia{background:var(--c-paper)}
.compres-taula--comp tr.comp-linia > th.cf0{box-shadow:inset 4px 0 0 var(--brand-orange-soft); padding-left:26px}
/* Les tres primeres columnes, fixes en desplaçar-se de costat: a partir de quatre proveïdors no hi caben. */
.compres-taula--comp .cf0,.compres-taula--comp .cf1,.compres-taula--comp .cf2{position:sticky; z-index:1}
.compres-taula--comp .cf0{left:0}
.compres-taula--comp .cf1{left:var(--cw0)}
.compres-taula--comp .cf2{left:calc(var(--cw0) + var(--cw1))}
.compres-taula--comp tbody .cf0,.compres-taula--comp tbody .cf1,.compres-taula--comp tbody .cf2{background-color:inherit}
.compres-taula--comp thead .cf0,.compres-taula--comp thead .cf1,.compres-taula--comp thead .cf2{z-index:4}
.compres-taula--comp tfoot .cf0{z-index:3}
/* **El bloc de totals, el més llegible de la pantalla** (Josep, 26/09/2026): línia de 2 px a sobre, imports en
   negreta i les desviacions en verd o vermell. */
.compres-taula__total th,.compres-taula__total td{font-weight:var(--fw-bold)}
.compres-taula__desviacio th{color:var(--ink-secondary)}
/* La desviació sobre el pressupost, més fluixa: la que mana per comprar és la de l'objectiu (Josep, 23/09 i
   27/09/2026). */
.compres-taula__desviacio--suau th,.compres-taula__desviacio--suau .comp-desv{opacity:.6; font-weight:var(--fw-normal)}
/* El total i les desviacions, fixos a baix de la finestra (Josep, 25/09/2026): en un lot llarg es veuen
   sense baixar. Com la capçalera a dalt; la ratlla de sobre va amb ombra perquè la vora no viatja. */
.compres-taula--comp tfoot{position:sticky; bottom:0; z-index:2}
.compres-taula--comp tfoot tr,.compres-taula--comp tfoot th,.compres-taula--comp tfoot td{background:var(--surface-muted); padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.compres-taula--comp tfoot td.comp-adj{background:var(--band-active-cell)}
.compres-taula--comp tfoot .compres-taula__total > *{border-top:0; box-shadow:inset 0 2px 0 var(--border-strong)}
/* La fila on es deixaran anar els proveïdors: dos senyals, fons i vora (invariant 11). */
.compres-taula__desti{background:var(--c-accent-weak); box-shadow:inset 0 0 0 2px var(--c-accent)}
/* La fletxa de la casella *Lote*: obre el desplegable amb el ratolí, com a Excel. */
.lot-fletxa{position:absolute; z-index:9; width:14px; height:18px; padding:0; line-height:1;
            font-size:10px; color:var(--c-text-dim); background:var(--c-paper);
            border:1px solid var(--c-rule); border-radius:var(--radius-control); cursor:pointer}
.lot-fletxa:hover{background:var(--c-surface-head); color:var(--c-text)}
.compres-taula--lots{table-layout:fixed}
.compres-taula--lots th,.compres-taula--lots td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.compres-taula--lots col.lots-c-num{width:34px}
.compres-taula--lots col.lots-c-nom{width:200px}
.compres-taula--lots col.lots-c-data{width:110px}
/* L'adjudicació: el proveïdor i l'import. El nom es talla; l'import, mai. */
.compres-taula--lots col.lots-c-adj{width:250px}
.compres-taula--lots td[data-lot-camp],.compres-taula--lots th[data-lot-camp]{cursor:text}
.compres-taula__nova th,.compres-taula__nova td{color:var(--c-text-dim)}
.compres-lots__llista:focus-visible{outline:2px solid var(--c-accent); outline-offset:-2px}
.compres-taula--prov{table-layout:fixed}
.compres-taula--prov tbody tr{cursor:grab}
.compres-taula--prov th{overflow:hidden; text-overflow:ellipsis}
/* Un proveïdor deshabilitat es pot fer servir al comparatiu, però es diu (Josep, 25/09/2026). */
.prov-deshab{margin-left:var(--sp-2); padding:0 5px; font-size:var(--fs-status); font-weight:var(--fw-normal);
             color:var(--c-warn-text); background:var(--c-warn-bg); border:1px solid var(--c-warn-text); border-radius:var(--radius-sm)}
.compres-taula__num{width:34px; text-align:right; color:var(--c-text-dim); font-family:var(--font-mono); cursor:pointer}
.compres-taula__lloc{width:16%; color:var(--c-text-dim); overflow:hidden; text-overflow:ellipsis}

/* Les dades del proveïdor que caben segons l'amplada de la columna. */
.prov-c-codi{width:110px; font-family:var(--font-mono); color:var(--c-text-dim)}
.prov-c-contacte{width:15%; color:var(--c-text-dim)}
.prov-c-tel{width:96px; font-family:var(--font-mono); color:var(--c-text-dim)}
.prov-c-correu{width:20%; color:var(--c-text-dim)}
.compres-proveidors:not(.compres-proveidors--mitja) .prov-c-codi,
.compres-proveidors:not(.compres-proveidors--mitja) .prov-c-tel,
.compres-proveidors:not(.compres-proveidors--ampla) .prov-c-contacte,
.compres-proveidors:not(.compres-proveidors--ampla) .prov-c-correu{display:none}

/* Mentre s'arrossega una nansa, el cursor no canvia i no es tria text per accident. */
body.arrossegant-v,body.arrossegant-v *{cursor:col-resize !important; user-select:none}
body.arrossegant-h,body.arrossegant-h *{cursor:row-resize !important; user-select:none}
.compres__treure{width:20px; height:18px; color:var(--c-text-dim); background:none; border:0; cursor:pointer; border-radius:var(--radius-control)}
.compres__treure:hover{background:var(--c-surface-head); color:var(--c-loss)}

.compres-proveidors__eines{flex:0 0 auto; display:flex; flex-direction:column; gap:var(--sp-2);
                           padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--c-rule)}
.cerca-prov{font:inherit; font-size:var(--fs-grid); height:24px; padding:0 var(--sp-3);
            border:1px solid var(--c-rule); border-radius:var(--radius-control); background:var(--c-paper); color:var(--c-text)}
.cerca-prov:focus{outline:2px solid var(--c-accent); outline-offset:0}
.compres-proveidors__filtre{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-status); color:var(--c-text-dim)}

/* La finestra de proveïdor nou: la mateixa capsa que el resum, amb els camps en dues columnes. */
.prov-nou__camps{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-3) var(--sp-5)}
.prov-nou__camp{display:flex; flex-direction:column; gap:2px; font-size:var(--fs-grid)}
.prov-nou__camp--ample{grid-column:1 / -1}
.prov-nou__camp span{color:var(--c-text-dim)}
.prov-nou__camp input{font:inherit; font-size:var(--fs-grid); height:26px; padding:0 var(--sp-3);
                      border:1px solid var(--c-rule); border-radius:var(--radius-control);
                      background:var(--c-paper); color:var(--c-text)}
.prov-nou__camp input:focus{outline:2px solid var(--c-accent); outline-offset:0}
.prov-nou__nota{margin:var(--sp-3) 0 0; color:var(--c-loss); font-weight:var(--fw-bold); font-size:var(--fs-grid)}
.prov-nou__nota--avis{color:var(--c-warn-text); font-weight:var(--fw-normal); max-width:520px}

/* Mediciones i Texto com a pestanyes: només a compres, per no menjar espai. */
.amidaments__pestanyes{flex:0 0 auto; display:flex; gap:2px; padding:0 var(--sp-3); background:var(--c-surface);
                       border-top:1px solid var(--c-rule)}
.amidaments__pestanyes[hidden]{display:none}
.pestanya-baix{height:24px; padding:0 var(--sp-4); font:inherit; font-size:var(--fs-grid); color:var(--c-text-dim);
               background:none; border:0; border-bottom:2px solid transparent; cursor:pointer}
.pestanya-baix--activa{color:var(--c-text); font-weight:var(--fw-bold); border-bottom-color:var(--c-flux)}
.amidaments[data-pestanya="mediciones"] .m-text,
.amidaments[data-pestanya="mediciones"] .amidaments__nansa-v{display:none}
.amidaments[data-pestanya="texto"] .m-taula,
.amidaments[data-pestanya="texto"] .amidaments__nansa-v{display:none}
.amidaments[data-pestanya="texto"] .m-text{flex:1 1 auto}
/* A compres, el títol de la finestra d'amidaments no cal: ja ho diu la pestanya. */
.app[data-vista="compres"] .m-titol,
.app[data-vista="compres"] .m-text-titol{display:none}

.desplacament{flex:1 1 auto; overflow:auto; position:relative; outline:none}
.mida{position:relative; width:100%}
.files{position:absolute; top:0; left:0; right:0; bottom:0}
/* La primera fila —la de l'obra, amb els totals— es queda a dalt en baixar (Josep, 27/09/2026). */
.fila-fixa{position:sticky; top:0; z-index:3; height:var(--row-h)}
.fila-fixa > .fila{box-shadow:0 1px 0 var(--c-rule-strong)}
.fila{display:flex; align-items:stretch; position:absolute; left:0; right:0}
.fila__num{flex:0 0 46px; line-height:calc(var(--row-h) - 1px); font-size:var(--fs-status);
           cursor:pointer; padding-right:var(--sp-2)}
.fila__num.on{background:var(--c-accent); color:var(--c-paper)}
.cel{line-height:calc(var(--row-h) - 1px); user-select:none}
.cel--codi{display:flex; align-items:center; gap:var(--sp-2)}
.cel--num{text-align:right}
/* Marca del lloc on cauran les files que s'arrosseguen: una linia, no una ombra. */
.fila.desti{border-top:2px solid var(--c-accent)}
/* On caurà una partida arrossegada del BEDEC (P6, pas 5): dins d'un capítol, o sota d'una partida. */
.fila.desti-dins{background:var(--c-accent-weak)}
.fila.desti-sota{border-bottom:2px solid var(--c-accent)}
.fila.nova{background:var(--c-edit-bg); border-top:1px solid var(--c-edit-border); border-bottom:1px solid var(--c-edit-border)}
.pista{color:var(--c-text-faint); font-style:italic}
/* La fletxa del desplegable. **Dibuixada, no escrita** (Josep, 26/09/2026): un SVG de 12 px amb
   `stroke: currentColor`. Amb un caràcter de lletra depenia de quina lletra tingués el sistema, i
   es veia com un punt. L'espai es reserva sempre, tingui fletxa o no, perquè el codi no balli.
   El color és el de la navegació. El cicle (↻) sí que és un caràcter: no és navegació, és un avís. */
.plec{flex:0 0 12px; display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; color:var(--c-plegar); font-size:9px;
      font-family:"Segoe UI Symbol", "Segoe UI", system-ui, sans-serif}
.plec:hover{color:var(--c-text)}
.plec svg{display:block}
.editor{position:absolute; z-index:5; font:inherit; font-size:var(--fs-grid); font-variant-numeric:tabular-nums;
        height:var(--row-h); border:0; outline:2px solid var(--c-edit-border); outline-offset:-2px;
        padding:0 var(--cell-px); margin:0; background:var(--c-edit-bg)}
.editor.num{text-align:right}


/* ------------------------------------------------------------
   ESPERANT EL SERVIDOR (Josep, 20/09/2026)
   -------------------------------------------------------------
   Baixar una partida del BEDEC triga entre 7 i 10 segons i el
   missatge de la barra de sota no es veu prou. Un rètol al mig
   de la graella, amb una roda que gira. És l'ÚNIC element
   animat de la pantalla, i sempre n'hi ha un de sol: les files
   no s'animen mai.
   ------------------------------------------------------------ */

.esperant {
  position: absolute;
  z-index: 20;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-paper);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-control);
  box-shadow: 0 4px 14px var(--c-ombra-menu);
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.esperant__roda {
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-accent-weak);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: esperant-gira 0.8s linear infinite;
}

@keyframes esperant-gira {
  to { transform: rotate(360deg); }
}

/* Qui té les animacions apagades al sistema veu el rètol quiet, no res que es mogui. */
@media (prefers-reduced-motion: reduce) {
  .esperant__roda { animation: none; }
}


/* ------------------------------------------------------------
   GRUPS DE COLUMNES (patch 7; Josep, 20/09/2026)
   -------------------------------------------------------------
   Vint columnes pintades igual no es llegeixen. Tres dispositius:
   la capçalera de grup, el tenyit de columna a tota l'alçada i un
   separador de 2 px al final de cada grup. El color del grup es
   passa amb `currentColor`, perquè la línia i el text no puguin
   divergir mai.
   ------------------------------------------------------------ */

.graella__grup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-right: 14px;
  /* La mateixa franja reservada que les files i la capçalera. */
  border-left: var(--nat-w) solid transparent;
  background: var(--c-surface);
  /* Segueix el desplaçament de costat de la graella, com la capçalera. */
  overflow: hidden;
}

.graella__grup-cel {
  height: var(--grup-h);
  line-height: var(--grup-h);
  padding: 0 var(--cell-px);
  background: var(--c-surface);
  color: var(--c-text-dim);
  font-size: var(--grup-fs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--c-rule-hair);
  user-select: none;
}

/* Les bandes de grup (Josep, 26/09/2026, artboard 11). **Els grups de període o d'import, en neutre**, tots
   iguals: els separa la línia i el títol, no el color. **Només porten color els que signifiquen un
   resultat**: A origen (el certificat, en verd) i Desviación. La certificació que s'està fent, en taronja. */
.grup--neutre     { color: var(--ink-secondary); background: var(--surface-muted); }
.grup--certificat { color: var(--state-positive); background: var(--band-certified); }
.grup--desviacio  { color: var(--brand-orange-ink); background: var(--band-deviation); }
/* La certificació que s'està fent, dins del seu grup: el punt taronja i el text en negreta a la capçalera. */
.graella__head-cel.graella__head-cel--activa { color: var(--brand-orange-ink); font-weight: var(--fw-bold); }
.graella__head-cel--activa::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
  border-radius: 999px; background: var(--brand-orange);
}

/* La línia que obre cada grup, a la seva primera columna, capçaleres incloses: 2 px de `rule-grid`, o del
   color del grup si en té. */
.cel--ini-grup,
.graella__head-cel.cel--ini-grup,
.graella__grup-cel.cel--ini-grup { border-left: 2px solid var(--rule-grid); }
.cel--ini-grup.cel--ini-cert,
.graella__head-cel.cel--ini-cert,
.graella__grup-cel.cel--ini-cert { border-left-color: var(--band-certified-rule); }

/* El tenyit, **només a les files de contingut**: les d'estructura conserven la seva banda de
   nivell. La jerarquia de la FILA mana sobre la del GRUP DE COLUMNES; si no, un capítol es
   trencaria en cinc trossos de color i perdríem la jerarquia del patch 6. */
/* La columna de la certificació que s'està fent: un to taronja lleuger, també només a les de contingut. */
.fila--partida .cel--grup-act,
.fila--descompost .cel--grup-act,
.fila--recurs .cel--grup-act { background: var(--c-grup-act); }


/* ------------------------------------------------------------
   PRECEDÈNCIA (patch 6; Josep, 20/09/2026)
   -------------------------------------------------------------
   Amb fons a l'estructura i al bloc de descompost, la selecció,
   l'edició i el bloqueig han de guanyar-los a tots. Van al final
   del fitxer, i amb `.fila` al davant perquè tinguin la mateixa
   especificitat que les bandes (`.fila--capitol .cel`) i, sent
   posteriors, manin. Si no, seleccionar una fila de capítol no
   es veuria, ni es veuria el fons càlid del codi d'una partida.
   ------------------------------------------------------------ */

/* Totes amb la mateixa especificitat (0,3,0) i en aquest ordre: la fila
   activa, el bloqueig, la selecció i, per damunt de tot, l'edició. Un
   bloquejat seleccionat es veu triat; un bloquejat en edició, en edició.
   Amb el patch 7 hi ha tres capes de fons competint —banda de nivell,
   tenyit de grup i estat de la cel·la—, i l'ordre és:
       edició > selecció > bloqueig > tenyit de grup > nivell.
   El tenyit (0,2,0) ja perd contra tot això; la fila activa hi mana
   perquè és on tens el cursor. */
/* **El cursor no és jerarquia** (sistema OBRIMA): la fila on ets porta una vora fina i un vel molt
   clar; la barra de 4 px de l'esquerra continua dient de quin nivell és la fila.
   El vel no es pinta cel·la a cel·la: si ho fes, taparia el fons del nivell i s'aturaria a l'última
   columna, i la fila quedava una taca a trossos (Josep, 26/09/2026). Va tot en una capa, a
   `.fila--activa::after`, que cobreix la fila sencera. */
/* La capa del cursor, per damunt de les cel·les: el vel de la selecció i, a sobre, la vora.
   **La vora, en taronja de marca**; el vel, en `state-info`. Els dos colors diuen coses
   diferents: **taronja = on ets, blau = què has triat** (Josep, 26/09/2026). */
.fila--activa::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Per damunt de les columnes fixes (Código, Ud, Resumen), que porten el seu fons i van a la capa 2: sense
     això la vora i el vel s'aturaven on comencen (Josep, 29/09/2026, prova de P10). Per sota de la fila 1 fixa. */
  z-index: 2;
  pointer-events: none;
  background: var(--c-accent-row);
  box-shadow: inset 0 1px 0 var(--brand-orange), inset 0 -1px 0 var(--brand-orange);
}
.fila .cel.val--anulat               { background: var(--c-val-cancelled-bg); }
.fila .cel.val--bloquejat            { background: var(--c-val-locked-bg); }
.fila .cel.cel--seleccionada         { background: var(--c-accent-weak); }
.fila .cel.cel--editant              { background: var(--c-edit-bg); }

/* La cel·la de naturalesa conserva la seva rajola sempre: és identitat
   del concepte, no estat de la fila. Per això la fila activa no la toca. */

/* ---- La factura a client (P9, pas 8) ---- */
.factura__col { display: flex; flex-direction: column; gap: var(--sp-5); }
.factura__client { font-size: var(--fs-grid); line-height: 1.5; }
.factura__client > div:first-child { font-weight: var(--fw-bold); }
.factura__camps { display: grid; grid-template-columns: 170px 1fr; gap: var(--sp-3) var(--sp-5); }
.factura__nota { margin: var(--sp-2) 0 0; font-size: var(--fs-status); color: var(--c-text-dim); }
.factura__fila { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-grid); }
.factura__camp {
  width: 180px; height: 26px; padding: 0 var(--sp-3); font: inherit; font-family: var(--font-mono); font-size: var(--fs-grid);
  color: var(--c-text); background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--radius-control);
}
.factura__camp:focus { outline: 2px solid var(--c-accent); outline-offset: 0; }
.factura__camp:disabled { background: var(--c-surface); color: var(--c-text-dim); }
.factura__pdf { color: var(--c-accent); }
.factura__xip { margin-left: var(--sp-4); }
.factura__botons { display: flex; gap: var(--sp-3); }
.factura__anullades s { color: var(--c-text-dim); }
.factura__nota--avis { color: var(--c-warn-text); font-weight: var(--fw-bold); }
/* La validació de la factura a client (docs/210): cada nivell, fet (en negreta i amb marca) o pendent. */
.factura__nivells { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-grid); }
.factura__nivell { padding-left: 18px; position: relative; color: var(--c-text-dim); }
.factura__nivell::before { content: '○'; position: absolute; left: 0; }
.factura__nivell--fet { color: var(--c-text); }
.factura__nivell--fet::before { content: '✓'; color: var(--c-accent); font-weight: var(--fw-bold); }
.factura .segmentat button:disabled { cursor: default; }
.factura .prov-nou__camp input:disabled { background: var(--c-surface); color: var(--c-text-dim); }

/* Un quadre de text amb negreta i vermell (les clàusules: Josep, 08/10/2026), com el del text llarg. */
.ric{display:flex; flex-direction:column; gap:3px; width:100%}
.ric-eines{display:flex; gap:2px}
.ric-eines button{font:inherit; min-width:24px; padding:0 6px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); cursor:pointer}
.ric-cos{padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card);
  color:var(--ink); font-size:var(--fs-grid); line-height:1.45; white-space:pre-wrap; overflow:auto; max-height:420px; text-align:left}
.ric-cos:focus{outline:2px solid var(--c-accent); outline-offset:-1px}
.ric-cos[contenteditable="false"]{background:var(--surface-muted); color:var(--c-text-dim)}

/* ---- Dues obres en dues pestanyes (docs/230): triar l'obra de consulta, i el botó quan n'hi ha una d'oberta ---- */
.boto.boto--consultant { border-color: var(--c-accent); color: var(--c-accent); font-weight: var(--fw-bold); }
.consulta-triar { width: min(640px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--sp-3); }
.consulta-triar__nota { margin: 0; font-size: var(--fs-status); color: var(--c-text-dim); }
.consulta-triar__cerca {
  height: 30px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-grid);
  color: var(--c-text); background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--radius-control);
}
.consulta-triar__cerca:focus { outline: 2px solid var(--c-accent); outline-offset: 0; }
.consulta-triar__llista { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; border-top: 1px solid var(--c-rule); }
.consulta-triar__fila {
  display: flex; align-items: baseline; gap: var(--sp-3); text-align: left; font: inherit; font-size: var(--fs-grid);
  padding: var(--sp-2) var(--sp-3); background: none; border: 0; border-bottom: 1px solid var(--c-rule); color: var(--c-text); cursor: pointer;
}
.consulta-triar__fila:hover, .consulta-triar__fila:focus { background: var(--c-accent-weak); outline: none; }
.consulta-triar__fila b { font-family: var(--font-mono); min-width: 7em; }
.consulta-triar__fila small { color: var(--c-text-dim); margin-left: auto; }
.fila__num[draggable="true"] { cursor: grab; }

/* ---- Imprimir: la finestra prèvia dels informes (docs/240) ---- */
.informe-caixa { width: min(1180px, calc(100vw - 32px)); height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.informe-cos { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-5); }
.informe-opcions { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-grid); padding-right: var(--sp-2); }
.informe-opcions fieldset { border: 0; border-top: 1px solid var(--c-rule); margin: 0; padding: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.informe-opcions fieldset:disabled { opacity: .45; }
.informe-opcions legend { font-size: var(--fs-status); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-dim); padding-right: var(--sp-2); }
.informe-opcio { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.informe-camp { display: flex; flex-direction: column; gap: 2px; color: var(--c-text-dim); }
.informe-camp input { height: 26px; padding: 0 var(--sp-2); font: inherit; color: var(--c-text); background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--radius-control); }
.informe-camp input[type=number] { width: 80px; }
.informe-vista { min-height: 0; background: var(--c-surface); border: 1px solid var(--c-rule); display: flex; align-items: center; justify-content: center; }
.informe-buit { color: var(--c-text-dim); font-size: var(--fs-grid); }
.informe-pdf { width: 100%; height: 100%; border: 0; }
.informe-botons { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); }
.informe-estat { flex: 1 1 auto; color: var(--c-text-dim); font-size: var(--fs-status); }
.informe-arbre { max-height: 240px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--c-rule); border-radius: var(--radius-control); padding: var(--sp-2); background: var(--c-paper); }
.informe-arbre[hidden] { display: none; }
.informe-arbre__fila { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; line-height: 1.7; }
.informe-arbre__fila b { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.informe-arbre__fila span { overflow: hidden; text-overflow: ellipsis; color: var(--c-text-dim); }
.informe-arbre__nota { margin: var(--sp-2) 0 0; font-size: var(--fs-status); color: var(--c-text-dim); }


/* Les reimputacions d'un document tancat (docs/180, 9.13): qui, quan, d'on a on, a sota de les línies. */
.reimp-llista { margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-accent); background: var(--c-surface-head); font-size: var(--fs-status); }
.reimp-llista__titol { display: block; font-weight: var(--fw-bold); color: var(--c-text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.reimp-llista ul { margin: 0; padding-left: var(--sp-4); }

/* Els indirectes com el TCQ (docs/240, 13.5): una casella a sota del %, al resum. */
.resum-obra__ci-tcq { font-size: var(--fs-status); color: var(--c-text-dim); padding-top: 0; }
.resum-obra__ci-tcq label { display: inline-flex; gap: var(--sp-2); align-items: center; cursor: pointer; }