/* ============================================================================
   AniiLive · piel NOCTURNA  ("Noche de Idyll")
   ----------------------------------------------------------------------------
   Se carga DESPUES de estilos.css, secciones.css y tema_noche.css, asi que
   manda sobre los dos. Todo va bajo html[data-tema="noche"], de modo que en
   modo claro este fichero no cambia absolutamente nada.

   Idea: el mismo caramelo, pero de noche. Fondo de cielo morado profundo con
   nebulosas, cristales ahumados, el neon rosa de siempre y estrellas detras.
   ========================================================================== */

/* ------------------------------------------------------------------ paleta */
html[data-tema="noche"]{
  --bg:#17102e; --bg2:#1d1440;
  --panel:rgba(38,28,70,.74); --panel2:#221845; --card:rgba(35,25,66,.78);
  --line:#3b2c66; --line2:#4b3485;
  --tx:#f0eaff; --tx2:#bdaee4; --tx3:#8f80bb;
  --acc:#ff5fd9; --acc2:#ffd23d; --ok:#43e3a3; --bad:#ff7091;
  --sh:0 18px 40px -18px rgba(0,0,0,.75), 0 0 34px -14px rgba(168,107,255,.45);
  /* los pasteles de dia se vuelven tintes hondos de noche (los usan los fondos) */
  --mint:#123a35; --peach:#3a2030; --lav:#2a2050; --sky:#1b2a52; --lemon:#3a3116; --bubble:#3d1a45;
  --fondo-medido:rgb(26,18,54);      /* lo lee el motor de contraste */
}

