@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400..900&display=swap');

body {
  font-family: "Ruda";
}

.fondo-oscuro {
  background: url('/media/imagenes/fondo-1.png') repeat center center / 15%;
}

.fondo-claro {
  background: url('/media/imagenes/fondo-2.png') repeat center center / 15%;
}
.topbar {
  position: fixed;
  background-color: #EDF1FA;
  top: 0px;
  height: 60px;
  z-index: 9999;
}
.contenido-fondo {
  background: #D3DFFC;
  height: 80%;
  width: 84%;
  margin: 25% 7% 0% 8%;
  padding: 5%;
  text-align: center;
}

 .contenido-app {
  margin-top: 60px;
  padding-bottom:70px;
 }
.general {
  background-color: #EDF1FA;
}

.contenido {
  height: 80%;
  width: 90%;
  margin: 0% 0% 0% 5%;
  padding: 5%;
  text-align: center;
}

.div-imagen-central {
  padding-bottom: 5px;
}

.imagen-central {
  background-color: white;
  width: 100%;
  border-radius: 25px;
  padding: 10% 20%;
}

.welcome-message {
  position: absolute;
  right: 0;
  font-family: 'ruda', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  gap: 0px;
  opacity: 1;
  color: #253663;
  background-color: #94B7DD;
  padding: 10px 20px;
  margin-top: -5%;

}

.app-description {
  font-family: 'ruda', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px; /* Ajustamos la línea vertical */
  text-align: left; /* Alineación central */
  color: #253663; /* Cambia el color del texto según sea necesario */
  padding: 25% 5% 15% 5%;

}

.rounded-9 {
  font-family: Ruda;
  border-radius: 35px;
  padding: 4% 0;
}

.mensaje-flotante {
  margin: 60% -15% 0 20%;
  padding: 10px 30px;
  font-family: 'ruda', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px; /* Ajustamos la línea vertical */
  text-align: center; /* Alineación central */
  gap: 0px;
  opacity: 1;
  color: #253663;
  background-color: #94B7DD;

}

.texto-g {
  color: #253663 !important;
  font-family: 'ruda', sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin-top: 30%;
  text-align: left;
}

.return-button {
  color: #FFFFFF !important; 
  position: absolute;
  top: 20px;
  left: 20px;
}

/* navbar */

.footer-nav-div {
  position: fixed;
  bottom: 0px;
  height: 8%;
  width: 100%;
  background-color: #EDF1FA;
}

.navigation-text {
  color: #8b8989;
  text-align: center;
  font-family: Ruda,sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.inicio {
  background: center / 40% no-repeat url(../media/navbar/home.png);
  height: 65%;
}

.dieta {
  background: center / 40% no-repeat url(../media/navbar/dieta.png);
  height: 65%;
}

.ejercicio {
  background: center / 40% no-repeat url(../media/navbar/ejercicio.png);
  height: 65%;
}

.relajacion {
  background: center / 40% no-repeat url(../media/navbar/relajacion.png);
  height: 65%;
}

.consejos {
  background: center / 40% no-repeat url(../media/navbar/consejos.png);
  height: 65%;
}
.row-footer {
  height:   100%;
}

.elemento-navbar {
  padding:  0px;
  text-align: center;
}


/* topbar */

.titulo {
  text-align: center;
  margin: auto;
}

.centrado {
  text-align: center;
}

.imagen-ayuda {
  width: 25px;
}

.atras, .ayuda, .perfil {
  font-family: Ruda;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
  color: #253663 !important;
  text-transform: none !important;
  margin-top: 0;
}


/* paginas */

.titulo-paginas {
  margin-top: 30%;
  font-family: Ruda;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #253663;
}

.numero-inicio{
  background-color: #253663;
  border-radius: 100%;
  color: white;
  padding: 0;
  text-align: center;
}

.lista-inicio, .lista-dieta, .lista-ejercicio, .lista-relajacion {
  margin-left: 5%;
  width: 90%;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #253663;
  padding: 2% 5%;
}

.texto-lista-inicio {
  font-family: Ruda;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
  text-transform: capitalize;
  color: #253663;
  display: flex;
  flex: auto;
  margin: 0% 5%;
}

.icono-lista-inicio {
  height: 30px;
  z-index: 2;
  background-color: #f9ddcc;
  border-radius: 25px;
  padding: 5px;
}

.contenido-dieta {
  margin:5%;
}

/* graficas */

.grafica {
  padding: 5% 5% 5% 5%;
  background-color: #f9ddcc;
  width: 90%;
  margin-left: 10%;
  margin-bottom: 5%;
}



/* recetas */
.titulo-receta {
  font-family: Ruda;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #253663;
  text-align: left;
  background-color: #fcf2e0;
  margin: 5% 5% 0;
  padding: 5% 5% 35%;
}

.imagen-receta-div {
  background-color: #f9ddcc;
  width: 90%;
  margin-left: 10%;
  padding: 5% 0 0 5%;
  margin-top: -30%;
}

.imagen-receta {
  border-radius: 25px 0 0 25px !important;
}

.tiempo, .personas {
  font-family: Ruda;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #253663;
  margin: 1%;
  padding-bottom: 5px;
}

.ingredientes, .elaboracion {
  margin: 5%;
}

.titulo-ingredientes, .titulo-elaboracion {
  font-family: Ruda;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: #253663;
}

.listado-de-ingredientes {
  font-family: Ruda;
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  color: #253663;
}

.div-boton-continuar {
  margin: 5%;
}

        /* colores 
        azul primario: #253663




        */