/* ═══════════════════════════════════════════════════════════════ 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. ── 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 DOS ZONAS ──────────────────────────────────────────── Herramientas (index, tapacanto, escaneo) → clara, por defecto. Documentos (presupuesto, cotizacion) → oscura: ═══════════════════════════════════════════════════════════ */ :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); } /* ═══════════════════════════════════════════════════════════ Capa de compatibilidad — TEMPORAL, tiene fecha de muerte. Cada .css tiene un bloque que apunta sus nombres viejos a estos tokens. Hoy quedan 821 usos en 9 archivos. ⚠️ Es deuda declarada, no un patrón a imitar: ver la FASE B de REESTRUCTURACION.md. Mientras exista, cada página habla dos vocabularios y quien copie el proyecto no sabe cuál es el bueno. NO se escriben aquí: van en el .css correspondiente, para que borrar el bloque sea borrar el archivo de esa página. Ejemplo, en css/cotizacion.css: :root{ --txt: var(--belk-text); --txt2: var(--belk-text-muted); --brd: var(--belk-border); --acc: var(--belk-brand); --bg: var(--belk-level-1); } ═══════════════════════════════════════════════════════════ */