/* Estilos estilo Google para el buscador del modal de proyectos */

.search-box.project-search-box {
  /* Hacemos que este div sea el contenedor visual */
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 48px; /* Altura generosa y cómoda */
  
  background: #ffffff;
  border: 1px solid #dfe1e5; /* Borde gris muy suave tipo Google */
  border-radius: 24px; /* Full rounded pill */
  
  box-shadow: none; /* Empezamos flat o con muy poca sombra */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Márgenes para separar del botón y la lista */
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Hover: Se levanta ligeramente, típico de Material Design / Google */
.search-box.project-search-box:hover {
  background-color: #ffffff;
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  border-color: transparent; /* El borde se funde con la sombra */
}

/* Focus: Cuando se escribe */
.search-box.project-search-box:focus-within {
  background-color: #ffffff;
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  border-color: transparent;
}

/* Resetear completamente el input interno que viene con estilos de .search-input en main.css */
.search-box.project-search-box .search-input {
  width: 100%;
  height: 100%;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 20px 0 45px; /* Padding izquierdo para dejar sitio al icono */
  font-size: 16px; /* Texto legible */
  color: #202124;
  outline: none !important;
  box-shadow: none !important;
}

/* Ajustar el icono */
.search-box.project-search-box .search-icon {
  left: 16px; /* Un poco más de margen izquierdo */
  width: 20px;
  height: 20px;
  color: #9aa0a6;
}

/* Input placeholder */
.search-box.project-search-box .search-input::placeholder {
  color: #5f6368;
  opacity: 1;
}