/* ==================================================================
 * WIST · Pantallas de cuenta
 * ------------------------------------------------------------------
 * Solo estructura. Color, tipografia, espacio y radio se consumen por
 * variable: ninguno se declara aqui.
 *
 * Se carga solo en las paginas de cuenta. Las plantillas de estas pantallas
 * las renderiza el elemento "Account page" de Bricks, que vive en la pagina
 * Mi cuenta. Bricks no trae override de WooCommerce para la cuenta, solo para
 * carrito y checkout, asi que sin ese elemento las plantillas wc_account_* no
 * se aplican nunca.
 * ================================================================== */

/* ------------------------------------------------------------------ */
/* Formulario de autenticacion dentro de la tarjeta                    */
/* -------------------------------------------------------------------
 * WooCommerce reparte estos formularios en dos columnas con las clases
 * form-row-first y form-row-last, que valen menos de la mitad del ancho y
 * flotan. Dentro de una tarjeta estrecha no hay dos columnas que repartir:
 * cada fila ocupa el ancho completo.
 * ------------------------------------------------------------------ */

.wist-auth-form form {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-300);
	margin: 0;
}

.wist-auth-form .form-row,
.wist-auth-form .form-row-first,
.wist-auth-form .form-row-last {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wist-auth-form .clear {
	display: none;
}

.wist-auth-form label {
	display: block;
	margin-bottom: var(--wist-space-100);
	color: var(--wist-ink-primary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

.wist-auth-form .required {
	color: var(--wist-ink-secondary);
}

/* El tope global de 24 rem para campos de una linea deja el campo mas corto
   que la tarjeta que lo contiene, que ya esta acotada (600 px desde el
   2026-10-02, antes 480). El selector
   se acota igual que la regla global que lo impone, que es
   "body.bricks-is-frontend .woocommerce form .form-row input.input-text".
   Hay que igualar sus tres elementos y superar sus cuatro clases, si no
   gana ella. */
body.bricks-is-frontend .woocommerce .wist-auth-form form .form-row input.input-text {
	width: 100%;
	max-width: 100%;
}

/* El mensaje que WooCommerce antepone al formulario. Hace de bajada bajo el
   titular, que va centrado como en el asistente (2026-10-02), asi que se
   centra con el. */
.wist-auth-form form > p:first-child {
	margin: 0;
	text-align: center;
	color: var(--wist-ink-secondary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* El icono de mostrar contrasena lo inyecta WooCommerce en un envoltorio que
   no declara posicionamiento, asi que se posicionaba contra un ancestro
   lejano y caia fuera del campo. */
.wist-auth-form .password-input {
	display: block;
	position: relative;
}

.wist-auth-form .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wist-ink-secondary);
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Boton de envio                                                      */
/* -------------------------------------------------------------------
 * Es la unica accion de la pantalla, asi que va al ancho completo, con el
 * tamano L de la seccion 08 del master.
 * ------------------------------------------------------------------ */

.wist-auth-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--wist-radius-lg);
	background: var(--wist-blue-base);
	color: var(--wist-blue-on);
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wist-auth-form button[type="submit"]:hover {
	background: var(--wist-blue-base-hover);
}

.wist-auth-form button[type="submit"]:active {
	transform: scale(0.97);
}

.wist-auth-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Salida de la pantalla                                               */
/* ------------------------------------------------------------------ */

.wist-auth-volver {
	display: block;
	min-height: 44px;
	padding-top: var(--wist-space-100);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wist-auth-volver:hover {
	color: var(--wist-ink-primary);
}

/* ------------------------------------------------------------------ */
/* Avisos de WooCommerce dentro de la tarjeta                          */
/* ------------------------------------------------------------------ */

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	margin: 0 0 var(--wist-space-300);
	border-radius: var(--wist-radius-md);
}

@media (prefers-reduced-motion: reduce) {

	.wist-auth-form button[type="submit"] {
		transition: none;
	}

	.wist-auth-form button[type="submit"]:active {
		transform: none;
	}
}

/* ==================================================================
 * Barra lateral de Mi Cuenta
 * ------------------------------------------------------------------
 * Solo lo que NINGUN control del elemento "WooCommerce Account page"
 * expone. Todo lo demas (fondo, borde, radio, separacion, padding de
 * cada entrada, tipografia y estado activo) esta puesto en el panel
 * del elemento, en la pagina 12.
 *
 * Lo de aqui es:
 *   a) que la barra no se estire a toda la altura
 *   b) el bloque de identidad, que es marcado propio
 *   c) el icono junto al rotulo
 *   d) el trato aparte de "Salir"
 * ================================================================== */

/* (a) Alto, relleno y adherencia de la barra.

   `align-self: start`: sin esto la barra se estira hasta igualar el alto
   del contenido y deja un vacio enorme debajo de la ultima entrada. El
   elemento no expone align-items del contenedor exterior: `direction`
   solo escribe flex-direction sobre `.woocommerce:not(#brx-content)`.
   Ademas es requisito para que `position: sticky` funcione: un item flex
   estirado ocupa todo el alto y nunca tiene margen donde desplazarse.

   `padding`: el relleno de card por defecto del master, 24 px. El elemento
   expone navItemPadding para cada entrada, pero NINGUN control para el
   relleno del contenedor de la barra. Con las entradas a 8 px se cumple
   el par admitido «8 a 24» de la seccion 01.

   `sticky`: el desplazamiento sale del alto del header mas un paso de la
   escala, para que la barra no quede pegada al borde inferior de la
   cabecera cuando se hace scroll. */
.woocommerce-MyAccount-navigation {
	align-self: start;
	padding: var(--wist-space-300);
	position: sticky;
	top: calc(var(--wist-header-h) + var(--wist-admin-bar) + var(--wist-space-300));
}

/* Alto minimo del area tactil: 40 px en escritorio, seccion 12 del master.
   No se consigue con relleno sin salirse de la escala, asi que va aqui. */
.woocommerce-MyAccount-navigation a {
	min-height: 2.5rem;
}

/* (b) Bloque de identidad */
/* Sin relleno horizontal propio: lo pone la tarjeta. Arriba y abajo, un
   paso por debajo del relleno de la tarjeta, para que el filete quede a la
   misma distancia del correo y de la primera entrada. */
.wist-cuenta-ident {
	display: flex;
	align-items: center;
	gap: var(--wist-space-150);
	padding: 0 0 var(--wist-space-200);
	margin-bottom: var(--wist-space-200);
	border-bottom: 1px solid var(--wist-border-hairline);
}

.wist-cuenta-ident__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* El nombre y el correo se recortan en vez de desbordar: un correo largo
   ensancharia la barra y descuadraria el reparto de dos columnas. */
.wist-cuenta-ident__nombre,
.wist-cuenta-ident__mail {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wist-cuenta-ident__nombre {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--wist-ink-primary);
}

.wist-cuenta-ident__mail {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wist-ink-secondary);
}

/* (c) Icono y rotulo.
   El enlace lo pinta Bricks como `display: block`, asi que hay que pasarlo
   a flex para alinear el icono con el texto. */
.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: var(--wist-space-150);
}

.wist-cuenta-ico {
	width: var(--wist-icon-size);
	height: var(--wist-icon-size);
	flex: none;
}

/* (d) "Salir" va aparte: mas pequeno, en tinta secundaria y tras un filete.
   El elemento no permite dirigirse a una entrada concreta, por eso va aqui.
   El margen negativo compensa el gap del `ul`, que lo pone el control
   navGap, para que el filete quede a la misma distancia por arriba y por
   abajo en vez de sumarse al hueco. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--wist-space-150);
	padding-top: var(--wist-space-200);
	border-top: 1px solid var(--wist-border-hairline);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	font-size: 0.8125rem;
	color: var(--wist-ink-secondary);
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--wist-danger-text);
}

/* En tablet y movil la barra pasa a fila: el bloque de identidad y el
   filete de "Salir" dejan de tener sentido en horizontal. */
@media (max-width: 991px) {
	/* La barra pasa a fila sobre el contenido. Adherirla ahi robaria alto
	   util en una pantalla que ya va justa. */
	.woocommerce-MyAccount-navigation {
		position: static;
		padding: var(--wist-space-200);
	}

	.woocommerce-MyAccount-navigation a {
		min-height: 2.75rem;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-wrap: wrap;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ==================================================================
 * La barra en telefono: una tira que se desliza
 * ------------------------------------------------------------------
 * En tablet cabe en dos filas y se lee bien. En telefono no: con el
 * bloque de identidad encima y cinco entradas envolviendo, la barra
 * se comia media pantalla antes de llegar al contenido, que es a lo
 * que se viene.
 *
 * Pasa a UNA linea que se desplaza en horizontal. Ocupa el alto de
 * una fila en vez de cuatro, y el patron se reconoce: es el mismo de
 * las pestañas de cualquier app.
 * ================================================================== */
@media (max-width: 767px) {
	/* La identidad se va: el header ya dice quien eres, y aqui costaba
	   mas alto que las cinco entradas juntas. */
	.wist-cuenta-ident {
		display: none;
	}

	/* `min-width: 0` y `max-width: 100%` en LOS DOS niveles, y no es
	   redundancia: sin ellos la lista, que en nowrap mide lo que suman sus
	   cinco entradas, empuja al <nav> y este a la pagina entera. El
	   `overflow-x` de abajo solo desplaza si la caja que lo lleva TIENE un
	   ancho que respetar; si puede crecer, no hay nada que desbordar y el
	   scroll se lo come el documento.

	   Es la misma trampa del panel que se salia del contenedor: un hijo
	   flex vale `min-width: auto` y no encoge por debajo de su contenido. */
	.woocommerce-MyAccount-navigation {
		min-width: 0;
		max-width: 100%;
		padding: var(--wist-space-100);
		border-radius: var(--wist-radius-lg);
	}

	.woocommerce-MyAccount-navigation ul {
		min-width: 0;
		max-width: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;

		/* Al llegar al final de la tira, el gesto no se propaga a la pagina
		   ni dispara el «atras» del navegador. */
		overscroll-behavior-x: contain;
		gap: var(--wist-space-050);

		/* El desplazamiento se detiene con cada entrada, para que ninguna
		   quede cortada a medias al soltar el dedo. */
		scroll-snap-type: x proximity;

		/* Aqui SI se oculta la barra de desplazamiento, y es la excepcion
		   que confirma la regla del master: bajo cinco pildoras, un canal
		   horizontal es ruido. Bricks hace lo mismo en sus swipers. */
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation li {
		scroll-snap-align: start;
	}

	/* Sin encoger: una entrada comprimida parte su rotulo en dos lineas y
	   descuadra la altura de toda la tira. */
	.woocommerce-MyAccount-navigation a {
		flex: none;
		white-space: nowrap;
	}

	/* «Salir» pierde el filete: en horizontal no separa nada. Se distingue
	   por el color, que ya lo tiene. */
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ==================================================================
 * Tablas de la cuenta · seccion 11 del master
 * ------------------------------------------------------------------
 * Rige pedidos y descargas. Contenedor con borde en los cuatro lados,
 * radio de 1.375 rem y overflow oculto; cabecera en Inter 600 de
 * 0.6875 rem en mayusculas con tracking; celda numerica con
 * tabular-nums y alineada a la derecha.
 *
 * Ningun control del elemento "Account page" llega a la tabla: sus
 * grupos son navegacion y contenido, y `contentTypogaphy` solo escribe
 * tipografia sobre el contenedor.
 * ================================================================== */

.woocommerce-orders-table,
.woocommerce-table--order-downloads,
.woocommerce-MyAccount-downloads {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wist-border-decorative);
	border-radius: var(--wist-radius-xl);
	overflow: hidden;
	background: var(--wist-surface);
	font-family: 'Inter', system-ui, sans-serif;
	margin: 0;
}

/* border-collapse mata el radio en varios navegadores. Con separate y
   spacing cero el radio se respeta y las lineas siguen sin duplicarse,
   porque los filetes van como border-bottom de la celda y no del tr. */
@supports (overflow: clip) {
	.woocommerce-orders-table,
	.woocommerce-table--order-downloads,
	.woocommerce-MyAccount-downloads {
		border-collapse: separate;
		border-spacing: 0;
	}
}

/* OJO: `thead th`, no `th` a secas. En orders.php la PRIMERA columna se
   pinta como <th scope="row">, no como <td>, asi que una regla sobre `th`
   le caia encima al numero de pedido y al resumen de articulos y los dejaba
   en mayusculas y a 11 px. */
.woocommerce-orders-table thead th,
.woocommerce-MyAccount-downloads thead th {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wist-ink-secondary);
	text-align: left;
	padding: var(--wist-space-150) var(--wist-space-300);
	border-bottom: 1px solid var(--wist-border-hairline);
	white-space: nowrap;
	background: none;
}

.woocommerce-orders-table td,
.woocommerce-orders-table tbody th,
.woocommerce-MyAccount-downloads td {
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wist-ink-primary);
	padding: var(--wist-space-200) var(--wist-space-300);
	border-bottom: 1px solid var(--wist-border-hairline);
	vertical-align: middle;
	background: none;
}

.woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-downloads tr:last-child td {
	border-bottom: 0;
}

/* Cifras: mismo ancho por digito y a la derecha, para que las columnas
   de totales se puedan comparar de un vistazo. */
.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__header-order-total,
.woocommerce-MyAccount-downloads .download-remaining {
	font-variant-numeric: tabular-nums;
	text-align: right;
	font-weight: 500;
}

.woocommerce-orders-table__cell-order-date,
.woocommerce-MyAccount-downloads .download-expires {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Numero de pedido y resumen de articulos */
.wist-ped-num {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wist-ink-primary);
	text-decoration: none;
}

.wist-ped-num:hover {
	color: var(--wist-blue-base);
}

.wist-ped-art {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wist-ink-secondary);
}

/* Distintivo de estado.
   Fondo en superficie y el color semantico SOLO en contorno y texto: los
   cuatro semanticos no tienen variante oscura y un relleno de color se
   romperia en modo oscuro. Seccion 12 del master. */
/* Distintivo de estado: contorno y punto, con el color de CADA ROL.
   ------------------------------------------------------------------
   Fondo en superficie, y el color semantico repartido como manda la
   seccion 12: el BASE porta el contorno, el TEXTO porta el texto. Son
   dos valores distintos del mismo estado, y ahi estaba el error de la
   primera version: tiraba de `currentColor` para las dos cosas, asi que
   el contorno salia con la tinta oscura del texto.

   SIN PUNTO, decidido el 2026-09-10. Iba en el mismo color que el borde
   y el texto, asi que no anadia informacion: repetia la que ya daban los
   otros dos. Y no ayuda a quien no distingue colores, que es el
   argumento con el que suele defenderse: para eso esta la palabra.

     Success   base #16A34A   texto #065F46
     Warning   base #FFA100   texto #DF6C00
     Danger    base #DC2626   texto #991B1B
     Info      base #1660FF   texto #0B3FBF

   El master avisa de que warning base y success base quedan por debajo
   de 3:1 sobre su propio fondo, y por eso **no portan informacion por si
   solos**: aqui el significado lo dice el texto que va al lado.

   Radio de 0.625 rem, el que la seccion 06 asigna a badge y chip. */
.wist-estado {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.25rem 0.5rem;
	border-radius: var(--wist-radius-xs);
	background: var(--wist-surface);
	border: 1px solid var(--wist-estado-base, var(--wist-border-decorative));
	color: var(--wist-estado-texto, var(--wist-ink-secondary));
	white-space: nowrap;
}

/* Cada estado solo declara sus dos variables. El aspecto vive arriba, en
   un unico sitio. */
/* «Pedido recibido» (WIST Shipment Tracking 0.2.0, 2026-10-19) va con
   «Procesando»: los dos son el pedido en manos de la tienda. */
.wist-estado--recibido,
.wist-estado--processing,
.wist-estado--on-hold {
	--wist-estado-base: var(--wist-info-base);
	--wist-estado-texto: var(--wist-info-text);
}

/* «Listo para retirar» (retiro en el local, 2026-10-12) va con «Enviado»:
   los dos esperan algo fuera de la tienda. */
.wist-estado--shipped,
.wist-estado--listo-retiro {
	--wist-estado-base: var(--wist-warning-base);
	--wist-estado-texto: var(--wist-warning-text);
}

.wist-estado--delivered,
.wist-estado--completed {
	--wist-estado-base: var(--wist-success-base);
	--wist-estado-texto: var(--wist-success-text);
}

.wist-estado--cancelled,
.wist-estado--failed,
.wist-estado--refunded {
	--wist-estado-base: var(--wist-danger-base);
	--wist-estado-texto: var(--wist-danger-text);
}

/* «Pendiente de pago» no es un estado semantico: no hay par para el, y
   ademas conviene que no compita con los que si piden atencion. */
.wist-estado--pending {
	--wist-estado-base: var(--wist-border-interactive);
	--wist-estado-texto: var(--wist-ink-secondary);
}

/* ------------------------------------------------------------------
 * El chip en modo oscuro: se rellena
 * -------------------------------------------------------------------
 * El contorno funciona sobre superficie clara, pero en oscuro la
 * superficie es #20213F y la tinta de cada estado es su valor mas
 * oscuro: #065F46 el verde, #991B1B el rojo. Tinta oscura sobre fondo
 * oscuro no se lee, por mucho contorno que lleve.
 *
 * En oscuro el chip pasa al FONDO del estado, que es el valor claro y
 * **es el mismo en los dos modos** porque los semanticos no tienen
 * variante oscura. Queda una pastilla clara sobre superficie oscura,
 * con su tinta encima: el mismo par que en claro, invertido el papel
 * del fondo. Es como lo muestra la guia.
 *
 * Basta el atributo, sin `prefers-color-scheme`: Bricks emite sus propios
 * tokens oscuros bajo `:root[data-brx-theme="dark"]` (assets.php:861) y un
 * script en `wp_head` PONE ese atributo leyendo la preferencia del sistema
 * cuando el modo esta en automatico (setup.php:92). El atributo es la unica
 * fuente, tanto si el usuario eligio como si no.
 * ------------------------------------------------------------------ */
:root[data-brx-theme="dark"] .wist-estado {
	background: var(--wist-estado-fondo, var(--wist-surface-nested));
	border-color: transparent;
}

:root[data-brx-theme="dark"] .wist-estado--recibido,
:root[data-brx-theme="dark"] .wist-estado--processing,
:root[data-brx-theme="dark"] .wist-estado--on-hold {
	--wist-estado-fondo: var(--wist-info-bg);
}

:root[data-brx-theme="dark"] .wist-estado--shipped,
:root[data-brx-theme="dark"] .wist-estado--listo-retiro {
	--wist-estado-fondo: var(--wist-warning-bg);
}

:root[data-brx-theme="dark"] .wist-estado--delivered,
:root[data-brx-theme="dark"] .wist-estado--completed {
	--wist-estado-fondo: var(--wist-success-bg);
}

:root[data-brx-theme="dark"] .wist-estado--cancelled,
:root[data-brx-theme="dark"] .wist-estado--failed,
:root[data-brx-theme="dark"] .wist-estado--refunded {
	--wist-estado-fondo: var(--wist-danger-bg);
}

/* Acciones */
.woocommerce-orders-table__cell-order-actions,
.woocommerce-MyAccount-downloads .download-file {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-downloads .download-file .button {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wist-blue-base);
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 0 var(--wist-space-200);
	min-height: 0;
	text-decoration: none;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-MyAccount-downloads .download-file .button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	color: var(--wist-blue-base-hover);
}

/* ------------------------------------------------------------------
 * Movil: la tabla se convierte en tarjetas
 * -------------------------------------------------------------------
 * El master prohibe comprimir columnas: degrada la lectura por debajo
 * del umbral utilizable. WooCommerce ya escribe el rotulo de cada
 * columna en `data-title`, asi que la etiqueta sale de ahi y no hace
 * falta duplicarla en el marcado.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.woocommerce-orders-table,
	.woocommerce-MyAccount-downloads {
		border: 0;
		background: none;
	}

	.woocommerce-orders-table thead,
	.woocommerce-MyAccount-downloads thead {
		/* No se oculta con display:none, que lo saca del arbol de
		   accesibilidad: se saca de la vista conservandolo para el
		   lector de pantalla. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.woocommerce-orders-table tr,
	.woocommerce-MyAccount-downloads tr {
		display: flex;
		flex-direction: column;
		gap: var(--wist-space-150);
		padding: var(--wist-space-300);
		margin-bottom: var(--wist-space-300);
		background: var(--wist-surface);
		border: 1px solid var(--wist-border-decorative);
		border-radius: var(--wist-radius-xl);
	}

	/* OJO al `tbody th`. La PRIMERA columna de orders.php se pinta como
	   <th scope="row">, no como <td>, asi que un reset escrito solo sobre
	   `td` la deja con su filete y su relleno de tabla: dentro de la tarjeta
	   salian lineas sueltas y un hueco que no cuadraba con el resto.
	   Es el mismo tropiezo de las mayusculas, y por la misma causa. */
	.woocommerce-orders-table td,
	.woocommerce-orders-table tbody th,
	.woocommerce-MyAccount-downloads td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wist-space-200);
		padding: 0;
		border: 0;
		text-align: left;
	}

	/* Sin filetes dentro de la tarjeta. La tarjeta ya separa un pedido de
	   otro; una reja de lineas dentro compite con ella y trocea algo que se
	   lee como una sola cosa. La jerarquia la hace el espacio. */
	.woocommerce-orders-table tbody tr td,
	.woocommerce-orders-table tbody tr th,
	.woocommerce-MyAccount-downloads tbody tr td {
		border-bottom: 0;
	}

	/* El numero de pedido encabeza la tarjeta y se separa del resto. */
	.woocommerce-orders-table__cell-order-number {
		padding-bottom: var(--wist-space-150);
		border-bottom: 1px solid var(--wist-border-hairline);
	}

	.woocommerce-orders-table td::before,
	.woocommerce-MyAccount-downloads td::before {
		content: attr(data-title);
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.07em;
		color: var(--wist-ink-secondary);
		flex: none;
	}

	/* En la celda del pedido el rotulo sobra: el numero ya se ve, y
	   ademas lleva el resumen de articulos debajo. */
	.woocommerce-orders-table__cell-order-number {
		flex-direction: column;
		align-items: stretch;
	}

	/* El boton se separa del resto de la tarjeta. Su tamano se define mas
	   abajo, junto a la regla de escritorio: si se pusiera aqui, esa la
	   pisaria por venir despues en la hoja. */
	.woocommerce-orders-table__cell-order-actions {
		margin-top: var(--wist-space-100);
	}

	/* Dos celdas sin rotulo. La del pedido porque se explica sola, y la de
	   acciones porque su columna no tiene titulo: `data-title` viene vacio y
	   el pseudo-elemento pintaria una caja invisible que igual ocupa su
	   hueco en la fila flex. */
	.woocommerce-orders-table__cell-order-number::before,
	.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}

	/* Sin rotulo enfrente, el enlace se queda solo y arranca a la
	   izquierda, alineado con el resto de la tarjeta. */
	.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
	}

	.woocommerce-orders-table__cell-order-total,
	.woocommerce-orders-table__cell-order-actions,
	.woocommerce-MyAccount-downloads .download-remaining,
	.woocommerce-MyAccount-downloads .download-file {
		text-align: left;
	}

	/* Una celda de acciones vacia dejaria un hueco con su rotulo. */
	.woocommerce-orders-table__cell-order-actions:empty,
	.woocommerce-MyAccount-downloads .download-file:empty {
		display: none;
	}
}

