/* ============================= */
/* BUSCADOR MINIMALISTA PRO     */
/* ============================= */

.briel-search-box {
  width: 100%;
  padding: 0;
  margin: 10px 0;
  position: relative;
  background: transparent; /* 🔥 elimina fondo blanco */
}

.briel-search-box {
  width: 100%;
  margin: 10px 0;
  position: relative;
  background: transparent;
  box-shadow: none !important;
}

/* 🔥 ELIMINAR SOMBRAS DEL TEMA */
.briel-search-box,
.briel-search-box * {
  box-shadow: none !important;
}

/* INPUT LIMPIO */
#brielSearch {
  width: 100%;
  padding: 14px 18px;
  border-radius: 25px;
  border: 1px solid #ddd;
  font-size: 15px;
  outline: none;
  background: #f8f8f8; /* gris suave */
  transition: 0.3s;
}

/* EFECTO AL HACER CLICK */
#brielSearch:focus {
  background: #fff;
  border-color: #03276B;
  box-shadow: none !important;
}

/* ============================= */
/* RESULTADOS FLOTANTES (NUBE)  */
/* ============================= */

#brielResults {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;

  backdrop-filter: blur(10px); /* 🔥 efecto vidrio */
  background: rgba(255,255,255,0.7); /* semi transparente */

  border-radius: 15px;
  box-shadow: none !important;

  max-height: 280px;
  overflow-y: auto;

  z-index: 9999;

  animation: fadeIn 0.2s ease;
}

/* ITEMS */
.briel-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

/* HOVER */
.briel-item:hover {
  background: rgba(3,39,107,0.1);
}

/* ============================= */
/* ANIMACIÓN SUAVE              */
/* ============================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* 📱 MOBILE PERFECTO           */
/* ============================= */

@media (max-width: 480px) {

  #brielSearch {
    font-size: 14px;
    padding: 12px 16px;
  }

  #brielResults {
    top: 50px;
    max-height: 220px;
    border-radius: 12px;
  }

}