/* ==========================================================================
   Vértice Commerce 2 — core/account.css
   Mecánica de MI CUENTA (sin estética de marca, SOLO tokens): layout con
   navegación lateral, dashboard con accesos rápidos, tabla de pedidos,
   detalle de pedido, direcciones, formularios (login / registro / edición)
   y estados de pedido. Porta la mecánica de woo-account.css de la
   referencia v1.

   FIX AUDITORÍA woo-account.css:244 aplicado acá: la tabla de pedidos usa
   el patrón stacked (tarjetas) POR DEFECTO (mobile-first) y recién en
   ≥880px vuelve a tabla real — en v1 el stacked cortaba en 600px y el grid
   de cuenta recién abría en 880px, dejando la franja 601–880px con una
   tabla desbordada.

   Se encola SOLO con is_account_page(). core/shop.css NO carga acá: los
   notices se cubren en esta hoja para su contexto.

   Convenciones del motor:
   - Mobile-first; breakpoints 640 / 880 / 1100 (min-width).
   - Foco: :focus-visible + var(--focus-ring) (anillo global en reset.css);
     los campos solo SUMAN border-color (nunca outline:none).
   - Motion SOLO dentro de @media (prefers-reduced-motion: no-preference).
   - SIN !important: el CSS del core (woocommerce-general; layout y
     smallscreen des-encolados en inc/woocommerce.php) se vence por
     especificidad acotada con la body class .woocommerce-account
     (fix woo-overrides.css:8).
   ========================================================================== */

/* ============================ 1. LAYOUT ================================= */
/* myaccount/my-account.php: .vc-account > nav.vc-account__nav
   (.woocommerce-MyAccount-navigation) + .vc-account__content
   (.woocommerce-MyAccount-content). El grid vive en el wrapper propio del
   tema; los floats/anchos del core sobre nav/content se neutralizan. */
.vc-account {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(var(--sp-5), 4vw, var(--sp-6));
	align-items: start;
}
@media (min-width: 880px) {
	.vc-account { grid-template-columns: 260px minmax(0, 1fr); }
}
.woocommerce-account .vc-account .woocommerce-MyAccount-navigation,
.woocommerce-account .vc-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}

/* Red de seguridad para el clearfix del core: si un plugin re-inyecta
   woocommerce-layout, sus ::before/::after sobre .woocommerce se vuelven
   ítems fantasma del grid de la cuenta (gotcha conocido). */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; }

/* ============================ 2. NAVEGACIÓN LATERAL ===================== */
/* myaccount/navigation.php: ul.vc-account__nav-list > li (clases del core
   woocommerce-MyAccount-navigation-link--{endpoint} + .is-active) >
   a.vc-account__nav-link (aria-current="page" en el activo) con
   span.vc-account__nav-ico + span.vc-account__nav-label. */
@media (min-width: 880px) {
	.vc-account__nav {
		position: sticky;
		top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--sp-3));
	}
}

.vc-account__nav-list {
	list-style: none;
	margin: 0;
	padding: var(--sp-2);
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--surface-raised);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
}
.vc-account__nav-list li { margin: 0; }
.vc-account__nav-link {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px; /* target táctil AA */
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-md);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-snug);
	text-decoration: none;
}
.vc-account__nav-link:hover {
	background: var(--surface-2);
	color: var(--brand-strong);
}
.vc-account__nav-link:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}
.vc-account__nav-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--ink-3);
}
.vc-account__nav-ico svg { width: 20px; height: 20px; }
.vc-account__nav-label { min-width: 0; }

/* Ítem activo: clase del core en el <li> + aria-current en el <a>. */
.woocommerce-MyAccount-navigation-link.is-active > .vc-account__nav-link,
.vc-account__nav-link[aria-current="page"] {
	background: var(--brand);
	color: var(--cta-ink);
}
.woocommerce-MyAccount-navigation-link.is-active > .vc-account__nav-link .vc-account__nav-ico,
.vc-account__nav-link[aria-current="page"] .vc-account__nav-ico {
	color: var(--cta-ink);
}
/* Cerrar sesión: matiz de alerta suave al hover, para diferenciar. */
.woocommerce-MyAccount-navigation-link--customer-logout > .vc-account__nav-link:hover {
	color: var(--error);
	background: var(--error-soft);
}

