/**
 * Mi cuenta (doc 10, mockup 09).
 *
 * El área nativa de WooCommerce con la piel del sitio: menú lateral en
 * escritorio, tarjetas de cristal y estados de pedido en color. En móvil el
 * menú se convierte en una fila de accesos que se desliza.
 */

.bx-cuenta__portada {
	margin-bottom: var(--bx-e-3);
}

.bx .bx-cuenta__portada-titulo {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 600;
}

/* -------------------------------------------------------- Estructura */

.bx .woocommerce-account .woocommerce {
	display: block;
}

.bx-cuenta {
	display: grid;
	gap: var(--bx-e-3);
}

@media (min-width: 992px) {
	.bx-cuenta {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: var(--bx-e-4);
		align-items: start;
	}
}

/* ------------------------------------------------------- Menú lateral */

.bx .bx-cuenta .bx-cuenta__menu {
	float: none;
	width: 100%;
	margin: 0;
}

/* Hasta escritorio, el menú es una rejilla de botones grandes: en una fila
   que se deslizaba con el dedo, la mitad de los apartados quedaban escondidos
   fuera de la pantalla y había que adivinar que estaban ahí. */
.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 992px) {
	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul {
		display: flex;
		flex-direction: column;
		gap: 4px;
		overflow: visible;
		padding: var(--bx-e-2);
		border: 1px solid var(--bx-panel-borde);
		border-radius: var(--bx-r-l);
		background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		position: sticky;
		top: var(--bx-e-3);
	}
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li {
	margin: 0;
	border: 0;
	/* Los rótulos parten en dos líneas antes que salirse del menú: «Configuración
	   del sitio web» no cabe en una sola en la columna de escritorio, y con
	   `nowrap` se desbordaba por el lado. */
	white-space: normal;
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 96px;
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
	color: var(--bx-texto-2);
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li svg {
	width: 26px;
	height: 26px;
	color: var(--bx-accent);
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--bx-texto);
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li.is-active a {
	border-color: rgba(56, 214, 245, .4);
	background: linear-gradient(180deg, rgba(56, 214, 245, .18), rgba(56, 214, 245, .05));
	color: var(--bx-accent);
}

.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li svg {
	flex: 0 0 auto;
}

/* --------------------------------------------------------- Contenido */

.bx .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
}

.bx-panel-cuenta {
	display: grid;
	gap: var(--bx-e-3);
}

.bx-cuenta__tarjeta {
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.bx-cuenta__saludo {
	display: flex;
	align-items: center;
	gap: var(--bx-e-3);
}

.bx-cuenta__avatar {
	flex: 0 0 auto;
	overflow: hidden;
	width: 64px;
	height: 64px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: 50%;
}

.bx .bx-cuenta__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx .bx-cuenta__hola {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Las tarjetas de cifras. */
.bx-cuenta__cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-cuenta__cifra {
	padding: 0;
}

.bx .bx-cuenta__cifra a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	height: 100%;
	padding: var(--bx-e-2);
	color: var(--bx-texto-2);
	text-decoration: none;
}

.bx .bx-cuenta__cifra a:hover {
	color: var(--bx-texto);
}

.bx-cuenta__cifra svg {
	color: var(--bx-accent);
}

.bx-cuenta__cifra strong {
	color: var(--bx-texto);
	font-family: var(--bx-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
}

.bx-cuenta__cifra span {
	color: var(--bx-texto-3);
	font-size: .78rem;
}

/* Cuando el dato es una palabra y no un número, no hace falta el tamaño de
   titular: si no, "Envío y facturación" se come la tarjeta. */
.bx-cuenta__cifra strong:not(:only-of-type) {
	font-size: 1rem;
}

.bx-cuenta__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin-bottom: var(--bx-e-2);
}

.bx .bx-cuenta__titulo {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.1rem;
	font-weight: 600;
}

.bx-cuenta__cabecera .bx-cuenta__titulo {
	margin: 0;
}

.bx-cuenta__vacio {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-3);
}

/* ------------------------------------------------------- Pedidos */

.bx-pedidos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}


/* La tarjeta va en dos columnas: a la izquierda lo que se lee —foto, número,
   fecha, estado y total— y a la derecha una franja estrecha con el botón, tan
   alta como la tarjeta entera. Así el botón se ve como lo que es, la acción de
   toda la fila, y hay mucho sitio donde tocar. */
