/* =====================================================================
   FitCamp · Tema de Halloween
   Se prende con data-tema="halloween" en <html> (ver TEMA en config.js).
   Mantiene la marca: lima, noche, Bebas Neue, Montserrat y los banners inclinados.
   Le suma morado, calabaza, murciélagos, telarañas y una calabaza en los títulos.
   Para quitarlo del todo: TEMA: "" en config.js (este archivo no hace nada sin el tema).
   ===================================================================== */

/* ---------- Colores: noche con un toque morado ---------- */
html[data-tema="halloween"] {
  --calabaza: #FF7A1A;
  --morado: #8B5CF6;
  --bg: #0D0A13;
  --surface: #17121F;
  --text: #F3F0F7;
  --muted: #ABA3B8;
  --line: #2D2439;
  --field: #1D1727;
  --field-line: #3F3352;
  --banner: #2B1748;
  --card: #17121F;
  --card-border: #30254A;
  --card-muted: #ABA3B8;
  --danger: #FF8A80;
  color-scheme: dark;
}
/* La luna y la neblina morada del fondo */
html[data-tema="halloween"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at calc(100% - 64px) 150px, rgba(255, 220, 150, .20) 0 34px, rgba(255, 150, 60, .08) 36px, transparent 130px),
    radial-gradient(ellipse 120% 55% at 50% 112%, rgba(139, 92, 246, .22), transparent 70%);
  background-attachment: fixed;
}

