/* =========================================================
   TEMA NAVIDAD (temporal)
   Todo está bajo body.theme-navidad: para quitarlo basta con
   poner `navidad = false` en base.html.
========================================================= */
.theme-navidad{
  --xmas-red:   #D62839;
  --xmas-green: #1F9D55;
  --xmas-gold:  #F2C14E;
  --xmas-snow:  #E8F0FB;
}

/* ---------- Guirnalda de luces bajo la barra de navegación ---------- */
.theme-navidad .navbar::before,
.theme-navidad .navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:12px;
  pointer-events:none; background-repeat:repeat-x;
}
/* Cable + luces rojas y verdes */
.theme-navidad .navbar::before{
  background-image:
    radial-gradient(circle at 50% 70%, var(--xmas-red)   0 2.6px, color-mix(in srgb, var(--xmas-red) 35%, transparent) 3.4px 5px, transparent 5.5px),
    radial-gradient(circle at 50% 70%, var(--xmas-green) 0 2.6px, color-mix(in srgb, var(--xmas-green) 35%, transparent) 3.4px 5px, transparent 5.5px),
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18));
  background-size:64px 12px, 64px 12px, 100% 1px;
  background-position:0 0, 32px 0, 0 1px;
  animation:xmas-twinkle 2.6s ease-in-out infinite;
}
/* Luces doradas, parpadean en contrafase */
.theme-navidad .navbar::after{
  background-image:
    radial-gradient(circle at 50% 70%, var(--xmas-gold) 0 2.6px, color-mix(in srgb, var(--xmas-gold) 40%, transparent) 3.4px 5px, transparent 5.5px);
  background-size:32px 12px;
  background-position:16px 0;
  animation:xmas-twinkle 2.6s ease-in-out infinite reverse;
}
@keyframes xmas-twinkle{
  0%, 100%{ opacity:1;   filter:brightness(1.1); }
  50%     { opacity:.45; filter:brightness(.85); }
}

/* Indicador de la sección activa con los colores de la temporada */
.theme-navidad .nav-links a.is-active::after{
  background:linear-gradient(90deg, var(--xmas-red), var(--xmas-gold), var(--xmas-green));
}

/* ---------- Hero del home: calidez sutil sobre la imagen ---------- */
.theme-navidad .hero{
  background-image:
    radial-gradient(120% 80% at 0% 100%, rgba(214,40,57,.22) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(31,157,85,.20) 0%, transparent 55%),
    linear-gradient(180deg, var(--hero-overlay-start) 0%, var(--hero-overlay-end) 100%),
    url("/static/img/oil_background_2.png");
}
.theme-navidad .xmas-greeting{
  display:inline-flex; align-items:center; gap:.45ch;
  margin:0 0 .8rem; padding:.3rem .85rem; border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:var(--w-med); letter-spacing:.02em; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(242,193,78,.45);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  box-shadow:0 0 18px rgba(242,193,78,.18);
  animation:xmas-fade-in .8s ease-out both;
}
.theme-navidad .xmas-greeting .star{
  color:var(--xmas-gold); display:inline-block;
  animation:xmas-star 3.2s ease-in-out infinite;
}
@keyframes xmas-star{
  0%, 100%{ transform:scale(1) rotate(0deg); }
  50%     { transform:scale(1.18) rotate(18deg); }
}
@keyframes xmas-fade-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}

/* ---------- Detalles en botones principales ---------- */
.theme-navidad .btn-create,
.theme-navidad .btn-primary{
  transition:box-shadow .2s ease, filter .2s ease;
}
.theme-navidad .btn-create:hover,
.theme-navidad .btn-primary:hover{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--xmas-gold) 30%, transparent), 0 4px 14px rgba(214,40,57,.18);
}

/* ---------- Footer ---------- */
.theme-navidad .site-footer{
  position:relative;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--xmas-red), var(--xmas-gold), var(--xmas-green), var(--xmas-gold), var(--xmas-red)) 1;
}
.theme-navidad .xmas-footer{
  display:inline-flex; align-items:center; gap:.6rem; margin-left:.8rem;
  font-size:clamp(12px, 1.1vw, 14px); color:#F7FAFF; opacity:.9;
}
.theme-navidad .snow-toggle{
  appearance:none; margin:0; padding:.2rem .55rem; width:auto; min-height:0;
  font:inherit; font-size:12px; line-height:1.2; cursor:pointer;
  color:#F7FAFF; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-pill);
  transition:background .16s ease, border-color .16s ease;
}
.theme-navidad .snow-toggle:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }
.theme-navidad .snow-toggle:focus-visible{ outline:none; box-shadow:0 0 0 2px #1A1A1A, 0 0 0 4px var(--xmas-gold); }

/* ---------- Nieve (canvas de navidad.js) ---------- */
.xmas-snow{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1002;
}

/* ---------- Accesibilidad e impresión ---------- */
@media (prefers-reduced-motion:reduce){
  .theme-navidad .navbar::before,
  .theme-navidad .navbar::after,
  .theme-navidad .xmas-greeting,
  .theme-navidad .xmas-greeting .star{ animation:none; }
}
@media print{
  .xmas-snow, .theme-navidad .navbar::before, .theme-navidad .navbar::after{ display:none !important; }
}