.bx-pedido {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

@media (min-width: 560px) {
	.bx-pedido {
		grid-template-columns: minmax(0, 1fr) 9.5rem;
		align-items: stretch;
	}
}

.bx-pedido__cuerpo {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: var(--bx-e-2);
	padding: var(--bx-e-2);
}

@media (min-width: 560px) {
	.bx-pedido__cuerpo {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: var(--bx-e-3);
	}
}
.bx-pedido__foto {
	overflow: hidden;
	width: 56px;
	height: 56px;
	border-radius: 9px;
	background: rgba(0, 0, 0, .3);
}

.bx .bx-pedido__foto img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx-pedido__datos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bx-pedido__numero {
	color: var(--bx-texto);
	font-size: .92rem;
	font-weight: 600;
}

.bx-pedido__detalle {
	color: var(--bx-texto-3);
	font-size: .78rem;
}


.bx-pedido__total {
	color: var(--bx-texto);
	font-weight: 700;
	white-space: nowrap;
}


/* Los botones, columna propia: cristal encendido, separada por una línea del
   cuerpo de la tarjeta y del alto que tenga la fila. Cuando el pedido lleva
   envío en camino son dos, uno debajo del otro, **a mitad de alto cada uno**:
   la franja mide lo mismo que cuando solo estaba «Ver pedido». */
.bx-pedido__acciones {
	display: grid;
	grid-auto-rows: 1fr;
	height: 100%;
}

.bx .bx-pedido__ver,
.bx .bx-pedido__seguir {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 52px;
	padding: var(--bx-e-2);
	border: 0;
	border-top: 1px solid var(--bx-panel-linea);
	background: linear-gradient(180deg, rgba(56, 214, 245, .14), rgba(56, 214, 245, .05));
	color: var(--bx-accent);
	font-family: var(--bx-ui);
	font-size: .86rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

@media (min-width: 560px) {
	.bx .bx-pedido__ver,
	.bx .bx-pedido__seguir {
		min-height: 0;
		border-top: 0;
		border-left: 1px solid var(--bx-panel-linea);
	}

	/* Con los dos botones, el de abajo se separa del de arriba por su línea. */
	.bx .bx-pedido__seguir {
		border-top: 1px solid var(--bx-panel-linea);
	}
}

.bx .bx-pedido__ver:hover,
.bx .bx-pedido__ver:focus-visible {
	background: linear-gradient(180deg, rgba(56, 214, 245, .26), rgba(56, 214, 245, .1));
	color: var(--bx-texto);
}

/* «Seguir envío» va con el azul de las llamadas a la acción de la casa
   (doc 03, `--bx-cta-fondo`): cuando el paquete está en la calle es lo que se
   viene a pulsar, y tiene que verse desde lejos. */
.bx .bx-pedido__seguir {
	border-top: 1px solid var(--bx-panel-linea);
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .74rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.bx .bx-pedido__seguir:hover,
.bx .bx-pedido__seguir:focus-visible {
	color: var(--bx-cta-texto);
	filter: brightness(1.14);
	box-shadow: inset 0 0 22px rgba(74, 208, 231, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.bx-pedido__ver svg {
	flex: 0 0 auto;
}


/* Estados de pedido, cada uno con su color. */
.bx-estado {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 2px;
	padding: 3px 10px;
	border-radius: var(--bx-r-pill);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bx-estado--completed,
.bx-estado--delivered-cocex {
	background: rgba(58, 166, 106, .18);
	color: #7fdca6;
}

.bx-estado--processing,
.bx-estado--on-hold,
.bx-estado--prepared-cocex {
	background: rgba(211, 168, 95, .18);
	color: var(--bx-gold);
}

.bx-estado--pending,
.bx-estado--inprogress-cocex {
	background: rgba(56, 214, 245, .16);
	color: var(--bx-accent);
}

.bx-estado--cancelled,
.bx-estado--failed,
.bx-estado--refunded,
.bx-estado--cancelled-cocex,
.bx-estado--returned-cocex {
	background: rgba(214, 64, 78, .18);
	color: #ff9aa4;
}

/* El envío: el código de seguimiento y el botón que lleva al localizador de
   Correos. Vive bajo el estado en la tarjeta del listado y en su propia
   tarjeta en el detalle, con la misma pareja código + botón en los dos
   sitios. El código se parte por donde haga falta: son 23 caracteres y en
   móvil no cabe en una línea. */
.bx-envio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 5px;
}

.bx-envio__codigo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--bx-texto-3);
}

.bx-envio__codigo svg {
	flex: 0 0 auto;
	color: var(--bx-gold);
}

.bx-envio__numero {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .74rem;
	letter-spacing: .02em;
	color: var(--bx-texto-2);
	overflow-wrap: anywhere;
}

.bx-envio__bultos {
	color: var(--bx-texto-3);
	font-size: .72rem;
}

/* En el detalle, el mismo par en su tarjeta, uno por bulto. */
.bx-detalle__transportista {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-3);
	font-size: .86rem;
}

.bx-envios {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-envios__linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px var(--bx-e-2);
	margin: 0;
	padding: 10px var(--bx-e-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

.bx-envios__linea .bx-envio__numero {
	font-size: .82rem;
}

.bx .bx-envios__boton,
.bx .woocommerce-MyAccount-content a.bx-envios__boton {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px var(--bx-e-4);
	font-size: .82rem;
}

/* En móvil no se parte el ancho con nadie: el código encima y el botón
   entero debajo, como el resto de acciones de la cuenta. */
@media (max-width: 559px) {
	.bx-envios__linea {
		flex-direction: column;
		align-items: stretch;
	}

	.bx .bx-envios__boton,
	.bx .woocommerce-MyAccount-content a.bx-envios__boton {
		/* El relleno va por dentro: sin esto el botón se sale de la tarjeta. */
		box-sizing: border-box;
		width: 100%;
	}
}


/* --------------------------------------------------- Soporte rápido */

.bx-cuenta__ayuda {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-cuenta__ayuda a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
	color: var(--bx-texto-2);
	text-decoration: none;
}

.bx .bx-cuenta__ayuda a:hover {
	border-color: rgba(56, 214, 245, .4);
	color: var(--bx-texto);
}

.bx-cuenta__ayuda svg {
	flex: 0 0 auto;
	color: var(--bx-accent);
}

.bx-cuenta__ayuda strong {
	display: block;
	color: var(--bx-texto);
	font-size: .9rem;
}

.bx-cuenta__ayuda em {
	color: var(--bx-texto-3);
	font-size: .78rem;
	font-style: normal;
}

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

.bx-acceso {
	display: flex;
	justify-content: center;
	padding: var(--bx-e-4) 0 var(--bx-e-6);
}

.bx-acceso__tarjeta {
	width: min(440px, 100%);
	padding: var(--bx-e-4) var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .55) 0%, var(--bx-panel-fondo) 45%, rgba(3, 12, 22, .6) 100%);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.bx .bx-acceso__titulo {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.35rem;
	font-weight: 600;
	text-align: center;
}

/*
 * Las pestañas son mejora: solo salen cuando hay JavaScript para cambiarlas.
 * Sin él, la tarjeta enseña los dos formularios uno debajo del otro, cada uno
 * con su rótulo, y la tienda se puede usar igual.
 */
.bx-acceso__pestanas {
	display: none;
}

.bx-acceso--js .bx-acceso__pestanas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	margin-bottom: var(--bx-e-3);
	padding: 4px;
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-pill);
	background: rgba(0, 0, 0, .25);
}

.bx .bx-acceso__pestana {
	padding: 10px 12px;
	border: 0;
	border-radius: var(--bx-r-pill);
	background: none;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .86rem;
	font-weight: 700;
	cursor: pointer;
}

.bx .bx-acceso__pestana--activa {
	background: linear-gradient(180deg, rgba(56, 214, 245, .24), rgba(56, 214, 245, .08));
	color: var(--bx-accent);
	box-shadow: inset 0 1px 0 rgba(180, 240, 255, .28);
}

.bx-acceso--js .bx-acceso__panel--oculto {
	display: none;
}

.bx .bx-acceso__rotulo {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
}

.bx .bx-acceso--js .bx-acceso__rotulo {
	display: none;
}

.bx-acceso:not(.bx-acceso--js) .bx-acceso__panel + .bx-acceso__panel {
	margin-top: var(--bx-e-4);
	padding-top: var(--bx-e-4);
	border-top: 1px solid var(--bx-panel-linea);
}

/* Los campos llenan la tarjeta: el tema padre reparte los `form-row-first` y
   `form-row-last` al 47 % pensando en su maqueta de dos mitades, y aquí, en una
   columna de 440 px, se quedaban a medias. */
.bx-acceso .form-row {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--bx-e-2);
	margin-right: 0;
}

