/* ==========================================================================
   GALAXIA — el tema insignia de HADES One
   Regla de rendimiento: todo lo que se mueve usa sólo transform/opacity
   (lo resuelve la GPU sin repintar). Nada de desenfoques sobre fondos animados.
   ========================================================================== */

/* Capas sólo visibles en Galaxia */
.gx,.gx-only{display:none}
.app[data-theme="galaxia"] .gx,
.app[data-theme="galaxia"] .gx-only{display:block}

.app[data-theme="galaxia"]{background:#05020c}
.app[data-theme="galaxia"] .app-fx{background:linear-gradient(160deg,#06030e 0%,#0d0720 55%,#14072a 100%);overflow:hidden}

/* Nebulosas: manchas de color que respiran y se desplazan */
.gx-neb{position:absolute;border-radius:50%;will-change:transform;pointer-events:none}
.gx-neb-1{width:70%;height:80%;right:-18%;top:-30%;background:radial-gradient(closest-side,rgba(168,85,247,.55),rgba(124,58,237,.18) 55%,transparent);animation:gx-neb-a 22s ease-in-out infinite alternate}
.gx-neb-2{width:60%;height:70%;left:-20%;bottom:-35%;background:radial-gradient(closest-side,rgba(232,121,249,.38),rgba(190,24,93,.12) 60%,transparent);animation:gx-neb-b 28s ease-in-out infinite alternate}
.gx-neb-3{width:45%;height:50%;left:30%;top:25%;background:radial-gradient(closest-side,rgba(99,102,241,.22),transparent);animation:gx-neb-a 34s ease-in-out infinite alternate-reverse}
@keyframes gx-neb-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8%,6%,0) scale(1.15)}}
@keyframes gx-neb-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(10%,-8%,0) scale(.95)}}

