/* ===============================
   HALLOWEEN THEME — sin tocar HTML
   =============================== */

/* Paleta y tokens — reusables */
:root{
  --brand-bg: #0f0f14;
  --brand-fg: #f2f2f7;
  --brand-accent: #ff7a00;      /* calabaza */
  --brand-accent-2: #a78bfa;    /* violeta */
  --brand-ok: #22c55e;
  --brand-warn: #f59e0b;

  --halloween-orange: #ff7a00;
  --halloween-violet: #8b5cf6;
  --halloween-web: rgba(255,255,255,.08);
}

/* Base del body */
body.theme-halloween {
  background:
    radial-gradient(1100px 800px at 15% -10%, rgba(255,122,0,.07), transparent 60%),
    radial-gradient(1200px 900px at 110% 10%, rgba(139,92,246,.06), transparent 60%),
    var(--brand-bg);
  color: var(--brand-fg);
}

/* Navbar “oscura con velo” */
body.theme-halloween .navbar {
  background-color: rgba(15,15,20,.88) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--halloween-web);
}
body.theme-halloween .navbar .nav-link {
  color: var(--brand-fg) !important;
}
body.theme-halloween .navbar .nav-link:hover {
  color: var(--halloween-orange) !important;
  text-shadow: 0 0 6px rgba(255,122,0,.5);
}

/* Headings con acento naranja + sutil brillo */
body.theme-halloween h1,
body.theme-halloween h2,
body.theme-halloween h3 {
  color: var(--halloween-orange);
  text-shadow: 0 0 10px rgba(255,122,0,.25);
}

/* Links */
body.theme-halloween a {
  color: var(--halloween-orange);
}
body.theme-halloween a:hover,
body.theme-halloween a:focus {
  color: #e56e00;
  text-decoration: none;
}

/* Botón primario “calabaza” */
body.theme-halloween .btn-primary {
  background-color: var(--halloween-orange);
  border-color: var(--halloween-orange);
  box-shadow: 0 6px 20px rgba(255,122,0,.2);
}
body.theme-halloween .btn-primary:hover {
  background-color: #e56e00;
  border-color: #e56e00;
  box-shadow: 0 8px 24px rgba(255,122,0,.28);
}

/* Botón success: tono “poción” */
body.theme-halloween .btn-success {
  background-color: var(--brand-ok);
  border-color: var(--brand-ok);
}

/* Cards con borde tenue y velo */
body.theme-halloween .card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--halloween-web);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Separadores tipo “candy corn” reutilizando <hr> ya existente */
body.theme-halloween hr {
  border: none;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      #f59e0b 0 33%,  /* amarillo */
      #ffffff 33% 66%,/* blanco */
      #ff7a00 66% 100% /* naranja */
    );
  opacity: .8;
}

/* Ribete decorativo en el viewport (no requiere HTML) */
body.theme-halloween::before,
body.theme-halloween::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 220px; height: 220px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  pointer-events: none;
}
/* Telaraña arriba izquierda */
body.theme-halloween::before {
  top: -20px; left: -10px;
  background-image: url("/theme_asset.php?type=media&theme=halloween&file=assets/web-corner.svg");
}
/* Calabaza abajo derecha */
body.theme-halloween::after {
  right: 10px; bottom: 10px;
  background-image: url("/theme_asset.php?type=media&theme=halloween&file=assets/pumpkin.svg");
}

/* Secciones “accent” si ya las usás en tus vistas */
body.theme-halloween .section-accent-1{
  background: linear-gradient(180deg, rgba(255,122,0,.08), rgba(139,92,246,.05));
}
body.theme-halloween .section-accent-2{
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(245,158,11,.05));
}
body.theme-halloween .section-accent-3{
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,122,0,.05));
}

/* Sección papel (si existe) con textura muy leve */
body.theme-halloween .section--paper {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%),
    radial-gradient(800px 600px at 50% 0%, rgba(255,122,0,.05), transparent 60%);
  border-top: 1px solid var(--halloween-web);
  border-bottom: 1px solid var(--halloween-web);
}

/* Imágenes con borde suave en hover */
body.theme-halloween img.rounded,
body.theme-halloween img.rounded-circle {
  transition: transform .2s ease, box-shadow .2s ease;
}
body.theme-halloween img.rounded:hover,
body.theme-halloween img.rounded-circle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,122,0,.2);
}

/* Accesibilidad: menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  body.theme-halloween img.rounded:hover,
  body.theme-halloween img.rounded-circle:hover {
    transform: none;
  }
}