/* ============================================================
   TheriansHub — members.css
   Directorio de Members: cuadrícula estilo Instagram (Fase 2).
   Todo acotado bajo .th-members-grid para no afectar a otras
   vistas BuddyPress. Markup: buddypress/members/members-loop.php.
   Botón Follow = plugin buddypress-followers (.follow-button /
   a.follow / a.unfollow): SOLO se re-viste, no se renombra, para
   no romper su toggle AJAX.
   ============================================================ */

/* ----- Grid: 2 col en móvil, más en pantallas grandes ----- */
.th-members-grid {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (min-width: 600px) {
    .th-members-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .th-members-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Tarjeta ----- */
.th-members-grid .th-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: 12px; /* sin token exacto: --radius-md=10, --radius-lg=16 */
}

/* ----- Avatar circular + punto online ----- */
.th-members-grid .th-member-card__avatar {
    position: relative;
    width: 88px;
    height: 88px;
}
.th-members-grid .th-member-card__avatar .avatar,
.th-members-grid .th-member-card__avatar img {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    object-fit: cover;
    display: block;
}
.th-members-grid .th-member-card__online {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    border: 2px solid var(--color-surface); /* = fondo de la tarjeta */
}

/* ----- Nombre / @usuario / píldora de tipo ----- */
.th-members-grid .th-member-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: none;
}
.th-members-grid .th-member-card__name:hover {
    color: var(--color-brand);
    text-decoration: none;
}
.th-members-grid .th-member-card__handle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.th-members-grid .th-member-card__kin {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    background: var(--color-brand-soft);
    border-radius: var(--radius-full);
}

/* ----- Botón Follow del plugin (re-vestido, hiper-acotado) ----- */
.th-members-grid .th-member-card .follow-button {
    margin-top: var(--space-1);
}
/* Prefijo #buddypress para ganar a la regla gris de bp-legacy
   `#buddypress .generic-button a / a.button { background:#fff; color:#767676 }`
   (especificidad 1,1,1), presente en /members/ por ser vista BP. Con #buddypress
   estas reglas pasan a (1,4,1) y vencen sin !important (mismo patrón que el grupo). */
#buddypress .th-members-grid .th-member-card .follow-button a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--color-brand);
    transition: background-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
/* "Seguir": sólido verde corporativo. */
#buddypress .th-members-grid .th-member-card .follow-button a.follow {
    background: var(--color-brand);
    color: #fff; /* texto sobre verde: sin token on-brand en el tema */
}
#buddypress .th-members-grid .th-member-card .follow-button a.follow:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}
/* "Siguiendo / Unfollow": outline suave. */
#buddypress .th-members-grid .th-member-card .follow-button a.unfollow {
    background: transparent;
    color: var(--color-brand);
}
#buddypress .th-members-grid .th-member-card .follow-button a.unfollow:hover {
    background: var(--color-brand-soft);
}

/* ----- Anclar el botón al flujo (anula el position:absolute del core) -----
   bp-legacy posiciona `#buddypress ul.item-list li div.action` en absolute
   (top:15px; right:0), lo que lanzaba el Follow a la esquina del avatar
   (buddypress.css:1632). Lo devolvemos al flujo, debajo del resto de la
   tarjeta y centrado. El prefijo #buddypress + 3 clases da la especificidad
   para ganar a la regla del core sin recurrir a !important. */
#buddypress .th-members-grid .th-member-card .th-member-card__action {
    position: static;
    top: auto;
    right: auto;
    margin-top: var(--space-2);
    text-align: center;
}

/* ============================================================
   PASO 3 — Re-vestido de la CABECERA del directorio de Members.
   Vive en members/index.php (bp-legacy, sin override). Todo acotado
   a IDs propios de members (#members-dir-search, #members-directory-form,
   #members-order-*) para NO tocar Groups (que usa #groups-*). El prefijo
   #buddypress + ID propio aporta la especificidad para ganar al core de
   bp-legacy sin !important. No se toca markup, AJAX ni nonces.
   ============================================================ */

/* ----- a) Buscador: barra limpia full-width arriba ----- */
#buddypress #members-dir-search {
    float: none;               /* core: float:right + margin negativo */
    margin: 0 0 var(--space-4);
    width: 100%;
}
#buddypress #search-members-form {
    display: flex;
    gap: var(--space-2);
}
#buddypress #members_search {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}
#buddypress #members_search::placeholder {
    color: var(--color-text-muted);
}
#buddypress #members_search:focus {
    outline: none;
    border-color: var(--color-brand);
}
#buddypress #members_search_submit {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-4);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;               /* texto sobre verde: sin token on-brand */
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    cursor: pointer;
}
#buddypress #members_search_submit:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

/* ----- b) Tabs "All Members / Following": píldoras, activa en verde ----- */
#buddypress #members-directory-form .item-list-tabs {
    margin: 0 0 var(--space-3);
}
#buddypress #members-directory-form .item-list-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
#buddypress #members-directory-form .item-list-tabs ul li {
    float: none;               /* core: float:left */
    margin: 0;
}
#buddypress #members-directory-form .item-list-tabs ul li a {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
}
#buddypress #members-directory-form .item-list-tabs ul li a:hover {
    color: var(--color-text);
    background: var(--color-surface-2);
}
/* Activa en verde corporativo (vence al .selected a #eee del core). */
#buddypress #members-directory-form .item-list-tabs ul li.selected a,
#buddypress #members-directory-form .item-list-tabs ul li.current a {
    color: #fff;
    background: var(--color-brand);
    border-color: var(--color-brand);
    opacity: 1;
}
/* Contador dentro de la pestaña: pill discreta, sin el círculo #eee del core. */
#buddypress #members-directory-form .item-list-tabs ul li a span {
    background: var(--color-surface-2);
    border: none;
    border-radius: var(--radius-full);
    padding: 0 6px;
    margin-left: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
#buddypress #members-directory-form .item-list-tabs ul li.selected a span,
#buddypress #members-directory-form .item-list-tabs ul li.current a span {
    background: rgba(255, 255, 255, 0.22); /* badge sobre verde */
    color: #fff;
}

/* ----- c) Order By: select integrado con tokens ----- */
#buddypress #members-order-select {
    float: none;               /* core: li.last float:right */
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
#buddypress #members-order-select label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
#buddypress #members-order-by {
    max-width: none;           /* core lo capa a 185px */
    font-size: 0.85rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}