/* ==========================================================================
   TheriansHub — Cabecera de perfil (Bloque 5)
   Tokens heredados de theme.css (:root). Solo se carga en perfiles BP.
   ========================================================================== */

.th-profile {
	color: var(--color-text, #f5f5f5);
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
	/* Flex-column: cover, avatar, identidad, stats, chips, bio, botones y manada
	   se apilan y centran SIEMPRE. Clave: los `float` que BP Nouveau aplica dentro
	   de `.single-headers` se IGNORAN en flex items, así que esto neutraliza el
	   mecanismo de raíz en vez de pelear contra cada float/heredado uno a uno. */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20px; /* aire antes de las pestañas de BP (#item-nav) */
}
/* El cover debe ocupar todo el ancho; align-items:center (arriba) si no lo encoge. */
.th-profile > .th-profile__cover {
	align-self: stretch;
}

/* Cover */
.th-profile__cover {
	position: relative;
	height: 120px;
	border-radius: 14px 14px 0 0;
	background-color: var(--color-surface-2);                    /* fallback final */
	background-image: linear-gradient(135deg, #0f6e52, #1D9E75); /* fallback si NO hay cover */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.th-profile__cover-cam,
.th-profile__avatar-cam {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 22, 40, 0.6);
	color: #fff;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.th-profile__cover-cam {
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
}
.th-profile__cover-cam:hover,
.th-profile__avatar-cam:hover {
	background: var(--color-brand, #1D9E75);
}

/* Avatar centrado a caballo sobre el cover */
.th-profile__avatar-wrap {
	position: relative;
	width: 110px;
	margin: -55px auto 0;
}
.th-profile__avatar {
	display: block;
	width: 110px;
	height: 110px;
}
.th-profile__avatar img {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--color-bg, #0a1628);
	display: block;
}
/* BP Nouveau impone `.single-headers img.avatar { float:left; margin:... }`
   (especificidad 0,2,1) sobre nuestro avatar. Lo neutralizamos con 0,3,1 para
   que el avatar quede centrado y el bloque de identidad fluya DEBAJO en vez de
   envolverse a su derecha. */
.th-profile .th-profile__avatar img.avatar {
	float: none;
	margin: 0;
}
.th-profile__avatar-cam {
	right: 2px;
	bottom: 2px;
	width: 28px;
	height: 28px;
	border: 2px solid var(--color-bg, #0a1628);
}

/* Identidad
   Especificidad reforzada (.th-profile prefijo) para ganar a reglas de bloque
   de BP Nouveau sobre headings dentro de .single-headers, que impiden que el
   text-align:center del contenedor llegue al h1. */
.th-profile .th-profile__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 12px;
	text-align: center;
}
.th-profile .th-profile__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--color-text, #f5f5f5);
	text-align: center;
	float: none;
	width: 100%;
}
.th-profile__pronouns {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-sec, #8a96a8);
	margin-left: 6px;
}
.th-profile__username {
	font-size: 14px;
	color: var(--color-text-muted, #5d6b83);
	margin: 2px 0 0;
}

/* Stats */
.th-profile__stats {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--color-text-sec, #8a96a8);
}
.th-profile__stat strong {
	color: var(--color-text, #f5f5f5);
	font-weight: 700;
}
.th-profile__stat-sep {
	margin: 0 8px;
	color: var(--color-text-muted, #5d6b83);
}

/* Chips */
.th-profile__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
}
.th-profile__chip {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1;
}
.th-profile__chip--therio {
	background: rgba(29, 158, 117, 0.15);
	color: #9FE1CB;
}
.th-profile__chip--country {
	background: var(--color-elev, #1a2944);
	color: var(--color-text-sec, #8a96a8);
}
.th-profile__chip--level {
	background: rgba(250, 199, 117, 0.12);
	color: #FAC775;
}

/* Bio */
.th-profile__bio {
	margin: 14px auto 0;
	max-width: 460px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text, #f5f5f5);
}

/* Botones de acción — estilo "píldora" (coherente con los chips).
   El botón Follow lo genera el plugin buddypress-followers con su propio markup
   y CSS (vía selectores con #buddypress). Para imponer la estética de marca
   usamos #buddypress + !important en las props visuales (uso legítimo: sobrescribir
   estilos de un plugin). Estados del plugin:
     - wrapper .not-following + <a.follow>   → "Follow"  → verde lleno
     - wrapper .following     + <a.unfollow> → "Unfollow"→ borde verde (secundario) */
.th-profile__actions {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	margin: 16px 0 0;
}
/* El wrapper <div.follow-button.generic-button> no debe aportar caja/estilo propio. */
#buddypress .th-profile__actions .follow-button,
#buddypress .th-profile__actions .generic-button {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	display: inline-flex;
}
/* Base compartida (Editar, Mensaje y el <a> del plugin) — mismo tamaño/forma.
   border transparente de 1.5px + border-box: el verde lleno y los de borde miden igual. */
#buddypress .th-profile__actions .th-profile__btn,
#buddypress .th-profile__actions .follow-button a,
#buddypress .th-profile__actions .generic-button a {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 9px 30px !important;
	border: 1.5px solid transparent !important;
	border-radius: 24px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: filter 0.15s ease, background 0.15s ease;
}
/* PRINCIPAL verde lleno: Editar (propio) y Seguir (cuando NO sigues). */
#buddypress .th-profile__actions .th-profile__btn--primary,
#buddypress .th-profile__actions .follow-button.not-following a,
#buddypress .th-profile__actions .follow-button a.follow {
	background: #1D9E75 !important;
	color: #fff !important;
	border-color: transparent !important;
}
/* SECUNDARIO borde verde: Mensaje, y Seguir cuando YA sigues (.following → "Unfollow"). */
#buddypress .th-profile__actions .th-profile__btn--secondary,
#buddypress .th-profile__actions .follow-button.following a,
#buddypress .th-profile__actions .follow-button a.unfollow {
	background: transparent !important;
	color: #9FE1CB !important;
	border-color: #1D9E75 !important;
}
#buddypress .th-profile__actions .th-profile__btn:hover,
#buddypress .th-profile__actions .follow-button a:hover {
	filter: brightness(1.12);
}

/* Manada (seguidos)
   El <ul> se hace flex: los <li> pasan a ser flex items y el `float:right` que
   BP impone en `.single-headers ul li` queda IGNORADO (igual que en la cabecera).
   Los avatares son img.avatar dentro de .single-headers → BP los flota; se
   neutraliza con especificidad 0,3,1 (.th-profile … img.avatar). */
.th-profile__pack {
	width: 100%;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--color-border, #1f2d44);
	text-align: left;
}
.th-profile__pack-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}
.th-profile__pack-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: var(--color-text, #f5f5f5);
}
.th-profile__pack-all {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-brand, #1D9E75);
	text-decoration: none;
}
.th-profile .th-profile__pack-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 64px; /* garantiza altura de fila aunque algún avatar colapse */
}
.th-profile__pack-item {
	float: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60px;
}
/* El <a> salía a height:0 (no crecía con su contenido) y aplastaba el avatar.
   height:auto !important + min-height le dan altura real, ganando a cualquier
   regla de BP sobre `.single-headers a`. */