/* Galaxia espiral girando detrás del panel */
.gx-spiral{position:absolute;right:4%;top:52%;width:540px;height:540px;margin-top:-270px;transform:rotateX(64deg) rotateZ(-18deg);pointer-events:none;opacity:.85}
.gx-spiral i{position:absolute;inset:0;border-radius:50%;will-change:transform;animation:gx-spin 60s linear infinite;
  background:
    radial-gradient(circle,rgba(255,240,255,.9) 0,rgba(240,171,252,.55) 4%,rgba(168,85,247,.25) 12%,transparent 30%),
    conic-gradient(from 0deg,transparent 0 6%,rgba(192,132,252,.45) 10%,transparent 20% 39%,rgba(240,171,252,.38) 43%,transparent 53% 72%,rgba(129,140,248,.4) 76%,transparent 86%);
  -webkit-mask:radial-gradient(circle,#000 0,#000 30%,rgba(0,0,0,.45) 52%,transparent 70%);mask:radial-gradient(circle,#000 0,#000 30%,rgba(0,0,0,.45) 52%,transparent 70%)}
.gx-spiral i:nth-child(2){animation-duration:90s;transform:rotate(40deg);opacity:.6;
  background:conic-gradient(from 90deg,transparent 0 12%,rgba(255,255,255,.22) 15%,transparent 24% 45%,rgba(255,255,255,.18) 48%,transparent 57% 78%,rgba(255,255,255,.2) 81%,transparent 90%)}
@keyframes gx-spin{to{transform:rotate(360deg)}}

/* Campo estelar en dos profundidades + titileo */
.gx-stars{position:absolute;inset:-20%;pointer-events:none;will-change:transform,opacity;
  background-image:
    radial-gradient(1px 1px at 20px 30px,#fff,transparent 60%),
    radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.6px 1.6px at 60px 160px,#f5d0fe,transparent 60%),
    radial-gradient(1px 1px at 170px 120px,#fff,transparent 60%),
    radial-gradient(1.3px 1.3px at 90px 200px,#c7d2fe,transparent 60%);
  background-size:210px 230px}
.gx-stars-1{animation:gx-drift 120s linear infinite,gx-twinkle 4s ease-in-out infinite alternate}
.gx-stars-2{background-size:330px 300px;opacity:.6;animation:gx-drift 200s linear infinite reverse,gx-twinkle 6s ease-in-out infinite alternate-reverse}
@keyframes gx-drift{to{transform:translate3d(210px,230px,0)}}
@keyframes gx-twinkle{from{opacity:.45}to{opacity:1}}

/* Estrellas fugaces */
.gx-comet{position:absolute;width:160px;height:2px;border-radius:2px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(240,171,252,.6) 70%,#fff)}
.gx-comet-1{top:12%;left:58%;animation:gx-comet 9s ease-in 2s infinite}
.gx-comet-2{top:34%;left:82%;animation:gx-comet 13s ease-in 6s infinite}
@keyframes gx-comet{0%{opacity:0;transform:rotate(-28deg) translateX(0)}2%{opacity:1}9%{opacity:0;transform:rotate(-28deg) translateX(-520px)}100%{opacity:0;transform:rotate(-28deg) translateX(-520px)}}

/* Salto al hiperespacio al elegir Galaxia */
.gx-warp{position:absolute;inset:0;z-index:30;pointer-events:none;display:none;overflow:hidden}
.app[data-theme="galaxia"].is-warping .gx-warp{display:block}
.gx-warp:before{content:"";position:absolute;left:50%;top:50%;width:1600px;height:1600px;margin:-800px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 3.2deg,rgba(233,213,255,.85) 3.2deg 3.5deg,transparent 3.5deg 7deg,rgba(240,171,252,.6) 7deg 7.2deg);
  -webkit-mask:radial-gradient(circle,transparent 0 6%,#000 30%,transparent 70%);mask:radial-gradient(circle,transparent 0 6%,#000 30%,transparent 70%);
  animation:gx-warp .95s cubic-bezier(.2,.7,.3,1) forwards}
.gx-warp:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85),rgba(192,132,252,.35) 25%,transparent 60%);animation:gx-flash .95s ease-out forwards}
@keyframes gx-warp{0%{transform:scale(.15) rotate(0);opacity:0}25%{opacity:1}100%{transform:scale(2.4) rotate(8deg);opacity:0}}
@keyframes gx-flash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
.app[data-theme="galaxia"].is-warping .app-hello,
.app[data-theme="galaxia"].is-warping .app-kpi,
.app[data-theme="galaxia"].is-warping .app-panel{animation:gx-arrive .9s cubic-bezier(.16,1,.3,1) backwards}
.app[data-theme="galaxia"].is-warping .app-kpi:nth-child(2){animation-delay:.05s}
.app[data-theme="galaxia"].is-warping .app-kpi:nth-child(3){animation-delay:.1s}
.app[data-theme="galaxia"].is-warping .app-kpi:nth-child(4){animation-delay:.15s}
.app[data-theme="galaxia"].is-warping .app-panel{animation-delay:.2s}
@keyframes gx-arrive{from{opacity:0;transform:scale(.92) translateY(18px)}}
.app[data-theme="galaxia"].is-warping .app-chart .line{stroke-dasharray:900;stroke-dashoffset:900;animation:gx-draw 1.4s .35s cubic-bezier(.65,0,.35,1) forwards}
@keyframes gx-draw{to{stroke-dashoffset:0}}

/* Superficies de cristal (sin desenfoque: degradados translúcidos + luz interior) */
.app[data-theme="galaxia"] .app-side{background:linear-gradient(180deg,rgba(16,9,34,.9),rgba(7,4,16,.94));border-right:1px solid rgba(196,181,253,.12);box-shadow:inset -1px 0 0 rgba(232,121,249,.08)}
.app[data-theme="galaxia"] .app-top{background:linear-gradient(90deg,rgba(14,8,30,.85),rgba(20,10,40,.6))}
.app[data-theme="galaxia"] .app-nav.is-active{background:linear-gradient(100deg,rgba(167,139,250,.34),rgba(232,121,249,.12));box-shadow:inset 0 0 0 1px rgba(196,181,253,.3),0 0 24px rgba(167,139,250,.25)}
.app[data-theme="galaxia"] .app-nav.is-active:before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)}
.app[data-theme="galaxia"] .app-kpi,
.app[data-theme="galaxia"] .app-panel{background:linear-gradient(150deg,rgba(38,22,74,.72),rgba(14,8,32,.66));border-color:rgba(196,181,253,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 40px rgba(124,58,237,.08),0 22px 44px rgba(0,0,0,.35)}
.app[data-theme="galaxia"] .app-kpi i{background:linear-gradient(135deg,rgba(167,139,250,.4),rgba(232,121,249,.28));color:#fff;box-shadow:0 0 16px rgba(167,139,250,.4)}
.app[data-theme="galaxia"] .app-kpi b{text-shadow:0 0 18px rgba(196,181,253,.5)}
.app[data-theme="galaxia"] .app-kpi:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-110%);animation:gx-shine 7s ease-in-out infinite}
.app[data-theme="galaxia"] .app-kpi:nth-child(2):after{animation-delay:.4s}
.app[data-theme="galaxia"] .app-kpi:nth-child(3):after{animation-delay:.8s}
.app[data-theme="galaxia"] .app-kpi:nth-child(4):after{animation-delay:1.2s}
@keyframes gx-shine{0%,70%{transform:translateX(-110%)}90%,100%{transform:translateX(110%)}}

/* Banner con borde de luz giratorio, planeta anillado y luna en órbita */
.app[data-theme="galaxia"] .app-hello{border:0;padding:1px;background:none;box-shadow:0 20px 50px rgba(76,29,149,.35)}
.app[data-theme="galaxia"] .app-hello:before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;will-change:transform;
  background:conic-gradient(from 0deg,rgba(196,181,253,.15),#c084fc 12%,rgba(196,181,253,.15) 25%,rgba(196,181,253,.15) 50%,#f0abfc 62%,rgba(196,181,253,.15) 75%);animation:gx-spin 8s linear infinite}
.app[data-theme="galaxia"] .gx-hello{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 20px;border-radius:calc(var(--radius) - 1px);overflow:hidden;
  background:linear-gradient(115deg,#2a0f5c 0%,#170b35 48%,#3b0d4f 100%)}
.gx-hello{display:contents}
.app[data-theme="galaxia"] .app-hello h3{background:linear-gradient(100deg,#fff,#e9d5ff 45%,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.app[data-theme="galaxia"] .app-btn{margin-right:150px;box-shadow:0 8px 24px rgba(192,132,252,.45)}
.gx-planet{position:absolute;right:60px;top:50%;width:54px;height:54px;margin-top:-27px;z-index:0;pointer-events:none}
.gx-planet:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,#f5d0fe 10%,#c084fc 34%,#6d28d9 64%,#2e1065 100%);box-shadow:0 0 30px rgba(192,132,252,.75),inset -6px -6px 14px rgba(20,0,40,.55)}
.gx-planet:after{content:"";position:absolute;left:-26px;right:-26px;top:50%;height:16px;margin-top:-8px;border-radius:50%;border:2px solid rgba(240,171,252,.7);border-top-color:transparent;transform:rotate(-16deg);box-shadow:0 0 14px rgba(240,171,252,.4)}
.gx-moon{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;animation:gx-spin 9s linear infinite;will-change:transform}
.gx-moon:before{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a5b4fc 60%,#4338ca);box-shadow:0 0 10px #a5b4fc}

.app[data-theme="galaxia"] .app-chart .line{stroke:url(#chartStroke)}
.app[data-theme="galaxia"] .app-chart .stop-1{stop-color:#c084fc;stop-opacity:.55}
.app[data-theme="galaxia"] .app-chart .stop-2{stop-color:#7c3aed;stop-opacity:0}
.app[data-theme="galaxia"] .chart-dot{background:#f0abfc;box-shadow:0 0 0 3px #1a0d36,0 0 18px #f0abfc}
.app[data-theme="galaxia"] .app-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 16px rgba(232,121,249,.55)}
.app[data-theme="galaxia"] .app-row{background:linear-gradient(100deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:rgba(196,181,253,.14)}

/* Miniatura */
.thumb[data-theme="galaxia"]{background:radial-gradient(ellipse at 80% 10%,rgba(168,85,247,.55),transparent 60%),radial-gradient(ellipse at 10% 100%,rgba(232,121,249,.35),transparent 60%),#07040f}
.thumb[data-theme="galaxia"] .thumb-fx{background-image:radial-gradient(1px 1px at 12px 14px,#fff,transparent 60%),radial-gradient(1px 1px at 52px 40px,#fff,transparent 60%),radial-gradient(1px 1px at 30px 70px,#e9d5ff,transparent 60%);background-size:70px 80px;opacity:.7}

/* ==========================================================================
   Tarjeta insignia del catálogo (borde de luz por rotación, no por repintado)
   ========================================================================== */
.tcard--featured{isolation:isolate}
.tcard--featured .feat-ring{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1}
.tcard--featured .feat-ring:before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;margin:-80% 0 0 -80%;will-change:transform;
  background:conic-gradient(from 0deg,transparent 0 20%,#c084fc 30%,#f0abfc 36%,transparent 46% 70%,#818cf8 80%,transparent 90%);animation:gx-spin 6s linear infinite}
.tcard--featured .feat-ring:after{content:"";position:absolute;inset:1.5px;border-radius:15px;background:radial-gradient(ellipse at 20% 30%,rgba(124,58,237,.42),transparent 60%),linear-gradient(140deg,#0c0619,#1a0b33 60%,#2a0b3d)}
.tcard--featured:before{display:none}

/* ==========================================================================
   Ecosistema en Galaxia: el núcleo es un agujero negro con disco de acreción
   ========================================================================== */
.bh{display:none}
body[data-theme="galaxia"] .bh{display:block;position:absolute;left:50%;top:50%;pointer-events:none}
body[data-theme="galaxia"] .bh-disk{width:clamp(300px,34vw,480px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-12deg) scaleY(.3);z-index:1}
body[data-theme="galaxia"] .bh-front{z-index:4;-webkit-mask:linear-gradient(transparent 50%,#000 52%);mask:linear-gradient(transparent 50%,#000 52%)}
body[data-theme="galaxia"] .bh-disk i{position:absolute;inset:0;border-radius:50%;will-change:transform;animation:gx-spin 7s linear infinite;
  background:conic-gradient(from 0deg,#fff1fb,#f0abfc 12%,rgba(168,85,247,.75) 30%,rgba(99,102,241,.35) 45%,#f5d0fe 62%,rgba(192,132,252,.8) 80%,#fff1fb);
  -webkit-mask:radial-gradient(circle,transparent 0 21%,#000 24%,rgba(0,0,0,.75) 40%,transparent 68%);mask:radial-gradient(circle,transparent 0 21%,#000 24%,rgba(0,0,0,.75) 40%,transparent 68%)}
body[data-theme="galaxia"] .bh-glow{width:clamp(340px,38vw,540px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(240,171,252,.35),rgba(124,58,237,.18) 35%,transparent 65%)}
@keyframes gx-pulse{50%{transform:scale(1.12);opacity:.7}}
body[data-theme="galaxia"] .orbit-core{background:radial-gradient(circle,#000 0 52%,#14052b 60%,#7c3aed 68%,#f5d0fe 72%,rgba(192,132,252,.4) 78%,transparent 82%);box-shadow:0 0 50px rgba(192,132,252,.6),0 0 120px rgba(168,85,247,.35);color:#f5d0fe}
body[data-theme="galaxia"] .orbit-core svg{filter:none;width:34%;height:34%;opacity:.95}
body[data-theme="galaxia"] .core-halo{display:none}
body[data-theme="galaxia"] .eco-neb{display:block}
.eco-neb{display:none;position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.eco-neb-1{width:70%;height:70%;left:-15%;top:-20%;background:radial-gradient(closest-side,rgba(168,85,247,.35),transparent);animation:gx-neb-a 26s ease-in-out infinite alternate}
.eco-neb-2{width:60%;height:60%;right:-15%;bottom:-20%;background:radial-gradient(closest-side,rgba(232,121,249,.28),transparent);animation:gx-neb-b 30s ease-in-out infinite alternate}

/* Modo ligero: todo quieto */
.fx-lite .gx-neb,.fx-lite .gx-spiral i,.fx-lite .gx-stars,.fx-lite .gx-comet,.fx-lite .gx-moon,.fx-lite .app-kpi:after,
.fx-lite .app-hello:before,.fx-lite .feat-ring:before,.fx-lite .bh-disk i,.fx-lite .bh-glow,.fx-lite .eco-neb{animation:none!important}
.fx-lite .gx-comet,.fx-lite .gx-warp{display:none!important}