/* Menú de categorías compartido por la tienda y la navegación móvil */
.sidebar-categories {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.sidebar-categories .head {
    height: 50px;
    display: flex;
    align-items: center;
    background-color: var(--secundary-color);
    padding: 0 1.2rem;
    font-size: 0.85rem;
    /* Unificado */
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-categories .head i {
    font-size: 1rem;
    vertical-align: middle;
    line-height: 1;
}

/* --- 3. ENLACES Y ESTRUCTURA --- */
.sidebar-categories .main-nav-list a {
    font-size: 0.9rem;
    font-weight: 700 !important;
    color: #444;
    display: flex;
    padding: 0.6rem 1rem;
    margin: 4px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

/* Subcategorías */
.sidebar-categories .main-nav-list.child a {
    font-size: 0.85rem !important;
    padding-left: 2rem !important;
    border-left: none !important;
    margin: 0px 10px 0px 30px;
}

.main-nav-list a:not(.collapsed) .arrow-icon {
    transform: rotate(90deg);
}

/* --- 4. ESTADOS ACTIVOS Y HOVER --- */

/* Hover General (Naranja) */
.sidebar-categories .main-nav-list:not(.child)>a:not(.sidebar-text-active):hover {
    background-color: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
    padding-left: 1.5rem;
}

.sidebar-categories .main-nav-list.child a:not(.sidebar-text-active):hover {
    background-color: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
    padding-left: 2.5rem !important;
    /* Más indentación en hover de sub */
}

/* Activo Categoría Principal (Línea Grande - Azul/Secundary) */
.sidebar-categories .main-nav-list:not(.child)>a.sidebar-text-active {
    color: var(--secundary-color) !important;
    background-color: rgba(var(--secundary-color-rgb), 0.15) !important;
    border-left: 4px solid var(--secundary-color) !important;
    padding-left: 1.5rem !important;
}

/* Activo Subcategoría (Barrita Lateral - Azul/Secundary) */
.sidebar-categories .main-nav-list.child a.sidebar-text-active {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-color-rgb), 0.1) !important;
    border-left: none !important;
    padding-left: 2.5rem !important;
    position: relative;
}

.sidebar-categories .main-nav-list.child a.sidebar-text-active::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 25%;
    height: 50%;
    width: 3px;
    background-color: var(--primary-color) !important;
    border-radius: 4px;
}

/* Aseguramos que el hover de la subcategoría no choque */
.sidebar-categories .main-nav-list.child a:hover {
    padding-left: 2.5rem !important;
}

/* --- 6. SUBMENÚ Y JERARQUÍA --- */
.sub-menu {
    list-style: none;
    padding: 2px 0;
    margin: 0;
    background-color: #fcfcfc;
}

.sub-menu a {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-left: 25px !important;
    padding: 0.4rem 0.8rem !important;
    border-left: 1px solid #eee !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Ajuste de altura máxima para Desktop */
@media (min-width: 993px) {
    .sidebar-categories .body {
        /* Altura de pantalla (100vh) menos 110px de margen/header */
        max-height: calc(100dvh - 180px);
        overflow-y: auto;
        /* Permite scroll interno si hay muchas categorías */
        scrollbar-width: thin;
        /* Opcional: scroll más fino en Firefox */
    }

    /* Opcional: Personalización del scroll para Chrome/Safari */
    .sidebar-categories .body::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-categories .body::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
}

/* --- 7. BOTONES Y CIERRE --- */
@media (min-width: 768px) {
    .sidebar-categories .head .btn-close {
        display: none;
    }
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.btn-close-white:hover {
    opacity: 1;
}

/* --- 8. AJUSTES MÓVIL (Offcanvas / Floating) --- */
@media (max-width: 992px) {
    .sidebar-categories .body {
        background-color: #fff;
        border-radius: 0 0 0.75rem 0;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        border: 1px solid #eee;
    }

}





/* Sidebar de la vista de tienda */
#category-pc {
    display: block;
    z-index: 10;
}

@media (max-width: 992px) {
    #category-pc {
        display: none;
    }
}
.sidebar-text-active {
    color: var(--primary-color) !important;
    font-weight: bold;
}

.hover-bg-light:hover {
    background-color: #f8f9fa;
}