/*
 * Decoración navideña temporal de Agencia ATLAS.
 * Se activa o desactiva con CHRISTMAS_MODE en config.php.
 */

.christmas-snow {
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.christmas-snowflake {
    --snow-size: 14px;
    --snow-drift: 40px;
    position: absolute;
    top: -10vh;
    left: var(--snow-left, 50%);
    color: rgba(239, 248, 255, .92);
    font-size: var(--snow-size);
    line-height: 1;
    text-shadow: 0 0 9px rgba(125, 211, 252, .75);
    opacity: var(--snow-opacity, .8);
    will-change: transform;
    animation: atlas-snow-fall var(--snow-duration, 13s) linear var(--snow-delay, 0s) infinite;
}

@keyframes atlas-snow-fall {
    0% {
        transform: translate3d(0, -12vh, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(var(--snow-drift), 52vh, 0) rotate(180deg);
    }
    100% {
        transform: translate3d(calc(var(--snow-drift) * -.45), 112vh, 0) rotate(360deg);
    }
}

/* Guirnalda luminosa sobre el menú, sin modificar su estructura. */
.sidebar {
    box-shadow:
        inset 0 2px 0 rgba(34, 197, 94, .5),
        inset -2px 0 0 rgba(220, 38, 38, .2),
        14px 0 40px rgba(0, 0, 0, .2);
}

.sidebar::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 10px;
    right: 10px;
    height: 8px;
    pointer-events: none;
    background:
        radial-gradient(circle, #fef08a 0 3px, transparent 3.5px) 0 1px / 30px 8px repeat-x,
        radial-gradient(circle, #ef4444 0 3px, transparent 3.5px) 15px 1px / 30px 8px repeat-x;
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, .8));
}

.sidebar-header h2::after {
    content: "  ✨";
    color: #fde68a;
    text-shadow: 0 0 8px rgba(250, 204, 21, .75);
}

/* Detalles flotantes: no ocupan espacio ni alteran la maqueta. */
.christmas-corner-decoration {
    position: fixed;
    z-index: 89;
    top: 0;
    right: 22px;
    width: 150px;
    height: 112px;
    pointer-events: none;
    opacity: .78;
}

.christmas-corner-decoration::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #166534 15%, #22c55e 50%, #166534 85%, transparent);
    box-shadow: 0 0 9px rgba(34, 197, 94, .42);
}

.christmas-bauble {
    --bauble-color: #dc2626;
    position: absolute;
    top: 0;
    left: var(--bauble-left, 20px);
    width: 1px;
    height: var(--bauble-rope, 54px);
    background: linear-gradient(#d8b45a, rgba(216, 180, 90, .32));
}

.christmas-bauble::before {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -4px;
    width: 7px;
    height: 6px;
    border-radius: 2px;
    background: #d8b45a;
}

.christmas-bauble::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -24px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 55%, var(--bauble-color), color-mix(in srgb, var(--bauble-color) 58%, #020617));
    box-shadow: 0 0 12px color-mix(in srgb, var(--bauble-color) 60%, transparent);
}

.menu-badge {
    position: relative;
}

.menu-badge::before,
.menu-badge::after {
    position: absolute;
    z-index: 2;
    color: #f8fafc;
    pointer-events: none;
    text-shadow: 0 0 9px rgba(125, 211, 252, .9);
    animation: atlas-christmas-twinkle 2.8s ease-in-out infinite alternate;
}

.menu-badge::before {
    content: "❄";
    top: 3px;
    left: 16%;
    font-size: 18px;
}

.menu-badge::after {
    content: "✦";
    right: 17%;
    bottom: 24px;
    color: #fde68a;
    font-size: 15px;
    animation-delay: -1.3s;
}

@keyframes atlas-christmas-twinkle {
    from { opacity: .35; transform: scale(.82) rotate(-8deg); }
    to { opacity: 1; transform: scale(1.12) rotate(7deg); }
}

.sidebar .menu > a,
.sidebar .menu-accordion-summary,
.sidebar .menu-accordion-content a {
    box-shadow:
        inset 3px 0 0 rgba(220, 38, 38, .48),
        0 8px 22px rgba(0, 0, 0, .18);
}

.sidebar .menu > a:nth-child(even),
.sidebar .menu-accordion:nth-child(even) > .menu-accordion-summary,
.sidebar .menu-accordion-content a:nth-child(even) {
    box-shadow:
        inset 3px 0 0 rgba(34, 197, 94, .5),
        0 8px 22px rgba(0, 0, 0, .18);
}

.sidebar .menu > a:hover,
.sidebar .menu-accordion-summary:hover,
.sidebar .menu-accordion-content a:hover {
    border-color: rgba(250, 204, 21, .48) !important;
}

@media (max-width: 900px) {
    .christmas-snowflake {
        opacity: .55;
    }

    .sidebar::before {
        background-size: 36px 8px, 36px 8px;
        background-position: 0 1px, 18px 1px;
    }

    .christmas-corner-decoration {
        display: none;
    }

    /* En móvil la decoración no debe cambiar la cabecera ni el menú. */
    .sidebar-header h2::after,
    .menu-badge::before,
    .menu-badge::after {
        display: none;
    }

    body.panel-shell .sidebar,
    body.panel-shell .layout.menu-hidden .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .christmas-snowflake {
        animation: none;
        display: none;
    }

    .menu-badge::before,
    .menu-badge::after {
        animation: none;
    }
}