@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap');

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #22625d;
  margin-bottom: 6rem;
}

.topbar {
  background-color: #22625d;
  height: 5rem; /* 80px */
  border-radius: 0 0 1.25rem 1.25rem; /* 20px */
  padding: 0 1.25rem; /* 20px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar img {
  height: 1.875rem; /* 30px */
}

.main-nav {
  margin-left: auto; /* Empuja el menú hacia la derecha, después del logo */
  margin-right: 3rem
  }
/* Estilos para el menú de navegación principal */
.main-nav ul {
  list-style: none; /* Elimina los puntos de la lista */
  margin: 0;
  padding: 0;
  display: flex; /* Muestra los elementos de la lista en línea */
  gap: 2rem; /* Espacio entre los elementos del menú */
}

.main-nav li {
  display: flex; /* Para centrar contenido vertical y horizontalmente */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente para los elementos de texto */
  flex-direction: column; /* Apila el texto y la imagen si fuera necesario en el futuro */
}

.main-nav a {
  text-decoration: none; /* Quita el subrayado de los enlaces */
  color: #FFFFFF; /* **Palabras del menú en blanco** */
  font-weight: 500;
  font-size: 1rem;
  position: relative; /* Necesario para la línea del hover */
  padding-bottom: 0.25rem; /* Espacio para la línea de abajo */
}

.main-nav a:hover {
  color: #f9e6bb; /* Color de texto al pasar el ratón por encima */
}

/* Línea debajo al hacer hover para los enlaces de texto */
.main-nav a:not(:has(img))::after { /* Aplicar solo a enlaces que no contengan una imagen */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height:3px;
  background-color: #f39cc7;
  transition: width 0.2s ease-out;
}

.main-nav a:not(:has(img)):hover::after { /* Aplicar hover solo a enlaces que no contengan una imagen */
  width: 100%;
}

.main-nav img {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 0.125rem solid #59C79F;
  display: block;
  margin: 0 auto;
}

/* --- Media Queries para Responsive --- */

@media (max-width: 600px) { /* Por ejemplo, para pantallas de hasta 768px (tablets y celulares) */
  .main-nav {
    display: none; /* Oculta el menú de navegación principal */
  }

  /* Asegurarse de que el logo y el cabecera (puntos/notificaciones) estén distribuidos */
  .topbar {
    justify-content: space-between; /* Mantiene la distribución entre los elementos restantes */
  }
}

.topbar .right-icons {
  display: flex;
  align-items: center;
  gap: 1.125rem; /* 18px */
}

.notif {
  height: 1.875rem;
}
.cabecera {
  display: flex;
  gap: 1.25rem;
}

.puntos {
  background-color: #f9e6bb;
  padding: 0.3125rem 0.9375rem; /* 5px 15px */
  border-radius: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1rem; /* 16px */
  gap: 0.3125rem;
}

.puntos img {
  height: 1.125rem;
  width: 1.125rem;
}

.puntos .notificaciones {
  height: 1.125rem;
  width: 1.125rem;
}

.bienvenida {
  padding: 1.25rem 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;
  text-align: left;
}

.foto-container {
  position: relative;
  display: inline-block;
}

.foto {
  height: 7.0625rem;
  width: 7rem;
  border-radius: 50%;
  object-fit: cover;
  border: 0.3125rem solid #59C79F;
}

.nivel {
  position: absolute;
  top: -0.3125rem;
  left: calc(50% - 3.75rem);
  height: 2.5rem;
}

.texto h1 {
  font-weight: 800;
  margin: 0.625rem 0 0.3125rem;
}

.texto p {
  font-weight: 500;
  margin: 0.25rem 0;
  color: #000;
  font-size:1rem;
  line-height: 0.97rem;
}

.bienvenida .sub {
   font-size: 0.7rem;
   color: #184d48;
   margin-top: 0.5rem;
 }


.texto p.nivel strong,
.texto p strong {
  font-weight: 900;
  color: #184d48;
}

