/* ═══════════════════════════════════════════════════════════════ foundation.css — COLOR · pieza 1 de 4 del modelo Belk ─────────────────────────────────────────────────────────────── REQUIERE: nada. Va PRIMERO, antes que cualquier otro CSS. SE COPIA: sí, cambiando solo los valores. Los NOMBRES no se tocan. ─────────────────────────────────────────────────────────────── La única fuente de verdad de color de Belk. Creado 2026-07-25. EN PRODUCCIÓN desde el 2026-07-26: lo cargan las 9 páginas. Al CREAR UI nueva: Belk Solutions/SELLO-UI.md (este archivo no se reinterpreta). ── EL SISTEMA: profundidad por luminosidad ────────────────── Cuatro niveles. De afuera hacia adentro, más claro: nivel 0 marco, topbar ← lo que no es contenido nivel 1 lienzo ← separa el marco del trabajo nivel 2 paneles, tarjetas ← lo que rodea al trabajo nivel 3 superficie de trabajo ← el plano, el documento El NIVEL 3 ES BLANCO EN LAS DOS ZONAS. El papel es papel siempre; solo cambia el marco que lo rodea. Por eso el texto sobre el papel usa sus propios tokens (--belk-paper-*), que no dependen de la zona. ── EL FILO NO ES DECORACIÓN ───────────────────────────────── Los escalones entre niveles contiguos separan ~1,2 de contraste: se perciben, pero solo con borde. TODO contenedor lleva `border:1px solid var(--belk-border)` — sin él las capas se funden. ── LAS ZONAS ──────────────────────────────────────────────── Admin / default → clara (:root). Marketing (landing) → oscura: Taller (los 5 módulos) → paleta App Belk (marino + celeste): ═══════════════════════════════════════════════════════════ */ :root{ /* ── Niveles de profundidad — zona clara (por defecto) ───── */ --belk-level-0:#B1BFD8; /* marco, topbar */ --belk-level-1:#CDD8EA; /* lienzo */ --belk-level-2:#E4EBF8; /* paneles, tarjetas, métricas */ --belk-level-2-hi:#F2F6FD;/* el mismo panel en hover/activo — NO es un nivel */ --belk-level-3:#FFFFFF; /* superficie de trabajo */ /* ── Texto sobre el marco (niveles 0 a 2) ────────────────── */ --belk-text:#0D2350; /* 8,2 sobre el nivel 0 · 15,3 sobre el 3 */ --belk-text-muted:#414B5C;/* 4,7 en el peor nivel — no subir de aquí */ /* ── Marca ───────────────────────────────────────────────── */ --belk-brand:#143A7D; /* botón primario, topbar, módulo activo */ --belk-on-brand:#FFFFFF; /* 10,9 sobre --belk-brand */ --belk-brand-hover:#0F2E63; /* 13,2 */ --belk-link:#2C5AA8; /* enlaces dentro de texto */ /* ── Bordes y forma ──────────────────────────────────────── */ --belk-border:rgba(13,35,80,.10); --belk-border-strong:rgba(13,35,80,.18); --belk-radius:1rem; --belk-radius-sm:8px; --belk-shadow-1:0 2px 8px rgba(13,35,80,.08); --belk-shadow-2:0 8px 24px rgba(13,35,80,.16); /* ═══ Lo que sigue NO cambia con la zona ═══════════════════ */ /* ── El papel (nivel 3) — blanco en ambas zonas ──────────── */ --belk-paper:#FFFFFF; --belk-paper-text:#0D2350; /* 15,3 */ --belk-paper-muted:#414B5C; /* 8,8 */ --belk-paper-border:rgba(13,35,80,.10); --belk-paper-alt:#F5F8FC; /* bandas dentro del papel · texto 14,4 */ --belk-paper-sunken:#E9F0F9; /* campos y ghost sobre papel · muted 7,7 */ --belk-paper-hint:#69748A; /* SOLO placeholders: 4,7 sobre el papel. Con el muted (8,8) el placeholder se lee como dato ya escrito; con menos, no se lee. */ /* El papel necesita SU marca y SUS estados: en zona documento la marca es clara (#7FA0D4) y sobre blanco cae a 2,4. Estos no dependen de la zona porque el papel tampoco. */ --belk-paper-brand:#143A7D; /* 10,9 sobre el papel, y blanco encima 10,9 */ --belk-on-paper-brand:#FFFFFF; --belk-paper-ok:#2E6B4F; /* 6,3 */ --belk-paper-warn:#9C4A12; /* 6,2 */ --belk-paper-err:#8E3B31; /* 7,5 */ --belk-paper-err-soft:#F8E7E3; /* ── Acento — SOLO módulo activo y acción principal ─────── Si no es "estás aquí" o "la acción principal", va en marca. El texto encima es navy, no blanco: blanco daba 2,96. */ --belk-accent:#E87722; --belk-on-accent:#0D2350; /* 5,16 */ --belk-accent-hover:#F08A3E; /* ACLARA, no oscurece: al oscurecer el naranjo el navy de encima cae a 4,28 y pierde el AA. 6,12 */ /* ── Estado — ámbar, no naranjo, para no chocar con el acento. Los -soft son SÓLIDOS a propósito. Con alfa, el color efectivo dependía del nivel que tuvieran detrás y los chips se quedaban en 3,0 de contraste; sólidos son predecibles vayan donde vayan. Estos SÍ cambian por zona: texto oscuro sobre chip claro arriba, texto claro sobre chip oscuro en documento. */ --belk-ok:#275A42; --belk-ok-soft:#E4EFE9; /* bosque · 5,56 en el peor nivel */ --belk-warn:#9C4A12; --belk-warn-soft:#FBEADC; /* naranja quemado · 5,26 */ --belk-err:#8E3B31; --belk-err-soft:#F8E7E3; /* terracota · 6,22 */ /* El chip de marca (ej. "de pago" en un catálogo de planes) no es un estado, así que no vive en la familia ok/warn/err — pero necesita el mismo tratamiento SÓLIDO (§5.4): el nivel-2 ya resuelve 9,08 contra --belk-brand, así que es alias directo, no un color nuevo. */ --belk-brand-soft:var(--belk-level-2); /* ── Transición única ────────────────────────────────────── */ --belk-transition:.18s ease; } /* ═══════════════════════════════════════════════════════════ Zona documento — presupuesto y cotización. Mismos NOMBRES, otros valores. Solo cambian los niveles 0 a 2 y el texto del marco: el papel y el acento quedan igual. ═══════════════════════════════════════════════════════════ */ [data-zona="documento"]{ --belk-level-0:#050D19; --belk-level-1:#0D1B36; --belk-level-2:#16294A; --belk-level-2-hi:#1F375F; /* --belk-level-3 sigue siendo #FFFFFF a propósito */ --belk-text:#E8EDF7; /* 16,6 sobre el nivel 0 */ --belk-text-muted:#94A3BC; /* 5,7 en el peor nivel */ --belk-brand:#7FA0D4; /* la marca aclarada para respirar sobre oscuro */ --belk-on-brand:#0A1730; /* 6,7 sobre --belk-brand */ --belk-brand-hover:#A3BCE3;/* aclara, no oscurece: sobre fondo oscuro el hover sube */ --belk-link:#7FA0D4; /* 6,4 sobre el lienzo */ --belk-border:rgba(255,255,255,.10); --belk-border-strong:rgba(255,255,255,.18); --belk-shadow-1:0 2px 8px rgba(0,0,0,.25); --belk-shadow-2:0 8px 24px rgba(0,0,0,.35); /* Estado invertido: sobre fondo oscuro el verde/ámbar/rojo oscuros quedaban en 3,1 de contraste. Acá el chip es oscuro y el texto claro. */ --belk-ok:#7FCBA4; --belk-ok-soft:#14312A; /* 7,31 */ --belk-warn:#F0A868; --belk-warn-soft:#33200E; /* 7,76 */ --belk-err:#E09A90; --belk-err-soft:#331A16; /* 7,07 */ /* El nivel-0 (el marco, lo más oscuro de la zona) da 7,31 contra el --belk-brand aclarado de esta zona — mismo alias, mismo motivo. */ --belk-brand-soft:var(--belk-level-0); } /* ═══════════════════════════════════════════════════════════ Zona taller — los 5 módulos de trabajo + panel/diseño. Calca BelkMarino de la App Belk (theme.dart, 2026-08-10): fondo #0D1B2A, tarjetas blancas, relleno de acción #51C7F5. El celeste es RELLENO, nunca tinta (blanco encima da 1,9:1). El papel sigue blanco; las tarjetas re-mapean los tokens de marco a la familia --belk-paper-* (bloque al final). ═══════════════════════════════════════════════════════════ */ [data-zona="taller"]{ --belk-level-0:#0D1B2A; /* marco, header, drawer */ --belk-level-1:#0D1B2A; /* lienzo */ --belk-level-2:#16283B; /* panel levantado sobre marino */ --belk-level-2-hi:#1E3450; --belk-level-3:#FFFFFF; --belk-text:#F7F3E9; /* sobre el marco — 15,7 */ --belk-text-muted:#C4D0DF; /* atenuado sobre marino */ --belk-brand:#415A77; /* acero: tinta sobre tarjeta, no relleno */ --belk-on-brand:#F7F3E9; --belk-brand-hover:#2E4660; --belk-link:#8FDCFA; /* enlace sobre marino; dentro de tarjeta se re-mapea */ --belk-border:rgba(247,243,233,.10); --belk-border-strong:rgba(247,243,233,.18); --belk-shadow-1:0 2px 8px rgba(0,0,0,.28); --belk-shadow-2:0 8px 24px rgba(0,0,0,.40); --belk-accent:#51C7F5; --belk-on-accent:#0D1B2A; /* 8,98 — nunca blanco sobre este celeste */ --belk-accent-hover:#8FDCFA; --belk-ok:#7FCBA4; --belk-ok-soft:#14312A; --belk-warn:#F0A868; --belk-warn-soft:#33200E; --belk-err:#E09A90; --belk-err-soft:#331A16; --belk-brand-soft:var(--belk-level-0); /* Papel alineado a BelkMarino (sigue blanco; cambia la tinta) */ --belk-paper-text:#0D1B2A; --belk-paper-muted:#5A6B82; --belk-paper-sunken:#EDF1F6; --belk-paper-alt:#E7ECF3; --belk-paper-border:#D8DFE9; --belk-paper-brand:#415A77; --belk-on-paper-brand:#F7F3E9; } /* Dentro de una tarjeta blanca el texto de marco (crema) desaparece. Re-mapeamos los tokens de chrome a la familia del papel para que las reglas existentes (filas, labels, inputs) sigan resolviendo. */ [data-zona="taller"] .sb, [data-zona="taller"] .sec, [data-zona="taller"] .hero-card, [data-zona="taller"] .doc, [data-zona="taller"] .tb, [data-zona="taller"] .stabs-wrap, [data-zona="taller"] .stabs, [data-zona="taller"] .modal-box, [data-zona="taller"] .cat-modal-box, [data-zona="taller"] .saved-bar, [data-zona="taller"] .subpage-card, [data-zona="taller"] .pp-kpi, [data-zona="taller"] .wdemo, [data-zona="taller"] .svg-card, [data-zona="taller"] .tpl-card, [data-zona="taller"] .esc-confirm-box, [data-zona="taller"] .ds-look, [data-zona="taller"] .leg, [data-zona="taller"] .modal, [data-zona="taller"] .drw, [data-zona="taller"] .belk-install-card, [data-zona="taller"] .modal-hd{ --belk-text:var(--belk-paper-text); --belk-text-muted:var(--belk-paper-muted); --belk-brand:#415A77; --belk-on-brand:#F7F3E9; --belk-brand-hover:#2E4660; --belk-link:#415A77; --belk-border:var(--belk-paper-border); --belk-border-strong:var(--belk-paper-border); --belk-level-1:var(--belk-paper-sunken); --belk-level-2:var(--belk-paper-alt); --belk-level-2-hi:#F2F6FD; /* Verde oscurecido de #1A7A4A: sobre su propio -soft daba 4,31 y el preset "MDF 244×122" del panel se quedaba corto. Ahora 5,26. */ --belk-ok:#176B41; --belk-ok-soft:#D4EDDA; --belk-warn:#A05C00; --belk-warn-soft:#FFF3CD; --belk-err:#B91C1C; --belk-err-soft:#FEE2E2; } /* …y además fijan la TINTA. Re-mapear los tokens no basta: `color` se hereda, y quien no lo declare se queda con el crema del marco (#F7F3E9 de body) aunque el fondo bajo sus pies sea blanco. Así desaparecían la leyenda del plano (1,11:1) y los "Sin proyectos guardados" del cajón y del panel (1,56:1). FUERA de esta lista quedan los encabezados de marca (.modal-hd, .drw-hd): su fondo es acero y su texto es blanco por regla propia — una declaración siempre gana a lo heredado, así que siguen intactos. */ [data-zona="taller"] .sb, [data-zona="taller"] .sec, [data-zona="taller"] .hero-card, [data-zona="taller"] .doc, [data-zona="taller"] .tb, [data-zona="taller"] .stabs-wrap, [data-zona="taller"] .stabs, [data-zona="taller"] .modal-box, [data-zona="taller"] .cat-modal-box, [data-zona="taller"] .saved-bar, [data-zona="taller"] .subpage-card, [data-zona="taller"] .pp-kpi, [data-zona="taller"] .wdemo, [data-zona="taller"] .svg-card, [data-zona="taller"] .tpl-card, [data-zona="taller"] .esc-confirm-box, [data-zona="taller"] .ds-look, [data-zona="taller"] .leg, [data-zona="taller"] .modal, [data-zona="taller"] .drw, [data-zona="taller"] .belk-install-card{ color:var(--belk-text); } /* ═══════════════════════════════════════════════════════════ Capa de compatibilidad — CERRADA (Fase B, 2026-08-26). Los 9 CSS de página ya leen --belk-* directo, cada var() con respaldo. No reabrir bloques :root de alias. Los --neon de landing y los tintes de admin/enlaces son identidad (§8), no deuda de tema. Ver REESTRUCTURACION.md Fase B. ═══════════════════════════════════════════════════════════ */ /* ═══ CAMBIO DE MÓDULO SIN CORTE ═══════════════════════════════ Optimizador → Tapacanto → Costos → Cotización son páginas distintas, pero para el usuario del taller son pestañas del mismo trabajo. Con esto el navegador funde una en otra en vez de parpadear en blanco entre las dos. Es una mejora progresiva: Chrome 126+ y Safari 18.2+ la aplican, el resto simplemente navega como siempre. No reemplaza al espejo de BelkSession — el fundido tapa el cambio de documento, no una espera; la página de destino ya nace con sus datos puestos. ═══════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }