/* Insignias — componente global (perfil + catálogo) */

.profile-app-badge {
	--badge-primary: var(--fnc-accent, #7c3aed);
	--badge-secondary: rgba(124,58,237,0.16);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	vertical-align: middle;
	isolation: isolate;
}

.profile-app-badge__gem {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	border: none;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.32) 0%, transparent 46%),
		linear-gradient(160deg, color-mix(in srgb, var(--badge-secondary) 70%, #000 30%) 0%, rgba(0, 0, 0, 0.5) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -7px 14px rgba(0, 0, 0, 0.32),
		0 3px 12px color-mix(in srgb, var(--badge-primary) 32%, transparent);
	overflow: hidden;
}

.profile-app-badge__gem::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--badge-primary) 55%, #ffffff 45%),
		color-mix(in srgb, var(--badge-primary) 22%, transparent)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
	pointer-events: none;
}

.profile-app-badge__gem::after {
	content: "";
	position: absolute;
	inset: -35%;
	background: linear-gradient(
		115deg,
		transparent 40%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 60%
	);
	transform: translateX(-130%) rotate(18deg);
	pointer-events: none;
}

.profile-app-badge__gem i {
	position: relative;
	z-index: 1;
	color: var(--badge-primary);
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

/* Icono compacto — pequeño (junto al username) */
.profile-app-badge--icon,
.profile-app-badge.icon {
	width: 1.42rem;
	height: 1.42rem;
	flex: 0 0 1.42rem;
}

.profile-app-badge--icon .profile-app-badge__gem,
.profile-app-badge.icon .profile-app-badge__gem {
	width: 100%;
	height: 100%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -4px 8px rgba(0, 0, 0, 0.28),
		0 2px 6px color-mix(in srgb, var(--badge-primary) 26%, transparent);
}

.profile-app-badge--icon .profile-app-badge__gem::before,
.profile-app-badge.icon .profile-app-badge__gem::before {
	opacity: 0.42;
}

.profile-app-badge--icon .profile-app-badge__gem i,
.profile-app-badge.icon .profile-app-badge__gem i {
	font-size: 0.68rem;
}

/* Placa completa (perfil) — flex para equilibrar gema + texto */
.profile-app-badge--full,
.profile-app-badge.full {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 10.5rem;
	max-width: 100%;
	height: 2.5rem;
	padding: 0 0.95rem 0 0.55rem;
	border-radius: var(--fnc-radius-pill, 999px);
	border: none;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--badge-secondary) 55%, rgba(0, 0, 0, 0.45)) 0%,
		rgba(0, 0, 0, 0.38) 100%
	);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.09),
		inset 0 0 0 1px color-mix(in srgb, var(--badge-primary) 18%, transparent),
		0 6px 16px rgba(0, 0, 0, 0.22);
}

.profile-app-badge--full .profile-app-badge__gem,
.profile-app-badge.full .profile-app-badge__gem {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	flex: 0 0 2.15rem;
	width: 2.15rem;
	height: 2.15rem;
	margin-left: -0.4rem;
}

.profile-app-badge--full .profile-app-badge__gem i,
.profile-app-badge.full .profile-app-badge__gem i {
	font-size: 1.05rem;
}

.profile-app-badge--full .profile-app-badge__name,
.profile-app-badge.full .profile-app-badge__name {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: color-mix(in srgb, var(--badge-primary) 78%, #ffffff 22%);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-badge-card:hover .profile-app-badge__gem::after,
#app-profile .profile-body .badges a:hover .profile-app-badge__gem::after {
	animation: profile-badge-shine 0.85s ease;
}

@keyframes profile-badge-shine {
	0% {
		transform: translateX(-130%) rotate(18deg);
	}
	100% {
		transform: translateX(130%) rotate(18deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.profile-badge-card:hover .profile-app-badge__gem::after,
	#app-profile .profile-body .badges a:hover .profile-app-badge__gem::after {
		animation: none;
	}
}