.reto .fondo-reto {
  background-color: #ffffff;
  border-radius: 1.25rem;
  margin: 0 0.9375rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.header-reto {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.puntos-reto {
  background-color: #f9e6bb;
  padding: 0.3125rem 0.9375rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1rem;
  gap: 0.1875rem;
}

.puntos-reto img {
  height: 1.125rem;
  width: 1.125rem;
}

.texto-reto {
  margin: -1rem 0 0.3rem;
  color: #000;
}

.reto-card {
  background-color: #e8e8e8;
  padding: 1.875rem;
  border-radius: 0.625rem;
  margin: 1.25rem 0;
  font-weight: 8000;
  font-size: 1.25rem;
  text-align: center;
 color: #424242;
}

.temporizador-reto {
  text-align: center;
  margin: 1.5rem 0;
}

.tiempo-restante {
  font-weight: 600;
  color: #22625d;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #727272;
}

.gif-contador {
  width: 12rem;
  height: auto;
  margin-bottom: -1rem;
}

.boton-verde {
  display: block;
  background-color: #32a073;
  color: white;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
}



.calendario {
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 0.9375rem;
}

.dia {
  text-align: center;
  color: #000;
  font-weight: 500;
  padding: 0.8rem 0.3rem;
  background-color: #ffffff;
  border-radius: 20%;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  /* Para centrar el contenido (imagen y texto) dentro de cada .dia */
  display: flex; /* Convierte .dia en un contenedor flex */
  flex-direction: column; /* Apila los elementos (imagen, texto) verticalmente */
  align-items: center; /* Centra los elementos horizontalmente en el eje transversal */
  justify-content: center; /* Centra los elementos verticalmente en el eje principal (column) */
  flex-basis: 12%;
  min-width: 2rem;
  height: 4rem;
  box-sizing: border-box;
  overflow: hidden
  font-size 0.7rem;
  text-decoration: none;
}

.dia.hoy {
  background-color: #f39cc7;
  border-radius: 20%;
  text-decoration: none;
  color: #000;
}

.dia.hoy a { /* ¡APLICAR ESTILOS DIRECTAMENTE AL ENLACE! */
  text-decoration: none; /* Esto elimina el subrayado */
  color: #000; /* Esto cambia el color del texto del enlace a negro */

}

.dia.completado {
  background-color: #184d48;
}

.dia.completado img {
  /* No necesitas align-items aquí, ya que el padre (.dia) lo maneja */
  height: 1.875rem; /* 30px */
  width: auto; /* Asegura que la imagen mantenga su proporción */
  display: block; /* Asegura que la imagen se comporte como un bloque para un mejor control */
  margin: 0 auto; /* Centra horizontalmente si .dia es un flex container con align-items: center */
}

.enlace-seccion-accion {
  text-decoration: none; /* Elimina el subrayado por defecto del enlace */
  color: inherit; /* Hereda el color de texto de sus elementos hijos, para que no sea azul */
  display: block; /* Hace que el enlace ocupe todo el ancho disponible, comportándose como un bloque */
  cursor: pointer; /* Cambia el cursor a una mano para indicar que es clicable */
}


.accion {
  background-color: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  margin: 0.9375rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 255, 255, 0.1);
}

.header-accion {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-accion h2 {
 font-size: 1.3rem;
}

.puntos-accion {
  background-color: #f9e6bb;
  padding: 0.3125rem 0.9375rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.9375rem;
  gap: 0.1875rem;
}

.puntos-accion img {
  height: 1.125rem;
  width: 1.125rem;
}
.textoaccion {
  margin-top: -2rem;
  color: #000;
  font-weight: 500;
}

.comunidad h3{
margin: 1rem;
 
}

.usuarios {
  cursor: grab;
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
  overflow-x: auto;
  /* Scroll visual limpio */
  padding-left: 4rem;
  scroll-padding-left: 1.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Oculta la barra de desplazamiento en navegadores basados en WebKit (Chrome, Safari, Opera, Edge basado en Chromium) */
.usuarios::-webkit-scrollbar {
  display: none;
}

.usuario {
  background: white;
  border-radius: 0.75rem; /* 12px */
  padding: 0.625rem; /* 10px */
  min-width: 7.5rem; /* 120px */
  text-align: center;
  position: relative;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); /* 0 4px 12px */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Importante para que no se achiquen en el contenedor flex con overflow */
  flex-shrink: 0;
}

.usuario img {
  width: 4.375rem; /* 70px */
  height: 4.375rem;
  object-fit: cover;
}

.usuario p {
  margin: 0.3125rem 0; /* 5px 0 */
  font-weight: 500;
  border-bottom: 0.125rem solid #22625d; /* 2px */
  display: inline-block;
  padding-bottom: 0.125rem;
}

.usuario p strong img {
  width: 1.0625rem; /* 17px */
  height: 0.8125rem; /* 13px */
  margin-left: 0.25rem; /* 4px */
}

.usuario button {
  background-color: #f39cc7;
  border: none;
  border-radius: 50%;
  width: 2rem; /* 24px */
  height: 2rem;
  font-size: 1.5rem; /* 16px */
  font-weight: bold;
  color: white;
  margin-top: 0.625rem; /* 10px */
  position: static;
  transform: none;
  align-items: center;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: calc(100% - 1.25rem); /* 20px */
  margin: 0 0.625rem; /* 10px */
  height: 4.375rem; /* 70px */
  background-color: #32a073;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 1.875rem 1.875rem 0 0; /* 30px */
  z-index: 20;
}

.bottom-nav a img {
  height: 1.875rem; /* 30px */
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem; /* 4px */
  text-decoration: none;
  color: white;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
}

.bottom-nav a span {
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Media Query para ocultar la barra de navegación inferior en pantallas grandes */
@media (min-width: 600px) {
  .bottom-nav {
    display: none; /* Oculta la barra de navegación completamente */
  }

  body {
    margin-bottom:0rem; /* 70px */
  }
}

@media (min-width: 48rem) {
  /* futuras versiones para desktop */
}

/*FEED */
.titulo-comunidad {
  padding: 1.25rem 0.9375rem 0.625rem; /* 20px 15px 10px */
}

.titulo-comunidad h2 {
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  margin-bottom: 0.625rem; /* 10px */
}

.botonera a {
 background-color: #e0e0e0;
 border-radius: 1.25rem;
 padding: 0.5rem 1.0rem;
 font-size: 0.8rem;
 font-weight: 600;
 text-decoration: none;
 color: #929292e0;
 white-space: nowrap; /* Esto es bueno para que el texto dentro de cada botón no se rompa */
 border: 0.09375rem solid #7c7c7ce0;
 /* Asegura que los links se comporten como bloques para aplicar padding y ancho */
 display: inline-flex; /* O inline-block, pero inline-flex es útil si en el futuro quieres alinear contenido dentro del botón */
 align-items: center; /* Centra verticalmente el contenido del botón */
 justify-content: center; /* Centra horizontalmente el contenido del botón */
 
}

.botonera a.activo {
 background-color: #32a07a;
 color: white;
 border: none;
}

.botonera {
 display: flex;       /* Convierte el contenedor en un Flex container */
 flex-wrap: wrap;     /* ¡Esta es la clave! Permite que los elementos se envuelvan a la siguiente línea */
 gap: 0.2rem;         /* Espacio entre los botones (horizontal y vertical). Puedes ajustar este valor. */
 justify-content: flex-start; /* Opcional: Centra los botones si no llenan toda la fila, o cuando se envuelven */
 padding: 0 0.5rem;
}

.post {
  background: white;
  border-radius: 0.9375rem; /* 15px */
  gap: 1rem;
  margin: 0 0.9375rem 1.25rem; /* 15px 20px */
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.05);
  overflow: hidden;
}

.usuario-header {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  padding: 0.9375rem; /* 15px */
  border-bottom: 0.0625rem solid #e0e0e0;
  position: relative;
}

.usuario-header img {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.usuario-header strong {
  font-weight: 800;
  font-size: 0.875rem; /* 14px */
}

.usuario-header small {
  font-size: 0.75rem; /* 12px */
  color: #555;
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4px */
}

.usuario-header small img {
  height: 0.75rem; /* 12px */
  width: 0.625rem; /* 10px */
}

.puntos-post {
  background-color: #f9e6bb;
  border-radius: 0.625rem; /* 10px */
  padding: 0.4rem 0.7rem; /* 5px 15px */
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1rem; /* 16px */
  gap: 0.3125rem; /* 5px */
  margin-left: auto;
}

.puntos-post img {
  height: 1.125rem; /* 18px */
  width: 1.4rem; /* 21px */
  border-radius: 0;
}

.btn-mas,
.btn-mas:link,
.btn-mas:visited {
  background-color: #f39cc7;
  color: white;
  font-size: 2rem; /* 18px */
  font-weight: bold;
  border: none;
  border-radius: 50%;
  width: 2rem; /* 24px */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.post-img {
  width: 100%;
  height: auto;
  display: block;
}

.reacciones {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  padding: 0.625rem 0.9375rem 0; /* 10px 15px 0 */
}

.reacciones img {
  height: 1.125rem; /* 18px */
}

.post p {
  padding: 0 0.9375rem 0.9375rem; /* 0 15px 15px */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: #333;
}

.post p strong {
  font-weight: 800;
  margin-right: 0.375rem; /* 6px */
  color: #22625d;
}

@media (min-width: 48rem) {
  .titulo-comunidad h2 {
    font-size: 1.5rem; /* 24px */
  }

  .botonera a {
    font-size: 1rem; /* 16px */
    padding: 0.5rem 1.25rem; /* 8px 20px */
  }

  .post {
    max-width: 37.5rem; /* 600px */
    margin: 0 auto 1.5rem; /* 0 auto 24px */
  }

  .post p {
    font-size: 0.9375rem; /* 15px */
  }
}

/*PERFIL*/
.perfil-usuario {
  padding: 1.25rem 0.9375rem; /* 20px 15px */
  text-align: center;
}

.foto-perfil {
  position: relative;
  display: inline-block;
}

.foto-perfil .avatar {
  width: 7.6875rem; /* 123px */
  height: 7.75rem; /* 124px */
  border-radius: 50%;
  border: 0.3125rem solid #59C79F; /* 5px */
  object-fit: cover;
}

.avatarmale {
  width: 7.6875rem; /* 123px */
  height: 7.75rem; /* 124px */
  border-radius: 50%;
  border: 0.3125rem solid #ceb477; /* 5px */
  object-fit: cover;
}

.avatarmartu {
  width: 7.6875rem; /* 123px */
  height: 7.75rem; /* 124px */
  border-radius: 50%;
  border: 0.3125rem solid #f39cc7; /* 5px */
  object-fit: cover;
}


.enlacemale {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.icono-nivel {
  position: absolute;
  top: -0.1875rem; /* -3px */
  left: -0.375rem; /* -6px */
  width: 2.8125rem; /* 45px */
  height: 2.8125rem;
}

.icono-editar {
  position: absolute;
  top: 0.625rem; /* 10px */
  right: 0.3125rem; /* 5px */
  width: 1.75rem; /* 28px */
  height: 1.75rem;
}

.puntaje-centro {
  background-color: #f9e6bb;
  border-radius: 0.75rem; /* 12px */
  padding: 0.4375rem 1.125rem; /* 7px 18px */
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem; /* 7px */
  font-weight: 800;
  font-size: 1.25rem; /* 20px */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1rem; /* -16px */
}

.puntaje-centro img {
  height: 1.125rem; /* 18px */
}

.nombre-usuario {
  font-weight: 800;
  font-size: 1.375rem; /* 22px */
  margin: 1.25rem 0 0.625rem; /* 20px 0 10px */
  color: #22625d;
  text-align: center;
}

.acciones-usuario {
  display: flex;
  justify-content: center;
  gap: 0.5rem; /* 8px */
  margin-bottom: 1.25rem; /* 20px */
  flex-wrap: wrap;
  font-size: 1rem;
  
}

.seguidores {
  background-color: #f9e6bb;
  padding: 0.625rem 1rem; /* 10px 16px */
  text-decoration: none;
  border-radius: 0.9375rem; /* 15px */
  font-weight: 800;
  color: #22625d;
  display: flex;
  align-items: center;
}

.seguidores span {
  font-weight: 500;
  font-size: 0.75rem; /* 12px */
}

.btn-rosa {
  background-color: #f39cc7;
  color: white;
  font-weight: 500;
  border-radius: 0.9375rem; /* 15px */
  padding: 0.625rem 1rem; /* 10px 16px */
  text-decoration: none;
}

.btn-siguiendo {
  background-color: #22625d;
  color: white;
  font-weight: 500;
  border-radius: 0.9375rem; /* 15px */
  padding: 0.625rem 1rem; /* 10px 16px */
  text-decoration: none;
}

.icono-boton {
  width: 1.5rem; /* 24px */
  
}
.btn-rosa .icono-boton {
  width: 1.5rem; /* 24px */
}
.botonera .actividad {
display: none;
justify-content: center;
}

.subtitulo {
  text-align: left;
  padding: 0 0.9375rem; /* 0 15px */
}

.grafico {
  background-color: white;
  border-radius: 0.9375rem; /* 15px */
  padding: 0.9375rem; /* 15px */
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05); /* 0 4px 10px */
  margin: 0 0.9375rem 1.25rem; /* 0 15px 20px */
}

.grafico img {
  width: 100%;
  height: auto;
  display: block;
}

.porcentajes {
  display: flex;
  justify-content: space-around;
  padding: 0.0625rem 0.625rem; /* 1px 10px */
  flex-wrap: wrap;
}

.porcentaje {
  text-align: center;
  max-width: 6.25rem; /* 100px */
}

.porcentaje img {
  width: 100%;
  height: auto;
}

.porcentaje p {
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  color: #333;
  margin-top: 0.375rem; /* 6px */
}

.tpostperfil {
  text-align: left;
}

@media (min-width: 48rem) {
  .foto-perfil .avatar {
    width: 8.75rem; /* 140px */
    height: 8.75rem;
  }

  .subtitulo {
    max-width: 37.5rem;
    margin: 0 auto;
    margin-bottom: 1rem;
  }

  .acciones-usuario {
    gap: 1.25rem; /* 20px */
  }

  .grafico {
    max-width: 37.5rem; /* 600px */
    margin: 0 auto 1.5rem;
  }

  .porcentajes {
    justify-content: space-evenly;
  }

  .logros-section {
    max-width: 37.5rem;
    margin: 0 auto;
  }
}

/*LOGROS*/
.logros-section {
  background-color: #e8e8e8;
}

.medalla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* 12px */
  margin-bottom: 0.7rem; /* 20px */
}

.medalla img.medalla-icono {
  width: 7rem; /* 100px */
  height: 7rem;
  flex-shrink: 0;
}

.medalla .contenido-medalla {
  flex-grow: 1;
}

.medalla .contenido-medalla h4 {
  margin: 0 0 0.25rem; /* 0 0 4px */
  text-align: left;
  margin-top: 1rem; /* 10px */
}

.medalla .contenido-medalla p {
  margin: 0 0 0.375rem; /* 0 0 6px */
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  color: #333;
  text-align: left;
}

.medalla .contenido-medalla .barra-progreso {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

.medalla .contenido-medalla .barra-progreso img {
  height: 0.625rem; /* 10px */
  max-width: 10rem; /* 160px */
}

.medalla .contenido-medalla .barra-progreso span {
  font-size: 0.625rem; /* 10px */
  font-weight: 200;
  color: #757575;
}

.check-icon {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  margin-top: 1.25rem; /* 20px */
}

.falta img{
  opacity: 0.5;  
}

@media (min-width: 768px) {
  .foto-perfil .avatar {
    width: 8.75rem;
    height: 8.75rem;
  }

  .acciones-usuario {
    gap: 1.25rem;
  }

  .grafico {
    max-width: 600px;
    margin: 0 auto 24px;
  }

  .porcentajes {
    justify-content: space-evenly;
  }

  .logros-section {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Estilos para el Footer */
.pie-pagina {
  background-color: #22625D; /* Tono 22625D */
  color: #FFFFFF; /* Texto blanco para que contraste */
  padding: 1.5rem 1.25rem; /* Relleno superior/inferior y lateral */
  font-family: 'Manrope', sans-serif;
  display: none; /* Por defecto, el footer está oculto */
}

@media (min-width: 600px) {
  .pie-pagina {
    display: block; /* Muestra el footer en pantallas de 600px o más */
    /* Aquí se mantendrían los estilos flexbox para el contenido si los tuvieras definidos
       directamente en .pie-pagina, si no, se aplican a los hijos */
  }
  .contenido-principal-pie {
    display: flex; /* Asegura que el contenido se distribuya como flexbox */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }
  .logo-y-frase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 2rem;
    flex-shrink: 0;
  }
  .columnas-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-end;
    flex-grow: 1;
  }
}

.logo-pie {
  height: 2.5rem; /* Tamaño del logo en el footer */
  margin-bottom: 0.5rem; /* Espacio entre el logo y la frase */
}

.frase-pie {
  font-size: 1rem;
  margin: 0; /* Elimina márgenes predeterminados del párrafo */
  max-width: 20rem; /* Limita el ancho de la frase para que no sea demasiado larga */
  line-height: 1.4;
  margin-bottom: 1rem;
}

.columna {
  flex: 1; /* Permite que cada columna crezca y ocupe espacio */
  min-width: 150px; /* Ancho mínimo para cada columna antes de envolverse */
  text-align: center;
}

.columna p {
  margin: 0.2rem 0; /* Margen pequeño para los párrafos dentro de la columna */
  line-height: 1.3;
}

.columna p strong {
  font-size: 0.8em;
}

.info-pequeña {
  font-size: 0.7rem; /* Letra más chica para el puesto y el email */
  opacity: 0.8; /* Ligeramente más tenue para diferenciar */
}

.texto-legal {
  text-align: center;
  font-size: 0.6rem; /* Bien pequeña para el texto legal */
  opacity: 0.6; /* Un poco transparente para que no compita visualmente */
  padding-top: 1rem; /* Espacio entre las secciones y el texto legal */
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria sutil */
}

/* Estilos para PC */

@media (min-width: 900px) {

  body::before {
    content: "";
    background-image: url('../imagenes/cabecera.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15.5rem;
    z-index: -1;
  }

  .mainindex {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Columna izquierda 1/3, columna derecha 2/3 */
    grid-template-rows: auto auto 1fr; /* Tres filas automáticas para el contenido */
    grid-template-areas:
    "bienvenida-area reto-area"   /* Fila 1: Bienvenida en columna 1, Reto en columna 2 */
      "accion-area     calendario-area"     /* Fila 2: Acción en columna 1, Reto continúa en columna 2 */
      "comunidad-area  comunidad-area"; /* Fila 4: Comunidad ocupa ambas columnas */
    gap: 0rem; /* Espacio entre las celdas de la grilla */
    padding: 4rem; /* Un poco de padding general */
    z-index: 1;
  }

  /* Asignación de áreas a las secciones */
  .bienvenida {
    background-color: #e8e8e8;
    border-radius: 1.25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    grid-area: bienvenida-area;
    display: flex; /* Para organizar el contenido interno de bienvenida */
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
    text-align: center;
    gap: 0rem;
  }

  .accion { /* Esta es la sección "Registrá tu acción" */
    grid-area: accion-area;
    padding: 1.25rem;
    margin-left: 0rem;
    margin-right: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 1rem; /* Pequeño espacio entre bienvenida y acción */
  }

  .reto {
    grid-area: reto-area;
    margin-bottom: 0rem;
    margin-top: 0rem;
    display: flex;
    height: auto;
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido del reto al inicio */
  }

  .calendario {
    grid-area: calendario-area; /* Ahora el calendario tiene su propia área que abarca ambas columnas */
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
    min-height: 8rem;
  }

  .dia-completado,
  .dia.hoy,
  .dia {
    flex: 1;              /* <- Esto hace que todos los ítems crezcan proporcionalmente */
    min-width: 3rem;   /* <- Este es el mínimo para que no se achiquen de más */
    height: 5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 0.8rem;
    overflow: hidden;
    padding: 0.5rem;
        }

  
.dia span {
  display: block; /* Asegura que 'Mar' y '24' se apilen correctamente */
    line-height: 1.2; /* Ajusta el espacio entre líneas */
  }

.dia-completado img {
  width: 60%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
}

  .comunidad {
    grid-area: comunidad-area; /* Sigue ocupando ambas columnas */
    margin-top: 0rem;
    text-align: center;
  }

  .comunidad .usuarios {
    display: flex; /* Cambiamos a flexbox para un control más fino del gap fijo */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los elementos cuando hay menos */
    gap: 0.625rem; /* El gap fijo que quieres entre los usuarios */
  }

  .usuario {
    /* Mantenemos tus estilos existentes para cada usuario, pero quitamos cualquier grid-related style */
    flex-basis: 150px; /* Tamaño base para cada usuario, puedes ajustar esto */
    flex-shrink: 0; /* Evita que los elementos se encojan más allá de su tamaño base */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Estilos para TABLET */

@media (max-width: 900px) {
  main {
    display: flex;
    flex-direction: column;
  }

  .bienvenida,
  .accion,
  .reto,
  .calendario,
  .comunidad {
    grid-area: unset; /* Por si queda alguna propiedad heredada de grilla */
  }

  .calendario {
    flex-wrap: wrap; /* Volvé a permitir que se acomoden en varias líneas si hace falta */
  }

  .usuarios {
    justify-content: center;
  }
}


/* Notificaciones */

/* Contenedor para el botón de volver*/
.principal-notificaciones > div:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Alinea el botón al inicio */
  padding: 0.8rem 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
}

.boton-volverbt {
  display: block;
  background-color: #184d48;
  color: white;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  /* position: absolute; /* Removido para que se alinee con flexbox */
  /* left: 1rem; /* Removido */
}

.icono-volver {
  width: 2rem; /* Tamaño SVG */
  height: 2rem;
}

/* --- Lista de Notificaciones --- */
.lista-notificaciones {
  display: flex;
  flex-direction: column;
}

.item-notificacion {
  display: flex;
  align-items: center; /* Alinea la foto y el texto verticalmente */
  padding: 0.8rem 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef; /* Separador entre notificaciones */
  transition: background-color 0.2s ease;
}

.item-notificacion:hover {
  background-color: #e7e7e7; /* Fondo más claro al pasar el mouse */
}

.avatar-notificacion {
  width: 3rem; /* Tamaño del avatar */
  height: 3rem;
  border-radius: 50%; /* Avatares redondos */
  object-fit: cover;
  margin-right: 0.8rem;
  border: 1px solid #dbdbdb; /* Borde sutil al avatar */
  flex-shrink: 0; /* Evita que el avatar se encoja */
}

.contenido-notificacion {
  flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
  font-size: 0.9rem;
  line-height: 1.3;
}

.contenido-notificacion p {
  margin: 0;
  padding: 0;
}

.contenido-notificacion p strong {
  font-weight: 600; /* Texto de usuario en negrita */
}


.hora-notificacion {
  font-size: 0.75rem;
  color: #8e8e8e; /* Color gris para la hora */
  margin-top: 0.2rem;
  display: block; /* Para que la hora esté en su propia línea */
}


/*RANKING*/
/* --- Contenido Principal del Ranking --- */
.principal-ranking {
  padding: 1.15rem; /* Espaciado interno */
  text-align: left;
}


.titulo-ranking {
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  margin-bottom: 0.625rem; /* 10px */
}

/* --- Sección de Podios (Top 3) --- */
.seccion-podios {
  display: flex;
  justify-content: center; /* Centra los podios */
  align-items: flex-end; /* Alinea los podios por la parte inferior */
  gap: 0.1rem; /* Espacio entre los podios */
  margin-bottom: 2rem;
  min-height: 2rem; /* Asegura una altura mínima para los avatares */
  margin-top: 1rem;
}

.podio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Para posicionar el número del puesto */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.podio-item:hover .avatar-podio {
  transform: scale(1.08);
  box-shadow: 0 0 30px #f39cc7;
}

.avatar-podio {
  width: 6rem; /* Tamaño de avatar por defecto */
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #32a073; /* Borde blanco alrededor del avatar */
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.posicion-podio {
  font-weight: 800;
  font-size: 2rem; /* Tamaño del número grande */
  color: #ffffff; /* Color del número */
  position: absolute;
  bottom: -2rem; /* Ajusta para que quede por debajo del avatar */
  width: 4rem; /* Ancho del círculo/caja del número */
  height: 3.5rem; /* Alto del círculo/caja del número */
  border-radius: 0.8rem 0.8rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilos específicos para cada posición del podio */
.podio-primero .avatar-podio {
  width: 7.5rem; /* Avatar más grande para el primero */
  height: 7.5rem;
  border: 5px solid #f39cc7;
  margin-bottom: 0.8rem;
}
.podio-primero .posicion-podio {
  background-color: #f39cc7; /* Color de fondo del 1 */
  font-size: 2.8rem; /* Número 1 más grande */
  width: 6rem;
  height: 4rem;
  bottom: -2rem; /* Ajusta para que quede por debajo del avatar */
}

.podio-segundo .posicion-podio {
  background-color: #22625d; /* Color de fondo del 2 */
}

.podio-tercero .posicion-podio {
  background-color: #32a073; /* Color de fondo del 3 */
}


/* --- Lista del Ranking Completo --- */
.lista-ranking {
  background-color: #ffffff; /* Fondo blanco para la lista */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* Asegura que los bordes redondeados se vean bien */
  margin: 0 0 ; /* Margen a los lados y abajo */
  padding: 0; /* Asegura que no haya padding interno inicial */
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #efefef; /* Separador entre ítems */
  transition: background-color 0.2s ease;
}

.ranking-item:last-child {
  border-bottom: none; /* Elimina el borde inferior del último ítem */
}

.ranking-item:hover {
  background-color: #dbdbdb;
}

/* Estilo para el usuario actual (fila destacada) */
.ranking-usuario-actual {
  background-color: #f39cc7; /* Fondo rosa para la fila del usuario actual */
  font-weight: 600;
}

.ranking-usuario-actual .ranking-posicion,
.ranking-usuario-actual .ranking-nombre {
  color: #ffffff; /* Asegura que el texto sea blanco */
}

.ranking-posicion {
  font-weight: 800;
  font-size: 1.1rem;
  width: 2rem; /* Ancho fijo para la posición */
  text-align: center;
  flex-shrink: 0;
  color: #888; /* Color gris para el número de posición */
}

.ranking-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  border: 1px solid #dbdbdb;
  flex-shrink: 0;
}

.ranking-nombre {
  flex-grow: 1; /* Ocupa el espacio restante */
  font-weight: 500;
  font-size: 0.95rem;
}

.ranking-puntos {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 800;
  color: #555; /* Color de los puntos en la lista */
  font-size: 0.9rem;
  flex-shrink: 0; /* Evita que los puntos se encojan */
  margin-left: 0.5rem; /* Espacio a la izquierda de los puntos */
}

.ranking-puntos img {
  height: 1rem;
  width: auto;
}

.ranking-usuario-actual .ranking-puntos {
  color: #ffffff; /* Puntos blancos en la fila destacada */
}

@media (min-width: 900px) {
  .avatar-podio {
    width: 10rem;
    height: 10rem;
  }

  .podio-primero .avatar-podio {
    width: 13rem;
    height: 13rem;
  }

  .posicion-podio {
    font-size: 3rem;
    width: 6rem;
    height: 5rem;
    bottom: -2.5rem;
    border-radius: 1rem 1rem 0 0;
  }

  .podio-primero .posicion-podio {
    font-size: 4rem;
    width: 7rem;
    height: 5.2rem;
    bottom: -2.5rem;
  }

  .nombre-podio {
    font-size: 1.4rem;
  }

  .seccion-podios {
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .titulo-ranking {
    font-size: 2rem;
  }
}


/* --- Seguidores --- */
/* Contenedor principal */
.principal-seguidores > div:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 1.2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
}

/* Botón de volver */
.boton-volver {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #184d48;
}

.icono-volver {
  width: 2rem;
  height: 2rem;
}

/* Lista de seguidores */
.lista-seguidores {
  display: flex;
  flex-direction: column;
}

/* Cada ítem */
.item-seguidor {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: inherit
}

.item-seguidor:hover {
  background-color: #f0f0f0;
}

/* Avatar */
.avatar-seguidor {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
  border: 1px solid #dbdbdb;
  flex-shrink: 0;
}

/* Nombre */
.item-seguidor p {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

/* CONTENEDOR GENERAL DE TODAS LAS ACCIONES */
.lista-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

/* UNA ACCIÓN INDIVIDUAL */
.accionreg {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.2rem 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  
}

/* CATEGORÍA ARRIBA DE CADA ACCIÓN */
.categoria {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}

/* COLORES POR CATEGORÍA */
.categoria.agua {
  background-color: #59C79F; /* Verde marca */
}

.categoria.desechos {
  background-color: #cecdcd; /* Gris */
}

.categoria.ambiente {
  background-color: #f39cc7; /* Rosa */
}

.categoria.energia {
  background-color: #f9e6bb; /* Beige */
}


/* TEXTO DE LA ACCIÓN */

.contenido-accion p {
  margin: 0;
  font-size: 0.9rem;
  color: #184d48;
  font-weight: 600;
  flex: 1;
}

/* CHECKBOX ESTILO RADIO */
.radio-toggle {
  appearance: none;
  width: 2rem;
  height: 2rem;
  background-color: #e3e3e3;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.radio-toggle:checked::before {
  content: "";
  position: absolute;
  top: 0.30rem;
  left: 0.30rem;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #32a073;
  border-radius:50%;
}

.titulo-registro {
  padding: 0.5rem 1rem 0; /* 20px 15px 10px */
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  margin-bottom: 0rem;
}


.explicaciontitulo {
  font-size: 0.875rem; /* 14px */
  padding: 0.5rem 1rem 0.3rem; /* 20px 15px 10px */
  margin-top: 0rem;
  color: #000;
}


.boton-flotante {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #32a073;
  color: white;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
}



/*INGRESO*/

.inicio {
 margin-bottom: 0rem;
}

.slogan {
  font-weight: 500;
  font-size: 1rem;
  color: #ffffff; /* Color del texto general del slogan */
  text-align: center;
  margin-bottom: 2rem; /* Espacio entre el slogan y los botones */
}

/* Estilo específico para la palabra "cambia todo" en verde */
.slogan .verde {
  color: #A9D18E; /* El color verde vibrante que hemos estado usando */
  font-weight: 700; /* Opcional: hacerlo un poco más destacado */
}

/* Contenedor principal - Fondo de degradado */
.contenedor-ingresar {
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center; /* Centra el contenido horizontalmente */
  min-height: 100vh;
  padding: 2rem 1rem; /* Padding general para el contenido */
  box-sizing: border-box;

  /* La imagen de fondo ahora cubre toda la página */
  background-image: url('../imagenes/fondo-ingresar.png'); /* ¡La ruta es CRÍTICA aquí! */
  background-size: cover; /* Cubre todo el fondo de la página */
  background-position: center; /* Centra la imagen de fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* El nuevo contenedor para centrar y limitar el ancho del contenido */
.contenido-centrado {
  max-width: 27rem; /* Ancho máximo, similar a la tarjeta anterior */
  width: 100%;
  text-align: center; /* Centra el texto y elementos de bloque */
  
}

.botonesinicio .boton-principal{
margin-bottom: 1rem;
}


/* Logo */
.logo-ingresar {
  width: 15rem;
  height: auto;
  margin-bottom: 1.5rem;
  /* Si tu logo es oscuro y quieres que se vea blanco sobre el fondo: */
  /* filter: brightness(0) invert(1); */ 
}

/* Título de Bienvenida */
.titulo-bienvenida {
  font-weight: 600;
  font-size: 1.5rem;
  color: #f9e6bb; /* Texto blanco */
  margin-bottom: 2rem;
  margin-top: 3rem;
}

/* Contenedor del Formulario */
.formulario-ingreso {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
  background-color: transparent;
  padding: 0;
  width: 100%; /* Asegura que el formulario ocupe el ancho disponible en .contenido-centrado */
}

/* Inputs (Campos de Mail y Contraseña) - Las "burbujas" */
.grupo-input input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 1.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: #333;
  box-sizing: border-box;
  background-color: #ffffff; /* Fondo blanco para CADA burbuja */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.grupo-input input::placeholder {
  color: #a0a0a0;
}

.grupo-input input:focus {
  outline: none;
  box-shadow: 0 0 0.5rem rgba(34, 98, 93, 0.5);
}

/* Estilos del Botón "Ingresar" */
.boton-principal {
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: #32a073;
  color: white;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
  display: inline-block;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

.boton-principal:hover {
  background-color: #59C79F;
  color: #184d48;
}
.boton-secundario {
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  color: #22625d;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
  display: inline-block;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

.boton-secundario:hover {
  background-color: #59C79F; /* Fondo verde oscuro al pasar el mouse */
  color: #22625d; /* Texto blanco al pasar el mouse */
}
/* Línea separadora con texto "O" */
.linea-separadora {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
  color: #ffffff;
  font-size: 1rem;
}

.linea-separadora::before,
.linea-separadora::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #32a07a;
}

.linea-separadora:not(:empty)::before {
  margin-right: 0.75rem;
}

.linea-separadora:not(:empty)::after {
  margin-left: 0.75rem;
}

/* Texto y enlace "Registrarse" */
.texto-registro {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.enlace-registrarse-inline {
 color: #f9e6bb;
}

.enlace-registrarse-inline:hover { 
  color: #f39cc7;
  text-decoration: underline;
}

.enlace-form-link { 
  font-weight: 800;
  color: #f9e6bb;
  transition: color 0.3s ease;
}
.enlace-form-link:hover { 
  color: #f39cc7;
  text-decoration: underline;
}

/* Enlace "¿Olvidaste tu contraseña?" */
.enlace-olvido-contrasena {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin-top: 1.5rem;
  display: inline-block;
  transition: color 0.3s ease;
}

.enlace-olvido-contrasena:hover {
  color: #ffffff;
  text-decoration: underline;
}

/*FELICITACIONES*/
.reto-exito {
  background-color: #59C79F; /* fallback */
  background-image: url("../imagenes/celebracion.gif");
  background-size: cover;
  background-position: center;
  text-align: center;
  border-radius: 1.5rem;
  color: #000;
  margin-left: 1rem;
  margin-right: 1rem;
}

.fondo-exito {
  border-radius: 1.5rem;
  padding: 2rem 1rem;
  max-width: 22rem;
  margin: 0 auto;
}

.titulo-exito {
  font-size: 1.6rem;
  font-weight: 800;
  color: #184d48;
  position: relative;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.titulo-exito::after {
  content: "";
  display: block;
  height: 3px;
  background-color: #f9e6bb;
  width: 100%;
  margin-top: 0.3rem;
  border-radius: 4px;
}

.texto-exito {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.subtitulo-exito {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #184d48;
}

.puntos-exito {
  background-color: #f9e6bb;
  color: #184d48;
  font-weight: 800;
  align-items: center;
  display: flex;
  gap: 0.2rem;
  font-size: 1.5rem;
  padding: 0.6rem 1.5rem;
  border-radius: 0.8rem;
  margin: 0 auto 2rem; /* esto lo centra horizontalmente */
  margin-bottom: 1.5rem;
  justify-content: center;
  width: fit-content; /* se ajusta al contenido */
}

.puntos-exito img {
  width: 1.5rem;
  height: 1.5rem;
}

.boton-compartir {
  display: inline-flex;
  background-color: #184d48;
  color: rgb(255, 255, 255);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 2rem;
  margin: 0 auto 0;
  width: 80%;
  max-width: 15rem;
  font-size: 1.1rem;
  position: relative;
  justify-content: center;
  gap: 0.5rem;
}


/*BUEN TRABAJO*/
.bt {
 background-color: #59C79F;
}

.pantalla-buen-trabajo {
  margin: 0;
  padding: 0;
  background-color: #59C79F;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pantalla-buen-trabajo {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fondo-bt {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 0;
}

.contenido-bt {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0rem;
  color: #184d48;
  margin-top: 0.9rem;
  
}

.img-bt {
  width: 11rem;
}

.titulo-bt {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1rem;
  margin-top: 0rem;
  position: relative;
}

.titulo-bt::after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background-color: #f9e6bb;
  margin: 0.4rem auto 0;
  border-radius: 1rem;
}

.sabias-bt {
  background-color: #22836f;
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.texto-conseguiste {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #184d48;
}

.puntos-exito {
  background-color: #f9e6bb;
  color: #184d48;
  font-weight: 800;
  align-items: center;
  display: flex;
  gap: 0.2rem;
  font-size: 1.5rem;
  padding: 0.6rem 1.5rem;
  border-radius: 0.8rem;
  margin: 0 auto 2rem auto;
  justify-content: center;
  width: fit-content;
}

/*CALENDARIO HISTORIAL*/
.historial {
  margin: 0;
  padding: 1rem;
}

.historial h2 {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  color: #184d48;
  margin-bottom: 0rem;
}

.historial .racha {
  background-color: #22625d;
  padding: 0.6rem 1.2rem;
  border-radius: 1.5rem;
  color: white;
  font-weight: 400;
  display: inline-block;
  margin: 1rem 0;
  font-size: 1rem;
}

.historial .calendario {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.historial .calendario h3 {
  font-size: 1.2rem;
  margin-bottom: 0rem;
  margin-top: 0rem;
  
}

.historial .dias {
  border-top: 3px solid #32a073;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.historial .fila {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.historial .fila span,
.historial .fila a span {
  padding: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}

.historial .dias-titulos span {
  font-weight: bold;
  color: #555;
  font-size: 0.85rem;
}

.historial .dia-cumplido {
  background-color: #48c48d;
  color: white;
  height: 1.5rem;
  width: 1.5rem;
}

.historial .dia-hoy {
  background-color: #f39cc7;
  color: white;
  height: 1.5rem;
  width: 1.5rem;
}

.historial .dia-link {
  color: #184d48;
  text-decoration: none;
}

.historial .bloque-hoy {
  margin-top: 1.5rem;
  background: white;
  border-radius: 1rem;
  padding: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.historial .hoy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.historial .en-proceso {
  font-size: 0.85rem;
  color: #999;
}

.historial .accion-dia {
  border: 4px solid #f39cc7;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem 0;
  font-weight: 600;
  text-align: center;
}
.lista  {
 background-color: #f39cc7;
 color: #272727;
}

.nolisto {
  background-color: #a5a5a5;
  color: #272727;
 }

.historial .temporizador-hoy {
  font-size: 1rem;
  font-weight: 500;
  color: #184d48;
  text-align: center;
}

.historial .contador {
  color: #0b7b6c;
  font-weight: bold;
}

/* --- ESTILOS PARA EL CONTENIDO DE PUBLICAR(Nueva Página) --- */


/* Contenedor principal del main para FOTO.html página */
.main-contenido-post {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente el contenido */
  padding: 1.5rem 1rem 0; /* Padding superior, lateral y sin padding inferior inicial */
  min-height: calc(100vh - 5rem - 5rem); /* Altura mínima: 100vh - altura de topbar - altura de nav/footer */
  box-sizing: border-box;
  background-color: #e8e8e8; /* Asegura el color de fondo si el body no lo cubre */
  }

/* Contenedor de la imagen y el botón flotante */
.post-principal-container {
  position: relative; /* Es CRÍTICO para posicionar el botón de la cámara */
  width: 100%;
  max-width: 30rem; /* Ancho máximo para la imagen en pantallas grandes. Ajusta según necesites */
  margin-bottom: 0.8rem; /* Espacio debajo de la imagen antes del siguiente botón */
}

/* Imagen principal del post */
.post-principal-imagen {
  width: 100%;
  height: auto; /* CAMBIO CLAVE: Permite que la altura se ajuste automáticamente */
  object-fit: cover; /* CAMBIO CLAVE: La imagen cubrirá el espacio disponible, recortando si es necesario para evitar deformación */
  min-height: 20rem; /* Opcional: Asegura una altura mínima para que la imagen se vea "grande" */
  max-height: 35rem; /* Opcional: Limita la altura máxima en pantallas muy altas */
  display: block;
  border-radius: 1.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Botón flotante de la cámara (SVG) */
.boton-flotante-camara {
position: absolute;
bottom: -2rem; /* Ajusta la posición vertical */
left: 50%; /*Empuja el lado izquierdo del botón al centro */
transform: translateX(-50%); /* Desplaza el botón a la izquierda la mitad de su propio ancho, centrándolo */
width: 4rem;
height: 4rem;
background-color: #f39cc7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
z-index: 5;
transition: transform 0.2s ease-in-out;
}

.boton-flotante-camara:hover {
  transform: translateX(-50%) scale(1.1);
}

/* SVG dentro del botón de la cámara */
.boton-flotante-camara img {
  width: 1.8rem; /* Tamaño del icono de la cámara dentro del botón */
  height: auto;
  /* Si tu SVG de cámara es oscuro y necesitas que sea blanco sobre el rosa: */
  filter: brightness(0) invert(1); 
}

/* Estilo específico para el botón de galería (reutiliza .boton-verde y añade margen) */
.boton-galeria {
  width: 90%; /* Ajusta el ancho, no queremos que ocupe todo en pantallas grandes */
  max-width: 300px; /* Ancho máximo para este botón */
  margin-top: 3rem; /* Espacio superior para separarlo del contenido de arriba */
  /* Puedes ajustar o sobrescribir otras propiedades de .boton-verde aquí si quieres un estilo ligeramente diferente */
}

/* Publicar?*/
.main-contenido-publicar {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el contenido horizontalmente */
  padding: 1.5rem 1rem 0; /* Padding superior, lateral y sin inferior inicial */
  min-height: calc(100vh - 5rem - 5rem); /* Altura mínima: 100vh - topbar - nav/footer */
  box-sizing: border-box;
  background-color: #e8e8e8;
  margin-bottom: 5rem; /* Margen para asegurar espacio con la barra de navegación inferior */
}
.main-contenido-publicar .post-principal-imagen {
  height: 5rem; /* ¡Define una altura más pequeña aquí! Puedes probar con 300px, 350px, 400px. */
}
/* Caja de texto blanca flotante */
.caja-texto-publicar {
  position: absolute; /* Posicionamiento absoluto respecto a .post-principal-container */
  bottom: -1rem; /* Mantiene la misma altura que el botón de la cámara */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta para centrar perfectamente */
  width: calc(100% - 3rem); /* Ancho del recuadro, ajusta el 3rem para el padding lateral */
  max-width: 550px; /* Limita el ancho máximo del recuadro de texto */
  background-color: white;
  border-radius: 1.25rem; /* Bordes redondeados */
  padding: 1rem; /* Espacio interno */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* Sombra para que "flote" */
  z-index: 5; /* Asegura que esté sobre la imagen */
  box-sizing: border-box; /* Incluye padding en el width total */
  display: flex; /* Para centrar el textarea si es necesario */
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
}

.campo-nota {
  width: 100%; /* Ocupa todo el ancho de su contenedor */
  min-height: 3rem; /* Altura mínima para que se vea el placeholder */
  max-height: 8rem; /* Altura máxima para evitar que crezca demasiado */
  padding: 0.5rem; /* Padding interno para el texto */
  border: none; /* Sin borde */
  resize: vertical; /* Permite redimensionar solo verticalmente */
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: #22625d; /* Color del texto */
  outline: none; /* Quita el contorno al hacer focus */
  background-color: transparent; /* Fondo transparente para el textarea */
}

.campo-nota::placeholder {
  color: #a0a0a0; /* Color del texto placeholder */
  font-weight: 500;
}
.contador-caracteres {
  position: absolute; /* Posiciona el contador de forma absoluta dentro de .caja-texto-publicar */
  bottom: 0.8rem; /* Distancia desde la parte inferior de la caja */
  right: 1.25rem; /* Distancia desde la parte derecha de la caja */
  font-size: 0.8rem; /* Tamaño de fuente más pequeño */
  color: #a0a0a0; /* Color gris suave */
  font-weight: 500;
  pointer-events: none; /* Evita que el span interfiera con clics en el textarea */
}

/* Estilos para el botón "Agregar Ubicación" */
.boton-ubicacion {
  color: #1a4a46;
  border-radius: 1rem;
  padding: 0.8rem 1.5rem;
  font-weight: 400;
  font-size:0.9rem;
  text-align: left;
  text-decoration: none;
  display: inline-block; /* Se comporta como bloque pero respeta ancho */
  max-width: 300px; /* Ancho máximo en pantallas grandes */
  margin-top: 1.2rem; /* Espacio superior para separarlo de la caja de texto */
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

.boton-ubicacion:hover {
  background-color: #1a4a46; /* Verde oscuro un poco más oscuro al pasar el mouse */
  color: white; /* Cambia el color del texto a blanco */
}
/* Estilos para el icono de la izquierda (globo) */
.boton-ubicacion .icono-izquierda {
  width: 1.0rem; /* Ajusta el tamaño del icono */
  color: #000;
  height: auto;
  vertical-align: middle;
  margin-right: 0.75rem; /* Espacio entre el icono y el texto */
}

/* Estilos para el texto dentro del botón */
.boton-ubicacion span {
  flex-grow: 1; /* Permite que el texto se expanda y empuje el icono de la derecha */
  text-align: center; /* Centra el texto */
}

/* Estilos para el icono de la derecha (flecha) */
.boton-ubicacion .icono-derecha {
  vertical-align: middle;
  width: 1.0rem; /* Ajusta el tamaño del icono */
  height: auto;
  margin-left: 0.75rem; /* Espacio entre el texto y el icono */
}
/* Estilo para el botón "Compartir" (reutiliza .boton-verde) */
.boton-compartir2 {
  width: 90%;
  max-width: 300px;
  margin-top: 1rem;
}

/* --- ESTILOS ESPECÍFICOS PARA ubicacion.html --- */

.main-contenido-ubicacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 0; /* Espacio superior y lateral */
  min-height: calc(100vh - 5rem - 5rem); /* Ajusta si es necesario */
  box-sizing: border-box;
  background-color: #e8e8e8;
  margin-bottom: 5rem; /* Margen para asegurar espacio con la barra de navegación inferior */
}

/* Barra de búsqueda de ubicación */
.barra-busqueda-ubicacion {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 1.25rem; /* Bordes redondeados */
  padding: 0.75rem 1rem; /* Padding interno */
  width: 90%; /* Ocupa la mayor parte del ancho */
  max-width: 500px; /* Ancho máximo para pantallas grandes */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem; /* Espacio debajo de la barra */
}

.campo-busqueda-ubicacion {
  flex-grow: 1; /* Ocupa todo el espacio disponible */
  border: none;
  outline: none; /* Quita el contorno al hacer focus */
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: #22625d;
  background-color: transparent; /* Fondo transparente */
  padding-right: 0.5rem; /* Espacio antes del icono */
}

.campo-busqueda-ubicacion::placeholder {
  color: #a0a0a0;
  font-weight: 500;
}

.icono-busqueda {
  width: 1.2rem; /* Tamaño del icono de lupa */
  height: auto;
  flex-shrink: 0; /* Evita que el icono se encoja */
}

/* Sección de ubicaciones sugeridas */
.seccion-ubicaciones-sugeridas {
  width: 90%;
  max-width: 500px;
  background-color: white;
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.titulo-sugerencias {
  font-size: 1.1rem;
  font-weight: 800;
  color: #22625d;
  margin-top: 0;
  margin-bottom: 1rem; /* Espacio debajo del título */
  padding-left: 0.5rem; /* Alinea con el contenido de la lista */
}

.lista-ubicaciones {
  list-style: none; /* Elimina los puntos de la lista */
  padding: 0;
  margin: 0;
}

.lista-ubicaciones li {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Empuja los elementos a los extremos */
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid #eee; /* Línea separadora entre elementos */
}

.lista-ubicaciones li:last-child {
  border-bottom: none; /* Elimina la línea en el último elemento */
}

.detalle-ubicacion {
  display: flex;
  flex-direction: column; /* Apila el nombre y la distancia */
  flex-grow: 1; /* Permite que ocupe espacio */
}

.nombre-ubicacion {
  font-weight: 500;
  font-size: 1rem;
  color: #22625d;
}

.distancia-ubicacion {
  font-size: 0.8rem;
  color: #a0a0a0; /* Gris para la distancia */
  margin-top: 0.2rem;
}

.icono-flecha-derecha {
  width: 0.75rem; /* Tamaño más pequeño para la flecha */
  height: auto;
  margin-left: 0.5rem; /* Espacio antes de la flecha */
  flex-shrink: 0;
}

/* --- ESTILOS ESPECÍFICOS PARA galeria.html --- */
.bodygaleria {
 margin-bottom: 0rem;
}

.main-contenido-subir-imagen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0; /* Quitamos padding aquí para que la imagen ocupe todo el ancho */
  min-height: calc(100vh - 5rem - 5rem); /* Altura mínima, ajusta si es necesario por topbar/navbar */
  box-sizing: border-box;
  background-color: #e8e8e8; /* Un color de fondo base */
  position: relative; /* Importante para posicionar el botón fijo respecto a este main */
  overflow-y: auto; /* Permite scroll si la imagen es muy alta */
}

.imagen-principal-subir {
  width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  object-fit: cover; /* Recorta la imagen para cubrir el área si es necesario */
  /* Si quieres que ocupe una altura fija, por ejemplo, 70vh, puedes usar: */
  /* height: 70vh; */
  /* max-height: calc(100vh - 5rem - 5rem - 2rem); /* O una altura máxima calculada */
}

/* Botón fijo "Subir" */
.boton-subir-fijo {
  position: fixed; /* Mantiene el botón en su lugar al hacer scroll */
  bottom: 6.5rem; /* Posición desde abajo (ajústala si es necesario) */
  left: 50%; /* Coloca el borde izquierdo del botón en el centro de la pantalla */
  transform: translateX(-50%); /* Mueve el botón hacia la izquierda la mitad de su propio ancho para centrarlo */
  background-color: #32a073; /* El color verde de tus botones */
  color: white;
  padding: 0.8rem 2rem; /* Padding interno del botón */
  border-radius: 1.5rem; /* Bordes redondeados */
  text-decoration: none; /* Quita el subrayado del enlace */
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* Sombra para que destaque */
  z-index: 100; /* Asegura que esté por encima de otros elementos */
  transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
}

.boton-subir-fijo:hover {
  background-color: #22625d; /* Cambia de color al pasar el mouse */
}
.navegacion-superior-imagenes {
  display: flex;
  justify-content: space-between; /* Empuja los elementos a los extremos */
  align-items: center; /* Alinea verticalmente los elementos */
  padding: 1rem 1.25rem; /* Espaciado interno, ajusta si es necesario */
  background-color: #e8e8e8; /* El color de fondo de tu cuerpo */
  width: 100%;
  box-sizing: border-box;
}

.opcion-recientes {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Espacio entre el texto y la flecha */
  cursor: pointer; /* Indica que es clicable (aunque no tenga funcionalidad) */
}

.texto-recientes {
  font-weight: 500; /* Negrita */
  font-size: 1rem;
  color: #979595; /* Color verde oscuro */
}

.icono-flecha-abajo {
  width: 0.7rem; /* Tamaño de la flecha */
  height: auto;
  transform: rotate(90deg);
}