/* El aviso que acompaña a un formulario suelto —recuperar la contraseña, o el
   acceso al pedido de un cliente—: el mismo cuerpo que el resto de textos de
   apoyo de la cuenta. */
.bx-acceso__texto {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-texto-2);
	font-size: .92rem;
	line-height: 1.55;
}

.bx-acceso__pie {
	margin: var(--bx-e-2) 0 0;
	text-align: center;
}

/* Las etiquetas y el botón son los mismos de los demás formularios de la
   cuenta —«Detalles de la cuenta», «Direcciones», «Restablecer contraseña»—:
   el cuerpo de letra sale de `.bx label` y aquí solo se coloca. */
.bx-acceso label {
	display: block;
	margin-bottom: 5px;
	color: var(--bx-texto-2);
	font-weight: 600;
}

.bx-acceso__acciones {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.bx-acceso .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 500;
}

.bx .bx-acceso__olvido {
	color: var(--bx-accent);
	font-size: .82rem;
}

.bx .bx-acceso__enviar {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
	letter-spacing: .08em;
}

.bx-acceso__aviso {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-3);
	font-size: .84rem;
}

/* -------------------------------- Formularios nativos de la cuenta */

.bx .woocommerce-EditAccountForm,
.bx .woocommerce-address-fields,
.bx .woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
}

.bx .woocommerce-EditAccountForm fieldset {
	margin: var(--bx-e-2) 0 0;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .03);
}

.bx .woocommerce-EditAccountForm legend {
	padding: 0 8px;
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Las dos tarjetas de direcciones. */
.bx .woocommerce-Addresses,
.bx .u-columns.addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--bx-e-3);
}

.bx .woocommerce-Address {
	float: none;
	width: 100%;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

/* Título y enlace de cada tarjeta de dirección. En móvil se apilan: ahí el
   enlace llega como texto largo —«Añadir Dirección de facturación»— y en una
   fila se salía de la tarjeta y de la pantalla. */
.bx .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: var(--bx-e-2);
}

.bx .woocommerce-Address-title h2,
.bx .woocommerce-Address-title h3 {
	min-width: 0;
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.05rem;
}

.bx .woocommerce-Address address {
	color: var(--bx-texto-2);
	font-style: normal;
	line-height: 1.6;
}

/* La tabla de pedidos nativa, en tarjetas también. */
.bx .woocommerce-orders-table {
	width: 100%;
	border: 0;
	background: none;
}

.bx .woocommerce-orders-table th,
.bx .woocommerce-orders-table td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--bx-panel-linea);
	background: none;
	color: var(--bx-texto-2);
	font-size: .88rem;
}

.bx .woocommerce-orders-table thead th {
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bx .woocommerce-orders-table .button {
	padding: 8px 14px;
	min-height: 0;
	font-size: .74rem;
}

/* Mensajes y avisos dentro de la cuenta. */
.bx .woocommerce-MyAccount-content > .woocommerce-message,
.bx .woocommerce-MyAccount-content > .woocommerce-info {
	margin-bottom: var(--bx-e-3);
}

/* Storefront cuelga su propio icono de cada entrada del menú con ::after, así
   que salían dos por fila: el suyo y el del tema. */
.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a::after,
.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a::before,
.bx .woocommerce-MyAccount-navigation li a::after,
.bx .woocommerce-MyAccount-navigation li a::before {
	display: none;
	content: none;
}

/* En las tarjetas de resumen, el dato grande es para las cifras; cuando lo
   que hay es una palabra, se lee mejor a tamaño de texto. */
.bx-cuenta__cifra--texto strong {
	font-family: var(--bx-ui);
	font-size: 1rem;
	font-weight: 700;
}

/* Las dos tarjetas de direcciones llegan con el ancho y el float del tema
   padre; sin esto salen de distinto tamaño y separadas por un hueco. */
.bx .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses,
.bx .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--bx-e-3);
}

.bx .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.bx .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2,
.bx .woocommerce-MyAccount-content .woocommerce-Address {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* El enlace de la cabecera. Storefront lo convierte en el lápiz —un cuadro de
   1em con el texto escondido— solo a partir de 768 px; por debajo llega como
   texto, y con «Añadir Dirección de facturación» hacen falta dos líneas. */
.bx .woocommerce-Address-title .edit {
	max-width: 100%;
	color: var(--bx-accent);
	font-size: .82rem;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	/* Con el lápiz vuelve a caber en la misma línea que el título. */
	.bx .woocommerce-Address-title {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--bx-e-2);
	}

	.bx .woocommerce-Address-title .edit {
		white-space: nowrap;
	}
}