/* ============================ 3. CONTENIDO ============================== */
.vc-account__content > h2,
.vc-account__panel-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 var(--sp-4);
}
.vc-account__content p { max-width: 70ch; }
.vc-account__panel { padding: clamp(var(--sp-4), 4vw, var(--sp-6)); }

/* ============================ 4. DASHBOARD ============================== */
/* myaccount/dashboard.php: .vc-account__greeting (+ __hello + __sub) y
   .vc-account__shortcuts con tarjetas a.vc-account__shortcut.vc-panel. */
.vc-account__greeting { margin-bottom: var(--sp-6); }
.vc-account__hello {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	color: var(--ink);
	line-height: var(--lh-tight);
	margin: 0;
}
.vc-account__sub { margin: var(--sp-2) 0 0; color: var(--ink-2); }
.vc-account__sub a {
	color: var(--brand-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vc-account__shortcuts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}
@media (min-width: 640px) {
	.vc-account__shortcuts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.vc-account__shortcut {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	color: var(--ink);
	text-decoration: none;
}
.vc-account__shortcut:hover {
	border-color: var(--brand);
	color: var(--ink);
}
.vc-account__shortcut:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}
.vc-account__shortcut-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--brand-soft);
	color: var(--brand-strong);
}
.vc-account__shortcut-ico svg { width: 24px; height: 24px; }
.vc-account__shortcut-text { min-width: 0; }
.vc-account__shortcut-text b {
	display: block;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0.15rem;
}
.vc-account__shortcut-text span {
	font-size: var(--fs-sm);
	color: var(--ink-2);
}

/* ============================ 5. TABLA DE PEDIDOS ======================= */
/* myaccount/orders.php: table.shop_table.vc-account__table (celdas con
   data-title; el número de pedido es <th scope="row">).

   FIX woo-account.css:244 — mobile-first: tarjetas apiladas por DEFAULT;
   tabla real recién en ≥880px. SIN franja rota intermedia.

   Los selectores suman .shop_table: el core llega a (0,2,1) en la tabla
   (borde + radius + collapse separate), (0,2,2) en th/td y (0,2,3) en
   tbody th (font-weight 700 + border-top sobre el número de pedido) — el
   body class solo (0,2,x) no alcanzaba; con (0,3,x) el tema gana siempre. */

/* --- Base (stacked): cada <tr> es una tarjeta; cada celda una fila
       etiqueta ↔ valor (la etiqueta sale de data-title). --- */
.woocommerce-account .vc-account__table.shop_table {
	display: block;
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: var(--fs-sm);
	margin: 0;
}
.woocommerce-account .vc-account__table.shop_table thead { display: none; }
.woocommerce-account .vc-account__table.shop_table tbody { display: block; width: 100%; }
.woocommerce-account .vc-account__table.shop_table tbody tr {
	display: block;
	margin: 0 0 var(--sp-3);
	padding: var(--sp-1) 0;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}