/* ==================================================================
 * Desbordamiento del panel
 * ------------------------------------------------------------------
 * El elemento reparte `.woocommerce` en flex. Un hijo flex tiene
 * `min-width: auto` por defecto, asi que la tabla, que no puede
 * encogerse por debajo de su contenido, empujaba el panel MAS ANCHO
 * que el contenedor de 1140 px y se salia por la derecha.
 *
 * `min-width: 0` deja que el panel se encoja y la tabla se ajuste.
 * Ningun control del elemento expone esto.
 * ================================================================== */

.woocommerce-MyAccount-content {
	min-width: 0;
	max-width: 100%;
}

/* Cinturon: ni la barra ni el panel pueden ensanchar la pagina. El master
   es explicito en que el cuerpo del documento no se desplaza en horizontal;
   lo que no quepa, que se desplace DENTRO de su propia caja. */
.woocommerce-MyAccount-navigation {
	min-width: 0;
	max-width: 100%;
}

/* Cualquier tabla que aun no quepa hace scroll DENTRO de su caja, nunca
   empujando el ancho de la pagina. Regla del master: el cuerpo del
   documento no se desplaza en horizontal. */
.woocommerce-MyAccount-content table {
	max-width: 100%;
}

/* ==================================================================
 * Boton dentro de tabla
 * ------------------------------------------------------------------
 * La pildora azul es del sistema: Theme Styles > WooCommerce - Button,
 * la misma del checkout. No se cambia su identidad, solo su TAMANO:
 * con padding 10/20 y 16 px de texto, diez filas seguidas convierten
 * la tabla en una columna de botones.
 * ================================================================== */

