/* Overlay que cubre toda la pantalla excepto el header */
#search-ajax-unicauca-responsive-overlay {
  position: fixed;
  top: 60px; /* Ajusta según la altura del header */
  left: 0;
  width: 100%;
  height: calc(100% - 60px); /* Resta la altura del header */
  background-color: #fefbff; /* Fondo blanco semitransparente */
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
  z-index: 1000; /* Asegura que esté por encima de todo excepto el header */
  display: none; /* Oculto por defecto */
  justify-content: center;
  align-items: flex-start; /* Alinea el buscador en la parte superior */
  padding-top: 20px; /* Espacio desde el top */
  overflow: visible; /* Permite que el contenido interno haga scroll */
}

/* Mostrar el overlay cuando está activo */
#search-ajax-unicauca-responsive-overlay.active {
  display: flex;
}

/* Estilos para el campo de búsqueda dentro del overlay */
#search-ajax-unicauca-responsive-overlay #search-ajax-unicauca-responsive-form {
  width: 90%; /* Ancho del buscador en responsive */
  max-width: 600px; /* Ancho máximo */
  background-color: #fefbff; /* Fondo blanco */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  max-height: 80vh; /* Altura máxima del formulario (80% del viewport) */
  overflow-y: auto; /* Habilita el scroll si el contenido es muy largo */
}

/* Estilos para el campo de búsqueda */
.search-input-container {
  position: relative;
  width: 100%;
}

#search-ajax-unicauca-responsive-input {
  width: 100%;
  padding: 12px 50px 12px 16px; /* Espacio para el ícono */
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #ecf0ff; /* Borde del campo */
  border-radius: 24px; /* Borde redondeado */
  outline: none;
  background-color: #ecf0ff; /* Fondo del campo */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  font: normal normal 600 16px/18px Titillium Web !important;
  letter-spacing: 0.04px;
  color: #000066;
  opacity: 1;
}

#search-ajax-unicauca-responsive-input:focus {
  border-color: #ecf0ff; /* Cambia el borde al enfocar */
  box-shadow: 0 0 5px rgba(105, 111, 199, 0.5); /* Sombra al enfocar */
}

#search-ajax-unicauca-responsive-input::placeholder {
  color: #000066; /* Color del placeholder */
  opacity: 1; /* Asegura que el color sea sólido */
}

.search-icon {
  position: absolute;
  right: 1px;
  width: 14%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #696fc7; /* Fondo del ícono */
  color: #fff; /* Color del ícono */
  font-size: 18px;
  padding: 12px 16px; /* Aumenta el padding para hacer el fondo más grande */
  border-radius: 0 24px 24px 0; /* Borde redondeado solo en el lado derecho */
  pointer-events: none; /* Evita que el ícono interfiera con el campo */
  height: 100%; /* Asegura que el ícono tenga la misma altura que el campo */
  display: flex;
  align-items: center; /* Centra el ícono verticalmente */
  justify-content: center; /* Centra el ícono horizontalmente */
}

/* Contenedor de resultados con scroll */
#search-ajax-unicauca-responsive-resultados {
  margin-top: 10px;
  max-height: 300px; /* Altura máxima para el contenedor de resultados */
  overflow-y: auto; /* Habilita el scroll vertical */
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
  padding-right: 10px; /* Espacio para evitar que el scroll tape el contenido */
}

/* Estilos para la barra de scroll */
#search-ajax-unicauca-responsive-resultados::-webkit-scrollbar {
  width: 8px; /* Ancho de la barra de scroll */
}

#search-ajax-unicauca-responsive-resultados::-webkit-scrollbar-thumb {
  background-color: #696fc7; /* Color del thumb (barra deslizadora) */
  border-radius: 4px; /* Borde redondeado */
}

#search-ajax-unicauca-responsive-resultados::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color del track (fondo de la barra) */
  border-radius: 4px; /* Borde redondeado */
}

/* Estilos para los resultados */
.resultado-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.resultado-item h3 {
  margin: 0;
  font-size: 18px;
  color: #0073aa;
}

.resultado-item p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #555;
}

/* Estilos responsivos */
@media (max-width: 768px) {
  #search-ajax-unicauca-responsive-overlay {
    padding-top: 10px; /* Menor espacio en móviles */
  }

  #search-ajax-unicauca-responsive-overlay
    #search-ajax-unicauca-responsive-form {
    width: 95%; /* Más ancho en móviles */
  }

  #search-ajax-unicauca-responsive-input {
    font-size: 14px;
    padding: 10px 46px 10px 12px; /* Ajuste para dispositivos móviles */
  }

  .search-icon {
    font-size: 16px;
    padding: 6px;
  }

  .resultado-item h3 {
    font-size: 16px;
  }

  .resultado-item p {
    font-size: 12px;
  }
}

.elementor.resultado-item {
  text-align: left !important;
  font: normal normal bold 14px/21px Titillium Web !important;
  letter-spacing: 0.04px !important;
  color: #696fc7 !important;
  opacity: 1 !important;
}

.resultado-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Efecto de transición */
}

.resultado-item:hover {
  background-color: #e0e0e0; /* Cambia el fondo al pasar el mouse */
  transform: translateY(-2px); /* Efecto de elevación */
}

.resultado-item h3 {
  text-align: left;
  font: normal normal bold 14px/21px Titillium Web !important;
  letter-spacing: 0.04px;
  color: #696fc7;
  opacity: 1;
}

.resultado-item h3 a {
  color: inherit; /* Hereda el color del h3 */
  text-decoration: none; /* Quita el subrayado del enlace */
  transition: color 0.3s ease; /* Transición suave del color */
}

.resultado-item h3 a:hover {
  color: #005177; /* Cambia el color al pasar el mouse */
}

.resultado-item p {
  text-align: left;
  font: normal normal 600 10px/16px Titillium Web !important;
  letter-spacing: 0.03px;
  color: #000066;
  opacity: 1;
}

#contenedorSearch {
  display: none;
}