/* Botones — tokens de theme.json: --wp--preset--color--*  y  --wp--custom--button--* */

/* ---- Base · tamaño M ---- */
body .wp-block-button .wp-block-button__link.wp-element-button,
body .btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap);
	min-height: var(--wp--custom--button--height--md);
	padding: 0 var(--wp--custom--button--padding-x--md);
	border: var(--wp--custom--button--border-width) solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--button--radius);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

/* ---- Tamaño SM: en el bloque, Tipografía → Tamaño "CTA" ---- */
body .wp-block-button .wp-block-button__link.wp-element-button.has-cta-font-size {
	min-height: var(--wp--custom--button--height--sm);
	padding: 0 var(--wp--custom--button--padding-x--sm);
}

/* ---- Primary (también para .btn--primary y .btn--hero de PHP) ---- */
body .btn--primary,
body .btn--hero {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
body .btn--primary:hover,
body .btn--primary:active,
body .btn--hero:hover,
body .btn--hero:active {
	background-color: var(--wp--preset--color--primary-0);
	border-color: var(--wp--preset--color--primary-0);
	filter: none;
}

/* ---- Secondary = estilo "Contorno" del bloque (y .btn--secondary) ---- */
body .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
body .btn--secondary {
	background-color: transparent;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
body .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
body .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:active,
body .btn--secondary:hover,
body .btn--secondary:active {
	background-color: var(--wp--preset--color--secondary-25);
	border-color: var(--wp--preset--color--primary-0);
	color: var(--wp--preset--color--primary-0);
}

/* ---- Inverse = estilo "Inverso" (sobre fondo oscuro) ---- */
body .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}
body .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button:hover,
body .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button:active {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary-0);
}

/* ---- Contorn invers (secundario sobre fondo oscuro) ---- */
body .wp-block-button.is-style-outline-inverse .wp-block-button__link.wp-element-button {
	background-color: transparent;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-outline-inverse .wp-block-button__link.wp-element-button:hover,
body .wp-block-button.is-style-outline-inverse .wp-block-button__link.wp-element-button:active {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

/* ---- Iconos (clases has-icon-*): heredan el color del texto ---- */
body .wp-block-button[class*="has-icon-"] .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--button-icon) center / contain no-repeat;
	mask: var(--button-icon) center / contain no-repeat;
}
body .wp-block-button.has-icon-play { --button-icon: url(../images/icons/play.svg); }
body .wp-block-button.has-icon-info { --button-icon: url(../images/icons/info.svg); }
body .wp-block-button.has-icon-external { --button-icon: url(../images/icons/external-link.svg); }

/* Pausa mientras suena (main.js añade .is-playing). */
body .wp-block-button.has-icon-play.is-playing .wp-block-button__link::before {
	-webkit-mask: none;
	mask: none;
	background: linear-gradient(to right, currentColor 0 30%, transparent 30% 70%, currentColor 70%) center / 60% 65% no-repeat;
}

body .wp-block-button[hidden] {
	display: none;
}

/* ---- Pulsado: 1 px hacia abajo ---- */
body .wp-block-button .wp-block-button__link.wp-element-button:active,
body .btn:active {
	transform: translateY(1px);
}

/* ---- Foco con teclado ---- */
body .wp-block-button .wp-block-button__link.wp-element-button:focus-visible,
body .btn:focus-visible {
	outline: var(--wp--custom--button--focus-ring--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--button--focus-ring--offset);
}
body .wp-block-button.is-style-inverse .wp-block-button__link.wp-element-button:focus-visible,
body .wp-block-button.is-style-outline-inverse .wp-block-button__link.wp-element-button:focus-visible,
body .btn--outline-light:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* ---- Disabled ---- */
body .wp-element-button:disabled,
body .wp-element-button[aria-disabled="true"],
body .wp-block-button .wp-block-button__link.wp-element-button[aria-disabled="true"],
body .wp-block-button .wp-block-button__link.wp-element-button[aria-disabled="true"]:is(:hover, :active),
body .btn[aria-disabled="true"] {
	background-color: var(--wp--preset--color--secondary-25);
	border-color: var(--wp--preset--color--secondary-25);
	color: var(--wp--preset--color--secondary-50);
	cursor: not-allowed;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	body .wp-block-button .wp-block-button__link.wp-element-button,
	body .btn { transition: none; }
}