/* 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 */

/* En móviles: ocultar sidebar completamente cuando está colapsado */
@media (max-width: 767px) {
    body[data-sidebar-size="collapsed"] .startbar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        transition: display 0.3s ease, visibility 0.3s ease, opacity 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;
    }
}

/* En tablets: el sidebar colapsado muestra solo iconos (no se oculta) */
/* Los estilos para el sidebar colapsado con iconos están en _startbar.scss */

/* Regla específica para tablets grandes (768px - 1280px) */
@media (min-width: 768px) and (max-width: 1280px) {
    /* Asegurar que el sidebar colapsado muestre solo iconos, no se oculte */
    body[data-sidebar-size="collapsed"] .startbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 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;
    }
}