/* ============================================================ WINPRO — sistema de diseño. Dos ejes en : data-paleta="origen|fria|contraste|sobria|clara|clara-calida" data-diseno="solido|cristal|franja" Los tokens se nombran por FUNCION, nunca por color. NINGUN componente escribe un color a mano: si un color no existe como variable, se agrega a TODAS las paletas. El oro esta MEDIDO del logo real (logo_cotizacion.png, 800x385): rampa metalica #99753C -> #B8A580 -> #F2E0A5. El #D4AF37 de la identidad es su extremo de brillo. Los doce colores de cada paleta estan comprobados WCAG >= 4.5 contra su fondo real. ============================================================ */ :root,:root[data-paleta="origen"]{ --color-fondo:#0B0D10; --color-fondo-2:#0E1116; --color-superficie:#14171C; --color-superficie-2:#1A1E25; --color-campo:#101318; --color-borde:#252A32; --color-celda:#12151A; --color-borde-celda:#242932; --color-acento:#D4AF37; --color-acento-2:#B8A580; --color-tinta:#0B0D10; --color-sombra:rgba(212,175,55,.22); --color-texto:#E8E6E1; --color-texto-suave:#9A968C; --logo:url(/logo-sobre-oscuro.png); } :root[data-paleta="fria"]{ --color-fondo:#0B1420; --color-fondo-2:#0E1826; --color-superficie:#132335; --color-superficie-2:#182B40; --color-campo:#0F1C2B; --color-borde:#20364C; --color-celda:#112031; --color-borde-celda:#1F3448; --color-acento:#D4AF37; --color-acento-2:#B8A580; --color-tinta:#0B1420; --color-sombra:rgba(212,175,55,.22); --color-texto:#E6EEF8; --color-texto-suave:#94A3B8; --logo:url(/logo-sobre-oscuro.png); } :root[data-paleta="contraste"]{ --color-fondo:#000; --color-fondo-2:#050505; --color-superficie:#111; --color-superficie-2:#171717; --color-campo:#0A0A0A; --color-borde:#2A2A2A; --color-celda:#0D0D0D; --color-borde-celda:#282828; --color-acento:#D4AF37; --color-acento-2:#B8A580; --color-tinta:#000; --color-sombra:rgba(212,175,55,.26); --color-texto:#F7F7F2; --color-texto-suave:#A8A49B; --logo:url(/logo-sobre-oscuro.png); } :root[data-paleta="sobria"]{ --color-fondo:#101012; --color-fondo-2:#141417; --color-superficie:#1B1B20; --color-superficie-2:#212127; --color-campo:#161619; --color-borde:#2B2B32; --color-celda:#18181C; --color-borde-celda:#2A2A31; --color-acento:#C2A873; --color-acento-2:#99753C; --color-tinta:#101012; --color-sombra:rgba(194,168,115,.20); --color-texto:#EFECE7; --color-texto-suave:#9C978E; --logo:url(/logo-sobre-oscuro.png); } :root[data-paleta="clara"]{ --color-fondo:#F2F2F0; --color-fondo-2:#EAEAE7; --color-superficie:#FFF; --color-superficie-2:#F7F7F5; --color-campo:#F4F4F2; --color-borde:#DCDCD7; --color-celda:#FAFAF8; --color-borde-celda:#E2E2DD; --color-acento:#7D6118; --color-acento-2:#99753C; --color-tinta:#FFF; --color-sombra:rgba(125,97,24,.16); --color-texto:#14171C; --color-texto-suave:#5E5A52; --logo:url(/logo-sobre-claro.png); } :root[data-paleta="clara-calida"]{ --color-fondo:#F7F4E9; --color-fondo-2:#F0ECDD; --color-superficie:#FFFDF6; --color-superficie-2:#FAF7EC; --color-campo:#F5F2E5; --color-borde:#E2DCC7; --color-celda:#FCFAF1; --color-borde-celda:#E8E2CF; --color-acento:#7A5F16; --color-acento-2:#99753C; --color-tinta:#FFFDF6; --color-sombra:rgba(122,95,22,.16); --color-texto:#1A1710; --color-texto-suave:#5C5445; --logo:url(/logo-sobre-claro.png); } /* Los colores que SIGNIFICAN algo se agrupan por LUMINOSIDAD, no por paleta, y se declaran DESPUES para no pisar nada de arriba. */ :root,:root[data-paleta="origen"],:root[data-paleta="fria"], :root[data-paleta="contraste"],:root[data-paleta="sobria"]{ --color-ok:#3FBF7F; --color-alerta:#E0A02A; --color-mal:#E5544A; --color-neutro:#8A8680; --color-area-1:#E08A3C; --color-area-2:#5AB0DE; --color-area-3:#E5768C; --color-area-4:#B892E0; --color-area-5:#4FC8A6; --color-riel:rgba(255,255,255,.08); --color-realce:rgba(255,255,255,.05); --color-lateral-texto:#9A968C; --color-lateral-activo:rgba(255,255,255,.05); } :root[data-paleta="clara"],:root[data-paleta="clara-calida"]{ --color-ok:#1B7A4B; --color-alerta:#8A6212; --color-mal:#B3261E; --color-neutro:#6B6760; --color-area-1:#8F4E10; --color-area-2:#15607F; --color-area-3:#9C2440; --color-area-4:#5E3391; --color-area-5:#0E6350; --color-riel:rgba(0,0,0,.08); --color-realce:rgba(0,0,0,.04); --color-lateral-texto:#5E5A52; --color-lateral-activo:rgba(0,0,0,.04); } :root{ --font-display:'Archivo','Helvetica Neue',Arial,sans-serif; --font-sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; /* La escala: cuatro pasos y nada entremedio. 12px es EL PISO. */ --letra-rotulo:12px; --letra-apoyo:13px; --letra-base:14px; --letra-destaca:16px; --trama-paso:32px; --radio-solido:.75rem; --radio-cristal:1.25rem; --radio-franja:.5rem; --radio-interno:12px; } /* ── EJE 2 · FORMA ────────────────────────────────────────────── Cristal va SIN backdrop-filter a proposito: con muchas tarjetas desenfocando sobre la trama, el navegador se congela (comprobado en Chrome, 23-08-2026). La translucidez sola ya deja ver la trama, que era el punto. */ [data-diseno="solido"] .tarjeta{ background:var(--color-superficie); border-radius:var(--radio-solido); } [data-diseno="cristal"] .tarjeta{ background:linear-gradient(160deg, color-mix(in srgb,var(--color-superficie) 80%,transparent), color-mix(in srgb,var(--color-superficie-2) 62%,transparent)); border-color:color-mix(in srgb,var(--color-borde) 70%,transparent); border-radius:var(--radio-cristal); } [data-diseno="franja"] .tarjeta{ background:var(--color-superficie); border-radius:var(--radio-franja); border-top:2px solid var(--color-acento); } /* El halo del acento SOLO existe en Cristal. */ [data-diseno="cristal"] .halo{ box-shadow:0 0 0 1px var(--color-borde),0 8px 34px -12px var(--color-sombra); }