/* Temporada navideña - capa visual compartida. Sin alterar lógica funcional. */
:root {
  --tg-christmas-red: #b60f1a;
  --tg-christmas-red-dark: #760811;
  --tg-christmas-green: #0d5b45;
  --tg-christmas-gold: #e9bd5a;
}

.christmas-snow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1044;
  pointer-events: none;
  opacity: .84;
}

body.christmas-panel-page .christmas-snow-canvas {
  /* Por encima de sidebars fijos (jurado/admin/dashboard), sin capturar clics. */
  z-index: 15000;
  opacity: .9;
}

body.christmas-panel-page .christmas-lights-bar {
  z-index: 15010;
}

/* Mantiene modales y diálogos por encima de la nieve global. */
.modal { z-index: 30010 !important; }
.modal-backdrop { z-index: 30000 !important; }
.swal2-container { z-index: 31000 !important; }
.toast-container,
.toast { z-index: 30500 !important; }

/* En la portada la nieve debe quedar visualmente delante de la tarjeta del login.
   Sigue sin capturar clics y permanece por debajo del loader inicial. */
body.christmas-login-page .christmas-snow-canvas {
  z-index: 9998;
  opacity: .94;
}

body.christmas-login-page .christmas-lights-bar {
  z-index: 9999;
}

body.christmas-login-page .auth-bootstrap-screen {
  z-index: 100000;
}

.christmas-lights-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 1038;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 max(16px, 2vw);
  filter: drop-shadow(0 3px 5px rgba(24, 20, 16, .16));
}

.christmas-lights-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1%;
  width: 102%;
  height: 8px;
  border-top: 2px solid rgba(54, 47, 42, .48);
  border-radius: 50%;
}

.christmas-bulb {
  position: relative;
  width: 8px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50% 50% 48% 48%;
  background: #fff4c4;
  box-shadow: 0 0 7px rgba(255, 240, 169, .92), 0 0 15px rgba(255, 218, 91, .45);
  transform-origin: top center;
  animation: christmasBulbGlow 2.8s ease-in-out infinite alternate;
}

.christmas-bulb:nth-child(3n + 1) {
  background: #ff717b;
  box-shadow: 0 0 7px rgba(255, 113, 123, .88), 0 0 16px rgba(193, 18, 31, .4);
}

.christmas-bulb:nth-child(3n + 2) {
  background: #92d8b2;
  box-shadow: 0 0 7px rgba(146, 216, 178, .88), 0 0 16px rgba(25, 110, 76, .36);
}

.christmas-bulb::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -4px;
  width: 4px;
  height: 5px;
  border-radius: 2px 2px 0 0;
  background: #4a4a46;
}

@keyframes christmasBulbGlow {
  from { opacity: .62; transform: translateY(0) rotate(-2deg); }
  to { opacity: 1; transform: translateY(1px) rotate(2deg); }
}

.christmas-brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .16));
  transform: none !important;
}

.sidebar.toggled .christmas-brand-logo,
.sidebar .christmas-brand-logo {
  max-width: 46px;
}

.sidebar .sidebar-brand-icon.christmas-logo-wrap {
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Una nevada casi imperceptible dentro de los encabezados grandes, sin tapar contenido. */
.topbar,
.navbar,
.sidebar {
  isolation: isolate;
}

.topbar::after,
.navbar.bg-white::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.86) 10%,
    rgba(255,255,255,.98) 30%,
    rgba(255,255,255,.76) 55%,
    rgba(255,255,255,.96) 78%,
    transparent 100%);
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .08));
}

/* Login principal: el logo navideño ya contiene gorro y ornamentos, por eso no se añaden etiquetas ni textos. */
.hero-image-wrap .christmas-main-logo {
  width: 88%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(40, 8, 12, .24));
}

@media (max-width: 991.98px) {
  .christmas-lights-bar { height: 18px; }
  .christmas-bulb { width: 7px; height: 10px; }
  .christmas-brand-logo { width: 40px; height: 40px; }
}

@media (max-width: 575.98px) {
  .christmas-lights-bar { opacity: .72; }
  .christmas-snow-canvas { opacity: .72; }
  body.christmas-panel-page .christmas-snow-canvas { opacity: .76; }
  body.christmas-login-page .christmas-snow-canvas { opacity: .82; }
  .christmas-brand-logo { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .christmas-lights-bar { display: none; }
  .christmas-snow-canvas { display: none; }
  .christmas-bulb { animation: none; }
}