/**
 * Componente: Botón (.vdp-btn)
 *
 * Matriz semántica (Elementor Qi — header post-669):
 *
 *   Superficie clara (default)     Superficie oscura
 *   ─────────────────────────     ──────────────────
 *   --primary    verde filled      --primary-on-dark    blanco filled
 *   --secondary  stroke negro      --secondary-on-dark  stroke blanco
 *                hover granate     hover granate
 *
 *   .vdp-link — enlace textual (sin pill, sin subrayado)
 *   .vdp-link--section — enlace cabecera de sección (texto subrayado granate)
 *
 * Aliases legacy: --wine → --primary | --ghost → --secondary
 *                  --light → --primary-on-dark | --ghost-light → --secondary-on-dark
 *
 * Ancho: inline (ajustado al texto). Solo usar --block si se necesita 100%.
 */

/* —— Base —— */
.vdp-btn,
a.vdp-btn,
button.vdp-btn,
input.vdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vdp-space-2);
	box-sizing: border-box;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	align-self: flex-start;
	min-height: var(--vdp-btn-min-height);
	padding: var(--vdp-btn-padding);
	border: var(--vdp-btn-border-width) solid transparent;
	border-radius: var(--vdp-btn-border-radius);
	background: var(--vdp-btn-primary-bg);
	color: var(--vdp-btn-primary-fg);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-btn-font-size);
	font-weight: var(--vdp-btn-font-weight);
	text-transform: uppercase;
	letter-spacing: var(--vdp-btn-letter-spacing);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.15s ease;
}

.vdp-btn:hover,
.vdp-btn:focus,
.vdp-btn:active,
.vdp-btn:visited,
a.vdp-btn:hover,
a.vdp-btn:focus,
a.vdp-btn:active,
a.vdp-btn:visited,
button.vdp-btn:hover,
button.vdp-btn:focus,
button.vdp-btn:active,
.woocommerce a.vdp-btn,
.woocommerce a.vdp-btn:hover,
.woocommerce button.vdp-btn,
.woocommerce button.vdp-btn:hover,
.vdp-btn.button,
.vdp-btn.button:hover,
.vdp-btn.woocommerce-button,
.vdp-btn.woocommerce-button:hover {
	text-decoration: none;
}

.vdp-btn:focus-visible {
	outline: 2px solid var(--vdp-btn-primary-bg);
	outline-offset: 2px;
}

.vdp-btn:active:not(:disabled):not(.vdp-btn--disabled):not(.vdp-btn--loading) {
	opacity: 0.94;
}

/* Opcional: ancho completo (login, upsell) */
.vdp-btn--block {
	display: flex;
	width: 100%;
	align-self: stretch;
}

/* —— Primary — superficie clara —— */
.vdp-btn--primary,
.vdp-btn--wine {
	background: var(--vdp-btn-primary-bg);
	border-color: var(--vdp-btn-primary-bg);
	color: var(--vdp-btn-primary-fg);
}

.vdp-btn--primary:hover,
.vdp-btn--primary:focus,
.vdp-btn--wine:hover,
.vdp-btn--wine:focus {
	background: var(--vdp-btn-primary-hover-bg);
	border-color: var(--vdp-btn-primary-hover-bg);
	color: var(--vdp-btn-primary-hover-fg);
}

/* —— Secondary — superficie clara (stroke negro, hover granate) —— */
.vdp-btn--secondary,
.vdp-btn--ghost {
	background: var(--vdp-btn-secondary-bg);
	border-color: var(--vdp-btn-secondary-border);
	color: var(--vdp-btn-secondary-fg);
}

.vdp-btn--secondary:hover,
.vdp-btn--secondary:focus,
.vdp-btn--ghost:hover,
.vdp-btn--ghost:focus {
	background: var(--vdp-btn-secondary-hover-bg);
	border-color: var(--vdp-btn-secondary-hover-border);
	color: var(--vdp-btn-secondary-hover-fg);
}

