/* Contenedor de la barra de búsqueda */
.search-container {
  position: relative; /* Necesario para posicionar los resultados debajo */
  width: 100%; /* Ocupa todo el ancho */
  max-width: 400px; /* Ancho máximo para pantallas grandes */
  margin: 10px auto; /* Centrado horizontal y espacio superior */
}

/* Estilo de la barra de búsqueda */
#searchBar {
  display: block; /* Asegura que el ancho y altura se respeten */
  width: 100%; /* Se ajusta al tamaño del contenedor */
  padding: 10px 15px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de la fuente */
  border-radius: 20px; /* Bordes redondeados */
  outline: none; /* Elimina el contorno predeterminado */
  background-color: #fff; /* Fondo blanco */
  color: #333; /* Texto en gris oscuro */
  box-sizing: border-box; /* Incluye padding y borde en el ancho */
  transition: all 0.3s ease; /* Animación suave al interactuar */
}


/* Contenedor de los resultados */
.search-results {
  position: absolute; /* Coloca los resultados justo debajo */
  top: 100%; /* Mueve los resultados debajo de la barra */
  left: 0; /* Alineado al lado izquierdo de la barra */
  width: 100%; /* Mismo ancho que la barra */
  background-color: #222; /* Fondo oscuro */
  border-radius: 0 0 20px 20px; /* Bordes inferiores redondeados */
  max-height: 300px; /* Altura máxima */
  overflow-y: auto; /* Scroll si hay muchos resultados */
  z-index: 1000; /* Asegura que esté encima de otros elementos */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
}

/* Elemento individual de los resultados */
.search-result-item {
  padding: 10px 15px; /* Espaciado interno */
  font-size: 14px; /* Tamaño de la fuente */
  color: #fff; /* Texto blanco */
  cursor: pointer; /* Manita al pasar el mouse */
  border-bottom: 1px solid #444; /* Línea divisoria */
  transition: background-color 0.3s ease; /* Transición suave */
}

/* Efecto al pasar el cursor */
.search-result-item:hover {
  background-color: #e50914; /* Fondo rojo al pasar el cursor */
}

/* Diseño responsivo */
@media (max-width: 768px) {
  .search-container {
      max-width: 90%; /* Reduce el ancho en dispositivos más pequeños */
  }

  #searchBar {
      font-size: 14px; /* Ajusta el tamaño de la fuente */
      padding: 8px 12px; /* Reduce el espaciado interno */
  }

  .search-results {
      max-height: 200px; /* Reduce la altura máxima */
  }
}