/* =========================================================
   RESPONSIVE SIDEBAR & BOTTOM NAV MOBILE
   ========================================================= */

/* --- 1. DESKTOP & TABLET COLLAPSED STATE (min-width: 769px) --- */
@media (min-width: 769px) {
    /* Cuando el body tiene la clase sidepanel-collapsed, el menú se encoge a 80px */
    body.sidepanel-collapsed .app-sidepanel,
    body.sidepanel-collapsed .app-sidepanel .sidepanel-inner {
        width: 80px;
        left: 0 !important;
        transition: all 0.4s ease-in-out;
    }
    
    body.sidepanel-collapsed .app-wrapper,
    body.sidepanel-collapsed .app-header-inner {
        margin-left: 80px !important;
        transition: all 0.4s ease-in-out;
    }

    /* Ocultar textos del menú */
    body.sidepanel-collapsed .nav-link-text {
        display: none !important;
    }

    /* Reducir el logo superior */
    body.sidepanel-collapsed .app-branding .logo-img {
        max-width: 45px;
    }

    /* Centrar iconos */
    body.sidepanel-collapsed .app-nav .nav-icon {
        left: 0;
        position: relative;
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 auto;
        top: 0;
    }

    body.sidepanel-collapsed .app-nav .nav-link {
        padding-left: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Mostrar un tooltip o pequeño hint on hover (opcional) */
    body.sidepanel-collapsed .app-nav .nav-link:hover .nav-link-text {
        display: block !important;
        position: absolute;
        left: 80px;
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        color: #252930;
        z-index: 1000;
        width: auto;
        white-space: nowrap;
    }
}

/* --- 2. MOBILE BOTTOM NAV STATE (max-width: 1199px pero aplicamos bottom nav a max-width: 768px) --- */
@media (max-width: 768px) {
    /* Ocultar el backdrop oscuro cuando "se abre" el menu (porque ahora estara fijo abajo) */
    .sidepanel-visible .sidepanel-drop {
        display: none !important;
    }

    /* Transformar el Sidepanel a Bottom Nav */
    .app-sidepanel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0 !important;
        width: 100%;
        height: 65px;
        min-height: 65px;
        z-index: 1030;
        display: flex;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        transition: none !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    .app-sidepanel .sidepanel-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        background: inherit; /* Toma el bg color configurado */
        box-shadow: none;
    }

    /* Ocultar elementos de la cabecera del sidebar (logo y boton cerrar) */
    .app-branding, .sidepanel-close {
        display: none !important;
    }

    /* Hacer la lista de menú horizontal y scrolleable */
    .app-nav-main {
        flex-grow: 1;
        width: 100%;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
    }
    .app-nav-main::-webkit-scrollbar {
        display: none; /* Chrome */
    }

    .app-nav .app-menu {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .app-nav .nav-item {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 75px; /* Para asegurar que no se aplasten mucho si hay muchos items */
    }

    .app-nav .nav-link {
        padding: 0.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        background: transparent !important; /* overrides */
    }

    /* Modificador para el tab activo */
    .app-nav .nav-link.active {
        border-left: none !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-bottom-color: rgba(255, 255, 255, 0.5); /* Usa la transparencia en vez de color fijo para adaptarse al tema dinámico */
    }

    /* Ajuste del ícono para Bottom Nav */
    .app-nav .nav-icon {
        position: static;
        margin-bottom: 2px;
        font-size: 1.1rem;
        width: auto !important;
    }

    /* Texto microscópico o adaptado, como Instagram */
    .app-nav .nav-link-text {
        font-size: 0.6rem;
        white-space: nowrap;
        text-align: center;
        font-weight: 500;
    }

    /* Darle espacio al final de la página principal para que la tabla no quede tapada por el menu inferior */
    .app-wrapper {
        padding-bottom: 75px;
    }
}