/* ─── GALAXY — el TEMA ATREVIDO ★ ─── Estrellas globales en el body (visibles en los márgenes detrás del módulo). Header con starfield, glow morado cósmico, cards con border violet glow, acento magenta + cyan duotono. */ html[data-abk-variant="galaxy"] { --abk-accent: #c026d3; /* fuchsia-600 */ --abk-accent-2: #a21caf; /* fuchsia-700 */ --abk-accent-soft: #f0abfc; /* fuchsia-300 */ --abk-accent-glow: rgba(192,38,211,.40); --abk-pink: #c026d3; --abk-pink-glow: rgba(192,38,211,.45); /* Sombras con doble halo violet+magenta */ --abk-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(192,38,211,.10); --abk-shadow-2: 0 4px 16px rgba(76,29,149,.12), 0 0 18px rgba(34,211,238,.08); --abk-shadow-3: 0 8px 24px rgba(76,29,149,.18), 0 0 24px rgba(192,38,211,.15); --abk-shadow-modal: 0 20px 60px rgba(76,29,149,.25), 0 0 80px rgba(192,38,211,.20); } /* HEADER per-theme: - DARK: cosmic deep (gradient noir → violet → magenta → blue) - LIGHT: holographic prismatic (saturated pastels — magenta + cyan + violet) */ /* LIGHT — módulos con lavado fucsia sutil (identidad Galaxy, legible) */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) { --abk-surface: #f7eafd; --abk-surface-2: #efd6fb; --abk-border-section: rgba(192,38,211,.22); --abk-border-soft: rgba(192,38,211,.12); --abk-text-heading: #a21caf; /* títulos fucsia-profundo (h1/h2) */ --abk-text-heading-soft: #c026d3; } html[data-abk-variant="galaxy"][data-theme="dark"] { --header-bg: linear-gradient(110deg, #050020 0%, #1e1b4b 25%, #4c1d95 55%, #7c2d92 80%, #1e3a8a 100%) !important; --header-border: rgba(192, 38, 211, .50) !important; --header-shadow: rgba(192, 38, 211, .35) !important; /* ── CANDELA Galaxy (dark): módulos en violeta-fucsia profundo SATURADO que destacan del lienzo. Borde fucsia vivo + halo violeta. ── */ --abk-surface: #2c1456; --abk-surface-2: #3a1a6b; --abk-bg-2: #2c1456; --abk-border-section: rgba(192,38,211,.50); --abk-border-soft: rgba(192,38,211,.24); --abk-border-strong: rgba(217,70,239,.70); --abk-shadow-1: 0 2px 10px rgba(0,0,0,.40), 0 0 0 1px rgba(192,38,211,.14), 0 10px 30px rgba(147,51,234,.32); --abk-text-heading: #e879f9; /* títulos fucsia-claro en dark (h1/h2) */ --abk-text-heading-soft: #f0abfc; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) { /* HEADER LIGHT BOLD — gradient prismático saturado. Mid-tones (500-700) para que el texto blanco se lea y conserve el carácter cosmic. NO es pastel: es magenta-violet-cyan a tope. */ --header-bg: linear-gradient(110deg, #d946ef 0%, #a855f7 28%, #6d28d9 55%, #0891b2 82%, #0284c7 100%) !important; --header-border: rgba(192, 38, 211, .55) !important; --header-shadow: rgba(192, 38, 211, .42) !important; } html[data-abk-variant="galaxy"] .abk-h1::after { background: linear-gradient(90deg, #c026d3 0%, #67e8f9 50%, #f0abfc 100%); box-shadow: 0 0 16px rgba(192,38,211,.50); height: 4px; } html[data-abk-variant="galaxy"] .abk-card:hover { border-color: #c026d3; box-shadow: var(--abk-shadow-3), 0 0 28px rgba(192,38,211,.25), 0 0 14px rgba(34,211,238,.15); } /* En LIGHT: hovers con triple-glow iridiscente magenta + cyan + violeta */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .abk-card:hover { border-color: #c026d3; box-shadow: 0 12px 32px -8px rgba(76, 29, 149, .18), 0 0 24px rgba(192, 38, 211, .22), 0 0 38px rgba(34, 211, 238, .15), 0 0 48px rgba(168, 85, 247, .12); } html[data-abk-variant="galaxy"] .abk-input:focus, html[data-abk-variant="galaxy"] .abk-textarea:focus, html[data-abk-variant="galaxy"] .abk-select:focus, html[data-abk-variant="galaxy"] .abk-btn:focus-visible { box-shadow: 0 0 0 3px rgba(192,38,211,.35), 0 0 22px rgba(192,38,211,.40), 0 0 44px rgba(34,211,238,.18); } /* Galaxy STATUS-STRIP cósmico — DARK */ html[data-abk-variant="galaxy"][data-theme="dark"] .status-strip { background: linear-gradient(110deg, rgba(5,0,32,.92) 0%, rgba(30,27,75,.88) 35%, rgba(124,45,146,.85) 70%, rgba(30,58,138,.90) 100%); border-bottom: 1px solid rgba(192,38,211,.40); box-shadow: 0 2px 18px rgba(192,38,211,.22); } /* LIGHT — strip prismático bold y SATURADO (matching el header). Las pills de adentro tienen sus propios bg sólidos, así que el strip puede ser punchy. Texto blanco lee bien. */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .status-strip { background: linear-gradient(110deg, rgba(217, 70, 239, .92) 0%, rgba(168, 85, 247, .90) 28%, rgba(109, 40, 217, .88) 55%, rgba(8, 145, 178, .90) 82%, rgba(2, 132, 199, .92) 100%); border-bottom: 1px solid rgba(192, 38, 211, .55); box-shadow: 0 2px 22px rgba(192, 38, 211, .30); } /* ★ Starfield global Galaxy — estrellas detrás del módulo (margins visibles) ★ */ /* Galaxy: el bandeo cosmic gradient se aplica al body como bg PLANO. Las estrellas se aplican vía un wrapper JS-injected (#abk-galaxy-stars) que vive en position:fixed y no afecta el flow del documento. Esto garantiza CERO layout shift sin importar resolución/zoom/UA. Ver dashboard.js → initGalaxyStarfield() GALAXY LIGHT vs DARK — distinción crítica: - DARK: cosmic profundo (deep space) con starfield brillante - LIGHT: iridiscente / holográfico (galaxia al amanecer) con shimmer magenta+cyan+violet sobre base pearl-lavender. Mantiene identidad cosmic via header/sidebar pero el LIENZO es etéreo. */ /* GALAXY DARK — cosmic profundo (lo de siempre). Scoped a body.layout para no derramar al login (login.php usa sin .layout, y tiene su propio bg en styles.css). */ html[data-abk-variant="galaxy"][data-theme="dark"] body.layout { background: linear-gradient(135deg, #050020 0%, #0d0820 30%, #1e1b4b 70%, #050020 100%) !important; } /* GALAXY LIGHT — iridiscente / holográfico ATREVIDO ★ Nebulosa de día: bursts BOLD magenta+cyan+violet+pink+sky sobre base pearl. Las cards blancas resaltan como islas sobre la galaxia. NO es sutil — Galaxy es atrevido. */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) body.layout { background: radial-gradient(1100px 700px at 10% 15%, rgba(192, 38, 211, .25), transparent 60%), radial-gradient(950px 600px at 92% 85%, rgba(34, 211, 238, .22), transparent 60%), radial-gradient(820px 520px at 55% 50%, rgba(168, 85, 247, .18), transparent 60%), radial-gradient(700px 480px at 30% 92%, rgba(244, 114, 182, .20), transparent 60%), radial-gradient(650px 450px at 80% 12%, rgba(125, 211, 252, .18), transparent 60%), linear-gradient(135deg, #fdf4ff 0%, #fae8ff 25%, #f0f9ff 50%, #fdf4ff 75%, #fae8ff 100%) !important; } #abk-galaxy-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* Lado izquierdo */ radial-gradient(1.2px 1.2px at 5% 8%, rgba(255,255,255,.95), transparent 50%), radial-gradient(1px 1px at 12% 18%, rgba(196,181,253,.85), transparent 50%), radial-gradient(1.5px 1.5px at 22% 6%, rgba(255,255,255,1), transparent 50%), radial-gradient(1px 1px at 30% 22%, rgba(255,255,255,.70), transparent 50%), radial-gradient(1.5px 1.5px at 8% 28%, rgba(103,232,249,.90), transparent 50%), radial-gradient(1px 1px at 16% 38%, rgba(255,255,255,.65), transparent 50%), radial-gradient(2px 2px at 4% 45%, rgba(240,171,252,.95), transparent 50%), radial-gradient(1px 1px at 14% 55%, rgba(255,255,255,.75), transparent 50%), radial-gradient(1.5px 1.5px at 22% 68%, rgba(255,255,255,.90), transparent 50%), radial-gradient(1px 1px at 8% 80%, rgba(196,181,253,.70), transparent 50%), radial-gradient(1.5px 1.5px at 18% 92%, rgba(255,255,255,.85), transparent 50%), radial-gradient(1px 1px at 6% 98%, rgba(103,232,249,.65), transparent 50%), /* Lado derecho */ radial-gradient(1.5px 1.5px at 88% 10%, rgba(255,255,255,1), transparent 50%), radial-gradient(1px 1px at 95% 20%, rgba(196,181,253,.80), transparent 50%), radial-gradient(2px 2px at 92% 32%, rgba(240,171,252,.90), transparent 50%), radial-gradient(1px 1px at 86% 45%, rgba(255,255,255,.65), transparent 50%), radial-gradient(1.5px 1.5px at 96% 58%, rgba(255,255,255,.85), transparent 50%), radial-gradient(1px 1px at 90% 70%, rgba(103,232,249,.75), transparent 50%), radial-gradient(1.5px 1.5px at 94% 82%, rgba(255,255,255,.90), transparent 50%), radial-gradient(1px 1px at 88% 92%, rgba(196,181,253,.70), transparent 50%); opacity: .85; /* Display solo cuando la variante galaxy está activa */ display: none; } html[data-abk-variant="galaxy"] #abk-galaxy-stars { display: block; } /* Stars en LIGHT: shimmer holográfico — dots prismáticos pastel densos sobre el lienzo pearl. Reemplazamos el background-image (no la opacity) para tener stars de tono específico que se vean en bg claro. */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) #abk-galaxy-stars { opacity: .65; mix-blend-mode: multiply; background-image: /* Lado izquierdo — magenta + cyan + violeta pastel */ radial-gradient(1.8px 1.8px at 5% 8%, rgba(192, 38, 211, .55), transparent 55%), radial-gradient(1.4px 1.4px at 12% 18%, rgba(168, 85, 247, .45), transparent 55%), radial-gradient(2.2px 2.2px at 22% 6%, rgba(34, 211, 238, .55), transparent 55%), radial-gradient(1.4px 1.4px at 30% 22%, rgba(244, 114, 182, .45), transparent 55%), radial-gradient(2px 2px at 8% 28%, rgba(192, 38, 211, .50), transparent 55%), radial-gradient(1.4px 1.4px at 16% 38%, rgba(34, 211, 238, .45), transparent 55%), radial-gradient(2.4px 2.4px at 4% 45%, rgba(168, 85, 247, .55), transparent 55%), radial-gradient(1.4px 1.4px at 14% 55%, rgba(244, 114, 182, .40), transparent 55%), radial-gradient(2px 2px at 22% 68%, rgba(125, 211, 252, .50), transparent 55%), radial-gradient(1.4px 1.4px at 8% 80%, rgba(168, 85, 247, .45), transparent 55%), radial-gradient(2.2px 2.2px at 18% 92%, rgba(192, 38, 211, .55), transparent 55%), radial-gradient(1.4px 1.4px at 6% 98%, rgba(34, 211, 238, .50), transparent 55%), /* Lado derecho */ radial-gradient(2.2px 2.2px at 88% 10%, rgba(192, 38, 211, .55), transparent 55%), radial-gradient(1.4px 1.4px at 95% 20%, rgba(168, 85, 247, .45), transparent 55%), radial-gradient(2.4px 2.4px at 92% 32%, rgba(244, 114, 182, .55), transparent 55%), radial-gradient(1.4px 1.4px at 86% 45%, rgba(34, 211, 238, .45), transparent 55%), radial-gradient(2px 2px at 96% 58%, rgba(192, 38, 211, .50), transparent 55%), radial-gradient(1.4px 1.4px at 90% 70%, rgba(125, 211, 252, .50), transparent 55%), radial-gradient(2.2px 2.2px at 94% 82%, rgba(168, 85, 247, .55), transparent 55%), radial-gradient(1.4px 1.4px at 88% 92%, rgba(244, 114, 182, .45), transparent 55%); } /* Galaxy: body::after — nebula glow PER THEME (DARK definido más abajo, junto al starfield denso para no fragmentar el bloque). LIGHT aquí: */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) body.layout::after { opacity: .50 !important; background: radial-gradient(900px 500px at 12% 90%, rgba(192,38,211,.18), transparent 60%), radial-gradient(800px 450px at 90% 10%, rgba(34,211,238,.18), transparent 60%), radial-gradient(700px 450px at 50% 30%, rgba(168,85,247,.10), transparent 60%) !important; mix-blend-mode: multiply !important; } /* Galaxy: el módulo (main-content) sigue blanco/light pero con borde glow */ html[data-abk-variant="galaxy"] .main-content > * { position: relative; } /* Sidebar Galaxy PER-THEME: - DARK: cosmic deep gradient (noir profundo) - LIGHT: pearl-lavender iridiscente con shimmer holográfico */ html[data-abk-variant="galaxy"][data-theme="dark"] { --sidebar-bg: linear-gradient(180deg, #050020 0%, #1e1b4b 50%, #4c1d95 100%) !important; --sidebar-hover: #f0abfc !important; --sidebar-icon: #c4b5fd !important; --main-bg: rgba(5, 0, 32, .82) !important; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) { /* SIDEBAR LIGHT BOLD — cosmic violet profundo a magenta saturado. Sigue siendo "light theme" porque el body es pearl, pero el sidebar es DEEP por carácter Galaxy. Texto blanco lee bien sobre estos tonos (violet-700/800 + fuchsia-600). */ --sidebar-bg: linear-gradient(180deg, #312e81 0%, #4c1d95 28%, #6d28d9 58%, #a21caf 85%, #c026d3 100%) !important; --sidebar-hover: #f0abfc !important; --sidebar-icon: #c4b5fd !important; /* Main bg: white translúcido para que el body iridiscente se vea bajo las cards del módulo */ --main-bg: rgba(255, 255, 255, .55) !important; } html[data-abk-variant="galaxy"] .sidebar { box-shadow: 0 0 30px rgba(192,38,211,.30); } /* DARK sidebar items — cosmic profundo con accents magenta */ html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li { color: #cbd5e1; } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li:hover { color: #f0abfc; background: rgba(192,38,211,.18); border-left-color: #c026d3; } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li.active { background: linear-gradient(135deg, #4c1d95 0%, #7c2d92 50%, #1e3a8a 100%); color: #ffffff; box-shadow: 0 4px 18px rgba(192,38,211,.45), inset 0 0 18px rgba(34,211,238,.10); } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li svg { stroke: #94a3b8; } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li:hover svg, html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar ul li.active svg { stroke: #f0abfc; filter: drop-shadow(0 0 4px rgba(192,38,211,.50)); } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar .submenu > li { color: #94a3b8; } html[data-abk-variant="galaxy"][data-theme="dark"] .sidebar .submenu > li:hover { color: #f0abfc; background: rgba(192,38,211,.15); } /* LIGHT sidebar items — texto violet-claro sobre el bg cosmic deep. Active queda con gradient prismático brillante para destacar como una estrella sobre el cosmos. */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li { color: #ddd6fe; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li:hover { color: #ffffff; background: rgba(255, 255, 255, .10); border-left-color: #f0abfc; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li.active { background: linear-gradient(135deg, #f0abfc 0%, #c026d3 35%, #a855f7 65%, #22d3ee 100%); color: #ffffff; box-shadow: 0 4px 22px rgba(192, 38, 211, .55), 0 0 28px rgba(34, 211, 238, .28), inset 0 0 18px rgba(255, 255, 255, .18); text-shadow: 0 1px 3px rgba(76, 29, 149, .50); border-left-color: transparent; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li svg { stroke: #c4b5fd; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li:hover svg { stroke: #f0abfc; filter: drop-shadow(0 0 5px rgba(240, 171, 252, .55)); } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar ul li.active svg { stroke: #ffffff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .65)); } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar .submenu > li { color: #c4b5fd; } html[data-abk-variant="galaxy"]:not([data-theme="dark"]) .sidebar .submenu > li:hover { color: #f0abfc; background: rgba(255, 255, 255, .08); } /* Galaxy DARK — STARFIELD INMERSIVO ★ Más estrellas, NEBULOSAS visibles cruzando, banda galáctica diagonal. 3 tiers de estrellas: gigantes brillantes + medianas + sparkles + dust. Y nebulosa de 4 bursts cromáticos visibles. */ html[data-theme="dark"][data-abk-variant="galaxy"] body.layout { background-color: #020010; background-image: /* TIER 1 — Estrellas GIGANTES brillantes (las protagonistas) */ radial-gradient(3px 3px at 4% 45%, rgba(240,171,252,1), transparent 50%), radial-gradient(2.8px 2.8px at 22% 6%, rgba(255,255,255,1), transparent 50%), radial-gradient(3px 3px at 50% 18%, rgba(192,38,211,.95), transparent 50%), radial-gradient(2.8px 2.8px at 65% 70%, rgba(34,211,238,1), transparent 50%), radial-gradient(3px 3px at 92% 32%, rgba(240,171,252,1), transparent 50%), radial-gradient(2.8px 2.8px at 88% 10%, rgba(255,255,255,1), transparent 50%), radial-gradient(2.6px 2.6px at 35% 88%, rgba(244,114,182,.95), transparent 50%), radial-gradient(3px 3px at 78% 55%, rgba(168,85,247,.95), transparent 50%), /* TIER 2 — Estrellas MEDIANAS densas en todo el viewport */ radial-gradient(1.8px 1.8px at 5% 8%, rgba(255,255,255,1), transparent 50%), radial-gradient(1.5px 1.5px at 12% 18%, rgba(196,181,253,.95), transparent 50%), radial-gradient(1.5px 1.5px at 30% 22%, rgba(240,171,252,.85), transparent 50%), radial-gradient(2px 2px at 8% 28%, rgba(103,232,249,1), transparent 50%), radial-gradient(1.5px 1.5px at 16% 38%, rgba(255,255,255,.85), transparent 50%), radial-gradient(1.5px 1.5px at 14% 55%, rgba(255,255,255,.90), transparent 50%), radial-gradient(2px 2px at 22% 68%, rgba(255,255,255,1), transparent 50%), radial-gradient(1.5px 1.5px at 8% 80%, rgba(196,181,253,.85), transparent 50%), radial-gradient(1.8px 1.8px at 18% 92%, rgba(255,255,255,1), transparent 50%), radial-gradient(1.5px 1.5px at 6% 98%, rgba(103,232,249,.80), transparent 50%), radial-gradient(1.8px 1.8px at 95% 20%, rgba(196,181,253,.95), transparent 50%), radial-gradient(1.5px 1.5px at 86% 45%, rgba(255,255,255,.80), transparent 50%), radial-gradient(2px 2px at 96% 58%, rgba(255,255,255,1), transparent 50%), radial-gradient(1.8px 1.8px at 90% 70%, rgba(103,232,249,.90), transparent 50%), radial-gradient(2px 2px at 94% 82%, rgba(255,255,255,1), transparent 50%), radial-gradient(1.5px 1.5px at 88% 92%, rgba(196,181,253,.85), transparent 50%), /* TIER 3 — Estrellas en el CENTRO (zona desértica antes) */ radial-gradient(1.5px 1.5px at 35% 40%, rgba(255,255,255,.85), transparent 50%), radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,.70), transparent 50%), radial-gradient(2px 2px at 55% 30%, rgba(244,114,182,.90), transparent 50%), radial-gradient(1.5px 1.5px at 60% 80%, rgba(125,211,252,.85), transparent 50%), radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.80), transparent 50%), radial-gradient(2px 2px at 75% 25%, rgba(192,38,211,.90), transparent 50%), radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,.75), transparent 50%), radial-gradient(1.5px 1.5px at 40% 88%, rgba(168,85,247,.85), transparent 50%), radial-gradient(1.5px 1.5px at 28% 52%, rgba(255,255,255,.78), transparent 50%), radial-gradient(1px 1px at 52% 42%, rgba(196,181,253,.70), transparent 50%), radial-gradient(1.5px 1.5px at 68% 62%, rgba(240,171,252,.82), transparent 50%), radial-gradient(1px 1px at 25% 72%, rgba(103,232,249,.75), transparent 50%), radial-gradient(1.5px 1.5px at 72% 85%, rgba(255,255,255,.85), transparent 50%), radial-gradient(1px 1px at 15% 62%, rgba(244,114,182,.70), transparent 50%), /* TIER 4 — Star dust / sparkles MICROS (atmosfera densa) */ radial-gradient(.8px .8px at 18% 14%, rgba(255,255,255,.55), transparent 50%), radial-gradient(.8px .8px at 32% 32%, rgba(255,255,255,.50), transparent 50%), radial-gradient(.8px .8px at 48% 50%, rgba(196,181,253,.55), transparent 50%), radial-gradient(.8px .8px at 66% 18%, rgba(255,255,255,.55), transparent 50%), radial-gradient(.8px .8px at 82% 38%, rgba(244,114,182,.55), transparent 50%), radial-gradient(.8px .8px at 92% 55%, rgba(255,255,255,.50), transparent 50%), radial-gradient(.8px .8px at 38% 78%, rgba(125,211,252,.55), transparent 50%), radial-gradient(.8px .8px at 58% 92%, rgba(255,255,255,.55), transparent 50%), radial-gradient(.8px .8px at 12% 85%, rgba(196,181,253,.50), transparent 50%), /* NEBULOSAS — 4 bursts cromáticos visibles */ radial-gradient(1100px 600px at 70% 25%, rgba(192, 38, 211, .22), transparent 60%), radial-gradient(1000px 550px at 25% 75%, rgba(34, 211, 238, .18), transparent 60%), radial-gradient(800px 450px at 50% 50%, rgba(168, 85, 247, .15), transparent 60%), radial-gradient(700px 400px at 88% 88%, rgba(244, 114, 182, .15), transparent 60%), /* GALACTIC PLANE — banda diagonal sutil (la "vía láctea") */ linear-gradient(20deg, transparent 35%, rgba(168, 85, 247, .10) 50%, transparent 65%), /* BASE — gradient deep void con tinte violeta */ linear-gradient(135deg, #020010 0%, #0a0420 30%, #1e0840 55%, #050020 100%) !important; } /* Galaxy DARK — twinkle global suave en el wrapper de stars */ @keyframes galaxy-twinkle { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } html[data-theme="dark"][data-abk-variant="galaxy"] #abk-galaxy-stars { animation: galaxy-twinkle 4s ease-in-out infinite; } /* Galaxy DARK — body::after más visible (nebulosa frontal con screen blend) */ html[data-abk-variant="galaxy"][data-theme="dark"] body.layout::after { opacity: .35 !important; background: radial-gradient(1100px 600px at 12% 90%, rgba(192,38,211,.55), transparent 60%), radial-gradient(1000px 550px at 90% 10%, rgba(34,211,238,.45), transparent 60%), radial-gradient(800px 500px at 50% 50%, rgba(168,85,247,.30), transparent 60%) !important; mix-blend-mode: screen !important; } /* ===== IDENTIDAD: color de ACCIÓN (primary ramp) por tema — light + dark. Cascada a botones, links, focus, tabs activos, contorno del h1, badges. ===== */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) { --abk-primary: #c026d3; --abk-primary-2: #a21caf; --abk-primary-3: #d946ef; --abk-primary-deep: #86198f; --abk-primary-soft: #f0abfc; --abk-primary-ink: #ffffff; --abk-primary-glow: rgba(192,38,211,.35); --abk-text-on-primary: #ffffff; --abk-text-link: #a21caf; } html[data-theme="dark"][data-abk-variant="galaxy"] { --abk-primary: #d946ef; --abk-primary-2: #c026d3; --abk-primary-3: #e879f9; --abk-primary-deep: #a21caf; --abk-primary-soft: #f0abfc; --abk-primary-ink: #2a0830; --abk-primary-glow: rgba(217,70,239,.45); --abk-text-on-primary: #2a0830; --abk-text-link: #e879f9; } /* IDENTIDAD: focus de inputs/controles por tema */ html[data-abk-variant="galaxy"]:not([data-theme="dark"]) { --abk-input-border-focus: #c026d3; --abk-input-ring: rgba(192,38,211,.30); } html[data-theme="dark"][data-abk-variant="galaxy"] { --abk-input-border-focus: #d946ef; --abk-input-ring: rgba(217,70,239,.35); }