.woocommerce-account .vc-account__table.shop_table tbody th,
.woocommerce-account .vc-account__table.shop_table tbody td {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	width: auto;
	padding: var(--sp-3) var(--sp-4);
	border: 0;
	border-bottom: var(--border-w) dashed var(--line);
	background: transparent;
	color: var(--ink-2);
	text-align: right;
	font-weight: 400;
	line-height: var(--lh-snug);
}
.woocommerce-account .vc-account__table.shop_table tbody tr > :last-child { border-bottom: 0; }
.woocommerce-account .vc-account__table.shop_table tbody th::before,
.woocommerce-account .vc-account__table.shop_table tbody td::before {
	content: attr(data-title);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
}
/* Acciones: solo los botones, alineados a la derecha, sin etiqueta. */
.woocommerce-account .vc-account__table.shop_table .woocommerce-orders-table__cell-order-actions::before {
	display: none;
}
.woocommerce-account .vc-account__table.shop_table .woocommerce-orders-table__cell-order-actions {
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* --- ≥880px: tabla real. --- */
@media (min-width: 880px) {
	.woocommerce-account .vc-account__table.shop_table {
		display: table;
		border: var(--border-w) solid var(--line);
		border-radius: var(--radius-card);
		overflow: hidden;
		background: var(--surface-raised);
	}
	.woocommerce-account .vc-account__table.shop_table thead { display: table-header-group; }
	.woocommerce-account .vc-account__table.shop_table tbody { display: table-row-group; }
	.woocommerce-account .vc-account__table.shop_table tbody tr {
		display: table-row;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.woocommerce-account .vc-account__table.shop_table thead th {
		display: table-cell;
		text-align: left;
		font-family: var(--font-sans);
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-3);
		background: var(--surface-2);
		padding: var(--sp-3) var(--sp-4);
		border: 0;
		border-bottom: var(--border-w) solid var(--line);
	}
	.woocommerce-account .vc-account__table.shop_table tbody th,
	.woocommerce-account .vc-account__table.shop_table tbody td {
		display: table-cell;
		padding: var(--sp-3) var(--sp-4);
		border: 0;
		border-bottom: var(--border-w) solid var(--line);
		text-align: left;
		vertical-align: middle;
	}
	.woocommerce-account .vc-account__table.shop_table tbody tr:last-child th,
	.woocommerce-account .vc-account__table.shop_table tbody tr:last-child td { border-bottom: 0; }
	.woocommerce-account .vc-account__table.shop_table tbody th::before,
	.woocommerce-account .vc-account__table.shop_table tbody td::before { content: none; }
	.woocommerce-account .vc-account__table.shop_table tbody tr:hover th,
	.woocommerce-account .vc-account__table.shop_table tbody tr:hover td { background: var(--surface-2); }
	/* Sin nowrap en la celda: con 2-3 acciones y la columna angosta del grid
	   de cuenta en ~880px, los botones envuelven en vez de desbordar (el
	   nowrap queda en cada botón para que no se parta el rótulo). */
	.woocommerce-account .vc-account__table.shop_table .woocommerce-orders-table__cell-order-actions {
		display: table-cell;
		text-align: right;
	}
	.woocommerce-account .vc-account__table.shop_table .woocommerce-orders-table__cell-order-actions .vc-btn {
		margin-left: var(--sp-2);
		white-space: nowrap;
	}
}

/* Links dentro de la tabla (número de pedido). */
.woocommerce-account .vc-account__table.shop_table a:not(.vc-btn) {
	color: var(--brand-strong);
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-account .vc-account__table.shop_table a:not(.vc-btn):hover { text-decoration: underline; }
/* Importes alineados en columna. */
.woocommerce-account .vc-account__table.shop_table .woocommerce-Price-amount {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ============================ 6. ESTADOS DE PEDIDO ====================== */
/* Pill .vc-account__status--{estado} (orders.php y view-order.php). Texto
   siempre en --ink sobre fondos soft: contraste AA por contrato. */
.vc-account__status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.28rem 0.65rem;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--ink-2);
	border: var(--border-w) solid var(--line);
	white-space: nowrap;
}
mark.vc-account__status { background: var(--surface-2); }
.vc-account__status--completed {
	background: var(--ok-soft);
	color: var(--ink);
	border-color: transparent;
}
.vc-account__status--processing,
.vc-account__status--on-hold {
	background: var(--info-soft);
	color: var(--ink);
	border-color: transparent;
}
.vc-account__status--pending {
	background: var(--warn-soft);
	color: var(--ink);
	border-color: transparent;
}
.vc-account__status--cancelled,
.vc-account__status--failed,
.vc-account__status--refunded {
	background: var(--error-soft);
	color: var(--error);
	border-color: transparent;
}

/* ============================ 7. PAGINACIÓN DE PEDIDOS ================== */
.vc-account__pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}
.vc-account__pagination .woocommerce-button--next { margin-left: auto; }

/* ============================ 8. ESTADO VACÍO =========================== */
/* orders.php sin pedidos: .vc-account__empty.vc-panel (reusa las clases
   woocommerce-message + woocommerce-info del core ⇒ se le quita el look de
   notice). OJO: los notices de §13 vienen DESPUÉS en el archivo con (0,2,0)
   — este panel se define con .vc-panel a (0,3,0) para ganarles por
   especificidad (si no, el vacío se veía como un notice de éxito chico). */
.woocommerce-account .vc-account__empty.vc-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-3);
	padding: clamp(var(--sp-6), 6vw, var(--sp-7));
	margin: 0;
	border-color: var(--line);
	background: var(--surface-raised);
	color: var(--ink);
}
.woocommerce-account .vc-account__empty.vc-panel::before { display: none; }
.vc-account__empty-ico {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-pill);
	background: var(--brand-soft);
	color: var(--brand-strong);
}
.vc-account__empty-ico svg { width: 28px; height: 28px; }
.woocommerce-account .vc-account__empty p { margin: 0; color: var(--ink-2); }

