/* ===== BeautyAlt - Top search dropdown (lista compacta) ===== */
.search-dd{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  /* 👇 clave: que use el mismo ancho del buscador y no se mueva al centro */
  width:100%;
  max-width:none;
  transform:none;

  background:#ffffff;
  border-radius:16px;
  border:1px solid #f3d9ea;
  box-shadow:0 14px 40px rgba(0,0,0,0.12);
  z-index:9999;
  overflow:hidden;
  font-size:0.9rem;
}

/* cabecera */
.search-dd-title{
  padding:8px 12px;
  font-weight:700;
  background:#fff7fc;
  border-bottom:1px solid #f3e1ec;
  color:#4b1644;
}

/* filas genéricas */
.search-dd-row{
  padding:10px 12px;
}
.search-dd-row.muted,
.search-dd-row .muted{
  color:#6b7280;
}

/* items */
.search-dd-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:#ffffff;
  border:none;
  border-bottom:1px solid #f5e6f0;
  cursor:pointer;
  text-align:left;
}
.search-dd-item:last-of-type{
  border-bottom:none;
}
.search-dd-item:hover{
  background:#fdf2f8;
}
.search-dd-item.active{
  background:#fee2f2;
}

/* avatar */
.search-dd-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  flex-shrink:0;
  background:#ffe4f0;
  display:grid;
  place-items:center;
}
.search-dd-avatar img{
  width:40px;
  height:40px;
  object-fit:cover;
  display:block;
}
.search-dd-avatar-fallback{
  font-size:0.85rem;
  font-weight:700;
  color:#4b1644;
}

/* texto principal */
.search-dd-main{
  flex:1;
  min-width:0;
}
.search-dd-name{
  font-weight:700;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-dd-meta{
  font-size:0.8rem;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* flechita */
.search-dd-arrow{
  font-size:0.9rem;
  color:#9ca3af;
}

/* botón "ver todos" */
.search-dd-all{
  width:100%;
  padding:10px 12px;
  border:none;
  background:#f9fafb;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
}
.search-dd-all:hover{
  background:#e5e7eb;
}

/* mini spinner */
.spinner{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid #e5e7eb;
  border-top-color:#e84b9c;
  display:inline-block;
  margin-right:6px;
  vertical-align:middle;
  animation:ba-spin 0.8s linear infinite;
}
@keyframes ba-spin{
  to{ transform:rotate(360deg); }
}