@media (min-width: 992px) {
	/* En escritorio el menú vuelve a ser una lista vertical, con el icono al
	   lado del texto y sin fondo propio en cada entrada: el panel ya lo tiene. */
	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
		min-height: 0;
		padding: 11px 14px;
		border-color: transparent;
		border-radius: var(--bx-r-s);
		background: none;
		font-size: .9rem;
		text-align: left;
	}

	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li svg {
		width: 18px;
		height: 18px;
		color: currentColor;
	}
}

/* Estado vacío de una sección. */
.bx-cuenta__nada {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bx-e-2);
	padding: var(--bx-e-5) var(--bx-e-3);
	text-align: center;
	color: var(--bx-texto-3);
}

.bx-cuenta__nada svg {
	color: rgba(255, 255, 255, .22);
}

.bx-cuenta__nada p {
	margin: 0;
}

.bx-paginacion {
	display: flex;
	justify-content: center;
	gap: var(--bx-e-2);
	margin-top: var(--bx-e-3);
}

/* Mientras se carga una sección sin recargar la página. */
.bx-cuenta--cargando .woocommerce-MyAccount-content {
	opacity: .45;
	pointer-events: none;
	transition: opacity .18s ease;
}

/* Los formularios de la cuenta ocupan el ancho del contenido; lo que no se
   estira es cada campo, que va en dos columnas. Una linea de campo de 1.100 px
   se lee fatal y el ojo de la contraseña quedaba a un palmo del ultimo
   caracter. */
.bx .woocommerce-EditAccountForm,
.bx .woocommerce-address-fields,
.bx .woocommerce-ResetPassword {
	max-width: none;
}

@media (min-width: 640px) {
	/* Nombre y apellidos, uno al lado del otro. Con rejilla y no con anchos al
	   50 %, que es como lo reparte el tema padre: asi los campos que piden el
	   ancho entero lo piden y ya esta. */
	.bx .woocommerce-EditAccountForm,
	.bx .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bx-e-2);
		align-items: start;
	}

	.bx .woocommerce-EditAccountForm > .form-row-wide,
	.bx .woocommerce-EditAccountForm > fieldset,
	.bx .woocommerce-EditAccountForm > p:last-of-type,
	.bx .woocommerce-address-fields__field-wrapper > .form-row-wide {
		grid-column: 1 / -1;
	}

	.bx .woocommerce-EditAccountForm > .form-row-first,
	.bx .woocommerce-address-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.bx .woocommerce-EditAccountForm > .form-row-last,
	.bx .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

.bx .woocommerce-EditAccountForm fieldset {
	max-width: none;
}

.bx .woocommerce-EditAccountForm em,
.bx .woocommerce-address-fields em {
	display: block;
	margin-top: 4px;
	color: var(--bx-texto-3);
	font-size: .8rem;
	font-style: normal;
}

/* ------------------- Los botones del menú, más grandes y más sueltos

   Iconos mayores dentro de un cuadro más ajustado: antes el icono era
   pequeño y el aire estaba dentro del recuadro, así que los botones se veían
   vacíos y pegados unos a otros. Ahora el aire está entre ellos. */

@media (max-width: 991px) {
	/* Tres por línea: con dos, cada botón se hacía enorme y el menú ocupaba
	   media pantalla antes de llegar al contenido. */
	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	/* Todos los botones del mismo alto, el del rótulo más largo: con rótulos de
	   una y de dos líneas, cada fila medía una cosa y la rejilla se veía
	   descuadrada. Se fija el alto y no se deja al contenido —`grid-auto-rows:
	   1fr` no iguala nada si la rejilla no tiene altura propia, y aquí no la
	   tiene—. */
	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a {
		gap: 6px;
		min-height: 84px;
		height: 100%;
		padding: 10px 6px;
		box-sizing: border-box;
	}

	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li svg {
		/* Sin esto el flex lo encoge y el icono acababa más pequeño de lo que
		   pide, con el texto casi encima. */
		flex: 0 0 auto;
		width: 26px;
		height: 26px;
	}

	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a span {
		max-width: 100%;
		font-size: .76rem;
		line-height: 1.15;
		/* Los rótulos largos parten en dos líneas en vez de salirse. */
		white-space: normal;
		/* Red de seguridad para un rótulo traducido larguísimo: antes de salirse
		   del botón parte por sílabas, y si el idioma no trae reglas de
		   partición, por donde sea. No es la defensa principal —una palabra
		   partida se lee peor—: de eso se encarga el tramo de más abajo. */
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	/* En las pantallas más estrechas —un iPhone en «vista ampliada» se queda en
	   320 px— los botones bajan a 87 px y la palabra «Configuración» medía más
	   que el hueco: se salía por el lado. Con un punto menos de tipo y el
	   margen lateral más estrecho vuelve a caber entera. */
	@media (max-width: 374px) {
		.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a {
			padding: 10px 4px;
		}

		.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li a span {
			font-size: .66rem;
		}
	}

	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li {
		white-space: normal;
	}

	/* Dentro de un apartado, la rejilla se recoge y deja el enlace de volver:
	   con los seis botones encima había que bajar media pantalla para llegar
	   al contenido del apartado.

	   Los selectores llevan el .bx de delante para pesar más que las reglas
	   generales del menú, que también lo llevan: sin él empataban y ganaba la
	   que estuviera más abajo en la hoja. */
	.bx .bx-cuenta--dentro .bx-cuenta__menu.bx-cuenta__menu ul {
		display: none;
	}

	.bx .bx-cuenta--dentro .bx-cuenta__volver {
		display: inline-flex;
	}
}

.bx .bx-cuenta__volver {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-pill);
	background: rgba(255, 255, 255, .05);
	color: var(--bx-texto-2);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
}