/* Enlace, no boton.
   ------------------------------------------------------------------
   La pildora azul del sistema pesa demasiado repetida fila tras fila:
   una tabla de diez pedidos se convertia en una columna de botones, y
   en la tarjeta de movil competia con el propio contenido.

   Como enlace subrayado conserva su color de accion y su area tactil
   por el alto minimo, pero deja de reclamar la mirada. Es una accion
   secundaria: ver el detalle de algo que ya se esta viendo.

   Se anula lo que hereda de Theme Styles > WooCommerce - Button, que es
   quien le pone el fondo, el radio y el relleno. */
.woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-MyAccount-downloads .download-file a.button {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0;
	margin: 0 0 0 var(--wist-space-200);
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wist-blue-base);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-MyAccount-downloads .download-file a.button:hover {
	background: none;
	color: var(--wist-blue-base-hover);
}

/* En movil el boton es la unica accion de la tarjeta y va a ancho completo,
   asi que pide mas cuerpo: 16 de relleno, el siguiente paso de la escala.
   Con su linea de texto da 52 px de area tactil.

   VA AQUI, DESPUES de la regla de arriba, y no en el bloque movil de mas
   arriba en la hoja. Un `@media` NO anade especificidad: con las dos reglas
   igualadas gana la que aparece despues en el archivo, asi que la version
   compacta de escritorio se imponia tambien en el telefono. */
