/**
 * Mi cuenta: acceso, registro y panel del cliente.
 */

/* Cabecera fina (compartida con carrito/checkout, pero caja.css no se carga
   aquí, así que se define también). */
.caja-cabecera {
	padding-block: var(--e-3) var(--e-2);
	border-bottom: 1px solid var(--borde);
	margin-bottom: var(--e-5);
}

.caja-cabecera .migas {
	padding-block: 0 var(--e-1);
}

.caja-cabecera__titulo {
	font-size: var(--t-l);
	margin: 0;
}

.cuenta-envoltorio {
	padding-bottom: var(--e-8);
}

/* ------------------------------------------------------- Acceso / registro */

.cuenta-acceso {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: stretch;
	padding-block: var(--e-7) var(--e-9);
}

@media (max-width: 900px) {
	.cuenta-acceso {
		grid-template-columns: 1fr;
	}
}

/* Panel de bienvenida, en tinta con acento oro. */
.cuenta-bienvenida {
	background: var(--tinta);
	color: var(--crema);
	border-radius: var(--radio-g);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cuenta-bienvenida .rotulo {
	color: var(--oro);
}

.cuenta-bienvenida__titulo {
	color: var(--blanco);
	font-size: var(--t-xl);
	margin-bottom: var(--e-4);
}

.cuenta-bienvenida__texto {
	color: rgb(255 255 255 / 82%);
	line-height: 1.7;
	margin-bottom: var(--e-6);
}

.cuenta-bienvenida__ventajas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--e-4);
}

.cuenta-bienvenida__ventajas li {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	margin: 0;
	font-size: var(--t-s);
}

.cuenta-bienvenida__ventajas svg {
	color: var(--oro);
	flex-shrink: 0;
}

/* Columna de formularios */
.cuenta-formularios {
	display: grid;
	gap: var(--e-5);
	align-content: start;
}

.cuenta-tarjeta {
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.cuenta-tarjeta--registro {
	background: var(--crema);
}

.cuenta-tarjeta__titulo {
	font-size: var(--t-l);
	margin-bottom: var(--e-5);
}

.cuenta-acceso .form-row {
	margin-bottom: var(--e-4);
}

.cuenta-acceso label {
	margin-bottom: var(--e-2);
}

.cuenta-formularios__accion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	flex-wrap: wrap;
}

.cuenta-formularios__accion .boton {
	order: 2;
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-s);
	font-weight: 400;
	margin: 0;
}

.woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	accent-color: var(--marca);
}

.cuenta-acceso .lost_password {
	margin: var(--e-3) 0 0;
	font-size: var(--t-s);
}

.cuenta-acceso .lost_password a {
	color: var(--tinta-suave);
}

.cuenta-acceso .lost_password a:hover {
	color: var(--marca);
}

/* --------------------------------------------------- Panel del cliente */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
	padding-bottom: var(--e-8);
}

/*
 * WooCommerce imprime un <div class="woocommerce-notices-wrapper"> (a menudo
 * vacío) como PRIMER hijo. Sin esto ocupaba la primera celda del grid y
 * descolocaba la navegación y el contenido. Se hace que ocupe todo el ancho.
 */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

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

/* La página de acceso (sin sesión) no lleva rejilla de dos columnas. */
.woocommerce-account .woocommerce:has(.cuenta-acceso) {
	display: block;
	padding-bottom: 0;
}

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

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
	}
}

/* Navegación lateral */
.cuenta-nav {
	position: sticky;
	top: calc(var(--cabecera) + 1.5rem);
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	padding: var(--e-3);
}

@media (max-width: 860px) {
	.cuenta-nav {
		position: static;
	}
}

.cuenta-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cuenta-nav li {
	margin: 0;
}

.cuenta-nav a {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3) var(--e-4);
	border-radius: var(--radio-m);
	color: var(--tinta-media);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--t-s);
	transition: background var(--transicion), color var(--transicion);
}

.cuenta-nav a svg {
	color: var(--marca);
	flex-shrink: 0;
}

.cuenta-nav a:hover {
	background: var(--crema);
	color: var(--tinta);
}

.cuenta-nav .is-active a {
	background: var(--marca);
	color: var(--blanco);
}

.cuenta-nav .is-active a svg {
	color: var(--blanco);
}

/* Contenido */
.woocommerce-MyAccount-content {
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: var(--t-l);
	margin-bottom: var(--e-4);
}

.woocommerce-MyAccount-content p {
	line-height: 1.7;
}

.woocommerce-MyAccount-content a:not(.button):not(.boton) {
	color: var(--marca-oscura);
	font-weight: 600;
}

/* Tabla de pedidos */
.woocommerce-orders-table,
.woocommerce-table,
.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-s);
	margin-top: var(--e-4);
}

.woocommerce-orders-table th,
.woocommerce-table th,
.shop_table th {
	text-align: left;
	font-weight: 700;
	padding: var(--e-3);
	border-bottom: 2px solid var(--borde);
}

.woocommerce-orders-table td,
.woocommerce-table td,
.shop_table td {
	padding: var(--e-3);
	border-bottom: 1px solid var(--borde);
	vertical-align: middle;
}

/* Botones de WooCommerce que no lleven la clase del tema */
.woocommerce-MyAccount-content .button,
.woocommerce-EditAccountForm .button,
.woocommerce-Address .edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: 0.7rem 1.4rem;
	background: var(--marca);
	color: var(--blanco);
	border: 1px solid var(--marca);
	border-radius: var(--radio);
	font-size: var(--t-s);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--transicion);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-Address .edit:hover {
	background: var(--marca-oscura);
	color: var(--blanco);
}

/* Bloque de direcciones */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--e-5);
	margin-top: var(--e-4);
}

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

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--tinta-media);
	padding: var(--e-4);
	background: var(--crema);
	border-radius: var(--radio-m);
	margin-top: var(--e-3);
}

/* Avisos de WooCommerce dentro de la cuenta */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	border-radius: var(--radio-m);
	border-left: 3px solid var(--marca);
	background: var(--crema);
	padding: var(--e-4) var(--e-5);
	margin-bottom: var(--e-5);
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--rojo);
}