.bx .bx-cuenta__volver:hover {
	border-color: rgba(56, 214, 245, .45);
	color: var(--bx-accent);
}

/* La flecha mira a la izquierda, que es a donde lleva. */
.bx-cuenta__volver svg {
	transform: rotate(180deg);
}

/* --------------------------------- Al cambiar de apartado

   Un guiño corto para que se vea que la sección ha cambiado: sin él, con la
   navegación sin recargar, el contenido se sustituía en seco y costaba
   entender que había pasado algo. */

@keyframes bx-cuenta-entra {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.bx-cuenta__entra {
	animation: bx-cuenta-entra .22s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.bx-cuenta__entra {
		animation: none;
	}
}

/* --------------------------------------- Detalle de un pedido

   El mockup 09 no dibuja esta pantalla, así que se monta con el lenguaje del
   resto del sitio: tarjetas de cristal, el estado en su color y las líneas
   como las del carrito. */

.bx-detalle {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-3);
}

.bx .bx-detalle__volver {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	color: var(--bx-texto-3);
	font-size: .86rem;
	text-decoration: none;
}

.bx .bx-detalle__volver:hover {
	color: var(--bx-accent);
}

.bx-detalle__volver svg {
	transform: rotate(180deg);
}

.bx-detalle__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bx-e-2);
}

.bx .bx-detalle__numero {
	margin: 0;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.35rem;
	font-weight: 600;
}

.bx-detalle__fecha {
	margin: 2px 0 0;
	color: var(--bx-texto-3);
	font-size: .86rem;
}

/* ---------------------------------------------- Seguimiento */

.bx-linea-tiempo {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--bx-e-3);
	border-left: 1px solid var(--bx-panel-linea);
}

.bx-linea-tiempo__paso {
	position: relative;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.bx-linea-tiempo__punto {
	position: absolute;
	top: 6px;
	left: calc(-1 * var(--bx-e-3) - 5px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bx-accent);
	box-shadow: 0 0 12px rgba(56, 214, 245, .6);
}

.bx-linea-tiempo__fecha {
	display: block;
	color: var(--bx-texto-3);
	font-size: .76rem;
}

.bx-linea-tiempo__texto,
.bx-linea-tiempo__texto p {
	margin: 2px 0 0;
	color: var(--bx-texto-2);
	font-size: .9rem;
	line-height: 1.45;
}

/* ------------------------------------------ Líneas y totales */


.bx .bx-detalle__nombre a {
	color: inherit;
	text-decoration: none;
}

.bx .bx-detalle__nombre a:hover {
	color: var(--bx-accent);
}

.bx-detalle__cuantos {
	color: var(--bx-texto-3);
	font-weight: 500;
}

/* ------------------------------ Líneas del contenido del pedido

   Se leen como las del carrito: la foto a tamaño de verdad, el nombre, a
   cuánto salía cada unidad y cuánto suma la línea. Las columnas tienen su
   ancho, así que el importe cae junto a la cuenta y no en el filo opuesto del
   panel, que es lo que hacía imposible relacionar producto y precio. */

.bx-detalle__lineas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0 0 var(--bx-e-3);
	padding: 0;
}

.bx-detalle__linea {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"foto datos datos"
		"foto cuenta importe";
	align-items: center;
	gap: 6px var(--bx-e-2);
	padding: var(--bx-e-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

@media (min-width: 640px) {
	/* Con sitio, cada cosa en su columna y una sola fila. */
	.bx-detalle__linea {
		grid-template-columns: 84px minmax(0, 1fr) auto minmax(6rem, auto);
		grid-template-areas: "foto datos cuenta importe";
		gap: var(--bx-e-3);
	}
}

.bx-detalle__foto {
	grid-area: foto;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(0, 0, 0, .3);
}

.bx .bx-detalle__foto img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: 1;
	object-fit: cover;
}

.bx-detalle__datos {
	grid-area: datos;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bx-detalle__nombre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bx-texto);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Cuántos y a cuánto: "3 × 19,95 €". */
.bx-detalle__cuenta {
	grid-area: cuenta;
	color: var(--bx-texto-3);
	font-size: .84rem;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.bx-detalle__cuenta {
		text-align: right;
	}

	/* La cuenta y el importe van juntos al filo derecho: separados por media
	   fila, había que ir y volver con la vista para atar lo uno con lo otro. */
	.bx-detalle__linea {
		column-gap: var(--bx-e-3);
	}
}

.bx-detalle__importe {
	grid-area: importe;
	color: var(--bx-texto);
	font-size: 1rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.bx-detalle__linea .wc-item-meta,
.bx-detalle__linea .wc-item-meta p {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	color: var(--bx-texto-3);
	font-size: .78rem;
}

.bx-detalle__aviso {
	color: var(--bx-texto-3);
	font-size: .8rem;
}

.bx-detalle__importe {
	color: var(--bx-texto);
	font-weight: 700;
	white-space: nowrap;
}

.bx-detalle__totales {
	margin: 0;
	padding-top: var(--bx-e-2);
	border-top: 1px solid var(--bx-panel-linea);
}

.bx-detalle__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin: 0 0 8px;
	color: var(--bx-texto-2);
	font-size: .9rem;
}

.bx-detalle__total dt,
.bx-detalle__total dd {
	margin: 0;
}

.bx-detalle__total dd {
	font-weight: 600;
	text-align: right;
}

.bx-detalle__total--final {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--bx-panel-linea);
	color: var(--bx-texto);
	font-size: 1rem;
}

.bx-detalle__total--final dd {
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.35rem;
}

