/**
 * Área de cliente: bienvenida, pedidos, favoritos y «Mis Datos».
 *
 * WooCommerce trae su propio CSS para «Mi cuenta» (tablas con bordes claros,
 * botones redondeados color lavanda). Acá se lo re-viste con los tokens de la
 * marca: fondo oscuro, bordes rectos, verde neón y las tipografías del sitio.
 *
 * Los selectores nativos (`.woocommerce-MyAccount-*`) se conservan y se pisan
 * en vez de eliminarse: así los endpoints que no re-estilizamos uno por uno
 * (descargas, métodos de pago, editar cuenta) heredan igual la identidad.
 */

/* =========================================================================
   BOTÓN COMÚN DEL ÁREA DE CLIENTE
   Blanco en reposo → verde con texto blanco al pasar el mouse, igual que las
   tarjetas de producto de la tienda.
   ========================================================================= */

.woocommerce-account .hbg-boton,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding-inline: var(--hbg-e5);
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 0;
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            color var(--hbg-transicion);
}

.woocommerce-account .hbg-boton:hover,
.woocommerce-account .hbg-boton:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

.woocommerce-account .hbg-boton--fantasma {
	background: transparent;
	border-color: var(--hbg-borde-fuerte);
	color: var(--hbg-texto-suave);
}

.woocommerce-account .hbg-boton--fantasma:hover,
.woocommerce-account .hbg-boton--fantasma:focus-visible {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

/* =========================================================================
   ESTRUCTURA: MENÚ LATERAL + CONTENIDO
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/*
 * El clearfix de WooCommerce rompe la grilla.
 *
 * `.woocommerce::before/::after { content:" "; display:table }` es un clearfix
 * pensado para el layout con floats. Al pasar el contenedor a `display: grid`
 * esos dos pseudoelementos se convierten en ÍTEMS DE GRILLA y corren todo un
 * lugar: medido en el navegador, el menú caía en fila 1 / columna 2 (904px de
 * ancho) y el contenido en fila 2 / columna 1 (264px), es decir invertidos y
 * apilados. Con grid el clearfix ya no hace falta.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-account-container,
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: var(--hbg-sidebar) minmax(0, 1fr);
		align-items: start;
		gap: var(--hbg-e6);
	}

	/* Colocación explícita: no depende del orden ni de ítems inesperados. */
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 2;
	}

	/* Los avisos de WooCommerce van arriba de todo, cruzando las dos columnas. */
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--hbg-e3) var(--hbg-e4);
	border-inline-start: 3px solid transparent;
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color var(--hbg-transicion),
	            color var(--hbg-transicion),
	            border-color var(--hbg-transicion);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hbg-superficie-2);
	color: var(--hbg-texto);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--hbg-superficie-2);
	border-inline-start-color: var(--hbg-neon);
	color: var(--hbg-neon);
	font-weight: 700;
}

/* Cerrar sesión, separado del resto. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	border-top: 1px solid var(--hbg-borde);
	color: var(--hbg-texto-tenue);
}

/* =========================================================================
   BIENVENIDA
   ========================================================================= */

.hbg-bienvenida {
	display: flex;
	align-items: center;
	gap: var(--hbg-e5);
	padding: var(--hbg-e6);
	margin-bottom: var(--hbg-e6);
	background:
		radial-gradient(circle at 100% 0%, rgba(57, 255, 20, 0.14), transparent 60%),
		var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-inline-start: 3px solid var(--hbg-neon);
}

.hbg-bienvenida__foto {
	flex: 0 0 auto;
}

.hbg-bienvenida__foto img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--hbg-neon);
}

.hbg-bienvenida__hola {
	margin: 0;
	color: var(--hbg-texto-suave);
	font-size: 1rem;
}

.hbg-bienvenida__hola strong {
	color: var(--hbg-neon);
}

.hbg-bienvenida__pregunta {
	margin: var(--hbg-e1) 0 var(--hbg-e2);
	font-family: var(--hbg-fuente-titulo);
	font-size: clamp(1.3rem, 3.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--hbg-texto);
	text-shadow: 0 0 22px rgba(57, 255, 20, 0.18);
}

.hbg-bienvenida__pie {
	margin: 0;
	color: var(--hbg-texto-tenue);
	font-size: 0.82rem;
}

.hbg-bienvenida__pie a {
	color: var(--hbg-texto-suave);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hbg-bienvenida__pie a:hover {
	color: var(--hbg-neon);
}

@media (max-width: 600px) {
	.hbg-bienvenida {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--hbg-e5);
		gap: var(--hbg-e4);
	}
}

/* ------------------------------- accesos ------------------------------- */

.hbg-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--hbg-e4);
}

