/* Sidebar Responsive Styles - Estilos para sidebar en dispositivos móviles y tablets */
/* Estos estilos se aplican antes de que cargue el JavaScript para evitar FOUC */

/* Aplicar estado inicial para dispositivos no-PC (móviles y tablets) antes de que cargue el JS */
/* Cuando el sidebar está colapsado, ocultarlo y ajustar dimensiones */
@media (max-width: 1024px) {
    body[data-sidebar-size="collapsed"] .startbar {
        display: none !important;
        transition: display 0.3s ease;
    }
    body[data-sidebar-size="collapsed"] .page-content,
    body[data-sidebar-size="collapsed"] .page-wrapper .page-content {
        margin-left: 0 !important;
        width: 100% !important;
        transition: margin-left 0.3s ease, width 0.3s ease;
    }
    body[data-sidebar-size="collapsed"] .topbar {
        left: 0 !important;
        width: 100% !important;
        transition: left 0.3s ease, width 0.3s ease;
    }
}

/* Asegurar dimensiones correctas en móviles */
@media (max-width: 767px) {
    body[data-sidebar-size="default"] .page-content,
    body[data-sidebar-size="default"] .page-wrapper .page-content {
        width: 100% !important;
    }
    body[data-sidebar-size="default"] .topbar {
        width: 100% !important;
    }
}