/**
    * Estos son los breakpoints que se deben usar:
    * xs: max-width: 575px
    * sm: max-width: 767px
    * md: max-width: 991px
    * lg: max-width: 1200px
    * xl: max-width: 1400px
**/



/*------------------------------------
   ?TABLE OF CONTENTS
------------------------------------*/
/**
   * ?TABLE OF CONTENTS........... Lo estás leyendo!!
   * ?LOGIN........... Maquetación del login.
   * ?MAIN LAYOUT........... Estilos de la sección principal donde se muestra el contenido.
**/






/*------------------------------------
   ?LOGIN
------------------------------------*/

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(20px, 5%, 60px) clamp(15px, 5%, 80px);
    background-image: url(../img/bg-login.jpg);
    background-position: center;
    background-size: cover;
}

.login .logo {
    width: 220px;
}

.login .card {
    max-width: 100%;
    width: 400px;
}






/*------------------------------------
   ?MAIN LAYOUT
------------------------------------*/

.main {
    margin-left: calc(var(--aside-width) + var(--frame-padding) + 10px);
    padding: 10px;
    transition: margin-left var(--transition-time);
}

@media (max-width: 575px) {
    .main {
        margin-left: calc(var(--fixed-aside-small-width) + var(--frame-padding) + 10px);
    }
}







/*------------------------------------
   ?REPORTS
------------------------------------*/

.tabsMenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}



.coursesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 10px;
}