/* Cohasa — "Mi cuenta" 100% propia (ver inc/cuenta.php y
   woocommerce/myaccount/*.php). Solo se encola con is_account_page().
   Mobile-first: una columna con menú en pastillas arriba; desde 900px pasa
   a menú lateral sticky (design.md: cortes en 640/900/1180). */

/* --- Layout: menú + contenido --- */
.cuenta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
@media (min-width: 900px) {
	.cuenta {
		grid-template-columns: 260px 1fr;
	}
}

/* --- Menú lateral / pastillas --- */
.cuenta__nav {
	min-width: 0; /* grid item: sin esto, el <ul> con overflow-x:auto de abajo
		nunca llega a scrollear — el item crece al ancho de su contenido
		(min-content) y empuja toda la página a scroll horizontal en vez de
		quedar contenido en su columna del grid. */
	background: var(--color-surface);
	/* --color-line-strong (3:1, WCAG 1.4.11) + sombra: mismo criterio que
	   .spec-table (assets/css/woocommerce.css) — --color-line es casi
	   invisible (1.24:1) y --color-surface es intencionalmente muy cercano
	   a --color-bg, así que la separación real la da la sombra. */
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 16px;
}
@media (min-width: 900px) {
	.cuenta__nav {
		position: sticky;
		top: calc(64px + 16px); /* alto del header sticky + respiro */
	}
}
.cuenta__saludo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-line);
}
.cuenta__saludo-nombre {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
}
.cuenta__saludo-email {
	font-size: 13px;
	color: var(--color-ink-soft);
	overflow-wrap: anywhere;
}
.cuenta__nav ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
	.cuenta__nav ul {
		flex-direction: column;
		overflow-x: visible;
	}
}
.woocommerce-MyAccount-navigation-link {
	list-style: none;
	flex-shrink: 0;
}
.woocommerce-MyAccount-navigation-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--radius);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	color: var(--color-ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
@media (min-width: 900px) {
	.woocommerce-MyAccount-navigation-link a {
		width: 100%;
		border-color: transparent;
		background: transparent;
	}
}
.woocommerce-MyAccount-navigation-link a:hover {
	border-color: var(--color-ink);
}
.woocommerce-MyAccount-navigation-link a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-error);
	border-color: var(--color-error);
}
@media (min-width: 900px) {
	.woocommerce-MyAccount-navigation-link--customer-logout a {
		border-color: transparent;
	}
}

.cuenta__main {
	min-width: 0; /* evita que el contenido (tablas anchas) empuje la grilla */
}

/* --- Tarjeta genérica reusada por el escritorio, direcciones, pedidos --- */
.cuenta-panel {
	background: var(--color-surface);
	/* --color-line-strong (3:1, WCAG 1.4.11) + sombra: mismo criterio que
	   .spec-table (assets/css/woocommerce.css) — --color-line es casi
	   invisible (1.24:1) y --color-surface es intencionalmente muy cercano
	   a --color-bg, así que la separación real la da la sombra. */
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 20px;
}
.cuenta-panel h2 {
	font-family: var(--font-display);
	font-size: 17px;
	margin: 0 0 12px;
}
.cuenta-panel--vacio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* --- Escritorio: saludo + tarjetas de acceso rápido --- */
.cuenta-dashboard__saludo {
	font-size: 15px;
	margin-bottom: 20px;
}
.cuenta-panel__pedido {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.cuenta-panel__pedido-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cuenta-panel__pedido-numero {
	font-weight: 700;
	text-decoration: none;
}
.cuenta-panel__pedido-total {
	font-family: var(--font-mono);
	font-weight: 700;
	margin-left: auto;
}

/* --- Badges de estado de pedido (Cohasa_Cuenta::badge_estado) --- */
.cuenta-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--color-field);
	color: var(--color-ink);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}
.cuenta-badge.status-completed,
.cuenta-badge.status-processing {
	background: color-mix(in srgb, var(--color-ok) 18%, var(--color-field));
	color: var(--color-ok);
}
.cuenta-badge.status-cancelled,
.cuenta-badge.status-failed,
.cuenta-badge.status-refunded {
	background: color-mix(in srgb, var(--color-error) 18%, var(--color-field));
	color: var(--color-error);
}

