/* Menú lateral en tablet y celular (menos de 992 px).
   La plantilla original solo contemplaba el tamaño de celular, y a medias: por debajo de 768 px
   escondía el menú pero dejaba la barra superior corrida 260 px a la derecha, encima del contenido
   (así se veía en la tablet de CEDI), y entre 768 y 991 px dejaba el menú fijo al lado, con lo que
   al contenido le quedaban unos 500 px y las tablas se salían. Aquí el menú se comporta como un
   cajón: oculto, se abre sobre el contenido con el botón de la barra y se cierra tocando por fuera.
   De 992 px en adelante no cambia nada. */
@media (max-width: 991.98px) {
    #app-content {
        margin-left: 0 !important;
        width: 100%;
    }

    .header .navbar {
        left: 0 !important;
    }

    .navbar-vertical {
        margin-left: -17rem;
        z-index: 1050;
    }

    #main-wrapper.toggled .navbar-vertical {
        margin-left: 0;
    }

    /* El menú se monta encima; empujar el contenido lo sacaría de la pantalla. */
    #main-wrapper.toggled #app-content {
        margin-left: 0 !important;
    }

    /* Fondo oscuro mientras el menú está abierto: se ve que está abierto y se cierra tocándolo. */
    #main-wrapper.toggled::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040;
    }
}