/* ============================ 9. DETALLE DE PEDIDO ====================== */
/* myaccount/view-order.php: p.vc-account__order-meta + notas + el detalle
   que imprime el CORE (section.woocommerce-order-details con
   table.woocommerce-table--order-details + customer-details). */
.vc-account__order-meta {
	background: var(--surface-2);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	margin: 0 0 var(--sp-5);
	max-width: none;
}
.vc-account__order-meta mark {
	background: none;
	color: var(--ink);
	font-weight: 600;
}
.vc-account__order-meta mark.vc-account__status { font-weight: 500; }

/* Notas del pedido. */
.vc-account__notes {
	list-style: none;
	padding: 0;
	margin: var(--sp-3) 0 var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.vc-account__note {
	background: var(--surface-raised);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-4);
}
.vc-account__note .meta {
	font-size: var(--fs-xs);
	color: var(--ink-3);
	margin: 0 0 var(--sp-1);
}
.vc-account__note .description p { margin: 0; max-width: none; }
.vc-account__note .clear { display: none; }

/* Detalle: mismo recibo de hairlines que la página de gracias (misma
   mecánica, otro contexto de body class). Cubre order-details y
   order-downloads. */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details { margin-top: var(--sp-6); }
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 var(--sp-4);
}
.woocommerce-account .vc-account__content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: transparent;
	font-size: var(--fs-sm);
	margin: 0;
}
.woocommerce-account .vc-account__content table.shop_table th,
.woocommerce-account .vc-account__content table.shop_table td {
	background: transparent;
	border: 0;
	border-bottom: var(--border-w) solid var(--line);
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	vertical-align: top;
	line-height: var(--lh-snug);
}
.woocommerce-account .vc-account__content table.shop_table thead th {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-3);
}
.woocommerce-account .vc-account__content table.shop_table thead th:last-child,
.woocommerce-account .vc-account__content table.shop_table td.product-total,
.woocommerce-account .vc-account__content table.shop_table tfoot td { text-align: right; }
.woocommerce-account .vc-account__content table.shop_table tfoot th {
	font-weight: 500;
	color: var(--ink-2);
}
.woocommerce-account .vc-account__content table.shop_table tfoot tr:last-child th,
.woocommerce-account .vc-account__content table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 600;
	color: var(--ink);
}
.woocommerce-account .vc-account__content table.shop_table .product-name a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-account .vc-account__content table.shop_table .product-name a:hover {
	color: var(--brand-strong);
}
.woocommerce-account .vc-account__content table.shop_table .woocommerce-Price-amount {
	font-variant-numeric: lining-nums tabular-nums;
}

/* Direcciones dentro del detalle (clearfix del core anulado — gotcha). */
.woocommerce-account .vc-account__content .woocommerce-columns--addresses::before,
.woocommerce-account .vc-account__content .woocommerce-columns--addresses::after { content: none; }
.woocommerce-account .vc-account__content .woocommerce-columns--addresses {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0;
}
.woocommerce-account .vc-account__content .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
}
.woocommerce-account .vc-account__content .woocommerce-customer-details address {
	font-style: normal;
	padding: clamp(var(--sp-4), 2.5vw, var(--sp-5));
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	line-height: var(--lh-body);
}

/* ============================ 10. DIRECCIONES =========================== */
/* myaccount/my-address.php: .vc-account__addresses > tarjetas
   .vc-account__address-card.vc-panel. */
.vc-account__intro { margin: 0 0 var(--sp-5); color: var(--ink-2); }

.vc-account__addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}
/* Guard del clearfix del core: el wrapper lleva .col2-set.addresses — si un
   plugin re-inyecta woocommerce-layout, sus ::before/::after serían ítems
   fantasma del grid (gotcha conocido; contrato Task 12). */
