/* ═══════════════════════════════════════════════════════════════ css-theme.css Variables :root (tema oscuro), tema claro, reset, fondo base, aurora ambiental, scrollbar. (Parte de styles.css — el orden de respeta la cascada original) ═══════════════════════════════════════════════════════════════ */ :root { --bg-base: #07080a; --bg-surface: #0d0f12; --bg-element: #141619; --bg-hover: #1a1d22; --bg-card: #0f1115; --text-primary: #eef0f4; --text-secondary: #7a8090; --text-dim: #363b45; --border-color: #1c2028; --border-bright: #252b35; --border-glow: #2a3545; --accent-car: #4d9fff; --accent-car-dim: rgba(77,159,255,0.10); --accent-car-glow: rgba(77,159,255,0.25); --accent-moto: #00e5b0; --accent-moto-dim: rgba(0,229,176,0.10); --accent-moto-glow: rgba(0,229,176,0.25); --accent-gold: #f0b429; --accent-gold-dim: rgba(240,180,41,0.12); --accent-red: #ff4d6a; --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --transition: 0.18s cubic-bezier(0.4,0,0.2,1); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03); --shadow-hover: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(77,159,255,0.15); --shadow-lift: 0 4px 20px rgba(0,0,0,0.6); --header-bg: rgba(7,8,10,0.88); --modal-overlay: rgba(0,0,0,0.88); --bottom-bar-grad: rgba(255,255,255,0.022); --nav-btn-bg: rgba(7,8,10,0.45); --nav-btn-bg-hover: rgba(7,8,10,0.78); --nav-btn-color: rgba(255,255,255,0.55); --nav-btn-color-hover: rgba(255,255,255,0.92); --nav-btn-border: rgba(255,255,255,0.08); --nav-btn-border-hover: rgba(255,255,255,0.2); --close-x-bg: rgba(7,8,10,0.55); --gtile-action-bg: rgba(8,10,14,0.7); --cp-none-c1: #1c2028; --cp-none-c2: #252b35; /* Motion & efectos */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --accent-gold-glow: rgba(240,180,41,0.35); --sheen: rgba(255,255,255,0.09); --aurora-opacity: 1; /* Avisos sutiles (filtros activos / incompletos) */ --indicator-border: rgba(77,159,255,0.35); --indicator-bg: rgba(77,159,255,0.08); --indicator-fg: #8fc1ff; --indicator-badge-bg: rgba(77,159,255,0.16); } /* ── TEMA CLARO ── */ html[data-theme="light"] { --bg-base: #f0f2f5; --bg-surface: #ffffff; --bg-element: #e6e9ee; --bg-hover: #d8dce5; --bg-card: #f7f8fb; --text-primary: #0f1115; --text-secondary: #4a5060; --text-dim: #9aa0ae; --border-color: #d0d5de; --border-bright: #b8bfcc; --border-glow: #a0a8bc; --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05); --shadow-hover: 0 4px 20px rgba(0,0,0,0.1), 0 0 0 1px rgba(77,159,255,0.18); --shadow-lift: 0 4px 20px rgba(0,0,0,0.1); --header-bg: rgba(240,242,246,0.92); --modal-overlay: rgba(30,35,45,0.55); --bottom-bar-grad: rgba(0,0,0,0.018); --nav-btn-bg: rgba(240,242,246,0.72); --nav-btn-bg-hover: rgba(240,242,246,0.97); --nav-btn-color: rgba(15,17,21,0.5); --nav-btn-color-hover: rgba(15,17,21,0.9); --nav-btn-border: rgba(0,0,0,0.1); --nav-btn-border-hover: rgba(0,0,0,0.18); --close-x-bg: rgba(240,242,246,0.78); --gtile-action-bg: rgba(240,242,246,0.88); --cp-none-c1: #d0d5de; --cp-none-c2: #b8bfcc; --accent-gold-glow: rgba(200,140,10,0.30); --sheen: rgba(255,255,255,0.55); --aurora-opacity: 0.45; /* Avisos sutiles (filtros activos / incompletos) */ --indicator-border: rgba(24,95,165,0.32); --indicator-bg: rgba(24,95,165,0.07); --indicator-fg: #185fa5; --indicator-badge-bg: rgba(24,95,165,0.13); } * { box-sizing: border-box; margin: 0; padding: 0; } /* ── FONDO BASE en para que body::before sea visible ── */ html { background: var(--bg-base); } html[data-theme="light"] { background: #f0f2f5; } body { font-family: 'Outfit', system-ui, sans-serif; background-color: transparent; color: var(--text-primary); line-height: 1.5; padding: 1.75rem 2.25rem 3rem; min-height: 100vh; background-image: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(77,159,255,0.06) 0%, transparent 60%), linear-gradient(180deg, rgba(77,159,255,0.015) 0%, transparent 300px); } /* ── AURORA AMBIENTAL (deriva lenta de los tres acentos) ── */ body::before { content: ''; position: fixed; inset: -22%; z-index: -1; pointer-events: none; background: radial-gradient(45% 35% at 15% 22%, rgba(77,159,255,0.20), transparent 70%), radial-gradient(40% 32% at 86% 12%, rgba(0,229,176,0.17), transparent 70%), radial-gradient(36% 28% at 62% 86%, rgba(240,180,41,0.13), transparent 72%); opacity: var(--aurora-opacity); animation: auroraDrift 52s ease-in-out infinite alternate; will-change: transform; } @keyframes auroraDrift { from { transform: translate3d(-2.2%, -1.4%, 0) rotate(-1deg) scale(1); } to { transform: translate3d(2.2%, 1.8%, 0) rotate(1deg) scale(1.05); } } ::selection { background: var(--accent-car-glow); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--accent-car); outline-offset: 2px; border-radius: 4px; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }