/* ==========================================================================
   TEMA DE TEMPORADA: HALLOWEEN
   --------------------------------------------------------------------------
   Lo carga app/core/seasonal_themes.php despues de main.min.css cuando el
   <html> lleva la clase .season-halloween. Para quitarlo basta con desactivar
   el tema alli: nada de aqui se aplica sin esa clase.

   El naranja de marca ya es calabaza, asi que el tema solo cambia el azul por
   morado de bruja, tine la tinta de noche y anade luna, telarana y sombras
   dobles. Las decoraciones animadas (murcielagos, arana, sombrero) van en
   theme.js.
   ========================================================================== */

html.season-halloween {
    --rieta-color: #A259FF;            /* morado bruja en lugar del azul */
    --ink-color: #1A1423;              /* tinta de noche: casi negro, tirando a morado */
    --hw-moon: #FFE7A3;
    --hw-slime: #8BE35B;
}

html.season-halloween[data-bs-theme="light"] {
    --bs-body-color-rgb: 26, 20, 35;
}

html.season-halloween[data-bs-theme="dark"] {
    --bs-body-bg-rgb: 26, 20, 35;
}

/* --------------------------------------------------------------------------
   FONDO: luna llena en oscuro, trama de puntos morada en claro
   -------------------------------------------------------------------------- */

html.season-halloween[data-bs-theme="dark"] body {
    background-image:
        radial-gradient(circle at calc(100% - 90px) 150px, var(--hw-moon) 0 46px, transparent 47px),
        radial-gradient(circle at calc(100% - 90px) 150px, rgba(255, 231, 163, .16) 0 90px, transparent 160px),
        radial-gradient(rgba(162, 89, 255, .10) 1px, transparent 1.5px);
    background-size: auto, auto, 18px 18px;
    background-attachment: fixed;
    background-repeat: no-repeat, no-repeat, repeat;
}

html.season-halloween[data-bs-theme="light"] body {
    background-image: radial-gradient(rgba(162, 89, 255, .13) 1px, transparent 1.5px);
    background-size: 18px 18px;
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   CABECERA: sombra doble calabaza + morado y telarana en la esquina
   -------------------------------------------------------------------------- */

html.season-halloween .custom-nav-shadow {
    box-shadow: 6px 6px 0 0 var(--histo-color), 12px 12px 0 0 var(--rieta-color);
}

html.season-halloween .custom-nav-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    opacity: .55;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 0L64 20M0 0L44 44M0 0L20 64'/%3E%3Cpath d='M0 12Q8 10 11 3M0 26Q16 22 22 6M0 42Q24 36 34 10M0 58Q32 50 46 14'/%3E%3Cpath d='M11 3Q14 12 17 15M22 6Q26 22 30 30M34 10Q38 32 41 41'/%3E%3Cpath d='M3 11Q9 13 12 17M6 22Q14 26 18 32M10 34Q20 38 26 46'/%3E%3C/svg%3E") no-repeat top left / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 0L64 20M0 0L44 44M0 0L20 64'/%3E%3Cpath d='M0 12Q8 10 11 3M0 26Q16 22 22 6M0 42Q24 36 34 10M0 58Q32 50 46 14'/%3E%3Cpath d='M11 3Q14 12 17 15M22 6Q26 22 30 30M34 10Q38 32 41 41'/%3E%3Cpath d='M3 11Q9 13 12 17M6 22Q14 26 18 32M10 34Q20 38 26 46'/%3E%3C/svg%3E") no-repeat top left / contain;
}

/* Sombrero de bruja sobre el icono (lo inserta theme.js) */
html.season-halloween .navbar-brand {
    position: relative;
}

.hw-hat {
    position: absolute;
    top: -22px;
    left: -6px;
    width: 38px;
    height: 30px;
    transform: rotate(-14deg);
    pointer-events: none;
    filter: drop-shadow(2px 2px 0 var(--histo-color));
}

/* --------------------------------------------------------------------------
   DETALLES
   -------------------------------------------------------------------------- */

html.season-halloween ::selection {
    background: var(--histo-color);
    color: #1A1423;
}

/* Las etiquetas de titulo inclinadas pasan a sombra morada + calabaza */
html.season-halloween .skew-title {
    box-shadow: 6px 6px 0 0 var(--rieta-color), 10px 10px 0 0 var(--histo-color);
}

/* --------------------------------------------------------------------------
   MURCIELAGOS Y ARANA (theme.js). Capa fija sin eventos salvo en la arana.
   -------------------------------------------------------------------------- */

.hw-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1019;                     /* por debajo de la cabecera (1020) y de los modales */
}

.hw-bat {
    position: absolute;
    left: 0;
    width: 46px;
    height: 24px;
    pointer-events: auto;
    cursor: pointer;
    animation: hw-fly var(--hw-dur, 9s) linear forwards;
}

.hw-bat svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: hw-bob .6s ease-in-out infinite alternate;
}

.hw-bat .hw-wing {
    transform-origin: 23px 12px;
    animation: hw-flap .18s ease-in-out infinite alternate;
}

.hw-bat.hw-poof {
    animation: hw-poof .35s ease-out forwards;
}

@keyframes hw-fly {
    0%   { transform: translate(-60px, var(--hw-y0)) scale(var(--hw-s)); }
    50%  { transform: translate(50vw, var(--hw-y1)) scale(var(--hw-s)); }
    100% { transform: translate(calc(100vw + 60px), var(--hw-y2)) scale(var(--hw-s)); }
}

@keyframes hw-bob {
    from { transform: translateY(-4px); }
    to   { transform: translateY(4px); }
}

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(-.35); }
}

@keyframes hw-poof {
    to { opacity: 0; transform: scale(1.8) rotate(25deg); }
}

/* Arana colgando de la cabecera */
.hw-spider {
    position: absolute;
    top: 100%;
    right: 18%;
    width: 2px;
    height: 46px;
    background: var(--bs-body-color);
    transform-origin: top center;
    animation: hw-swing 3.2s ease-in-out infinite alternate;
    transition: height .5s cubic-bezier(.5, -0.4, .5, 1.4);
    cursor: pointer;
}

.hw-spider svg {
    position: absolute;
    bottom: -18px;
    left: 50%;
    width: 30px;
    height: 26px;
    transform: translateX(-50%);
}

.hw-spider.hw-up {
    height: 4px;
}

@keyframes hw-swing {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}

@media (max-width: 767.98px) {
    .hw-spider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-spider { animation: none; transition: none; }
    .hw-bat { display: none; }
}

@media print {
    .hw-layer, .hw-spider, .hw-hat { display: none !important; }
}