.vc-account__addresses::before,
.vc-account__addresses::after { content: none; }
@media (min-width: 640px) {
	.vc-account__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Los floats/anchos del core sobre .col2-set .col-1/.col-2 se neutralizan
   (el grid manda). */
.woocommerce-account .vc-account__addresses .vc-account__address-card {
	float: none;
	width: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.vc-account__address-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}
.vc-account__address-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.vc-account__address-edit {
	font-size: var(--fs-sm);
	font-weight: 500;
	flex: none;
	color: var(--brand-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vc-account__address-card address {
	font-style: normal;
	line-height: var(--lh-body);
	color: var(--ink-2);
	font-size: var(--fs-sm);
}

/* ============================ 11. FORMULARIOS =========================== */
/* form-login.php / form-edit-account.php / form-edit-address.php: campos
   propios con .vc-field/.vc-input (components.css); acá el esqueleto. */
.vc-account__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.vc-account__form .form-row { margin: 0; padding: 0; width: auto; float: none; }

.vc-account__form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}
@media (min-width: 640px) {
	.vc-account__form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vc-account__form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}
.vc-account__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	margin: 0;
	cursor: pointer;
}
.vc-account__remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--brand);
}
.vc-account__lost { margin: 0; font-size: var(--fs-sm); }
.vc-account__lost a {
	color: var(--brand-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vc-account__hint {
	font-size: var(--fs-sm);
	color: var(--ink-3);
	margin: 0;
}
.vc-account__hint em { font-style: normal; }
.vc-account .required {
	color: var(--accent-strong);
	border: 0;
	text-decoration: none;
}

/* Fieldset (cambio de contraseña). */
.vc-account__fieldset {
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: 0;
	min-width: 0;
}
.vc-account__legend {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
	padding: 0 var(--sp-2);
}

/* Grilla del form de dirección (woocommerce_form_field imprime p.form-row
   con form-row-first/last/wide, label + .woocommerce-input-wrapper). */
.vc-account__address-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}
@media (min-width: 640px) {
	.vc-account__address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vc-account__address-grid .form-row-wide { grid-column: 1 / -1; }
}
.woocommerce-account .vc-account__address-grid .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}
.vc-account__address-grid label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
.vc-account__address-grid .woocommerce-input-wrapper { display: block; width: 100%; }
/* Inputs del core (sin clase vc-): receta de .vc-input con tokens; el borde
   activo solo SUMA al anillo global (fix theme.css:316). */
.vc-account__address-grid .input-text,
.vc-account__address-grid select {
	width: 100%;
	padding: var(--sp-3) var(--sp-3);
	background: var(--surface);
	color: var(--ink);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	font: inherit;
	line-height: var(--lh-snug);
}
.vc-account__address-grid .input-text:focus-visible,
.vc-account__address-grid select:focus-visible { border-color: var(--brand); }

/* Select2 (país/provincia). */
.vc-account__address-grid .select2-container .select2-selection {
	min-height: 44px;
	height: auto;
	display: flex;
	align-items: center;
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
}
.vc-account__address-grid .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: var(--lh-snug);
	padding-left: var(--sp-3);
	color: var(--ink);
}
.vc-account__address-grid .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: var(--sp-2);
}
.vc-account__address-grid .select2-container--focus .select2-selection,
.vc-account__address-grid .select2-container--open .select2-selection {
	border-color: var(--brand);
}

/* ============================ 12. LOGIN / REGISTRO ====================== */
/* form-login.php: .vc-account__auth (una card centrada) o
   .vc-account__auth--two (dos columnas si el registro está habilitado).
   Los floats del core sobre .col2-set .col-1/.col-2 se neutralizan. */
.vc-account__auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(var(--sp-4), 4vw, var(--sp-6));
	max-width: 520px;
	margin-inline: auto;
}
/* Guard del clearfix del core: la variante --two lleva .col2-set — si un
   plugin re-inyecta woocommerce-layout, sus ::before/::after serían ítems
   fantasma del grid (gotcha conocido; contrato Task 12). */
.vc-account__auth::before,
.vc-account__auth::after { content: none; }
.vc-account__auth--two { max-width: none; }
@media (min-width: 880px) {
	.vc-account__auth--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}
.woocommerce-account .vc-account__auth .vc-account__auth-col {
	float: none;
	width: auto;
	min-width: 0;
}
.vc-account__auth-card {
	height: 100%;
	padding: clamp(var(--sp-5), 4vw, var(--sp-6));
}
.vc-account__auth-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 var(--sp-5);
}

