/* Sistema de diseño Código Sur — single source of truth. Importado por landing, login, reset-password y panel. Cualquier cambio de paleta o tipografía va aquí. */ :root { --bg: #07090a; --bg-soft: #0b0e10; --bg-elev: #10141699; --bg-card: #0d1114; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --bd: rgba(255,255,255,0.08); --fg: #f3f5f4; --fg-dim: #9aa3a0; --fg-mute: #6b7571; --accent: oklch(0.82 0.15 210); /* cyan brand */ --accent-ink: #041418; --accent-2: oklch(0.78 0.14 210); --danger: #ff7a7a; --shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); --radius: 14px; --maxw: 1240px; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --sans: "Inter Tight", system-ui, -apple-system, sans-serif; --sidebar-w: 228px; --topbar-h: 52px; } /* ─── Tema claro (opt-in via data-theme="light" en ) ─────────────────── */ /* El sitio público se queda dark por decisión de marca. El panel ofrece toggle persistido en localStorage. Las variables aquí invierten la luminancia manteniendo la paleta cyan del accent. */ html[data-theme="light"] { --bg: #f7f8f7; --bg-soft: #ececec; --bg-elev: #ffffffd9; --bg-card: #ffffff; --line: rgba(0,0,0,0.08); --line-strong: rgba(0,0,0,0.16); --bd: rgba(0,0,0,0.08); --fg: #0c0f11; --fg-dim: #4a5559; --fg-mute: #6b7571; --accent: oklch(0.62 0.13 210); --accent-ink: #ffffff; --shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6); } /* ─── A11y: focus visible global ───────────────────────────────────────────── Todo elemento focusable muestra un anillo accesible al navegar con teclado. Se desactiva cuando el usuario interactúa con mouse (:focus-visible). */ :where(a, button, input, textarea, select, [tabindex]):focus { outline: none; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ─── A11y: skip-to-content ────────────────────────────────────────────────── Link oculto que aparece al primer Tab — permite a usuarios de teclado saltar la nav y llegar directo al contenido principal. */ .skip-to-content { position: fixed; top: -40px; left: 8px; z-index: 1000; padding: 8px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; transition: top .15s ease; } .skip-to-content:focus { top: 8px; } /* ─── A11y: prefers-reduced-motion ─────────────────────────────────────────── Respetamos la preferencia del sistema. Animaciones decorativas se reducen drásticamente; transiciones funcionales se acortan. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }