/**
 * L'espace client — las ocho pantallas de `/mon-compte/`.
 *
 * Tres marcados distintos conviven aquí y ninguno es del tema:
 *
 *   · **WooCommerce** — el menú lateral, la lista de pedidos, las direcciones,
 *     el perfil y el formulario de acceso.
 *   · **El módulo `043`** — el tablero: saludo, cuatro contadores, últimos
 *     pedidos, accesos rápidos y el bloque de sociétaire.
 *   · **El módulo `039`** — las tres pantallas propias: Passeport, Pionero y
 *     parts SCIC.
 *
 * Los dos módulos emiten clases `chido-dashboard__*`, `chido-passeport__*`,
 * `chido-journey__*`, `chido-cta`… **que no tenían CSS en ninguna parte**. Se
 * buscó en el plugin (su hoja `999` está en `disabled/`) y en la maqueta: no
 * existe. Es el mismo caso que el túnel de compra — marcado vivo apuntando a
 * una hoja muerta— y por eso la cuenta salía como texto plano con las líneas
 * pegadas: «Acheté & cosigné11/05/2026 13:33» era un `<strong>` y un `<span>`
 * inline sin nada que los separase.
 *
 * Dos decisiones que no son cosméticas:
 *
 *   · **Las cifras van en IBM Plex Mono**, igual que en el carrito. Aquí hay
 *     importes, números de ejemplar y hashes; en Sour Gummy el 1 y el 7 se
 *     confunden.
 *   · **Los pasaportes se pintan en rejilla de tarjetas.** La cuenta de prueba
 *     tiene 25 y la lista en columna obligaba a un scroll de cinco pantallas
 *     para contarlos. Son 25 sachets comprados, uno por sachet, y hay clientes
 *     que tendrán más.
 */

/* =========================================================================
 * Los tokens de la v9
 *
 * El módulo `043` lleva `style="background:var(--a-yellow)"` metido en el
 * atributo de dos elementos. Esas variables eran del sistema de diseño
 * anterior, que ya no se carga: sin declararlas el botón «Devenir sociétaire»
 * sale transparente y el «Actif» del Pionero sin color. Se traducen a la
 * paleta de Chido en vez de tocar el plugin.
 * ====================================================================== */

.chido-compte {
	--a-black: var(--ink);
	--a-yellow: var(--yellow);
	--a-cream: var(--paper);
}

/* =========================================================================
 * El armazón: menú a la izquierda, pantalla a la derecha
 *
 * WooCommerce lo reparte con flotados —`.woocommerce-account
 * .woocommerce-MyAccount-navigation { float: left; width: 30% }`, dos clases—
 * y aquí manda una rejilla. Los selectores encadenan tres clases para ganarle
 * sin `!important`, y hay que devolver el ancho a `auto`: con `float: none` a
 * secas el 30 % persiste y el menú se queda en una tira.
 * ====================================================================== */

.chido-compte .woocommerce {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 1.5rem, 3vw, 2.5rem );
	align-items: start;
}

.chido-compte .woocommerce .woocommerce-MyAccount-navigation,
.chido-compte .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

.chido-compte .woocommerce-notices-wrapper:empty {
	display: none;
}

@media ( min-width: 60rem ) {
	.chido-compte .woocommerce {
		grid-template-columns: 16.5rem minmax( 0, 1fr );
	}

	/*
	 * **Cada bloque dice en qué columna va.** No se deja a la colocación
	 * automática, que ya salió al revés una vez —el menú ancho a la derecha y
	 * la pantalla estrangulada en la columna estrecha de la izquierda—. Con la
	 * columna escrita, el orden del DOM deja de decidir y el resultado es el
	 * mismo en cualquier navegador.
	 */
	.chido-compte .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		position: sticky;
		/* La barra del sitio es fija; sin este desfase el menú se le mete
		   debajo al hacer scroll. Es el mismo valor que `scroll-padding-top`
		   de `base.css`. */
		top: 6.5rem;
	}

	.chido-compte .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
	}

	/*
	 * Todo lo demás cruza las dos columnas: los avisos, y sobre todo el
	 * bloque de acceso y registro que WooCommerce sirve **sin menú** cuando no
	 * hay sesión — si no, se metía entero en los 16,5 rem del lateral.
	 */
	.chido-compte .woocommerce > .woocommerce-notices-wrapper,
	.chido-compte .woocommerce > #customer_login,
	.chido-compte .woocommerce > form,
	.chido-compte .woocommerce > p {
		grid-column: 1 / -1;
	}
}

/* --- el menú ----------------------------------------------------------- */

.chido-compte .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-compte .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.chido-compte .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 1.1rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper);
	font: 600 0.95rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.chido-compte .woocommerce-MyAccount-navigation li a:hover,
.chido-compte .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--paper-2);
	transform: translate( -2px, -2px );
	box-shadow: var(--pop-sm);
}

.chido-compte .woocommerce-MyAccount-navigation li.is-active a {
	border: var(--stroke);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
}

/*
 * Salir no es una sección más: se separa del bloque y se pinta apagado, para
 * que nadie lo pulse buscando su perfil.
 */
.chido-compte .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.9rem;
}

.chido-compte .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	border-style: dashed;
	background: transparent;
	color: var(--muted);
}

/* =========================================================================
 * Piezas compartidas por las tres pantallas de los módulos
 * ====================================================================== */

.chido-compte .chido-account,
.chido-compte .chido-dashboard {
	display: grid;
	gap: clamp( 1.5rem, 3.5vw, 2.5rem );
}

.chido-compte .chido-account__header {
	display: grid;
	gap: 0.5rem;
}

