/* ================================================================================ DIGITAL DOCUMENTS — HORIZONLABS ================================================================================ Archivo : public/assets/css/dd_tokens_2027.css Propósito : Sistema de tokens de diseño 2027 "Bóveda" para el sitio público. Base oscura profunda, superficies traslúcidas elevadas, tipografía sans condensada de gran escala y acentos cromáticos semánticos (ámbar = físico, cian = digital). Creado : 2026-09-09 02:05 Creado por : Desarrollador: Oscar Hernández Pérez / Asistente técnico: Claude (IA) Última modificación: 2026-09-09 03:25 Modificado por : Desarrollador: Oscar Hernández Pérez / Asistente técnico: Claude (IA) Motivo : La primera dirección ("editorial claro institucional": serif de gran escala, fondo papel cálido, filetes de 1px y rojo óxido) se leía como prensa impresa tradicional, no como 2027. Sus señales visuales apuntaban al pasado. Cambio realizado : Reemplazo integral del sistema cromático y tipográfico por la dirección "Bóveda": fondo casi negro frío, superficies de vidrio con borde interior, resplandores contenidos, display sans condensada de peso alto y paleta ámbar/cian de alta saturación controlada. Se conservan íntegros los nombres de token, por lo que ninguna vista PHP requiere modificación. Relacionado con : Carta de Diseño 2027, dd_site_2027.css, layouts/site.php. ================================================================================ NOTA DE AISLAMIENTO Este archivo NO reemplaza doc_tokens.css. El portal cliente/admin sigue consumiendo doc_tokens.css + doc_custom.css. Este sistema aplica exclusivamente a las vistas públicas cargadas por resources/views/layouts/site.php. ================================================================================ */ :root { /* ══════════════════════════════════════════════════════════════════════ 1. TIPOGRAFÍA Sin serif. El serif de gran escala era la principal señal de "antiguo". Display: sans condensada variable, peso alto y tracking muy cerrado — el registro tipográfico del software contemporáneo. Mono: se conserva para IDENTIFICADORES (caja, folio, sello, RUT). La monoespaciada tabular no envejece; es lo que hace que la interfaz se lea como un sistema real de custodia y no como un folleto. ══════════════════════════════════════════════════════════════════════ */ --dd-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --dd-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --dd-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace; /* ── Escala fluida (mobile-first, interpola entre 360px y 1600px) ───── Más grande y más cerrada que la versión anterior: la escala grande con tracking negativo es parte de lo que produce la lectura de "moderno". */ --dd-t-display: clamp(2.5rem, 1.15rem + 6.0vw, 5.25rem); --dd-t-h1: clamp(2rem, 1.15rem + 3.8vw, 3.5rem); --dd-t-h2: clamp(1.625rem, 1.05rem + 2.6vw, 2.75rem); --dd-t-h3: clamp(1.25rem, 1.0rem + 1.1vw, 1.75rem); --dd-t-h4: clamp(1.0625rem, 0.96rem + 0.45vw, 1.25rem); --dd-t-lead: clamp(1.0625rem, 0.97rem + 0.45vw, 1.3125rem); --dd-t-body: clamp(0.9375rem, 0.91rem + 0.15vw, 1.0625rem); --dd-t-sm: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); --dd-t-xs: 0.8125rem; --dd-t-micro: 0.6875rem; /* ── Interlineado y tracking ────────────────────────────────────────── */ --dd-lh-tight: 0.96; --dd-lh-snug: 1.14; --dd-lh-normal: 1.42; --dd-lh-relaxed: 1.6; --dd-lh-loose: 1.72; --dd-tr-display: -0.042em; --dd-tr-tight: -0.022em; --dd-tr-normal: 0; --dd-tr-wide: 0.06em; --dd-tr-caps: 0.14em; /* ── Medida de lectura ──────────────────────────────────────────────── */ --dd-measure-tight: 44ch; --dd-measure: 62ch; --dd-measure-wide: 74ch; /* ══════════════════════════════════════════════════════════════════════ 2. COLOR — BASE CORPORATIVA Azul-negro profundo, no negro neutro: la temperatura azul da profundidad y lee "corporativo" donde el negro puro lee "producto de consumo". ══════════════════════════════════════════════════════════════════════ */ --dd-void: #0a0e15; /* fondo base de página */ --dd-void-deep: #060910; /* pozos, marcos de media */ --dd-surface-1: #10151f; /* banda alterna */ --dd-surface-2: #161d29; /* superficie elevada */ --dd-surface-3: #1d2634; /* superficie sobre superficie */ /* Vidrio: superficies traslúcidas sobre el fondo. */ --dd-glass: rgba(255, 255, 255, 0.032); --dd-glass-strong: rgba(255, 255, 255, 0.055); --dd-glass-hover: rgba(255, 255, 255, 0.07); /* ── Tinta ──────────────────────────────────────────────────────────── */ --dd-ink: #eef1f6; --dd-ink-secondary: #a5aebe; --dd-ink-muted: #78828f; --dd-ink-faint: #576170; /* ── Bordes: alfa sobre el fondo, nunca un gris opaco ───────────────── */ --dd-rule: rgba(255, 255, 255, 0.07); --dd-rule-strong: rgba(255, 255, 255, 0.135); --dd-rule-ink: rgba(255, 255, 255, 0.2); /* ══════════════════════════════════════════════════════════════════════ 3. COLOR — ACENTOS SEMÁNTICOS (REGISTRO CORPORATIVO) Se conserva la regla del sistema —CÁLIDO = mundo físico, FRÍO = mundo digital— pero en saturación contenida. CORRECCIÓN 2026-09-09 (feedback del cliente interno): la versión previa usaba ámbar #ff7a45 y cian #2fd9c3 con resplandores. Resultado: "muy llamativo… recuerda que es UNA EMPRESA". El lenguaje de saturación alta más halo de color pertenece al software de consumo, no a un proveedor del Estado con 34 años de trayectoria vendiendo a banca y organismos públicos. Reemplazo: azul acero anclado al AZUL DEL LOGOTIPO REAL de Digital Documents como acento primario, y bronce apagado —usado con parquedad— para las marcas del mundo físico. Sin halos de color en ningún lado. ══════════════════════════════════════════════════════════════════════ */ /* Azul acero — acento primario. Ancla con la identidad azul de la marca. */ --dd-steel: #5d8fbf; --dd-steel-bright: #83aed6; --dd-steel-deep: #3f6b95; --dd-steel-wash: rgba(93, 143, 191, 0.10); --dd-steel-edge: rgba(93, 143, 191, 0.26); /* Bronce — el mundo físico (caja, sello, custodia, flota). Con parquedad. */ --dd-bronze: #ab8760; --dd-bronze-bright: #c3a181; --dd-bronze-deep: #8a6a48; --dd-bronze-wash: rgba(171, 135, 96, 0.10); --dd-bronze-edge: rgba(171, 135, 96, 0.26); /* Estados operativos, todos desaturados a registro institucional */ --dd-state-ok: #5f9478; --dd-state-ok-wash: rgba(95, 148, 120, 0.10); --dd-state-ok-edge: rgba(95, 148, 120, 0.26); --dd-state-transit: #a98a51; --dd-state-transit-wash: rgba(169, 138, 81, 0.10); --dd-state-transit-edge: rgba(169, 138, 81, 0.26); --dd-state-alert: #a4645a; --dd-state-alert-wash: rgba(164, 100, 90, 0.10); --dd-state-alert-edge: rgba(164, 100, 90, 0.26); /* ── Alias del sistema anterior (para no editar cada componente) ────── */ --dd-ember: var(--dd-bronze); --dd-ember-bright: var(--dd-bronze-bright); --dd-ember-deep: var(--dd-bronze-deep); --dd-ember-wash: var(--dd-bronze-wash); --dd-ember-edge: var(--dd-bronze-edge); --dd-cyan: var(--dd-steel); --dd-cyan-bright: var(--dd-steel-bright); --dd-cyan-deep: var(--dd-steel-deep); --dd-cyan-wash: var(--dd-steel-wash); --dd-cyan-edge: var(--dd-steel-edge); /* Luz ambiental: azul-gris frío y muy tenue. Se elimina el violeta. */ --dd-violet: #4a5f7d; --dd-violet-glow: rgba(74, 95, 125, 0.14); /* ══════════════════════════════════════════════════════════════════════ 4. ALIAS DE COMPATIBILIDAD Las vistas ya escritas usan estos nombres. Se remapean a la paleta nueva para que el cambio de dirección no obligue a editar ningún PHP. ══════════════════════════════════════════════════════════════════════ */ --dd-paper: var(--dd-void); --dd-paper-sunken: var(--dd-surface-1); --dd-paper-raised: var(--dd-surface-2); --dd-paper-tint: var(--dd-glass); --dd-seal: var(--dd-ember); --dd-seal-bright: var(--dd-ember-bright); --dd-seal-deep: var(--dd-ember-deep); --dd-seal-wash: var(--dd-ember-wash); --dd-custody: var(--dd-surface-3); --dd-custody-mid: var(--dd-surface-2); --dd-custody-deep: var(--dd-void-deep); --dd-custody-wash: var(--dd-glass); --dd-digital: var(--dd-cyan); --dd-digital-bright:var(--dd-cyan-bright); --dd-digital-wash: var(--dd-cyan-wash); --dd-kraft: var(--dd-state-transit); --dd-kraft-wash: var(--dd-state-transit-wash); --dd-vault-bg: var(--dd-surface-1); --dd-vault-bg-alt: var(--dd-surface-2); --dd-vault-ink: var(--dd-ink); --dd-vault-ink-muted: var(--dd-ink-secondary); --dd-vault-rule: var(--dd-rule); /* ══════════════════════════════════════════════════════════════════════ 5. ESPACIO ══════════════════════════════════════════════════════════════════════ */ --dd-s-1: 0.25rem; --dd-s-2: 0.5rem; --dd-s-3: 0.75rem; --dd-s-4: 1rem; --dd-s-5: 1.5rem; --dd-s-6: 2rem; --dd-s-7: 2.5rem; --dd-s-8: 3rem; --dd-s-9: 4rem; --dd-s-10: 5rem; --dd-section-y: clamp(3.5rem, 2rem + 5.6vw, 7.5rem); --dd-section-y-tight: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem); --dd-gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.75rem); --dd-flow: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); /* ── Contenedores ───────────────────────────────────────────────────── */ --dd-w-full: 1480px; --dd-w-wide: 1280px; --dd-w-page: 1080px; --dd-w-text: 720px; /* ══════════════════════════════════════════════════════════════════════ 6. FORMA Radios generosos en superficies (12-22px). La versión anterior usaba 2-5px por criterio editorial impreso, y eso endurecía toda la página. ══════════════════════════════════════════════════════════════════════ */ --dd-r-xs: 6px; --dd-r-sm: 8px; --dd-r-md: 12px; --dd-r-lg: 16px; --dd-r-xl: 22px; --dd-r-pill: 999px; --dd-hairline: 1px solid var(--dd-rule); --dd-hairline-strong: 1px solid var(--dd-rule-strong); --dd-hairline-ink: 1px solid var(--dd-rule-ink); /* ══════════════════════════════════════════════════════════════════════ 7. ELEVACIÓN Y LUZ Sobre fondo oscuro la elevación no se hace con sombra sino con un filete interior luminoso en el canto superior. Es lo que separa una superficie moderna de un simple rectángulo gris. ══════════════════════════════════════════════════════════════════════ */ --dd-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); --dd-elev-1: var(--dd-inset-top), 0 1px 2px rgba(0, 0, 0, 0.5); --dd-elev-2: var(--dd-inset-top), 0 8px 24px -10px rgba(0, 0, 0, 0.75); --dd-elev-3: var(--dd-inset-top), 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 4px 12px -4px rgba(0, 0, 0, 0.5); /* CORRECCIÓN 2026-09-09: los halos de color se retiran del sistema. Un resplandor cromático alrededor de botones, puntos de estado y campos es la señal más fuerte de "software de consumo" y fue lo que hizo leer la paleta como demasiado llamativa. La elevación queda sólo neutra: luz en el canto superior y sombra oscura difusa. */ --dd-glow-ember: 0 0 0 1px var(--dd-bronze-edge); --dd-glow-cyan: 0 0 0 1px var(--dd-steel-edge); /* Alias de compatibilidad para las sombras del sistema anterior */ --dd-lift: var(--dd-elev-1); --dd-lift-md: var(--dd-elev-2); --dd-lift-lg: var(--dd-elev-3); /* ══════════════════════════════════════════════════════════════════════ 8. MOVIMIENTO ══════════════════════════════════════════════════════════════════════ */ --dd-ease: cubic-bezier(0.32, 0.72, 0, 1); --dd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dd-fast: 160ms var(--dd-ease); --dd-normal: 280ms var(--dd-ease); --dd-slow: 620ms var(--dd-ease-out); /* ══════════════════════════════════════════════════════════════════════ 9. CAPAS ══════════════════════════════════════════════════════════════════════ */ --dd-z-base: 1; --dd-z-sticky: 100; --dd-z-nav: 200; --dd-z-overlay: 300; --dd-z-drawer: 400; --dd-z-top: 500; /* ══════════════════════════════════════════════════════════════════════ 10. ACCESIBILIDAD / TÁCTIL ══════════════════════════════════════════════════════════════════════ */ --dd-touch: 44px; --dd-focus-ring: 2px solid var(--dd-cyan); --dd-focus-offset: 3px; /* El navegador dibuja controles nativos (barras, selección) acorde al tema */ color-scheme: dark; } /* ══════════════════════════════════════════════════════════════════════════ RESPETO A PREFERENCIAS DEL SISTEMA ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --dd-fast: 1ms; --dd-normal: 1ms; --dd-slow: 1ms; } }