.bx-detalle__nota {
	margin-top: var(--bx-e-3);
	padding-top: var(--bx-e-2);
	border-top: 1px solid var(--bx-panel-linea);
}

.bx-detalle__nota p {
	margin: 0;
	color: var(--bx-texto-2);
	font-size: .9rem;
}

/* Las direcciones que pinta WooCommerce debajo, con el mismo cristal. */
.bx-cuenta .woocommerce-customer-details {
	max-width: none;
	margin: 0;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .5) 0%, var(--bx-panel-fondo) 55%, rgba(3, 12, 22, .58) 100%);
}

.bx-cuenta .woocommerce-customer-details .woocommerce-column__title {
	font-size: 1rem;
}

/* El desglose no ocupa todo el ancho del panel: con el concepto pegado al
   filo izquierdo y el importe al derecho, había que cruzar mil píxeles con la
   vista para relacionar "Subtotal" con su cifra. Agrupado a la derecha se lee
   de un golpe, y en móvil sigue ocupando lo que haya. */
.bx-detalle__totales {
	width: 100%;
	max-width: 24rem;
	margin-left: auto;
}

/* Y lo que venga después del total —el método de pago— se separa: pegado
   parecía parte de la cifra destacada. */
.bx-detalle__total--final + .bx-detalle__total {
	margin-top: 12px;
	padding-top: 0;
	border-top: 0;
}


/* El subrayado llega de los enlaces del área de cuenta del tema padre, con más
   peso que la regla del botón: en un botón, un texto subrayado desentona. */
.bx a.bx-pedido__ver,
.bx .woocommerce-MyAccount-content a.bx-pedido__ver,
.bx .woocommerce-MyAccount-content a.bx-pedido__ver:hover {
	text-decoration: none;
}

/* Los enlaces del área de cuenta del tema padre van subrayados, y eso alcanza
   a las tarjetas de producto de la sección de favoritos: el nombre y el botón
   salían con raya debajo. Dentro de una tarjeta, no. */
.bx .woocommerce-MyAccount-content .bx-tarjeta a,
.bx .woocommerce-MyAccount-content .bx-tarjeta a:hover,
.bx .woocommerce-MyAccount-content li.product a,
.bx .woocommerce-MyAccount-content li.product a:hover {
	text-decoration: none;
}

@media (max-width: 559px) {
	/* El importe no se queda debajo de la foto, en la columna estrecha: pasa a
	   la de los datos y se alinea a la derecha, que es donde se busca. */
	.bx-pedido__total {
		grid-column: 2;
		text-align: right;
	}
}

/* Las tres contraseñas, una encima de otra en todos los tamaños: se leen en
   fila —la de ahora, la nueva y su confirmación— y así se rellenan. */
.bx .woocommerce-EditAccountForm fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-2);
}

.bx .woocommerce-EditAccountForm fieldset .form-row {
	margin-bottom: 0;
}

/* Dentro de la rejilla, cada campo llena su columna: el tema padre les da un
   47 % pensando en su propia maqueta de dos mitades, y aquí se quedaban a
   medias de su celda. */
.bx .woocommerce-EditAccountForm > .form-row,
.bx .woocommerce-EditAccountForm fieldset .form-row,
.bx .woocommerce-address-fields__field-wrapper > .form-row {
	float: none;
	width: 100%;
	max-width: none;
	margin-right: 0;
}

/* El rótulo grande, cuando cambia de apartado. El velo de manchas y las
   chispas los pone el portal —el mismo de los paneles laterales—, así que aquí
   solo hace falta que el texto no se recorte al enmascararlo y que tenga su
   propia capa mientras dura, para que el navegador no lo repinte entero. */
.bx .bx-cuenta__portada-titulo {
	display: inline-block;
	padding: 2px 6px;
	margin-left: -6px;
}

.bx .bx-cuenta__portada-titulo.bx-magico {
	transform: translateZ(0);
	/* El título no es un panel de cristal: aquí el desenfoque del velo sobra. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ------------------------------------------------------ Favoritos en la cuenta

   La rejilla de favoritos es la misma del listado, pero dentro de Mi cuenta se
   encontraba con dos reglas de Storefront que la estrangulaban:

   - `.storefront-full-width-content .site-main ul.products.columns-3 li.product`
     da a cada tarjeta un `width: 30.43%` con `float`, pensado para su maqueta de
     columnas flotantes. Dentro de una celda de rejilla, ese porcentaje se
     calcula sobre la celda: las tarjetas se quedaban en 70 px de ancho y el
     texto salía en vertical, letra a letra.
   - La regla del tema que ya lo arreglaba en el listado (`.bx ul.products >
     li.product`) tiene menos peso que la de Storefront, así que aquí perdía.

   Se ataja con la misma especificidad y acotado a la cuenta: el listado normal
   no se toca. */
.bx .site-main .woocommerce-MyAccount-content ul.products > li.product {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* La columna de contenido de la cuenta es más estrecha que la de la tienda, así
   que la rejilla se queda en tres y no salta a cuatro: con cuatro, las tarjetas
   bajaban de 230 px y la foto perdía todo el protagonismo. */
@media (min-width: 1280px) {
	.bx .woocommerce-MyAccount-content .bx-listado__resultados ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------ Configuración del sitio web

   Las tres preferencias de navegación, cada una en su caja: la misma casilla
   grande del checkout, que ya es la casilla de la casa para un sí o un no que
   cambia algo de verdad. */

.bx-ajustes__entradilla {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-texto-2);
	font-size: .92rem;
	line-height: 1.55;
}

.bx-ajustes__aviso {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--bx-e-3);
	padding: 10px 14px;
	border: 1px solid rgba(52, 211, 153, .4);
	border-radius: var(--bx-r-m);
	background: rgba(52, 211, 153, .1);
	color: var(--bx-exito);
	font-size: .88rem;
	font-weight: 600;
}

.bx-ajustes__lista {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-ajuste__marco {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 60px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .04);
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.bx .bx-ajuste__marco:hover {
	border-color: rgba(56, 214, 245, .45);
	background: rgba(255, 255, 255, .06);
}

.bx .bx-ajuste__marco:focus-within {
	border-color: var(--bx-accent);
	box-shadow: 0 0 0 3px rgba(56, 214, 245, .22);
}

.bx .bx-ajuste__marco:has(input:checked) {
	border-color: rgba(56, 214, 245, .5);
	background: rgba(56, 214, 245, .08);
}

/* La casilla, la misma de aceptar las condiciones del pago. */
.bx .bx-ajuste__marco input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	float: none;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid rgba(190, 224, 240, .38);
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .06) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bx .bx-ajuste__marco input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 10px;
	width: 8px;
	height: 15px;
	border: solid #eafcff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .bx-ajuste__marco input[type="checkbox"]:checked {
	border-color: var(--bx-cta-borde);
	background: linear-gradient(180deg, rgba(56, 214, 245, .55), rgba(56, 214, 245, .18));
	box-shadow:
		0 0 14px rgba(56, 214, 245, .5),
		inset 0 1px 0 rgba(255, 255, 255, .35);
	animation: bx-acepta .34s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .bx-ajuste__marco input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.bx .bx-ajuste__marco input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 3px;
}

