/**
 * Shared public-page theme styles.
 * Tokens come from :root (set per theme in PHP).
 */

.page-theme-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--page-bg-image, none);
	background-size: var(--page-bg-size, auto);
	background-position: var(--page-bg-position, center);
	background-repeat: var(--page-bg-repeat, repeat);
	opacity: var(--page-bg-opacity, 0.2);
	color: var(--color-primario);
	will-change: transform, opacity;
}

/* SVG patterns are masks, so they take the user's accent color.
   Without mask support the plain background-image above still renders. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.page-theme-bg[data-tint="1"] {
		background-image: none;
		background-color: currentColor;
		-webkit-mask-image: var(--page-bg-image, none);
		mask-image: var(--page-bg-image, none);
		-webkit-mask-size: var(--page-bg-size, auto);
		mask-size: var(--page-bg-size, auto);
		-webkit-mask-position: var(--page-bg-position, center);
		mask-position: var(--page-bg-position, center);
		-webkit-mask-repeat: var(--page-bg-repeat, repeat);
		mask-repeat: var(--page-bg-repeat, repeat);
	}
}

body.page-themed {
	isolation: isolate;
}

.page-theme-card {
	border-radius: var(--page-radius-card, 1.5rem);
	border-width: var(--page-border-width, 1px);
	border-style: solid;
	border-color: var(--page-border-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--page-shadow-card, 0 10px 25px -8px rgba(0, 0, 0, 0.08));
}

.page-theme-radius-link {
	border-radius: var(--page-radius-link, 1rem);
}

/* Border + shadow only (use with pill/square radius overrides) */
.page-theme-chrome {
	border-width: var(--page-border-width, 1px);
	border-style: solid;
	border-color: var(--page-border-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--page-shadow-link, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.page-theme-link {
	border-radius: var(--page-radius-link, 1rem);
	border-width: var(--page-border-width, 1px);
	border-style: solid;
	border-color: var(--page-border-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--page-shadow-link, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.page-theme-avatar {
	border-radius: var(--page-radius-avatar, 9999px);
}

/* Embeds (YouTube, Spotify, maps, link cards, …) */
.bio-embed {
	border-radius: var(--page-radius-link, 1rem);
	border-width: var(--page-border-width, 1px);
	border-style: solid;
	border-color: var(--page-border-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--page-shadow-link, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
	background: #fff;
}

.bio-embed iframe,
.bio-embed > div {
	border-radius: inherit;
}

/* Form controls inside themed public widgets.
   Inputs always keep a hairline so they stay findable on borderless packs. */
.page-theme-control {
	border-radius: var(--page-radius-link, 1rem);
	border-width: max(1px, var(--page-border-width, 1px));
	border-style: solid;
	border-color: var(--page-control-border, var(--page-border-color, rgba(0, 0, 0, 0.08)));
}

.page-theme-control-l {
	border-radius: var(--page-radius-link, 1rem) 0 0 var(--page-radius-link, 1rem);
	border-style: solid;
	border-color: var(--page-control-border, var(--page-border-color, rgba(0, 0, 0, 0.08)));
	border-top-width: max(1px, var(--page-border-width, 1px));
	border-bottom-width: max(1px, var(--page-border-width, 1px));
	border-left-width: max(1px, var(--page-border-width, 1px));
	border-right-width: 0;
}

.page-theme-control-r {
	border-radius: 0 var(--page-radius-link, 1rem) var(--page-radius-link, 1rem) 0;
	border-style: solid;
	border-color: var(--page-control-border, var(--page-border-color, rgba(0, 0, 0, 0.08)));
	border-top-width: max(1px, var(--page-border-width, 1px));
	border-bottom-width: max(1px, var(--page-border-width, 1px));
	border-right-width: max(1px, var(--page-border-width, 1px));
	border-left-width: 0;
}

/* Packs with no (or white) borders need a tinted edge on inputs */
.page-theme-soft,
.page-theme-aurora,
.page-theme-olas,
.page-theme-confeti {
	--page-control-border: color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.page-theme-btn {
	border-radius: var(--page-radius-link, 1rem);
	box-shadow: var(--page-shadow-link, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

/* Beat Tailwind rounded-full from render_button() on public pages */
body.page-themed .page-theme-btn {
	border-radius: var(--page-radius-link, 1rem);
}

/* Section title — accent rule that adapts per theme pack */
.bio-heading-block {
	width: 100%;
	text-align: center;
	padding: 0.35rem 0.25rem 0.15rem;
}

.bio-heading {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	line-height: 1.25;
}

.bio-heading::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: max(2px, var(--page-border-width, 1px));
	margin: 0.55rem auto 0;
	background: currentColor;
	opacity: 0.35;
	border-radius: 9999px;
}

.page-theme-paper .bio-heading {
	letter-spacing: 0.02em;
	font-weight: 600;
}

.page-theme-paper .bio-heading::after {
	width: 4.5rem;
	height: 1.5px;
	border-radius: 0;
	opacity: 0.45;
}

.page-theme-soft .bio-heading::after {
	width: 3.25rem;
	height: 4px;
	opacity: 0.28;
}

.page-theme-grid .bio-heading::after {
	width: 2rem;
	height: 3px;
	border-radius: 0;
	opacity: 0.55;
}

.page-theme-aurora .bio-heading::after {
	width: 3.5rem;
	height: 3px;
	opacity: 0.4;
	background: linear-gradient(90deg, transparent, currentColor 20%, currentColor 80%, transparent);
}

.page-theme-mono .bio-heading {
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.95rem;
}

.page-theme-mono .bio-heading::after {
	width: 100%;
	max-width: 12rem;
	height: 1px;
	border-radius: 0;
	opacity: 0.45;
}

.page-theme-brutal .bio-heading {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.page-theme-brutal .bio-heading::after {
	width: 100%;
	max-width: 14rem;
	height: 3px;
	border-radius: 0;
	opacity: 0.9;
}

.page-theme-olas .bio-heading::after {
	width: 3.5rem;
	height: 3px;
	opacity: 0.4;
}

.page-theme-atelier .bio-heading {
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.01em;
}

.page-theme-atelier .bio-heading::after {
	width: 2.25rem;
	height: 1px;
	border-radius: 0;
	opacity: 0.4;
}

.page-theme-neon .bio-heading {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1rem;
	text-shadow: 0 0 14px color-mix(in srgb, var(--color-primario) 45%, transparent);
}

.page-theme-neon .bio-heading::after {
	width: 100%;
	max-width: 10rem;
	height: 2px;
	border-radius: 0;
	opacity: 0.75;
	box-shadow: 0 0 10px color-mix(in srgb, var(--color-primario) 70%, transparent);
}

.page-theme-confeti .bio-heading {
	font-weight: 700;
}

.page-theme-confeti .bio-heading::after {
	width: 2.5rem;
	height: 5px;
	opacity: 0.3;
}

.page-theme-zen .bio-heading {
	font-weight: 500;
	letter-spacing: 0.12em;
	font-size: 0.95rem;
	text-transform: uppercase;
}

.page-theme-zen .bio-heading::after {
	width: 1.25rem;
	height: 1px;
	margin-top: 0.75rem;
	border-radius: 0;
	opacity: 0.3;
}

/* Text block — soft panel using theme chrome */
.bio-text-block {
	padding: 0.9rem 1.05rem;
	background: color-mix(in srgb, #ffffff 88%, transparent);
	border-width: var(--page-border-width, 1px);
	border-style: solid;
	border-color: var(--page-border-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--page-shadow-link, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bio-text-block .descripcion_pag {
	margin: 0;
}

.page-theme-soft .bio-text-block {
	background: color-mix(in srgb, #ffffff 72%, transparent);
}

.page-theme-mono .bio-text-block,
.page-theme-brutal .bio-text-block {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: #fff;
}

.page-theme-brutal .bio-text-block {
	box-shadow: var(--page-shadow-link);
}

.page-theme-zen .bio-text-block {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-width: 0;
	border-top-width: var(--page-border-width, 1px);
	border-bottom-width: var(--page-border-width, 1px);
	border-radius: 0;
	padding: 1.1rem 0.25rem;
}

.page-theme-neon .bio-text-block {
	background: color-mix(in srgb, #ffffff 82%, transparent);
}

/* Subtle animations */
@keyframes page-theme-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(0, -12px, 0) scale(1.02);
	}
}

@keyframes page-theme-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	}
	33% {
		transform: translate3d(2%, -1.5%, 0) rotate(1deg) scale(1.03);
	}
	66% {
		transform: translate3d(-1.5%, 2%, 0) rotate(-1deg) scale(1.02);
	}
}

@keyframes page-theme-shimmer {
	0%,
	100% {
		opacity: var(--page-bg-opacity, 0.2);
	}
	50% {
		opacity: calc(var(--page-bg-opacity, 0.2) * 1.45);
	}
}

@keyframes page-theme-pulse-dots {
	0%,
	100% {
		transform: scale(1);
		opacity: var(--page-bg-opacity, 0.2);
	}
	50% {
		transform: scale(1.04);
		opacity: calc(var(--page-bg-opacity, 0.2) * 1.3);
	}
}

@keyframes page-theme-wave {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(-1.5%, 1.2%, 0);
	}
}

@keyframes page-theme-scan {
	0%,
	100% {
		background-position: 0 0;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		opacity: var(--page-bg-opacity, 0.14);
	}
	50% {
		background-position: 0 3px;
		-webkit-mask-position: 0 3px;
		mask-position: 0 3px;
		opacity: calc(var(--page-bg-opacity, 0.14) * 1.35);
	}
}

.page-theme-bg[data-anim="float"] {
	animation: page-theme-float 14s ease-in-out infinite;
}

.page-theme-bg[data-anim="drift"] {
	animation: page-theme-drift 22s ease-in-out infinite;
}

.page-theme-bg[data-anim="shimmer"] {
	animation: page-theme-shimmer 8s ease-in-out infinite;
}

.page-theme-bg[data-anim="pulse-dots"] {
	animation: page-theme-pulse-dots 10s ease-in-out infinite;
}

.page-theme-bg[data-anim="wave"] {
	animation: page-theme-wave 16s ease-in-out infinite;
}

.page-theme-bg[data-anim="scan"] {
	animation: page-theme-scan 5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.page-theme-bg {
		animation: none !important;
	}
}

/* Dashboard theme picker — scoped live preview of the public page */
.page-theme-preview {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	font-family: var(--page-font-family);
	background-color: var(--color-secundario);
	min-height: 11.5rem;
}

.page-theme-preview .page-theme-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-theme-preview-inner {
	position: relative;
	z-index: 1;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.page-theme-preview .page-theme-card,
.page-theme-preview .page-theme-link {
	background: #fff;
}