/* --- Pedidos: tarjetas en vez de tabla --- */
.cuenta-pedidos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.cuenta-pedido {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: var(--color-surface);
	/* --color-line-strong (3:1, WCAG 1.4.11) + sombra: mismo criterio que
	   .spec-table (assets/css/woocommerce.css) — --color-line es casi
	   invisible (1.24:1) y --color-surface es intencionalmente muy cercano
	   a --color-bg, así que la separación real la da la sombra. */
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 16px 20px;
}
.cuenta-pedido__info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cuenta-pedido__numero {
	font-weight: 700;
	text-decoration: none;
}
.cuenta-pedido__resumen {
	color: var(--color-ink-soft);
	font-size: 13.5px;
}
.cuenta-pedido__acciones {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.cuenta-pedido__acciones .btn {
	min-height: 36px;
	padding: 0 14px;
	font-size: 13px;
}
/* Paginación "sin números" de orders.php (Anterior/Siguiente) — mismo trato
   de pill que .woocommerce-pagination (assets/css/pagination.css), acotado
   acá porque solo existe dentro de Mi cuenta. */
.woocommerce-Pagination {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

/* --- Detalle de pedido --- */
.cuenta-orden-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.cuenta-orden-cabecera__info {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.cuenta-orden-cabecera__numero {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
}
.cuenta-timeline {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-left: 2px solid var(--color-line);
}
.cuenta-timeline__item {
	position: relative;
	padding: 0 0 16px 20px;
}
.cuenta-timeline__item::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-ink);
}
.cuenta-timeline__fecha {
	font-size: 12.5px;
	color: var(--color-ink-soft);
	margin: 0 0 4px;
}
.cuenta-timeline__texto {
	font-size: 14px;
}
.cuenta-timeline__texto p:last-child {
	margin-bottom: 0;
}
/* Tabla de detalle (order-details.php, sin override propio): hereda
   table.shop_table de assets/css/woocommerce.css — acá solo el respiro. */
.woocommerce-order-details,
.woocommerce-order-downloads {
	margin-top: 8px;
}
.woocommerce-table--order-details a {
	font-weight: 600;
}
/* Miniatura por línea (woocommerce/order/order-details-item.php, override
   propio) — mismo tratamiento que .cart-line (assets/css/carrito.css):
   thumb cuadrada + nombre/cantidad/meta al lado, en vez de solo texto. */
.orden-item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.orden-item__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	background: var(--color-field);
	overflow: hidden;
}
.orden-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.orden-item__body { min-width: 0; }

/* --- Direcciones --- */
.cuenta-addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) {
	.cuenta-addresses--dos-columnas {
		grid-template-columns: 1fr 1fr;
	}
}
.cuenta-address {
	background: var(--color-surface);
	/* --color-line-strong (3:1, WCAG 1.4.11) + sombra: mismo criterio que
	   .spec-table (assets/css/woocommerce.css) — --color-line es casi
	   invisible (1.24:1) y --color-surface es intencionalmente muy cercano
	   a --color-bg, así que la separación real la da la sombra. */
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 20px;
}
.cuenta-address__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.cuenta-address__title h2 {
	font-family: var(--font-display);
	font-size: 17px;
	margin: 0;
}
.cuenta-address__title .btn {
	min-height: 36px;
	padding: 0 14px;
	font-size: 13px;
}
.cuenta-address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink-soft);
}

/* --- Login / registro / recuperar contraseña --- */
.cuenta-auth {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 420px;
	margin: 0 auto;
}
@media (min-width: 900px) {
	.cuenta-auth--dos-columnas {
		grid-template-columns: 1fr 1fr;
		max-width: 760px;
	}
}
.cuenta-auth-card {
	background: var(--color-surface);
	/* --color-line-strong (3:1, WCAG 1.4.11) + sombra: mismo criterio que
	   .spec-table (assets/css/woocommerce.css) — --color-line es casi
	   invisible (1.24:1) y --color-surface es intencionalmente muy cercano
	   a --color-bg, así que la separación real la da la sombra. */
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 24px;
}
.cuenta-auth-card h2 {
	font-family: var(--font-display);
	font-size: 19px;
	margin: 0 0 16px;
}
.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.woocommerce-LostPassword {
	margin-top: 4px;
	font-size: 13.5px;
}
.woocommerce-LostPassword a {
	font-weight: 600;
}

/* --- Datos de cuenta / editar dirección: formulario dentro de tarjeta --- */
.cuenta-panel form .woocommerce-form-row {
	margin-bottom: 16px;
}

/* Datos de la cuenta: 2 columnas desde tablet (mismo patrón que la grilla de
   checkout.css). Los --first/--last de woocommerce.css (inline-block 48%) se
   neutralizan acá porque siguen usándolos form-reset-password. */
@media (min-width: 640px) {
	.cuenta-panel .edit-account,
	.cuenta-panel .edit-account fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
	}
	.cuenta-panel .edit-account .form-row {
		width: auto;
		margin-right: 0;
	}
	.cuenta-panel .edit-account .clear { display: none; }
	.cuenta-panel .edit-account > :not(.form-row),
	.cuenta-panel .edit-account fieldset legend,
	.cuenta-panel .edit-account #password_current_field,
	.cuenta-panel .edit-account p:has(#password_current) { grid-column: 1 / -1; }
}