.chido-compte .chido-account__label,
.chido-compte .chido-dashboard__greeting-label,
.chido-compte .chido-dashboard__societaire-label,
.chido-compte .chido-dashboard__invite-label {
	margin: 0;
	font: 600 0.7rem/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--orange);
}

/*
 * El título del módulo se esconde: el héroe negro de la plantilla ya nombra
 * la pantalla, y dos `<h1>` seguidos —«Mon Passeport» y «Mes Passeports.»—
 * no aportan nada y rompen la jerarquía del documento. El rótulo de encima y
 * la entradilla se quedan, que sí dicen algo distinto.
 */
.chido-compte .chido-account__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.chido-compte .chido-account__intro {
	margin: 0;
	max-width: 52rem;
	font-size: 1.03rem;
	line-height: 1.62;
	color: var(--ink-soft);
}

/* --- la tarjeta, que es la unidad de toda la cuenta -------------------- */

.chido-compte .chido-account__empty,
.chido-compte .chido-dashboard__card,
.chido-compte .chido-dashboard__orders,
.chido-compte .chido-dashboard__actions,
.chido-compte .chido-passeport__item,
.chido-compte .chido-pionero__active,
.chido-compte .chido-socio__active,
.chido-compte .chido-socio__why,
.chido-compte .chido-socio__ag,
.chido-compte .woocommerce-Address,
.chido-compte .woocommerce-EditAccountForm,
.chido-compte form.woocommerce-form-login,
.chido-compte form.woocommerce-form-register {
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-account__empty {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	background: var(--paper-2);
}

.chido-compte .chido-account__empty p {
	margin: 0;
	max-width: 46rem;
	line-height: 1.6;
}

/* --- los botones de los módulos ---------------------------------------- */

/*
 * `.chido-cta` no lleva la clase `.button` de WooCommerce, así que las reglas
 * homologadas de `shop.css` no lo alcanzan. Se repiten aquí con los mismos
 * valores —mismo alto, mismo radio, mismo trazo, misma sombra— para que un
 * «Devenir sociétaire» y un «Valider la commande» se vean igual.
 */
.chido-compte .chido-cta {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--paper);
	box-shadow: var(--pop-sm);
	font: 700 1rem/1.15 var(--font-display);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-cta--primary {
	background: var(--yellow);
}

.chido-compte .chido-cta:hover,
.chido-compte .chido-cta:focus-visible {
	background: var(--yellow);
	transform: translate( -2px, -2px );
	box-shadow: var(--pop);
}

/* =========================================================================
 * El tablero — módulo 043
 * ====================================================================== */

.chido-compte .chido-dashboard__hero {
	display: grid;
	gap: 0.4rem;
}

.chido-compte .chido-dashboard__greeting {
	margin: 0;
	font: 700 clamp( 1.9rem, 5vw, 3rem )/1.02 var(--font-display);
	letter-spacing: var(--display-tracking);
}

.chido-compte .chido-dashboard__intro {
	margin: 0.35rem 0 0;
	max-width: 46rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* --- los cuatro contadores --------------------------------------------- */

.chido-compte .chido-dashboard__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
}

.chido-compte .chido-dashboard__card {
	display: grid;
	align-content: start;
	gap: 0.25rem;
	color: var(--ink);
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-dashboard__card:hover,
.chido-compte .chido-dashboard__card:focus-visible {
	transform: translate( -3px, -3px );
	box-shadow: var(--pop);
}

.chido-compte .chido-dashboard__card-label {
	font: 600 0.66rem/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-dashboard__card-value {
	margin: 0.2rem 0 0;
	font-family: "IBM Plex Mono", monospace;
	/* Tope en 2,1 rem: con 2,5 el «155,00 €» del Kiru partía el euro a la
	   línea siguiente y la tarjeta quedaba con un símbolo suelto debajo. */
	font-size: clamp( 1.7rem, 3.4vw, 2.1rem );
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.chido-compte .chido-dashboard__card-value--empty {
	color: var(--muted);
}

.chido-compte .chido-dashboard__card-meta {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

/* Pegado abajo para que las cuatro tarjetas cierren a la misma altura. */
.chido-compte .chido-dashboard__card-cta {
	margin-top: 0.85rem;
	align-self: end;
	font: 700 0.85rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--yellow);
}

/* --- últimos pedidos ---------------------------------------------------- */

.chido-compte .chido-dashboard__section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.chido-compte .chido-dashboard__section-title,
.chido-compte .chido-dashboard__actions-title,
.chido-compte .chido-socio__why-title,
.chido-compte .chido-socio__ag-title,
.chido-compte .chido-dashboard__societaire-title,
.chido-compte .chido-dashboard__invite-title {
	margin: 0;
	font: 700 clamp( 1.15rem, 2.6vw, 1.45rem )/1.15 var(--font-display);
}

.chido-compte .chido-dashboard__section-link {
	font: 600 0.85rem/1.2 "IBM Plex Mono", monospace;
	color: var(--ink);
}

.chido-compte .chido-dashboard__orders-list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cada pedido es una fila de cinco datos. En rejilla y no en flex porque las
 * columnas tienen que alinearse **entre filas**: el número con el número, la
 * fecha con la fecha. Con flex cada fila se repartía a su aire.
 */
.chido-compte .chido-dashboard__order {
	display: grid;
	gap: 0.6rem 1rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: center;
	padding: 0.85rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
}

@media ( min-width: 48rem ) {
	.chido-compte .chido-dashboard__order {
		grid-template-columns: minmax( 6rem, 1fr ) minmax( 7rem, 1fr ) auto minmax( 6rem, 1fr ) auto;
	}
}

.chido-compte .chido-dashboard__order > div {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.chido-compte .chido-dashboard__order-label {
	font: 600 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-dashboard__order-id,
.chido-compte .chido-dashboard__order-date,
.chido-compte .chido-dashboard__order-total {
	font-family: "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.chido-compte .chido-dashboard__order-status {
	justify-self: start;
	padding: 0.3rem 0.75rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	font: 600 0.72rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * El color dice el estado sin leerlo. Son los cinco de WooCommerce; si mañana
 * aparece otro se queda con el fondo neutro, que es un fallo silencioso pero
 * legible.
 */
.chido-compte .chido-dashboard__order-status--completed {
	background: rgba( 7, 143, 96, 0.16 );
	border-color: var(--green);
}

.chido-compte .chido-dashboard__order-status--processing {
	background: rgba( 255, 132, 38, 0.18 );
	border-color: var(--orange);
}

.chido-compte .chido-dashboard__order-status--on-hold {
	background: rgba( 141, 88, 166, 0.16 );
	border-color: var(--purple);
}

.chido-compte .chido-dashboard__order-status--cancelled,
.chido-compte .chido-dashboard__order-status--failed,
.chido-compte .chido-dashboard__order-status--refunded {
	background: rgba( 239, 89, 167, 0.16 );
	border-color: var(--pink);
}

.chido-compte .chido-dashboard__order-cta {
	justify-self: end;
	padding: 0.45rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	font: 700 0.82rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.chido-compte .chido-dashboard__order-cta:hover {
	background: var(--yellow);
}

/* --- accesos rápidos ---------------------------------------------------- */

.chido-compte .chido-dashboard__actions {
	background: var(--paper-2);
}

.chido-compte .chido-dashboard__actions-title {
	margin-bottom: 0.9rem;
}

.chido-compte .chido-dashboard__actions-grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
}

.chido-compte .chido-dashboard__action {
	padding: 0.65rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper);
	font: 600 0.9rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-dashboard__action:hover {
	background: var(--yellow);
	transform: translate( -2px, -2px );
	box-shadow: var(--pop-sm);
}

/* --- el bloque de sociétaire (las dos variantes) ----------------------- */

.chido-compte .chido-dashboard__societaire,
.chido-compte .chido-dashboard__invite-socio {
	display: grid;
	gap: 1.1rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--ink);
	color: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-dashboard__societaire-header,
.chido-compte .chido-dashboard__invite-header {
	display: grid;
	gap: 0.4rem;
}

.chido-compte .chido-dashboard__societaire-label,
.chido-compte .chido-dashboard__invite-label {
	color: var(--yellow);
}

.chido-compte .chido-dashboard__societaire-intro,
.chido-compte .chido-dashboard__invite-intro {
	margin: 0;
	max-width: 46rem;
	line-height: 1.6;
	color: var(--on-dark);
}

.chido-compte .chido-dashboard__societaire-intro strong,
.chido-compte .chido-dashboard__invite-intro strong {
	color: var(--paper);
}

.chido-compte .chido-dashboard__societaire-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fit, minmax( 8rem, 1fr ) );
}

.chido-compte .chido-dashboard__societaire-block {
	display: grid;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
	border: var(--sw-thin) solid var(--line-dark);
	border-radius: var(--r);
}

.chido-compte .chido-dashboard__societaire-block strong {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.6rem;
	font-variant-numeric: tabular-nums;
	color: var(--yellow);
}

.chido-compte .chido-dashboard__societaire-block span {
	font-size: 0.8rem;
	color: var(--on-dark);
}

.chido-compte .chido-dashboard__invite-reasons {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-compte .chido-dashboard__invite-reason {
	padding-left: 1.4rem;
	position: relative;
	line-height: 1.5;
	color: var(--on-dark);
}

.chido-compte .chido-dashboard__invite-reason::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--yellow);
}

.chido-compte .chido-dashboard__invite-reason strong {
	color: var(--paper);
}

.chido-compte .chido-dashboard__societaire-docs,
.chido-compte .chido-dashboard__invite-footer,
.chido-compte .chido-pionero__actions,
.chido-compte .chido-socio__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* =========================================================================
 * Mes Passeports — módulo 039
 *
 * La pantalla contesta a una pregunta muy concreta: **dónde está el dinero
 * que pagaste**. Arriba, el reparto entre lo que ya llegó a la cooperativa y
 * lo que sigue en camino; debajo, un sachet por tarjeta con su recorrido.
 * ====================================================================== */

/* --- el recorrido del dinero ------------------------------------------- */

.chido-compte .chido-money {
	display: grid;
	gap: 1rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--ink);
	color: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-money__eyebrow {
	margin: 0;
	font: 600 0.7rem/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--yellow);
}

.chido-compte .chido-money__split {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
}

.chido-compte .chido-money__leg {
	display: grid;
	gap: 0.25rem;
	padding: 1rem 1.15rem;
	border: var(--sw-thin) solid var(--line-dark);
	border-radius: var(--r);
}

.chido-compte .chido-money__amount {
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp( 1.7rem, 4.5vw, 2.3rem );
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.chido-compte .chido-money__leg--arrived .chido-money__amount {
	color: var(--yellow);
}

.chido-compte .chido-money__leg--arrived {
	border-color: var(--yellow);
}

.chido-compte .chido-money__caption {
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--on-dark);
}

.chido-compte .chido-money__bar {
	height: 0.85rem;
	border: var(--sw-thin) solid var(--line-dark);
	border-radius: var(--r-pill);
	background: rgba( 255, 253, 244, 0.08 );
	overflow: hidden;
}

.chido-compte .chido-money__bar-fill {
	display: block;
	height: 100%;
	background: var(--yellow);
}

.chido-compte .chido-money__meta {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--on-dark);
}

/* --- la lista de sachets ------------------------------------------------ */

/*
 * Rejilla, no columna. La cuenta de prueba tiene 25 pasaportes: en una sola
 * columna eran cinco pantallas de scroll con la misma tarjeta repetida, que
 * es exactamente lo que se veía roto. En rejilla caben tres por fila y el
 * conjunto se lee de un vistazo.
 */
.chido-compte .chido-passeport__list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 19rem, 1fr ) );
}

