/* =============================================================================
 * FILE:		/assets/css/pages/profile.css
 * TECH:		Ajustes específicos de la página de perfil.
 * BASIC:	Estilos de tabs (perfil/amigos/grupos), share profile,
 *			modales específicos y utilidades del perfil.
 *
 * NOTA IMPORTANTE
 * - La base global de .mf-modal ya NO vive aquí.
 * - Este archivo mantiene solo ajustes específicos del perfil y
 *   hardening visual de modales concretos del contexto perfil.
 *
 * INDEX:
 * 1. Share profile card + feedback
 * 2. Tab Perfil
 * 3. Tab Amigos
 * 4. Tab Grupos
 * 5. Links columna izquierda
 * 6. Update Request modal — visual hardening
 * 7. Highlight al llegar desde notificación
 * 8. Quick actions badge
 * 9. Settings modal — password toggle
 * 10. YouTube lite embeds
 * 11. Membership card
 * 12. Helpers perfil
 * ============================================================================= */

/* =============================================================================
 * 1. SHARE PROFILE CARD + FEEDBACK
 * ============================================================================= */

.profile-share-card {
	margin-top: var(--space-3);
	display: grid;
	gap: 10px;
}

.profile-share-card .btn.js-profile-share-copy {
	position: relative;
	transition:
		transform .12s ease,
		border-color .14s ease,
		box-shadow .16s ease,
		background .16s ease;
}

.profile-share-card .btn.js-profile-share-copy:hover,
.profile-share-card .btn.js-profile-share-copy:focus-visible {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.profile-share-card .btn.js-profile-share-copy.is-copied {
	border-color: color-mix(in srgb, #22c55e 44%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, #22c55e 12%, var(--surface-2, rgba(255,255,255,.06)));
}

.profile-share-status {
	min-height: 18px;
	font-size: .88rem;
	font-weight: 800;
	line-height: 1.25;
	padding: 0 2px;
}

.profile-share-status.is-success {
	color: color-mix(in srgb, #22c55e 82%, white);
}

.profile-share-status.is-error {
	color: color-mix(in srgb, #ff5a6b 82%, white);
}

/* =============================================================================
 * 2. TAB PERFIL
 * ============================================================================= */

.profile-tab--profile {
	display: grid;
	gap: var(--space-3);
	--brand-link: var(--brand, #4f8cff);
}

.profile-card--tab {
	border-radius: var(--radius-3);
	overflow: hidden;
}

.profile-tab-header {
	display: grid;
	gap: var(--space-2);
}

.profile-tab-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
}

.profile-tab-subtitle {
	margin-top: var(--space-1);
	font-size: 0.9rem;
}

.profile-tab-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	align-items: center;
	justify-content: flex-start;
}

.profile-tab--profile .meta-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .6rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
	font-size: .85rem;
	line-height: 1;
	opacity: .9;
}

.profile-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.profile-section-title {
	margin: 0;
	font-size: 0.95rem;
	letter-spacing: .2px;
	opacity: .95;
}

.profile-kv-grid {
	display: grid;
	gap: var(--space-2);
}

.profile-kv {
	display: grid;
	gap: .25rem;
	padding: .65rem .75rem;
	border-radius: var(--radius-2);
	border: 1px solid var(--border-color, rgba(255,255,255,.10));
	background: var(--surface-2, transparent);
}

.profile-kv__label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .6px;
	opacity: .7;
}

.profile-kv__value {
	font-size: .95rem;
	line-height: 1.25;
	word-break: break-word;
}

.profile-link {
	color: var(--brand-link);
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
}

.profile-link:hover,
.profile-link:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.profile-kv__value .profile-link {
	padding: .22rem .5rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--brand-link) 35%, transparent);
	background: color-mix(in srgb, var(--brand-link) 10%, transparent);
	width: 100%;
}

.profile-kv--link {
	grid-column: 1 / -1;
}

.profile-yt-grid {
	display: grid;
	gap: var(--space-3);
}

.profile-yt-item {
	display: grid;
	gap: var(--space-2);
	padding: .75rem;
	border-radius: var(--radius-2);
	border: 1px solid var(--border-color, rgba(255,255,255,.10));
	background: var(--surface-2, transparent);
}