/* ---------- Lo que en modo oscuro ya era así (el tema siempre es oscuro) ---------- */
html[data-tema="halloween"] .auth-card { border: 1px solid var(--line); }
html[data-tema="halloween"] .tabs button[aria-selected="true"],
html[data-tema="halloween"] .tabs button[aria-current="page"],
html[data-tema="halloween"] .ej-video { background: var(--lime); color: var(--night); }
html[data-tema="halloween"] .cuadritos button.lleno { border-color: var(--lime); }
html[data-tema="halloween"] .radio input,
html[data-tema="halloween"] .check input { accent-color: var(--lime); }
html[data-tema="halloween"] .ay-semanas button[aria-pressed="true"],
html[data-tema="halloween"] .ay-menus button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }
html[data-tema="halloween"] .ay-semanas button[aria-pressed="true"] small,
html[data-tema="halloween"] .ay-menus button[aria-pressed="true"] b { color: var(--night); }
html[data-tema="halloween"] .ay-pista { background: #000; box-shadow: inset 0 0 0 1px #2A2A33; }
html[data-tema="halloween"] .l-ayuno { background: #000; box-shadow: inset 0 0 0 1px #3A3A45; }
html[data-tema="halloween"] .ay-num { box-shadow: 0 0 0 1.5px #fff; }
html[data-tema="halloween"] .ay-comida.cierre { background: #000; border-color: #2A2A33; }

/* ---------- Toques de Halloween ---------- */
/* Botón lima con sombra de calabaza */
html[data-tema="halloween"] .btn.primary { box-shadow: 3px 3px 0 var(--calabaza); }
html[data-tema="halloween"] .btn.primary:hover { box-shadow: 5px 5px 0 var(--calabaza); }
/* La raya de la cabecera: lima → calabaza → morado */
html[data-tema="halloween"] .top {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--lime) 0 40%, var(--calabaza) 72%, var(--morado)) 1;
}
html[data-tema="halloween"] .logo { position: relative; z-index: 1; }
html[data-tema="halloween"] .top-right { z-index: 1; }

/* Murciélagos que cruzan la cabecera */
.hw-murcielagos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hw-bat { position: absolute; left: -40px; top: 12px; width: 28px; height: 16px; fill: #7E5BC2; animation: hw-vuelo 17s linear infinite; }
.hw-bat path { transform-box: fill-box; transform-origin: center; animation: hw-aleteo .2s ease-in-out infinite alternate; }
.hw-bat2 { top: 32px; width: 19px; height: 11px; opacity: .75; animation-duration: 23s; animation-delay: -9s; }
.hw-bat3 { top: 4px; width: 14px; height: 8px; opacity: .55; animation-duration: 29s; animation-delay: -18s; }
@keyframes hw-vuelo {
  0% { transform: translate(0, 0); }
  20% { transform: translate(20vw, 7px); }
  40% { transform: translate(40vw, -4px); }
  60% { transform: translate(60vw, 6px); }
  80% { transform: translate(80vw, -3px); }
  100% { transform: translate(calc(100vw + 80px), 0); }
}
@keyframes hw-aleteo { from { transform: scaleY(1); } to { transform: scaleY(.4); } }

/* Los banners: morado de noche con una calabaza (con tallo lima) asomándose */
html[data-tema="halloween"] .banner::before { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .45); }
html[data-tema="halloween"] .banner::after {
  content: ""; position: absolute; right: -22px; top: -16px; width: 36px; height: 36px; transform: rotate(14deg);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='29' y='4' width='6' height='13' rx='2.5' fill='%23C8F03E' transform='rotate(14 32 10)'/%3E%3Cellipse cx='21' cy='39' rx='14' ry='20' fill='%23E2600C'/%3E%3Cellipse cx='43' cy='39' rx='14' ry='20' fill='%23E2600C'/%3E%3Cellipse cx='32' cy='39' rx='15' ry='21' fill='%23FF7A1A'/%3E%3Cpath d='M20 34l6-8 5 8zM44 34l-6-8-5 8zM32 38l-3 4h6z' fill='%230B0B0F'/%3E%3Cpath d='M18 45q14 11 28 0l-3.5 4-3.5-2.5-3.5 3.5-3.5-3.5-3.5 3.5-3.5-3.5-3.5 2.5z' fill='%230B0B0F'/%3E%3C/svg%3E");
}

/* Telarañas en la esquina de las tarjetas */
html[data-tema="halloween"] .auth-card,
html[data-tema="halloween"] .rutina,
html[data-tema="halloween"] .ay-card,
html[data-tema="halloween"] .card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-opacity='.17' stroke-width='.9'%3E%3Cpath d='M100 0L-20 0M100 0L-10.9 45.9M100 0L15.1 84.9M100 0L54.1 110.9M100 0L100 120M82 0Q84.8 3 83.4 6.9Q87.1 8.6 87.3 12.7Q91.4 12.9 93.1 16.6Q97 15.2 100 18M64 0Q69.6 6 66.7 13.8Q74.3 17.2 74.5 25.5Q82.8 25.7 86.2 33.3Q94 30.4 100 36M44 0Q52.8 9.4 48.3 21.4Q60 26.8 60.4 39.6Q73.2 40 78.6 51.7Q90.6 47.2 100 56M22 0Q34.2 13.1 27.9 29.8Q44.2 37.3 44.8 55.2Q62.7 55.8 70.2 72.1Q86.9 65.8 100 78'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 110px;
}
html[data-tema="halloween"] .card { background-size: 80px; }
html[data-tema="halloween"] .rutina,
html[data-tema="halloween"] .ay-card { box-shadow: 0 10px 30px rgba(139, 92, 246, .10); }

/* Detalles */
html[data-tema="halloween"] .toast { border-left-color: var(--calabaza); }
html[data-tema="halloween"] .ay-semanas button.hoy::after { background: var(--calabaza); color: var(--night); }
html[data-tema="halloween"] .empty .empty-title::before { content: "👻 "; }
html[data-tema="halloween"] .r-go { box-shadow: 2px 2px 0 var(--calabaza); }
/* "BOO!" en la portada, debajo de MI CUENTA */
.hw-chip {
  display: block; width: max-content; margin: -6px 0 16px 6px;
  font: 400 44px/1 "Bebas Neue", sans-serif; letter-spacing: .08em;
  color: var(--calabaza); text-shadow: 3px 3px 0 rgba(139, 92, 246, .7);
  animation: hw-flota 3s ease-in-out infinite;
}
@keyframes hw-flota { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(2deg); } }

/* El interruptor del tema en el menú de la cuenta */
.menu-cuenta .switch { padding: 4px 0 12px; font-size: 14px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-bat path, .hw-chip { animation: none; }
  .hw-bat { display: none; }
}