.hbg-acceso {
	display: flex;
	flex-direction: column;
	gap: var(--hbg-e2);
	padding: var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	color: var(--hbg-texto);
	text-decoration: none;
	transition: border-color var(--hbg-transicion),
	            background-color var(--hbg-transicion),
	            transform var(--hbg-transicion);
}

.hbg-acceso:hover,
.hbg-acceso:focus-visible {
	background: var(--hbg-superficie-2);
	border-color: var(--hbg-neon);
	transform: translateY(-3px);
}

.hbg-acceso svg {
	color: var(--hbg-neon);
}

.hbg-acceso__nombre {
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.1rem;
	font-weight: 700;
}

.hbg-acceso__pie {
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.hbg-acceso:hover,
	.hbg-acceso:focus-visible {
		transform: none;
	}
}

/* =========================================================================
   PEDIDOS
   ========================================================================= */

.hbg-pedidos {
	display: grid;
	gap: var(--hbg-e5);
}

.hbg-pedido {
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	transition: border-color var(--hbg-transicion);
}

.hbg-pedido:hover {
	border-color: var(--hbg-borde-fuerte);
}

.hbg-pedido__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hbg-e3);
	padding: var(--hbg-e4) var(--hbg-e5);
	border-bottom: 1px solid var(--hbg-borde);
	background: var(--hbg-superficie-2);
}

.hbg-pedido__rotulo {
	display: block;
	color: var(--hbg-texto-tenue);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hbg-pedido__numero {
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--hbg-texto);
	text-decoration: none;
}

.hbg-pedido__numero:hover {
	color: var(--hbg-neon);
}

.hbg-pedido__meta {
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
}

.hbg-pedido__fecha {
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
}

/* ------------------------------- estado -------------------------------- */

/*
 * Cada estado tiene su color, pero el nombre va SIEMPRE escrito al lado: el
 * color solo no es información accesible para quien no distingue matices.
 */
.hbg-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px var(--hbg-e3);
	border: 1px solid currentColor;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hbg-texto-tenue);
}

.hbg-estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.hbg-estado--completed  { color: var(--hbg-neon); }
.hbg-estado--processing { color: var(--hbg-lima); }
.hbg-estado--on-hold,
.hbg-estado--pending    { color: #f5b342; }
.hbg-estado--cancelled,
.hbg-estado--failed     { color: var(--hbg-error); }
.hbg-estado--refunded   { color: var(--hbg-texto-suave); }

/* -------------------------------- items -------------------------------- */

.hbg-pedido__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbg-pedido__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--hbg-e3);
	padding: var(--hbg-e3) var(--hbg-e5);
	border-bottom: 1px solid var(--hbg-borde);
}

.hbg-pedido__item:last-child {
	border-bottom: none;
}

.hbg-pedido__foto img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 0;
}

.hbg-pedido__nombre {
	min-width: 0;
	color: var(--hbg-texto);
	font-size: 0.95rem;
	line-height: 1.35;
}

.hbg-pedido__nombre a {
	color: inherit;
	text-decoration: none;
}

.hbg-pedido__nombre a:hover {
	color: var(--hbg-neon);
}

/* Variaciones que imprime `wc_get_formatted_cart_item_data`. */
.hbg-pedido__nombre .wc-item-meta,
.hbg-pedido__nombre dl.variation {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	color: var(--hbg-texto-tenue);
	font-size: 0.8rem;
}

.hbg-pedido__nombre .wc-item-meta p,
.hbg-pedido__nombre dl.variation dd {
	margin: 0;
	display: inline;
}

.hbg-pedido__cantidad {
	color: var(--hbg-texto-tenue);
	font-size: 0.9rem;
	white-space: nowrap;
}

.hbg-pedido__subtotal {
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.hbg-pedido__item {
		grid-template-columns: 46px minmax(0, 1fr) auto;
		row-gap: 2px;
	}

	.hbg-pedido__foto img {
		width: 46px;
		height: 46px;
	}

	/* El subtotal baja debajo del nombre en vez de comprimir la columna. */
	.hbg-pedido__subtotal {
		grid-column: 2 / -1;
		font-size: 0.9rem;
	}
}

/* --------------------------------- pie --------------------------------- */

.hbg-pedido__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hbg-e3);
	padding: var(--hbg-e4) var(--hbg-e5);
	border-top: 1px solid var(--hbg-borde);
	background: var(--hbg-superficie-2);
}

.hbg-pedido__total strong {
	display: block;
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--hbg-neon);
}

.hbg-pedido__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbg-e2);
}

.hbg-paginacion {
	display: flex;
	justify-content: space-between;
	gap: var(--hbg-e3);
	margin-top: var(--hbg-e5);
}

/* =========================================================================
   ESTADO VACÍO
   ========================================================================= */

.hbg-vacio {
	padding: var(--hbg-e7) var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px dashed var(--hbg-borde-fuerte);
	text-align: center;
}

