/* ═══════════════════════════════════════════════════════════════ foundation.css — la única fuente de verdad de color de Belk. Creado 2026-07-25. NINGUNA página lo carga todavía (Fase 2). ── 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, digitalizacion) → 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 */ /* ── 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 */ } /* ═══════════════════════════════════════════════════════════ Capa de compatibilidad. Se agrega UNA por archivo migrado, apuntando los nombres viejos a los nuevos. Así el CSS existente sigue funcionando sin tocar un solo var(). Cuando un archivo se queda sin usos de sus nombres viejos, se borra su bloque. 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); } ═══════════════════════════════════════════════════════════ */