/* =====================================================================
   LOGIN — NAVIDAD
   Solo se carga cuando Configuración → Festividades → Navidad está activo.
   Es decoración pura: no toca el formulario, rutas ni lógica.
   ===================================================================== */

body.xmas .stage{ position:relative; }

/* ---------------- luces ---------------- */
.xm-lights{ position:absolute; top:0; left:0; right:0; height:46px; z-index:20; pointer-events:none; }
.xm-wire{ position:absolute; left:0; top:0; width:100%; height:44px; overflow:visible; }
.xm-wire path{ fill:none; stroke:#2f5a4c; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.xm-bulb{
  position:absolute; width:9px; height:15px; margin-left:-4.5px;
  border-radius:50% 50% 50% 50% / 38% 38% 62% 62%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 10%, transparent 32%), var(--c);
  box-shadow:inset -1px -2px 3px rgba(0,0,0,.28), 0 0 9px 2px var(--c);
  animation:xmBlink 2.4s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
.xm-bulb::before{ content:''; position:absolute; left:50%; top:-4px; width:5px; height:5px; margin-left:-2.5px; background:#35504a; border-radius:1px; }

/* ---------------- esferas colgantes ---------------- */
.xm-orns{ position:absolute; top:0; left:0; right:0; height:0; z-index:19; pointer-events:none; }
.xm-orn{ position:absolute; top:0; width:0; height:0; transform-origin:50% 0; animation:xmSwing 5s ease-in-out infinite; animation-delay:var(--d, 0s); }
.xm-orn::before{ content:''; position:absolute; left:0; top:0; width:1px; height:var(--len); background:rgba(70,110,120,.55); }
.xm-orn i{
  position:absolute; left:calc(var(--s) / -2); top:var(--len); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0 8%, rgba(255,255,255,0) 26%), radial-gradient(circle at 50% 50%, var(--c), var(--c2) 100%);
  box-shadow:0 10px 16px -8px rgba(0,60,70,.55);
}
.xm-orn i::before{ content:''; position:absolute; left:50%; top:-5px; width:34%; height:6px; margin-left:-17%; background:#E4B94A; border-radius:2px 2px 0 0; }
.xm-orn i::after{ content:''; position:absolute; left:8%; right:8%; top:46%; height:14%; background:rgba(255,255,255,.32); border-radius:50%; transform:rotate(-12deg); }

/* ---------------- nieve cayendo ---------------- */
.xm-snow{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
.xm-snow i{
  position:absolute; top:-14px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:#fff; opacity:var(--o, .85);
  box-shadow:0 0 0 1px rgba(110,180,195,.35), 0 0 5px rgba(120,190,205,.5);
  animation:xmFall var(--dur) linear infinite; animation-delay:var(--dl);
  will-change:transform;
}
.xm-snow i.g{ width:auto; height:auto; border-radius:0; background:none; box-shadow:none; color:rgba(70,160,175,.6); font-style:normal; font-size:calc(var(--s) * 3.2); line-height:1; }

/* ---------------- gorro de Santa ---------------- */
.xm-hat{ position:absolute; pointer-events:none; filter:drop-shadow(0 3px 3px rgba(60,0,0,.28)); }
.xm-hat--brand{
  --lh:clamp(84px,13.5vh,148px);
  left:calc(var(--lh) * .02); top:calc(var(--lh) * -.1); width:calc(var(--lh) * .5); height:calc(var(--lh) * .42);
  rotate:-16deg; z-index:3;
}
.stage .card-logo-row{ position:relative; }
.xm-hat--card{
  --h:clamp(100px,16vh,150px);
  left:calc(50% + var(--h) * -.1); top:calc(var(--h) * -.19); width:calc(var(--h) * .4); height:calc(var(--h) * .33);
  rotate:14deg; z-index:3;
}

/* ---------------- cinta "¡Felices fiestas!" ---------------- */
.xm-ribbon{
  position:relative; isolation:isolate; align-self:flex-start;
  margin:0 0 clamp(10px,1.8vh,18px) 14px; padding:.45em 1.3em;
  font-size:clamp(.62rem,.95cqw,.8rem); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#E5383B,#BE1E2D);
  box-shadow:0 8px 14px -8px rgba(150,0,20,.7);
}
.xm-ribbon span{ color:#FFD76A; }
.xm-ribbon::before, .xm-ribbon::after{ content:''; position:absolute; top:.4em; width:1.3em; height:100%; background:#8F1220; z-index:-1; }
.xm-ribbon::before{ left:-1em; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,45% 50%); }
.xm-ribbon::after{ right:-1em; clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%); }

/* ---------------- panel izquierdo: colinas y árbol ---------------- */
.xm-hills{ position:absolute; left:0; bottom:0; width:100%; height:clamp(54px,10vh,110px); z-index:1; pointer-events:none; }
.xm-scene{
  position:absolute; left:33%; bottom:0; height:clamp(110px,21vh,215px); aspect-ratio:360 / 230; z-index:2; pointer-events:none; overflow:visible;
  filter:drop-shadow(0 8px 10px rgba(0,60,70,.22));
}
.xm-star{ transform-box:fill-box; transform-origin:center; animation:xmStar 2.6s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(255,200,61,.95)); }
.xm-tw{ animation:xmBlink 2s ease-in-out infinite; }

/* ---------------- panel derecho: colinas, nieve en la tarjeta, acebo ---------------- */
body.xmas .stage .auth-panel .xm-hills{ z-index:0; }
body.xmas .stage .card{ position:relative; z-index:1; }
.xm-card-deco{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.xm-snowcap{ position:absolute; left:22px; top:-11px; width:calc(100% - 44px); height:26px; filter:drop-shadow(0 3px 2px rgba(0,110,130,.25)); }
.xm-holly{ position:absolute; width:62px; height:46px; filter:drop-shadow(0 3px 3px rgba(0,50,30,.3)); }
.xm-holly.tl{ left:-24px; top:-22px; rotate:-10deg; }
.xm-holly.tr{ right:-24px; top:-22px; scale:-1 1; rotate:-10deg; }
.xm-holly.br{ right:-18px; bottom:-14px; rotate:160deg; }

/* el selector de idioma baja un poco para no chocar con las luces */
body.xmas .stage .lang-toggle{ top:48px; }

/* ---------------- animaciones ---------------- */
@keyframes xmBlink{ 0%,100%{ opacity:1; filter:brightness(1.2); } 50%{ opacity:.5; filter:brightness(.8); } }
@keyframes xmSwing{ 0%,100%{ rotate:-3deg; } 50%{ rotate:3deg; } }
@keyframes xmStar{ 0%,100%{ scale:1; } 50%{ scale:1.18; } }
@keyframes xmFall{ from{ transform:translate3d(0,-6vh,0) rotate(0deg); } to{ transform:translate3d(var(--dx),108vh,0) rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .xm-bulb, .xm-orn, .xm-star, .xm-tw{ animation:none !important; }
  .xm-snow{ display:none; }
}

/* ---------------- celular / tableta ---------------- */
@media (max-width:940px){
  .xm-scene{ display:none; }
}
@media (max-width:768px){
  .xm-orns{ display:none; }
  .xm-bulb:nth-child(even){ display:none; }
  body.xmas .stage .lang-toggle{ top:44px; }
  .xm-hat--card{ --h:clamp(84px,14vh,120px); }
  .xm-holly.tl{ left:-12px; } .xm-holly.tr{ right:-12px; } .xm-holly.br{ right:-10px; }
}
@media (max-width:940px) and (max-height:500px){
  .xm-hat--card{ --h:64px; }
}