/* ==========================================================================
   Velas Velia — Mi cuenta de WooCommerce (myaccount/*)
   --------------------------------------------------------------------------
   Estiliza a marca el área de cuenta de Woo: login + registro (form-login.php),
   el contenedor del panel (my-account.php), el menú lateral (navigation.php) y
   el dashboard (dashboard.php). La plantilla aporta la estructura y la cabecera
   de marca; el resto del markup interno (tablas de pedidos, formularios de
   direcciones, avisos) lo genera WooCommerce vía sus hooks, así que aquí se
   "viste" ese markup nativo con el lenguaje de los componentes vv-.

   Consume EXCLUSIVAMENTE tokens del sistema (tokens.css). No hardcodea colores,
   tipografías ni espaciados. Reutiliza .vv-input, .vv-btn--primary, .vv-tag,
   hairlines y pills replicando su look sobre los selectores que produce Woo.
   ========================================================================== */

/* ==========================================================================
   1. AUTENTICACIÓN · login + registro (form-login.php)
   ========================================================================== */

.vv-account-auth {
	width: 100%;
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding: var(--space-12) var(--space-6) var(--space-20);
	background: var(--bg);
	color: var(--text-body);
}

/* Cuando hay registro habilitado, el lienzo respira un poco más. */
.vv-account-auth--split {
	max-width: var(--container);
}

/* --- Cabecera de marca ---------------------------------------------------- */
.vv-account-auth__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	margin-bottom: var(--space-12);
}

.vv-account-auth__title {
	margin: 0;
	/* Escala fluida: encoge en móvil sin desbordar y crece hasta 3xl en desktop. */
	font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
	color: var(--brand);
}

.vv-account-auth__lead {
	max-width: 54ch;
	margin: 0;
	font-size: var(--text-base);
	color: var(--text-muted);
}

.vv-account-auth__lead .vv-sparkle-glyph {
	vertical-align: -2px;
}

/* --- Columnas (login | registro) ------------------------------------------ */
.vv-account-auth__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

.vv-account-auth--split .vv-account-auth__cols {
	grid-template-columns: 1fr 1fr;
}

/* Tarjeta boutique de cada formulario. */
.vv-account-auth__card {
	background: var(--surface-card);
	border: var(--border-gold-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-sm);
}

/* La tarjeta de registro se diferencia con un lavado tenue de sección. */
.vv-account-auth__card--register {
	background: var(--gold-050);
}

.vv-account-auth__card-title {
	margin: 0 0 var(--space-6);
	font-size: var(--text-xl);
	color: var(--brand);
}

/* ==========================================================================
   2. FORMULARIOS de cuenta (login, registro, direcciones, edición)
   --------------------------------------------------------------------------
   Vestimos los form-row / inputs nativos de Woo con el look .vv-input. Las
   plantillas de login/registro ya marcan los inputs con .vv-input, pero los
   endpoints de Woo (direcciones, datos) generan sus propios campos: aquí se
   cubren ambos.
   ========================================================================== */

.vv-account-form .form-row,
.vv-account__content .woocommerce-form-row,
.vv-account__content .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 var(--space-5);
	padding: 0;
}

/* Etiquetas de campo (igual que .vv-field__label). */
.vv-account-form .form-row label,
.vv-account__content .form-row label,
.vv-field__label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--text-body);
}

.vv-account-form .required,
.vv-account__content .required,
.vv-account-form .optional,
.vv-account__content .optional {
	color: var(--gold-600);
	text-decoration: none;
	border: 0;
}

/* Inputs, selects y textarea → estilo .vv-input/.vv-textarea.
   (.vv-input ya está aplicado en login/registro; esto cubre los endpoints
   de Woo que no llevan la clase). */
.vv-account__content input.input-text,
.vv-account__content input[type="text"],
.vv-account__content input[type="email"],
.vv-account__content input[type="tel"],
.vv-account__content input[type="password"],
.vv-account__content textarea,
.vv-account__content select,
.vv-account__content .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-body);
	background: var(--white);
	border: var(--border-w-2) solid var(--gold-300);
	border-radius: var(--radius-pill);
	padding: 12px 18px;
	outline: none;
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.vv-account__content textarea {
	border-radius: var(--radius-md);
	padding: 12px 16px;
	resize: vertical;
	min-height: 96px;
	line-height: var(--leading-normal);
}

.vv-account-form .vv-input::placeholder,
.vv-account__content input::placeholder,
.vv-account__content textarea::placeholder {
	color: var(--ink-300);
}

.vv-account__content input.input-text:focus,
.vv-account__content input[type="text"]:focus,
.vv-account__content input[type="email"]:focus,
.vv-account__content input[type="tel"]:focus,
.vv-account__content input[type="password"]:focus,
.vv-account__content textarea:focus,
.vv-account__content select:focus {
	border-color: var(--gold-600);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Estado de error que pinta Woo. */
.vv-account__content .form-row.woocommerce-invalid input.input-text,
.vv-account__content .form-row.woocommerce-invalid select {
	border-color: var(--rose-400);
}

/* Fila de acciones del formulario (checkbox + botón). */
.vv-account-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.vv-account-form__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-body);
	cursor: pointer;
	white-space: nowrap;
}

.vv-account-form__remember input {
	width: 16px;
	height: 16px;
	accent-color: var(--gold-600);
}

/* El botón ocupa toda la fila cuando hay sitio (mantiene --full en móvil). */
.vv-account-form__actions .vv-btn--full {
	flex: 1 1 100%;
}

