/* Establecer el tamaño de fuente base para el documento */
html {
    font-size: 1.2rem; 
}

body {
    font-family: 'Open Sans', sans-serif;
}

/* Estilo para el título personalizado */
.titulo-personalizado {
    text-align: center; /* Centra el texto */
    font-weight: bold; /* Texto en negritas */
    margin-top: 20px; /* Margen superior para separarlo de la imagen */
    margin-bottom: 20px; /* Margen inferior antes del contenido */
    /*font-size: 2.0rem;  Tamaño de fuente adecuado */
}


/* Establecer el tamaño de fuente para los encabezados h1, h2, h3 y los párrafos */
h1, h2, h3, p {
  font-size: 1.2rem; /* Ajusta el tamaño según tus necesidades */
}


/* Ajustes responsivos usando media queries */
@media (max-width: 600px) {
    html {
        font-size: 1rem; /* Disminuir el tamaño de fuente base para pantallas pequeñas */
    }

    /* Establecer el tamaño de fuente para los encabezados h1, h2, h3 y los párrafos */
    h1, h2, h3, p {
      font-size: 0.8rem; /* Ajusta el tamaño según tus necesidades */
    }
}

/* Resetear márgenes y rellenos */
body, html {
    margin: 0;
    padding: 0;
}

/* Estilo para la imagen de cabecera */
.header-recomendaciones {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilos para el fondo del mensaje de carga */
.loading-screen {
    display: none;
    position: fixed;
    z-index: 9999; /* Asegúrate de que tenga el z-index más alto para que aparezca en primer plano */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:rgba(185, 218, 245, 0.508); /*background: rgba(0, 0, 0, 0.5);*/
    align-items: center;
}

/* Estilos para el mensaje y el GIF */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(0.5);
    text-align: center;
}

#loadingMessage {
    font-size: 48px;       /* Aumenta el tamaño de la fuente */
    /*margin-left: 15px;      Añade margen a la izquierda para separarlo de la imagen */
}

/* Ajustes para pantallas de hasta 600px de ancho */
@media (max-width: 600px) {
    .loader {
        transform: translate(-50%, -50%) scale(0.75); /* Escala ligeramente más grande para pantallas pequeñas */
    }

    #loadingMessage {
        font-size: 24px; /* Tamaño de fuente más pequeño para pantallas móviles */
    }
}

/* Estilo general del contenedor */
#container {
    margin: 10px 20px; /* Añade un margen superior e inferior de 10px y un margen lateral de 20px */
}

/* Estilo para el recuadro con relieve */
#content {
    border: 1px solid #ccc; /* Bordes sutiles */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra para el efecto de relieve */
    padding: 20px; /* Espacio interior */
    margin: 20px 0; /* Margen superior e inferior */
    background-color: #fff; /* Fondo blanco */
}

.full-width-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.centered-image {
    display: block;
    margin: 20px auto;
    width: 250px; /* Reducir el tamaño del logo */
    height: auto;
}

@media (max-width: 600px) {
    .centered-image {
        width: 200px; /* Tamaño ligeramente más grande para pantallas pequeñas */
        height: auto;
    }

    .full-width-image {
        width: 100%;
        height: auto;
    }
}

/* Estilo para el contenedor */
.contenido-centrado {
    text-align: center; /* Centra todo el contenido */
    padding: 20px; /* Añade un poco de espacio alrededor */
}

/* Estilo para el mensaje de error */
.mensaje-error {
    font-size: 18px; /* Tamaño adecuado para lectura */
    margin: 0 auto; /* Centra el texto horizontalmente */
    max-width: 600px; /* Máximo ancho del texto */
}

/* Ajustes responsivos para pantallas pequeñas */
@media (max-width: 600px) {
    .mensaje-error {
        font-size: 16px; /* Tamaño de fuente más pequeño para pantallas pequeñas */
    }
}

.botones-contenedor {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    /*min-height: 100vh; /* Esto hace que el contenedor tenga al menos la altura de la ventana gráfica */
    flex-wrap: wrap; /* Asegura que los botones se envuelvan cuando no haya espacio */
    gap: 20px; /* Espacio entre botones */
    padding: 0 20px; /* Añadir algo de espacio a los lados para que no toquen los bordes de la pantalla */
  }
  
  .btn-no-util, .btn-util {
    flex: 0 1 auto; /* Los botones crecerán equitativamente */
    max-width: 200px; /* Establecer un máximo ancho para cada botón */
    padding: 5px 20px;
    border: none;
    border-radius: 20px; /* Igual para ambos botones */
    font-family: 'Open Sans', sans-serif;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial para ambos botones */
   
  }
  
  .btn-no-util:hover, .btn-util:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  }
  
  .btn-no-util:active, .btn-util:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  
  .btn-no-util {
    background-color: #fb7d90;
  }
  
  .btn-no-util:hover {
    background-color: #ff5a70;
  }
  
  .btn-no-util:active {
    background-color: #ff4960;
  }