.profile-yt-link {
	text-align: center;
	margin-top: .25rem;
}

.profile-notice {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	padding: .75rem;
	border-radius: var(--radius-2);
	border: 1px solid var(--border-color, rgba(255,255,255,.10));
	background: var(--surface-2, transparent);
}

.profile-notice:hover,
.profile-notice:focus-within {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 35%, var(--border-color, rgba(255,255,255,.10)));
	background: color-mix(in srgb, var(--surface-2, transparent) 78%, transparent);
}

.profile-notice__icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
	background: color-mix(in srgb, var(--surface-2, transparent) 70%, transparent);
	flex: 0 0 auto;
}

.profile-notice__body {
	min-width: 0;
	flex: 1 1 auto;
}

.profile-notice__title {
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
}

.profile-notice__text {
	margin-top: .15rem;
	font-size: .9rem;
	line-height: 1.2;
	opacity: .9;
}

.profile-kv-grid .profile-notice {
	grid-column: 1 / -1;
}

@media (min-width: 1100px) {
	.profile-tab--profile {
		max-width: 980px;
		margin: 0 auto;
		gap: var(--space-4);
	}

	.profile-card--tab .profile-card__body {
		padding: calc(var(--space-3) + .15rem);
	}

	.profile-kv-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}

	.profile-kv {
		padding: .85rem .95rem;
	}

	.profile-tab-title { font-size: 1.2rem; }
	.profile-tab-subtitle { font-size: .95rem; }

	.profile-notice {
		padding: .9rem;
	}

	.profile-notice__icon {
		width: 52px;
		height: 52px;
	}
}

@media (min-width: 1400px) {
	.profile-tab--profile {
		max-width: 1040px;
	}
}

/* =============================================================================
 * 3. TAB AMIGOS
 * ============================================================================= */

.profile-tab--friends {
	display: grid;
	gap: var(--space-3);
}

.profile-friends-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.profile-subtab {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .7rem;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
	background: color-mix(in srgb, var(--surface-2, transparent) 60%, transparent);
	opacity: .92;
}

.profile-subtab:hover,
.profile-subtab:focus {
	opacity: 1;
	text-decoration: none;
}

.profile-subtab.is-active {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 55%, transparent);
	background: color-mix(in srgb, var(--brand, #4f8cff) 12%, transparent);
}

.profile-friends-list {
	display: grid;
	gap: var(--space-2);
}

.profile-friend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: .75rem;
	border-radius: var(--radius-2);
	border: 1px solid var(--border-color, rgba(255,255,255,.10));
	background: var(--surface-2, transparent);
}

.profile-friend__who {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-2);
	align-items: center;
	text-decoration: none;
	min-width: 0;
	flex: 1;
}

.profile-friend__who:hover .profile-friend__name,
.profile-friend__who:focus .profile-friend__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.profile-friend__avatar {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	object-fit: cover;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
}

.profile-friend__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-friend__meta {
	min-width: 0;
}

.profile-friend__name {
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-friend__user {
	font-size: .9rem;
	margin-top: .15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-friend__type {
	margin-top: .45rem;
}

.profile-type-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
	font-size: .82rem;
	opacity: .92;
}

.profile-friend__actions {
	flex: 0 0 auto;
}

@media (min-width: 1100px) {
	.profile-tab--friends {
		max-width: 980px;
		margin: 0 auto;
		gap: var(--space-4);
	}

	.profile-friend {
		padding: .9rem;
	}

	.profile-friend__avatar {
		width: 52px;
		height: 52px;
	}

	.profile-friend__who {
		grid-template-columns: 52px 1fr;
	}
}

@media (min-width: 1400px) {
	.profile-tab--friends {
		max-width: 1040px;
	}
}

/* =============================================================================
 * 4. TAB GRUPOS
 * ============================================================================= */

.profile-tab--groups {
	display: grid;
	gap: var(--space-3);
}

.profile-groups-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.profile-groups-list {
	display: grid;
	gap: var(--space-2);
}

.profile-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: .75rem;
	border-radius: var(--radius-2);
	border: 1px solid var(--border-color, rgba(255,255,255,.10));
	background: var(--surface-2, transparent);
}