.chido-compte .chido-passeport__item {
	display: grid;
	align-content: start;
	gap: 0.85rem;
}

.chido-compte .chido-passeport__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.chido-compte .chido-passeport__product {
	margin: 0;
	font: 700 1.05rem/1.2 var(--font-display);
}

.chido-compte .chido-passeport__exemplaire {
	margin: 0.15rem 0 0;
	font: 0.78rem/1.3 "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.chido-compte .chido-passeport__exemplaire strong {
	color: var(--ink);
}

.chido-compte .chido-passeport__view {
	font: 600 0.8rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--yellow);
	white-space: nowrap;
}

/* --- el recorrido de cada sachet ---------------------------------------- */

/*
 * Los tres pasos venían como `<strong>` y `<span>` inline: «Acheté &
 * cosigné11/05/2026». El cuerpo pasa a rejilla y cada dato ocupa su línea.
 */
.chido-compte .chido-journey {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-compte .chido-journey__step {
	position: relative;
	display: grid;
	grid-template-columns: 0.75rem minmax( 0, 1fr );
	gap: 0.65rem;
	align-items: start;
}

/* La línea que une un paso con el siguiente. */
.chido-compte .chido-journey__step:not( :last-child )::before {
	content: "";
	position: absolute;
	left: 0.31rem;
	top: 0.95rem;
	bottom: -0.55rem;
	width: 0.125rem;
	background: var(--ink);
	opacity: 0.16;
}

.chido-compte .chido-journey__dot {
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.22rem;
	border: var(--sw-thin) solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
}

.chido-compte .chido-journey__step--done .chido-journey__dot {
	background: var(--green);
}

.chido-compte .chido-journey__step--pending .chido-journey__dot {
	background: var(--paper-2);
	border-style: dashed;
}

.chido-compte .chido-journey__body {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.chido-compte .chido-journey__body strong {
	font: 700 0.85rem/1.3 var(--font-display);
}

.chido-compte .chido-journey__body span {
	font: 0.8rem/1.4 "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	word-break: break-word;
}

.chido-compte .chido-journey__step--pending .chido-journey__body strong,
.chido-compte .chido-journey__step--pending .chido-journey__body span {
	color: var(--muted);
}

.chido-compte .chido-journey__body a {
	color: var(--ink);
}

/* --- las líneas complementarias ----------------------------------------- */

.chido-compte .chido-passeport__rows {
	display: grid;
	gap: 0.45rem;
	padding-top: 0.75rem;
	border-top: var(--sw-thin) dashed rgba( 18, 15, 16, 0.2 );
}

.chido-compte .chido-passeport__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem;
}

.chido-compte .chido-passeport__row-label {
	font: 600 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-passeport__row strong {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

/* El identificador es largo y no debe desbordar la tarjeta. */
.chido-compte .chido-passeport__uid {
	padding: 0.15rem 0.45rem;
	border-radius: 0.4rem;
	background: var(--paper-2);
	font: 0.72rem/1.4 "IBM Plex Mono", monospace;
	word-break: break-all;
}

.chido-compte .chido-passeport__item-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.6rem;
	border-top: var(--sw-thin) dashed rgba( 18, 15, 16, 0.2 );
}

.chido-compte .chido-passeport__esg {
	font: 600 0.8rem/1.2 var(--font-display);
	color: var(--ink);
}

.chido-compte .chido-passeport__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font: 0.72rem/1.3 "IBM Plex Mono", monospace;
	color: var(--green);
}

.chido-compte .chido-passeport__verified .chido-passeport__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--green);
}