/* Nuevo color para "No me fue útil" cuando está activo */
  .btn-no-util-active {
    background-color: #dd001d; 
}
  
  .btn-util {
    background-color: #3cbbde;
  }

  .btn-util:hover {
    background-color: #0398ca;
  }
  
  .btn-util:active {
    background-color: #0486b1;
  }

  /* Nuevo color para "Me fue útil" cuando está activo */
  .btn-util-active {
    background-color: #046cad; 
}

  .botones-contenedor-gusta {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    flex-wrap: wrap; /* Asegura que los botones se envuelvan cuando no haya espacio */
    gap: 20px; /* Espacio entre botones */
    padding: 0 20px; /* Añadir algo de espacio a los lados para que no toquen los bordes de la pantalla */
  }
  
  .btn-me-gusta {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    border: none;
    border-radius: 52px;
    background-color: white; /* Color de fondo del botón 'Me gusta' */
    color: #3db8df; /* Color del texto del botón 'Me gusta' */
    padding: 0.2rem 2.7rem 0.2rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-out;
    text-align: center;
    font-weight: bold;
    margin: 0;
    box-shadow: 0 0 0 3px #3db8df, 0 0 0 4px #7ac6b7; /* Efecto de borde degradado */
  }
  
  .btn-me-gusta::after {
    content: '>';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translate(50%, -50%);
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background-color: #7ac6b7; /* Color de fondo del círculo para 'Me gusta' */
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: white;
  }
  
  .btn-no-me-gusta {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    border: none;
    border-radius: 52px;
    background-color: white; /* Color de fondo para 'No me gusta' */
    color: #e77394; /* Color del texto para 'No me gusta' */
    padding: 0.2rem 2.7rem 0.2rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-out;
    text-align: center;
    font-weight: bold;
    margin: 0;
    box-shadow: 0 0 0 3px #e77394, 0 0 0 4px #f8b775; /* Efecto de borde degradado */
  }
  
  .btn-no-me-gusta::after {
    content: '>';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translate(50%, -50%);
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background-color: #f8b775; /* Color de fondo del círculo para 'No me gusta' */
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: white;
  }
  
  @media (max-width: 600px) {
    .btn-me-gusta, .btn-no-me-gusta {
      padding-right: 2.5rem;
    }
  
    .btn-me-gusta::after, .btn-no-me-gusta::after {
      right: 1rem;
    }
  }
  
  /* Contenido de Recomendaciones */
  .objetivos-personalizados {
    background-color: #f6f4f4;
    border: 1px solid #f6f4f4c5; /* Color de borde específico */
    position: relative;
    padding: 10px;
    margin-top: 10px; /* Margen superior */
    margin-bottom: 5px; /* Margen inferior */
    border-radius: 15px; /* Radio de borde redondeado */    
    padding-bottom: 35px; /* Espacio extra en la parte inferior para asegurar que haya espacio para los botones */
}
.alimentacion {
    background-color: #f6f4f4;
    border: 1px solid #f6f4f4c5; /* Color de borde específico */
    position: relative;
    padding: 10px;
    margin-top: 10px; /* Margen superior */
    margin-bottom: 5px; /* Margen inferior */
    border-radius: 15px; /* Radio de borde redondeado */
}

.actividad-fisica {
    background-color: #f6f4f4;
    border: 1px solid #f6f4f4c5; /* Color de borde específico */
    position: relative;
    padding: 10px;
    margin-top: 10px; /* Margen superior */
    margin-bottom: 5px; /* Margen inferior */
    border-radius: 15px; /* Radio de borde redondeado */
}
.habitos-saludables {
    background-color: #f6f4f4;
    border: 1px solid #f6f4f4c5; /* Color de borde específico */
    position: relative;
    padding: 10px;
    margin-top: 10px; /* Margen superior */
    margin-bottom: 5px; /* Margen inferior */
    border-radius: 15px; /* Radio de borde redondeado */
}
  .acciones-preventivas {
    background-color: #f6f4f4;
    border: 1px solid #f6f4f4c5; /* Color de borde específico */
    position: relative;
    padding: 10px;
    margin-top: 10px; /* Margen superior */
    margin-bottom: 5px; /* Margen inferior */
    border-radius: 15px; /* Radio de borde redondeado */
}