/* ------------------------------------------------------------------- fondo */
html[data-tema="noche"] body{
  background:
    radial-gradient(980px 660px at 8% -10%, #2b1e5c 0%, transparent 62%),
    radial-gradient(820px 560px at 94% 0%, #4a1c50 0%, transparent 60%),
    radial-gradient(900px 680px at 46% 116%, #14304a 0%, transparent 62%),
    linear-gradient(180deg,#191137 0%,#150f2c 55%,#1a1039 100%);
  background-attachment:fixed;
}
html[data-tema="noche"] body::before{
  opacity:.62;
  background:
    radial-gradient(closest-side, rgba(255,79,216,.26), transparent 70%) 12% 22%/48vmax 48vmax no-repeat,
    radial-gradient(closest-side, rgba(140,90,255,.30), transparent 70%) 84% 30%/44vmax 44vmax no-repeat,
    radial-gradient(closest-side, rgba(37,223,255,.18), transparent 70%) 62% 88%/46vmax 46vmax no-repeat;
}

/* ---- capa de estrellas (lienzo WebGL): detras de todo, sin capturar clics */
#galaxia{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .9s ease;mix-blend-mode:screen}
html[data-tema="noche"] #galaxia{opacity:.95}
html[data-tema="noche"] .burbujas{z-index:1}
html[data-tema="noche"] .burbujas i{
  background:radial-gradient(circle at 34% 30%, #fff8e6 0%, rgba(255,214,150,.45) 40%, rgba(255,214,150,0) 72%),
             linear-gradient(140deg, rgba(255,214,120,.35), rgba(255,120,220,.28));
  box-shadow:0 0 22px rgba(255,205,120,.35) inset, 0 0 26px -6px rgba(255,190,110,.35);
  opacity:.75
}

/* ------------------------------------------------------- cristales ahumados */
html[data-tema="noche"] .side{
  background:linear-gradient(180deg,rgba(46,34,88,.86),rgba(28,20,58,.82));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 48px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(168,107,255,.28) inset,
             0 0 44px -14px rgba(255,79,216,.40);
}
html[data-tema="noche"] main{
  background:linear-gradient(180deg,rgba(40,29,78,.62),rgba(24,17,50,.58));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 52px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(168,107,255,.22) inset;
}
html[data-tema="noche"] .topbar{
  background:linear-gradient(92deg,rgba(78,32,84,.55),rgba(52,32,104,.5) 55%,rgba(24,58,74,.45));
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px)
}
html[data-tema="noche"] .topbar h1{color:#f6f0ff}
html[data-tema="noche"] .topbar .sub{color:#a596d0}
html[data-tema="noche"] .brand b{
  background:linear-gradient(92deg,#ff8ae0,#c79bff 45%,#7ee9ff 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,120,220,.35))
}
html[data-tema="noche"] .brand small{color:#a596d0}
html[data-tema="noche"] .brand .logo{
  background:radial-gradient(circle at 32% 28%,#4b3a86 0%,#3a1f5c 42%,#241a4a 78%,#1a1440 100%);
  box-shadow:0 10px 26px -10px rgba(255,79,216,.65), 0 0 0 2px rgba(255,255,255,.14) inset
}
html[data-tema="noche"] .brand .logo__aro{
  background:conic-gradient(from 200deg,#ff4fd8,#25dfff,#a8ff3e,#a86bff,#ff4fd8);
  opacity:1;filter:blur(.2px) drop-shadow(0 0 8px rgba(255,79,216,.5))
}

/* ---- navegacion */
html[data-tema="noche"] .nav button{color:#bdaee4}
html[data-tema="noche"] .nav button i{
  background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:0 4px 12px -6px rgba(0,0,0,.7)
}
html[data-tema="noche"] .nav button:hover{background:rgba(255,255,255,.07);color:#f2ecff}
html[data-tema="noche"] .nav button.on{
  background:linear-gradient(100deg,#ff3fce,#b25cff 55%,#7b4dff);
  box-shadow:0 14px 30px -12px rgba(255,63,206,.8), 0 0 0 1px rgba(255,255,255,.22) inset,
             0 0 26px -6px rgba(255,79,216,.55)
}
html[data-tema="noche"] .nav button.on i{background:#fdf6ff}
html[data-tema="noche"] .nav button.on i,
html[data-tema="noche"] .nav button.on{color:#fff}
html[data-tema="noche"] .side .pie{
  background:linear-gradient(180deg,rgba(46,34,88,.8),rgba(30,21,60,.75));
  border:1px solid rgba(255,255,255,.09);color:#bdaee4
}
html[data-tema="noche"] .side .pie b{color:#f0eaff}
html[data-tema="noche"] .pie__nota a{color:#c79bff}

/* --------------------------------------------------------------- piezas */
html[data-tema="noche"] .card{
  background:linear-gradient(180deg,rgba(44,32,84,.82),rgba(26,18,54,.78));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(168,107,255,.20) inset
}
html[data-tema="noche"] .card:hover{
  border-color:rgba(255,120,220,.45);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.9), 0 0 30px -12px rgba(255,79,216,.55)
}
html[data-tema="noche"] .chip,
html[data-tema="noche"] .badge,
html[data-tema="noche"] .tag,
html[data-tema="noche"] .btn,
html[data-tema="noche"] input[type=text],
html[data-tema="noche"] input[type=search],
html[data-tema="noche"] select,
html[data-tema="noche"] .buscar-global input{
  background:linear-gradient(180deg,rgba(52,38,96,.9),rgba(34,24,70,.9));
  border-color:rgba(180,150,255,.22);color:#eee6ff;
  box-shadow:0 8px 18px -14px rgba(0,0,0,.9)
}
html[data-tema="noche"] .chip:hover,
html[data-tema="noche"] .btn:hover,
html[data-tema="noche"] input:focus,
html[data-tema="noche"] select:focus{
  border-color:rgba(255,120,220,.6);color:#fff
}
html[data-tema="noche"] .buscar-global input::placeholder{color:#8f80bb}
html[data-tema="noche"] .chip.on,
html[data-tema="noche"] .btn.prim,
html[data-tema="noche"] .btn.on{
  background:linear-gradient(100deg,#ff3fce,#b25cff);
  border-color:rgba(255,255,255,.35);color:#fff;
  box-shadow:0 12px 26px -12px rgba(255,63,206,.85)
}
html[data-tema="noche"] .bg-lista{
  background:linear-gradient(180deg,#2a1f52,#1d1540);
  border:1px solid rgba(180,150,255,.25);
  box-shadow:0 26px 56px -18px rgba(0,0,0,.9)
}
html[data-tema="noche"] .bg-item{border-bottom:1px solid rgba(180,150,255,.14)}
html[data-tema="noche"] .bg-item:hover,
html[data-tema="noche"] .bg-item.sel{background:linear-gradient(92deg,rgba(255,79,216,.16),rgba(120,90,255,.14))}
html[data-tema="noche"] .bg-item img{background:linear-gradient(140deg,#2a2050,#1b2a52)}
html[data-tema="noche"] .tabla th{color:#a596d0;border-bottom:2px solid rgba(180,150,255,.22)}
html[data-tema="noche"] .tabla td{border-bottom:1px solid rgba(180,150,255,.12)}
html[data-tema="noche"] .tabla tr:hover td{background:rgba(255,255,255,.045)}
html[data-tema="noche"] .hint{color:#9b8cc6}
html[data-tema="noche"] hr{border-color:rgba(180,150,255,.18)}
html[data-tema="noche"] .velo{background:rgba(8,5,20,.72)}

/* las fotos opacas (mapas) no deben deslumbrar de noche */
html[data-tema="noche"] img[src*="/mapas/"],
html[data-tema="noche"] img[src*="mapas_teselas"],
html[data-tema="noche"] img[src*="/hero/"]{filter:brightness(.82) saturate(.95) contrast(1.03)}
html[data-tema="noche"] img[src*="/creatures/"],
html[data-tema="noche"] img[src*="/mini/"],
html[data-tema="noche"] img[src*="/items/"]{filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}

/* ------------------------------------------------- barra de desplazamiento */
html[data-tema="noche"] *{scrollbar-color:#4b3485 transparent}
html[data-tema="noche"] ::-webkit-scrollbar{width:11px;height:11px}
html[data-tema="noche"] ::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
html[data-tema="noche"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7b4dff,#ff4fd8);border-radius:99px;border:2px solid transparent;
  background-clip:content-box
}
html[data-tema="noche"] ::selection{background:rgba(255,79,216,.35);color:#fff}
html[data-tema="noche"] :focus-visible{outline:3px solid #7b4dff;outline-offset:2px}

/* =====================================================================
   La pastilla Claro / Noche (misma familia que el selector de idioma)
   ===================================================================== */
.tema{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);position:relative}
.tema__b{min-width:42px;height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;
  color:var(--tx2);font-size:17px;line-height:1;cursor:pointer;transition:background .16s,color .16s,transform .12s;
  position:relative;overflow:hidden}
.tema__b:hover{color:var(--tx);background:rgba(255,79,216,.12)}
.tema__b:active{transform:scale(.94)}
.tema__b[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--acc),#ff8ae0);color:#fff;
  box-shadow:0 6px 16px -8px rgba(255,79,216,.8)
}
.tema__b:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
@media (max-width:760px){.tema{padding:2px}.tema__b{min-width:38px;height:36px;font-size:15px}}

/* el brillo que recorre la pastilla en modo noche (aire de StarBorder) */
html[data-tema="noche"] .tema{border-color:rgba(180,150,255,.3);background:rgba(35,25,66,.8)}
html[data-tema="noche"] .tema__b[aria-pressed="true"]{
  background:linear-gradient(135deg,#ff3fce,#b25cff);color:#fff;
  box-shadow:0 8px 22px -8px rgba(255,63,206,.9), 0 0 0 1px rgba(255,255,255,.25) inset
}
html[data-tema="noche"] .tema__b[aria-pressed="true"]::after{
  content:'';position:absolute;inset:-40% -120%;pointer-events:none;
  background:linear-gradient(75deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  animation:brilloPastilla 3.6s linear infinite;opacity:.75
}
@keyframes brilloPastilla{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* chispas del cambio de tema */
.tema__chispas{position:fixed;z-index:9999;pointer-events:none;width:0;height:0}
.tema__chispas i{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#ffd23d 55%,rgba(255,120,220,0) 75%);
  box-shadow:0 0 12px rgba(255,214,61,.9);animation:chispa .62s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes chispa{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  22%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(1.15);opacity:0}
}

/* la transicion del cambio: un circulo que se abre desde el boton pulsado */
html.tema-circulo::view-transition-old(root){animation:fundidoTema .42s ease forwards}
html.tema-circulo::view-transition-new(root){
  animation:circuloTema .66s cubic-bezier(.22,.8,.24,1) forwards;
  clip-path:circle(0% at var(--tema-x,50%) var(--tema-y,50%))
}
@keyframes circuloTema{
  from{clip-path:circle(0% at var(--tema-x,50%) var(--tema-y,50%))}
  to{clip-path:circle(150% at var(--tema-x,50%) var(--tema-y,50%))}
}
@keyframes fundidoTema{from{opacity:1}to{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  html[data-tema="noche"] .tema__b[aria-pressed="true"]::after{animation:none;opacity:.25}
  #galaxia{transition:none}
  html.tema-circulo::view-transition-old(root),
  html.tema-circulo::view-transition-new(root){animation:none}
}

/* =====================================================================
   Retoques de noche para las secciones (secciones.css manda en su terreno)
   ===================================================================== */
html[data-tema="noche"] .secHero,
html[data-tema="noche"] .hero{
  background:linear-gradient(120deg,rgba(255,79,216,.16),rgba(123,77,255,.18) 55%,rgba(37,223,255,.14));
  border:1px solid rgba(255,255,255,.10)
}
html[data-tema="noche"] .secHero h2,
html[data-tema="noche"] .hero h2{color:#fff}
html[data-tema="noche"] .kpi,
html[data-tema="noche"] .stat,
html[data-tema="noche"] .panel,
html[data-tema="noche"] .caja{
  background:linear-gradient(180deg,rgba(46,34,88,.7),rgba(28,20,58,.66));
  border:1px solid rgba(255,255,255,.09)
}
html[data-tema="noche"] .tier__fila,
html[data-tema="noche"] .fila:hover{background:rgba(255,255,255,.05)}
html[data-tema="noche"] .proCandado,
html[data-tema="noche"] .candado{
  background:linear-gradient(180deg,rgba(52,26,84,.9),rgba(30,18,58,.88));
  border:1px solid rgba(255,120,220,.28)
}
html[data-tema="noche"] canvas{border-radius:14px}