/* results_mobile.css */

/* Meta: se recomienda usar el viewport en el HTML; ya se agregó en results.php */

/* Base: establecemos un tamaño de fuente mayor para que se vea adecuado en móviles */
body {
  background-color: #f8f9fa;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; /* Base para móviles */
  font-weight: 400;
}

/* Encabezado: ajustado según Bootstrap */
header {
  padding: 1rem;
}

/* Sección de búsqueda */
#campoBusqueda {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 300px;
  font-size: 1.2rem; /* Input un poco más grande */
}

/* Título de la etapa */
#nombreEtapa {
  margin-top: 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 2rem; /* Aumentado para móviles */
}

/* Tarjeta de resultado */
#resultadoCard {
  margin: 1rem auto;
  max-width: 500px;
}

/* Ajuste de la tarjeta: aumentar tamaño de fuente en la card */
#resultadoCard .card-body {
  font-size: 1.2rem;
}

/* Botones: aumentar tamaño de fuente y padding para mejor usabilidad en móviles */
.btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.75rem 1.5rem;
}

/* Para dispositivos muy pequeños, se pueden ajustar ligeramente */
@media (max-width: 576px) {
  body {
    font-size: 16px;
  }
  #campoBusqueda {
    font-size: 1rem;
  }
  #nombreEtapa {
    font-size: 1.8rem;
  }
  #resultadoCard .card-body {
    font-size: 1rem;
  }
  .btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}