.vv-account-form__lost {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
}

.vv-account-form__lost a {
	color: var(--gold-700);
}

.vv-field__hint {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin: 0 0 var(--space-4);
}

/* ==========================================================================
   3. PANEL · contenedor de la cuenta (my-account.php)
   ========================================================================== */

.vv-account {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-12) var(--space-6) var(--space-20);
	background: var(--bg);
	color: var(--text-body);
}

.vv-account__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	margin-bottom: var(--space-10);
}

.vv-account__title {
	margin: 0;
	/* Escala fluida: encoge en móvil sin desbordar y crece hasta 3xl en desktop. */
	font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
	color: var(--brand);
}

.vv-account__lead {
	margin: 0;
	font-size: var(--text-xl);
	color: var(--brand);
}

/* Layout en dos columnas: navegación + contenido. */
.vv-account__panel {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-8);
	align-items: start;
}

.vv-account__content {
	min-width: 0;
	background: var(--surface-card);
	border: var(--border-gold-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-sm);
}

/* Títulos que Woo imprime dentro del contenido. */
.vv-account__content h2,
.vv-account__content h3 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	text-transform: none;
	letter-spacing: var(--tracking-display);
	color: var(--brand);
	font-size: var(--text-lg);
	margin: 0 0 var(--space-5);
}

/* ==========================================================================
   4. NAVEGACIÓN lateral (navigation.php) · lista de pills con estado activo
   ========================================================================== */

.vv-account-nav {
	position: sticky;
	top: var(--space-6);
}

.vv-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.vv-account-nav__item {
	margin: 0;
}

/* Cada enlace es un .vv-tag a ancho completo, alineado a la izquierda. */
.vv-account-nav__link {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: flex-start;
	text-align: left;
	color: var(--ink-700);
}

.vv-account-nav__link:hover {
	color: var(--gold-800);
}

/* Estado activo: Woo añade .is-active al <li>; pintamos el pill como oro. */
.vv-account-nav__item.is-active .vv-account-nav__link {
	background: var(--gold-600);
	color: var(--text-on-brand);
	border-color: var(--gold-600);
	box-shadow: var(--shadow-pill);
}

/* ==========================================================================
   5. DASHBOARD (dashboard.php) · saludo + accesos rápidos
   ========================================================================== */

.vv-dashboard__welcome {
	margin-bottom: var(--space-8);
}

.vv-dashboard__hello {
	margin: 0 0 var(--space-2);
	font-size: var(--text-2xl);
	color: var(--brand);
}

.vv-dashboard__hello .vv-sparkle-glyph {
	vertical-align: -2px;
}

.vv-dashboard__intro {
	margin: 0;
	max-width: 58ch;
	color: var(--text-body);
}

.vv-dashboard__intro strong {
	color: var(--gold-800);
	font-weight: var(--fw-semibold);
}

/* --- Accesos rápidos ------------------------------------------------------ */
.vv-dashboard__shortcuts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.vv-dashboard__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	background: var(--gold-050);
	border: var(--border-gold-hair);
	border-radius: var(--radius-md);
	color: var(--text-body);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

.vv-dashboard__card:hover {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-md);
	border-color: var(--gold-400);
	color: var(--text-body);
}

/* La tarjeta de "seguir explorando" destaca en oro de marca. */
.vv-dashboard__card--shop {
	background: var(--gold-600);
	border-color: var(--gold-600);
	box-shadow: var(--shadow-pill);
}

.vv-dashboard__card--shop .vv-dashboard__card-title,
.vv-dashboard__card--shop .vv-dashboard__card-text {
	color: var(--text-on-brand);
}

.vv-dashboard__card-title {
	color: var(--text-label);
}

.vv-dashboard__card-text {
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* ==========================================================================
   6. AVISOS y enlaces dentro del contenido de la cuenta
   ========================================================================== */

/* Mensaje introductorio que Woo imprime en el dashboard nativo. */
.vv-account__content .woocommerce-MyAccount-content > p a,
.vv-account__content a {
	color: var(--gold-700);
}

/* Botones nativos de Woo dentro del contenido (p. ej. "Guardar cambios"). */
.vv-account__content .button,
.vv-account__content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	border: var(--border-w-2) solid var(--gold-600);
	background: var(--gold-600);
	color: var(--text-on-brand);
	box-shadow: var(--shadow-pill);
	cursor: pointer;
	transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.vv-account__content .button:hover,
.vv-account__content button[type="submit"]:hover {
	filter: brightness(1.06);
}

.vv-account__content .button:active,
.vv-account__content button[type="submit"]:active {
	transform: var(--press-scale);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
	.vv-account-auth--split .vv-account-auth__cols {
		grid-template-columns: 1fr;
	}

	.vv-account__panel {
		grid-template-columns: 1fr;
	}

	/* El menú deja de ser sticky y se vuelve una fila de pills desplazable. */
	.vv-account-nav {
		position: static;
	}

	.vv-account-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vv-account-nav__link {
		width: auto;
		/* Target táctil cómodo en móvil (mínimo recomendado 44px). */
		min-height: 44px;
		padding-block: 10px;
	}
}

@media (max-width: 560px) {
	.vv-dashboard__shortcuts {
		grid-template-columns: 1fr;
	}

	/* En pantallas estrechas, los encabezados en versalitas de Woo se reducen
	   en tamaño y tracking para que no desborden el ancho del contenido. */
	.vv-account__content h2,
	.vv-account__content h3 {
		font-size: var(--text-base);
		letter-spacing: var(--tracking-label);
	}
}