/* PREMIUM MOBILE DRAWER & PWA REFINEMENTS */

/* Safe Area support for global header */
.header {
    padding-top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    z-index: 1500000 !important;
    /* High enough but not competing with menu */
}

/* Ensure our toggle button matches mobile hamburger styles */
.juuvix_drawer_toggle {
    display: none !important; /* Totalmente oculto en PC */
    cursor: pointer;
}

/* Back arrow - Solo aparece en modo búsqueda */
.mobile_back {
    display: none !important;
}

body.search-mode-active .mobile_back {
    display: flex !important;
}

/* GLOBAL RESET FOR ALL LINKS - Remove Underlines for a premium look */
a,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}

/* Mobile Drawer - Side Menu Transformation */
@media screen and (max-width: 900px) {
    .juuvix_drawer_toggle {
        display: flex !important;
        padding-left: 5px;
        padding-top: 2px;
    }

    /* Force visibility using the most specific path possible */
    html body .mobile_left,
    html body div.mobile_left {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 2100000 !important;
        transform: translateX(-100%) !important;
        background: rgba(15, 20, 30, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 15px 0 50px rgba(0, 0, 0, 0.6) !important;
        padding-top: calc(env(safe-area-inset-top, 20px) + 20px) !important;
        overflow-y: auto !important;
    }

    /* Active State */
    html body.juuvix-drawer-active .mobile_left,
    html body.juuvix-drawer-active div.mobile_left {
        transform: translateX(0) !important;
        display: block !important;
        visibility: visible !important;
    }


    /* Drawer Overlay */
    html body .drawer-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: 2000000 !important;
        /* BELOW DRAWER */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }


    html body.juuvix-drawer-active .drawer-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* Prevent body scroll */
    html body.juuvix-drawer-active {
        overflow: hidden !important;
    }

}

/* Desktop Fix: Restore sidebar position despite being moved to body root */
@media screen and (min-width: 901px) {
    .mobile_left {
        display: block !important;
        position: absolute !important;
        top: 72px !important;
        left: calc(50% - 600px) !important;
        /* Rough centering with wrapper */
        width: 270px !important;
        z-index: 1 !important;
    }

    /* Better Flex approach for modern browsers */
    @supports (display: flex) {
        body {
            display: grid;
            grid-template-areas: "header header" "sidebar content";
            grid-template-columns: auto 1fr;
        }

        .header {
            grid-area: header;
        }

        .mobile_left {
            grid-area: sidebar;
            position: sticky !important;
            top: 72px !important;
            height: calc(100vh - 72px) !important;
        }

        .wrapper {
            grid-area: content;
        }
    }
}

/* Status Bar Immersion (Mock padding for top) */
@media screen and (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Micro-interactions for Bottom Bar */
.i_m_box_item svg {
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.i_m_box_item:active svg {
    transform: scale(0.85) !important;
}

/* High-tech touch indicators */
.active_item::before {
    content: '';
    position: absolute;
    top: -5px;
    width: 20px;
    height: 2px;
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
    border-radius: 2px;
}