.bx-ajuste__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bx-ajuste__rotulo {
	color: var(--bx-texto);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

.bx-ajuste__ayuda {
	color: var(--bx-texto-3);
	font-size: .84rem;
	font-weight: 400;
	line-height: 1.45;
}

.bx .bx-ajustes__nota {
	margin: var(--bx-e-4) 0 0;
	color: var(--bx-texto-3);
	font-size: .82rem;
	line-height: 1.5;
}

.bx .bx-ajustes__guardar {
	margin-top: var(--bx-e-3);
}

@media (prefers-reduced-motion: reduce) {
	.bx .bx-ajuste__marco input[type="checkbox"]:checked {
		animation: none;
	}
}

/* --------------------------------- Salir, en la cabecera del móvil

   «Cerrar sesión» se llevaba un botón entero de la rejilla, con el mismo peso
   visual que «Mis pedidos», y es lo que menos se usa. En móvil sube a la
   cabecera, a la altura del título y a la derecha; el icono va en rojo —solo el
   icono— para que se distinga de un vistazo sin gritar. En escritorio no
   aparece: allí sigue al final de la lista del menú. */

.bx-cuenta__portada {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
}

.bx .bx-cuenta__salir {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-pill);
	background: rgba(255, 255, 255, .05);
	color: var(--bx-texto-2);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.bx .bx-cuenta__salir svg {
	flex: 0 0 auto;
	color: var(--bx-error);
}

.bx .bx-cuenta__salir:hover,
.bx .bx-cuenta__salir:focus-visible {
	border-color: rgba(239, 68, 68, .5);
	background: rgba(239, 68, 68, .12);
	color: var(--bx-texto);
}

@media (max-width: 991px) {
	.bx .bx-cuenta__salir {
		display: inline-flex;
	}

	/* Y entonces sobra el botón de la rejilla, que decía lo mismo. */
	.bx .bx-cuenta .bx-cuenta__menu.bx-cuenta__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout {
		display: none;
	}
}

/* Las preferencias que dependen de otra: apagadas y sin tocar mientras la de
   arriba lo esté. Se ven, para que se entienda por qué no se pueden marcar. */
.bx .bx-ajuste__marco--atado {
	opacity: .5;
	cursor: not-allowed;
}

.bx .bx-ajuste__marco--atado input[type="checkbox"] {
	cursor: not-allowed;
}

/* --------------------------------------------- Puntos y reseñas (fase 9) */

/* Las tres cifras de arriba: disponibles manda, ganados y gastados
   acompañan. En móvil se apilan a lo ancho. */
.bx-puntos__cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0 0 var(--bx-e-4);
	padding: 0;
}

@media (max-width: 600px) {
	.bx-puntos__cifras {
		grid-template-columns: 1fr;
	}
}

.bx-puntos__cifra {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-l);
	background: rgba(255, 255, 255, .035);
	text-align: center;
}

.bx-puntos__cifra--saldo {
	border-color: rgba(217, 180, 91, .35);
}

.bx-puntos__numero {
	color: var(--bx-texto);
	font-family: var(--bx-display);
	font-size: 1.7rem;
	line-height: 1.1;
}

.bx-puntos__cifra--saldo .bx-puntos__numero {
	color: var(--bx-gold);
}

.bx-puntos__rotulo {
	color: var(--bx-texto-3);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bx-puntos__equivale {
	color: var(--bx-texto-2);
	font-size: .82rem;
}

.bx-puntos__titulo {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold);
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bx-puntos__lista,
.bx-misresenas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
}

/* Un movimiento: a la izquierda de dónde viene, a la derecha cuántos puntos
   y el enlace al pedido. Misma repartición que la tarjeta de pedido. */
.bx-puntos__mov {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	padding: var(--bx-e-2) var(--bx-e-3);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: rgba(255, 255, 255, .035);
}

.bx-puntos__mov-datos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bx-puntos__mov-motivo {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--bx-texto);
	font-weight: 600;
}

.bx-puntos__mov-pedido,
.bx-puntos__mov-fecha {
	color: var(--bx-texto-3);
	font-size: .82rem;
}