@media (max-width: 767px) {
	/* En la tarjeta el enlace arranca a la izquierda, alineado con el
	   resto del contenido, y conserva 44 px de area tactil. */
	.woocommerce-orders-table__cell-order-actions a.button {
		margin: 0;
		min-height: 2.75rem;
	}
}

/* ==================================================================
 * Seguimiento: el hilo entre pasos
 * ------------------------------------------------------------------
 * Faltaba. Sin el, los tres puntos se leen como tres cosas sueltas y
 * no como un recorrido.
 *
 * Va aqui y no en el elemento porque es un pseudo-elemento posicionado
 * respecto del paso, y Bricks no expone `::before` en ningun control.
 *
 * La clase era `wist-paso` hasta el 2026-10-12. Chocaba con la tarjeta de
 * paso de wist-paso.css (misma clase, cargada en Mi cuenta desde el
 * 2026-10-07): cada paso heredaba su alto minimo de pantalla completa y el
 * seguimiento quedaba con 400 px de hueco. Ahora es `wist-seg-paso`, en
 * esta hoja y en el paso de la plantilla 5209 (`segpas`).
 * ================================================================== */

.wist-seg-paso {
	position: relative;
	--wist-hilo: 2px;
}

/* El hilo une los puntos. Lo dibujan dos pseudo-elementos de cada paso:
   `::before` sale del punto hacia el paso siguiente y `::after` llega desde
   el anterior. Así el tramo entre dos puntos se arma con la mitad de cada
   paso y cada punto puede ir donde le toque (izquierda, centro o derecha).
   El contenedor del bucle no lleva hueco entre columnas: el hilo lo cruza.

   El centro del punto esta a .75rem, que es la mitad de su 1.5rem. El
   grosor va en `--wist-hilo`: 2px pendiente, 4px recorrido (2026-10-24,
   decisión del dueño). */
