:root {
    --primary: #382ab9;
    --light: #ffffff;
    --grey: #efefef;
}

body {
    overflow: hidden;
    font-family: 'Muli', sans-serif;
    font-weight: 300;
    color: var(--primary);
    margin: 0;
    padding: 0;
}

#startbecarios {
    height: 40px;
}

/* LETRAS DEL MENU SIN RAYA */
a:hover {
    text-decoration: none;
}

#start {
    height: 60px;
}

/* CUADRO DE DESCARGAR REPORTE */
.btn-primary {
    background-color: var(--primary);
    border: 0;
}

/* UACJ LOGO */
#sidebar-container .logo {
    padding: 0.875rem 1.25rem;
}

/* MENU LATERAL ANCHO */
#sidebar-container .menu {
    width: 23rem;
}

/* MENU LATERAL COLOR */
.bg-primary {
    background-color: var(--primary) !important;
}

/* MENU LATERAL LARGO */
#content {
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 5rem;
}

/* FOOTER */
.main-footer {
    background: var(--light);
    border-top: 1px solid #dee2e6;
    color: #869099;
    padding: 1rem;
}

/* Tamaños pequeños (móviles) */
@media (max-width: 768px) {
    /* Ajustar el tamaño del menú lateral */
    #sidebar-container .menu {
        width: 100%;
    }

    /* Ajustar el contenido para dispositivos móviles */
    #content {
        padding-bottom: 3rem;
    }

    /* Ajustar el footer para móviles */
    .main-footer {
        font-size: 14px;
        padding: 0.5rem;
    }
    
    /* Ajustar el botón de descarga en pantallas pequeñas */
    .btn-primary {
        width: 100%;
        font-size: 16px;
    }
}

/* Tamaños medianos (tabletas) */
@media (min-width: 769px) and (max-width: 1024px) {
    #sidebar-container .menu {
        width: 30%;
    }

    #content {
        height: auto;
    }
}

/* Tamaños grandes (PC de escritorio) */
@media (min-width: 1025px) {
    /* Mantener el menú con el ancho actual en pantallas grandes */
    #sidebar-container .menu {
        width: 23rem;
    }