.profile-group__who {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-2);
	align-items: center;
	text-decoration: none;
	min-width: 0;
	flex: 1;
}

.profile-group__who:hover .profile-group__name,
.profile-group__who:focus .profile-group__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.profile-group__avatar {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	object-fit: cover;
	border: 1px solid var(--border-color, rgba(255,255,255,.12));
}

.profile-group__meta {
	min-width: 0;
}

.profile-group__name {
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-group__sub {
	font-size: .9rem;
	margin-top: .15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-group__actions {
	flex: 0 0 auto;
}

@media (min-width: 1100px) {
	.profile-tab--groups {
		max-width: 980px;
		margin: 0 auto;
		gap: var(--space-4);
	}

	.profile-group {
		padding: .9rem;
	}

	.profile-group__avatar {
		width: 52px;
		height: 52px;
		border-radius: 16px;
	}

	.profile-group__who {
		grid-template-columns: 52px 1fr;
	}
}

@media (min-width: 1400px) {
	.profile-tab--groups {
		max-width: 1040px;
	}
}

/* =============================================================================
 * 5. LINKS COLUMNA IZQUIERDA
 * ============================================================================= */

.context-club__link,
.context-team__link {
	color: inherit;
	text-decoration: none;
	font-weight: 900;
}

.context-club__link:hover,
.context-team__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================================
 * 6. UPDATE REQUEST MODAL — VISUAL HARDENING
 * ============================================================================= */

#updateRequestModal .mf-modal__dialog {
	width: min(680px, 100%);
}

#updateRequestModal .mf-modal__body {
	display: grid;
	gap: 12px;
}

#updateRequestModal .report-modal__target {
	position: relative;
	line-height: 1.45;
	border-radius: 14px;
	padding: 11px 13px;
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 22%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, var(--brand, #4f8cff) 8%, var(--surface-2, rgba(255,255,255,.06)));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #4f8cff) 10%, transparent);
}

#updateRequestModal form.js-update-request-form {
	display: grid;
	gap: 12px;
	padding: 2px;
}

#updateRequestModal .mb-3 {
	margin-bottom: 0 !important;
	display: grid;
	gap: 7px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 60%, transparent);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
}

#updateRequestModal .mb-3:focus-within {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 45%, var(--border-color, rgba(255,255,255,.12)));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #4f8cff) 10%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 72%, transparent);
}

#updateRequestModal .form-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: 0;
}

#updateRequestModal .update-field__current {
	display: grid;
	gap: 3px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 62%, transparent);
	background: color-mix(in srgb, var(--surface-1, #0f1115) 76%, transparent);
}

#updateRequestModal .update-field__current-label {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	opacity: .72;
}

#updateRequestModal .update-field__current-value {
	font-size: .93rem;
	line-height: 1.35;
	word-break: break-word;
	opacity: .96;
}

#updateRequestModal .form-control {
	min-height: 46px;
}

#updateRequestModal select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

#updateRequestModal textarea.form-control {
	min-height: 110px;
	resize: vertical;
}

#updateRequestModal input[type="number"].form-control {
	appearance: none;
	-webkit-appearance: none;
}

#updateRequestModal .report-modal__status {
	min-height: 20px;
	margin-top: 2px;
}

#updateRequestModal .d-flex.gap-2.mt-3 {
	margin-top: 2px !important;
}

#updateRequestModal .btn {
	min-height: 46px;
}

#updateRequestModal .btn.btn-primary {
	box-shadow: 0 10px 24px color-mix(in srgb, var(--brand, #4f8cff) 18%, transparent);
}

#updateRequestModal .btn.btn-primary:hover {
	filter: brightness(1.03);
}

#updateRequestModal .btn.btn-secondary:hover {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 28%, var(--border-color, rgba(255,255,255,.12)));
}

#updateRequestModal .form-control:focus,
#updateRequestModal .btn:focus {
	position: relative;
	z-index: 1;
}

@media (min-width: 720px) {
	#updateRequestModal form.js-update-request-form {
		gap: 14px;
	}

	#updateRequestModal .mf-modal__body {
		gap: 14px;
	}
}

