/* ============================================================= ERP OBRES — TOKENS DE DISSENY Únic lloc on es defineixen colors, mides i espaiats. Cap altre fitxer pot escriure un hex ni un px de color. ------------------------------------------------------------- PRINCIPI RECTOR El fons és blanc sempre. L'estructura (capítol / subcapítol / partida / descompost) es llegeix amb sagnat i pes tipogràfic. El color queda reservat per a informació que canvia: estat del valor, selecció, edició i desviació. ============================================================= */ :root { /* ============================================================= 0. OBRIMA — ELS TOKENS DEL SISTEMA DE DISSENY Copiats tal com són del sistema (project/tokens.json). Aquests manen: la resta del fitxer són els noms que fa servir el codi, apuntats aquí. No s'hi toca cap valor. ============================================================= */ --surface-page: #f4f1ea; /* fons general. Ivori, mai blanc pur */ --surface-card: #ffffff; /* taules, targetes, camps i menús */ --surface-muted: #faf8f3; /* capçaleres de columna i peus de taula */ --surface-chapter: #f4efe6; /* fila de capítol obert */ --surface-item: #fdf6f0; /* files de partida i xip d'estat */ --border-strong: #ddd7c9; /* vora de contenidors, botons i camps */ --border-soft: #f0ece2; /* separadors entre files */ --ink: #171a1c; /* text principal */ --ink-secondary: #45484a; /* text secundari, descompostos */ --ink-muted: #6b6b66; /* capçaleres, unitats, suport */ --brand-orange: #ee5a0e; /* marca i navegació. Mai en text de dades */ --brand-orange-soft: #f6c8a8; /* barra de les partides, vora del xip */ --brand-orange-ink: #8f4a1e; /* text sobre surface-item */ --price-decomposed: #a8175f; /* preus amb descomposició */ --state-positive: #15704a; /* per sota de l'objectiu */ --state-negative: #b3261e; /* per sobre de l'objectiu */ --state-info: #1c5a94; /* informació neutra */ --band-budget: #eef3f8; /* banda del grup de pressupost */ --band-target: #f2f0e7; /* banda del grup d'objectiu */ --band-deviation: #f6efe9; /* banda del grup de desviació */ /* A origen: el que portes certificat. El verd ja vol dir "executat i dins del previst" (Josep, 26/09/2026). */ --band-certified: #edf3ef; /* banda del grup A ORIGEN */ --band-certified-rule: #c4d9cc; /* la seva línia vertical; el text, state-positive */ /* La certificació que s'està fent: la capçalera en surface-item i la línia en brand-orange-soft. */ --band-active-cell: #fdf1e7; /* el to taronja lleuger de les seves cel·les */ /* On s'entra un valor d'algú altre (el preu de l'oferta): groc molt suau, amb subratllat. El verd ja vol dir «per sota de l'objectiu» (Josep, 26/09/2026). */ --surface-editable: #fffbe9; --surface-editable-rule: #e8dcae; /* La signatura dibuixada (docs/150, 8.5): tinta blava de bolígraf, sobre paper blanc. */ --sig-tinta: #142873; --sig-paper: #ffffff; --rule-grid: #e0dacd; /* línia entre grups i barra del descompost */ --radius-sm: 8px; /* botons, camps, xips i etiquetes */ /* ---------- 0-bis. FORA DEL SISTEMA ---------- El que el producte necessita i el sistema encara no cobreix. Ho fem amb el mateix llenguatge i està apuntat per passar-ho al disseny: selecció i focus, cel·la en edició, casella que espera preu, valor bloquejat i anul·lat, i els quatre colors de flux. */ --select: #1c5a94; /* = state-info: selecció i focus */ --select-weak: #dfe8f1; /* rang seleccionat */ /* La fila activa: un vel translúcid de `state-info`, no un color opac (Josep, 26/09/2026). Ha de tapar tota l'amplada de la fila i deixar-hi veure a sota el fons del nivell, la banda del grup i el cursor taronja. */ --select-row: rgba(28, 90, 148, 0.07); --select-head: #d8e4ee; /* capçalera de la columna activa */ /* ---------- 1. SUPERFÍCIES ---------- */ --c-paper: var(--surface-card); --c-surface: var(--surface-muted); /* barres d'eines i d'estat */ --c-surface-head: var(--surface-muted); /* capçalera de columnes */ --c-surface-sunken: var(--surface-page); /* panells secundaris (mediciones) */ /* ---------- 2. LÍNIES ---------- Tres pesos, i prou. Més pesos = soroll. */ --c-rule-hair: var(--border-soft); /* separador entre files */ --c-rule: var(--rule-grid); /* separador entre columnes */ --c-rule-strong: var(--border-strong); /* tancament de capçalera i de capítol */ /* ---------- 3. TEXT ---------- */ --c-text: var(--ink); --c-text-dim: var(--ink-secondary); /* unitats, comentaris, ajudes */ --c-text-faint: var(--ink-muted); /* numeració de fila, plegadors */ /* ---------- 4. ESTATS DEL VALOR ---------- Els quatre fluxos (Pressupost, Objectiu, Certificació, Cost real) comparteixen aquesta escala. És el codi de color que l'usuari de Presto ja té après: no l'inventem, el depurem. */ --c-val-written: var(--ink); /* escrit per l'usuari */ --c-val-calc: var(--price-decomposed);/* calculat: ve d'una descomposició */ --c-val-locked: var(--state-negative); /* bloquejat */ --c-val-locked-bg: #FCEBE9; /* fons de cel·la bloquejada */ --c-val-cancelled-bg: #E4E6E8; /* fons de cel·la anul·lada, com el gris de Presto */ --c-val-cancelled: var(--ink-muted); /* anul·lat — amb ratllat */ /* ---------- 5. SELECCIÓ I FOCUS ---------- Un sol accent a tot el producte. */ --c-accent: var(--select); --c-accent-weak: var(--select-weak); /* rang seleccionat */ --c-accent-row: var(--select-row); /* fila activa */ --c-accent-head: var(--select-head); /* capçalera de la columna activa */ /* ---------- 6. EDICIÓ ---------- */ --c-edit-bg: #FFF8DC; /* cel·la en edició */ --c-edit-border: #D9A400; /* ---------- 7. SEMÀNTICA ECONÒMICA ---------- Desviació objectiu/venda, marge, sobrecost. */ --c-gain: var(--state-positive); /* favorable */ --c-loss: var(--state-negative); /* desfavorable */ --c-warn-bg: #FFF4D6; --c-per-omplir: #E3F3E8; /* casella del comparatiu que espera el preu de l'industrial */ --c-plegar: var(--brand-orange); /* les fletxes de plegar: són navegació */ /* Josep, 25/09/2026: el rosa, als dos llocs —preus amb descomposició i imports—, com a Presto. És una desviació del sistema, que el reserva als preus; queda apuntada per passar-la al disseny. */ --c-import: var(--price-decomposed); --c-warn-text: #8A5A00; /* L'evolució de l'obra (P12-bis): els colors de les línies del gràfic de SQL Obras, que és el que l'obra coneix. El traç (discontinu, el projectat i el previst) i la llegenda en són el segon senyal (invariant 11). */ --c-evo-projectat: #C9A100; --c-evo-previst: #E07B00; --c-evo-certificat: #2F7FD8; --c-evo-facturat: #1E9E3A; --c-evo-cobrat: #2B2B2B; --c-evo-cost: #D23B2E; /* Què pot fer cada rol (P13): *Edita* amb el fons verd i la negreta; *Ve*, net; *No*, apagat. La paraula n'és l'altre senyal (invariant 11). */ --c-perm-edita-bg: #E2F1E7; --c-perm-edita: var(--state-positive); --c-perm-no: #9A9A94; /* ---------- 13. COLOR DE FLUX ---------- **Ja no n'hi ha quatre** (Josep, 26/09/2026): el subratllat de la pestanya, la marca de la columna del flux i la línia de dalt de la barra van tots amb el taronja de marca. El verd, la terracota i el lila se'n van: a quin flux ets ja ho diuen la pestanya activa i les columnes, i el taronja repetit és el que construeix la marca. Els quatre noms es queden perquè el codi en fa servir un per flux i així es veu d'una ullada que tots quatre són el mateix color. */ --c-flux-pressupost: var(--brand-orange); --c-flux-objectiu: var(--brand-orange); --c-flux-certificacio: var(--brand-orange); --c-flux-liquidacio: var(--brand-orange); /* ---------- 14. NATURALESA DEL CONCEPTE ---------- Franja de 4 px a l'esquerra de la fila. Només s'aplica a descompostos i recursos: en un capítol o una partida no significa res i no s'ha de pintar. */ --nat-w: 4px; /* Els quatre tons de naturalesa de P6 (el cercle, el triangle, les barres i el punt, i les seves rajoles) se'n van amb les formes: la naturalesa la diu ara una etiqueta de text, igual per a totes (Josep, 26/09/2026). Si algun dia tornen, són a docs/130-obrima-disseny.md. */ /* ---------- 15. ESTAT DE LÍNIA ---------- Estat documental de la línia, diferent de l'estat del valor. Va al text, no al fons. */ --c-linia-modificat: #9A6100; --c-linia-pendent: #6B7480; /* El fons del comentari i de l'estat: aquestes línies s'han de veure de lluny (Josep, 20/09/2026). Són els colors que tenien abans del sistema de disseny. */ --c-linia-modificat-fons: #D6F5D3; --c-linia-pendent-fons: #F9CFCF; /* ---------- 16. ORIGEN DE LA PARTIDA ---------- Contractual, modificada, addicional o suprimida: un estat de la partida dins d'un flux, no un tipus de fila (patch 3). */ --orig-w: 16px; /* amplada de la columna del glif */ --c-orig-mod: #9A6100; /* modificada — ambre 5,8:1 */ --c-orig-nova: #6B4FA8; /* addicional — lila 6,3:1 */ --c-orig-supr: #8A929B; /* suprimida — gris 3,2:1 */ /* ---------- 8. TIPOGRAFIA ---------- Les del sistema OBRIMA: Archivo per a la interfície i Space Grotesk només per al logotip. **Servides de casa** (src/estils/fonts.css): el programa s'ha de pintar igual sense internet. La monoespaiada es queda als codis i als números mentre no es demostri que Archivo amb `tabular-nums` els alinea igual de bé: està apuntat. */ --font-ui: Archivo, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-marca: "Space Grotesk", Archivo, system-ui, sans-serif; /* **Tota la interfície va amb Archivo** (sistema OBRIMA): els codis i els números també. Les columnes queden alineades amb `font-variant-numeric: tabular-nums`, que ja porta la graella. */ --font-mono: var(--font-ui); --fs-grid: 12px; /* graella */ /* Escala de cos per nivell de l'arbre. Tres mides, no més. */ --fs-arrel: 13px; --fs-capitol: 13px; --fs-partida: 12px; --fs-descompost: 11px; --fs-ui: 12px; /* botons, pestanyes */ --fs-status: 11px; /* barra d'estat */ --fs-title: 13px; /* nom d'obra */ --fs-total: 14px; /* les xifres del peu de totals d'una taula (Horas) */ --fw-normal: 400; --fw-medium: 500; /* subcapítol */ --fw-bold: 600; /* capítol i capçaleres */ /* ---------- 9. GEOMETRIA DE LA GRAELLA ---------- */ --row-h: 24px; /* densitat estàndard */ --row-h-dense: 21px; /* densitat compacta, commutable */ --head-h: 26px; --tecles-h: 22px; /* la barra de dreceres: una sola línia (patch 8) */ /* La finestra d'amidaments (patch 9): alçada i ample arrossegables, amb aquests mínims. Els mínims es repeteixen a graella.ts, que és qui limita l'arrossegament. */ --amid-h-min: 120px; /* alçada mínima desplegada */ --amid-h-def: 260px; /* alçada per defecte */ --amid-text-min: 220px; /* ample mínim de la columna del text */ --amid-taula-min: 380px; /* ample mínim de la taula de línies */ --nansa: 5px; /* el gruix de les nanses d'arrossegar */ --bar-h: 34px; /* barres d'eines */ --cap-obra-h: 56px; /* capçalera, fila 1: on soc (patch 10) */ --cap-eines-h: 40px; /* capçalera, fila 2: què faig */ --flux-linia: 3px; /* línia del flux actiu */ --cell-px: 6px; /* padding horitzontal de cel·la */ --indent: 16px; /* sagnat per nivell de l'arbre */ /* ---------- 10. ESPAIAT ---------- Escala de 4. No s'usa cap valor fora d'aquesta llista. */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; /* ---------- 11. CONTROLS ---------- Radi mínim i només on hi ha pocs elements. Mai a la graella. */ --radius-control: var(--radius-sm); /* botons, camps i segmentats */ --radius-panel: 0; /* ---------- 12. RENDIMENT ---------- Les transicions viuen aquí perquè es puguin apagar totes alhora. A la graella el valor ha de ser 0ms sempre. */ --t-control: 90ms; --t-grid: 0ms; /* ---------- 17. ICONES DE NATURALESA ---------- La columna de naturalesa, entre Código i Resumen (patch 4). */ --nat-etiqueta-w: 20px; /* l'etiqueta MO/MQ/MT/OT/% dins la casella d'unitat */ --nat-gap: 4px; /* entre l'etiqueta i la unitat */ /* ---------- 18. BANDES D'ESTRUCTURA ---------- Escala freda de tres tons, una sola família: fred és estructura, càlid és contingut (patch 6, 20/09/2026). La partida es queda blanca, amb un ancoratge càlid només a la cel·la del codi. */ /* La jerarquia, amb els fons d'OBRIMA: capítol, partida i descompost. El blau se'n va: el sistema no en té, i la jerarquia la marquen el fons, la barra lateral de 4 px i el sagnat. */ --c-lvl-0: var(--surface-chapter); /* arrel / obra */ --c-lvl-1: var(--surface-chapter); /* capítol */ --c-lvl-2: var(--surface-chapter); /* subcapítol i següents */ --c-cod-partida: var(--surface-item); /* ancoratge càlid al codi de partida */ --c-bloc-descompost: var(--surface-card); /* el descompost es queda net */ /* ---------- 20. GRUPS DE COLUMNES ---------- Cada quantitat al costat del seu import, amb capçalera de grup i tenyit de columna (patch 7, Josep, 20/09/2026). Els tenyits són molt pàl·lids a posta: han de guiar l'ull sense competir amb els estats del valor, i **el que separa és l'alternança** de grup tenyit i grup blanc, no cinc colors alhora. */ --grup-h: 22px; /* alçada de la capçalera de grup */ --grup-fs: 10.5px; --c-grup-pres: #F2F6FC; /* pressupost / actual */ /* Les tres bandes del sistema OBRIMA. El verd i el marró se'n van: el sistema en té tres, i cada grup de columnes n'agafa la que li toca pel que diu, no pel flux. */ --c-grup-obj: var(--band-target); /* objectiu (ja no es fa servir a les bandes) */ --c-grup-act: var(--band-active-cell); /* la certificació que s'està fent */ --c-grup-mod: var(--band-deviation); /* modificat */ --c-grup-pte: var(--band-deviation); /* pendent */ --c-grup-liq: var(--band-deviation); /* liquidació */ /* ---------- 21. VEL DELS PANELLS SOBREPOSATS ---------- L'ajuda de tecles (patch 8) es posa a sobre de la graella, sense amagar-la del tot: no s'ha de perdre de vista on eres. */ --c-vel: rgba(31, 35, 40, .32); /* ---------- 19. PROVISIONAL ---------- PROVISIONAL — pendent de decisió de disseny. Els colors que eren escrits fora dels tokens (encàrrec B, 18/09/2026), amb el valor exacte que tenien: cap arrodonit ni acostat a cap token existent. */ --c-ombra-menu: rgba(0,0,0,.14); /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-text: #1a1a1a; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-fons: #f6f6f4; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-capcalera: #2d3b2d; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-capcalera-enllac: #cfe0cf; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-vora: #ddd; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-vora-fila: #eee; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-text-dim: #555; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-apagat: #777; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-fons-cap: #f0f0ee; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-fila-obra: #eef5ee; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-avis-vora: #e0c060; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-mal-fons: #ffe8e8; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-mal-vora: #d08080; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-be-fons: #e8f5e8; /* PROVISIONAL — pendent de decisió de disseny */ --c-p2-be-vora: #80b080; /* PROVISIONAL — pendent de decisió de disseny */ } /* Densitat compacta: es commuta amb un atribut a l'arrel. Canvia una variable, no cent regles. */ :root[data-densitat="compacta"] { --row-h: var(--row-h-dense); --fs-grid: 11px; } /* Respecte per qui té el moviment reduït al sistema. */ @media (prefers-reduced-motion: reduce) { :root { --t-control: 0ms; } }