/* LAYOUTS */
@import url('layouts/header.css');
@import url('layouts/nav-bar.css');
@import url('layouts/footer.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* UI */
@import url('ui/saldo.css');
@import url('ui/listaMovimientos.css');
@import url('ui/form-login.css');
@import url('ui/modal-recuperar-password.css');
@import url('ui/alertas.css');
@import url('ui/modal-pago.css');
@import url('ui/pestanas.css');
@import url('ui/avatar_perfil.css');
@import url('ui/terminos-condiciones.css');
@import url('ui/tarjeta_digital.css');
/* PAGES */
@import url('pages/login.css');
@import url('pages/perfil.css');
@import url('pages/inicio.css');
@import url('pages/tarjeta.css');
@import url('pages/pagar.css');
@import url('pages/404.css');
/* Estilos generales */
@import url('main-styles.css');

/* Animaciones */
@import url('animations.css');
/* components */
@import url('components/side-bar.css');

/* Estilos de main */
main{
  height: 100vh;
  width: 100%;
  /* main es hijo flex de body: sin esto conserva min-width:auto y no puede
     encoger por debajo de su contenido, así que una tabla con min-width empuja
     la página entera en vez de scrollear dentro de su contenedor. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
}

/* Estilos main login */
.main-login-container{
  display: flex;
  width: 100vw;
  height: 90vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Estilos de body */
body {
  
  /* BG-PREGUNTAR */
  /* background: linear-gradient(160deg, #2c4a6e 0%, #4a7fa5 50%, #8ab4cc 100%); */
  
  /* BG */
  /* background: linear-gradient(180deg, #29497B, #E4EEFE 100%); */
  display: flex;
  background-color: #e0e5eb !important;
  font-family: 'DM Sans', sans-serif;
}