@media (max-width: 640px) {
	#updateRequestModal .mf-modal__dialog {
		width: min(100%, 100%);
		border-radius: 16px;
	}

	#updateRequestModal .mf-modal__head {
		padding: 13px 14px;
	}

	#updateRequestModal .mf-modal__body {
		padding: 14px;
		gap: 10px;
	}

	#updateRequestModal .report-modal__target {
		padding: 10px 11px;
		font-size: .92rem;
		line-height: 1.4;
	}

	#updateRequestModal .mb-3 {
		padding: 11px;
		gap: 6px;
		border-radius: 14px;
	}

	#updateRequestModal .update-field__current {
		padding: 7px 9px;
	}

	#updateRequestModal .update-field__current-label {
		font-size: .73rem;
	}

	#updateRequestModal .update-field__current-value {
		font-size: .9rem;
	}

	#updateRequestModal .form-label {
		font-size: .88rem;
	}

	#updateRequestModal .form-control {
		padding: 11px 12px;
		min-height: 44px;
		font-size: .96rem;
	}

	#updateRequestModal textarea.form-control {
		min-height: 96px;
	}
}

@media (max-width: 420px) {
	#updateRequestModal .mf-modal__head .modal-title {
		font-size: 1rem;
	}

	#updateRequestModal .report-modal__target {
		border-radius: 12px;
	}

	#updateRequestModal .mb-3 {
		border-radius: 12px;
	}
}

/* =============================================================================
 * 7. HIGHLIGHT AL LLEGAR DESDE NOTIFICACIÓN
 * ============================================================================= */

.comment.is-highlight {
	outline: 2px solid rgba(255,45,85,.65);
	border-radius: 12px;
	animation: mfPulse 1.4s ease;
}

@keyframes mfPulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.01); }
	100% { transform: scale(1); }
}

.post.is-highlight,
.feed-item.is-highlight,
.post-card.is-highlight,
.feed-card.is-highlight {
	outline: 2px solid rgba(255,45,85,.65);
	border-radius: 12px;
	animation: mfPulse 1.4s ease;
}

/* =============================================================================
 * 8. QUICK ACTIONS BADGE
 * ============================================================================= */

.profile-quick-actions .quick-action {
	position: relative;
	overflow: visible;
}

.profile-quick-actions .quick-action__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
	border: 2px solid #fff;
	z-index: 2;
	white-space: nowrap;
}

.profile-quick-actions .quick-action__badge[hidden] {
	display: none !important;
}

/* =============================================================================
 * 9. SETTINGS MODAL — PASSWORD TOGGLE
 * ============================================================================= */

.mf-password-field {
	position: relative;
	display: block;
}

.mf-password-field__input {
	padding-right: 46px !important;
}

.mf-password-field__toggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	border-radius: 999px;
	z-index: 3;
	line-height: 1;
	opacity: 1;
	transition: color .14s ease, background .14s ease, opacity .14s ease;
}

.mf-password-field__toggle:hover {
	color: rgba(255, 255, 255, 0.96);
	background: rgba(255, 255, 255, 0.08);
}

.mf-password-field__toggle:active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

.mf-password-field__toggle:focus,
.mf-password-field__toggle:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.10);
	outline: 2px solid rgba(59, 130, 246, .45);
	outline-offset: 2px;
}

.mf-password-field__toggle i {
	pointer-events: none;
	font-size: .95rem;
	line-height: 1;
	color: inherit;
	opacity: 1;
}

#settingsModal .mf-password-field .form-control {
	padding-right: 52px !important;
}

#settingsModal input[type="password"]::-ms-reveal,
#settingsModal input[type="password"]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

#settingsModal input[type="password"]::-webkit-credentials-auto-fill-button,
#settingsModal input[type="password"]::-webkit-textfield-decoration-container {
	visibility: hidden;
	pointer-events: none;
}

#settingsModal .mf-blocked-users__actions {
	margin-top: 18px;
}

#settingsModal .mf-blocked-users__list + .mf-blocked-users__actions {
	margin-top: 20px;
}

#settingsModal .mf-blocked-users__list .empty-panel {
	margin-bottom: 0;
}

