/**
 * Wapu Ventas Design System.
 *
 * Local semantic layer that maps the sales vertical to WapuOS/Core tokens.
 * Components should consume --wv-* tokens instead of hardcoded values.
 */

.wapu-ventas,
.wapu-ventas-button,
.wapu-ventas-card,
.wapu-ventas-contact-box,
.wapu-ventas-empty,
.wapu-ventas-filters,
.wapu-ventas-grid,
.wapu-ventas-notice,
.wapu-ventas-offer,
.wapu-ventas-price-negotiable,
.wapu-ventas-product-summary,
.wapu-ventas-product-badges,
.wapu-ventas-single,
.wapu-product-card--ventas,
.wapu-product-card__ventas-badges,
.wapu-product-card__ventas-badge,
.wapu-ventas-admin-page,
.wapu-ventas-admin-panel {
	/* Brand */
	--wv-accent: var(--wos-accent, var(--wa-accent, #010619));
	--wv-accent-hover: var(--wos-accent-hover, var(--wa-accent-hover, #111a38));
	--wv-accent-fg: var(--wos-accent-ink, var(--wa-text-on-accent, #ffffff));
	--wv-accent-soft: var(--wos-accent-soft, var(--wa-accent-soft, #f4f6fb));
	--wv-accent-border: var(--wos-accent-border, var(--wa-accent-border, rgba(1, 6, 25, .16)));

	/* Vertical semantics: inherit WapuOS, never introduce a separate palette. */
	--wv-offer: var(--wos-offer, var(--wv-accent, #010619));
	--wv-offer-hover: var(--wos-offer-hover, var(--wv-accent-hover, #010619));
	--wv-offer-soft: var(--wos-offer-soft, var(--wv-accent-soft));
	--wv-offer-border: var(--wos-offer-border, var(--wv-accent-border));
	--wv-offer-focus: var(--wos-offer-focus, var(--wv-focus));
	--wv-condition: #2563eb;
	--wv-condition-soft: #eff6ff;
	--wv-condition-border: #bfdbfe;

	/* Surfaces */
	--wv-canvas: var(--wos-canvas, var(--wa-surface-canvas, #f8fafc));
	--wv-surface: var(--wos-surface, var(--wa-surface, #ffffff));
	--wv-surface-subtle: var(--wos-surface-subtle, var(--wa-surface-2, #fafafa));
	--wv-surface-muted: var(--wos-surface-muted, var(--wa-surface-3, #f4f4f5));
	--wv-paper: var(--wv-canvas);

	/* Text */
	--wv-text: var(--wos-ink, var(--wa-text, #0a0f1a));
	--wv-muted: var(--wos-muted, var(--wa-text-muted, #64748b));
	--wv-faint: var(--wos-faint, var(--wa-text-subtle, #94a3b8));

	/* Lines and shape */
	--wv-border: var(--wos-border, var(--wa-border-color, rgba(15, 23, 42, .10)));
	--wv-border-soft: var(--wos-border-soft, var(--wa-border-color-soft, rgba(15, 23, 42, .06)));
	--wv-border-strong: var(--wos-border-strong, var(--wa-border-color-strong, rgba(15, 23, 42, .16)));
	--wv-radius-sm: var(--wos-radius-sm, var(--wa-radius-sm, 6px));
	--wv-radius: var(--wos-radius, var(--wa-radius, 8px));
	--wv-radius-lg: var(--wos-radius-lg, var(--wa-radius-md, 12px));
	--wv-radius-pill: var(--wos-radius-pill, var(--wa-radius-pill, 9999px));

	/* Spacing */
	--wv-space-half: var(--wos-space-half, var(--wa-space-half, 4px));
	--wv-space-1: var(--wos-space-1, var(--wa-space-1, 8px));
	--wv-space-2: var(--wos-space-2, var(--wa-space-2, 16px));
	--wv-space-3: var(--wos-space-3, var(--wa-space-3, 24px));
	--wv-space-4: var(--wos-space-4, var(--wa-space-4, 32px));

	/* Type */
	--wv-font: var(--wos-font, var(--wa-font-sans, var(--wapu-font-body, inherit)));
	--wv-font-xs: var(--wos-font-xs, var(--wa-font-xs, 11px));
	--wv-font-sm: var(--wos-font-sm, var(--wa-font-sm, 12px));
	--wv-font-base: var(--wos-font-base, var(--wa-font-base, 14px));
	--wv-font-md: var(--wos-font-md, var(--wa-font-md, 16px));
	--wv-font-lg: var(--wos-font-lg, var(--wa-font-lg, 20px));
	--wv-font-xl: var(--wos-font-xl, var(--wa-font-xl, 28px));
	--wv-leading-tight: var(--wa-leading-tight, 1.2);
	--wv-leading-normal: var(--wa-leading-normal, 1.5);

	/* States */
	--wv-success: var(--wos-success, var(--wa-success, #059669));
	--wv-success-soft: var(--wos-success-soft, var(--wa-success-soft, #ecfdf5));
	--wv-success-border: var(--wos-success-border, var(--wa-success-border, #a7f3d0));
	--wv-warning: var(--wos-warning, var(--wa-warning, #d97706));
	--wv-warning-soft: var(--wos-warning-soft, var(--wa-warning-soft, #fffbeb));
	--wv-warning-border: var(--wos-warning-border, var(--wa-warning-border, #fde68a));
	--wv-danger: var(--wos-danger, var(--wa-error, #d4183d));
	--wv-danger-soft: var(--wos-danger-soft, var(--wa-error-soft, #fff1f2));
	--wv-danger-border: var(--wos-danger-border, var(--wa-error-border, #fecdd3));
	--wv-info: var(--wos-info, var(--wa-info, #3b82f6));
	--wv-info-soft: var(--wos-info-soft, var(--wa-info-soft, #eff6ff));
	--wv-info-border: var(--wos-info-border, var(--wa-info-border, #bfdbfe));

	/* Elevation and motion */
	--wv-shadow-xs: var(--wa-shadow-xs, 0 1px 2px rgba(15, 23, 42, .04));
	--wv-shadow: var(--wa-shadow, 0 4px 12px rgba(15, 23, 42, .06));
	--wv-shadow-md: var(--wa-shadow-md, 0 8px 24px rgba(15, 23, 42, .08));
	--wv-focus: var(--wos-focus-ring, var(--wa-focus-ring, 0 0 0 3px rgba(1, 6, 25, .18)));
	--wv-duration: var(--wa-duration-normal, .2s);
	--wv-ease: var(--wa-ease, cubic-bezier(.4, 0, .2, 1));

	color: var(--wv-text);
	font-family: var(--wv-font);
}

.wapu-ventas *,
.wapu-ventas-card *,
.wapu-ventas-offer *,
.wapu-ventas-admin-page *,
.wapu-ventas-admin-panel * {
	box-sizing: border-box;
}

.wapu-ventas-button {
	align-items: center;
	background: var(--wv-accent);
	border: 1px solid var(--wv-accent);
	border-radius: var(--wv-radius);
	color: var(--wv-accent-fg);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	gap: var(--wv-space-1);
	justify-content: center;
	line-height: 1;
	min-height: 40px;
	padding: 10px 14px;
	text-decoration: none;
	transition:
		background-color var(--wv-duration) var(--wv-ease),
		border-color var(--wv-duration) var(--wv-ease),
		box-shadow var(--wv-duration) var(--wv-ease),
		opacity var(--wv-duration) var(--wv-ease),
		transform var(--wv-duration) var(--wv-ease);
}

.wapu-ventas-button:hover,
.wapu-ventas-button:focus {
	background: var(--wv-accent-hover);
	border-color: var(--wv-accent-hover);
	color: var(--wv-accent-fg);
	transform: translateY(-1px);
}

.wapu-ventas-button:focus-visible {
	box-shadow: var(--wv-focus);
	outline: 0;
}

.wapu-ventas-button--ghost {
	background: var(--wv-surface);
	border-color: var(--wv-border);
	color: var(--wv-accent);
}

.wapu-ventas-button--ghost:hover,
.wapu-ventas-button--ghost:focus {
	background: var(--wv-accent-soft);
	border-color: var(--wv-accent-border);
	color: var(--wv-accent);
}

.wapu-ventas-button--offer,
.wapu-ventas-button--offer-link {
	background: var(--wv-offer);
	border-color: var(--wv-offer);
	color: var(--wv-accent-fg);
}

.wapu-ventas-button--offer:hover,
.wapu-ventas-button--offer:focus,
.wapu-ventas-button--offer-link:hover,
.wapu-ventas-button--offer-link:focus {
	background: var(--wv-offer-hover);
	border-color: var(--wv-offer-hover);
	color: var(--wv-accent-fg);
}

.wapu-ventas-button--small {
	font-size: var(--wv-font-sm);
	min-height: 36px;
	padding: 9px 12px;
	width: 100%;
}

.wapu-ventas-chip,
.wapu-ventas-card__meta span,
.wapu-ventas-card__status,
.wapu-ventas-product-summary span,
.wapu-ventas-product-badges span,
.wapu-ventas-price-negotiable,
.wapu-product-card__ventas-badge,
.wapu-ventas-admin-pill {
	align-items: center;
	background: var(--wv-accent-soft);
	border: 1px solid var(--wv-accent-border);
	border-radius: var(--wv-radius-pill);
	color: var(--wv-accent);
	display: inline-flex;
	font-size: var(--wv-font-sm);
	font-weight: 700;
	line-height: 1;
	padding: 6px 9px;
	width: fit-content;
}

.wapu-ventas-surface {
	background: var(--wv-surface);
	border: 1px solid var(--wv-border);
	border-radius: var(--wv-radius);
	box-shadow: var(--wv-shadow-xs);
}

.wapu-ventas-field-control {
	background: var(--wv-surface);
	border: 1px solid var(--wv-border);
	border-radius: var(--wv-radius);
	color: var(--wv-text);
	font: inherit;
	min-height: 42px;
	padding: 9px 11px;
	width: 100%;
}

.wapu-ventas-field-control:focus {
	border-color: var(--wv-accent);
	box-shadow: var(--wv-focus);
	outline: 0;
}