.contenedor-botones {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex; /* Cambiado a flex para manejar mejor el espaciado y la disposición */
  gap: 5px; /* Espaciado entre botones */
}


.btn-like-dislike {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.btn-like-dislike img {
    height: 30px;
    width: auto;
}

.btn-like-dislike:nth-child(2) {
    right: 10px; /* Espaciado adicional para el segundo botón */
}

@media screen and (max-width: 600px) {
  .btn-like-dislike {
      bottom: 30px;
      right: 15px; /* Posicionamiento horizontal si es necesario */
  }
}

/* Estilo para centrar el botón y agregar espacio */
#btn-comentario {
  display: flex;
  justify-content: center; /* Centra el botón horizontalmente */
  padding: 20px 0; /* Agrega 20px de espacio en la parte superior e inferior */
}

.btn-comentario-personalizado {
  display: flex; /* Habilita Flexbox para los elementos dentro del botón */
  align-items: center; /* Centra los elementos (imagen y texto) verticalmente */
  background-color: #007bff; /* Color de fondo específico */
  border: none; /* Opcional: quita el borde del botón si es necesario */
  color: #FFFFFF; /* Establece el color del texto */
  padding: 5px 10px; /* Ajusta el relleno para controlar el tamaño del botón */
}

.btn-comentario-personalizado img {
  height: 30px; /* Tamaño de la imagen */
  width: auto;
  margin-right: 10px; /* Espacio entre la imagen y el texto */
}

/* Cambia el estilo del texto al pasar el mouse sobre el botón */
.btn-comentario-personalizado:hover,
.btn-comentario-personalizado:active {
  color: #000000; /* Cambia a un color más oscuro */
}

.btn-comentario-personalizado:hover span,
.btn-comentario-personalizado:active span {
  text-decoration: underline; /* Subraya el texto */
  font-weight: bold; /* Pone el texto en negritas */
}

#textoComentario {
  height: 150px;
}

#gifComentarioRegistrado img {
  width: 100px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifComentarioRegistrado p {
  font-size: 20px;
}

#gifComentarioError img {
  width: 120px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifComentarioError p {
  font-size: 20px;
}

#gifCargando img {
  width: 100px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifCargando p {
  font-size: 20px;
}

/*Estilos de registro de comentarios de la sección*/
#textoComentarioSeccion {
  height: 150px;
}

#gifComentarioRegistradoSeccion img {
  width: 100px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifComentarioRegistradoSeccion p {
  font-size: 20px;
}

#gifComentarioErrorSeccion img {
  width: 120px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifComentarioErrorSeccion p {
  font-size: 20px;
}

#gifCargandoSeccion img {
  width: 120px; 
  height: auto; /* Mantiene la proporción del GIF */
}

#gifCargandoSeccion p {
  font-size: 20px;
}

/* ------------------- NUEVO CONTENIDO ------------------- */
/* #### Barra de mensaje ### */
.barra-mensaje {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Centra verticalmente */
  padding: 10px;
  color: black; /* Cambia el texto a color negro */
  /*font-weight: bold;*/
  margin-bottom: 20px; /* Solo margen inferior */
  margin-top: 0; /* Evita cualquier margen superior */
}


.mensaje-contenido {
  display: flex;
  align-items: center; /* Centra verticalmente */
}

.icono-imagen {
  width: 30px; /* Reduce el tamaño de la imagen */
  height: 30px;
  margin-right: 10px;
}

/*
.mensaje-texto {
  font-weight: bold; /* Texto en negritas 
}*/

.botones-barra {
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* Espacio entre botones */
}

/* Solo el botón "Abrir" subrayado */
#btnAbrir {
  background: none;
  border: none;
  color: black; /* Cambia el color del texto a negro */
  cursor: pointer;
  font-size: 16px;
  text-decoration: underline; /* Subraya solo el botón "Abrir" */
}

/* El botón "Cerrar" sin subrayado */
#btnCerrar {
  background: none;
  border: none;
  color: black; /* Cambia el color del texto a negro */
  cursor: pointer;
  font-size: 16px;
}


/* #### Mensaje Popup ### */

.popup-mensaje {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Asegura que el popup esté por encima del contenido de la página */
}

.popup-contenido {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 600px; /* Ajusta el ancho máximo del pop-up */
  margin: 0 20px; /* Márgenes laterales para espacios a los lados */
}

