/**
 * Componente: Card
 *
 * Variantes canónicas extraídas de account.css y puntos.css:
 *   .vdp-card          — panel de contenido (account)
 *   .vdp-stat          — KPI / métrica destacada
 *   .vdp-alert-card    — aviso informativo
 *   .vdp-metric        — KPI admin (antes .vdp-card en .vdp-puntos-cards)
 *   .vdp-link-card     — tile navegable
 *   .vdp-empty          — estado vacío (tabla / listado)
 */

/* —— Panel (contenido) — sin stroke exterior —— */
.vdp-card,
.vdp-panel {
	background: var(--vdp-paper);
	border: var(--vdp-card-border, none);
	border-radius: var(--vdp-radius-md);
	padding: var(--vdp-space-6);
}

.vdp-card__title,
.vdp-panel__title {
	margin: 0 0 var(--vdp-space-2);
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-medium);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
}

/* —— Section heading h2 (Mi cuenta) —— */
.vdp-section__title {
	margin: 0;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-section-title);
	font-weight: var(--vdp-weight-bold);
	line-height: var(--vdp-lh-section-title);
	letter-spacing: var(--vdp-tracking-section-title);
}

/* —— Mission card (h3) —— */
.vdp-mission__title {
	margin: 0 0 8px;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-medium);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
}

.vdp-mission__text {
	margin: 0;
	color: var(--vdp-muted);
	font-size: var(--vdp-text-body);
	line-height: var(--vdp-lh-body);
}

/* —— Order card —— */
.vdp-order-card__title {
	margin: 0 0 3px;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-order-card-title);
	font-weight: var(--vdp-weight-order-card-title);
	line-height: var(--vdp-lh-order-card-title);
	letter-spacing: var(--vdp-tracking-h3);
}

/* —— Reward card —— */
.vdp-reward-card__title {
	margin: 0;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-medium);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
}

.vdp-card__text,
.vdp-card__meta,
.vdp-panel__text,
.vdp-panel__meta {
	margin: 0 0 var(--vdp-space-3);
	font-size: var(--vdp-text-body);
	color: var(--vdp-muted);
	line-height: var(--vdp-lh-body);
}

.vdp-card__header,
.vdp-panel__header {
	margin-bottom: var(--vdp-space-4);
}

.vdp-card__footer,
.vdp-panel__footer {
	margin-top: var(--vdp-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--vdp-space-3);
	align-items: center;
}

.vdp-card__media img,
.vdp-panel__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vdp-radius-nav);
}

.vdp-card--hover,
.vdp-panel--hover {
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.vdp-card--hover:hover,
.vdp-panel--hover:hover {
	box-shadow: 0 4px 16px rgba(23, 23, 20, 0.06);
}

/* —— Stat / KPI —— */
.vdp-stat {
	display: flex;
	flex-direction: column;
	background: var(--vdp-paper);
	border: var(--vdp-card-border, none);
	padding: var(--vdp-stat-padding-top) var(--vdp-stat-padding-inline) var(--vdp-stat-padding-bottom);
	border-radius: var(--vdp-radius-md);
	min-height: 132px;
}

.vdp-stat--inline {
	display: block;
	min-height: auto;
}

.vdp-stat__label {
	display: block;
	flex: 0 0 auto;
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-text-stat-label);
	font-weight: var(--vdp-weight-medium);
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--vdp-tracking-eyebrow);
	color: var(--vdp-muted);
}

.vdp-stat:not(.vdp-stat--inline) {
	gap: var(--vdp-stat-block-gap);
}

.vdp-stat:not(.vdp-stat--inline) .vdp-stat__content {
	margin-top: auto;
}

.vdp-stat__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--vdp-stat-value-gap);
	flex: 0 0 auto;
	min-height: 0;
}

.vdp-stat--inline .vdp-stat__content {
	margin-top: var(--vdp-stat-block-gap);
}

.vdp-stat__value {
	display: block;
	margin: 0;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-stat-value);
	font-weight: var(--vdp-weight-semibold);
	line-height: var(--vdp-lh-tight);
	letter-spacing: var(--vdp-tracking-stat-value);
}

.vdp-stat__hint {
	margin: 0;
	color: var(--vdp-muted);
	font-size: var(--vdp-text-stat-hint);
	line-height: 1.35;
}