.wist-seg-paso::before,
.wist-seg-paso::after {
	content: "";
	position: absolute;
	top: calc(0.75rem - var(--wist-hilo) / 2);
	height: var(--wist-hilo);
	background: var(--wist-border-decorative);
}

.wist-seg-paso::before {
	left: 1.5rem;
	right: 0;
}

/* El ultimo no sale hacia ningun lado y el primero no recibe hilo. */
.wist-seg-paso:last-child::before,
.wist-seg-paso:first-child::after {
	display: none;
}

/* Tramo ya recorrido en verde y mas grueso. `::before` mira si el paso
   trae el punto de hecho Y si el SIGUIENTE ya empezó; `::after`, si el
   propio paso ya empezó. Donde no haya `:has` queda el hilo neutro.
   Desde el 2026-10-24 (decisión del dueño): con el pedido en «Pedido
   recibido» el paso 2 queda pendiente y el hilo gris hasta que operaciones
   lo pase a «Procesando». */
.wist-seg-paso:has(.wist-punto-hecho):has(+ .wist-seg-paso :is(.wist-punto-hecho, .wist-punto-ahora))::before,
.wist-seg-paso:has(.wist-punto-hecho, .wist-punto-ahora)::after {
	--wist-hilo: 4px;
	background: var(--wist-success-base);
}