.hbg-vacio__texto {
	margin: 0 0 var(--hbg-e4);
	color: var(--hbg-texto-suave);
}

/* =========================================================================
   MIS DATOS
   ========================================================================= */

.hbg-datos-cuenta {
	display: grid;
	gap: var(--hbg-e5);
}

.hbg-tarjeta {
	padding: var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
}

.hbg-tarjeta__titulo {
	margin: 0 0 var(--hbg-e4);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--hbg-texto);
}

.hbg-tarjeta__texto {
	margin: 0 0 var(--hbg-e4);
	color: var(--hbg-texto-suave);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* ------------------------------- perfil -------------------------------- */

.hbg-perfil__form {
	display: flex;
	align-items: flex-start;
	gap: var(--hbg-e5);
}

.hbg-perfil__foto img {
	display: block;
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--hbg-neon);
	background: var(--hbg-superficie-2);
}

.hbg-perfil__campos {
	flex: 1 1 auto;
	min-width: 0;
}

.hbg-perfil__ayuda {
	margin: 0 0 var(--hbg-e3);
	color: var(--hbg-texto-tenue);
	font-size: 0.82rem;
	line-height: 1.45;
}

.hbg-perfil__campos input[type="file"] {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-bottom: var(--hbg-e4);
	padding: var(--hbg-e3);
	background: var(--hbg-superficie-2);
	border: 1px dashed var(--hbg-borde-fuerte);
	border-radius: 0;
	color: var(--hbg-texto-suave);
	font-size: 0.85rem;
}

.hbg-perfil__campos input[type="file"]::file-selector-button {
	margin-inline-end: var(--hbg-e3);
	padding: 8px var(--hbg-e4);
	background: var(--hbg-superficie-3);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 0;
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.82rem;
	cursor: pointer;
}

.hbg-perfil__campos input[type="file"]::file-selector-button:hover {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

.hbg-perfil__botones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbg-e2);
}

@media (max-width: 600px) {
	.hbg-perfil__form {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hbg-perfil__botones {
		justify-content: center;
	}
}

/* ----------------------------- direcciones ----------------------------- */

.hbg-direcciones__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--hbg-e4);
}

.hbg-direccion {
	padding: var(--hbg-e4);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde);
}

.hbg-direccion__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hbg-e3);
	margin-bottom: var(--hbg-e3);
	padding-bottom: var(--hbg-e2);
	border-bottom: 1px solid var(--hbg-borde);
}

.hbg-direccion__titulo {
	margin: 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hbg-texto);
}

.hbg-direccion__editar {
	flex: 0 0 auto;
	color: var(--hbg-neon);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hbg-direccion__editar:hover {
	color: #ffffff;
}

.hbg-direccion__cuerpo {
	margin: 0;
	color: var(--hbg-texto-suave);
	font-size: 0.92rem;
	font-style: normal;
	line-height: 1.6;
}

.hbg-direccion__vacia {
	color: var(--hbg-texto-tenue);
	font-style: italic;
}

/* =========================================================================
   FORMULARIOS NATIVOS (editar dirección, editar cuenta, acceso)
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: var(--hbg-e4);
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-form label {
	color: var(--hbg-texto-suave);
	font-size: 0.85rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection {
	width: 100%;
	min-height: 44px;
	padding: var(--hbg-e2) var(--hbg-e3);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 0;
	color: var(--hbg-texto);
	font-size: 0.95rem;
	box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--hbg-neon);
	box-shadow: var(--hbg-glow);
	outline: none;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin-top: var(--hbg-e5);
	padding: var(--hbg-e4);
	border: 1px solid var(--hbg-borde);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding-inline: var(--hbg-e2);
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
}

/* Select2, que WooCommerce usa para país y provincia. */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--hbg-texto);
	line-height: 42px;
}

.woocommerce-account .select2-dropdown {
	background: var(--hbg-superficie-1);
	border-color: var(--hbg-borde-fuerte);
	color: var(--hbg-texto);
}

.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--hbg-neon);
	color: #ffffff;
}

/* =========================================================================
   AVISOS
   ========================================================================= */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	padding: var(--hbg-e4) var(--hbg-e5);
	margin-bottom: var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-inline-start: 3px solid var(--hbg-neon);
	border-radius: 0;
	color: var(--hbg-texto-suave);
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-inline-start-color: var(--hbg-error);
	color: var(--hbg-error);
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
	display: none;
}

/* =========================================================================
   FAVORITOS
   Reutilizan la tarjeta de producto de la tienda tal cual; sólo hace falta
   asegurar que la grilla tenga el mismo aire dentro del área de cliente.
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--hbg-e4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content ul.products::before,
.woocommerce-account .woocommerce-MyAccount-content ul.products::after {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-content ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}