/* /assets/css/theme-halloween.css */
/* TEMA HALLOWEEN v2.1 - REIMAGINADO Y AJUSTADO POR PANCHO DE GOYA */

/* --- IMPORTACIÓN DE FUENTE TEMÁTICA --- */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

/* --- ANIMACIONES CLAVE --- */

/* Animación para el gradiente de fondo */
@keyframes eerie-background-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Animación de pulso para botones */
@keyframes infernal-pulse {
    0% { box-shadow: 0 0 12px 0 rgba(255, 102, 0, 0.6); }
    50% { box-shadow: 0 0 24px 6px rgba(255, 102, 0, 0.8); }
    100% { box-shadow: 0 0 12px 0 rgba(255, 102, 0, 0.6); }
}

/* Animación de parpadeo para las tarjetas */
@keyframes spectral-flicker {
  0%, 100% { border-color: rgba(77, 27, 123, 0); }
  50% { border-color: rgba(77, 27, 123, 1); }
}


/* --- VARIABLES Y ESTILOS GLOBALES --- */
html[data-theme='halloween'] {
    /* Paleta de Colores Tenebrosa y Sofisticada */
    --primary-color: #ff6600; /* Naranja Halloween Intenso */
    --primary-color-darker: #e65c00;
    --secondary-color: #4d1b7b; /* Morado Oscuro y Profundo */

    /* Colores de Texto y UI */
    --text-color: #d1d5db;
    --text-muted-color: #9ca3af;
    --text-on-primary-color: #ffffff;
    
    --background-color: #0d0c1d; /* Negro azulado muy oscuro */
    --surface-color: #1f1d2b;
    --surface-hover-color: #2a2739;
    --border-color: #393552;
    
    --success-color: #16a34a; /* Verde Espectral */
    --danger-color: #ef4444;

    /* Fuente Temática */
    --font-family-horror: 'Creepster', cursive;
}

/* --- EFECTOS DE FONDO --- */
html[data-theme='halloween'] body {
    /* Gradiente sutil y oscuro para el fondo */
    background: linear-gradient(-45deg, #4d1b7b, #1e1b4b, #0d0c1d);
    background-size: 400% 400%;
    animation: eerie-background-pan 45s ease-in-out infinite;
    position: relative;
}


/* --- ESTILOS DE COMPONENTES --- */

/* Títulos con fuente temática, pero más controlados */
html[data-theme='halloween'] h1,
html[data-theme='halloween'] h2,
html[data-theme='halloween'] .event-card .info-title,
html[data-theme='halloween'] .slide-caption h2 {
    font-family: var(--font-family-horror) !important;
    letter-spacing: 2px;
    color: var(--primary-color) !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

/* Tarjetas de Evento con efecto de hover mejorado */
html[data-theme='halloween'] .event-card-wrapper {
    transition: transform 0.4s ease, filter 0.4s ease;
    border: 2px solid transparent;
}

html[data-theme='halloween'] .event-card-wrapper:hover {
    transform: translateY(-12px) rotate(1deg);
    border-color: transparent;
    animation: spectral-flicker 1.5s infinite;
    filter: drop-shadow(0 10px 20px rgba(77, 27, 123, 0.4));
}

/* Botones con pulso infernal */
html[data-theme='halloween'] .btn-primary {
    font-family: var(--font-family-horror);
    letter-spacing: 1.5px;
    font-size: 1.1em;
    border: 2px solid var(--primary-color-darker);
    animation: infernal-pulse 2.5s infinite;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

html[data-theme='halloween'] .btn-primary:hover {
    background-color: var(--primary-color-darker);
    transform: scale(1.05);
    animation-play-state: paused;
    box-shadow: 0 0 25px 8px rgba(255, 102, 0, 0.8);
}

/* Header con efecto de desenfoque */
html[data-theme='halloween'] .main-header {
    background-color: rgba(13, 12, 29, 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(57, 53, 82, 0.5);
}

/* Formularios adaptados al tema oscuro */
html[data-theme='halloween'] .form-control,
html[data-theme='halloween'] select {
    background-color: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

html[data-theme='halloween'] .form-control:focus,
html[data-theme='halloween'] select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}