/*
 * CSS para el manejo del estado del sidebar
 * Evita animaciones no deseadas al restaurar el estado
 */

/* Estado inicial colapsado aplicado antes de la carga del DOM */
html.sidebar-collapsed-initial .app {
    /* Aplicar estado colapsado inmediatamente */
}

html.sidebar-collapsed-initial .app .app-sidebar {
    width: 50px !important;
    overflow: visible !important;
}

html.sidebar-collapsed-initial .app .app-content {
    margin-left: 50px !important;
}

html.sidebar-collapsed-initial .app .app-menu__label {
    display: none !important;
}

/* Clase temporal para deshabilitar transiciones durante la restauración del estado */
.no-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Asegurar que el sidebar se restaure sin animación al cargar */
.app.sidebar-restoring,
.app.sidebar-restoring * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
}

/* Forzar el estado colapsado sin transiciones */
.app.sidebar-restoring.sidenav-toggled .app-sidebar {
    width: 50px !important;
    overflow: visible !important;
}

.app.sidebar-restoring.sidenav-toggled .app-content {
    margin-left: 50px !important;
}

.app.sidebar-restoring.sidenav-toggled .app-menu__label {
    display: none !important;
}

/* Restaurar transiciones después de la carga inicial */
.app:not(.sidebar-restoring) {
    transition: all 0.3s ease;
}

.app:not(.sidebar-restoring) .app-sidebar {
    transition: all 0.3s ease;
}

.app:not(.sidebar-restoring) .app-content {
    transition: all 0.3s ease;
}

/* Asegurar que no haya parpadeo en la carga inicial */
@media (min-width: 768px) {
    html.sidebar-collapsed-initial .sidebar-mini.sidenav-toggled .app-sidebar {
        width: 50px !important;
        overflow: visible !important;
    }
    
    html.sidebar-collapsed-initial .sidebar-mini.sidenav-toggled .app-content {
        margin-left: 50px !important;
    }
    
    html.sidebar-collapsed-initial .sidebar-mini.sidenav-toggled .app-menu__label {
        display: none !important;
    }
}