/* 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;
}

/* ---- Barra superior compacta + panel de avisos (todas las pantallas) ---- */
.topbar-envivo .navbar-brand {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
}
.topbar-logo {
  height: 28px;
  width: auto;
}
.info-toggle {
  line-height: 1;
  padding: 0.35rem 0.6rem;
}
.avisos-panel {
  background-color: #fff8e1;
  color: #5f4b00;
  border-bottom: 1px solid #ffe69c;
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
}

/* ---- Ajustes específicos de mobile/tablet ---- */
@media (max-width: 767px) {
  /* La barra superior queda fija arriba y compacta */
  .topbar-envivo .navbar-brand { font-size: 1rem; }
  .topbar-logo { height: 24px; }

  /* Footer: deja de flotar y se minimiza (solo "Cambiar evento") */
  footer.footer-envivo {
    position: static !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* Sin footer fijo no hace falta el relleno inferior del body */
  body { padding-bottom: 0 !important; }
}

/* 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;
  }
}