/* =============================================================================
 * 10. YOUTUBE LITE EMBEDS
 * ============================================================================= */

.mf-yt-lite,
.profile-yt-item .yt-embed,
.feed-card__yt .yt-embed {
	width: 100%;
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	text-align: left;
}

.mf-yt-lite {
	cursor: pointer;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 72%, transparent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
	transition:
		transform .14s ease,
		border-color .14s ease,
		box-shadow .18s ease,
		background .18s ease;
}

.mf-yt-lite:hover,
.mf-yt-lite:focus-visible {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 36%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 80%, transparent);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.mf-yt-lite:active {
	transform: translateY(1px);
}

.mf-yt-lite__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

.mf-yt-lite__thumb {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1.001);
}

.mf-yt-lite__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .20) 100%);
	pointer-events: none;
}

.mf-yt-lite__play {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 14px;
	background: rgba(255, 0, 0, .92);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
	z-index: 2;
}

.mf-yt-lite__play::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #fff;
}

/* AJUSTE F9: sin label visual inferior redundante */
.mf-yt-lite__label {
	display: none !important;
}

.profile-yt-item .yt-embed,
.feed-card__yt .yt-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: #000;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}

.profile-yt-item .yt-embed iframe,
.feed-card__yt .yt-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.profile-yt-item .mf-yt-lite {
	border-radius: 16px;
}

.feed-card__yt {
	margin-top: 10px;
}

.feed-card__yt .mf-yt-lite {
	border-radius: 14px;
}

@media (hover: none) {
	.mf-yt-lite:hover,
	.mf-yt-lite:focus-visible {
		transform: none;
		box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
	}
}

@media (max-width: 640px) {
	.mf-yt-lite {
		border-radius: 14px;
	}

	.mf-yt-lite__play {
		width: 60px;
		height: 42px;
		border-radius: 12px;
	}

	.mf-yt-lite__play::before {
		border-top-width: 9px;
		border-bottom-width: 9px;
		border-left-width: 14px;
	}

	.profile-yt-item .yt-embed,
	.feed-card__yt .yt-embed {
		border-radius: 14px;
	}
}

/* =============================================================================
 * 11. MEMBERSHIP CARD
 * ============================================================================= */

.profile-card--membership {
	margin-top: var(--space-3);
}

.profile-membership {
	display: block;
}

.profile-membership[open] .profile-membership__chevron {
	transform: rotate(180deg);
}

.profile-membership__summary {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.profile-membership__summary::-webkit-details-marker {
	display: none;
}

.profile-membership__summary-main {
	min-width: 0;
	flex: 1 1 auto;
	display: grid;
	gap: 8px;
}

.profile-membership__eyebrow {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .45px;
	text-transform: uppercase;
	opacity: .68;
}

.profile-membership__summary-title {
	font-size: 1.02rem;
	line-height: 1.15;
	font-weight: 900;
}

.profile-membership__summary-badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.profile-membership__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 900;
	letter-spacing: .2px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
	white-space: nowrap;
}

.profile-membership__badge.is-free {
	border-color: rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
}

