/* ==========================================================================
   LOGIN · MODO NAVIDAD — estilo "noche" (luna, nieve, pinos, reno y árbol)
   Se carga desde signin.blade.php. Todo cuelga de `html.xn`.
   Independiente del tema claro/oscuro: trae su propia paleta nocturna.
   ========================================================================== */
/* ── Cielo ─────────────────────────────────────────────────── */
html.xn .login-page,
html.xn[data-theme="light"] .login-page,
html.xn[data-theme="dark"] .login-page {
  background: linear-gradient(180deg, #030917 0%, #071533 45%, #0E2252 78%, #16316F 100%);
}
html.xn .login-blobs-wrap { display: none; }

.xn-sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* Estrellas titilantes */
.xn-star {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; opacity: var(--o, .7);
  animation: xn-twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes xn-twinkle { 0%, 100% { opacity: var(--o, .7); transform: scale(1); } 50% { opacity: .15; transform: scale(.6); } }

/* Luna con halo */
.xn-moon {
  position: absolute; left: calc(13% - 44px); top: calc(17.5% - 44px); width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FBFCFF 0%, #E6ECFA 55%, #CBD6F0 100%);
  box-shadow: 0 0 40px 14px rgba(170,190,255,.28), 0 0 130px 60px rgba(120,150,255,.14);
}
.xn-moon i { position: absolute; border-radius: 50%; background: rgba(150,165,205,.35); }
.xn-moon i:nth-child(1) { width: 14px; height: 14px; left: 14px; top: 22px; }
.xn-moon i:nth-child(2) { width: 9px;  height: 9px;  left: 52px; top: 16px; }
.xn-moon i:nth-child(3) { width: 11px; height: 11px; left: 56px; top: 56px; }

/* ── Paisaje (colinas, pinos, reno, árbol, regalos) ────────── */
.xn-scene { position: fixed; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; z-index: 1; }
.xn-scene > * { position: absolute; }
.xn-scene svg { display: block; overflow: visible; }
.xn-hills { left: 0; bottom: 0; width: 100%; }
.xn-item { transform: translateX(-50%); }
.xn-treeglow { animation: xn-glow 2.6s ease-in-out infinite; }
.xn-treeglow:nth-of-type(2n) { animation-delay: .7s; }
.xn-treeglow:nth-of-type(3n) { animation-delay: 1.4s; }
@keyframes xn-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Nieve cayendo */
.xn-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ── Botón de tema ─────────────────────────────────────────── */
html.xn .login-theme-btn { background: rgba(255,255,255,.08); color: #DDE6FF; border-color: rgba(255,255,255,.14); z-index: 12; }
html.xn .login-theme-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 3px rgba(120,150,255,.2); }

/* ── Tarjeta ───────────────────────────────────────────────── */
html.xn .login-card {
  position: relative; z-index: 6; max-width: 560px; margin-top: 1.6rem;
  background: rgba(29,38,58,.96); border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding-top: 3.6rem !important;
  color: #fff;
}
.xn-cap { position: absolute; top: -13px; left: -3px; right: -3px; height: 28px; z-index: 5; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.xn-cap svg { width: 100%; height: 100%; display: block; }
.xn-holly { position: absolute; width: 56px; z-index: 7; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.xn-holly--tl { left: -26px; top: -22px; }
.xn-holly--tr { right: -26px; top: -22px; transform: scaleX(-1); }
.xn-holly--br { right: -24px; bottom: -22px; width: 48px; transform: scaleX(-1) rotate(-8deg); }

/* Logo claro (versión oscura del logo) + gorro de Santa */
html.xn .login__logo--light { display: none !important; }
html.xn .login__logo--dark  { display: block !important; }
html.xn .login-brand-icon { position: relative; overflow: visible; }
.xn-hat {
  position: absolute; width: 36px; height: auto; top: -37px; left: 3px; transform: rotate(12deg); transform-origin: 40% 100%;
  pointer-events: none; z-index: 8; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* Textos y campos (tarjeta oscura con campos claros, como en la referencia) */
html.xn .login-title { color: #fff; }
html.xn .login-card .form-label { color: #C9D3EC !important; }
html.xn .login-page .text-muted, html.xn .login-card .text-muted { color: #B7C3E0 !important; }
html.xn .login-input-wrap .form-control {
  background-color: #E8EEFC; border: 1px solid transparent; color: #0F172A; border-radius: 10px;
}
html.xn .login-input-wrap .form-control::placeholder { color: #6C7A99; }
html.xn .login-input-wrap .form-control:focus { background-color: #F2F6FF; border-color: #6EA0FF; box-shadow: 0 0 0 3px rgba(96,150,255,.28); color: #0F172A; }
html.xn .login-input-icon, html.xn .login-pwd-toggle { color: #5B6B8C; }
html.xn .login-pwd-toggle:hover { color: #1E293B; }
html.xn .login-input-wrap .form-control.is-invalid { border-color: #FF7B8A; }
html.xn .invalid-feedback { color: #FFB4BE; }
html.xn .login-page .alert-danger { background-color: rgba(239,68,68,.16); border-color: rgba(255,123,138,.5); color: #FFD3D9; }
html.xn .login-btn-submit.btn-primary { box-shadow: 0 6px 18px rgba(37,99,235,.35); }
html.xn .login-legal a { color: #5B9BFF; }
html.xn .login-forgot { color: #5B9BFF; }

/* Pie sobre el paisaje */
html.xn .login-footer { position: relative; z-index: 6; text-shadow: 0 0 8px rgba(3,9,23,.95), 0 0 3px rgba(3,9,23,.95), 0 1px 2px rgba(3,9,23,.9); }
html.xn .login-footer, html.xn .login-footer .text-muted, html.xn .login-footer .opacity-75 { color: #C9D4F0 !important; opacity: 1 !important; }
html.xn .login-footer-link { color: #D5DEF5 !important; }

/* Error: temblor · Confeti */
.login-card.xn-shake { animation: xn-shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes xn-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.xn-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .xn-holly { width: 42px; }
  .xn-holly--tl { left: -16px; } .xn-holly--tr { right: -16px; }
  .xn-moon { transform: scale(.7); }
}

/* ── Accesibilidad ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .xn-star, .xn-treeglow { animation: none !important; }
  .xn-snow { display: none; }
}