.th-profile .th-profile__pack-item > a {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	width: 60px;
	height: auto !important;
	min-height: 52px;
	text-decoration: none;
}
/* CAUSA RAÍZ del avatar invisible (confirmada con el archivo, no supuesta):
   la Manada vive en un <ul> dentro de #item-header, y bp-legacy oculta TODO
   <span> de ese contexto con
     #buddypress div#item-header ul span { display: none }  (especificidad 2,0,3).
   Eso ponía display:none a este span (y al del nombre, abajo), llevándose la img
   por delante: cargaba (128×128) pero medía 0×0. Por eso ningún ajuste de flex
   servía — nunca fue flex. Reafirmamos display con !important (su regla NO lo
   lleva, así que ganamos limpio). El span es además flex item del <a>, así que
   lo fijamos a 52px para que no se encoja una vez visible. */
.th-profile__pack-avatar {
	display: block !important; /* vence al display:none de bp-legacy */
	width: 52px;
	height: 52px;
	flex: 0 0 52px; /* no crece, NO encoge, base 52px */
	min-width: 52px;
	min-height: 52px;
	line-height: 0;
}
/* La miniatura usa clase propia (.th-profile__pack-img), NO .avatar, así ninguna
   regla de BP la toca. Es un bloque normal dentro del span (no es flex item);
   con el span ya fijado a 52×52, basta width/height:52px para que se pinte. */
.th-profile__pack-img {
	display: block;
	width: 52px;
	height: 52px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-border, #1f2d44);
	background: var(--color-elev, #1a2944);
}
/* También es un <span> dentro de #item-header ul → mismo display:none de
   bp-legacy. Lo reafirmamos igual que el avatar. */
.th-profile__pack-name {
	display: block !important; /* vence al display:none de bp-legacy */
	margin-top: 6px;
	font-size: 11px;
	color: var(--color-text-sec, #8a96a8);
	max-width: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}