/* Pedido cancelado (2026-10-24): el tramo que llega al paso cancelado va
   en rojo, igual que su punto. */
.wist-seg-paso:has(+ .wist-seg-paso .wist-punto-cancel)::before,
.wist-seg-paso:has(.wist-punto-cancel)::after {
	--wist-hilo: 4px;
	background: var(--wist-danger-base);
}

/* En un cancelado, «Pedido recibido» no va en verde: verde + rojo seguidos
   se leían como un fallo de la línea. Va en amarillo (aviso). */
.wist-seg-paso:has(+ .wist-seg-paso .wist-punto-cancel) .wist-punto-hecho {
	background: var(--wist-warning-base);
}

/* Check y X de los puntos: a 14 px el trazo de 2 del SVG (dibujado para
   24) queda en poco más de un píxel y no se nota. Bricks no tiene control
   de grosor de trazo; se sube aquí (2026-10-24, decisión del dueño). */
.wist-seg-paso svg.brxe-icon {
	stroke-width: 3.5;
}

/* Escritorio: la línea ocupa todo el ancho de la tarjeta, sin importar lo
   largo del texto (guía, «Despachado con…», detalle del cancelado). Columnas
   iguales; el primer paso va a la izquierda, los del medio centrados y el
   último a la derecha, con su texto alineado igual. Antes el último paso
   empezaba donde empezaba su columna y la línea quedaba corta. */
