/*! * @constructora-garcia/ui — hoja única de estilos * Generada por scripts/build-css.mjs a partir del orden declarado en * styles.css. No editar a mano: los cambios van en tokens/*.css o en el orden * de styles.css, y se recompilan con `npm run build:css`. * * Importar UNA vez, en el layout raíz de la app: * import '@constructora-garcia/ui/styles.css'; */ /* ═══ tokens/fonts.css ══════════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Tipografía -------------------------------------------------------------------------- LA UI SIGUE SIN WEBFONTS. Cuerpo y datos usan el stack del sistema (`--font-sans`, `--font-mono`): render instantáneo, cero red, y una app que se siente parte del sistema operativo. Eso no cambia, y no conviene que cambie — es lo que sostiene la densidad que la gente en obra necesita. LO QUE SÍ CAMBIA: LA DISPLAY VIENE EMPAQUETADA. `--font-display` declaraba `'Century Gothic', 'Jost', 'Futura'` y en la práctica caía a `system-ui` en casi todas las máquinas, porque los equipos Windows de la empresa no tienen ninguna de las tres. O sea: los títulos ya decían querer una voz propia y terminaban con la fuente del sistema, igual que cualquier otro producto. Ahora Jost —el sustituto libre de Century Gothic, y el que la marca ya nombraba— viaja DENTRO de esta hoja, como data URI. POR QUÉ INCRUSTADA Y NO COMO ARCHIVO SUELTO. La decisión anterior sacó las webfonts por tres motivos, y el más serio era que fallaban en terreno sin señal, justo donde la app tiene que funcionar. Un archivo aparte —aunque sea del propio dominio— es una petición más que puede no llegar. Incrustada no: si esta hoja cargó, la tipografía está. Cero peticiones, cero dependencia de red, imposible que se caiga por su cuenta. Los otros dos motivos también quedan resueltos: no hay ida a Google Fonts, y Jost no es la familia que usa cualquiera — es la que la identidad de esta empresa ya declaraba. QUÉ PESA. 17,5 kB en woff2, subseteado a latín + acentos del español + la puntuación y las cifras que usa la marca, con el eje de peso 100-900 completo. Menos que el logo en PNG. LICENCIA. Jost, SIL Open Font License 1.1 — Copyright 2020 The Jost Project Authors. El texto completo está en `assets/fonts/OFL.txt`, y el .woff2 subseteado del que sale este data URI en `assets/fonts/`. ========================================================================== */ @font-face { font-family: 'Jost CG'; font-style: normal; /* Variable: un solo archivo cubre de 100 a 900 y evita las cuatro peticiones que costaría una familia estática. */ font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,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) format('woff2-variations'); } /* ========================================================================== LAS CIFRAS — IBM Plex Mono, y por qué esta va como ARCHIVO y no incrustada. `--font-mono` se usa en 45 lugares de 30 componentes: DataTable, TreeTable, StatCard, ProgressBar, Pagination, el shell. Resolvía al monoespaciado del sistema operativo, o sea SF Mono en Mac, Cascadia en Windows 11, Segoe UI Mono en Windows 10 y Roboto Mono en el teléfono de terreno. La misma tabla de presupuesto se dibujaba con una tipografía distinta según quién la abriera, y ninguna era de la marca. La identidad original ya lo tenía resuelto: «Datos — IBM Plex Mono», por las cifras tabulares. LA DIFERENCIA CON LA DISPLAY, QUE ES DELIBERADA. Jost va incrustada en esta hoja porque si falla se pierde la marca, y cuesta 17,5 kB. Las tres pesos de Plex Mono cuestan 34 kB —el doble— y el base64 no comprime: incrustarlas duplicaría el peso de una hoja que BLOQUEA el primer pintado. Eso es exactamente el costo que la decisión de sacar las webfonts quiso evitar «en terreno sin señal». Y acá el respaldo es distinto: si la display no carga, se pierde la voz de la marca; si la mono no carga, se ven las cifras en el monoespaciado del sistema — que es lo que se ve HOY. El peor caso es el presente, no una regresión. Por eso: archivo aparte. Y `font-display: OPTIONAL`, no `swap`, que es la diferencia que se ve. Medido: Plex Mono es 22% MÁS ANGOSTA que el monoespaciado del sistema (24 muestras de cifras reales —montos, RUT, fechas, porcentajes— a tres tamaños; entre -14,6% y -27,3%). Con `swap`, la fuente llega tarde y TODAS las columnas de números se encogen de golpe delante del usuario. En una tabla de presupuesto ese salto no es un detalle estético: hace desconfiar de la cifra. Con `optional` el navegador da una ventana muy corta y, si la fuente no llegó, usa el respaldo PARA TODA ESA VISTA y no la cambia. La fuente queda en caché y entra desde la navegación siguiente. Resultado: cero salto, nunca. En una herramienta que se usa todo el día, la primera carga es la única que podría verse con la del sistema. TRES PESOS PORQUE EL SISTEMA USA TRES: regular en 2 lugares, medium en 7 y semibold en 9. Sintetizar los que faltan deforma una monoespaciada. NO SE RECORTARON LAS MINÚSCULAS aunque tentaba: de los 45 bloques en mono solo 1 va en versalita, así que sin minúsculas una palabra cambiaría de fuente a mitad. Con el juego completo son 34 kB; sin ellas, 26,6. LICENCIA. IBM Plex Mono, SIL Open Font License 1.1 — Copyright 2017 IBM Corp. con Reserved Font Name "Plex". Texto completo en assets/fonts/OFL-IBMPlexMono.txt. ========================================================================== */ @font-face { font-family: 'Plex Mono CG'; font-style: normal; font-weight: 400; font-display: optional; src: url("./assets/fonts/plex-mono-400-latin.woff2") format("woff2"); } @font-face { font-family: 'Plex Mono CG'; font-style: normal; font-weight: 500; font-display: optional; src: url("./assets/fonts/plex-mono-500-latin.woff2") format("woff2"); } @font-face { font-family: 'Plex Mono CG'; font-style: normal; font-weight: 600; font-display: optional; src: url("./assets/fonts/plex-mono-600-latin.woff2") format("woff2"); } /* ═══ tokens/colors.css ═════════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Color tokens -------------------------------------------------------------------------- Paleta base del Manual de Identidad Corporativa: Azul corporativo PANTONE 660 C #2871B8 Café corporativo PANTONE 411 C #6F6462 Café oscuro PANTONE 411 C #4F3F3F Gris 80% negro #333333 Gris 40% negro #999999 REGLA DE JERARQUÍA DE MARCA (v2): El Manual de Identidad es la fuente de verdad. El azul #2871B8 encabeza marca, interfaces y producto. El navy #1F3864 NO es un segundo azul de marca: es la tinta institucional heredada de la papelería y plantillas Office, y queda acotada a documentos ejecutivos (ver tokens/office.css). Nunca usar #1F3864 y #2871B8 como acentos alternativos en la misma pieza. ACCESIBILIDAD (v2): los estados semánticos se recalibraron para cumplir WCAG 2.1 AA (>=4,5:1) sobre las dos superficies del sistema: papel cálido #F6F4F3 y tarjeta blanca. Los valores anteriores (ámbar #D4922A 2,64:1 y verde #2F8F5B 4,04:1) fallaban y se retiraron del uso textual. ========================================================================== */ :root { /* ---- Azul corporativo (primary) ---------------------------------- */ --blue-50: #eef4fb; --blue-100: #d6e6f5; --blue-200: #aecced; --blue-300: #7fb0e2; --blue-400: #5191d2; --blue-500: #2871b8; /* PANTONE 660 C — brand azul */ --blue-600: #21609f; --blue-700: #1c4f83; --blue-800: #1a4269; --blue-900: #15375a; /* ---- Café corporativo (warm neutral / secondary) ----------------- */ --cafe-50: #f6f4f3; --cafe-100: #ebe7e6; --cafe-200: #d8d1cf; --cafe-300: #beb4b1; --cafe-400: #8e827f; /* contorno de control: 3,72:1 sobre tarjeta, 3,39:1 sobre página y 3,03:1 sobre fondo hundido. Era #968a87 y sobre hundido quedaba en 2,72:1 — un campo dentro de una barra de filtros no se distinguía del fondo. */ --cafe-500: #6f6462; /* PANTONE 411 C — café corporativo */ --cafe-600: #5b5250; --cafe-700: #4f3f3f; /* café oscuro */ --cafe-800: #3c3130; --cafe-900: #2a2322; /* ---- Neutral grays ----------------------------------------------- */ --gray-0: #ffffff; --gray-50: #f7f8f9; --gray-100: #eef0f2; --gray-200: #e1e4e7; --gray-300: #cbd0d4; --gray-400: #8d8d8d; /* 3,32:1 sobre tarjeta y 3,03:1 sobre página. Era #999999 y no llegaba a 3:1: se usa como cuadrado de estado en tablas —«sin plazo», «borrador», «no aplica»— y eso no es decoración, es información. NO alcanza para texto. */ --gray-500: #6e7378; --gray-600: #4f5458; --gray-700: #3a3e41; --gray-800: #333333; /* gris 80% negro */ --gray-900: #1d1f21; /* ---- Estados semánticos — recalibrados AA ------------------------ */ /* -500 = relleno sólido (texto blanco encima). -700 = texto sobre -50. */ --success-50: #eaf5ee; --success-100: #cce8d6; --success-500: #26754a; /* conforme / aprobado — 5,64:1 con blanco */ --success-700: #17532f; /* 8,12:1 sobre success-50 */ --warning-50: #fbf3e3; --warning-100: #f6e4c2; --warning-500: #9c6814; /* por vencer / atención — 4,77:1 con blanco */ --warning-700: #5e3d07; /* 8,87:1 sobre warning-50 */ --danger-50: #fbecea; --danger-100: #f6d3ce; --danger-500: #b3271a; --danger-600: #9f2216; /* vencido / crítico — 6,52:1 con blanco */ --danger-700: #8f1e14; /* 7,74:1 sobre danger-50 */ --info-50: var(--blue-50); --info-500: var(--blue-500); --info-700: var(--blue-700); /* Ámbar y verde originales — conservados SOLO para gráficos y fills decorativos donde no hay texto encima. Prohibidos en texto y en indicadores de estado operacional. */ --chart-amber-legacy: #d4922a; --chart-green-legacy: #2f8f5b; /* ================================================================== */ /* SEMANTIC ALIASES — referenciar estos en producto, no las ramps */ /* ================================================================== */ /* ── EL AZUL TIENE UN TRABAJO POR TONO ───────────────────────────────── MEDIDO en las 21 pantallas de arranque: `--blue-500` —el mismo píxel, rgb(40,113,184)— hacía SIETE trabajos distintos. Fondo de botón (26 veces), tinta de botón (75), texto e ícono (18), superficie e indicador (16), regla de acento (4), navegación (4) y serie de gráfico (37). Y hasta SEIS papeles distintos en una misma pantalla —la ficha y el checklist—. Con eso, la misma tinta dice «apretame», «estás acá», «soy un dato», «soy información» y «acá empieza otra sección». Cuando un color significa cinco cosas, no significa ninguna: la jerarquía se pierde, y es la razón por la que una pantalla llena de azul se siente plana aunque cada pieza esté bien. LOS CANALES, y cada uno con su lugar: ACCIÓN azul sólido. Lo que se aprieta y lo que está elegido. Nada más. DATO el azul del gráfico y del indicador, dentro del gráfico. INFORMACIÓN superficie suave y un ícono, nunca otro botón azul. PAPEL la regla que estructura la hoja NO es azul: es café. Ya estaba escrito —«el azul es interacción, el café es papel y tinta»— y había seis acentos de 3px en azul contradiciéndolo. Los valores no cambian al declarar los canales: cambia que ahora se puedan nombrar, verificar y decidir de una vez. `npm run canales` cuenta los papeles por pantalla y falla si el azul sólido pinta algo que no se aprieta. */ --accion-fondo: var(--blue-500); --accion-fondo-hover: var(--blue-600); --accion-fondo-activo: var(--blue-700); --accion-tinta: var(--text-on-brand); /* EL AZUL CUANDO LA ACCIÓN ES TEXTO, y no un fondo sólido. Medido en navegador el 28-08-2026, con el botón «?» de ayuda montado en el marco real: el azul de marca como TEXTO da 4,13:1 sobre `--topbar-surface` y sobre `--surface-sunken` —los dos son `--cafe-100`, #ebe7e6—, y el mínimo de WCAG AA para texto normal es 4,5:1. Pasa raspando sobre la hoja (4,62) y bien sobre tarjeta (5,07); el que falla es justo el fondo hundido. Y ahí es donde el sistema lo pinta dos veces: el rótulo de un `Button ghost`, que es lo que va en la ranura `acciones` de la barra superior, y la flecha de orden en la cabecera de `DataTable`/`DataGrid` —`_tablabase.jsx` pinta el `` con `--surface-sunken`—. `--blue-600` da 5,28 sobre el hundido, 5,91 sobre la hoja y 6,48 sobre la tarjeta: pasa en las tres. No es un azul nuevo: es el mismo que ya usan `--accion-fondo-hover` y `--brand-primary-hover`, así que la familia no se ensancha. El fondo sólido NO cambia — el azul de marca sigue siendo `--blue-500` donde lleva tinta blanca encima, que es donde el contraste nunca estuvo en duda. ⚠️ NO usar `--brand-primary` como texto chico sobre fondo hundido. Para eso está esta línea. */ --accion-texto: var(--blue-600); /* La marca de 3px que dice «estás acá»: navegación, fila elegida, paso en curso. Es estado de interacción, así que sí es azul. */ --accion-marca: var(--blue-500); /* Selección y contexto: superficie suave, no un bloque sólido. */ --seleccion-fondo: var(--blue-50); --seleccion-tinta: var(--blue-700); /* El acento que estructura una hoja de papel: cabecera de reporte, borde superior de una tarjeta, franja de una cola de trabajo. Café, no azul. */ --acento-papel: var(--cafe-700); /* La marca de un hito o de un dato que NO trae estado propio. Un punto de línea de tiempo es historia —lo que ya pasó—, no algo que se apriete: iba en el azul de acción y pasa a tinta. Los estados de dominio siguen usando su propia marca (`--est-*-mark`), que es la que sí significa algo. */ --dato-marca: var(--cafe-500); /* Brand */ --brand-primary: var(--blue-500); --brand-primary-hover: var(--blue-600); --brand-primary-active: var(--blue-700); --brand-secondary: var(--cafe-500); --brand-ink: var(--cafe-700); /* El ámbar de la marca. No estaba declarado y dos apps lo pedían igual: `var(--brand-amber, #d98b1f)` en cuatro lugares de `lecciones-aprendidas` y `cgarcia-paneles`, siempre con la misma reserva. Cuatro escrituras idénticas del mismo valor son un token que falta, no cuatro decisiones sueltas. Se declara con el valor que ya usaban: ninguna app cambia de aspecto y todas pasan a seguir al sistema. Es marca decorativa —una viñeta, la barra bajo un título—; para TEXTO de aviso está `--fg-warning`, que sí está medido. */ --brand-amber: #d98b1f; /* Superficies — papel cálido, no gris frío */ --surface-page: var(--cafe-50); --surface-card: var(--gray-0); --surface-sunken: var(--cafe-100); --surface-raised: var(--gray-0); --surface-inverse: var(--cafe-700); --surface-brand: var(--blue-500); --surface-hover: var(--cafe-100); --surface-selected:var(--blue-50); /* ── EL PLANO QUE FLOTA ─────────────────────────────────────────────── Modal, drawer, popover y la barra inferior de teléfono. Vale lo mismo que `--surface-card` y NO es un duplicado: lo que separa a los dos es el ROL, y el rol decide con qué sombra se pinta. Una tarjeta va con `--shadow-card`; esto va con `--shadow-floating`, que se ve. Sin este nombre la elección de sombra la hacía cada componente por gusto —`--shadow-lg` porque «se ve mejor»— y por eso había tarjetas ordinarias con la sombra de un modal. @kind color */ --surface-floating:var(--gray-0); /* Texto — todos AA sobre papel y tarjeta */ --text-strong: var(--gray-900); /* 15,4:1 */ --text-body: var(--gray-800); /* 11,5:1 */ --text-muted: var(--cafe-600); /* 6,9:1 — reemplaza gray-500 */ --text-subtle: #6b6664; /* 5,2:1 — reemplaza gray-400 */ --text-on-brand: var(--gray-0); --text-on-dark: var(--gray-0); --text-link: var(--blue-600); /* Bordes y divisores — hairlines cálidos */ --border-subtle: #e8e2df; --border-default: #d8d0cd; --border-strong: var(--cafe-400); --border-brand: var(--blue-500); --border-focus: var(--blue-500); /* Escala categórica de gráficos — MÁXIMO 6 SERIES. Derivada de la paleta, ordenada por luminosidad, no por matiz. En la v4 el café y el gris se distinguían solo por temperatura: en proyector de sala de reuniones y en impresión blanco y negro quedaban idénticos. Acá cada par de series está a 29 puntos de luma o más, así que el gráfico se sigue leyendo en escala de grises. Luma sRGB de cada tono: 1→103 2→66 3→140 4→30 5→169 6→201 El orden importa: los cuatro primeros superan 3:1 contra la tarjeta blanca, así que un gráfico de hasta 4 series no necesita nada más. Del quinto en adelante el tono es demasiado claro para sostenerse solo y lleva --chart-outline como hairline de separación. Regla de asignación (ver components/charts/*.prompt.md): la serie principal SIEMPRE va en --chart-1 (azul de marca); las secundarias siguen el orden; los colores semánticos no entran acá. */ --chart-1: var(--blue-500); /* azul de marca — serie principal */ --chart-2: var(--cafe-700); --chart-3: var(--cafe-400); --chart-4: var(--gray-900); --chart-5: var(--blue-400); /* era blue-300: 2,22:1 contra la superficie del gráfico. Una barra que no se distingue del fondo no es una serie, es un hueco. */ --chart-6: var(--cafe-500); /* era cafe-200: 1,47:1, el peor de la escala. Es el café de marca, que además le devuelve croma a la sexta serie. */ --chart-outline: var(--border-default); /* Cromo del gráfico — rejilla, ejes y series de referencia */ --chart-grid: var(--border-subtle); --chart-grid-soft: var(--cafe-100); --chart-axis: var(--text-subtle); --chart-plan: var(--cafe-400); /* programado / referencia */ --chart-proyeccion: var(--blue-400); /* proyección — siempre discontinua (2 3), que es lo que la distingue de --chart-5 cuando comparten tono */ --chart-area: rgba(111, 100, 98, .07); /* Superposición de visor — galería de fotos y lightbox. El fondo del visor es café 900 con alfa, no negro: la foto de obra se mide contra el mismo neutro cálido que el resto del sistema. Los controles son blanco al 14% porque van sobre la foto, que puede ser clara u oscura, y ese es el único valor que funciona en las dos. */ --overlay-fondo: rgba(42, 35, 34, .92); --overlay-control: rgba(255, 255, 255, .14); --overlay-pie: rgba(42, 35, 34, .82); /* Chrome — sidebar y topbar. El chrome es MARCO, no contenido: envuelve el dato, no compite con él. Un chrome oscuro sobre contenido claro se lee siempre como pesado y le roba jerarquía a la cifra, que es lo único que la persona vino a mirar. Por eso la navegación va clara y el azul solo marca dónde estás. Para volver a un chrome oscuro se cambian ESTAS 12 LÍNEAS y nada más: ningún componente escribe un hex de chrome por su cuenta. */ /* EL MENÚ VA UN PLANO ATRÁS DEL CONTENIDO, NO ADELANTE. `--nav-surface` era `--surface-card`, o sea blanco puro, y las tarjetas también: el menú quedaba siendo la cosa más brillante de la pantalla, un paso ADELANTE del contenido que acompaña. Es cromo, no contenido. Se midió en postventa con el menú claro puesto: riel en rgb(255,255,255) contra una página en #f6f4f3 — el riel más claro que el papel, y separados sólo por una línea de 1 px. Se veía plano, y no era impresión: era la jerarquía al revés. Con el papel cálido el menú se apoya y las tarjetas blancas saltan encima, que es el orden correcto. Sigue en tonos claros: es el mismo papel de la página, no un gris nuevo. El borde sube de `--border-subtle` a `--border-default` porque ahora separa dos planos parecidos, y una línea apenas visible no alcanza para eso. ── 18-08-2026: EL MENÚ DEJA DE SER EXACTAMENTE EL MISMO PAPEL ────────── El párrafo de arriba dice «es el mismo papel de la página», y ahí estaba el problema: siendo el MISMO valor, la separación entre menú y lienzo quedaba entera a cargo del borde, y ese borde medía **1,39:1** contra el papel. Medido, no impresión: dos planos que no se distinguen y una línea que casi no está. Es lo que se lee como «le falta contraste». La respuesta se mantiene en claro —es el pedido explícito del dueño— y no vuelve al blanco puro, que es justamente lo que este bloque descartó: · superficie `--cafe-100` #ebe7e6, un punto más profunda que el lienzo #f6f4f3, que es `--cafe-50`. 1,12:1 entre planos. Sigue siendo papel y sigue estando DEBAJO de las tarjetas blancas, así que la jerarquía que este bloque defiende no se toca. El texto del menú encima queda en 10,49:1. · borde `--cafe-300` #beb4b1, de 1,39:1 a 1,85:1. Ahora la línea acompaña a una diferencia de plano en vez de ser la única separación. · tinta tenue `--cafe-600` #5b5250 en vez de `--text-subtle`: los números 01–05 y el rótulo de grupo son mono de 10,5 px con letra espaciada, y a ese tamaño 5,16:1 se lee gris. Sube a 6,18:1 sobre la superficie nueva, y sigue siendo claramente secundaria contra el 10,29:1 de la etiqueta. Y LOS TRES SALEN DE LA ESCALA DE MARCA, no de valores nuevos. La primera versión de este ajuste inventó #eee9e6 / #c4b8b3 / #5f5a58, que resultaron estar a un pelo de `--cafe-100` / `--cafe-300` / `--cafe-600` —los pasos reales de PANTONE 411 C— y además medían un poco PEOR. Inventar un valor que ya existe es la copia local naciendo adentro del propio sistema. Ahora el menú está hecho del café de la empresa, que es exactamente el trabajo que este archivo le asigna: «el azul es interacción, el café es papel y tinta». El menú es papel. Siguen siendo alias —lo correcto— pero de la ESCALA DE MARCA y no de la superficie de página: el menú es su propio plano. Aliasarlo al de la página es lo que lo hizo invisible. */ --nav-surface: var(--cafe-100); --nav-border: var(--cafe-300); --nav-text: var(--text-body); --nav-text-muted: var(--cafe-600); /* BLANCO, NO PAPEL. Esto valía `--surface-page`, que es EL MISMO VALOR que `--nav-surface` desde que el menú se mudó al papel cálido: el hover pasó a pintar el fondo del mismo color que ya tenía, o sea a no hacer nada. Quedó así al mover uno de los dos y no el otro, y no se vio porque un hover que no pasa nada no se distingue de un hover que todavía no llegó. Blanco es la respuesta coherente con el modelo que el bloque de arriba declara —el papel se apoya y lo blanco salta encima—: el item bajo el cursor se levanta del papel igual que una tarjeta. */ --nav-item-hover: var(--surface-card); --nav-item-active-bg: var(--blue-50); --nav-item-active-fg: var(--blue-700); --nav-item-active-bar: var(--blue-500); /* EL BADGE ERA `--gray-100` Y DEJÓ DE VERSE. #eef0f2 sobre el papel cálido del menú da 1,1:1 — la pastilla desaparecía y la cifra quedaba flotando como un exponente al costado del ícono—, y además es un gris FRÍO sobre una superficie cálida, así que aun viéndose leía de otra familia. Es el mismo defecto que tuvo `--nav-item-hover`, que valía lo mismo que la superficie del menú y por lo tanto el hover no hacía nada: cuando el menú se mudó al café, los tokens que se apoyaban en la escala gris se quedaron atrás en silencio. `--cafe-200` da 1,23:1 y es de la misma familia. @kind color */ --nav-badge-bg: var(--cafe-200); --nav-badge-fg: var(--gray-600); /* ── LA BARRA SUPERIOR, EN CAFÉ OSCURO ──────────────────────────────── El café es el color de la marca —PANTONE 411 C— y no existía en pantalla: todo era azul, blanco y gris. Vivía en los tokens y no en la vista. La regla que lo ordena: EL AZUL ES INTERACCIÓN, EL CAFÉ ES PAPEL Y TINTA. Si algo se aprieta, se selecciona o está activo, va azul. Si es la materia sobre la que se trabaja —el documento, la cifra, la estructura— va café. Nunca compiten porque nunca hacen lo mismo. La barra es lo primero que se ve y era blanca, indistinguible de cualquier producto. Una banda café oscuro cruzando el ancho completo ancla la aplicación entera. Y funciona AHORA porque el riel quedó claro: banda oscura arriba, superficies de papel abajo. Con el menú café que había antes habrían sido dos oscuros peleándose. */ /* EL PLANO OSCURO DEL SHELL DE MARCA, que hasta ahora era un literal. `components/marca/AppShell.tsx` tenía `const SIDE = "#1e1917"` y trece literales más alrededor: la superficie del menú de las nueve apps del ecosistema estaba escrita a mano en un componente, o sea fuera del alcance de cualquier token, de cualquier medición de contraste y de cualquier ajuste futuro. NO se cambia el valor —cambiarlo alteraría lo que hoy ven nueve apps en producción—, se DECLARA. Y queda dicho que es más oscuro que `--cafe-900` (#2a2322) a propósito: el menú de marca es el plano más profundo de la interfaz, por debajo de la barra superior. @kind color */ --nav-marca-surface: #1e1917; /* ── LA BARRA SUPERIOR SE ACLARA ────────────────────────────────────── Era `--cafe-900` (#2a2322): una franja oscura permanente en cada pantalla de cada app del sistema. El menú lateral se había mudado al papel claro y la barra no entró en esa mudanza, así que quedaron dos cromos que no se parecen —el de marca claro, el del sistema oscuro— para la misma empresa. Estaba medido y escrito en `docs/MARCOS-ACTUALES.md` como hallazgo antes de tocarse. Ahora la barra es DEL MISMO PLANO QUE EL MENÚ, `--cafe-100`. No es una tercera superficie: es que el cromo sea uno solo. La L que forman el menú y la barra queda del papel cálido, el lienzo va más claro por debajo (`--surface-page`, --cafe-50) y las tarjetas blancas quedan encima. Tres planos que suben en claridad hacia el contenido, que es lo que hace que la profundidad se lea sin una sola sombra. El café oscuro NO se retira: sigue siendo tinta de marca —`--text-data`, `--cafe-700` para un momento puntual—. Lo que se retira es que ocupe una franja fija en toda pantalla. Medido sobre #ebe7e6: tinta 10,29:1 · tinta tenue 6,18:1. La norma pide 4,5:1. @kind color */ --topbar-surface: var(--cafe-100); --topbar-border: var(--cafe-300); --topbar-fg: var(--nav-text); --topbar-fg-muted: var(--nav-text-muted); /* ── LA TINTA DE LOS DATOS ──────────────────────────────────────────── Folios, códigos de vivienda, cifras en tabular: eran negro casi puro. En café oscuro se leen como un documento técnico impreso y no como texto de pantalla. Es sutil y es de los que se sienten sin poder explicarlos. 11,2:1 sobre tarjeta: por encima de lo que pide la norma. */ --text-data: var(--cafe-800); /* Rótulos en versales y la regla bajo un título de sección: eran grises genéricos. En café son marca sin gritar. */ --rotulo-fg: var(--cafe-600); --regla-seccion: var(--cafe-400); /* Fondos de estado */ --bg-success: var(--success-50); --bg-warning: var(--warning-50); --bg-danger: var(--danger-50); --bg-info: var(--info-50); --fg-success: var(--success-700); --fg-warning: var(--warning-700); --fg-danger: var(--danger-700); --fg-info: var(--info-700); } /* ═══ tokens/typography.css ═════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Typography tokens Display: Jost (Century Gothic substitute) · UI: IBM Plex Sans · Data: IBM Plex Mono ========================================================================== */ :root { /* ---- Families ---------------------------------------------------- */ /* Display / marca — títulos, portadas, wordmark. `Jost CG` viaja dentro de `tokens/fonts.css` como data URI, así que está siempre: no depende de qué tenga instalado la máquina ni de que llegue una petición de red. Century Gothic queda PRIMERO porque es la familia de la identidad y quien tenga licencia debe verla; Jost es su sustituto libre y el que va a resolver en casi todos los equipos. Antes esta lista terminaba cayendo a `system-ui` en la práctica —ninguna de las tres existe en los Windows de la empresa— y los títulos se veían como los de cualquier otro producto. */ --font-display: 'Century Gothic', 'Jost CG', 'Jost', 'Futura', system-ui, sans-serif; /* UI de aplicación — stack de sistema. Resuelve a Segoe UI Variable en Windows 11, Segoe UI en Windows 10, SF Pro en iOS/macOS y Roboto en Android. Es la única forma de ser nativo en los cinco dispositivos donde corre el sistema: pedir Segoe UI a un iPhone en terreno da fallback, no coherencia Microsoft. */ --font-sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Alternativa técnica cuando se requiera render idéntico entre plataformas (ej. capturas para documentación o comparación de maquetas). */ --font-sans-fija: 'Inter', 'IBM Plex Sans', var(--font-sans); /* Datos — solo cifras, fechas, folios y códigos. Ver «Regla de tipografía». */ /* `Plex Mono CG` va PRIMERO: es la que hace que una tabla de presupuesto se vea igual en el Mac de oficina, el Windows de obra y el teléfono de terreno. Se carga como archivo con `font-display: optional` (ver fonts.css): si no llega a tiempo, esa vista entera usa el monoespaciado del sistema y NO se cambia a mitad. Es a propósito — Plex Mono es 22% más angosta, y cambiarla en caliente encogería todas las columnas de números delante del usuario. El respaldo no es una degradación: es lo que se veía antes. */ --font-mono: 'Plex Mono CG', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', 'IBM Plex Mono', Menlo, Consolas, monospace; /* ---- Weights ----------------------------------------------------- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* ---- Type scale (1.250 major-third on a 16px base) --------------- */ /* Debajo de la escala: solo ejes de gráfico y marcadores dentro de una fila de tabla. Nunca texto de lectura — 9px no se lee en una pantalla de obra. Existe como token para que esos casos sean tres y declarados, y no un 8.5 suelto en cada gráfico. */ --fs-micro: 9px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; /* base UI text in dense software */ --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-5xl: 48px; --fs-6xl: 64px; /* ---- Line heights ------------------------------------------------ */ --lh-tight: 1.1; /* @kind other */ --lh-snug: 1.25; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ /* ---- Letter spacing ---------------------------------------------- */ --ls-tight: -0.02em; /* @kind other */ --ls-normal: 0; /* ── TÍTULOS DE PANTALLA ───────────────────────────────────────────────── Century Gothic es la tipografía de la marca y hasta ahora no hacía casi nada: los títulos eran la sans un poco más grande, y por eso las pantallas se veían correctas y anónimas. Es la observación que abrió `MODERNIZAR.md` —«se ve como una página hecha en un día»— y este es el primero de los tres pasos que ahí se proponen. Se declaran como CONJUNTO y no como tamaños sueltos, a propósito: un título no es «30 px», es una familia, un peso, un interletrado y una altura de línea que funcionan juntos. Suelto, cada app vuelve a decidir y volvemos al punto de partida. El interletrado va NEGATIVO y crece con el tamaño. Century Gothic es una geométrica de ojo grande: en cuerpos grandes se abre y las palabras se desarman. Cerrarla un punto es lo que la hace ver dibujada en vez de estirada — y es exactamente lo que ya se hace con las versales de los rótulos, sólo que al revés. */ --titulo-font: var(--font-display); --titulo-fw: var(--fw-semibold); --titulo-lh: var(--lh-tight); --titulo-ls: -0.02em; /* pantalla — 30 px */ --titulo-ls-lg: -0.03em; /* portada o cifra grande — 38 px y más */ /* La bajada que acompaña al título. Va en la sans y en un tono secundario: dos tipografías distintas separan mejor que dos tamaños de la misma. */ --bajada-font: var(--font-sans); --bajada-fw: var(--fw-regular); --bajada-lh: var(--lh-normal); /* @kind other */ --ls-wide: 0.04em; /* @kind other */ --ls-wider: 0.12em; /* @kind other */ /* ---- Semantic roles ---------------------------------------------- */ --text-display-font: var(--font-display); /* @kind font */ /* EL ENCABEZADO OPERATIVO VA EN SANS, y este token es donde se decide. Era `--font-display` y con eso el rol «heading» arrastraba la voz de marca a cada título de sección y de tarjeta. Display es para el H1, los momentos de marca y las cifras grandes; ahí está `--text-display-font`. */ --text-heading-font: var(--font-sans); /* @kind font */ --text-body-font: var(--font-sans); /* @kind font */ --text-data-font: var(--font-mono); /* @kind font */ /* ---- Mapeo a Office ---------------------------------------------- */ /* Jost e IBM Plex no existen en los equipos Windows de la empresa. Todo entregable PPTX/DOCX/XLSX usa Calibri. Ver tokens/office.css. La sustitución es obligatoria, no opcional: un deck con Jost se abre con fallback y rompe la consistencia con las plantillas de gerencia. */ /* Aptos es la tipografía por defecto de Microsoft 365 desde 2024; Calibri queda como alternativa para equipos con Office anterior. */ --font-display-office: Aptos, Calibri, 'Segoe UI', sans-serif; /* @kind font */ --font-sans-office: Aptos, Calibri, 'Segoe UI', sans-serif; /* @kind font */ --font-mono-office: 'Aptos Mono', Consolas, 'Courier New', monospace; /* @kind font */ } /* ═══ tokens/spacing.css ════════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Spacing, radius, borders, shadow, motion, layout -------------------------------------------------------------------------- The brand language is structural and rectilinear (the logo is built from metal profiles + a single rotated square). Radii stay TIGHT and crisp; shadows stay restrained and corporate. ========================================================================== */ :root { /* ---- Spacing (4px base grid) ------------------------------------- */ --space-0: 0; --space-1: 4px; /* Único escalón bajo 4px. NO es un paso de la escala: existe solo para el ajuste óptico de una línea contra otra —el detalle bajo un título, el relleno de un resaltado— donde 4px ya se lee como separación. Si aparece definiendo el espacio entre dos bloques, está mal usado. */ --space-05: 2px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Sin --space-16/20/24: 64, 80 y 96 px no los usaba ningún componente y una escala con tramos muertos invita a elegir el número en vez del token. El aire de página lo da --gutter, que sí cambia por perfil de densidad. */ /* ---- Ancho máximo de contenido ------------------------------------ Tres medidas, no una. Una tabla de partidas necesita todo el ancho que haya; un formulario a 1600px obliga a barrer la pantalla con la cabeza entre la etiqueta y el campo. Las plantillas eligen según lo que llevan dentro — ninguna escribe un ancho en px. */ --content-max: 1600px; /* bandeja, tablero — tabla ancha */ --content-max-lectura: 980px; /* detalle, formulario — medida de lectura */ --content-max-estrecho: 680px; /* ajustes, confirmaciones */ /* ---- Radius: DOS FAMILIAS, PORQUE HAY DOS TRABAJOS ---------------- La escala valía 0 / 1 / 2 / 2 / 3 / 4 / 999: siete nombres para tres valores visibles, con `sm` y `md` IDÉNTICOS. Y medido el 17-08-2026, el problema de fondo no era la calibración sino la división: Input, Button, Select -> --radius-md DataGrid, TreeTable -> --radius-md El mismo token servía a un campo de formulario y a una grilla de datos, que quieren cosas opuestas. Por eso estaba trabado en 2 px: subirlo redondeaba las tablas, bajarlo endurecía los botones. No se podía mover sin romper algo, así que no se movió nunca — y de ahí sale parte de que el conjunto se sienta «tipo planilla con CSS». Se separa por ROL: TÉCNICO — datos, planos, documentos. Borde duro; se queda donde estaba. Una tabla con esquinas blandas miente sobre lo que es. INTERACTIVO — lo que se aprieta, se escribe y se abre. Ahí el radio es lenguaje: dice «esto responde». Los nombres numéricos SE CONSERVAN con su valor: hay 131 usos internos. Migrar un componente es cambiarle el nombre del token, no editar un valor. */ /* Técnico */ --radius-none: 0; --radius-xs: 1px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-full: 999px; /* pills, avatars */ /* Por rol — lo que un componente debería nombrar */ --radius-dato: var(--radius-sm); /* celda, sello, chip de estado */ --radius-tabla: var(--radius-lg); /* el marco de una grilla */ --radius-control: 6px; /* campo, botón, selector */ /* 14px, y el valor NO lo eligió el sistema: lo eligió postventa mirando sus pantallas —`--radius-card: 14px`, con el comentario «tarjetas premium»— y el sistema declaraba 8px elegidos frente al token y no frente a una app. Entre una decisión tomada mirando la pantalla y una tomada mirando el CSS, gana la primera. Con esto la línea local de esa app desaparece sin que se mueva un píxel allá, que es la mejor forma de converger: la app no cambia de aspecto y deja de estar fuera del sistema. */ --radius-panel: 14px; /* tarjeta, aviso, panel */ --radius-capa: 12px; /* modal, drawer: lo que flota */ /* ---- Border widths ----------------------------------------------- */ --border-w-hairline: 1px; --border-w-thick: 2px; --border-accent: 3px; /* blue accent rule — echoes the brand's square block */ /* ---- Shadows (corporate, low-spread) ----------------------------- */ --shadow-xs: 0 1px 2px rgba(29, 31, 33, 0.06); --shadow-sm: 0 1px 3px rgba(29, 31, 33, 0.08), 0 1px 2px rgba(29, 31, 33, 0.06); --shadow-md: 0 2px 6px rgba(29, 31, 33, 0.08), 0 4px 12px rgba(29, 31, 33, 0.06); --shadow-lg: 0 6px 16px rgba(29, 31, 33, 0.10), 0 12px 32px rgba(29, 31, 33, 0.08); --shadow-focus: 0 0 0 3px rgba(40, 113, 184, 0.30); /* ---- Sombras POR ROL, sobre la escala de arriba ------------------- */ /* La escala se llama por TAMAÑO, y un nombre de tamaño no dice cuándo usarlo: quien elige entre `--shadow-md` y `--shadow-lg` lo hace por gusto, y así terminaron tarjetas ordinarias con la sombra de un modal. Estos tres se llaman por el rol, que sí se puede decidir sin mirar la pantalla: ¿es una tarjeta, algo que flota, o una capa con velo detrás? No son valores nuevos —son la escala existente con el nombre que se elige. @kind other */ --shadow-card: var(--shadow-xs); /* casi nada: la superficie ya separa */ --shadow-floating: var(--shadow-md); /* popover, barra inferior, menú asomado */ --shadow-modal: var(--shadow-lg); /* modal y drawer, con velo detrás */ /* ---- Motion ------------------------------------------------------ */ /* Dos curvas y ninguna de entrada lenta. Acá vivía `--ease-in`, sin un solo uso en el sistema: no era una violación, era una violación disponible, servida con nombre de token y esperando que alguien la eligiera de buena fe porque «está en el sistema». `ease-in` arranca lento y retrasa exactamente el instante que la persona está mirando. Si algún día hace falta una curva de aceleración para una salida pura, se declara con nombre propio y con el comentario de para qué sirve y para qué no. Un token sin uso no se guarda «por si acaso». */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ /* Bajó de 200ms a 180ms. La revisión externa fijó 120-180ms para una microinteraccion normal y 200 quedaba justo afuera. La proporción ~0,7 del perfil terreno se mantiene sola: 140ms ya estaba dentro del rango. */ --dur-base: 180ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ /* ---- Z-index ----------------------------------------------------- */ --z-base: 0; /* @kind other */ --z-sticky: 100; /* @kind other */ --z-dropdown: 200; /* @kind other */ --z-overlay: 300; /* @kind other */ --z-modal: 400; /* @kind other */ --z-toast: 500; /* @kind other */ /* ---- Layout ------------------------------------------------------ */ --sidebar-w: 248px; /* El ancho del menú expandido como token propio: `AppShell` lo publica inline según el tramo que ya resolvió midiendo SU contenedor, y para eso necesita un nombre que no sea el que está pisando —`--sidebar-w: var(--sidebar-w)` es un ciclo—. Ver la nota de ANCHO ESTRUCTURAL en components/nav/AppShell.jsx. */ --sidebar-w-exp: 248px; /* Ancho mínimo para dibujar el LOCKUP completo —isotipo sobre wordmark de dos líneas—. Medido en navegador: a su ancho nativo de 285px la segunda línea mide 8px, y necesita 320px para alcanzar los 9px de --fs-micro, el tipo más chico que el sistema se permite. Bajo este ancho va el isotipo, no el lockup encogido. El menú expandido mide 248: por eso ahí nunca va el lockup. @kind dimension */ --logo-lockup-min: 320px; /* El rail es el mismo menú colapsado, no otro componente: por eso su ancho es un token del sistema y no un número por app. Cabe el ícono de 22px con su badge y el área táctil completa. */ --sidebar-w-rail: 72px; /* Alto de la barra inferior de teléfono. Estaba implícito en el alto de sus botones, o sea que no se podía reservar espacio al pie del contenido sin adivinarlo, y la última fila de una tabla quedaba debajo de la barra. @kind other */ --nav-bottom-h: 64px; /* DÓNDE SE APOYA LO QUE FLOTA SOBRE LA PANTALLA, y por qué es un token y no un número en cada componente. Medido el 27-08-2026 sobre `cgarcia-control-gestion`: su píldora «? Ayuda» estaba en `bottom: 20` escrito a mano. Bajo 640px el shell dibuja la barra inferior, que ocupa de 0 a 64px desde el borde — así que la píldora, que ocupa de 20 a 64, quedaba ENTERA encima de la navegación primaria. Y sin `env(safe-area-inset-bottom)`, en iPhone la barra sube y empeora. La misma app en `cg-postventa-app` usaba 18, o sea el mismo defecto con otro número: dos apps adivinando la misma distancia por separado. El valor es EL MISMO que ya reserva el contenido en `responsive.css` (`.gc-appshell-main`), y no por prolijidad: así lo que flota se apoya exactamente donde el contenido termina, en vez de negociar aparte. `-x` es el margen lateral, que NO cambia con la barra: la barra ocupa alto, no ancho. Se declara igual para que un componente flotante no tenga que mezclar un token con un literal. `@kind other` y no `dimension`: el manifest clasifica por prefijo del nombre y por valor, no por esta anotación, y un `calc()` con `env()` no matchea ninguna de las dos reglas. Se escribe lo que el manifest registra de verdad — una anotación que dice otra cosa es una que alguien va a creer. @kind other */ --flotante-inset-b: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); --flotante-inset-x: var(--space-6); /* EL RÓTULO DE GRUPO OCUPA ESTE ALTO EN LOS DOS ESTADOS, y por eso es un token y no un margen suelto. En rail el título del grupo no cabe y se dibuja una hairline; si esa hairline ocupa otro alto, al asomar el panel TODOS los ítems se corren hacia abajo y el destino se mueve debajo del cursor. Medido: con la hairline de antes el primer ítem quedaba 24px más arriba en rail que asomado, así que un clic en el rail aterrizaba en el rótulo del grupo y no navegaba a nada. @kind dimension */ --nav-rotulo-h: 20px; /* 54px y no 60. Los dos marcos declaraban su propio alto —60 el del sistema, 54 escrito a mano en el de marca— y la barra que ven nueve apps en producción es la de 54. Unificar hacia arriba habría movido nueve apps para que coincidieran con un solo shell; unificar hacia abajo no mueve ninguna y además la deja más delgada, que es lo que se pidió. @kind dimension */ --topbar-h: 54px; --container-max: 1280px; } /* ═══ tokens/densidad.css ═══════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Densidad y contexto de uso -------------------------------------------------------------------------- El sistema original está calibrado a una sola densidad: escritorio denso (cuerpo 14px, radios 2px, controles de 32–40px). Sirve para control de gestión en oficina. NO sirve para postventa. Postventa se opera en terreno: teléfono en mano, a veces con guantes, con sol directo sobre la pantalla y con una sola mano libre. Los targets de 32px y el texto de 13px son inoperables ahí. Tres contextos, un solo set de componentes: [data-densidad="oficina"] → default, escritorio denso [data-densidad="terreno"] → móvil/tablet, targets 48px, texto +2px [data-contraste="alto"] → sol directo, bordes y texto reforzados ========================================================================== */ :root { /* Densidad oficina (default) */ --control-h-sm: 32px; /* 44 px y no 40. La norma pide 44×44 para un objetivo táctil (WCAG 2.1, criterio 2.5.5) y el perfil por omisión daba 40: cada app quedaba cuatro píxeles corta sin que nadie lo viera, porque el número está acá y no en la app. Se midió en postventa —34 de 39 controles bajo el mínimo en el tablero— y el diagnóstico fue el mismo en todas: el defecto no era de la app, era de este archivo. Cuatro píxeles no descuadran una pantalla: `--row-h` ya vale 44 y los controles conviven con las filas de tabla, así que la altura queda pareja en vez de desalineada por cuatro. `--control-h-sm` se queda en 32 a propósito: es la variante compacta que se elige a mano para una barra de herramientas, no el tamaño por omisión de nada. */ --control-h-md: 44px; --control-h-lg: 48px; --touch-min: 32px; /* ── EL PISO TÁCTIL, EN UN TOKEN QUE NO SE PUEDE PERDER ────────────────── Más abajo hay una regla que le pone `min-height: var(--touch-min)` a todo input, select y textarea en perfil terreno. No sirve, y el motivo es de cascada: un componente que escribe `minHeight: 'var(--control-h-sm)'` en su `style` inline le gana a cualquier hoja. Diecisiete lugares del paquete lo hacen, así que en terreno esos controles medían 40px con el piso en 48 —lo encontró `npm run layout` al poner las pantallas piloto bajo contrato, y ninguna prueba de tokens podía verlo porque los VALORES estaban bien: lo que estaba mal era quién ganaba—. Es el mismo mecanismo que dejaba el rail visible en teléfono: la hoja decía `display: none` y el componente decía `display: flex` inline. `--control-h-sm-tactil` resuelve el max() en el token, así que la invariante viaja con el valor y no depende de que ninguna hoja gane. Un componente que use este token no puede quedar bajo el mínimo, y no hace falta que se acuerde. @kind dimension */ --control-h-sm-tactil: max(var(--control-h-sm), var(--touch-min)); --fs-ui: var(--fs-md); /* 14px */ --fs-ui-sm: var(--fs-sm); /* 13px */ --row-h: 44px; /* fila de tabla */ --gutter: var(--space-6); /* 24px */ --panel-pad: var(--space-6); } /* -------------------------------------------------------------------------- TERRENO — móvil / tablet en obra Targets 48px (mínimo WCAG 2.2 AA para target size es 24px; 48px es el mínimo operativo real con guante de trabajo). Texto un escalón arriba. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- ESPECIFICIDAD DE LOS PERFILES — por qué el selector va duplicado Los perfiles se declaran como `[data-x="y"][data-x]` a propósito: 0-2-0 en vez de 0-1-0. responsive.css declara sus propios `--touch-min` y `--gutter` sobre `:root` dentro de media queries, tiene la misma especificidad y viene DESPUÉS en la hoja concatenada, así que ganaba siempre. Consecuencia real: en cualquier dispositivo táctil el modo terreno quedaba en 44px en vez de 48, y el modo gerencial perdía su gutter entre 1024 y 1365 px, que es justo el proyector de comité. La capa completa era decorativa bajo 1366 px — el perfil bandera del sistema, el capataz con guantes, nunca se aplicaba. Un media query no aporta especificidad, así que subirla acá alcanza y no obliga a reordenar los archivos. -------------------------------------------------------------------------- */ [data-densidad="terreno"][data-densidad] { --control-h-sm: 40px; --control-h-md: 48px; --control-h-lg: 56px; --touch-min: 48px; --fs-ui: var(--fs-base); /* 16px — evita zoom automático en iOS */ --fs-ui-sm: var(--fs-md); /* 14px */ --row-h: 64px; --gutter: var(--space-4); /* 16px — pantalla angosta */ --panel-pad: var(--space-4); /* Motion más corto, con el movimiento intacto. Los tres perfiles compartían los mismos seis tokens y no debieran: en oficina una transición de 200ms es un detalle, y en terreno son 200ms en que la interfaz no acepta el toque mientras alguien espera de pie, con guantes y con sol sobre la pantalla, para marcar un avance. Se acortan y NO se apagan. Apagar el desplazamiento es lo que hace `prefers-reduced-motion`, y ahí lo pide la persona; acá lo decidiríamos nosotros por ella. En una pantalla chica el recorrido del panel es lo que dice de dónde salió, y esa ayuda se pierde entera. Si alguien usa la app en obra y el desplazamiento estorba, la vuelta es cambiar estas tres líneas por `transition-property: opacity`. Proporción ~0,7 sobre el perfil de oficina: se sigue notando que hubo transición, deja de haber espera. */ --dur-fast: 90ms; --dur-base: 140ms; --dur-slow: 220ms; } /* Todo control interactivo garantiza el target mínimo en terreno. LA ESPECIFICIDAD (0,1,1) VA A PROPÓSITO, Y SE MIDIÓ ANTES DE BAJARLA (23-09-2026). Le gana a cualquier clase suelta, y por eso ya hubo que esquivarla cuatro veces: la clase doble de `nav.css` (pie del menú e identidad) y de `responsive.css` (barra inferior), y en terrenos-cjmg una cruz que quedaba ovalada y un «+» que se achicaba. La salida obvia es bajarle el peso con `:where()`. Se midió con `npm run terreno` sobre las 21 pantallas de arranque y sobre las pantallas de inicio de las 14 apps levantadas en local, a 390 y 834 px con dedo. · Pantallas de arranque del paquete: 0 cambios. Los componentes llevan su tamaño inline, y un estilo inline ya le gana a cualquier hoja. · Apps: a 390 px cambiarían 109 de 505 controles, en 7 de las 14 (a 834, 107 de 532 en 6). - 103 bajan de letra, de 16 px a entre 9 y 14: presupuesto-bim 29 de 40 (hasta 9 px), tablero de proyectos 67 de 299 (a 14), loteo, gerencial, terrenos y capacitaciones. - 2 quedan bajo el piso táctil: en control-gestion, «Cambiar contraseña» y «Cerrar sesión» bajan de 48 a 36 px, porque la app declara `button { min-height }` suelto después de esta hoja. - El formulario de terreno nuevo, en terrenos, pasa sus 21 campos de 16 a 13 px. En un iPhone, un campo con letra bajo 16 px hace zoom al tocarlo, y evitar ese zoom es justamente lo que hace esta regla. - asistencia, calculo-tratos, acceso, paneles, ecosistema, lecciones y postventa (en su bandeja: el tablero no carga en el banco local): 0. - Pesando (0,0,1) en vez de (0,0,0) da exactamente lo mismo en las 14: no hay una versión intermedia que se salve. O sea: la regla hace el trabajo para el que está. Las clases que hoy pierden contra ella son tamaños de oficina que en terreno no sirven, y bajarle el peso los devolvería a todos de una vez. Se queda así. Cuando un control de verdad necesita su propio tamaño en terreno, el camino no es pelearle la especificidad: 1. un ícono en vez de una letra, porque mide lo que dice su `size`; 2. el lado de un botón redondo sale de `--touch-min`, no de un número fijo; 3. y si hace falta otra letra, la clase doble, con el motivo escrito al lado. OJO: `:where([data-densidad="terreno"]) :is(button, a[role="button"], …)` no baja nada, aunque lo parezca. `:is()` toma la especificidad de su argumento más específico, y `a[role="button"]` pesa (0,1,1). Las dos formas que sí bajan el peso son las que mide `scripts/medir-terreno.mjs`. */ [data-densidad="terreno"] button, [data-densidad="terreno"] a[role="button"], [data-densidad="terreno"] input, [data-densidad="terreno"] select, [data-densidad="terreno"] textarea, [data-densidad="terreno"] [role="tab"], [data-densidad="terreno"] [role="option"] { min-height: var(--touch-min); font-size: var(--fs-ui); } /* En terreno el pulgar llega abajo: las acciones primarias van fijas al pie */ [data-densidad="terreno"] .acciones-fijas { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-2); padding: var(--space-3) var(--gutter); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--surface-card); border-top: 1px solid var(--border-default); } /* -------------------------------------------------------------------------- ALTO CONTRASTE — sol directo No cambia la marca: refuerza bordes, sube el peso del texto secundario y apaga el papel cálido en favor de blanco puro (más luminancia disponible). -------------------------------------------------------------------------- */ [data-contraste="alto"][data-contraste] { --surface-page: var(--gray-0); --text-muted: var(--gray-800); --text-subtle: var(--cafe-600); --border-subtle: var(--cafe-300); --border-default: var(--cafe-400); --border-strong: var(--cafe-600); } [data-contraste="alto"] [data-estado], [data-contraste="alto"] .badge { border: 1px solid currentColor; font-weight: var(--fw-bold); } /* -------------------------------------------------------------------------- Respeto a preferencias del sistema operativo -------------------------------------------------------------------------- */ /* Movimiento reducido apaga el DESPLAZAMIENTO, no la retroalimentación. Acá había un interruptor global que llevaba toda animación y toda transición a 0.01ms. Apagaba también lo que no es movimiento: el esqueleto de carga y el pulso de «sincronizando» quedaban congelados, y los dos comunican estado. En terreno el segundo es la diferencia entre reintentar y perder el registro. Quien activa esta preferencia lo hace por mareo o por batería, no para quedarse sin señales de que el sistema está haciendo algo. Así que la lista blanca deja pasar lo que cambia sin moverse —opacidad y color— y lo que se desplaza deja de desplazarse. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: opacity, color, background-color, background, border-color, box-shadow, fill, stroke, outline-color !important; transition-duration: var(--dur-fast) !important; } /* Los overlays son lo único del sistema que se desplaza. Como `transform` salió de la lista blanca, sin esto cambiarían de posición de un salto: en vez de eso aparecen y desaparecen con opacidad. */ .gc-drawer, .gc-modal, .gc-toast { transform: none !important; } .gc-drawer[data-abierto="false"] { opacity: 0; pointer-events: none; } } @media (pointer: coarse) { :root { --touch-min: 44px; } } /* -------------------------------------------------------------------------- MODO GERENCIAL — comité, directorio, Power BI Tercer contexto de lectura, no un tercer design system. Pocas cifras, grandes, con la desviación y la decisión requerida al frente. La densidad operativa aquí estorba: quien lee esto no ejecuta, decide. -------------------------------------------------------------------------- */ [data-modo="gerencial"][data-modo] { --fs-ui: var(--fs-base); --fs-ui-sm: var(--fs-md); --row-h: 52px; --gutter: var(--space-8); --panel-pad: var(--space-8); } /* La cifra manda: KPI a escala de titular */ [data-modo="gerencial"] .kpi-valor { font-family: var(--font-mono); font-size: var(--fs-5xl); font-weight: var(--fw-light); line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; color: var(--text-strong); } [data-modo="gerencial"] .kpi-label { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-muted); } /* Una sola conclusión por bloque, en prosa, no en jerga de sistema */ [data-modo="gerencial"] .lectura { font-family: var(--font-sans); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-body); max-width: 62ch; } /* Decisión requerida: lo único que justifica llevar algo a comité */ [data-modo="gerencial"] .decision { border-left: var(--border-accent) solid var(--brand-primary); padding: var(--space-4) var(--space-5); background: var(--surface-card); } /* ═══ tokens/responsive.css ═════════════════════════════════════════ */ /* ========================================================================== GARCÍA CONSTRUCTORA — Breakpoints y comportamiento responsive -------------------------------------------------------------------------- Los breakpoints se definen por COMPORTAMIENTO DEL CONTENIDO, no por modelos de dispositivo. El nombre describe qué deja de funcionar, no qué teléfono es. compacto < 640 una columna, sin tablas anchas, navegación inferior medio 640–1023 dos columnas, tablas de 4–5 columnas, drawer 80% amplio 1024–1365 sidebar visible, tabla completa, panel lateral extenso ≥ 1366 análisis: tabla + panel simultáneos, filtros abiertos Validado en 360 · 390 · 430 · 768 · 1024 · 1366 · 1440 px. REGLA: una vista de escritorio reducida no es una vista móvil. Cada breakpoint reordena jerarquía, no solo achica. Lo que en escritorio es una columna de tabla, en celular es una línea de la tarjeta o no aparece. ========================================================================== */ :root { --bp-compacto: 640px; --bp-medio: 1024px; --bp-amplio: 1366px; /* Ancho de contenido por contexto */ --ancho-lectura: 68ch; /* prosa: informes, lecturas gerenciales */ --ancho-form: 560px; /* formularios de una columna */ --ancho-app: 1440px; /* contenedor máximo de aplicación */ } /* -------------------------------------------------------------------------- COMPACTO — celular (< 640px) Densidad terreno automática, navegación inferior, sin hover. -------------------------------------------------------------------------- */ @media (max-width: 639px) { :root { --control-h-sm: 40px; --control-h-md: 48px; --control-h-lg: 56px; --touch-min: 44px; /* mínimo WCAG 2.5.5 */ /* ACÁ ABAJO HAY UNA BARRA DE NAVEGACIÓN, así que lo que flota se apoya sobre ella y no encima. Es el MISMO cálculo que `.gc-appshell-main` usa más abajo para reservar el pie del contenido: lo flotante y lo que se lee terminan en la misma línea. Sin esto, una píldora en `bottom: 24` queda entera dentro de los 64px de la barra — medido en dos apps del ecosistema, cada una con su propio número inventado. @kind other */ --flotante-inset-b: calc(var(--nav-bottom-h) + var(--space-6) + env(safe-area-inset-bottom, 0px)); --fs-ui: var(--fs-base); /* 16px — evita el zoom automático de iOS */ --fs-ui-sm: var(--fs-md); --row-h: 64px; --gutter: var(--space-4); --panel-pad: var(--space-4); --sidebar-w: 100%; } /* El sidebar permanente no cabe: pasa a navegación inferior */ .gc-sidebar { display: none; } /* LA BARRA INFERIOR FLOTA, y no es decoración. Pegada al borde con un `border-top` de lado a lado, la barra leía como el final de la pantalla: la última fila de la tabla parecía cortada por ella y no se sabía si abajo había más. Separada del borde, con el papel del lienzo asomando por los cuatro lados, se lee como lo que es —una capa por encima del contenido— y el contenido se entiende que sigue por debajo. El alto se reserva con `--nav-bottom-h` y NO se adivina: antes el alto salía del alto de sus propios botones, así que ninguna pantalla podía dejar aire al pie y la última fila quedaba tapada. */ .gc-navbar-inferior { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3)); z-index: var(--z-sticky); display: flex; min-height: var(--nav-bottom-h); background: var(--surface-floating); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); box-shadow: var(--shadow-floating); } /* DOS CLASES, y no una. Un destino con hijos se dibuja como `