/* —— Metric (admin KPI — evita colisión con .vdp-card account) —— */
.vdp-puntos-cards .vdp-metric,
.vdp-metric {
	flex: 1 1 140px;
	border: 1px solid var(--vdp-admin-border);
	border-radius: var(--vdp-radius-sm);
	padding: var(--vdp-space-3) var(--vdp-space-4);
	background: var(--vdp-admin-surface);
}

.vdp-metric strong {
	display: block;
	font-size: 1.4em;
	color: var(--vdp-admin-ink);
}

.vdp-metric span {
	color: var(--vdp-admin-muted);
	font-size: 0.9em;
}

.vdp-metric--alert,
.vdp-card--alert {
	border-color: #d4a017;
	background: #fff8e6;
}

/* —— Alert card —— */
.vdp-alert-card,
.vdp-panel--alert {
	padding: 18px;
	border: var(--vdp-card-border, none);
	background: var(--vdp-alert-bg);
	border-radius: var(--vdp-radius-md);
}

.vdp-alert-card__title,
.vdp-panel--alert .vdp-panel__title {
	margin: 0 0 5px;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-medium);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
}

.vdp-alert-card__text,
.vdp-panel--alert .vdp-panel__text {
	font-size: var(--vdp-text-body-sm);
	margin: 0 0 var(--vdp-space-3);
	color: var(--vdp-alert-text);
}

/* —— Link tile —— */
.vdp-link-card,
.vdp-tile {
	display: block;
	padding: var(--vdp-space-4) 18px;
	background: var(--vdp-paper);
	border: var(--vdp-card-border, none);
	border-radius: var(--vdp-radius-link-card);
	color: var(--vdp-ink);
	text-decoration: none;
	font-size: var(--vdp-text-body);
	font-weight: 600;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.vdp-link-card:hover,
.vdp-link-card:focus-visible,
.vdp-link-card:active,
.vdp-link-card:visited,
.vdp-tile:hover,
.vdp-tile:focus-visible,
.vdp-tile:active,
.vdp-tile:visited {
	color: var(--vdp-wine);
	outline: none;
	text-decoration: none;
}

.vdp-admin-hub-card {
	display: block;
	padding: var(--vdp-space-4) 18px;
	border: 1px solid var(--vdp-admin-border);
	border-radius: var(--vdp-space-2);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vdp-admin-hub-card:hover,
.vdp-admin-hub-card:focus-visible {
	border-color: var(--vdp-admin-wine);
	box-shadow: var(--vdp-shadow-admin-hover);
	color: inherit;
	outline: none;
}

.vdp-admin-hub-card strong {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	color: var(--vdp-admin-ink);
}

.vdp-admin-hub-card span {
	color: var(--vdp-admin-muted);
	font-size: var(--vdp-text-body-sm);
	line-height: 1.4;
}

/* —— Settings card (Mi cuenta — ajustes, formularios por sección) —— */
.vdp-settings-card {
	background: var(--vdp-paper);
	border: var(--vdp-card-border, none);
	border-radius: var(--vdp-radius-md);
	overflow: hidden;
}

.vdp-settings-card__header {
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--vdp-line);
}

.vdp-settings-card__title {
	margin: 0;
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-semibold);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
	color: var(--vdp-ink);
}

.vdp-settings-card__desc {
	margin: 6px 0 0;
	color: var(--vdp-muted);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-text-body-sm);
	line-height: var(--vdp-lh-body);
}

.vdp-settings-card__body {
	padding: 20px;
}

/* —— Empty state (card-like) —— */
.vdp-empty {
	border: 1px dashed var(--vdp-empty-border);
	background: var(--vdp-empty-bg);
	padding: var(--vdp-space-9);
	text-align: center;
	border-radius: var(--vdp-radius-md);
}

.vdp-empty--compact {
	padding: 24px;
}

.vdp-empty__icon {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 10px;
	opacity: 0.55;
}

.vdp-empty__title {
	margin: 0 0 var(--vdp-space-2);
	font-family: var(--vdp-font-body);
	font-size: var(--vdp-text-h3);
	font-weight: var(--vdp-weight-medium);
	line-height: var(--vdp-lh-h3);
	letter-spacing: var(--vdp-tracking-h3);
	color: var(--vdp-ink);
}

.vdp-empty__text {
	margin: 0 0 var(--vdp-space-4);
	font-size: var(--vdp-text-body-sm);
	color: var(--vdp-muted);
}