/**
 * CIRCULOVIVO — primitives.
 *
 * Piezas mínimas del sistema: eyebrow, badge, divider, botones (variantes),
 * listas de señales, prose y utilidades de layout que theme.json no cubre.
 * Las secciones y componentes se construyen con estas piezas.
 */

/* ---------- Eyebrow ---------- */
.cv-eyebrow {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cv-signal);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.cv-on-inverse .cv-eyebrow,
.is-style-band-inverse .cv-eyebrow {
	color: var(--cv-signal-soft);
}

.cv-eyebrow--accent {
	color: var(--cv-accent);
}

/* ---------- Dek (subtítulo editorial) ---------- */
.cv-dek {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--cv-text-muted);
	max-width: var(--cv-prose);
}

.cv-on-inverse .cv-dek,
.is-style-band-inverse .cv-dek {
	color: var(--cv-text-inverse-muted);
}

/* ---------- Badge ---------- */
.cv-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cv-text-muted);
	background: var(--cv-surface-tint);
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
}

.cv-badge--signal {
	color: var(--cv-surface-raised);
	background: var(--cv-signal);
	border-color: var(--cv-signal);
}

.cv-badge--evidence {
	color: var(--cv-warning);
	background: transparent;
	border-color: currentColor;
}

/* ---------- Divider hairline ---------- */
.wp-block-separator.is-style-hairline {
	border: 0;
	border-top: 1px solid var(--cv-border);
	opacity: 1;
	width: 100%;
}

/* ---------- Botones: variantes gobernadas ---------- */
.wp-block-button__link {
	border-radius: var(--cv-radius-s);
	transition:
		background-color var(--cv-duration-fast) var(--cv-ease),
		color var(--cv-duration-fast) var(--cv-ease),
		border-color var(--cv-duration-fast) var(--cv-ease);
}

/* Secundario: outline sobre superficie clara u oscura */
.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--cv-text);
	border: 1px solid var(--cv-text);
}

.is-style-secondary .wp-block-button__link:hover,
.is-style-secondary .wp-block-button__link:focus {
	background: var(--cv-text);
	color: var(--cv-surface);
}

.cv-on-inverse .is-style-secondary .wp-block-button__link,
.is-style-band-inverse .is-style-secondary .wp-block-button__link {
	color: var(--cv-text-inverse);
	border-color: var(--cv-text-inverse-muted);
}

.cv-on-inverse .is-style-secondary .wp-block-button__link:hover,
.cv-on-inverse .is-style-secondary .wp-block-button__link:focus,
.is-style-band-inverse .is-style-secondary .wp-block-button__link:hover,
.is-style-band-inverse .is-style-secondary .wp-block-button__link:focus {
	background: var(--cv-text-inverse);
	color: var(--cv-surface-inverse);
}

/* Ghost: solo texto con flecha implícita en contenido */
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--cv-signal);
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	border-bottom: 1px solid transparent;
}

.is-style-ghost .wp-block-button__link:hover,
.is-style-ghost .wp-block-button__link:focus {
	background: transparent;
	color: var(--cv-text);
	border-bottom-color: currentColor;
}

.cv-on-inverse .is-style-ghost .wp-block-button__link,
.is-style-band-inverse .is-style-ghost .wp-block-button__link {
	color: var(--cv-signal-soft);
}

.cv-on-inverse .is-style-ghost .wp-block-button__link:hover,
.cv-on-inverse .is-style-ghost .wp-block-button__link:focus,
.is-style-band-inverse .is-style-ghost .wp-block-button__link:hover,
.is-style-band-inverse .is-style-ghost .wp-block-button__link:focus {
	color: var(--cv-text-inverse);
}

/* Botón principal sobre banda inversa */
.cv-on-inverse .wp-block-button:not(.is-style-secondary):not(.is-style-ghost) .wp-block-button__link,
.is-style-band-inverse .wp-block-button:not(.is-style-secondary):not(.is-style-ghost) .wp-block-button__link {
	background: var(--cv-text-inverse);
	color: var(--cv-surface-inverse);
}

.cv-on-inverse .wp-block-button:not(.is-style-secondary):not(.is-style-ghost) .wp-block-button__link:hover,
.is-style-band-inverse .wp-block-button:not(.is-style-secondary):not(.is-style-ghost) .wp-block-button__link:hover {
	background: var(--cv-signal-soft);
	color: var(--cv-surface-inverse);
}

/* ---------- Lista de señales ---------- */
.wp-block-list.is-style-signals {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--wp--preset--spacing--xs);
}

.wp-block-list.is-style-signals > li {
	position: relative;
	padding-left: 1.5rem;
}

.wp-block-list.is-style-signals > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--cv-signal);
}

.cv-on-inverse .wp-block-list.is-style-signals > li::before,
.is-style-band-inverse .wp-block-list.is-style-signals > li::before {
	border-color: var(--cv-signal-soft);
}

/* ---------- Superficies (variantes de group) ---------- */
.is-style-band-inverse {
	background: var(--cv-surface-inverse);
	color: var(--cv-text-inverse);
}

.is-style-band-inverse :is(h1, h2, h3, h4, h5, h6) {
	color: var(--cv-text-inverse);
}

.is-style-band-inverse a:not(.wp-block-button__link) {
	color: var(--cv-signal-soft);
}

.is-style-band-inverse a:not(.wp-block-button__link):hover {
	color: var(--cv-text-inverse);
}

.is-style-band-tint {
	background: var(--cv-surface-tint);
}

.is-style-panel {
	background: var(--cv-surface-raised);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-l);
	box-shadow: var(--cv-shadow-panel);
}

/* Glass: énfasis puntual, nunca superficie por defecto */
.is-style-glass-panel {
	background: color-mix(in srgb, var(--cv-surface-raised) 72%, transparent);
	backdrop-filter: blur(14px) saturate(1.1);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	border: 1px solid color-mix(in srgb, var(--cv-border) 60%, transparent);
	border-radius: var(--cv-radius-l);
	box-shadow: var(--cv-shadow-glass);
}

@supports not (backdrop-filter: blur(1px)) {
	.is-style-glass-panel {
		background: var(--cv-surface-raised);
	}
}

/* ---------- Prose: ancho de lectura en contenido largo ---------- */
.cv-prose > * {
	max-width: var(--cv-prose);
}

.cv-prose > .alignwide,
.cv-prose > .alignfull {
	max-width: none;
}

/* ---------- Reveal discreto (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cv-reveal {
		opacity: 0;
		translate: 0 14px;
		transition:
			opacity var(--cv-duration-slow) var(--cv-ease),
			translate var(--cv-duration-slow) var(--cv-ease);
	}

	.cv-reveal.cv-reveal--visible {
		opacity: 1;
		translate: 0 0;
	}
}