.chido-compte .chido-passeport__footer {
	padding: 1rem 1.2rem;
	border-left: 0.375rem solid var(--orange);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: rgba( 255, 132, 38, 0.1 );
}

.chido-compte .chido-passeport__footer p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
}

/* =========================================================================
 * Mon Pionero y Mes parts SCIC — módulo 039
 * ====================================================================== */

.chido-compte .chido-pionero__pitch {
	max-width: 46rem;
}

.chido-compte .chido-pionero__benefits,
.chido-compte .chido-socio__rights {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-compte .chido-pionero__benefits li,
.chido-compte .chido-socio__rights li {
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.55;
}

.chido-compte .chido-pionero__benefits li::before,
.chido-compte .chido-socio__rights li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--orange);
}

.chido-compte .chido-pionero__active {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.chido-compte .chido-pionero__status {
	padding: 0.35rem 0.9rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	font: 600 0.75rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.chido-compte .chido-pionero__status--active {
	background: rgba( 7, 143, 96, 0.16 );
	border-color: var(--green);
}

.chido-compte .chido-pionero__status--on-hold,
.chido-compte .chido-pionero__status--pending {
	background: rgba( 255, 132, 38, 0.18 );
	border-color: var(--orange);
}

.chido-compte .chido-pionero__status--cancelled,
.chido-compte .chido-pionero__status--expired {
	background: rgba( 239, 89, 167, 0.16 );
	border-color: var(--pink);
}

.chido-compte .chido-pionero__details {
	display: grid;
	gap: 0.85rem;
	width: 100%;
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
}

.chido-compte .chido-pionero__detail {
	display: grid;
	gap: 0.2rem;
	padding: 0.85rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
}

.chido-compte .chido-pionero__detail-label {
	font: 600 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-pionero__detail-value {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * Mon Pionero de verdad — módulos 054 y 049
 *
 * OJO: la pantalla del Pionero **no la pinta el módulo `039`**, aunque este
 * registre el mismo `woocommerce_account_pionero_endpoint` y su marcado
 * `chido-pionero__*` esté ahí, listo y muerto. Quien gana el enganche es el
 * `054`, que emite `chido-pio__*`, y dentro de él el `049` inyecta el
 * selector de molienda con `chido-mouture__*`. Se comprobó pidiendo la URL
 * y mirando el HTML servido; las reglas de más arriba se quedan por si el
 * `054` se desactiva algún día, pero **las que se ven son estas**.
 * ====================================================================== */

.chido-compte .chido-pio {
	display: grid;
	gap: clamp( 1.5rem, 3.5vw, 2.25rem );
}

.chido-compte .chido-pio__hero {
	display: grid;
	gap: 0.4rem;
}

.chido-compte .chido-pio__label,
.chido-compte .chido-mouture__label {
	margin: 0;
	font: 600 0.7rem/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--orange);
}

.chido-compte .chido-pio__title {
	margin: 0;
	font: 700 clamp( 1.6rem, 4vw, 2.4rem )/1.05 var(--font-display);
	letter-spacing: var(--display-tracking);
}

.chido-compte .chido-pio__h3,
.chido-compte .chido-mouture__title {
	margin: 0;
	font: 700 clamp( 1.15rem, 2.6vw, 1.45rem )/1.15 var(--font-display);
}

/* --- sin abono ---------------------------------------------------------- */

.chido-compte .chido-pio__empty {
	display: grid;
	justify-items: start;
	gap: 0.7rem;
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-pio__empty-text {
	margin: 0;
	font: 700 1.1rem/1.35 var(--font-display);
}

.chido-compte .chido-pio__empty-sub {
	margin: 0;
	max-width: 46rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.chido-compte .chido-pio__cta {
	display: inline-block;
	margin-top: 0.3rem;
	padding: 0.8rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
	font: 700 1rem/1.15 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-pio__cta:hover {
	transform: translate( -2px, -2px );
	box-shadow: var(--pop);
}

/* --- con abono ---------------------------------------------------------- */

.chido-compte .chido-pio__status {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-pio__status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.chido-compte .chido-pio__badge {
	padding: 0.3rem 0.8rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	font: 600 0.72rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.chido-compte .chido-pio__badge--ok,
.chido-compte .chido-pio__badge--active {
	background: rgba( 7, 143, 96, 0.16 );
	border-color: var(--green);
}

.chido-compte .chido-pio__badge--wait,
.chido-compte .chido-pio__badge--hold {
	background: rgba( 255, 132, 38, 0.18 );
	border-color: var(--orange);
}

.chido-compte .chido-pio__badge--off,
.chido-compte .chido-pio__badge--cancelled {
	background: rgba( 239, 89, 167, 0.16 );
	border-color: var(--pink);
}

.chido-compte .chido-pio__amount {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.chido-compte .chido-pio__dl {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	width: 100%;
	margin: 0;
}

.chido-compte .chido-pio__dl > div {
	display: grid;
	gap: 0.2rem;
	padding: 0.8rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
}

.chido-compte .chido-pio__dl dt {
	font: 600 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-pio__dl dd {
	margin: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.chido-compte .chido-pio__manage {
	font: 600 0.9rem/1.3 var(--font-display);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--yellow);
}

/* --- los últimos envíos -------------------------------------------------- */

.chido-compte .chido-pio__history {
	display: grid;
	gap: 0.9rem;
}

.chido-compte .chido-pio__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chido-compte .chido-pio__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
}

.chido-compte .chido-pio__item-date {
	font-family: "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.chido-compte .chido-pio__item-status {
	padding: 0.22rem 0.7rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	font: 600 0.68rem/1.3 "IBM Plex Mono", monospace;
	text-transform: uppercase;
}

.chido-compte .chido-pio__item-link {
	font: 600 0.85rem/1.2 var(--font-display);
	color: var(--ink);
}

/* --- el selector de molienda (módulo 049) ------------------------------- */

.chido-compte .chido-mouture {
	display: grid;
	gap: 1rem;
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-mouture__head {
	display: grid;
	gap: 0.35rem;
}

.chido-compte .chido-mouture__intro {
	margin: 0;
	max-width: 46rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

.chido-compte .chido-mouture__form {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.chido-compte .chido-mouture__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( auto-fill, minmax( 11rem, 1fr ) );
	width: 100%;
}

/*
 * Cada molienda es una tarjeta pulsable. El `<input type="radio">` sigue
 * dentro del `<label>` y es él quien recibe el clic: se oculta a la vista
 * pero no al teclado ni al lector de pantalla — de ahí el `clip` en vez de
 * un `display: none`, que lo sacaría del orden de tabulación.
 */
.chido-compte .chido-mouture__card {
	display: grid;
	gap: 0.15rem;
	padding: 0.8rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-mouture__card input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
}

.chido-compte .chido-mouture__card:hover {
	transform: translate( -2px, -2px );
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-mouture__card:has( input:focus-visible ) {
	outline: var(--stroke);
	outline-offset: 2px;
}

/*
 * `is-active` la pone el PHP al cargar; `:has()` cubre el cambio inmediato
 * al pulsar otra, antes de guardar. Las dos dicen lo mismo.
 */
.chido-compte .chido-mouture__card.is-active,
.chido-compte .chido-mouture__card:has( input:checked ) {
	border: var(--stroke);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-mouture__card-name {
	font: 700 0.95rem/1.25 var(--font-display);
}

.chido-compte .chido-mouture__card-desc {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

.chido-compte .chido-mouture__btn {
	padding: 0.8rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
	font: 700 1rem/1.15 var(--font-display);
	color: var(--ink);
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-compte .chido-mouture__btn:hover {
	transform: translate( -2px, -2px );
	box-shadow: var(--pop);
}

.chido-compte .chido-mouture__notice {
	margin: 0;
	padding: 0.8rem 1.1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	font-size: 0.9rem;
}

.chido-compte .chido-mouture__notice--ok {
	border-color: var(--green);
	background: rgba( 7, 143, 96, 0.12 );
}

.chido-compte .chido-mouture__notice--err {
	border-color: var(--pink);
	background: rgba( 239, 89, 167, 0.16 );
}

.chido-compte .chido-pio__login,
.chido-compte .chido-mouture__login {
	margin: 0;
	line-height: 1.6;
}

/* --- parts SCIC --------------------------------------------------------- */

.chido-compte .chido-socio__active {
	display: grid;
	gap: 1.1rem;
}

.chido-compte .chido-socio__count {
	display: grid;
	justify-items: center;
	gap: 0.2rem;
	padding: 1.25rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
	text-align: center;
}

.chido-compte .chido-socio__count-label {
	font: 600 0.66rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-compte .chido-socio__big {
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp( 2.5rem, 8vw, 4rem );
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.chido-compte .chido-socio__count-meta {
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.chido-compte .chido-socio__since {
	margin: 0;
	line-height: 1.55;
}

.chido-compte .chido-socio__why,
.chido-compte .chido-socio__ag {
	display: grid;
	gap: 0.8rem;
	background: var(--paper-2);
}

.chido-compte .chido-socio__ag p {
	margin: 0;
	line-height: 1.6;
}

/* =========================================================================
 * Las pantallas de WooCommerce: pedidos, direcciones, perfil y acceso
 * ====================================================================== */

.chido-compte .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/*
 * El tablero saludaba dos veces.
 *
 * `dashboard.php` abre con «Bonjour X (vous n'êtes pas X ? Déconnexion)» y un
 * párrafo explicando para qué sirve el tablero; justo después, el módulo `043`
 * pinta su propio «Bonjour / Jamal.» con la misma idea escrita en la voz de
 * Chido. Se retira el de WooCommerce, que es el genérico —y su enlace de
 * cerrar sesión ya está en el menú de al lado—. Solo cuando el módulo está
 * ahí: si algún día se retira, el texto de WooCommerce vuelve solo.
 */
.chido-compte .woocommerce-MyAccount-content:has( .chido-dashboard ) > p:nth-of-type( -n+2 ) {
	display: none;
}

.chido-compte .woocommerce-MyAccount-content h2,
.chido-compte .woocommerce-MyAccount-content h3 {
	margin: 0 0 1rem;
	font: 700 clamp( 1.15rem, 2.6vw, 1.5rem )/1.15 var(--font-display);
}

/* --- la lista de pedidos ------------------------------------------------ */

.chido-compte .woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--stroke);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
}

/*
 * `thead th`, no `th` a secas: WooCommerce marca la celda del número de
 * pedido como `<th scope="row">`, así que una regla sin `thead` le pegaba a
 * esa columna el fondo crema y la tipografía de rótulo de la cabecera.
 */
.chido-compte .woocommerce-orders-table thead th {
	padding: 0.7rem 1rem;
	background: var(--paper-2);
	border-bottom: var(--stroke-thin);
	font: 600 0.66rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-align: left;
	color: var(--muted);
}

.chido-compte .woocommerce-orders-table tbody th,
.chido-compte .woocommerce-orders-table td {
	padding: 0.85rem 1rem;
	border-bottom: var(--sw-thin) solid rgba( 18, 15, 16, 0.12 );
	vertical-align: middle;
}

.chido-compte .woocommerce-orders-table tbody tr:last-child th,
.chido-compte .woocommerce-orders-table tbody tr:last-child td {
	border-bottom: 0;
}

.chido-compte .woocommerce-orders-table tbody th {
	background: transparent;
	font-weight: 400;
	text-align: left;
}

.chido-compte .woocommerce-orders-table__cell-order-number a,
.chido-compte .woocommerce-orders-table__cell-order-date,
.chido-compte .woocommerce-orders-table__cell-order-total {
	font-family: "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.chido-compte .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/*
 * Sin sombra dura: la tabla lleva `overflow: hidden` para redondear sus
 * esquinas, así que la sombra del botón se recortaba contra el borde y
 * parecía que el botón se salía de la tabla.
 */
.chido-compte .woocommerce-orders-table .button {
	padding: 0.45rem 1rem;
	box-shadow: none;
	font-size: 0.82rem;
}

.chido-compte .woocommerce-orders-table .button:hover {
	box-shadow: none;
	transform: none;
	background: var(--yellow);
}


/*
 * En móvil la tabla se convierte en fichas. WooCommerce ya pone un
 * `data-title` en cada celda con el rótulo de su columna, así que la etiqueta
 * no hay que inventarla.
 */
@media ( max-width: 47.99rem ) {
	.chido-compte .woocommerce-orders-table,
	.chido-compte .woocommerce-orders-table tbody,
	.chido-compte .woocommerce-orders-table tr,
	.chido-compte .woocommerce-orders-table tbody th,
	.chido-compte .woocommerce-orders-table td {
		display: block;
		width: auto;
	}

	.chido-compte .woocommerce-orders-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}

	.chido-compte .woocommerce-orders-table tr {
		padding: 0.35rem 0;
		border-bottom: var(--stroke-thin);
	}

	.chido-compte .woocommerce-orders-table tbody tr:last-child {
		border-bottom: 0;
	}

	.chido-compte .woocommerce-orders-table tbody th,
	.chido-compte .woocommerce-orders-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 1rem;
		border: 0;
		text-align: right;
	}

	.chido-compte .woocommerce-orders-table tbody th::before,
	.chido-compte .woocommerce-orders-table td::before {
		content: attr( data-title );
		font: 600 0.62rem/1.3 "IBM Plex Mono", monospace;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		color: var(--muted);
	}
}

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

.chido-compte .woocommerce-Addresses {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
}

/*
 * El relleno de la tarjeta, otra vez y con más peso de selector.
 *
 * Cada dirección es también `.col-1` / `.col-2`, y `shop.css` les pone
 * `padding: 0` desde `.woocommerce .col2-set .col-1` —tres clases— para
 * deshacer el reparto de anchos del checkout. Mi regla de tarjeta tiene dos y
 * perdía: salía el recuadro dibujado pero el texto pegado al trazo.
 */
.chido-compte .woocommerce .col2-set .woocommerce-Address {
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
}

/*
 * Y el mismo limpia-flotados otra vez, ahora en la cabecera de cada
 * dirección:
 *
 *     .woocommerce-account .addresses .title::after,
 *     .woocommerce-account .addresses .title::before { content:" "; display:table }
 *
 * En una caja flexible son **dos elementos más** en la fila, así que el
 * título y el «Modifier» dejaban de repartirse la línea y acababan uno
 * encima del otro y mal alineados. Hacen falta cuatro clases para ganarle a
 * las tres de WooCommerce.
 */
.chido-compte .woocommerce .addresses .title::before,
.chido-compte .woocommerce .addresses .title::after {
	content: none;
}

/*
 * El título y el «Modifier» en la misma línea si caben, y uno debajo del otro
 * si no. El enlace de WooCommerce se llama «Modifier Adresse de facturation»
 * entero, así que en una tarjeta estrecha no hay línea que los aguante a los
 * dos: sin `wrap` se montaba encima del título.
 */
.chido-compte .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin-bottom: 0.75rem;
}

.chido-compte .woocommerce-Address-title h2,
.chido-compte .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.15rem;
}

.chido-compte .woocommerce-Address-title .edit {
	font: 600 0.8rem/1.2 var(--font-display);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--yellow);
	white-space: nowrap;
}

.chido-compte .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* --- perfil, acceso y registro ------------------------------------------ */

.chido-compte .woocommerce-EditAccountForm fieldset {
	margin: 1.75rem 0 0;
	padding: 1.1rem 1.25rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper-2);
}

.chido-compte .woocommerce-EditAccountForm legend {
	padding: 0 0.5rem;
	font: 700 1rem/1.2 var(--font-display);
}

/*
 * Los formularios de la cuenta comparten la rejilla del checkout —`.form-row`
 * ya viene vestido desde `shop.css`—, solo falta el aire entre filas y que
 * los pares nombre/apellido se pongan a dos columnas cuando hay sitio.
 */
.chido-compte .woocommerce-EditAccountForm,
.chido-compte form.woocommerce-form-login,
.chido-compte form.woocommerce-form-register,
.chido-compte form.edit-account,
.chido-compte .woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: 0.9rem;
}

/*
 * Sin sesión, WooCommerce sirve acceso y registro lado a lado en un
 * `#customer_login.col2-set`. Ese `col2-set` es el mismo que `shop.css` ya
 * desflota, así que aquí basta con darle la rejilla.
 */
.chido-compte #customer_login {
	display: grid;
	gap: clamp( 1.25rem, 3vw, 2rem );
	grid-template-columns: repeat( auto-fit, minmax( 19rem, 1fr ) );
	align-items: start;
}

.chido-compte #customer_login h2 {
	margin-bottom: 0.9rem;
}

/* El enlace que cambia entre «me conecto» y «me apunto». */
.chido-compte .chido-form-swap {
	margin: 0;
	font-size: 0.88rem;
	color: var(--muted);
}

.chido-compte .chido-form-swap-link {
	margin-left: 0.35rem;
	font: 600 0.88rem/1.3 var(--font-display);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--yellow);
}

.chido-compte .woocommerce-privacy-policy-text {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--muted);
}

@media ( min-width: 40rem ) {
	.chido-compte .woocommerce-EditAccountForm {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.chido-compte .woocommerce-EditAccountForm > .form-row-wide,
	.chido-compte .woocommerce-EditAccountForm > fieldset,
	.chido-compte .woocommerce-EditAccountForm > p:not( .form-row-first ):not( .form-row-last ),
	.chido-compte .woocommerce-EditAccountForm > .clear {
		grid-column: 1 / -1;
	}
}

.chido-compte .woocommerce-form-login__rememberme,
.chido-compte .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font: 0.9rem/1.4 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}

.chido-compte .woocommerce-form-login__rememberme input,
.chido-compte .woocommerce-form__input-checkbox {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--ink);
}

.chido-compte .woocommerce-LostPassword {
	margin: 0;
	font-size: 0.88rem;
}

/*
 * `div.clear` es el limpia-flotados de WooCommerce. Con el formulario en
 * rejilla ya no limpia nada, pero **sigue ocupando una celda**: dejaba tres
 * huecos vacíos entre el nombre y el correo. Se retira.
 */
.chido-compte .woocommerce-EditAccountForm > .clear {
	display: none;
}

/* --- el consentimiento DPP (módulo 039, al final del perfil) ------------ */

/*
 * Decide qué nombre aparece en la página pública del pasaporte. Es una
 * elección de privacidad, así que se pinta como tal: tres opciones con su
 * explicación, no tres radios sueltos en una línea.
 */
.chido-compte .chido-consent-pitch {
	margin: 0 0 1rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

.chido-compte .chido-consent-options {
	display: grid;
	gap: 0.6rem;
}

.chido-compte .chido-consent-option {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.7rem;
	align-items: start;
	padding: 0.8rem 1rem;
	border: var(--stroke-thin);
	border-radius: var(--r);
	background: var(--paper);
	cursor: pointer;
}

.chido-compte .chido-consent-option:hover {
	background: var(--paper);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-consent-option input[type="radio"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ink);
}

/* El estado elegido se ve sin tener que mirar el círculo. */
.chido-compte .chido-consent-option:has( input:checked ) {
	border: var(--stroke);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
}

.chido-compte .chido-consent-option__body {
	display: grid;
	gap: 0.15rem;
}

.chido-compte .chido-consent-option__title {
	font: 700 0.95rem/1.25 var(--font-display);
}

.chido-compte .chido-consent-option__desc {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.chido-compte .chido-consent-note {
	margin: 1rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
}

/* --- el detalle de un pedido ------------------------------------------- */

/*
 * `shop.css` ya viste `.woocommerce-order-details` y las direcciones para la
 * pantalla de gracias, y es el mismo marcado. Aquí solo falta separarlo del
 * título de la pantalla y que las dos direcciones queden en paralelo.
 */
.chido-compte .woocommerce-order-details,
.chido-compte .woocommerce-customer-details {
	margin-top: 1.75rem;
}

.chido-compte .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
}

/* --- mot de passe perdu, los dos pasos --------------------------------- */

/*
 * `/mon-compte/mot-de-passe-perdu/` sirve dos formularios distintos bajo la
 * misma URL —pedir el enlace y elegir la contraseña nueva— y los dos salen de
 * `woocommerce-ResetPassword`. Es la única pantalla de la cuenta a la que se
 * llega **sin sesión**, así que es la que ve alguien que ya no puede entrar:
 * conviene que no parezca rota.
 *
 * Los campos ya venían vestidos por `.form-row` de `shop.css`, y el botón por
 * el bloque de botones —engancha por el `<div class="woocommerce">` con que
 * WooCommerce envuelve la cuenta, no por la clase del `<body>`, que aquí no
 * la lleva—. Lo que faltaba era la caja: el formulario era un bloque suelto
 * con los márgenes de párrafo del navegador, y el campo del correo cruzaba el
 * panel entero de lado a lado.
 */
.chido-compte .woocommerce-ResetPassword {
	display: grid;
	gap: 0.9rem;
}

/* La instrucción que WooCommerce pone de primeras, sin clase donde agarrarse. */
.chido-compte .woocommerce-ResetPassword > p:first-of-type {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/*
 * El mismo `div.clear` que ya se retira del formulario del perfil: con la
 * rejilla no limpia ningún flotado, pero sigue ocupando una celda y abría un
 * hueco entre el campo y el botón.
 */
.chido-compte .woocommerce-ResetPassword > .clear {
	display: none;
}

/* --- el portal de acceso: tarjeta y columna de al lado ----------------- */

/*
 * La maqueta resuelve esta pantalla a dos columnas —`mot-de-passe-oublie.html`,
 * clases `.auth`, `.auth-card` y `.auth-aside`—: el formulario en una tarjeta
 * con trazo y sombra, y al lado una columna que explica que el mismo acceso
 * vale para los pedidos de la Boutique y para las partes sociales, con el
 * correo del sociétariat para quien perdió hasta la dirección con la que se
 * dio de alta.
 *
 * Aquí no se puede reutilizar `css/compte.css`: esa hoja es la de la maqueta y
 * en WordPress no se encola —la cuenta carga `detail.css` más esta—. Así que
 * las reglas se portan, con el prefijo del tema y los mismos valores del
 * socle, y el marcado lo pone `functions.php` desde los enganches que el
 * propio WooCommerce deja alrededor de sus formularios.
 *
 * Solo viste el mot de passe perdu, sus dos pasos y la confirmación. El acceso
 * y el registro siguen con `#customer_login`, más arriba: WooCommerce los
 * sirve lado a lado y esa pantalla ya estaba resuelta.
 */
.chido-compte .chido-auth {
	display: grid;
	gap: clamp( 1.5rem, 4vw, 2.5rem );
	align-items: start;
}

.chido-compte .chido-auth__card {
	padding: clamp( 1.15rem, 4vw, 2.25rem );
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--pop);
}

.chido-compte .chido-auth__card h2 {
	margin: 0 0 0.35rem;
	font: 800 clamp( 1.5rem, 4vw, 2rem )/1.05 var(--font-display);
}

.chido-compte .chido-auth__intro {
	margin: 0 0 1.5rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/*
 * La instrucción que WooCommerce mete de primeras dentro del formulario
 * duplicaría lo que ya dice la entradilla de la tarjeta. Se retira: el mismo
 * mensaje dos veces seguidas, uno encima del otro, es peor que ninguno.
 */
.chido-compte .chido-auth__card .woocommerce-ResetPassword > p:first-of-type {
	display: none;
}

.chido-compte .chido-auth__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 1rem 0 0;
	font-size: 0.82rem;
}

.chido-compte .chido-auth__row a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.chido-compte .chido-auth__row a:hover {
	color: var(--pink);
}

.chido-compte .chido-auth__aside {
	padding: clamp( 1.15rem, 3vw, 1.75rem );
	border: var(--stroke-thin);
	border-radius: var(--r-lg);
	background: var(--paper-2);
}

.chido-compte .chido-auth__aside h2 {
	margin: 0 0 0.75rem;
	font: 800 1.2rem/1.15 var(--font-display);
}

.chido-compte .chido-auth__aside p {
	margin: 0 0 0.75rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.chido-compte .chido-auth__aside p:last-child {
	margin-bottom: 0;
}

/* El mismo corte que la maqueta: hasta aquí las dos cajas van apiladas. */
@media ( min-width: 52rem ) {
	.chido-compte .chido-auth {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 16rem, 0.85fr );
	}
}