.bx-puntos__mov-lado {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.bx-puntos__mov-puntos {
	font-family: var(--bx-display);
	font-size: 1.05rem;
}

.bx-puntos__mov--ingreso .bx-puntos__mov-puntos {
	color: var(--bx-exito);
}

.bx-puntos__mov--gasto .bx-puntos__mov-puntos {
	color: var(--bx-gold);
}

.bx .bx-puntos__mov-ver {
	color: var(--bx-accent);
	font-size: .82rem;
}

.bx-puntos__vacio,
.bx-misresenas__vacio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bx-e-2);
	padding: var(--bx-e-4);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-l);
}

/* Una reseña: foto a la izquierda, todo lo demás a la derecha, como en la
   portada. En móvil la foto se encoge pero no desaparece. */
.bx-misresenas__item {
	display: flex;
	gap: var(--bx-e-3);
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-l);
	background: rgba(255, 255, 255, .035);
}

.bx-misresenas__foto {
	flex: 0 0 84px;
	width: 84px;
	border-radius: var(--bx-r-m);
	overflow: hidden;
}

.bx-misresenas__foto img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 480px) {
	.bx-misresenas__foto {
		flex-basis: 60px;
		width: 60px;
	}
}

.bx-misresenas__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.bx-misresenas__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.bx .bx-misresenas__producto {
	color: var(--bx-texto);
	font-weight: 600;
}

.bx .bx-misresenas__producto:hover {
	color: var(--bx-accent);
}

.bx-misresenas__texto {
	color: var(--bx-texto-2);
	font-size: .9rem;
}

.bx-misresenas__texto p:last-child {
	margin-bottom: 0;
}

.bx-misresenas__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	color: var(--bx-texto-3);
	font-size: .8rem;
}

.bx-misresenas__puntos {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--bx-exito);
	font-weight: 600;
}

/* ------------------------------- El color de las chispas (fase 10)

   Tres opciones excluyentes debajo de las casillas, con la misma caja: una
   elección no es un sí o un no, así que la marca es redonda —radio— y cada
   opción enseña una muestra de cómo va a salir la magia. La tercera trae
   debajo su selector de color.

   El campo de color se ve siempre, también sin JavaScript: se guarda igual y
   la nota dice cuándo se usa. Con JavaScript, además, se apaga mientras no
   esté elegida esa opción. */

.bx .bx-chispas-estilo {
	margin: var(--bx-e-4) 0 0;
	padding: 0;
	border: 0;
}

.bx .bx-chispas-estilo__titulo {
	margin: 0 0 6px;
	padding: 0;
	color: var(--bx-texto);
	font-family: var(--bx-titulos, inherit);
	font-size: 1rem;
	font-weight: 700;
}

.bx .bx-chispas-estilo__ayuda {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-texto-3);
	font-size: .84rem;
	line-height: 1.5;
}

/* La marca redonda de la elección, con el mismo molde que la casilla. */
.bx .bx-ajuste__marco--eleccion input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid rgba(190, 224, 240, .38);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .06) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bx .bx-ajuste__marco--eleccion input[type="radio"]::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: #eafcff;
	transform: scale(.3);
	opacity: 0;
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .bx-ajuste__marco--eleccion input[type="radio"]:checked {
	border-color: var(--bx-cta-borde);
	background: linear-gradient(180deg, rgba(56, 214, 245, .55), rgba(56, 214, 245, .18));
	box-shadow:
		0 0 14px rgba(56, 214, 245, .5),
		inset 0 1px 0 rgba(255, 255, 255, .35);
}

.bx .bx-ajuste__marco--eleccion input[type="radio"]:checked::after {
	opacity: 1;
	transform: scale(1);
}

.bx .bx-ajuste__marco--eleccion input[type="radio"]:focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 3px;
}

/* La muestra: un botón de color a la derecha que enseña de qué va cada opción
   sin tener que probarla. */
.bx-chispas-muestra {
	flex: 0 0 auto;
	align-self: center;
	/* Al fondo de la caja: el texto manda y la muestra acompaña. */
	margin-left: auto;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
}

.bx-chispas-muestra--casa {
	background:
		radial-gradient(circle at 30% 32%, rgba(56, 214, 245, .95) 0%, rgba(56, 214, 245, 0) 58%),
		radial-gradient(circle at 70% 38%, rgba(166, 70, 199, .95) 0%, rgba(166, 70, 199, 0) 58%),
		radial-gradient(circle at 48% 76%, rgba(240, 96, 180, .95) 0%, rgba(240, 96, 180, 0) 58%),
		#0b1220;
}

/* El vacío: negro por dentro y el aro morado por fuera. */
.bx-chispas-muestra--vacio {
	background:
		radial-gradient(circle at 50% 50%, #05030a 0%, #05030a 38%, rgba(150, 60, 220, .85) 62%, rgba(120, 40, 190, .25) 82%, rgba(0, 0, 0, 0) 100%),
		#0b1220;
}

.bx-chispas-muestra--unico {
	background:
		radial-gradient(circle at 50% 50%, var(--bx-chispa-muestra, #38d6f5) 0%, color-mix(in srgb, var(--bx-chispa-muestra, #38d6f5) 55%, transparent) 52%, rgba(0, 0, 0, 0) 88%),
		#0b1220;
}

/* El selector de color, colgando de su opción. */
.bx .bx-chispas-color {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0 44px;
	color: var(--bx-texto-2);
	font-size: .86rem;
}

.bx .bx-chispas-color__campo {
	width: 52px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-s, 10px);
	background: rgba(255, 255, 255, .04);
	cursor: pointer;
}

.bx .bx-chispas-color__nota {
	color: var(--bx-texto-3);
	font-size: .8rem;
}

/* Mientras no esté elegida esa opción, el campo se ve apagado —pero se puede
   tocar: al elegir un color se marca sola la opción de un solo color, que es
   lo que espera quien lo mueve. */
.bx .bx-chispas-color--atado {
	opacity: .55;
}

@media (max-width: 480px) {
	.bx .bx-chispas-color {
		margin-left: 0;
	}
}