@media (min-width: 768px) {
	:has(> .wist-seg-paso .wist-punto-cancel) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.wist-seg-paso:not(:first-child) {
		padding-left: 1rem;
	}

	.wist-seg-paso:not(:first-child):not(:last-child) {
		align-items: center;
		text-align: center;
	}

	.wist-seg-paso:not(:first-child):not(:last-child) > :first-child {
		justify-content: center;
	}

	.wist-seg-paso:not(:first-child):not(:last-child)::before {
		left: calc(50% + 0.75rem);
	}

	.wist-seg-paso:not(:first-child):not(:last-child)::after {
		left: 0;
		right: calc(50% + 0.75rem);
	}

	.wist-seg-paso:last-child:not(:first-child) {
		align-items: flex-end;
		text-align: right;
		padding-right: 0;
	}

	.wist-seg-paso:last-child:not(:first-child) > :first-child {
		justify-content: flex-end;
	}

	.wist-seg-paso:last-child::after {
		left: 0;
		right: 1.5rem;
	}
}

/* En movil vuelve a vertical: tres pasos en fila no caben, y el texto de
   cada uno quedaria en una columna de apenas cien pixeles. Basta con el
   hilo que sale de cada punto hacia abajo. */
@media (max-width: 767px) {
	.wist-seg-paso::before {
		left: calc(0.75rem - var(--wist-hilo) / 2);
		right: auto;
		top: 1.5rem;
		bottom: 0;
		width: var(--wist-hilo);
		height: auto;
	}

	.wist-seg-paso::after {
		display: none;
	}
}

/* ==================================================================
 * Detalle del pedido
 * ------------------------------------------------------------------
 * Marcado de WooCommerce, sin plantilla sobrescrita. Se le da el
 * mismo lenguaje que a las tarjetas del perfil: superficie, borde de
 * un pixel, radio de la escala y cabecera con filete.
 * ================================================================== */

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wist-ink-primary);
	margin: 0 0 var(--wist-space-200);
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-bottom: var(--wist-space-300);
}

.woocommerce-table--order-details {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wist-border-decorative);
	border-radius: var(--wist-radius-xl);
	overflow: hidden;
	background: var(--wist-surface);
	font-family: 'Inter', system-ui, sans-serif;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: var(--wist-space-200) var(--wist-space-300);
	border-bottom: 1px solid var(--wist-border-hairline);
	font-size: 0.9375rem;
	text-align: left;
	background: none;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

/* Los rotulos del pie son etiquetas, no titulos. */
.woocommerce-table--order-details tfoot th {
	font-weight: 500;
	color: var(--wist-ink-secondary);
	width: 50%;
}

.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details .product-total {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* La ultima fila del pie es el total: es la cifra que se busca. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 600;
	font-size: 1rem;
	color: var(--wist-ink-primary);
}

.woocommerce-table--order-details .includes_tax {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wist-ink-secondary);
}

.woocommerce-table__product-name a {
	color: var(--wist-ink-primary);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce-table__product-name a:hover {
	color: var(--wist-blue-base);
}

/* La cantidad va junto al nombre, atenuada: es un detalle del articulo,
   no una columna que se compare entre filas. */
.woocommerce-table__product-name .product-quantity {
	color: var(--wist-ink-secondary);
	font-weight: 400;
}

/* Dos colores fijos de la hoja de Bricks, sin variante oscura.
   `integrations/woocommerce-layer.min.css` pinta el pie de la tabla y la
   capsula de cantidad con `--bricks-bg-light`, que es claro siempre: en modo
   oscuro el pie salia blanco y las cifras desaparecian sobre el.
   No hay control de panel que alcance el `tfoot` ni `.product-quantity`,
   porque son marcado de WooCommerce dentro de la plantilla. Su hoja va en
   `@layer bricks`, asi que esta regla sin capa le gana sin forzar nada. */
.woocommerce-order-details table tfoot {
	background-color: transparent;
}

.woocommerce-order-details table .product-quantity {
	background-color: var(--wist-surface-nested);
	color: var(--wist-ink-secondary);
}

/* --- Direcciones ---------------------------------------------------- */

.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wist-space-200);
	margin: 0;
}

.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
	width: auto;
	float: none;
	margin: 0;
	padding: var(--wist-space-300);
	background: var(--wist-surface);
	border: 1px solid var(--wist-border-decorative);
	border-radius: var(--wist-radius-xl);
}

.woocommerce-customer-details address {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.6;
	font-style: normal;
	color: var(--wist-ink-secondary);
	border: 0;
	padding: 0;
	border-radius: 0;
}