.popup-imagen {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.btn-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.btn-aceptar {
  margin-top: 20px;
  background-color: #2872bc;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

/* #### Mensaje Popup  - Nueva Info ### */

.popup-mensaje-nuevo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center; /* Centra horizontalmente el contenido del popup */
  align-items: center; /* Centra verticalmente el contenido del popup */
  z-index: 1000; /* Asegura que el popup esté por encima del contenido de la página */
}

.popup-contenido-nuevo {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  max-width: 600px;
  width: 100%;
}

.btn-cerrar-nuevo {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.popup-imagen {
  width: 80px;
  height: 80px;
  margin: 10px;
}

.contenedor-imagenes {
  display: flex;
  justify-content: space-around;
  /*margin: 20px 0;*/
  align-items: center;
  text-align: center; /* Centrar texto dentro del contenedor */
  flex-wrap: wrap; /* Permitir que los elementos se ajusten si hay poco espacio */
  gap: 20px; /* Añadir espacio entre las imágenes */
}

.imagen-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 120px; /* Limitar el ancho total del contenedor de cada imagen */
}

.descripcion-imagen {
  font-size: 14px;
  color: #555;
  margin-top: 10px; /* Añade espacio entre la imagen y la descripción */
  text-align: center; /* Asegura que el texto esté centrado */
  max-width: 120px; /* Limita el ancho del texto para que se divida en dos líneas */
  word-wrap: break-word; /* Permite que el texto se divida en líneas */
  overflow-wrap: break-word; /* También puedes usar esta propiedad */
  line-height: 1.2; /* Ajustar la altura de línea para mejor visualización */
}

.contenedor-botones-popup {
  margin-top: 20px;
}

.btn-accion {
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.btn-accion-1 {
  background-color: #28bca3ff; /* Generar nueva recomendación */
}

.btn-accion-1:hover {
  background-color: #37d3baff; /* Verde más oscuro al pasar el ratón */
}

.btn-accion-2 {
  background-color: #d32323a9; /* Cancelar */
}

.btn-accion-2:hover {
  background-color: #e04a4aa9; /* Rojo más oscuro al pasar el ratón */
}

.objetivos-personalizados, .alimentacion, .actividad-fisica, .habitos-saludables, .acciones-preventivas {
  background-color: #f6f4f4;
  border: 1px solid #f6f4f4c5; /* Color de borde específico */
  padding: 10px;
  margin-top: 20px; /* Margen superior para asegurar separación */
  margin-bottom: 20px; /* Margen inferior para asegurar separación */
  border-radius: 15px;
  position: relative; /* Usa relative para evitar superposición */
}

.popup-mensaje, .popup-mensaje-nuevo {
  position: fixed; /* Asegura que el popup esté flotando sobre el contenido */
  z-index: 1000; /* Asegura que el popup esté por encima de todo */
}

.objetivos-personalizados, .alimentacion, .actividad-fisica, .habitos-saludables, .acciones-preventivas {
  clear: both;
}

/* #### Mensaje Popup  - Aviso de privacidad ### */

#content-aviso-privacidad {
  text-align: center; /* Centrar el contenido del aviso de privacidad */
  margin-top: 10px; /* Reduce el margen superior */
  max-height: 300px; /* Ajusta el valor según sea necesario */
  overflow-y: auto;  /* Agrega scroll si el contenido excede la altura máxima */
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;  
  padding: 20px; /* Añade espacio alrededor del pop-up */
}

.popup-content-aviso {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh; /* Limita la altura para dejar espacio en la parte superior e inferior */
  overflow-y: auto; /* Habilita el scroll si el contenido es demasiado largo */
  margin: auto; /* Asegura que el pop-up esté centrado */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.titulo-personalizado-aviso {
  text-align: center;
  color: #333;
  font-size: 16px;
}
.boton-aceptar-aviso {
  background-color: #2872bc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: block;
  margin: 20px auto;
}
.boton-aceptar-aviso:hover {
  background-color: #1175d8;
}
.aviso-link {
  margin-top: 0;
  display: inline-flex; /* Cambia a inline-flex para que el icono y el texto queden en línea */
  align-items: center;  /* Alinea el icono y el texto verticalmente */
  color: #007BFF;
  text-decoration: underline;
  font-size: 16px;
}

.aviso-link img {
  margin-right: 10px; /* Espacio entre el icono y el texto */
  width: 16px; /* Ajusta el tamaño del ícono para que no se vea grande */
  height: 16px; /* Ajusta el tamaño del ícono */
  vertical-align: middle; /* Alinea el icono verticalmente al centro del texto */
}

.aviso-link:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* ####  Botones chatbot  ### */
/* Botones flotantes */
/* Botones flotantes */
.botones-flotantes {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 50px; /* Aumenta el valor para mayor separación */
}

.boton-flotante {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.boton-flotante img {
  width: 40px;
  height: 40px;
}

.boton-flotante:hover {
  filter: brightness(85%);
}

.tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #000000;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 50%;
  left: -160px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.boton-flotante:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Estilos para el popup */
.popup-content-chatbot {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 90%;
  width: 600px;
  position: relative;
}

.popup-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.titulo-icono {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.titulo-texto {
  color: #007bff;
  font-size: 18px;
  margin: 0;
  font-weight: bold;
}

.btn-cerrar-popup-chatbot,
.btn-minimizar-popup-chatbot {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 0;
  cursor: pointer;
  z-index: 1001;
}

.btn-cerrar-popup-chatbot {
  right: 10px;
}

.btn-minimizar-popup-chatbot {
  right: 40px;
}

.popup-iframe-container {
  width: 100%;
  height: 80vh;
  overflow-y: auto;
  margin-top: 10px;
}

.popup-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Estilos para la ventana minimizada */
.popup-minimizada {
  position: fixed;
  bottom: 0;
  right: 10px;
  width: 200px;
  height: 50px;
  background-color: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  z-index: 1001;
}

.popup-minimizada h3 {
  font-size: 14px;
  margin: 0;
  color: white;
}

.popup-minimizada button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* Botones de chatbot en secciones de recomendaciones */
.btn-chatbot-alimentacion {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* Asegura que el botón esté frente a otros elementos */
}

.btn-chatbot-alimentacion img {
  height: 50px;
  width: auto;
}

.btn-chatbot-alimentacion .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #45def7ec;
  color: #000;
  text-align: center;
  border-radius: 5px;
  padding: 5px;

  /* Posiciona el tooltip en relación al margen derecho de la pantalla */
  position: absolute;
  right: 0; /* Posicionar en el margen derecho */
  top: 110%; /* Debajo del ícono del chatbot */
  transform: translateX(0); /* Elimina el desplazamiento horizontal */

  z-index: 1000; /* Asegura que el tooltip quede en el frente */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-chatbot-alimentacion:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  font-size: 0.8rem;
}

.btn-chatbot-actividad-fisica {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* Asegura que el botón esté frente a otros elementos */
}

.btn-chatbot-actividad-fisica img {
  height: 50px;
  width: auto;
}

.btn-chatbot-actividad-fisica .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #71d126ff;
  color: #000;
  text-align: center;
  border-radius: 5px;
  padding: 5px;

  /* Posiciona el tooltip en relación al margen derecho de la pantalla */
  position: absolute;
  right: 0; /* Posicionar en el margen derecho */
  top: 110%; /* Debajo del ícono del chatbot */
  transform: translateX(0); /* Elimina el desplazamiento horizontal */

  z-index: 1000; /* Asegura que el tooltip quede en el frente */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-chatbot-actividad-fisica:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  font-size: 0.8rem;
}

.btn-chatbot-habitos-saludables {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* Asegura que el botón esté frente a otros elementos */
}

.btn-chatbot-habitos-saludables img {
  height: 50px;
  width: auto;
}

.btn-chatbot-habitos-saludables .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #ff8e22c4;
  color: #000;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  
  /* Posiciona el tooltip en relación al margen derecho de la pantalla */
  position: absolute;
  right: 0; /* Posicionar en el margen derecho */
  top: 110%; /* Debajo del ícono del chatbot */
  transform: translateX(0); /* Elimina el desplazamiento horizontal */

  z-index: 1000; /* Asegura que el tooltip quede en el frente */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-chatbot-habitos-saludables:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  font-size: 0.8rem;
}


.btn-chatbot-acciones-preventivas {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* Asegura que el botón esté frente a otros elementos */
}

.btn-chatbot-acciones-preventivas img {
  height: 50px;
  width: auto;
}

.btn-chatbot-acciones-preventivas .tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #ec3e44ff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  
  /* Posiciona el tooltip en relación al margen derecho de la pantalla */
  position: absolute;
  right: 0; /* Posicionar en el margen derecho */
  top: 110%; /* Debajo del ícono del chatbot */
  transform: translateX(0); /* Elimina el desplazamiento horizontal */

  z-index: 1000; /* Asegura que el tooltip quede en el frente */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-chatbot-acciones-preventivas:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  font-size: 0.8rem;
}

/* Estilos generales para el texto */
.texto-conversa {
    color: gray;
    font-style: italic;
    font-size: 16px; /* Tamaño por defecto */
    margin-right: auto;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .texto-conversa {
      font-size: 14px; /* Tamaño más pequeño para móviles */
    }
}

@media (max-width: 480px) {
    .texto-conversa {
      font-size: 12px; /* Tamaño más pequeño para pantallas muy pequeñas */
    }
}