/* —— Primary — superficie oscura (filled blanco) —— */
.vdp-btn--primary-on-dark,
.vdp-btn--light {
	background: var(--vdp-btn-on-dark-primary-bg);
	border-color: var(--vdp-btn-on-dark-primary-bg);
	color: var(--vdp-btn-on-dark-primary-fg);
}

.vdp-btn--primary-on-dark:hover,
.vdp-btn--primary-on-dark:focus,
.vdp-btn--light:hover,
.vdp-btn--light:focus {
	background: var(--vdp-btn-on-dark-primary-hover-bg);
	border-color: var(--vdp-btn-on-dark-primary-hover-bg);
	color: var(--vdp-btn-on-dark-primary-hover-fg);
}

/* —— Secondary — superficie oscura (stroke blanco, hover granate) —— */
.vdp-btn--secondary-on-dark,
.vdp-btn--ghost-light,
.vdp-btn--tertiary {
	background: var(--vdp-btn-on-dark-secondary-bg);
	border-color: var(--vdp-btn-on-dark-secondary-border);
	color: var(--vdp-btn-on-dark-secondary-fg);
}

.vdp-btn--secondary-on-dark:hover,
.vdp-btn--secondary-on-dark:focus,
.vdp-btn--ghost-light:hover,
.vdp-btn--ghost-light:focus,
.vdp-btn--tertiary:hover,
.vdp-btn--tertiary:focus {
	background: var(--vdp-btn-on-dark-secondary-hover-bg);
	border-color: var(--vdp-btn-on-dark-secondary-hover-border);
	color: var(--vdp-btn-on-dark-secondary-hover-fg);
}

/* —— Tamaños (heredan variante de color) —— */
.vdp-btn--sm {
	padding: var(--vdp-btn-padding-sm);
	font-size: var(--vdp-btn-font-size-sm);
	min-height: 40px;
}

.vdp-btn--xs,
.vdp-mini-btn {
	padding: var(--vdp-btn-padding-xs);
	font-size: var(--vdp-btn-font-size-xs);
	min-height: 34px;
	letter-spacing: 0.04em;
}

/* —— Estados —— */
.vdp-btn--disabled,
.vdp-btn:disabled,
.vdp-btn[aria-disabled="true"] {
	opacity: 0.72;
	cursor: not-allowed;
	pointer-events: none;
}

.vdp-btn--loading {
	opacity: 0.72;
	cursor: wait;
	pointer-events: none;
}

.vdp-btn--loading .vdp-btn__spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vdp-btn-spin 0.65s linear infinite;
}

@keyframes vdp-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

/* —— Link (no es botón pill) —— */
.vdp-link,
.vdp-text-link {
	display: inline;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: var(--vdp-link-fg);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-text-body-sm);
	font-weight: var(--vdp-btn-font-weight);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.vdp-link:hover,
.vdp-link:focus-visible,
.vdp-text-link:hover,
.vdp-text-link:focus-visible {
	color: var(--vdp-link-hover-fg);
	outline: none;
	text-decoration: none;
}

.vdp-link:visited,
.vdp-text-link:visited {
	color: var(--vdp-link-fg);
}

/* Enlace cabecera de sección (junto a h2): texto granate subrayado, sin pill */
.vdp-link--section,
.vdp-section-link {
	display: inline;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: var(--vdp-link-section-fg);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-btn-font-size-sm);
	font-weight: var(--vdp-btn-font-weight);
	text-transform: uppercase;
	letter-spacing: var(--vdp-btn-letter-spacing);
	text-decoration: underline;
	text-decoration-color: var(--vdp-link-section-fg);
	text-underline-offset: 3px;
	line-height: 1.3;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.vdp-link--section:hover,
.vdp-link--section:focus-visible,
.vdp-section-link:hover,
.vdp-section-link:focus-visible {
	color: var(--vdp-link-section-hover-fg);
	text-decoration: underline;
	text-decoration-color: var(--vdp-link-section-hover-fg);
	outline: none;
}

.vdp-link--section:visited,
.vdp-section-link:visited {
	color: var(--vdp-link-section-fg);
	text-decoration-color: var(--vdp-link-section-fg);
}