.profile-membership__badge.is-premium {
	border-color: color-mix(in srgb, #eab308 45%, rgba(255,255,255,.12));
	background: color-mix(in srgb, #eab308 14%, transparent);
}

.profile-membership__badge.is-agent-plus {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 48%, rgba(255,255,255,.12));
	background: color-mix(in srgb, var(--brand, #4f8cff) 12%, transparent);
}

.profile-membership__badge.is-advertiser {
	border-color: color-mix(in srgb, #22c55e 45%, rgba(255,255,255,.12));
	background: color-mix(in srgb, #22c55e 12%, transparent);
}

.profile-membership__desc {
	margin: 0;
	font-size: .92rem;
	line-height: 1.4;
	opacity: .88;
}

.profile-membership__chevron {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 70%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 60%, transparent);
	transition: transform .16s ease;
	margin-top: 2px;
}

.profile-membership__content {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.profile-membership__divider {
	height: 1px;
	background: color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 75%, transparent);
}

.profile-membership__list {
	display: grid;
	gap: 10px;
}

.profile-membership__item {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 62%, transparent);
}

.profile-membership__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .9;
	margin-top: 1px;
}

.profile-membership__text {
	font-size: .9rem;
	line-height: 1.32;
	word-break: break-word;
}

.profile-membership__foot {
	display: flex;
	align-items: flex-start;
}

.profile-membership__note {
	display: inline-block;
	font-size: .82rem;
	line-height: 1.35;
	opacity: .72;
}

@media (min-width: 1100px) {
	.profile-membership__summary-title {
		font-size: 1.08rem;
	}

	.profile-membership__item {
		padding: 11px 13px;
	}
}

.profile-membership__summary:focus,
.profile-membership__summary:focus-visible {
	outline: none;
	box-shadow: none;
}

/* =============================================================================
 * 12. HELPERS PERFIL
 * ============================================================================= */

.sidebar-empty-text {
	margin: 0;
}

.sidebar-section__status-dot {
	font-size: .6em;
}

/* =============================================================================
 * 13. REPORT MODAL — MOTIVOS EN BLOQUES VERTICALES
 * ============================================================================= */

#reportModal .mf-modal__dialog {
	width: min(720px, 100%);
}

#reportModal .mf-modal__body {
	display: grid;
	gap: 14px;
}

#reportModal .report-modal__target {
	position: relative;
	line-height: 1.45;
	border-radius: 14px;
	padding: 11px 13px;
	border: 1px solid color-mix(in srgb, var(--brand, #4f8cff) 22%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, var(--brand, #4f8cff) 8%, var(--surface-2, rgba(255,255,255,.06)));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #4f8cff) 10%, transparent);
}

#reportModal .report-modal__reasons {
	display: grid;
	gap: 10px;
}

#reportModal .report-reason {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: start;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 60%, transparent);
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
}

#reportModal .report-reason:hover {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 30%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 72%, transparent);
}

#reportModal .report-reason:focus-within {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 45%, var(--border-color, rgba(255,255,255,.12)));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #4f8cff) 10%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 76%, transparent);
}

#reportModal .report-reason input[type="radio"] {
	margin: 3px 0 0 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

#reportModal .report-reason > span {
	display: grid;
	gap: 4px;
	min-width: 0;
}

#reportModal .report-reason__title {
	display: block;
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.2;
}

#reportModal .report-reason__desc {
	display: block;
	font-size: .9rem;
	line-height: 1.35;
	opacity: .88;
}

#reportModal .report-reason:has(input[type="radio"]:checked) {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 52%, var(--border-color, rgba(255,255,255,.12)));
	background: color-mix(in srgb, var(--brand, #4f8cff) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #4f8cff) 16%, transparent);
}

#reportModal .mb-3 {
	margin-top: 0 !important;
	display: grid;
	gap: 7px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.12)) 68%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 60%, transparent);
}

#reportModal .mb-3:focus-within {
	border-color: color-mix(in srgb, var(--brand, #4f8cff) 45%, var(--border-color, rgba(255,255,255,.12)));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #4f8cff) 10%, transparent);
	background: color-mix(in srgb, var(--surface-2, rgba(255,255,255,.06)) 72%, transparent);
}

#reportModal .form-label {
	margin-bottom: 0;
}

#reportModal textarea.form-control {
	min-height: 110px;
	resize: vertical;
}

#reportModal .report-modal__status {
	min-height: 20px;
}

@media (max-width: 640px) {
	#reportModal .mf-modal__dialog {
		width: min(100%, 100%);
		border-radius: 16px;
	}

	#reportModal .mf-modal__body {
		padding: 14px;
		gap: 12px;
	}

	#reportModal .report-modal__target {
		padding: 10px 11px;
		font-size: .92rem;
		line-height: 1.4;
	}

	#reportModal .report-reason {
		grid-template-columns: 18px 1fr;
		gap: 10px;
		padding: 11px 12px;
		border-radius: 14px;
	}

	#reportModal .report-reason__title {
		font-size: .92rem;
	}

	#reportModal .report-reason__desc {
		font-size: .86rem;
	}

	#reportModal .mb-3 {
		padding: 11px;
		border-radius: 14px;
	}

	#reportModal textarea.form-control {
		min-height: 96px;
	}
}