/* ============================ 13. NOTICES EN CUENTA ===================== */
/* Mismo tratamiento que carrito/checkout, scope .woocommerce-account. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	position: static;
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: var(--border-w) solid var(--line);
	border-top-width: var(--border-w);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	color: var(--ink);
	font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { display: none; }
.woocommerce-account .woocommerce-message {
	border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
	background: var(--ok-soft);
}
.woocommerce-account .woocommerce-error {
	border-color: color-mix(in srgb, var(--error) 35%, var(--line));
	background: var(--error-soft);
	color: var(--error);
}
.woocommerce-account .woocommerce-error li { margin: 0; }
.woocommerce-account .woocommerce-error li + li { margin-top: var(--sp-2); }
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a { font-weight: 500; }
/* El estado vacío de pedidos reusa .woocommerce-message/.woocommerce-info:
   §8 está ANTES en el archivo, así que su look se impone por especificidad
   (.vc-account__empty.vc-panel, (0,3,0) > (0,2,0) de estos notices). */

/* ============================ 13b. BOTONES .vc-btn SOBRE WC CORE ======== */
/* Réplica del bloque §13 de core/shop.css (que NO carga acá) scopeada con
   .woocommerce-account. El wrapper del shortcode imprime
   <div class="woocommerce">, así que .woocommerce a.button (0,2,1) del core
   pintaba de gris las acciones de pedidos, la paginación, el CTA del estado
   vacío y los submits de login/registro (button.button). MISMOS tokens que
   components.css/shop.css §13: cero drift. Las variantes llevan
   .vc-btn.vc-btn--x (0,4,1) para ganarle también al bloque base .alt. */
.woocommerce-account a.button.vc-btn,
.woocommerce-account button.button.vc-btn,
.woocommerce-account input.button.vc-btn,
.woocommerce-account a.button.alt.vc-btn,
.woocommerce-account button.button.alt.vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	background: var(--cta-bg);
	color: var(--cta-ink);
	border: var(--border-w) solid transparent;
	border-radius: var(--radius-pill);
}
.woocommerce-account a.button.vc-btn:hover,
.woocommerce-account button.button.vc-btn:hover,
.woocommerce-account input.button.vc-btn:hover,
.woocommerce-account a.button.alt.vc-btn:hover,
.woocommerce-account button.button.alt.vc-btn:hover {
	background: var(--cta-bg-hover);
	color: var(--cta-ink);
}
.woocommerce-account a.button.vc-btn:focus-visible,
.woocommerce-account button.button.vc-btn:focus-visible,
.woocommerce-account input.button.vc-btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}
/* Variante fantasma. */
.woocommerce-account a.button.vc-btn.vc-btn--ghost,
.woocommerce-account button.button.vc-btn.vc-btn--ghost,
.woocommerce-account input.button.vc-btn.vc-btn--ghost {
	background: transparent;
	color: var(--brand-strong);
	border-color: var(--brand);
}
.woocommerce-account a.button.vc-btn.vc-btn--ghost:hover,
.woocommerce-account button.button.vc-btn.vc-btn--ghost:hover,
.woocommerce-account input.button.vc-btn.vc-btn--ghost:hover {
	background: var(--brand);
	color: var(--cta-ink);
}
/* Tamaños / block. */
.woocommerce-account a.button.vc-btn.vc-btn--sm,
.woocommerce-account button.button.vc-btn.vc-btn--sm,
.woocommerce-account input.button.vc-btn.vc-btn--sm { padding: 0.6rem 1rem; font-size: var(--fs-xs); }
.woocommerce-account a.button.vc-btn.vc-btn--lg,
.woocommerce-account button.button.vc-btn.vc-btn--lg { padding: 1rem 1.8rem; font-size: var(--fs-body); min-height: 52px; }
.woocommerce-account a.button.vc-btn.vc-btn--block,
.woocommerce-account button.button.vc-btn.vc-btn--block { display: flex; width: 100%; }

/* ============================ 14. MOTION ================================ */
/* Todas las transiciones de esta hoja viven acá: con reduce, nada se mueve. */
@media (prefers-reduced-motion: no-preference) {
	.vc-account__nav-link {
		transition: background var(--tr) var(--ease-out), color var(--tr) var(--ease-out);
	}
	.vc-account__nav-ico { transition: color var(--tr) var(--ease-out); }
	.vc-account__shortcut { transition: border-color var(--tr) var(--ease-out); }
	.woocommerce-account .vc-account__table.shop_table tbody th,
	.woocommerce-account .vc-account__table.shop_table tbody td {
		transition: background var(--tr) var(--ease-out);
	}
	.vc-account__address-grid .input-text,
	.vc-account__address-grid select,
	.vc-account__address-grid .select2-container .select2-selection {
		transition: border-color var(--tr) var(--ease-out);
	}
}