/* ═══════════════════════════════════════════════════════════════ 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-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; --belk-ok:#1A7A4A; --belk-ok-soft:#D4EDDA; --belk-warn:#A05C00; --belk-warn-soft:#FFF3CD; --belk-err:#B91C1C; --belk-err-soft:#FEE2E2; } /* ═══════════════════════════════════════════════════════════ 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. ═══════════════════════════════════════════════════════════ */