/* Contenedor principal del buscador */
.contenedor-buscador-cursos {
  position: relative;
  max-width: 220px; /* Ancho máximo del buscador */
  margin: 0 10px auto 0;
  font-family: Inter, sans-serif;
}

/* Campo de búsqueda + icono */
.campo-busqueda {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 220px;
}

.icono-lupa {
  position: absolute;
  left: 8px;
  color: #888;
  pointer-events: none; 
  display: flex;
  align-items: center;
}

/* Input (soporta ID o clase, para 1 o varias instancias) */
.buscador-cursos-input,
#buscador-cursos-input {
  width: 100%;
  padding: 9px 14px 9px 35px !important;
  border-radius: 8px !important;
  border: 1px solid #c2c2c2 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  outline: none;
  font-family: Inter !important;
  line-height: 18px;
  background: #fff;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
  -webkit-transition: all 0.3s ease !important;
  -moz-transition: all 0.3s ease !important;
  -ms-transition: all 0.3s ease !important;
  -o-transition: all 0.3s ease !important;
}

/* Quitar adornos nativos del search por si usas type="search" */
.buscador-cursos-input::-webkit-search-decoration,
.buscador-cursos-input::-webkit-search-cancel-button,
.buscador-cursos-input::-webkit-search-results-button,
.buscador-cursos-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
#buscador-cursos-input::-webkit-search-decoration,
#buscador-cursos-input::-webkit-search-cancel-button,
#buscador-cursos-input::-webkit-search-results-button,
#buscador-cursos-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.buscador-cursos-input:focus,
#buscador-cursos-input:focus {
  box-shadow: 0 0 8px rgba(170, 0, 0, 0.2) !important;
}

/* Resultados (soporta ID o clase) */
.resultados-contenedor,
#resultados-busqueda-cursos {
  position: absolute;
  top: calc(100% + 5px); /* espacio entre la barra y los resultados */
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 1000;
  overflow: hidden;

  /* Animación de entrada */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.resultados-contenedor.visible,
#resultados-busqueda-cursos.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Lista de resultados */
.resultados-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item de resultado */
.resultado-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s ease;
}

.resultado-item:last-child {
  border-bottom: none;
}

.resultado-item:hover {
  background-color: #f5f5f5;
}

/* Imagen del curso */
.resultado-imagen {
  width: 50px;
  height: 50px;
  border-radius: 5px !important;
  object-fit: cover;
  margin-right: 15px;
}

/* Título del curso */
.resultado-titulo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: #000;
  font-family: 'Inter', sans-serif;
}

/* Mensaje de "No se encontraron resultados" */
.no-resultados {
  padding: 15px;
  text-align: center;
  color: #777;
}

/* Loader */
.loader-contenedor-search {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.loader-search {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0073aa;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin-search 1s linear infinite;
}

/* Animación del loader */
@keyframes spin-search {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Opcional: controlar stacking si hay headers fijos con z-index alto */
.site-header .contenedor-buscador-cursos { z-index: 20; }