@media (max-width: 767px) {
	.woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

/* --- La frase de estado del pedido ----------------------------------- */

/* WooCommerce la emite como un parrafo con tres <mark>. Sin trato queda
   como texto suelto pegado al borde superior. */
.woocommerce-order-details + p,
p.woocommerce-notice--info,
.woocommerce-MyAccount-content > p:first-of-type {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	color: var(--wist-ink-secondary);
}

.woocommerce-MyAccount-content mark {
	background: none;
	color: var(--wist-ink-primary);
	font-weight: 600;
}

/* =========================================================================
 * Paginación del listado de pedidos
 * -------------------------------------------------------------------------
 * La pinta tablas.php con paginate_links; la de WooCommerce, dos botones
 * sueltos sin números, se retira. Tamaño XS del master (sección 08: alto
 * 28, radio 0.625 rem, Inter 500 de 12 px): es el que corresponde a
 * controles junto a una tabla. Alineada a la derecha, donde estaba el
 * botón de WooCommerce, y con un bloque de aire por encima.
 * Es marcado propio, así que ningún control de Bricks lo alcanza.
 * ====================================================================== */
.woocommerce-MyAccount-content .woocommerce-pagination {
	display: none;
}

.wist-paginacion {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wist-space-100);
	margin-top: var(--wist-space-400);
	font-family: "Inter", sans-serif;
	font-variant-numeric: tabular-nums;
}

.wist-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.625rem;
	border-radius: var(--wist-radius-xs);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	color: var(--wist-ink-primary);
	background: var(--wist-surface);
	/* contorno con sombra interior, no con borde: no altera la caja (sección 08) */
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.wist-paginacion a.page-numbers:hover {
	background: var(--wist-surface-nested);
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive);
}

.wist-paginacion .page-numbers.current {
	background: var(--wist-blue-base);
	color: var(--wist-blue-on);
	box-shadow: none;
}

.wist-paginacion .page-numbers.dots {
	background: none;
	box-shadow: none;
	color: var(--wist-ink-secondary);
	min-width: auto;
	padding: 0 0.25rem;
}

.wist-paginacion .page-numbers svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Área táctil de 44 px sin cambiar el tamaño visual, como pide el master
   para los tamaños S y XS. */
.wist-paginacion a.page-numbers {
	position: relative;
}
.wist-paginacion a.page-numbers::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
}

/* ==================================================================
 * Mis datos (editar la cuenta)
 * ------------------------------------------------------------------
 * Plantilla sobrescrita woocommerce/myaccount/form-edit-account.php
 * (2026-10-07). Repite la cara del perfil (plantilla 5208), que es de
 * donde se llega con «Editar»: cabecera de 1,75 rem con su bajada y una
 * tarjeta con cabecera de filete y cuerpo de 24 px. Los valores son los de
 * los elementos mcphtt, mcphtd, mcpdat, c96881 y 58ec72; si cambian alli,
 * cambiar aqui.
 * ================================================================== */

.wist-datos {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-300);
	width: 100%;
}

.wist-datos__cabecera {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wist-datos__titulo {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wist-ink-primary);
}

.wist-datos__bajada {
	max-width: 60ch;
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	color: var(--wist-ink-secondary);
}

.wist-datos__tarjeta {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	border: 1px solid var(--wist-border-decorative);
	border-radius: var(--wist-radius-xl);
	background: var(--wist-surface);
}

.wist-datos__tarjeta-cabecera {
	padding: 16px 24px;
	border-bottom: 1px solid var(--wist-border-hairline);
}

.wist-datos__tarjeta-titulo {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wist-ink-primary);
}

/* Nombre y apellidos en dos columnas, el correo y las acciones a lo ancho. */
.wist-datos__cuerpo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wist-space-300);
	padding: 24px;
}

.wist-datos__cuerpo > .form-row-wide,
.wist-datos__acciones {
	grid-column: 1 / -1;
}

/* Las filas de WooCommerce flotan a menos de la mitad y traen margen
   propio: dentro de la rejilla sobran las dos cosas. Se iguala la acotacion
   de la regla global ("body.bricks-is-frontend .woocommerce form
   .form-row") y se suma una clase para ganarle. */
body.bricks-is-frontend .woocommerce form.wist-datos__tarjeta .form-row {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.bricks-is-frontend .woocommerce form.wist-datos__tarjeta .form-row input.input-text {
	width: 100%;
	max-width: 100%;
}

.wist-datos__tarjeta label {
	display: block;
	margin-bottom: var(--wist-space-100);
	color: var(--wist-ink-primary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

.wist-datos__tarjeta .required {
	color: var(--wist-ink-secondary);
}

.wist-datos__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wist-space-200);
}

/* Guardar: la acción de la tarjeta, en relleno; tamaño M del master. */
.wist-datos__acciones button[type="submit"] {
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--wist-radius-lg);
	background: var(--wist-blue-base);
	color: var(--wist-blue-on);
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
}

.wist-datos__acciones button[type="submit"]:hover {
	background: var(--wist-blue-base-hover);
}

.wist-datos__acciones button[type="submit"]:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

.wist-datos__volver,
.wist-datos__nota a {
	color: var(--wist-ink-secondary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wist-datos__volver:hover,
.wist-datos__nota a:hover {
	color: var(--wist-ink-primary);
}

.wist-datos__nota {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	color: var(--wist-ink-secondary);
}

@media (max-width: 767px) {

	.wist-datos__titulo {
		font-size: 1.5rem;
	}

	.wist-datos__cuerpo {
		grid-template-columns: 1fr;
	}
}