/* ============================================================ JW EN VIVO — DESIGN TOKENS (sistema visual definitivo, Fase 8) Identidad «Atrio» (admin) + «Atrio Señal» (público). Fuente de verdad: docs/diseno/04 y 05. Archivo ADITIVO: no elimina ni renombra nada del legacy. Se activa con o . ============================================================ */ /* ---------- Fuentes locales (subconjunto latin, variables) ---------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/fraunces-var-500-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/archivo-var-400-700-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500-normal.woff2') format('woff2'); } /* ---------- Tokens globales ---------- */ :root { /* papel y tinta */ --jv-paper: #f2f4f0; --jv-surface: #fbfcfa; --jv-surface-wash: #e4efe7; --jv-ink: #1c2a23; --jv-ink-2: #47564d; --jv-ink-3: #5d6d63; --jv-line: #d5ddd5; --jv-line-strong: #b7c3b9; /* marca */ --jv-primary: #0d5c3f; --jv-primary-deep: #0a4630; --jv-primary-ink: #123c2b; --jv-on-primary: #f4faf6; --jv-accent: #1d5a86; --jv-accent-wash: #e3edf4; /* semánticos */ --jv-ok: #0e6a43; --jv-ok-wash: #dfeee5; --jv-ok-border: #c4ddcf; --jv-warn: #7c4a03; --jv-warn-wash: #f6ead2; --jv-warn-border: #e7d3ab; --jv-warn-bar: #c07c14; --jv-danger: #a92c21; --jv-danger-wash: #f7e2df; --jv-danger-border: #ecc7c2; --jv-danger-control: #dfb4ae; /* tipografía */ --jv-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --jv-font-sans: 'Archivo', 'Segoe UI', system-ui, sans-serif; --jv-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace; /* forma */ --jv-radius: 10px; --jv-radius-sm: 6px; --jv-shadow-card: 0 1px 2px rgba(28, 42, 35, 0.06), 0 8px 24px -18px rgba(28, 42, 35, 0.25); --jv-shadow-overlay: 0 24px 64px -24px rgba(20, 32, 26, 0.5); --jv-focus: 0 0 0 2px #f2f4f0, 0 0 0 4px #1d5a86; /* ---------- movimiento (sistema, revisión senior 2026-07-19) ---------- Fuente de verdad: docs/diseno/08-sistema-movimiento.md. Solo se anima transform y opacity. --jv-dur/--jv-ease se conservan como alias de compatibilidad de lo ya escrito en Fase 8. */ --jv-motion-dur-1: 90ms; /* microrespuesta: press, toggles */ --jv-motion-dur-2: 160ms; /* base: hover, foco, controles */ --jv-motion-dur-3: 240ms; /* entradas de bloque, tarjetas */ --jv-motion-dur-4: 360ms; /* overlays, modales, paneles grandes */ --jv-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* desaceleración natural */ --jv-motion-ease-entrance: cubic-bezier(0.16, 0.84, 0.24, 1); /* entrada con llegada suave */ --jv-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* salida acelerada */ --jv-motion-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* microrebote contenido (elementos pequeños) */ --jv-motion-rise: 10px; /* desplazamiento de entrada estándar */ --jv-motion-rise-lg: 18px; /* desplazamiento de entrada para overlays */ --jv-motion-press: 0.97; /* escala de pulsación */ --jv-motion-stagger: 55ms; /* paso entre elementos escalonados */ /* alias de compatibilidad (Fase 8) */ --jv-dur: var(--jv-motion-dur-2); --jv-ease: var(--jv-motion-ease-standard); /* login premium (familia azul tecnológica) */ --jv-login-bg-1: #071626; --jv-login-bg-2: #0c2a44; --jv-login-bg-3: #12446b; --jv-login-panel: rgba(18, 52, 82, 0.42); --jv-login-panel-line: rgba(122, 208, 255, 0.55); --jv-login-control: #0b2946; --jv-login-control-line: #1d4c74; --jv-login-text: #eaf4fc; --jv-login-text-2: #a9c6dd; --jv-login-blue: #1e88d2; --jv-login-blue-2: #2ea8e8; --jv-login-cyan: #7ad0ff; --jv-login-focus: 0 0 0 2px #0c2a44, 0 0 0 4px #7ad0ff; } /* ---------- Base común (solo con opt-in .jv) ---------- */ body.jv { font-family: var(--jv-font-sans); color: var(--jv-ink); background: var(--jv-paper); -webkit-font-smoothing: antialiased; /* blindaje responsive: el sangrado de .row de BS3 (margen -15px) no debe producir scroll horizontal involuntario (Fase 9) */ overflow-x: clip; } body.jv ::selection { background: var(--jv-surface-wash); color: var(--jv-primary-deep); } /* foco visible universal */ body.jv :is(a, button, input, select, textarea, [tabindex], .btn):focus-visible { outline: none !important; box-shadow: var(--jv-focus) !important; border-radius: var(--jv-radius-sm); } /* utilitario: datos operativos (capa Señal) */ body.jv .jv-mono { font-family: var(--jv-font-mono); font-variant-numeric: tabular-nums; font-size: 0.875em; } /* accesibilidad: movimiento reducido */ @media (prefers-reduced-motion: reduce) { body.jv *, body.jv *::before, body.jv *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }